feiniao-farm-h5/src/views/old_mini/home/components/gardenFloatingPanel.vue

<template>
    <floating-panel class="floating-panel" v-model:height="height" :anchors="anchors">
        <div class="v-select-defalut-group">
            <el-select class="v-select" v-model="value" placeholder="综合">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select class="v-select" v-model="value" placeholder="品种">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select class="v-select" v-model="value" placeholder="树龄">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select class="v-select" v-model="value" placeholder="价格">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="list">
            <div class="list-item" v-for="(item, index) in list" :key="index">
                <checkbox @change="changeCheck" v-model="item.checked"></checkbox>
                <div class="defalut" :class="{ active: item.select }">
                    <div class="item-flex" @click="handleItem(index)">
                        <img class="img" src="@/assets/img/mine/img-photo.png" alt="" />
                        <div class="item-text" >
                            <div class="name">
                                <span>{{ item.name }}</span>
                                <div class="mark">综合评分：92分</div>
                                <div class="age">树龄：16年</div>
                            </div>
                            <div class="txt">单价：<span>12元/斤</span></div>
                            <div class="txt progress">
                                剩余可购：
                                <el-progress
                                    class="bar"
                                    :percentage="70"
                                    :stroke-width="8"
                                    color="#00BEDB"
                                    :format="format"
                                />
                            </div>
                        </div>
                    </div>
                     <div class="stepper" v-show="item.checked">
                        <span>认养数量(斤)：</span>
                        <stepper v-model="stepperValue" min="50" integer @plus="plus" />
                        <div class="total">¥<span>{{12 * stepperValue}}</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="all">
                <checkbox v-model="checked"></checkbox>
                <span>全选本页</span>
            </div>
            <div class="footer-right">
                <div class="total">
                    <div class="num">合计<span>¥</span><span class="value">{{12 * stepperValue}}</span></div>
                    <div class="text">已选择 <span>{{checkedList.length}}</span> 棵树</div>
                </div>
                <div class="button" :class="{active:checkedList.length}">确认认养</div>
            </div>
        </div>
    </floating-panel>
</template>

<script setup>
import { FloatingPanel } from "vant";
import { ref } from "vue";
import { Checkbox, Stepper } from "vant";

const format = (percentage) => `100/200`;

const anchors = [30, Math.round(0.4 * window.innerHeight)];
const height = ref(anchors[1]);

const list = ref([
    {
        status: 0,
        name: "桂味",
        checked: false,
        select: true,
    },
    {
        status: 0,
        name: "糯米糍",
        checked: false,
        select: false,
    },
    {
        status: 1,
        name: "井冈红糯",
        checked: false,
        select: false,
    },
]);

const value = ref("");
const options = [
    {
        value: "Option1",
        label: "Option1",
    },
    {
        value: "Option2",
        label: "Option2",
    }
];

const checkedList = ref([])
const changeCheck = () => {
    checkedList.value = list.value.filter(item =>item.checked)
};

const selectList = ref([])
const handleItem = (index) =>{
    list.value[index].select = !list.value[index].select
    selectList.value = list.value.filter(item =>item.select)
}

const checked = ref(false);

const stepperValue = ref(50)
const plus = () =>{
    console.log('12');
}
</script>

<style lang="scss" scoped>
.floating-panel {
    ::v-deep {
        .van-floating-panel__content {
            background: #f2f3f5;
        }
        .van-checkbox__icon .van-icon {
            border-color: #00bedb;
        }
        .van-checkbox__icon--checked .van-icon {
            background: #00bedb;
        }
        .van-stepper__minus, .van-stepper__plus{
            background: rgba(0, 190, 219, 0.2);
            color: #00BEDB;
        }
        .van-stepper__input{
            background: transparent;
            color: #00BEDB;
        }
    }
    .v-select-defalut-group {
        border-bottom: 1px solid #f5f5f5;
        padding: 0 12px 12px 12px;
        background: #fff;
        .v-select + .v-select {
            margin-left: 4px;
        }
    }
    .list {
        width: 100%;
        height: calc(100% - 100px);
        overflow-y: auto;
        .list-item {
            padding: 12px;
            position: relative;
            display: flex;
            align-items: center;
            background: #fff;

            .item-flex {
                display: flex;
                padding: 8px 0 8px 5px;
                box-sizing: border-box;
                width: 100%;
            }
            .img {
                width: 68px;
                height: 68px;
                border-radius: 8px;
                margin-right: 8px;
            }
            .defalut{
                margin-left: 6px;
                width: calc(100% - 24px);
                border-radius: 8px;
                border: 1px solid transparent;
            }
            .active {
                background: rgba(0, 190, 219, 0.06);
                border-color: rgba(0, 190, 219, 0.6);
            }
            .item-text {
                color: #999999;
                font-size: 12px;
                line-height: 1.7;
                .name {
                    display: flex;
                    align-items: center;
                    span {
                        font-size: 15px;
                        color: #000;
                        font-weight: 500;
                        margin-right: 3px;
                    }
                    div {
                        margin-left: 4px;
                        border-radius: 4px;
                        font-size: 12px;
                        padding: 2px 5px;
                        &.mark {
                            background: rgba(50, 203, 226, 0.25);
                            color: #00bedb;
                        }
                        &.age {
                            background: rgba(255, 196, 0, 0.2);
                            color: #f0a400;
                        }
                    }
                }
                .txt {
                    span {
                        color: #000;
                    }
                }
                .progress {
                    display: flex;
                    align-items: center;
                    .bar {
                        width: calc(100% - 60px);
                        ::v-deep {
                            .el-progress__text {
                                font-size: 12px !important;
                                min-width: auto;
                            }
                        }
                    }
                }
            }
            .stepper{
                margin-left:70px;
                padding-bottom: 8px;
                display: flex;
                align-items: center;
                .total{
                    color: #FF6200;
                    margin-left: 15px;
                    span{
                        font-size: 22px;
                    }
                }
            }
        }
        .list-item + .list-item {
            margin-top: 12px;
        }
    }
    .footer {
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        box-sizing: border-box;
        .all {
            display: flex;
            align-items: center;
            border: 1px solid #01bbd8;
            border-radius: 20px;
            color: #01bbd8;
            padding: 8px;
            span {
                margin-left: 3px;
            }
        }
        .footer-right {
            display: flex;
            align-items: center;
            font-size: 12px;
            .total {
                margin-right: 12px;
                .num{
                    letter-spacing: 1.5px;
                    span{
                        color: #FF6200;
                    }
                    .value{
                        font-size: 16px;
                    }
                }
                .text {
                    color: #999999;
                    span {
                        color: #11d9f7;
                    }
                }
            }
            .button {
                background: #c3f1fa;
                color: #fff;
                font-size: 16px;
                padding: 8px 35px;
                border-radius: 20px;
                &.active{
                    background: linear-gradient(180deg,#18E0FF,#00C5E3);
                }
            }
        }
    }
}
</style>