hazardousWaste_app/pages/recycling/integratedModeAssessment/valueEvaluation.vue

<template>
    <view style="background-color: #fff;">
        <view class="inter-card">
            <uv-form labelPosition="left" :model="formModel" :rules="formRules" labelWidth="130" ref="formRef">
                <text class="title">
                    <text class="dot"></text>
                    基本条件
                </text>
                <uv-form-item label="废弃物产生量（吨/年）" prop="amount" borderBottom>
                    <uv-input v-model="formModel.amount" border="none" placeholderStyle="text-align: right;"
                        placeholder="请输入废弃物产生量" />
                </uv-form-item>

                <uv-form-item label="运输距离" prop="distance" borderBottom>
                    <uv-input v-model="formModel.distance" placeholder="请选择运输距离" placeholderStyle="text-align:right"
                        border="none" right-icon="arrow-right" @click="openRiskPopup('distance')" />
                </uv-form-item>
                <uv-form-item label="环境风险等级" prop="risk" borderBottom>
                    <uv-input v-model="formModel.risk" placeholder="请选择环境风险等级" placeholderStyle="text-align:right"
                        border="none" right-icon="arrow-right" @click="openRiskPopup('risk')" />
                </uv-form-item>
                <uv-form-item label="处理成本水平" prop="cost" borderBottom>
                    <uv-input v-model="formModel.cost" placeholder="请选择处理成本水平" placeholderStyle="text-align:right"
                        border="none" right-icon="arrow-right" @click="openRiskPopup('cost')" />
                </uv-form-item>

                <text class="title">
                    <text class="dot"></text>
                    多元价值权重设置
                </text>
                <uv-form-item borderBottom :label="i.label" v-for="i in weights" :key="i.key">
                    <view class="slider-row">
                        <slider class="sg-slider" :value="formModel[i.key]"
                            @changing="formModel[i.key] = $event.detail.value" />
                        <text class="percent">{{ formModel[i.key] }}%</text>
                    </view>
                </uv-form-item>

            </uv-form>
            <view class="desc-box mt-8">
                <h4>参数说明</h4>
                <text>· 经济价值：回收成本、收益、资源利用收益等</text><br />
                <text>· 环境价值：污染排放、生态影响、环境修复等</text><br />
                <text>· 社会价值：公共安全、就业带动、合规性等</text><br />
                <text>· 资源价值：资源再生利用率、循环利用价值等</text>
            </view>
        </view>
        <view class="bottom">
            <uv-button type="primary" @tap="submitForm">
                <uv-icon name="grid-fill" :loading="loading" class="mr-4" color="#fff" size="20" />
                开始评估
            </uv-button>
        </view>
        <uv-popup ref="popup" mode="bottom" custom-style="height: 200rpx;">
            <view class="content">
                <text @tap="onCheck(item)" v-for="item in selectOption" :key="item.value">{{ item.label }}</text>
            </view>
        </uv-popup>
    </view>
</template>

<script setup>
import { getTwoOneRandom } from '../..//until'
import { ref, reactive, computed } from "vue";
const clickName = ref('')
const loading = ref(false)
const popup = ref(null)
const formRef = ref();
// 权重
const weights = reactive([
    { key: 'economic', label: '经济价值权重' },
    { key: 'environment', label: '环境价值权重' },
    { key: 'social', label: '社会价值权重' },
    { key: 'resource', label: '资源价值权重' }
])
// 结果
const result = reactive({
    total: 78.6,
    economic: 81.4,
    environment: 72.3,
    social: 76.8,
    resource: 83.6,
    scoreCards: ''
})
// const result = reactive({
//     total: getTwoOneRandom(),
//     economic: getTwoOneRandom(),
//     environment: getTwoOneRandom(),
//     social: getTwoOneRandom(),
//     resource: getTwoOneRandom()
// })
const scoreCards = computed(() => [
    { label: '经济价值得分', value: result.economic, color: '#246fe5' },
    { label: '环境价值得分', value: result.environment, color: '#22b85a' },
    { label: '社会价值得分', value: result.social, color: '#8b45f7' },
    { label: '资源价值得分', value: result.resource, color: '#f5a400' }
])
// const formRules = {
//     amount: {
//         type: "string",
//         required: true,
//         message: "请输入废弃物产生量",
//         trigger: ["blur", "change"],
//     },
//     distance: {
//         type: "string",
//         required: true,
//         message: "请选择运输距离",
//         trigger: ['blur', 'change']
//     },
//     risk: {
//         type: "string",
//         required: true,
//         message: "请选择环境风险等级",
//         trigger: ['blur', 'change']
//     },
//     cost: {
//         type: "string",
//         required: true,
//         message: "请选择处理成本水平",
//         trigger: ['blur', 'change']
//     },
// }
const selectOption = [
    { value: 'low', label: '低等' },
    { value: 'middle', label: '中等' },
    { value: 'high', label: '高等' },
]

