qimall/backend/modules/mall/views/goods/component/com-price-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-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>
                    <el-popover placement="top" width="460" trigger="click" v-model="popover_price">
                        <div class="pop-box">
                            <span>售价（元）</span>
                            <el-input placeholder="请输入售价" type="number" v-model="unifyPrice" style="width: 200px;"><template slot="append">元</template></el-input>
                            <el-button @click="popover_price = false">取消</el-button>
                            <el-button type="primary" @click="unifyPriceConfirm">确认</el-button>
                        </div>
                        <el-button type="text" slot="reference"><i class="el-icon-s-unfold" style="color: #409EFF;font-size: 20px;"></i></el-button>
                    </el-popover>
                </div>
                <div class="top-right-item f-between">
                    <span>划线价（元）</span>
                    <el-popover placement="top" width="460" trigger="click" v-model="popover_m_price">
                        <div class="pop-box">
                            <span>划线价（元）</span>
                            <el-input placeholder="请输入划线价" type="number" v-model="unifyLinePrice" style="width: 200px;"><template slot="append">元</template></el-input>
                            <el-button @click="popover_m_price = false">取消</el-button>
                            <el-button type="primary" @click="unifyLinePriceConfirm">确认</el-button>
                        </div>
                        <el-button type="text" slot="reference"><i class="el-icon-s-unfold" style="color: #409EFF;font-size: 20px;"></i></el-button>
                    </el-popover>
                </div>
                <div class="top-right-item f-between">
                    <span>可预约数量</span>
                    <el-popover placement="top" width="460" trigger="click" v-model="popover_num">
                        <div class="pop-box">
                            <span>可预约数量</span>
                            <el-input placeholder="请输入可预约数量" type="number" v-model="unifyReservationNum" style="width: 200px;"></el-input>
                            <el-button @click="popover_num = false">取消</el-button>
                            <el-button type="primary" @click="unifyReservationNumConfirm">确认</el-button>
                        </div>
                        <el-button type="text" slot="reference"><i class="el-icon-s-unfold" style="color: #409EFF;font-size: 20px;"></i></el-button>
                    </el-popover>
                </div>
            </div>
        </div>
        <div class="item-box bottom-box">
            <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">
                <div v-for="(item,index) in currentTime.selectTimes" :key="index" class="time-item">
                    <div class="bottom-right-item">{{item.time}}</div>
                    <div class="bottom-right-item">
                        <el-input placeholder="请输入..." type="number" v-model="item.price" clearable @input="onUpdateValue"></el-input>
                    </div>
                    <div class="bottom-right-item">
                        <el-input placeholder="请输入..." type="number" v-model="item.linePrice" clearable @input="onUpdateValue"></el-input>
                    </div>
                    <div class="bottom-right-item">
                        <el-input placeholder="请输入..." type="number" v-model="item.reservationNum" clearable @input="onUpdateValue"></el-input>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    Vue.component('com-price-set', {
        template: '#com-price-set',
        props: {
            dateList: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                selectedDates: [],
                currentTime: {},
                unifyReservationNum: 0,//统一可预约数量
                unifyPrice: 0,//统一售价
                unifyLinePrice: 0,//统一划线价
                input: 0,
                popover_batch: false,
                popover_price: false,
                popover_m_price: false,
                popover_num: false,
            }
        },
        watch: {
            dateList: {
                handler(newvalue, oldvalue) {
                    this.$nextTick(() => {
                        // this.initData();
                    });
                },
                immediate: true,
                deep: true
            },
        },
        methods: {
            initData(list) {
                this.selectedDates = [];
                this.selectedDates = JSON.parse(JSON.stringify(list));
                console.log('com-price-set initData', this.selectedDates)
                this.selectedDates.forEach(item => {
                    if(!(item.selectTimes && item.selectTimes.length)){
                        item.selectTimes = [];
                        item.times.forEach(it => {
                            item.selectTimes.push({
                                time: it,
                                price: 0,
                                linePrice: 0,
                                reservationNum: 0
                            });
                        });
                    }else{
                        let rarr = [];
                        item.selectTimes.forEach(it => {
                            if(item.times.indexOf(it.time) > -1){
                                rarr.push(it);
                            }
                        });
                        item.selectTimes = JSON.parse(JSON.stringify(rarr));
                        let oldTimes = [];
                        item.selectTimes.forEach(it => {
                            oldTimes.push(it.time);
                        });
                        for(let i = 0;i < item.times.length;i++){
                            if(oldTimes.indexOf(item.times[i]) < 0){
                                item.selectTimes.push({
                                    time: item.times[i],
                                    price: 0,
                                    linePrice: 0,
                                    reservationNum: 0
                                });
                            }
                        }
                    }
                });
                let forData = [];
                for (let i = 0; i < this.selectedDates.length; i++) {
                    if (!forData.some(e => e.date == this.selectedDates[i].date)) {
                        forData.push(this.selectedDates[i]);
                    }
                }
                this.selectedDates = JSON.parse(JSON.stringify(forData));
                if(this.selectedDates.length){
                    this.selectedDates.forEach(item => {
                        item.isSelect = false;
                    });
                    this.selectedDates[0].isSelect = true;
                    this.currentTime = this.selectedDates[0];
                    this.$forceUpdate();
                }
                // this.emit()
            },
            onDate(index) {
                this.selectedDates.forEach(item => {
                    item.isSelect = false;
                });
                this.selectedDates[index].isSelect = true;
                this.currentTime = this.selectedDates[index];
            },
            unifyConfirm() {
                this.selectedDates.forEach(item => {
                    if(item.isSelect){
                        item.selectTimes.forEach(it => {
                            it.price = this.unifyPrice;
                            it.linePrice = this.unifyLinePrice;
                            it.reservationNum = this.unifyReservationNum;
                        });
                        this.currentTime = item;
                        this.$forceUpdate();
                    }
                });
                this.emit()
                this.popover_batch = false
            },
            unifyPriceConfirm() {
                this.selectedDates.forEach(item => {
                    if(item.isSelect){
                        item.selectTimes.forEach(it => {
                            it.price = this.unifyPrice;
                        });
                        this.currentTime = item;
                        this.$forceUpdate();
                    }
                });
                this.emit()
                this.popover_price = false
            },
            unifyLinePriceConfirm() {
                this.selectedDates.forEach(item => {
                    if(item.isSelect){
                        item.selectTimes.forEach(it => {
                            it.linePrice = this.unifyLinePrice;
                        });
                        this.currentTime = item;
                        this.$forceUpdate();
                    }
                });
                this.emit()
                this.popover_m_price = false
            },
            unifyReservationNumConfirm() {
                this.selectedDates.forEach(item => {
                    if(item.isSelect){
                        item.selectTimes.forEach(it => {
                            it.reservationNum = this.unifyReservationNum;
                        });
                        this.currentTime = item;
                        this.$forceUpdate();
                    }
                });
                this.emit()
                this.popover_num = false
            },
            emit() {
                this.$emit("on-update-selected-date", this.selectedDates)
            },
            onUpdateValue() {
                this.$forceUpdate()
                this.emit()
            }
        }
    })
</script>