feiniao-farm-h5/src/views/old_mini/home/subPages/prescriptionPage.vue

<template>
    <div class="prescription-page">
        <div class="prescription-title">
            <img @click="goBack" src="@/assets/img/home/back.png" alt="" />
            <div class="title-name">农场基本信息</div>
            <div class="title-desc">请认真核对一下内容</div>
        </div>
        <div class="prescription-box">
            <div class="box-title">
                <img src="@/assets/img/home/label-icon.png" />
                农场情况
            </div>
            <div class="box-content">
                <div class="box-item" v-for="(group, i) in productList" :key="i">
                    <div class="item-name">
                        <span class="required-icon">*</span>
                        <span>{{ group.name }}</span>
                    </div>
                    <div class="tips">{{ group.subName }}</div>
                    <div class="item-checkbox">
                        <el-radio-group v-model="group.checked">
                            <el-radio-button
                                v-for="(item, index) in group.items"
                                :key="index"
                                :label="item.name"
                                :value="item.name"
                            />
                        </el-radio-group>
                    </div>
                </div>
                <!-- 农场规模 -->
                <div class="farm-scale-header">
                    <div class="farm-scale-title">请填写您的农场规模</div>
                    <div class="farm-scale-desc">农闲时可以提供农事服务，获取额外收益</div>
                </div>
                <div class="farm-scale-form">
                    <div class="farm-scale-item">
                        <label class="farm-scale-label">一般长工人数</label>
                        <el-input
                            v-model="farmScale.longTermWorker"
                            placeholder="请输入人数"
                            class="farm-scale-input"
                        >
                            <template #append>人</template>
                        </el-input>
                    </div>
                    <div class="farm-scale-item">
                        <label class="farm-scale-label">植保技能人数</label>
                        <el-input
                            v-model="farmScale.plantProtection"
                            placeholder="请输入人数"
                            class="farm-scale-input"
                        >
                            <template #append>人</template>
                        </el-input>
                    </div>
                    <div class="farm-scale-item">
                        <label class="farm-scale-label">剪枝技能人数</label>
                        <el-input
                            v-model="farmScale.pruning"
                            placeholder="请输入人数"
                            class="farm-scale-input"
                        >
                            <template #append>人</template>
                        </el-input>
                    </div>
                </div>
                <div class="box-item" v-for="(group, i) in farmScaleList" :key="i">
                    <div class="item-name">
                        <span class="required-icon">*</span>
                        <span>{{ group.name }}</span>
                    </div>
                    <div class="tips">{{ group.subName }}</div>
                    <div class="item-checkbox">
                        <el-radio-group v-model="group.checked">
                            <el-radio-button
                                v-for="(item, index) in group.items"
                                :key="index"
                                :label="item.name"
                                :value="item.name"
                            />
                        </el-radio-group>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- <div class="prescription-box">
            <div class="box-title">
                <img src="@/assets/img/home/label-icon.png" />
                过往出现过的灾害 (多选)
            </div>
            <div class="box-content">
                <div class="box-item" style="padding-top: 0">
                    <div class="item-checkbox">
                        <el-checkbox-group v-model="outputVal">
                            <el-checkbox-button v-for="(item, index) in outputList" :key="index" :value="item.name">
                                {{ item.name }}
                            </el-checkbox-button>
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
            <div class="disaster-desc-box">
                <span>其它异常</span>
                <el-input
                    v-model="disasterDesc"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea"
                    placeholder="请简单描述一下异常情况"
                />
            </div>
        </div> -->

        <!-- 按钮 -->
        <div class="custom-bottom-fixed-btns">
            <div class="bottom-btn secondary-btn" @click="handlePage">跳过</div>
            <div class="bottom-btn primary-btn" @click="handlePage">确认信息</div>
        </div>
    </div>
</template>

