foster-pc-vue/src/views/home/components/adoptList.vue

<template>
    <div class="adopt-list" :class="{ 'has-btn': isManySetting }">
        <div class="select-wrap common-select">
            <el-select class="select-item" v-model="areaVal" placeholder="全区" style="width: 116px">
                <el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select class="select-item" v-model="typeVal" placeholder="全部品类" style="width: 116px">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select class="select-item" v-model="ageVal" placeholder="树龄" style="width: 116px">
                <el-option v-for="item in ageOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="select-wrap select-b common-select">
            <el-select class="select-item" v-model="allVal" placeholder="综合评分" style="width: 116px">
                <el-option v-for="item in allOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select class="select-item" v-model="ecologyVal" placeholder="生态评分" style="width: 116px">
                <el-option v-for="item in ecologyOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select class="select-item" v-model="statusVal" placeholder="全部状态" style="width: 116px">
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>

        <div class="many-setting select-wrap" v-show="isManySetting">
            <el-select class="select-item many-select" v-model="settingType" placeholder="选中设置项" style="width: 96px">
                <template #label="{ label, value }">
                    <span v-show="value!=='total'">设置</span>
                    <span>{{ label }}</span>
                </template>
                <el-option v-for="(item, index) in settingTypeOptions" :key="index" :label="item.name" :value="item.value" />
            </el-select>
            <el-input-number
                style="width: 174px"
                placeholder="请输入"
                class="number-input"
                :controls="false"
                v-model="unifyPrice"
                :min="0"
                @change="setManyPrice"
            />
            <span class="unit">{{settingType === "price" ? "元/斤" : settingType === "age" ? "年" : "斤"}}</span>
        </div>

        <div class="list-wrap">
            <div class="list-item" v-for="(item, index) in displayedAdoptList" :key="index">
                <div class="list-info">
                    <div class="tree-icon">
                        <div class="tree-tag" v-show="item.status === 0">未守护</div>
                        <div class="tree-tag wait" v-show="item.status === 1">已守护</div>
                        <!-- <img class="tree-img" src="@/assets/images/foster-home/tree-item.png" alt="" /> -->
                        <img class="tree-img" :src="require(`@/assets/images/foster-home/list/${index < 7 ? index : 0}.png`)" alt="" />
                        <div class="tree-type-name-tag">白糖罂</div>
                    </div>
                    <div class="item-center">
                        <div class="center-t">
                            {{item.bm ? item.bm : "BTY-A3"+index}}
                            <!-- <span class="type-tag">综合:{{item.zh||94}}分</span>
                            <span class="type-tag">生态:{{item.st||92}}分</span> -->
                        </div>
                        <!-- 批量设置栽种时间 -->
                        <div class="center-item" v-show="isManySetting && settingType !== 'price'">栽种时间：<span class="unit">{{item.time}}</span></div>
                        
                        <!-- 批量设置树龄或单项设置 -->
                        <div class="center-item p-t-2 has-input" v-show="(isManySetting && settingType === 'age') || item.settingPrice">
                            <span class="edit-label">树龄：</span>
                            <el-input-number @change="settingSinglePrice" class="number-input" :controls="false" v-model="item.age" :min="0" />
                            <span class="unit">年</span>
                        </div>
                        <!-- 不是编辑状态 -->
                        <div class="center-item p-t-2 age-line" v-show="!isManySetting && !item.settingPrice">
                            <div class="age-wrap">
                                <div class="has-age">
                                    <div class="age">栽种时间：<span class="unit">{{ item.time }}</span></div>
                                </div>
                                <div class="sort-line"></div>
                            </div>
                            树龄：<span class="unit"><span class="unit">{{item.age||12}}年</span></span>
                        </div>
                        <div class="center-item p-t-2 has-input" v-show="(isManySetting && settingType === 'price') || item.settingPrice">
                            <span class="edit-label">单价：</span>
                            <el-input-number @change="settingSinglePrice" class="number-input" :controls="false" v-model="item.price" :min="0" />
                            <span class="unit">元/斤</span>
                        </div>
                        <div class="center-item" v-show="isManySetting && settingType !== 'age'">树龄：<span class="unit">{{item.age||5}}年</span></div>
                        <div class="center-item" v-show="(isManySetting && settingType !== 'total')">栽种时间：<span class="unit">{{item.time}}</span></div>
                        
                        <div class="center-item p-t-2 has-input" v-show="(isManySetting && settingType === 'total') || item.settingPrice">
                            <span class="edit-label">栽种时间：</span>
                            <!-- <el-input-number @change="settingSinglePrice" class="number-input" :controls="false" v-model="item.total" :min="0" /> -->
                            <el-date-picker
                                v-model="item.time"
                                type="date"
                                format="YYYY.MM.DD"
                                style="width: 140px"
                                value-format="YYYY.MM.DD"
                                placeholder="栽种时间"
                            />
                        </div>

                        <div class="center-item p-t-2 user-wrap" v-show="item.status === 0 && !isManySetting && !item.settingPrice">
                            <img src="@/assets/images/foster-home/user.png" alt="">
                            选择守护人
                        </div>
                        <div class="center-item p-t-2 progress-wrap" v-show="item.status === 1 && !isManySetting && !item.settingPrice">
                            守护人：
                            <span class="unit">
                                <div class="user-item">
                                    <div class="user-detail" v-for="(owner, oI) in owners" :key="oI">
                                        {{ owner.userName }}
                                        <span v-show="oI<owners.length-1">/</span>
                                    </div>
                                </div>
                            </span>
                        </div>
                    </div>
                    <div v-show="!isManySetting && !item.settingPrice && ROLE == 1" @click="toSettingSinglePrice(index, true)">
                        <img src="@/assets/images/common/edit-icon.png" alt="" />
                    </div>
                </div>
                <div v-show="item.settingPrice" class="btn-group edit-one">
                    <!-- 渐变主色按钮 -->
                    <div class="btn cancel-btn" @click="toSettingSinglePrice(index, false)">取消</div>
                    <div class="btn edit-btn" @click="toSettingSinglePrice(index, false)">确认修改</div>
                </div>
            </div>
        </div>

        <!-- 渐变主色按钮 -->
        <div class="center-btn" v-show="!isManySetting" @click="manySetPrice">批量定价</div>
        <!-- 渐变主色按钮 -->
        <div class="btn-group list-btn" v-show="isManySetting">
            <div class="btn cancel-btn" @click="saveManySetting(0)">取消</div>
            <div class="btn edit-btn" @click="saveManySetting(1)">保存</div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
