qimall/addons/Store/client/views/goods/component/com-price-day-set.php

<style>
    .com-time-select {
        width: 760px;
        margin-top: 12px;
        border: 1px solid #cccccc;
    }
    .item-box {
        display: flex;
    }
    .top-box {
        height: 50px;
        border-bottom: 1px solid #cccccc;
    }
    .bottom-box {
        height: 250px;
    }
    .left-box {
        width: 23%;
        min-width: 22%;
        background-color: #f5f6fa;
        border-right: 1px solid #cccccc;
    }
    .right-box {
        width: 77%;
    }
    .not-scroll {
        padding: 0 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .scroll-box {
        overflow-y: scroll;
    }
    .date-item {
        padding: 10px 4px;
        text-align: center;
        border-bottom: 1px solid #cccccc;
        cursor: pointer;
    }
    .selected {
        background-color: #ffffff;
        font-weight: bold;
    }
    .date-item:last-child {
        border-bottom: none;
    }
    .top-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .bottom-right {
        
    }
    .top-right-item {
        width: 25%;
        padding: 0 6px;
        border-left: 1px solid #cccccc;
    }
    .top-right-item:first-child {
        border-left: none;
    }
    .f-between {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .time-item {
        margin: 6px 0;
        padding-bottom: 6px;
        display: flex;
        border-bottom: 1px solid #eeeeee;
    }
    .time-item:last-child {
        border-bottom: none;
    }
    .bottom-right-item {
        width: 25%;
        padding: 0 6px;
    }
    .pop-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>

<template id="com-price-day-set">
    <div class="com-time-select">
        <div class="item-box top-box">
            <div class="left-box not-scroll">
                <span>日期</span>
                <el-popover placement="top" width="1020" trigger="click" v-model="popover_batch">
                    <div class="pop-box">
                        <span>售价（元）</span>
                        <el-input placeholder="请输入售价" type="number" v-model="unifyPrice" style="width: 200px;"><template slot="append">元</template></el-input>
                        <span>划线价（元）</span>
                        <el-input placeholder="请输入划线价" type="number" v-model="unifyLinePrice" style="width: 200px;"><template slot="append">元</template></el-input>
                        <span>可预约数量</span>
                        <el-input placeholder="请输入可预约数量" type="number" v-model="unifyReservationNum" style="width: 200px;"></el-input>
                        <el-button @click="popover_batch = false">取消</el-button>
                        <el-button type="primary" @click="unifyConfirm">确认</el-button>
                    </div>
                    <el-button type="text" slot="reference"><span style="color: #409EFF;">批量设置</span></el-button>
                </el-popover>
            </div>
            <div class="right-box top-right">
<!--                <div class="top-right-item">时间段</div>-->
<!--                <div class="top-right-item f-between">-->
<!--                    <span>售价（元）</span>-->
<!--                </div>-->
<!--                <div class="top-right-item f-between">-->
<!--                    <span>划线价（元）</span>-->
<!--                </div>-->
<!--                <div class="top-right-item f-between">-->
<!--                    <span>可预约数量</span>-->
<!--                </div>-->
            </div>
        </div>
        <div class="item-box bottom-box">
            <template v-if="selectedDates.length > 0">
                <div class="left-box scroll-box">
                    <div v-for="(item,index) in selectedDates" :key="index" class="date-item" :class="item.isSelect ? 'selected' : ''" @click="onDate(index)">{{item.date}}</div>
                </div>
                <div class="right-box scroll-box">
                    <el-form-item label="售价">
                        <el-input style="width: 150px" placeholder="请输入..." type="number" v-model="selectedDates[currentIndex].price" clearable @input="onUpdateValue"></el-input>
                    </el-form-item>
                    <el-form-item label="划线价">
                        <el-input style="width: 150px" placeholder="请输入..." type="number" v-model="selectedDates[currentIndex].linePrice" clearable @input="onUpdateValue"></el-input>
                    </el-form-item>
                    <el-form-item label="可预约数量">
                        <el-input style="width: 150px" placeholder="请输入..." type="number" v-model="selectedDates[currentIndex].reservationNum" clearable @input="onUpdateValue"></el-input>
                    </el-form-item>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
    Vue.component('com-price-day-set', {
        template: '#com-price-day-set',
        props: {
            dateList: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                selectedDates: [],
                unifyReservationNum: 0,//统一可预约数量
                unifyPrice: 0,//统一售价
                unifyLinePrice: 0,//统一划线价
                input: 0,
                popover_batch: false,
                popover_price: false,
                popover_m_price: false,
                popover_num: false,
                currentIndex: 0,
            }
        },
        watch: {
            dateList: {
                handler(newvalue, oldvalue) {
                    this.$nextTick(() => {
                        this.initData();
                    });
                },
                immediate: true,
                deep: true
            },
        },
        methods: {
            initData() {
                this.selectedDates = [];
                let selectedDates = JSON.parse(JSON.stringify(this.dateList));
                console.log('selectedDatesselectedDatesselectedDates', selectedDates)
                selectedDates.sort(function (a, b) {
                    return new Date(a.date || a) - new Date(b.date || b);
                })
                selectedDates.forEach(d => {
                    this.selectedDates.push({
                        date: d.date || d,
                        price: d.price || 0,
                        linePrice: d.linePrice || 0,
                        reservationNum: d.reservationNum || 0,
                        children: d.children || [],
                        times: d.times || []
                    })
                })

                if(this.selectedDates.length){
                    this.selectedDates.forEach(item => {
                        item.isSelect = false;
                    });
                    this.selectedDates[this.currentIndex].isSelect = true;
                    this.$forceUpdate();
                }
                // this.emit()
            },
            onDate(index) {
                this.selectedDates.forEach(item => {
                    item.isSelect = false;
                });
                this.selectedDates[index].isSelect = true;
                this.currentIndex = index
            },
            unifyConfirm() {
                this.selectedDates.forEach(item => {
                    item.price = this.unifyPrice
                    item.linePrice = this.unifyLinePrice
                    item.reservationNum = this.unifyReservationNum
                    this.$forceUpdate();
                });
                this.emit()
                this.popover_batch = false
            },
            emit() {
                this.$emit("on-update-selected-date", this.selectedDates)
            },
            onUpdateValue() {
                this.emit()
                this.$forceUpdate()
            }
        }
    })
</script>