<script setup>
import { ref, onActivated } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const productList = ref([
    { name: "请选择您的果园土壤类型", subName:'土壤类型确认最佳施肥策略',items: [{ name: "砂质土" }, { name: "黏质土" }, { name: "壤土" }] },
    { name: "请选择您的灌溉方式",subName:'处方执行方式，根据您的灌溉设施确定', items: [{ name: "人工浇灌" }, { name: "人工喷灌" }, { name: "微喷灌" },{name:'滴灌'}] },
    { name: "请选择您的农机设备",subName:'农机可以加入农机租赁库，在农闲时获取额外收益', items: [{ name: "植保无人机" }, { name: "骑乘式割草机" },{name:'乘坐式喷药机'},{name:'果园运输车'},{name:'果园碎枝机'},{name:'农用吊运无人机'}] },
]);
const farmScaleList = ref([
    { name: "您最想改善的方向",items: [{ name: "病虫防治" }, { name: "树势不良" }, { name: "土壤板结" },{name:'保花保果'},{name:'品种改良'},{name:'树体剪枝'},{name:'果园规划'}] },
]);
const outputList = ref([
    { name: "低温冻害" },
    { name: "干旱" },
    { name: "暴雨渍水" },
    { name: "病虫害" },
    { name: "阴天寡照" },
]);
// 默认选中前两项
const outputVal = ref([]);
const disasterDesc = ref("");
// 农场规模
const farmScale = ref({
    longTermWorker: "",
    plantProtection: "",
    pruning: "",
});
// 初始化默认选中第一项
onActivated(() => {
    // outputVal.value = outputList.value.length >= 2
    //     ? [outputList.value[0].name, outputList.value[1].name]
    //     : outputList.value.length === 1
    //     ? [outputList.value[0].name]
    //     : []
    if (route.query.speciesName === '籼稻') {
        productList.value[0].items = [{ name: "黏质土" }, { name: "壤土" }, { name: "冲积土" }];
        productList.value[1].items = [{ name: "漫灌" }, { name: "间歇灌溉" }, { name: "喷灌" }];
    }
    // 为 productList 的每个 group 设置默认选中第一项
    productList.value.forEach((group) => {
        if (group.items && group.items.length > 0 && !group.checked) {
            group.checked = group.items[0].name;
        }
    });
});

const goBack = () => {
    // router.go(-1);
    router.replace(`/create_farm?from=${route.query.from}&type=${route.query.type}`)
};

const handlePage = () => {

    if(route.query.type === 'farmer'){
        router.push('/agri_record')
        return
    }

    // 获取所有需要传递的参数，包括 from 参数
    const queryParams = {
        containerId: route.query.containerId,
    };
    
    // 如果存在 from 参数，继续传递
    if (route.query.from) {
        queryParams.from = route.query.from;
    }
    
    // 传递所有农场相关的参数，以便在 agricultural_plan 页面创建农场
    const farmParams = ['wkt', 'speciesId', 'containerId', 'agriculturalCreate', 'geom', 'address', 'mu', 'name', 'fzr', 'tel', 'defaultFarm', 'typeId', 'speciesName','userType'];
    farmParams.forEach(key => {
        if (route.query[key] !== undefined) {
            queryParams[key] = route.query[key];
        }
    });
    router.push({
        path: '/agricultural_plan',
        query: queryParams
    });
};
</script>

