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

<template>
    <z-paging ref="paging" bgColor="#F7F7F7">
        <template #top v-if="!showHeader">
            <ut-navbar title="产地加工及包装赋码" :fixed="false" :breadcrumb="false">
                <template #left>
                    <view class=""></view>
                </template>
            </ut-navbar>

        </template>
        <template v-if="showHeader">
            <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` }">
                            <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 ?? null, 3, 4) || '-' }}</text>
                            </view>
                        </view>
                        <view class="f-s-22 mr-10 radius-30 pt-4 pb-4 pl-10 pr-10 c-primary bg-#b7e8bc"
                            style="width: max-content">
                            {{ currentCpyName }}
                        </view>
                    </view>
                </view>
            </template>
            <view class="pd-10 mg-14 mb-0 pb-0">
                <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="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/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>
        </template>

        <view class="pd-24 b-radius p-rtv"
            :style="showHeader ? 'background: linear-gradient(to bottom, #dcf8d9, #f7f7f7 70rpx); border: 1rpx solid #fff;' : ''">
            <!-- 产地加工卡片 -->
            <view class=" process-card" @click="$u.route({ url: '/plant/processing/processing-index/index' })">
                <view class="w-200 h-200 d-flex a-c j-c" style="flex-shrink: 0">
                    <image class="w-100% h-100%"
                        src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/processing/initial_processing.png"
                        mode="aspectFit" />
                </view>
                <view class="card-content">
                    <view class="f-s-46 c-#333 f-w-6 mb-12">产地加工</view>
                    <view class="card-desc">可对种子、鲜货进行初加工、趁鲜切制加工</view>
                </view>
            </view>
            <!-- 包装赋码卡片 -->
            <view class="process-card" @click="$u.route({ url: '/plant/packaging/list/index' })">
                <view class="w-200 h-200 d-flex a-c j-c" style="flex-shrink: 0">
                    <image class="w-100% h-100%"
                        src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/processing/packaging_coding.png"
                        mode="aspectFit" />
                </view>
                <view class="card-content">
                    <view class="f-s-46 c-#333 f-w-6 mb-12">包装赋码</view>
                    <view class="card-desc">可对种源、鲜货、药材进行包装</view>
                </view>
            </view>
        </view>
        <template #bottom>
            <ut-tabar activeTab="processing"></ut-tabar>
        </template>
    </z-paging>
</template>

<script setup lang="ts">
import { useInfoStore } from '@/store';
import { setCipByNum } from '@/utils/public';
import { useClientRequest } from '@/utils/request';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const infoStore = useInfoStore();
const instance = getCurrentInstance();
const navBarBgColor = ref('transparent');
const name = computed(() => infoStore.userInfo?.name || '');
const phone = computed(() => infoStore.userInfo?.phone || '');
const currentCpyName = computed(() => infoStore.userInfo?.currentCpyName || '');
const avatar = computed(() => infoStore.userInfo?.avatar || '');
const bubble = ref(uni.getMenuButtonBoundingClientRect());
const speciesArray = ref([]);
const stickyTop = ref(0);
// 根据 navConfig 判断是否显示头部：default 显示，custom 隐藏
const showHeader = computed(() => infoStore.navConfig !== 'default');


const getSpecies = async () => {
    const res = await useClientRequest.get('/plt-api/app/cpyVariety/list');
    if (res?.code === 200) {
        speciesArray.value = res.data?.map((item: any) => item.medicineName);
    }
};
onMounted(() => {
    if (showHeader.value) {
        const querys = uni.createSelectorQuery().in(instance?.proxy);
        querys
            .select('#topup-navbar')
            .boundingClientRect((data: any) => {
                console.log(data);
                stickyTop.value = data.top + data.height;
            })
            .exec();
        getSpecies();
    }
});
onShow(() => {
    if (showHeader.value) {
        getSpecies();
    }
});
</script>

<style lang="scss" scoped>
.process-card {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    padding: 30rpx 24rpx;
    // border: 2rpx solid #b8e6d5;
    // box-shadow:
    //     inset 0 5px 10px 9px #edf8f2,
    //     inset 0 -5px 10px -5px #edf8f2;
    // filter: drop-shadow(-1px 2px 3px #9ad4b6);

    overflow: hidden;
}

.card-image-wrapper {
    flex-shrink: 0;
}

.card-content {
    flex: 1;
    padding-left: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-desc {
    font-size: 24rpx;
    color: #999;
    line-height: 1.5;
}
</style>