qimall/addons/WechatVideoShop/backend/views/shop/edit.php

<div id="app" v-cloak>
    <el-card v-loading="loading" style="border:0;min-width: 800px;" shadow="never" body-style="background-color: #f3f3f3;padding: 0 0;">
        <div slot="header">
            <div style="display:flex;align-items:center;justify-content:space-between;">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>
                        <span style="color: #409EFF;cursor: pointer" @click="$navigate({r:'wechat-video-shop/shop/index'})">店铺列表</span>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>{{ id > 0 ? '编辑' : '新增' }}</el-breadcrumb-item>
                </el-breadcrumb>
                <el-button :loading="submitLoading" class="button-item" size="small" type="primary" @click="submit('ruleForm')">保存
                </el-button>
            </div>
        </div>

        <el-col :span="24">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="270px">
                <el-row>
                    <el-col :span="24">
                        <div class="form-body">

                            <el-form-item label="店铺名称" prop="name" >
                                <el-input v-model="ruleForm.name" :disabled="true" placeholder="店铺名称自动获取">
                                </el-input>
                            </el-form-item>

                            <el-form-item label="微信视频小店APPID" prop="wechat_appid" >
                                <el-input v-model="ruleForm.wechat_appid" placeholder="请填写微信视频小店APPID">
                                </el-input>

                            </el-form-item>

                            <el-form-item label="微信视频小店密钥" prop="wechat_secret" >
                                <el-input v-model="ruleForm.wechat_secret" placeholder="请填写微信视频小店密钥">
                                </el-input>
                            </el-form-item>

                            <el-form-item label="微信视频小店消息推送令牌（Token）" prop="wechat_token" >
                                <el-input v-model="ruleForm.wechat_token" placeholder="请填写微信视频小店消息推送令牌（Token）" show-password>
                                </el-input>
                            </el-form-item>

                            <el-form-item label="微信视频小店消息加密密钥" prop="wechat_aes_key" >
                                <el-input v-model="ruleForm.wechat_aes_key" placeholder="微信视频小店消息加密密钥" show-password>
                                </el-input>
                            </el-form-item>

                            <h4 style="width: 270px; text-align: right; padding-right: 12px">退货地址</h4>
                            <!-- 退货地址 -->
                            <el-form-item label="联系人姓名" prop="contact_person" :rules="[
                                {required: true, message: '联系人姓名不能为空'}
                            ]">
                                <el-input size="small" v-model="ruleForm.contact_person" placeholder="请输入联系人姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="联系人手机号" prop="phone" :rules="[
                                {required: true, message: '联系人手机号码不能为空'}
                            ]">

                                <el-input size="small" v-model="ruleForm.phone" placeholder="请输入联系人手机号"></el-input>

                            </el-form-item>
                            <el-form-item label="所在区域" prop="district_id">
                                <div class="flex flex-x-center">
                                    <el-select v-model="provinceInfo" value-key='id' placeholder="请选择省" @change="regionChange($event, 1)">
                                        <el-option v-for="item in provinces" :key="item.id" :label="item.name" :value="item"></el-option>
                                    </el-select>
                                    <el-select v-model="cityInfo" value-key='id' placeholder="请选择市" @change="regionChange($event, 2)">
                                        <el-option v-for="item in citys" :key="item.id" :label="item.name" :value="item"></el-option>
                                    </el-select>
                                    <el-select v-model="districtInfo" value-key='id' placeholder="请选择区" @change='regionChange($event, 3)'>
                                        <el-option v-for="item in districts" :key="item.id" :label="item.name" :value="item"></el-option>
                                    </el-select>
                                    <el-input v-model="ruleForm.district_id" style="display: none"></el-input>
                                </div>
                            </el-form-item>
                            <el-form-item label="详细地址" prop="address" :rules="[
                                {required: true, message: '详细地址不能为空'}
                            ]">
                                <el-input type="textarea" size="small" v-model="ruleForm.address" placeholder="请输入门店详细地址"></el-input>
                            </el-form-item>
                            <el-form-item label="自动下架商品">
                                <el-switch
                                        v-model="ruleForm.is_auto_down_up_goods"
                                        :active-value="1"
                                        :inactive-value="0">
                                </el-switch>
                            </el-form-item>
                            <el-form-item label="视频号通知回调地址">
                                <el-input :disabled="true" readonly v-model="callback_url">
                                    <template #append>
                                        <el-button class="copy_btn" @click="copyLink">复制</el-button>
                                    </template>
                                </el-input>
                                <div>请前往视频号小店设置回调地址</div>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>

            </el-form>
        </el-col>

    </el-card>
</div>