<style lang="scss" scoped>
.prescription-page {
    position: relative;
    width: 100%;
    height: calc(100vh - 62px);
    overflow: auto;
    box-sizing: border-box;
    background: linear-gradient(to left, #e6f2ff, #8fc5fe);
    .prescription-title {
        padding: 16px 14px;
        background: url("@/assets/img/home/page-bg.png") no-repeat bottom right / 149px 116px;
        background-position-y: 30px;
        img {
            width: 24px;
        }
        .title-name {
            font-size: 22px;
            color: #2e2e2e;
            text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
            font-weight: 800;
            padding: 21px 0 4px 6px;
        }
        .title-desc {
            font-size: 14px;
            color: rgba(49, 49, 49, 0.56);
            padding-left: 6px;
        }
    }
    .prescription-box {
        background: #ffffff;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        margin: 0 10px 10px;
        box-sizing: border-box;
        padding-bottom: 10px;
        .box-title {
            margin: 0 10px;
            box-sizing: border-box;
            border-bottom: 1px solid rgba(0, 0, 0, 0.15);
            font-weight: 800;
            font-size: 18px;
            color: #222222;
            padding: 15px 0 10px;
            img {
                width: 14px;
                height: 9px;
            }
        }
        .box-content {
            padding: 0 10px;
            .box-item {
                padding-top: 10px;
                .item-name {
                    display: flex;
                    align-items: center;
                    font-size: 15px;
                    color: rgba(0, 0, 0, 0.9);
                    font-weight: 500;
                    .required-icon {
                        color: #ff0000;
                        font-size: 16px;
                        margin-right: 4px;
                    }
                }
                .tips{
                    margin-left: 10px;
                    font-size: 12px;
                    color: rgba(0, 0, 0, 0.4);
                }
                .item-checkbox {
                    ::v-deep {
                        .el-radio-button,
                        .el-checkbox-button {
                            margin: 10px 0 0 7px;
                            .el-radio-button__inner,
                            .el-checkbox-button__inner {
                                border: none;
                                border-radius: 6px;
                                // padding: 13px 21px;
                                height: 43px;
                                width: 107px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border: 1px solid #EBEBEB;
                                color: #000000;
                                background: rgba(241, 241, 241, 0.12);
                                font-weight: 400;
                            }
                            &.is-active,
                            &.is-checked {
                                &::after {
                                    content: "";
                                    position: absolute;
                                    z-index: 9;
                                    bottom: 0;
                                    right: 0;
                                    width: 18px;
                                    height: 16px;
                                    background: url("@/assets/img/home/checked-bg.png") no-repeat bottom right / 18px
                                        16px;
                                }
                                .el-radio-button__inner,
                                .el-checkbox-button__inner {
                                    background: rgba(33, 153, 248, 0.1) !important;
                                    color: #2199f8 !important;
                                    border: 1px solid #2199f8 !important;
                                    box-shadow: none;
                                }
                            }
                            &.is-active {
                                .el-radio-button__original-radio:not(:disabled) + .el-radio-button__inner {
                                    background: rgba(33, 153, 248, 0.1) !important;
                                    color: #2199f8 !important;
                                    border: 1px solid #2199f8 !important;
                                    box-shadow: none;
                                    font-weight: 500;
                                }
                            }
                            &.is-checked {
                                .el-checkbox-button__original-checkbox:not(:disabled) + .el-checkbox-button__inner {
                                    background: rgba(33, 153, 248, 0.1) !important;
                                    color: #2199f8 !important;
                                    border: 1px solid #2199f8 !important;
                                    box-shadow: none;
                                    font-weight: 500;
                                }
                            }
                        }

                        .el-radio-button:nth-child(3n-2){
                            margin-left: 0;
                        }
                    }
                }
            }
        }
        /* 农场规模（与农场情况同一卡片内） */
        .farm-scale-header {
            margin-top: 16px;
            .farm-scale-title {
                font-size: 15px;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.9);
            }
            .farm-scale-desc {
                font-size: 13px;
                color: rgba(0, 0, 0, 0.4);
            }
        }
        .farm-scale-form {
            margin-top: 10px;
            .farm-scale-item {
                display: flex;
                align-items: center;
                margin-bottom: 14px;
                &:last-child {
                    margin-bottom: 0;
                }
                .farm-scale-label {
                    flex-shrink: 0;
                    width: 110px;
                    font-size: 14px;
                    color: rgba(0, 0, 0, 0.9);
                    margin-right: 12px;
                }
                .farm-scale-input {
                    flex: 1;
                    ::v-deep .el-input-group__append {
                        padding: 0 12px;
                        background: #f5f7fa;
                        color: rgba(0, 0, 0, 0.65);
                        border-color: #dcdfe6;
                        border-radius: 0 4px 4px 0;
                    }
                    ::v-deep .el-input__inner {
                        border-radius: 4px 0 0 4px;
                    }
                }
            }
        }
    }
    .disaster-desc-box {
        padding: 10px;
        display: flex;
        align-items: center;
        span {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.9);
            width: 80px;
        }
    }
}
</style>