feiniao-farm-h5/src/views/old_mini/home/subPages/prescriptionPage copy.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="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: "请选择您的果园土壤类型", items: [{ name: "红壤" }, { name: "壤土" }, { name: "冲积土" }] },
    { name: "请选择您的灌溉方式", items: [{ name: "滴灌" }, { name: "穴灌" }, { name: "微喷灌" }] },
    { name: "是否需要改良土壤", items: [{ name: "需要" }, { name: "不需要" }] },
]);
const outputList = ref([
    { name: "低温冻害" },
    { name: "干旱" },
    { name: "暴雨渍水" },
    { name: "病虫害" },
    { name: "阴天寡照" },
]);
// 默认选中前两项
const outputVal = ref([]);
const disasterDesc = ref("");
// 初始化默认选中第一项
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 = () => {
    // 获取所有需要传递的参数，包括 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);
                    .required-icon {
                        color: #ff0000;
                        font-size: 16px;
                        margin-right: 4px;
                    }
                }
                .item-checkbox {
                    ::v-deep {
                        .el-radio-button,
                        .el-checkbox-button {
                            margin: 10px 7px 0 0;
                            .el-radio-button__inner,
                            .el-checkbox-button__inner {
                                border: none;
                                background: #f1f1f1;
                                border-radius: 8px;
                                padding: 13px 24px;
                                border: 1px solid rgba(255, 255, 255, 0);
                                color: #000000;
                                font-size: 15px;
                                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;
                                    font-weight: 500;
                                }
                            }
                            &.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;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .disaster-desc-box {
        padding: 10px;
        display: flex;
        align-items: center;
        span {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.9);
            width: 80px;
        }
    }
}
</style>