<script src="/resources/unpkg/clipboard@1.5.12/dist/clipboard.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                id: 0,
                loading: false,
                submitLoading: false,
                ruleForm: {
                    id: 0,
                    name: '',
                    wechat_appid: '',
                    wechat_secret: '',
                    wechat_token: '',
                    wechat_aes_key: '',
                    province_id: '',
                    city_id: '',
                    district_id: '',
                    address: '',
                    contact_person: '',
                    phone: '',
                    province: '',
                    city: '',
                    district: '',
                    is_auto_down_up_goods: 0
                },
                rules: {
                    // name: [{
                    //     required: true,
                    //     message: '请输入店铺名称',
                    //     trigger: 'blur'
                    // }, ],
                    wechat_appid: [{
                        required: true,
                        message: '请输入微信视频小店APPID',
                        trigger: 'blur'
                    }, ],
                    wechat_secret: [{
                        required: true,
                        message: '请输入微信视频小店密钥',
                        trigger: 'blur'
                    }, ],
                    wechat_token: [{
                        required: true,
                        message: '请输入微信视频小店消息推送令牌（Token）',
                        trigger: 'blur'
                    }, ],
                    wechat_aes_key: [{
                        required: true,
                        message: '请输入微信视频小店消息加密密钥',
                        trigger: 'blur'
                    }, ],
                    district_id: [{
                        required: true,
                        message: '请选择退款地址',
                        trigger: 'blur'
                    }, ],
                    contact_person: [{
                        required: true,
                        message: '联系人不能为空',
                        trigger: 'blur'
                    }, ],
                    phone: [{
                        required: true,
                        message: '联系电话不能为空',
                        trigger: 'blur'
                    }, ],
                    address: [{
                        required: true,
                        message: '详细地址不能为空',
                        trigger: 'blur'
                    }, ],
                },
                provinceInfo: null,
                cityInfo: null,
                districtInfo: null,
                provinces: [],
                citys: [],
                districts: [],
                callback_url: '<?= $callback_url ?>',
                // callback_url: '',
            };
        },
        created() {
            this.id = getQuery('id')
            if (this.id > 0) this.loadData();
            this.regionChange({id: 1}, 0);
        },
        mounted: function() {

        },
        methods: {
            loadData() {
                if (this.id) {
                    this.loading = true
                    request({
                        params: {
                            r: 'wechat-video-shop/shop/edit',
                            id: this.id,
                        },
                    }).then(e => {
                        this.loading = false;
                        if (e.data.code === 0) {
                            let copyForm = Object.assign({}, this.ruleForm)
                            let form = Object.assign(copyForm, e.data.data)
                            this.ruleForm = form
                            this.provinceInfo = form.provinceInfo
                            this.cityInfo = form.cityInfo
                            this.districtInfo = form.districtInfo
                            // this.callback_url = form.callback_url
                            this.regionChange({id: this.ruleForm.province_id}, 1);
                            this.regionChange({id: this.ruleForm.city_id}, 2);

                        } else {
                            this.$message.error(e.data.msg);
                        }
                    }).catch(e => {});
                }
            },
            submit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        let params = {
                            r: 'wechat-video-shop/shop/edit',
                            id: this.id,
                        }
                        request({
                            params: params,
                            method: 'post',
                            data: {
                                setting: this.ruleForm
                            },
                        }).then(e => {
                            this.submitLoading = false;
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg);
                                setTimeout(() => {
                                    navigateTo({
                                        r: 'wechat-video-shop/shop/index',
                                    })
                                }, 1500)
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {});
                    } else {
                        this.$message.error('部分参数验证不通过');
                    }
                });
            },
            regionChange(e, level) {
                let self = this;
                request({
                    params: {
                        r: 'wechat-video-shop/shop/region',
                        region_id: e.id,
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        switch (level) {
                            case 0:
                                self.provinces = e.data.data;
                                break;
                            case 1:
                                self.citys = e.data.data;
                                this.ruleForm.province_id = this.provinceInfo.id
                                this.ruleForm.province = this.provinceInfo.name
                                break;
                            case 2:
                                self.districts = e.data.data;
                                this.ruleForm.city_id = this.cityInfo.id
                                this.ruleForm.city = this.cityInfo.name
                                break;
                            case 3:
                                self.streets = e.data.data;
                                this.ruleForm.district_id = this.districtInfo.id
                                this.ruleForm.district = this.districtInfo.name
                                break;
                        }
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                    self.$message.error('网络错误');
                    return false;
                });

            },
            copyLink(str) {
                let _ = this;
                let clipboard = new Clipboard('.copy_btn', {
                    text: function() {
                        return _.callback_url;
                    }
                });
                clipboard.on('success', function(e) {
                    // console.log("success")
                    _.$message.success('复制成功');
                    e.clearSelection();
                    clipboard.destroy()
                });
                clipboard.on('error', function(e) {
                    // console.log("error")
                    _.$message.error('复制失败，请手动复制');
                });
            },
        },
        computed: {

        }
    });
</script>
<style>
    .form-body {
        background-color: #fff;
        padding: 20px 40% 20px 0;
    }

    .button-item {
        padding: 9px 25px;
    }

    .form-body .item {
        width: 300px;
        margin-bottom: 50px;
        margin-right: 25px;
    }



    .item .el-form-item {
        width: 300px;
        margin: 20px auto;
    }

    .form-body .app-share {
        padding-top: 12px;
        border-top: 1px solid #e2e2e2;
        margin-top: -20px;
    }

    .form-body .app-share .app-share-bg {
        position: relative;
        width: 310px;
        height: 360px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center
    }



    .form-body .app-share .app-share-bg .pic-image {
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: cover;
        width: 160px;
        height: 130px;
    }

    .form-body .tab_tpis {
        font-size: 12px;
        color: #737373;
    }





    .tab_tpis {
        font-size: 12px;
        color: #737373;
    }

    .el-input__inner {
        height: 32px;
        line-height: 32px;
        font-size: 13px;
    }

    .el-input {
        font-size: 13px;
    }
</style>