qimall/addons/Store/client/views/setting/customer.php

<div id="app" v-cloak>
    <div class="container">
        <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
            <div slot="header">
                <div class="flex flex-x-between flex-y-center">
                    <span>客服设置</span>
                </div>
            </div>
        </el-card>

        <div class="content_form">
            <el-form :model="formData" ref="elForm" label-width="180px" style="position: relative;">
                <el-alert title="警告:如果开启客服必须填写外部客服链接" type="warning" :closable="false"></el-alert>
                <el-form-item label="是否开启客服:" style="margin-top: 10px;">
                    <el-checkbox v-model="formData.is_customer" label="是否开启" :true-label="1"
                                 :false-label="0"></el-checkbox>
                </el-form-item>
                <el-form-item :label="item.label" v-for="(item,index) in formData.customer_types">
                    <div class="el_customer_group">
                        <el-input :placeholder="getCustomerTypesPlaceholder(item)" v-model="item.url" clearable style="width: 30%;">
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmitCustomer" size="small">保存数据</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            customers: [],
            formData: {
                is_customer: 0,// 是否开启客服
                customer_types: [
                    {
                        value: 'official',
                        url: '',
                        label: '公众号外部客服链接:'
                    }
                ],// 客服显示类型
            },
        },
        methods: {
            getCustomers: function () {
                request({
                    params: {
                        r: 'store/client/setting/customer',
                    },
                    method: 'get',
                }).then(e => {
                    const sourceValues = e.data.data.setting.customer_types.map(obj => obj.value);
                    const formValues = this.formData.customer_types.map(obj => obj.value);
                    if (sourceValues.length > formValues.length) {// 当数据库数据长度大于formData长度
                        let newValues = sourceValues.filter(x => !formValues.includes(x));
                        if (newValues.length > 0) {
                            e.data.data.setting.customer_types = e.data.data.setting.customer_types.filter(function (item) {
                                return !newValues.includes(item.value);
                            })
                        }
                    }
                    this.formData.customer_types.forEach(item => {
                        if (!sourceValues.includes(item.value)) {
                            e.data.data.setting.customer_types.push(item);
                        }
                        e.data.data.setting.customer_types.find(obj => obj.value === item.value).label = item.label;
                    })
                    this.formData = e.data.data.setting;
                }).catch(e => {
                })
            },
            onSubmitCustomer: function () {
                request({
                    params: {
                        r: 'store/client/setting/customer',
                    },
                    method: 'post',
                    data: this.formData,
                }).then(e => {
                    if (e.data.code === 0) {
                        this.$message({
                            message: e.data.msg,
                            type: 'success',
                            duration: 2000,
                            onClose: () => {
                                this.getCustomers();
                            }
                        })
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error(e.data.msg);
                })
            },
            getCustomerTypesPlaceholder(val) {// 获取客服类型placeholder
                return val.value === 'web_view' ? '请填写webview外部客服:例如 group_id=xxx&score=xxx' : '请填写外部客服链接';
            }
        },
        mounted: function () {
            this.getCustomers();
        }
    });
</script>
<style>
    .content_form {
        padding: 20px;
        background: #FFFFFF;
    }

    .el_customer_group {
        display: flex;
        justify-content: left;
    }

    .el-checkbox-group {
        margin-left: 20px;
    }
</style>