forestry-wx/src/pages/plant/index.vue

<template>
    <z-paging ref="paging" v-model="list" bgColor="#f7f7f7" @query="query" @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-40 c-333 f-w-5 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>
                </view>
                <view class="flex1 ov-hd mr-40">
                    <view class="p-rtv d-flex a-c mb-6">
                        <view class="flex1 ov-hd f-s-32 c-333 d-flex a-ed">
                            <text class="mr-12 up-line-1 f-w-5">{{ name }}</text>
                            <text class="c-999 f-s-24">{{ setCipByNum(phone, 3, 4) || '-' }}</text>
                        </view>
                    </view>
                    <view class="f-s-22 mr-10 b-radius pt-4 pb-4 pl-10 pr-10 c-primary"
                        style="width: max-content; background-color: #b7e8bc">
                        {{ cpyname }}
                    </view>
                </view>
            </view>
        </template>
        <template>
            <view class="p-rtv">
                <view class="pd-10 mg-14">
                    <view class="b-radius pd-6"
                        style="border: 1rpx solid #fff; background: linear-gradient(90deg, #c1f3c5 0%, rgba(193, 243, 197, 0.5) 20%, rgba(255, 255, 255, 0.5) 35%, rgba(255, 255, 255, 0.5) 50%, rgba(232, 255, 234, 0.5) 100%, #e8ffea 100%), linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0.3) 80%, transparent 100%)">
                        <view class="b-radius pd-10 p-rtv" style="border: 1rpx solid #baedbf">
                            <image class="w-200" src="/static/images/plant/typeofBusiness.png" mode="widthFix"
                                style="position: absolute; top: 10rpx; left: 10rpx" />
                            <view v-if="!speciesArray.length" class="pd-20"></view>
                            <view v-if="speciesArray.length" class="d-flex pr-15">
                                <view class="flex1"></view>
                                <view class="f-s-22 c-primary"
                                    @click="$u.route({ url: '/plant/species/config/index' })">去修改{{ '>' }}</view>
                            </view>
                            <view v-if="speciesArray.length" class="c-#333 f-s-24 d-flex pl-40 pr-15 pb-15 pt-15">
                                <view class="ov-hd tx-ov w-s-no">{{ speciesArray.join('、') }}</view>
                                <view v-if="speciesArray.length > 4" class="flex1 w-s-no">等{{ speciesArray.length }}个品种
                                </view>
                            </view>
                            <view v-if="!speciesArray.length" @click="$u.route({ url: '/plant/species/config/index' })"
                                class="c-primary bg-#E3F6E7 f-s-22 mg-at radius-10 w-250 h-50 d-flex a-c j-c">
                                暂未配置品种,去配置{{ '>' }}</view>
                            <view v-if="!speciesArray.length" class="pd-7"></view>
                        </view>
                    </view>
                </view>
                <view class="b-radius 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 pd-16 p-rtv">
                            <view class="c-333 f-s-32 f-w-5 z-index-1">基地与地块管理</view>
                            <view class="flex1"></view>
                            <view @click="$u.route({ url: '/plant/base/gap-base-info/index' })"
                                class="c-primary f-s-22 z-index-1">GAP基地获评信息管理{{ '>' }}</view>
                            <image src="/static/images/plant/basePlotBG.png" class="w-100%" mode="widthFix"
                                style="position: absolute; top: 0; left: 0; z-index: -1"></image>
                        </view>
                        <view class="d-flex a-c pt-20 pb-20 pl-16 pr-16 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">
                                        <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.keyword" @search="changeSeach" margin="0"
                                    :border="false" :placeholder="form.placeholder" bgColor="#fff" height="86rpx"
                                    borderRadius="10rpx"></ut-search>
                            </view>
                        </view>
                    </up-sticky>
                    <view class="pd-16">
                        <template>
                            <view v-for="(item, index) in list" :key="index" 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">
                                    <view class="c-333 f-s-28 pd-5">
                                        <text class="c-#666">基地面积：</text>
                                        <text class="f-w-5">12000亩</text>
                                    </view>
                                    <view class="flex1"></view>
                                    <view class="c-333 f-s-28 pd-5">
                                        <text class="c-#666">建设时间：</text>
                                        <text class="f-w-5">2003年</text>
                                    </view>
                                </view>
                                <view class="c-333 f-s-28 pd-5">
                                    <text class="c-#666">基地地址:</text>
                                    <text class="f-w-5">云南省红河州个旧市卡房镇田心村小田心村268号</text>
                                </view>
                                <view class="c-333 f-s-28 pd-5 d-flex">
                                    <text class="c-#666 w-s-no">当前在地品种:</text>
                                    <text
                                        class="ov-hd tx-ov w-s-no f-w-5">三七、天麻、徐长卿、白及、徐长卿、白及、三七、天麻、徐长卿、白及、徐长卿、白及</text>
                                    <text class="flex1 w-s-no f-w-5">等120个品种</text>
                                </view>
                                <view class="pd-10"></view>
                                <view class="p-rtv">
                                    <up-image width="100%"
                                        src="https://img1.baidu.com/it/u=436536502,2810995452&fm=253&fmt=auto&app=120&f=JPEG?w=820&h=500"
                                        mode="widthFix"> </up-image>
                                    <view class="pl-20 pr-20 pt-10 pb-10 bg-#00000080 c-#ccc f-s-20"
                                        style="position: absolute; bottom: 140rpx; right: 0; border-radius: 10rpx 0 0 10rpx">
                                        李思思负责</view>
                                    <view class="pl-20 pr-20 pt-10 pb-10 bg-#00000080 c-#ccc f-s-20"
                                        style="position: absolute; bottom: 80rpx; right: 0; border-radius: 10rpx 0 0 10rpx">
                                        公司+合作社</view>
                                    <view class="pl-20 pr-20 pt-10 pb-10 bg-#00000080 c-#ccc f-s-20"
                                        style="position: absolute; bottom: 20rpx; right: 0; border-radius: 10rpx 0 0 10rpx">
                                        经度:E64.63 纬度:N27.7385</view>
                                </view>
                            </view>
                        </template>

                    </view>
                </view>
            </view>
        </template>
        <template #empty>
            <ut-empty class="mg-at" color="#ccc" size="28rpx" image="/static/images/plant/noEmptyBase.png">尚未添加绘制种养殖基地信息~</ut-empty>
            <view class="b-radius c-#fff f-s-36 bg-#37A954 h-78 w-382 d-flex a-c j-c mg-at">
                <img class="w-38 h-36 mr-10" src="/static/images/plant/chooseGAP.png" alt="" mode="widthFix" />
                <text>去添加基地</text>
            </view>
        </template>
    </z-paging>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
