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

<template>
    <z-paging ref="paging" v-model="list" bgColor="#f7f7f7" @query="query" safe-area-inset-bottom>
        <template #top>
            <ut-navbar title="种养殖任务" :fixed="false">
                <template #left><view class=""></view></template>
            </ut-navbar>
        </template>
        <view class="d-flex a-c pd-24 pb-0 bg-#f7f7f7">
            <view class="min-w-170 flex1">
                <ut-action-sheet v-model="form.queryType" :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="搜批次号、品种名、基地名" bgColor="#fff" height="86rpx" borderRadius="10rpx"></ut-search>
            </view>
        </view>
        <view class="pd-24 bg-#f7f7f7" :style="{ width: windowInfo ? windowInfo.screenWidth - 26 + 'px' : '100%' }">
            <up-subsection :list="subList" :current="subCurrent" @change="sectionChange" style="width: 100%; height: 100rpx; background-color: #fff" inactive-color="#999" active-color="#37A954" fontSize="36rpx" mode="subsection"></up-subsection>
        </view>
        <!-- 养殖 -->
        <view class="pd-24 pt-0">
            <view class="b-radius bg-#fff pd-10">
                <view class="d-flex j-ed f-s-22 c-#666"> 2025-12-25 </view>
                <view class="d-flex a-ed pd-16 pt-8 pb-8">
                    <view class="c-#333 f-s-34 f-w-5 mr-6"> 美洲大蠊</view>
                    <view class="c-#666 f-s-26">虫卵属蓝棵</view>
                </view>
                <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                    <view class="c-#666 w-s-no">养殖批号：</view>
                    <view class="c-#333 f-w-5">1231231231232</view>
                </view>
                <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                    <view class="c-#666 w-s-no">种源批号：</view>
                    <view class="c-#333 f-w-5">1231231231232</view>
                </view>
                <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                    <view class="c-#666 w-s-no">基地：</view>
                    <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">123112312312312312312312312312312312312312312323</view>
                    <view class="flex1 d-flex j-ed"><up-icon name="arrow-right" size="34rpx"></up-icon></view>
                </view>
                <view class="d-flex f-s-28 pd-16 pt-8 pb-8">
                    <view class="d-flex a-c w-50%">
                        <view class="c-#666 w-s-no">养殖区域：</view>
                        <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">20亩</view>
                    </view>
                    <view class="d-flex a-c w-50%">
                        <view class="c-#666 w-s-no">养殖量：</view>
                        <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">120000</view>
                    </view>
                </view>
                <view class="pd-16 pt-8 pb-8">
                    <up-line color="#f7f7f7"></up-line>
                </view>
                <view class="pd-16 pt-8 pb-8 d-flex j-sb gap-20">
                    <up-button :customStyle="customStyle1">种源信息</up-button>
                    <up-button :customStyle="customStyle2">饲养管理</up-button>
                    <up-button :customStyle="customStyle3">采收管理</up-button>
                </view>
            </view>
        </view>
        <!-- 种苗繁育 -->
        <view class="pd-24 pt-0">
            <view class="b-radius bg-#fff pd-10">
                <view class="d-flex j-ed f-s-22 c-#666"> 2025-12-25 </view>
                <view class="d-flex a-ed pd-16 pt-8 pb-8">
                    <view class="c-#333 f-s-34 f-w-5 mr-6"> 美洲大蠊</view>
                    <view class="c-#666 f-s-26">虫卵属蓝棵</view>
                </view>
                <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                    <view class="c-#666 w-s-no">繁育批号：</view>
                    <view class="c-#333 f-w-5">1231231231232</view>
                </view>
                <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                    <view class="c-#666 w-s-no">种源批号：</view>
                    <view class="c-#333 f-w-5">1231231231232</view>
                </view>
                <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                    <view class="c-#666 w-s-no">基地：</view>
                    <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">123112312312312312312312312312312312312312312323</view>
                    <view class="flex1 d-flex j-ed"><up-icon name="arrow-right" size="34rpx"></up-icon></view>
                </view>
                <view class="d-flex f-s-28 pd-16 pt-8 pb-8">
                    <view class="d-flex a-c w-50%">
                        <view class="c-#666 w-s-no">种植面积：</view>
                        <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">20亩</view>
                    </view>
                    <view class="d-flex a-c w-50%">
                        <view class="c-#666 w-s-no">繁育量：</view>
                        <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">120000</view>
                    </view>
                </view>
                <view class="pd-16 pt-8 pb-8">
                    <up-line color="#f7f7f7"></up-line>
                </view>
                <view class="pd-16 pt-8 pb-8 d-flex j-sb gap-20">
                    <up-button :customStyle="customStyle1">种源信息</up-button>
                    <up-button :customStyle="customStyle2">种植管理</up-button>
                    <up-button :customStyle="customStyle3">采收管理</up-button>
                </view>
            </view>
        </view>
        <!-- 种植 -->
        <view class="pd-24 pt-0">
            <view class="b-radius bg-#fff pd-10">
                <view class="d-flex j-ed f-s-22 c-#666"> 2025-12-25 </view>
                <view class="d-flex a-ed pd-16 pt-8 pb-8">
                    <view class="c-#333 f-s-34 f-w-5 mr-6"> 美洲大蠊</view>
                    <view class="c-#666 f-s-26">虫卵属蓝棵</view>
                </view>
                <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                    <view class="c-#666 w-s-no">种植批号：</view>
                    <view class="c-#333 f-w-5">1231231231232</view>
                </view>
                <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                    <view class="c-#666 w-s-no">种源批号：</view>
                    <view class="c-#333 f-w-5">1231231231232</view>
                </view>
                <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                    <view class="c-#666 w-s-no">基地：</view>
                    <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">123112312312312312312312312312312312312312312323</view>
                    <view class="flex1 d-flex j-ed"><up-icon name="arrow-right" size="34rpx"></up-icon></view>
                </view>
                <view class="d-flex f-s-28 pd-16 pt-8 pb-8">
                    <view class="d-flex a-c w-50%">
                        <view class="c-#666 w-s-no">种植面积：</view>
                        <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">20亩</view>
                    </view>
                    <view class="d-flex a-c w-50%">
                        <view class="c-#666 w-s-no">种植量：</view>
                        <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">120000</view>
                    </view>
                </view>
                <view class="pd-16 pt-8 pb-8">
                    <up-line color="#f7f7f7"></up-line>
                </view>
                <view class="pd-16 pt-8 pb-8 d-flex j-sb gap-20">
                    <up-button :customStyle="customStyle1">种源信息</up-button>
                    <up-button :customStyle="customStyle2">种植管理</up-button>
                    <up-button :customStyle="customStyle3">采收管理</up-button>
                </view>
            </view>
        </view>
        <!-- 种畜繁育 -->
        <view class="pd-24 pt-0">
            <view class="b-radius bg-#fff pd-10">
                <view class="d-flex j-ed f-s-22 c-#666"> 2025-12-25 </view>
                <view class="d-flex a-ed pd-16 pt-8 pb-8">
                    <view class="c-#333 f-s-34 f-w-5 mr-6"> 美洲大蠊</view>
                    <view class="c-#666 f-s-26">虫卵属蓝棵</view>
                </view>
                <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                    <view class="c-#666 w-s-no">繁育批号：</view>
                    <view class="c-#333 f-w-5">1231231231232</view>
                </view>
                <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                    <view class="c-#666 w-s-no">种源批号：</view>
                    <view class="c-#333 f-w-5">1231231231232</view>
                </view>
                <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                    <view class="c-#666 w-s-no">基地：</view>
                    <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">123112312312312312312312312312312312312312312323</view>
                    <view class="flex1 d-flex j-ed"><up-icon name="arrow-right" size="34rpx"></up-icon></view>
                </view>
                <view class="d-flex f-s-28 pd-16 pt-8 pb-8">
                    <view class="d-flex a-c w-50%">
                        <view class="c-#666 w-s-no">养殖区域：</view>
                        <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">20亩</view>
                    </view>
                    <view class="d-flex a-c w-50%">
                        <view class="c-#666 w-s-no">养殖量：</view>
                        <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">120000</view>
                    </view>
                </view>
                <view class="pd-16 pt-8 pb-8">
                    <up-line color="#f7f7f7"></up-line>
                </view>
                <view class="pd-16 pt-8 pb-8 d-flex j-sb gap-20">
                    <up-button :customStyle="customStyle1">种源信息</up-button>
                    <up-button :customStyle="customStyle2">饲养管理</up-button>
                    <up-button :customStyle="customStyle3">采收管理</up-button>
                </view>
            </view>
        </view>
        <view class="h-210" v-if="list?.length"></view>
        <view v-if="list?.length" :style="{ height: `${safeAreaBottom}px` }"></view>
        <template #empty>
            <view class="d-flex flex-cln a-c" style="margin-top: -200rpx">
                <ut-empty class="mg-at" color="#ccc" size="28rpx" image="/static/images/plant/noEmptyBase.png">暂无进行中的养殖任务</ut-empty>
                <text class="c-#ccc f-s-28">点击下方按钮去添加吧～</text>
            </view>
        </template>
        <template #bottom>
            <ut-tabar activeTab="planting"></ut-tabar>
        </template>
    </z-paging>
    <ut-suspension v-if="sus?.left" :imageWidth="60" :imageHeight="60" :x="sus?.left" :y="sus?.bottom" :inertia="false" :snap-threshold="40">
        <image src="/static/images/plant/addBase.png" mode="widthFix" class="w-120 h-120" @click="showDeleteDialog = true"></image>
    </ut-suspension>
    <ut-confirm-dialog v-model:show="showDeleteDialog" width="80vw" title="请选择要创建的任务类型" :confirmText="'确认选择'" :cancelText="'取消'" @confirm="handlechoseConfirm" @cancel="handleDeleteCancel">
        <view class="" v-for="item in pt_task_type" :key="item?.value">
            <view style="border: 1rpx solid" :style="{ backgroundColor: item?.value == basetype ? '#EBF6EE' : '#f7f7f7', borderColor: item?.value == basetype ? '#37A954' : 'transparent' }" class="pr-30 d-flex a-c mb-20 radius-100" @click="handlechose(item.value)">
                <view class="radius-50% mg-8">
                    <up-avatar size="90rpx" :src="item?.avatar || 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/common/avatar.png'" class="mr-20"></up-avatar>
                </view>
                <view class="c-#333 f-s-34">
                    {{ item?.label }}
                </view>
                <view class="flex1"></view>
                <view class="d-flex">
                    <img v-if="basetype === item.value" class="w-30 h-30" src="/static/images/plant/chooseSuccessfully.png" mode="widthFix" alt="" />
                </view>
            </view>
        </view>
    </ut-confirm-dialog>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