const formModel = reactive({
    total: 78.6,
    economic: 40,
    environment: 30,
    social: 20,
    resource: 10,
    amount: '',
    distance: '',
    risk: '',
    cost: '',
})

const openRiskPopup = (val) => {
    clickName.value = val
    popup.value.open()
}

const onCheck = (item) => {
    formModel[clickName.value] = item.label
    popup.value.close()

}

const submitForm = () => {
    formRef.value.validate().then(res => {
        const totalWeight =
            formModel.economic +
            formModel.environment +
            formModel.social +
            formModel.resource

        if (!formModel.amount || !formModel.cost || !formModel.distance || !formModel.risk) {
            uni.showToast({
                title: '请完善基本条件',
                icon: 'none'
            })
            return
        }
        if (Math.round(totalWeight) !== 100) {
            uni.showToast({
                title: '权重合计必须为 100%',
                icon: 'none'
            })
            return
        }
        result.total = (
            result.economic * formModel.economic / 100 +
            result.environment * formModel.environment / 100 +
            result.social * formModel.social / 100 +
            result.resource * formModel.resource / 100
        ).toFixed(1)
        result.scoreCards = scoreCards
        console.log(result, 'result===>');

        uni.setStorageSync('app_integratedModeAssessment_result', result)
        uni.showToast({
            title: '评估成功',
            icon: 'success'
        })
        uni.navigateTo({
            url: '/pages/recycling/integratedModeAssessment/results'
        })
    })

}
</script>

<style scoped lang="scss">
/* 国网绿主色 */
$gw-green: #006569;
$gw-light: #409E99;

.inter-card {
    padding: 20rpx;
}

/* 底部按钮 */
.bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

:deep(.uv-button--primary) {
    background-color: $gw-green !important;
    border-color: $gw-green !important;
}

/* 说明面板 */
.desc-box {
    background: #f2f9f9;
    border-left: 6rpx solid $gw-green;
    border-radius: 8rpx;
    padding: 10rpx 24rpx;
    font-size: 14px;
    color: #333;
    margin-top: 20rpx;

    h4 {
        margin-bottom: 4rpx;
    }

    uni-text {
        display: inline-block;
        margin-bottom: 8rpx;
    }
}

/* 标题 */
.title {
    font-size: 16px;
    font-weight: 500;
    color: $gw-green;
    margin: 14rpx 0 0 0;
    display: flex;
    align-items: center;
}

/* 标题小圆点 */
.dot {
    width: 12rpx;
    height: 12rpx;
    background-color: $gw-green;
    // border-radius: 50%;
    display: inline-block;
    margin-right: 12rpx;
}

/* 滑块布局 */
.slider-row {
    display: flex;
    align-items: center;
    flex: 1;
}

/* 国网绿滑块 */
.sg-slider {
    flex: 1;
    --slider-track-color: #d9eaea;
    --slider-active-color: $gw-light;
    --slider-thumb-color: $gw-green;
}

.percent {
    width: 80rpx;
    text-align: right;
    font-size: 12px;
    color: $gw-green;
    font-weight: 500;
    margin-left: 10rpx;
}

.content {
    display: flex;
    flex-direction: column;
    padding: 20rpx;

    text {
        text-align: center;
        width: 100%;
        padding: 16rpx 0;
        border-bottom: 2rpx solid #F5F5F5;
    }
}
</style>