let store = useStore();

const ROLE = store.state.home.userRole;

const areaVal = ref(0);
const areaOptions = ref([
    { label: "全区", value: 0 },
    { label: "1区", value: 1 },
    { label: "2区", value: 2 },
]);
const typeVal = ref(0);
const typeOptions = ref([
    { label: "全部品类", value: 0 },
    { label: "白糖罂", value: 1 },
    { label: "井岗红糯", value: 2 },
]);
const ageVal = ref(0);
const ageOptions = ref([
    { label: "全部树龄", value: 0 },
    { label: "0-10年", value: 1 },
    { label: "10-20年", value: 2 },
]);
const allVal = ref(0);
const allOptions = ref([
    { label: "全部评分", value: 0 },
    { label: "0-10年", value: 1 },
    { label: "10-20年", value: 2 },
]);
const ecologyVal = ref(0);
const ecologyOptions = ref([
    { label: "生态评分", value: 0 },
    { label: "0-10年", value: 1 },
    { label: "10-20年", value: 2 },
]);
const statusVal = ref(0);
const statusOptions = ref([
    { label: "全部状态", value: 0 },
    { label: "0-10年", value: 1 },
    { label: "10-20年", value: 2 },
]);

const adoptList = ref([
    { status: 0, price: 10, bm: "BTY-A21", pz: "白糖罂", zh: 94, st: 92, sl: 5, total: 215, time: "2022.02.15", },
    { status: 0, price: 12, bm: "BTY-A22", pz: "白糖罂", zh: 92, st: 94, sl: 6, total: 201, time: "2022.02.15" },
    { status: 0, price: 8, bm: "BTY-A25", pz: "白糖罂", zh: 92, st: 94, sl: 4, total: 220, time: "2022.02.15" },
    { status: 1, price: 13, bm: "BTY-A31", pz: "白糖罂", zh: 90, st: 92, sl: 6, total: 202, time: "2022.02.15" },
    { status: 1, price: 10, bm: "BTY-A33", pz: "白糖罂", zh: 90, st: 96, sl: 7, total: 190, time: "2022.02.15" },
    { status: 1, price: 16, time: "2022.02.15" },
    { status: 1, price: 16, time: "2022.02.15" },
    { status: 1, price: 16, time: "2022.02.15" },
    { status: 1, price: 16, time: "2022.02.15" },
]);

