qimall/addons/ReservationService/backend/views/setting/index.php

<?php

use common\helpers\ComponentHelper;


?>

<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>
                <el-button size="small" type="primary" @click="onSubmit" :loading="loading">保存</el-button>
            </div>

        </div>

        <div class="table-body" v-loading="loading">
            <el-form size="small" ref="form" label-width="130px" :model="form" :rules="rules" >
                <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
                    <el-tab-pane label="基础设置" name="basic">
                        <?= ComponentHelper::loadComponentView('basic', __DIR__) ?>
                    </el-tab-pane>
                    <el-tab-pane label="短信配置" name="sms">
                        <?= ComponentHelper::loadComponentView('sms', __DIR__) ?>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </div>
    </el-card>

</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            loading: false,
            activeName: 'basic',
            inputCommentVisible: false,
            inputRefundVisible: false,
            inputRefundValue: '',
            inputCommentValue: '',
            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: {
                basic: {
                    is_enable: 0,
                    comment_tags: [],
                    refund_tags: [],
                    max_distance : 0,
                    settlement_method: 2,
                    custom_text: '技师',
                    total_score: 1,
                    speciality: 1,
                    service_attitude: 1,
                    timeliness: 1,
                    appointment_interval:'1',
                    range_start:1,
                    range_end:1,
                },
                sms: {
                    waitting_orders: {
                        title: '用户下单技师待接单通知',
                        type: 'waitting_orders',
                        tips: '',
                        data: {
                            template_id: '',
                            content: '',
                            key: '',
                            name: '',
                            vars: [],
                        },
                    },
                    refuse_orders: {
                        title: '技师接单订单拒绝通知',
                        type: 'refuse_orders',
                        tips: '',
                        data: {
                            template_id: '',
                            content: '',
                            key: '',
                            name: '',
                            vars: [],
                        },
                    },
                    accept_orders: {
                        title: '技师接单订单接受通知',
                        type: 'accept_orders',
                        tips: '',
                        data: {
                            template_id: '',
                            content: '',
                            key: '',
                            name: '',
                            vars: [],
                        },
                    },
                    waitting_orders_qcloud: {
                        title: '用户下单技师待接单通知',
                        type: 'waitting_orders_qcloud',
                        tips: '',
                        data: {
                            template_id: '',
                            content: '',
                            key: '',
                            name: '',
                            vars: [],
                        },
                    },
                    refuse_orders_qcloud: {
                        title: '技师接单订单拒绝通知',
                        type: 'refuse_orders_qcloud',
                        tips: '',
                        data: {
                            template_id: '',
                            content: '',
                            key: '',
                            name: '',
                            vars: [],
                        },
                    },
                    accept_orders_qcloud: {
                        title: '技师接单订单接受通知',
                        type: 'accept_orders_qcloud',
                        tips: '',
                        data: {
                            template_id: '',
                            content: '',
                            key: '',
                            name: '',
                            vars: [],
                        },
                    },
                    waitting_orders_submail: {
                        title: '用户下单技师待接单通知',
                        type: 'waitting_orders_submail',
                        tips: '',
                        data: {
                            template_id: '',
                            content: '',
                            key: '',
                            name: '',
                            vars: [],
                        },
                    },
                    refuse_orders_submail: {
                        title: '技师接单订单拒绝通知',
                        type: 'refuse_orders_submail',
                        tips: '',
                        data: {
                            template_id: '',
                            content: '',
                            key: '',
                            name: '',
                            vars: [],
                        },
                    },
                    accept_orders_submail: {
                        title: '技师接单订单接受通知',
                        type: 'accept_orders_submail',
                        tips: '',
                        data: {
                            template_id: '',
                            content: '',
                            key: '',
                            name: '',
                            vars: [],
                        },
                    },
                    'mall_sms': 'aliyun',
                },
            },
            events: [{
                    title: '用户下单技师待接单通知',
                    type: 'waitting_orders',
                    tips: ''
                },
                {
                    title: '技师接单订单拒绝通知',
                    type: 'refuse_orders',
                    tips: ''
                },
                {
                    title: '技师接单订单接受通知',
                    type: 'accept_orders',
                    tips: ''
                },
            ],
            smsForm: {
                id: '',
                content: '',
                key: '',
                name: '',
                vars: [],
                send_day: 0
            },
            rules: {

            },
            mall_sms: 'aliyun',
            smsDialogShow: false,
            smsCurrentKey: 'waitting_orders',
            smsKeys: <?= $sms_keys ?>,
            original_custom_text: '',
        },
        mounted() {
            this.getData()
        },

        methods: {
            handleClick(tab, event) {},
            getData() {
                this.loading = true
                request({
                    method: 'get',
                    params: {
                        r: 'reservation-service/setting/index',
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        try {
                            Object.assign(this.form, e.data.data)
                            this.form.basic.appointment_interval = this.form.basic.appointment_interval.toString();
                        } catch (e) {
                            console.error(e)
                        }
                        this.form.sms.mall_sms = e.data.data.mall_sms;
                        this.mall_sms = e.data.data.mall_sms
                        // console.log('mall_sms', this.form.sms.mall_sms);
                        this.mallSmsClick();
                        this.original_custom_text = e.data.data.custom_text

                        // 替换“技师”字眼
                        this.$set(this.form.sms.waitting_orders, 'title', this.form.sms.waitting_orders.title.replace('技师', this.original_custom_text))
                        this.$set(this.form.sms.refuse_orders, 'title', this.form.sms.refuse_orders.title.replace('技师', this.original_custom_text))
                        this.$set(this.form.sms.accept_orders, 'title', this.form.sms.accept_orders.title.replace('技师', this.original_custom_text))
                        this.events.forEach(item => {
                            item.title = item.title.replace('技师', this.original_custom_text)
                        })
                    } 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: 'reservation-service/setting/index',
                            },
                            data: {
                                body: this.form
                            }
                        }).then(e => {
                            this.loading = false;
                            if (e.data.code === 0) {
                                // 如果技师文字自定义修改了，则清除一下缓存
                                if (this.original_custom_text != this.form.basic.custom_text) {
                                    const cacheKey = 'addons_menus'; //缓存key
                                    const storeCacheKey = 'store_client_menus'; //缓存key
                                    let data = localStorage.getItem(cacheKey);
                                    if (data) {
                                        try {
                                            data = JSON.parse(data);
                                        } catch (e) {
                                            data = false;
                                        }

                                        if (data !== false && data['ReservationService'] !== undefined) {
                                            delete data['ReservationService']
                                            localStorage.setItem(cacheKey, JSON.stringify(data));
                                            window.location.reload()
                                        }
                                    }

                                    localStorage.removeItem(storeCacheKey)
                                }

                                this.$message.success(e.data.msg);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.loading = false;
                        });
                    } else {
                        console.log(valid)
                    }
                })
            },
            onSetSmsConfig(item) {
                this.smsCurrentKey = item.type
                this.smsDialogShow = true
                console.log('smsCurrentKey', this.smsCurrentKey);
            },
            onSmsDialogHide() {
                this.smsDialogShow = false
            },
            handleClose(tag, type) {
                let itag = type.toLowerCase()
                let index = `${itag}_tags`
                this.form.basic[index].splice(this.form.basic[index].indexOf(tag), 1);
            },

            showInput(type) {
                this[`input${type}Visible`] = true
                this.$nextTick(_ => {
                    this.$refs[`tag${type}`].$refs.input.focus();
                });
            },
            onInputContent(val) {
                let p = '';
                switch (this.form.sms.mall_sms) {
                    case 'aliyun':
                        p = /(\$\{[0-9A-Za-z_]+\})/g
                    break;
                    case 'qcloud':
                        p = /(\{[0-9]+\})/g
                    break;
                    case 'submail':
                        p = /(\@var\([0-9A-Za-z_]+\))/g
                    break;
                }
                let ms = val.match(p)
                console.log('onInputContent', ms, this.smsCurrentKey)
                if (ms && ms.length > 0) {
                    let vars = []
                    for (let msKey in ms) {
                        vars.push({
                            name: ms[msKey],
                            key: ''
                        })
                    }
                    this.$set(this.form.sms[this.smsCurrentKey].data, 'vars', vars)
                }
            },
            handleInputConfirm(type) {
                let inputValue = this[`input${type}Value`];
                if (inputValue) {
                    let tag = type.toLowerCase()
                    let index = `${tag}_tags`
                    this.form.basic[index].push(inputValue);
                }
                this[`input${type}Visible`] = false;
                this[`input${type}Value`] = '';
            },
            mallSmsClick() {
                switch (this.form.sms.mall_sms) {
                    case 'aliyun':
                        this.events = [{
                                title: '用户下单技师待接单通知',
                                type: 'waitting_orders',
                                tips: ''
                            },
                            {
                                title: '技师接单订单拒绝通知',
                                type: 'refuse_orders',
                                tips: ''
                            },
                            {
                                title: '技师接单订单接受通知',
                                type: 'accept_orders',
                                tips: ''
                            },
                        ];
                    break;
                
                    case 'qcloud':
                        this.events = [{
                                title: '用户下单技师待接单通知',
                                type: 'waitting_orders_qcloud',
                                tips: ''
                            },
                            {
                                title: '技师接单订单拒绝通知',
                                type: 'refuse_orders_qcloud',
                                tips: ''
                            },
                            {
                                title: '技师接单订单接受通知',
                                type: 'accept_orders_qcloud',
                                tips: ''
                            },
                        ]
                    break;

                    case 'submail':
                        this.events = [{
                                title: '用户下单技师待接单通知',
                                type: 'waitting_orders_submail',
                                tips: ''
                            },
                            {
                                title: '技师接单订单拒绝通知',
                                type: 'refuse_orders_submail',
                                tips: ''
                            },
                            {
                                title: '技师接单订单接受通知',
                                type: 'accept_orders_submail',
                                tips: ''
                            },
                        ]
                    break;
                }
                console.log(this.events);
            }
        }
    });
</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;
    }
</style>