import { setCipByNum } from '@/utils/public';
interface navbar {
    bottom: number;
    height: number;
    left: number;
    right: number;
    top: number;
    width: number;
    id: string;
    dataset?: any
}
const instance = getCurrentInstance();
const list = ref([]);
const paging = ref();
const bubble = ref(uni.getMenuButtonBoundingClientRect());
const avatar = ref();
const name = ref('神奇大侠');
const phone = ref('17708862791');
const cpyname = ref('智慧溯源有限公司');
const form = ref({ type: '', placeholder: '搜基地名称、编号、地址、负责人', keyword: '' });
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 = '#d9f8d6';
    } else {
        navBarBgColor.value = 'transparent';
    }
};
const query = async (pageNum: number, pageSize: number) => {
    const params = {
        pageNum,
        pageSize,
        ...form.value,
    };
    const res = await useClientRequest.get('/plt-api/app/base/pageList', params);
    console.log(res);
    const { rows } = res;
    paging.value.complete(rows);
};
// 查询企业的种植品种
const getSpecies = async () => {
    const res = await useClientRequest.get('/plt-api/app/cpyVariety/list');
    if (res.code === 200) {
        console.log(res);
        speciesArray.value = res.data.map((item) => item.varietyName)
    }
};

onMounted(() => {
    const querys = uni.createSelectorQuery().in(instance.proxy);
    querys
        .select('#topup-navbar')
        .boundingClientRect((data: any) => {
            stickyTop.value = data.top + data.height;
        })
        .exec();
    getSpecies()
    query(1, 10)
});

// setTimeout(() => {
//     useClientRequest.get('/time');
// }, 2000);
</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;
}
</style>