上传图片

src/App.vue

@@ -23,7 +23,7 @@ onHide(() => {
 });
 </script>
 <style lang="scss">
-// @import "uview-plus/index.scss";
+@import "uview-plus/index.scss";
 @import '@/assets/styles/public.scss';
 @import '@/assets/styles/common.scss';
 @import '@/assets/styles/uview-plus.scss';

src/components/ut-confirm-dialog/ut-confirm-dialog.vue

@@ -1,3 +1,4 @@
+// 如果up-popup弹框的遮罩层被覆盖或者是变为白色，需要查看unocss配置，unocss把u-popup__content—transition转化为两个变量了，需要过滤
 <template>
     <up-popup :show="internalShow" mode="center" :round="16" :closeable="false" @close="handleClose" bgColor="transparent">
         <view class="confirm-dialog">
@@ -117,7 +118,6 @@ const handleConfirm = () => {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        border-bottom: 1rpx solid #f2f2f2;
 
         .dialog-title {
             font-size: 32rpx;
@@ -146,7 +146,6 @@ const handleConfirm = () => {
     .dialog-footer {
         display: flex;
         justify-content: space-between;
-        border-top: 1rpx solid #f2f2f2;
 
         .cancel-btn,
         .confirm-btn {

src/components/ut-empty/ut-empty.vue

@@ -1,9 +1,9 @@
 <template>
-    <view class="ut-empty d-flex flex-cln j-c a-c pd-30">
+    <view class="ut-empty d-flex flex-cln j-c a-c" :style="{ padding }">
         <view class="ut-empty__icon">
             <image :style="{ width, height }" :src="image" mode="aspectFit"></image>
         </view>
-        <view class="ut-empty__text f-s-24" style="margin-top: -50rpx" :style="{ color }">
+        <view class="ut-empty__text" style="margin-top: -50rpx" :style="{ color, fontSize: size }">
             <slot>
                 {{ text }}
             </slot>
@@ -32,5 +32,13 @@ const props = defineProps({
         type: String,
         default: '#ccc',
     },
+    size: {
+        type: String,
+        default: '24rpx',
+    },
+    padding: {
+        type: String,
+        default: '30rpx',
+    },
 });
 </script>

src/components/ut-search/ut-search.vue

@@ -96,7 +96,7 @@ defineExpose({
 }
 
 .search_icon {
-    width: 38rpx;
-    height: 38rpx;
+    width: 40rpx;
+    height: 40rpx;
 }
 </style>

src/main.ts

@@ -51,6 +51,7 @@ export function createApp() {
             '/pages/login/login', // 登录页
             '/pages/plant/index',
             '/plant/species/config/index',
+            '/plant/base/gap-base-info/index',
         ],
 
         // 自定义登录检查函数（返回 true 表示已登录）

src/pages/plant/index.vue

@@ -1,16 +1,21 @@
 <template>
-    <z-paging ref="paging" v-model="list" @onRefresh="onRefresh" bgColor="#f7f7f7">
-        <up-navbar :fixed="false" bgColor="rgba(0,0,0,0)">
-            <template #left>
-                <view class="d-flex a-c" :style="{ width: `${bubble.left - 30}px` }">
-                    <image class="home_icon mr-20" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/common/home.png" mode="widthFix" />
-                    <text class="f-s-42 c-333 f-w-5 mr-40">中药材种植全链条追溯</text>
-                    <view class="flex1"></view>
-                </view>
-            </template>
-        </up-navbar>
+    <z-paging ref="paging" v-model="list" @onRefresh="onRefresh" bgColor="#f7f7f7" @scroll="onPageScroll">
+        <template #top>
+            <up-navbar :fixed="true" :bgColor="navBarBgColor">
+                <template #left>
+                    <view class="d-flex a-c pb-5" id="topup-navbar" :style="{ width: `${bubble.left - 30}px` }">
+                        <image class="home_icon mr-20" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/common/home.png" mode="widthFix" />
+                        <text class="f-s-42 c-333 f-w-5 mr-40 w-s-no">中药材种植全链条追溯</text>
+                        <view class="flex1"></view>
+                    </view>
+                </template>
+            </up-navbar>
+        </template>
         <view class="h-500 w-100%" style="background: linear-gradient(to left, #d2f7d5, #eafad8); position: absolute; top: 0; left: 0; z-index: -1"></view>
         <template>
+            <up-navbar :fixed="false" bgColor="transparent">
+                <template #left><view class="pd-10"></view></template>
+            </up-navbar>
             <view class="user-page-header pd-10 d-flex a-c mg-14 p-rtv">
                 <view class="user-page-header-avatar mr-20 p-rtv">
                     <up-avatar size="116rpx" :src="avatar || 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/common/avatar.png'"></up-avatar>
@@ -47,14 +52,14 @@
                         </view>
                     </view>
                 </view>
-                <view class="b-radius pd-16 bg-#f7f7f7" style="border: 1rpx solid #fff; border-bottom-color: transparent; margin-top: -40rpx">
-                    <view class="d-flex a-c">
-                        <view class="c-333 f-s-32 f-w-5">基地与地块管理</view>
-                        <view class="flex1"></view>
-                        <view class="c-primary f-s-22">GAP基地获评信息管理{{ '>' }}</view>
-                    </view>
-                    <view class="">
-                        <view class="d-flex a-c pt-20 mb-20">
+                <view class="b-radius pd-16 pt-0 bg-#f7f7f7" style="border: 1rpx solid #fff; border-bottom-color: transparent; margin-top: -40rpx">
+                    <up-sticky :offset-top="stickyTop">
+                        <view class="d-flex a-c bg-#f7f7f7 pt-16">
+                            <view class="c-333 f-s-32 f-w-5">基地与地块管理</view>
+                            <view class="flex1"></view>
+                            <view @click="$u.route({ url: '/plant/base/gap-base-info/index' })" class="c-primary f-s-22">GAP基地获评信息管理{{ '>' }}</view>
+                        </view>
+                        <view class="d-flex a-c pt-20 pb-20 bg-#f7f7f7">
                             <view class="min-w-170 flex1">
                                 <ut-action-sheet v-model="form.type" :tabs="[{ label: '全部', value: '' }]" @change="onRefresh" title="选择原料类型">
                                     <view class="d-flex search-select-item a-c">
@@ -67,8 +72,10 @@
                                 <ut-search ref="searchRef" v-model="form.keywords" @search="changeSeach" margin="0" :border="false" :placeholder="form.placeholder" bgColor="#fff" height="86rpx" borderRadius="10rpx"></ut-search>
                             </view>
                         </view>
+                    </up-sticky>
+                    <view class="">
                         <template>
-                            <view class="b-radius bg-#fff pd-20 mb-20">
+                            <view v-for="item in 10" :key="item" class="b-radius bg-#fff pd-20 mb-20">
                                 <view class="c-333 f-s-34 pd-5 f-w-5">德钦县拖顶乡洛沙村各加尼拉基地</view>
                                 <view class="c-ccc f-s-24 pd-5 pt-0">DQTDLSC00156768951001</view>
                                 <view class="d-flex a-c">
@@ -113,6 +120,7 @@
 <script setup lang="ts">
 import { useClientRequest } from '@/utils/request';
 import { setCipByNum } from '@/utils/public';
+const instance = getCurrentInstance();
 const list = ref([]);
 const paging = ref();
 const bubble = ref(uni.getMenuButtonBoundingClientRect());
@@ -122,12 +130,34 @@ const phone = ref('17708862791');
 const cpyname = ref('智慧溯源有限公司');
 const form = ref({ type: '', placeholder: '搜基地名称、编号、地址、负责人', keywords: '' });
 const speciesArray = ref(['']);
+const navBarBgColor = ref('transparent');
+const stickyTop = ref(0);
 const changeSeach = () => {
     paging.value.reload();
 };
 const onRefresh = () => {
     paging.value.reload();
 };
+const onPageScroll = (e) => {
+    const { scrollTop } = e.detail;
+    if (scrollTop > 20) {
+        navBarBgColor.value = '#eafad8';
+    } else {
+        navBarBgColor.value = 'transparent';
+    }
+};
+onMounted(() => {
+    const query = uni.createSelectorQuery().in(instance.proxy);
+    query
+        .select('#topup-navbar')
+        .boundingClientRect((data) => {
+            stickyTop.value = data.top + data.height;
+            console.log(data.top + data.height);
+            console.log('得到布局位置信息' + JSON.stringify(data));
+            console.log('节点离页面顶部的距离为' + data.top);
+        })
+        .exec();
+});
 // setTimeout(() => {
 //     useClientRequest.get('/time');
 // }, 2000);

src/plant/base/gap-base-info/index.vue

@@ -1,3 +1,160 @@
 <template>
-    <view>页面内容</view>
-</template>
+    <z-paging ref="paging" v-model="list" @onRefresh="onRefresh" bgColor="#f7f7f7" @query="query" safe-area-inset-bottom>
+        <template #top>
+            <up-navbar title="GAP基地信息" @leftClick="navigateBackOrHome()" :fixed="false"></up-navbar>
+            <view class="d-flex a-c pd-25">
+                <view class="min-w-170 flex1">
+                    <ut-action-sheet v-model="form.type" :tabs="tabs" @change="onRefresh" title="选择基地类型">
+                        <view class="d-flex search-select-item a-c">
+                            <view class="flex1 ov-hd f-s-28 c-333 text-center f-w-5 w-s-no">{{ '全部' }}</view>
+                            <up-icon size="24rpx" color="#333" name="arrow-down-fill" class="mr-5"></up-icon>
+                        </view>
+                    </ut-action-sheet>
+                </view>
+                <view class="h-86 pl-20 w-100%">
+                    <ut-search ref="searchRef" v-model="form.keywords" @search="onRefresh" margin="0" :border="false" :placeholder="placeholder" bgColor="#fff" height="86rpx" borderRadius="10rpx"></ut-search>
+                </view>
+            </view>
+        </template>
+
+        <template>
+            <template>
+                <view class="pl-20 pr-20">
+                    <up-swipe-action>
+                        <up-swipe-action-item v-for="item in list" :name="item?.id" :key="item?.id" :options="optionsAction" @click="clickSwipe" class="mb-20">
+                            <view class="b-radius bg-#fff pd-20">
+                                <view class="c-#333 f-s-34 f-w-5 pb-5">德钦县拖顶乡洛沙村各尼拉三七GAP基地</view>
+                                <view class="c-#999 f-s-24 pb-20">2025年-05-12获评</view>
+                                <view class="d-flex pb-5">
+                                    <view class="w-50%">
+                                        <text class="c-#666 f-s-28">种养殖品种:</text>
+                                        <text class="c-#333 f-s-28 f-w-5">三七</text>
+                                    </view>
+                                    <view class="w-50%">
+                                        <text class="c-#666 f-s-28">基地面积:</text>
+                                        <text class="c-#333 f-s-28 f-w-5">120亩</text>
+                                    </view>
+                                </view>
+                                <view class="border-bottom-#f7f7f7 pb-20">
+                                    <text class="c-#666 f-s-28">基地地址:</text>
+                                    <text class="c-#333 f-s-28 f-w-5">云南省红河州个旧市卡房镇田心村小田心村268号工业园</text>
+                                </view>
+                                <view class="pl-5 pr-5 pt-20 pb-20 border-top-#f7f7f7 c-#FC333F">
+                                    <text class="f-s-28">审核不通过原因:</text>
+                                    <text class="f-s-28">云南省红河州个旧市卡房镇田心村小田心村268号工业园</text>
+                                </view>
+                            </view>
+                        </up-swipe-action-item>
+                    </up-swipe-action>
+                </view>
+            </template>
+            <!-- 空数据处理 -->
+            <template v-if="!address && list.length === 0">
+                <ut-empty class="mg-at" size="28rpx" color="#999" padding="10rpx">非云南省内企业，无法获取已获评的GAP基地信息~</ut-empty>
+                <view class="d-flex j-c f-s-28 c-#ccc">可点击底部按钮上传佐证材料添加获评信息</view>
+            </template>
+            <template v-if="address && list.length === 0">
+                <ut-empty class="mg-at" size="28rpx" color="#999" padding="10rpx">暂无获评GAP基地信息~</ut-empty>
+                <view class="d-flex j-c f-s-28 c-#ccc">如需认定GAP基地，可前往数字云药官网进行申报</view>
+                <view class="d-flex j-c f-s-28 c-primary pd-15">https://www.shuziyunyao.com/</view>
+                <up-button type="primary" class="b-radius" style="width: 340rpx" @click="copyText('https://www.shuziyunyao.com/')">复制网址</up-button>
+            </template>
+        </template>
+        <template #bottom v-if="!address">
+            <view class="base-bottom-wrap pd-20 pb-0">
+                <up-button type="primary">添加GAP基地信息</up-button>
+            </view>
+        </template>
+    </z-paging>
+</template>
+<script setup lang="ts">
+import { copyText } from '@/utils/public';
+interface ListItem {
+    id: number;
+    name: string;
+}
+const paging = ref();
+const list = ref<ListItem[]>([]);
+const placeholder = ref('搜基地名称、品种、基地地址');
+const tabs = ref([
+    { label: '全部', value: '' },
+    { label: '有效', value: '0' },
+    { label: '审核不通过', value: '1' },
+    { label: '待审核', value: '2' },
+]);
+// 判断是否是云南的企业
+const address = ref(false);
+const form = ref({
+    keywords: '',
+    type: '',
+});
+setTimeout(() => {
+    address.value = true;
+}, 2000);
+const query = async (pageNum: number, pageSize: number) => {
+    const params = {
+        pageNum,
+        pageSize,
+        ...form.value,
+    };
+    // const res = await cpyList(params);
+    let res: ListItem[] = [];
+    //循环push10条数据
+    for (let i = 0; i < 10; i++) {
+        res.push({
+            id: i + 1,
+            name: `${i + 1}`,
+        });
+    }
+    // const { rows } = res;
+    paging.value.complete(res);
+};
+const onRefresh = () => {
+    paging.value.reload();
+};
+// 处理地块数据
+const showAction = ref(false);
+const optionsAction = reactive([
+    {
+        text: '删除',
+        style: {
+            backgroundColor: '#f56c6c',
+        },
+    },
+]);
+const clickSwipe = (index: object) => {
+    console.log(index);
+};
+</script>
+<style lang="scss" scoped>
+// @import '@/assets/styles/theme.scss';
+.search-select-item {
+    height: 86rpx;
+    background-color: #fff;
+    border-radius: 10rpx;
+    box-sizing: border-box;
+    padding-left: 16rpx;
+    padding-right: 16rpx;
+    padding-top: 14rpx;
+    padding-bottom: 14rpx;
+}
+.u-page {
+    padding: 0;
+}
+
+.u-demo-block__title {
+    padding: 10px 0 2px 15px;
+}
+
+.swipe-action {
+    &__content {
+        padding: 25rpx 0;
+
+        &__text {
+            font-size: 15px;
+            color: $u-main-color;
+            padding-left: 30rpx;
+        }
+    }
+}
+</style>

src/plant/species/config/index.vue

@@ -1,14 +1,18 @@
 <template>
     <z-paging ref="paging" v-model="list" @onRefresh="onRefresh" bgColor="#fff" @query="query" :auto="false" safe-area-inset-bottom>
-        <up-navbar :title="title" @leftClick="navigateBackOrHome()" :fixed="false"></up-navbar>
-        <up-sticky offset-top="10" class="pd-20">
-            <ut-search ref="searchRef" v-model="form.keywords" @search="changeSeach" @change="changeSeach" margin="0" :border="false" :placeholder="placeholder" bgColor="#f7f7f7" height="86rpx" borderRadius="16rpx"></ut-search>
-        </up-sticky>
+        <template #top>
+            <view class="">
+                <up-navbar :title="title" @leftClick="navigateBackOrHome()" :fixed="false"></up-navbar>
+                <view class="pd-20">
+                    <ut-search ref="searchRef" v-model="form.keywords" @search="changeSeach" @change="changeSeach" margin="0" :border="false" :placeholder="placeholder" bgColor="#f7f7f7" height="86rpx" borderRadius="16rpx"></ut-search>
+                </view>
+            </view>
+        </template>
         <template v-if="list.length == 0 && !form.keywords.trim()">
             <view class="pd-20">
                 <view class="f-s-32 c-333 f-w-5 mb-20">已配置的主营品种</view>
                 <!-- speLable 组件使用示例 -->
-                <view class="d-flex a-c f-w-wrap">
+                <view class="d-flex a-c f-w-w">
                     <spe-lable class="mr-20 mb-20" v-for="(item, index) in speArray" :key="index" :text="item?.name" size="30rpx" :id="item?.id" @close="() => handleLabelClose(item?.id)" />
                 </view>
                 <ut-empty class="mg-at" v-if="speArray.length == 0">
@@ -65,6 +69,12 @@ setTimeout(() => {
         { id: 1, name: '三七' },
         { id: 2, name: '天麻' },
         { id: 3, name: '白及' },
+        { id: 4, name: '重楼' },
+        { id: 5, name: '大麻' },
+        { id: 6, name: '黄精' },
+        { id: 7, name: '地黄' },
+        { id: 8, name: '附子' },
+        { id: 9, name: '紫河车' },
     ];
 }, 200);
 // 处理标签关闭事件

unocss.config.js

@@ -141,6 +141,26 @@ export default defineConfig({
                 'border-width': `${num}rpx`,
             }),
         ],
+        // 顶部边框
+        [
+            /^border-top-([\w#-]+)$/,
+            ([_, color]) => ({
+                'border-top-color': color,
+                'border-top-style': 'solid',
+                'border-top-width': '1rpx',
+                transform: 'rotate(360deg)',
+            }),
+        ],
+        // 尾部边框
+        [
+            /^border-bottom-([\w#-]+)$/,
+            ([_, color]) => ({
+                'border-bottom-color': color,
+                'border-bottom-style': 'solid',
+                'border-bottom-width': '1rpx',
+                transform: 'rotate(360deg)',
+            }),
+        ],
         // 旋转度数
         [
             /^rotate-([\-\.\d]+)$/,
@@ -176,15 +196,15 @@ export default defineConfig({
             },
         },
     ],
-    // theme: {
-    //     colors: {
-    //         /** 主题色，用法如: text-primary */
-    //         primary: 'var(--wot-color-theme,#0957DE)',
-    //     },
-    //     fontSize: {
-    //         /** 提供更小号的字体，用法如：text-2xs */
-    //         '2xs': ['20rpx', '28rpx'],
-    //         '3xs': ['18rpx', '26rpx'],
-    //     },
-    // },
+    theme: {
+        colors: {
+            /** 主题色，用法如: text-primary */
+            primary: 'var(--wot-color-theme,#0957DE)',
+        },
+        fontSize: {
+            /** 提供更小号的字体，用法如：text-2xs */
+            '2xs': ['20rpx', '28rpx'],
+            '3xs': ['18rpx', '26rpx'],
+        },
+    },
 });