qimall/addons/Store/client/views/reserve-setting/index.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div style="display:flex;justify-content:space-between;align-items:center;">
                <span>预约设置</span>
            </div>
        </div>
        <div class="table-body" v-loading="loading">
            <el-form size="small" ref="form" label-width="auto" :model="form" :rules="rules" >
                <el-form-item label="预约范围:" prop="is_enable">
                    客户可预约
                    <el-select v-model="form.range_start" placeholder="请选择">
                        <el-option
                                v-for="item in range_start_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    到
                    <el-select v-model="form.range_end" placeholder="请选择">
                        <el-option
                                v-for="item in range_end_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    以内的任意时间到店
                </el-form-item>
                <el-form-item label="员工选择:" prop="employee_selection" >
                    <el-radio-group v-model="form.employee_selection" class="vertical-radio-group">
                        <el-radio :label="1">客户添加预约时，技师可选不可选</el-radio><br>
                        <el-radio :label="2">客户添加预约时，技师必选</el-radio><br>
                        <el-radio :label="3">客户添加预约时，技师不可选</el-radio>
                    </el-radio-group>
                    <br/>
                    <div style="color: #6b7280;line-height: 1.5;">
                        1.当技师不可选时，则门店的技师列表不显示.<br>
                        2.从商品详情入口预约，将默认展示到店分配，不可选择技师.
                    </div>
                </el-form-item>
                <el-form-item label="完成预约:" prop="complete_reservation" >
                    <el-radio-group v-model="form.complete_reservation">
                        <el-radio :label="1">预约单完成后，占用时间不变。</el-radio>
                    </el-radio-group>
                    <br/>
                    <div style="color: #6b7280">
                        例如：我下单了10:00-11:00的服务，但是我实际上10:40就完成了服务，但是10:40-11:00这个时间段依然被占用。
                    </div>
                </el-form-item>

                <el-form-item label="预约时间间隔:" prop="appointment_interval" >
                    <el-radio-group v-model="form.appointment_interval">
                        <el-radio :label="1">预约的时间间隔按服务时长为间隔</el-radio>
                    </el-radio-group>
                    <br/>
                    <div style="color: #6b7280">
                    例如：我选择了a商品，项目时长为100分钟，因此在选择时间时，时间间隔为100分钟。
                    </div>
                </el-form-item>
                <el-form-item label="技师核销开关:" prop="technician_verification_switch">
                    <el-switch
                            v-model="form.technician_verification_switch"
                            active-value="1"
                            inactive-value="0">
                    </el-switch>
                    <br/>
                    <div style="color: #6b7280">
                    只限制技师在该门店的排班时间,当服务类型选择了上门服务时，需要开启，否则会导致技师无法核销，从而订单无法推进。
                    </div>
                </el-form-item>

                <el-form-item label="是否允许用户进行验收:" prop="user_acceptance">
                    <el-switch
                            v-model="form.user_acceptance"
                            active-value="1"
                            inactive-value="0">
                    </el-switch>
                    <br/>
                    <div style="color: #6b7280">
                    当关闭后，用户无法进行验收，验收对象为门店
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="onSubmit" :loading="loading">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>

</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            loading: false,
            range_start_options:[
                {
                    value: 1,
                    label: '从现在开始'
                },
                {
                    value: 2,
                    label: '30分钟后'
                },
                {
                    value: 3,
                    label: '1小时后'
                },
            ],
            range_end_options:[
                {
                    value: 1,
                    label: '7天'
                },
                {
                    value: 2,
                    label: '14天'
                },
                {
                    value: 3,
                    label: '30天'
                },
            ],
            form: {
                range_start:1,
                range_end:1,
                employee_selection: 2,
                complete_reservation:1,
                appointment_interval:1,
                technician_verification_switch:'1',
                user_acceptance:'1',
                offline_orders_commission:'1'
            },
            rules: {

            },
            original_custom_text: '',
        },
        mounted() {
            this.getData()
        },

        methods: {
            handleClick(tab, event) {},
            getData() {
                this.loading = true
                request({
                    method: 'get',
                    params: {
                        r: 'store/client/reserve-setting/index',
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        try {
                            if(e.data.data.setting.range_start){
                                Object.assign(this.form, e.data.data.setting);
                                this.form.technician_verification_switch = this.form.technician_verification_switch.toString();
                                this.form.user_acceptance = this.form.user_acceptance.toString();
                                this.form.offline_orders_commission = this.form.offline_orders_commission.toString();
                            }
                        } catch (e) {
                            console.error(e)
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            onSubmit() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.loading = true
                        request({
                            method: 'post',
                            params: {
                                r: 'store/client/reserve-setting/index',
                            },
                            data: {
                                setting: this.form
                            }
                        }).then(e => {
                            this.loading = false;
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.loading = false;
                        });
                    } else {
                        console.log(valid)
                    }
                })
            },
        }
    });
</script>
<style>
    .table-body {
        padding: 20px;
        background-color: #fff;
    }


    .el-tag+.el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;

    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .smsDialog .el-dialog__body {
        padding-right: 30px;
    }

    .vertical-radio-group .el-radio {
        display: block;
        margin-bottom: 10px;
    }
</style>