import { onShareAppMessage } from '@dcloudio/uni-app';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_task_type } = toRefs<any>(proxy?.useDict('pt_task_type'));
setTimeout(() => {
    console.log(pt_task_type.value, 'pt_task_type');
}, 2000);

const list = ref<unknown[]>();
const form = ref({ queryType: '', keyword: '' });
const paging = ref();
const windowInfo = uni.getWindowInfo();
const safeAreaBottom = windowInfo.safeAreaInsets.bottom;
const systemInfo = uni.getSystemInfoSync();
const sus = ref({
    left: 0,
    bottom: 0,
});
sus.value.left = systemInfo.windowWidth - 10;
sus.value.bottom = systemInfo.windowHeight - 200;
//分段器的配置
const subList = ref(['进行中', '已结束']);
const subCurrent = ref(0);
const sectionChange = (index: number) => {
    subCurrent.value = index;
    paging.value.reload();
};
const changeSeach = () => {
    paging.value.reload();
};
const query = async (pageNum: number, pageSize: number) => {
    const params = {
        pageNum,
        pageSize,
        ...form.value,
    };
    const res = await useClientRequest.get('/plt-api/app/base/pageList', params);
    if (res) {
        const { rows } = res;
        paging.value.complete(rows);
    }
};
//按钮样式
const customStyle1 = reactive({
    color: '#37A954',
    boxShadow: 'inset 0 0 10px #D7F5DF',
    background: '#ECFFF1',
    border: '2rpx solid #9BD4A9',
    borderRadius: '10rpx',
    height: '76rpx',
});
const customStyle2 = reactive({
    color: '#18BECA',
    boxShadow: 'inset 0 0 10px #C7F5F8',
    background: '#E5FDFF',
    border: '2rpx solid #93E8EE',
    borderRadius: '10rpx',
    height: '76rpx',
});
const customStyle3 = reactive({
    color: '#FC8834',
    boxShadow: 'inset 0 0 10px #FFEED7',
    background: '#FFFAF3',
    border: '2rpx solid #FFD499',
    borderRadius: '10rpx',
    height: '76rpx',
});
const onRefresh = () => {
    paging.value.reload();
};
//选择创建类型
const showDeleteDialog = ref(false);
const basetype = ref();
const handlechose = (item: string) => {
    basetype.value = item;
};
// 处理取消
const handleDeleteCancel = () => {
    showDeleteDialog.value = false;
    basetype.value = null;
};
const handlechoseConfirm = () => {
    uni.$u.route({ type: 'navigateTo', url: '/plant/port/port-create/index', params: { taskType: basetype.value } });
};
</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;
}
:deep(.u-subsection__item) {
    border: 1px solid transparent !important;
}
</style>