const owners = ref([{userName: "王丽丽", value: 50}])

const displayedAdoptList = ref([...adoptList.value]); // 初始时显示完整列表

onMounted(() => {});

// 批量定价
const unifyPrice = ref(null);
const isManySetting = ref(false);
const settingTypeOptions = [
    {name: "树龄", value: "age"},
    {name: "品种", value: "price"},
    {name: "栽种时间", value: "total"},
]
const settingType = ref("price")
function manySetPrice() {
    isManySetting.value = true;
    displayedAdoptList.value = adoptList.value.filter((item) => item.status === 0);
}
function saveManySetting(isToSave) {
    isManySetting.value = false;
    displayedAdoptList.value = [...adoptList.value]; // 显示完整列表
    if (isToSave) {
        // 保存
    }
}

function setManyPrice(v) {
  displayedAdoptList.value.map(item => item.price = v)
}

// 设置单棵树单价

function toSettingSinglePrice(i, val) {
  console.log('tototot');
  displayedAdoptList.value[i].settingPrice = val
}
function settingSinglePrice() {
  console.log('sss');
}
</script>

<style lang="scss" scoped>
.adopt-list {
    height: 100%;
    overflow: auto;
    // padding: 0 10px;
    &.has-btn {
        height: calc(100% - 60px);
    }
    .type-tag {
        color: #ffd489;
        background: rgba(255, 212, 137, 0.06);
        padding: 2px 4px;
        font-size: 10px;
        margin-left: 4px;
        border-radius: 4px;
    }
    .select-wrap {
        display: flex;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
        // ::v-deep {
        //     .el-select__wrapper {
        //         background: rgba(255, 212, 137, 0.06);
        //         box-shadow: 0 0 0 1px rgba(255, 212, 137, 0.3) inset;
        //         font-size: 13px;
        //         .el-select__input {
        //             color: #ffd489;
        //         }
        //         .el-select__placeholder {
        //             color: #ffd489;
        //             text-align: center;
        //         }
        //         .el-select__suffix {
        //             color: #ffd489;
        //         }
        //     }
        // }
        .select-item + .select-item {
            margin-left: 5px;
        }
    }
    .select-b {
        margin-top: 8px;
    }
    .list-wrap {
        padding: 12px 0;
        .list-item {
            background: rgba(120, 120, 120, 0.05);
            padding: 8px 10px;
            border-radius: 5px;
            .list-info {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .edit-one {
                margin-top: 12px;
                border-top: 1px solid rgba(0, 0, 0, 0.2);
                &.btn-group {
                    padding: 12px 0;
                    .btn {
                        flex: 1;
                        text-align: center;
                        padding: 5px;
                    }
                }
            }
            .tree-icon {
                align-self: baseline;
                position: relative;
                .tree-tag {
                    position: absolute;
                    left: 0;
                    top: 0;
                    background: rgba(33, 153, 248, 0.7);
                    border-radius: 5px 0 5px 0;
                    color: #fff;
                    padding: 1px 6px;
                    font-size: 10px;
                    &.wait {
                        background: rgba(106, 106, 106, 0.7);
                    }
                    &.done {
                        background: #757575;
                    }
                }
                .tree-type-name-tag {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.6);
                    border-radius: 0 5px 5px 0;
                    font-size: 10px;
                    width: 100%;
                    text-align: center;
                    height: 18px;
                    line-height: 18px;
                    backdrop-filter: blur(4px);
                    color: #fff;
                }
                .tree-img {
                    width: 63px;
                    height: 63px;
                    border-radius: 5px;
                    object-fit: cover;
                }
            }
            .item-center {
                flex: 1;
                padding: 0 12px;
                color: #000000;
                .center-t {
                    font-size: 14px;
                }
                .center-item {
                    color: #6c6c6c;
                    font-size: 12px;
                    padding-top: 2px;
                }

                .user-wrap {
                    color: #F0AC37;
                }
                
                .progress-wrap {
                    display: flex;
                    align-items: center;
                    .user-item {
                        display: flex;
                        align-items: center;
                    }
                    .progress-text {
                        font-size: 12px;
                        color: #999999;
                        .over {
                            color: #FFD489;
                        }
                    }
                    ::v-deep {
                        .el-progress-bar__outer {
                            width: 100px;
                            background: rgba(242, 243, 245, 0.23);
                        }
                    }
                }
                .age-line {
                    display: flex;
                    align-items: center;
                    .age-wrap {
                        display: flex;
                        align-items: center;
                        .sort-line {
                            margin: 0 10px;
                            height: 10px;
                            width: 1px;
                            background: rgba(0, 0, 0, 0.66);
                        }
                    }
                }
                .edit-label {
                    display: inline-block;
                    width: 76px;
                }
                .has-input {
                    padding: 4px 0;
                    .unit {
                        padding-left: 5px;
                    }
                }
                .small-btn-group {
                  display: flex;
                  font-size: 12px;
                }
            }
        }
        .list-item + .list-item {
            margin-top: 8px;
        }
    }
    .unit {
        padding-left: 5px;
        color: #000000;
    }
    .many-setting {
        background: rgba(255, 212, 137, 0.08);
        border: 1px solid rgba(255, 212, 137, 0.3);
        border-radius: 6px;
        color: #ffd489;
        padding: 12px 8px;
        margin-top: 12px;
        .many-select {
            ::v-deep {
                .el-select__wrapper {
                    padding: 4px;
                    box-shadow: none;
                }
            }
        }
    }
    .number-input {
        margin: 0 12px;
        ::v-deep {
            &.el-input-number {
                width: 80px;
                background: rgba(33, 153, 248, 0.08);
                border: 1px solid #2199F8;
                border-radius: 5px;
            }
            .el-input__wrapper {
                background: transparent;
                box-shadow: none;
            }
            .el-input-number.is-without-controls .el-input__wrapper {
                padding: 0 8px;
            }
            .el-input__inner {
                color: #2199F8;
            }
        }
    }
    .p-t-2 {
        padding-top: 2px;
    }
    .center-btn {
        position: absolute;
        bottom: 64px;
        left: 50%;
        transform: translateX(-50%);
        color: #FFFFFF;
        border-radius: 20px;
        font-size: 14px;
        padding: 7px 10px;
        cursor: pointer;
        border: 1px solid #fff;
        background: linear-gradient(180deg, #84C9FF, #2199F8);
        width: 194px;
        box-sizing: border-box;
        text-align: center;
    }

    .list-btn {
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .btn-group {
        display: flex;
        align-items: center;
        justify-content: end;
        width: 100%;
        padding: 10px 12px;
        box-sizing: border-box;
        border-radius: 0 0 8px 8px;
        .btn {
            cursor: pointer;
            padding: 12px 36px;
            font-size: 14px;
            border-radius: 4px;
            border: 1px solid #2199F8;
            color: #2199F8;
        }
        .cancel-btn {
            color: #2199F8;
        }
        .edit-btn {
            background: #2199F8;
            color: #FFFFFF;
        }
        .btn + .btn {
            margin-left: 12px;
        }
    }
}
</style>