qimall/backend/modules/mall/views/wechat/edit.php

<?php
/**
 * @link:http://www.gdqijianshi.com/
 * @copyright: Copyright (c) 2020 广东七件事集团
 * Created by PhpStorm
 * Author: ganxiaohao
 * Date: 2020-04-20
 * Time: 15:38
 */
use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-image');
ComponentHelper::loadComponentView('com-attachment');
ComponentHelper::loadComponentView('com-upload');
?>
<div id="app" v-cloak>
    <el-card v-loading="dataLoading" class="box-card" shadow="never"
             style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>公众号设置</span>
            <div style="float: right; margin: -5px 0">
                <el-button class="button-item" :loading="btnLoading" type="primary" @click="submit('ruleForm')" size="small">
                    保存
                </el-button>
            </div>
        </div>
        <div class="form-body">
            <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="150px" style="width: 800px;">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="公众号名称" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="原始ID" prop="original_id">
                            <el-input v-model="ruleForm.original_id"></el-input>
                        </el-form-item>
                        <el-form-item label="开发者ID(AppID)" prop="app_id">
                            <el-input v-model="ruleForm.app_id"></el-input>
                        </el-form-item>
                        <el-form-item label="开发者密码(AppSecret)" prop="secret">
                            <el-input v-model="ruleForm.secret"></el-input>
                        </el-form-item>
                        <el-form-item label="服务器地址(URL)" prop="web_url" width="200">
                            {{web_url}}
                        </el-form-item>
                        <el-form-item label="令牌(ToKen)" prop="token">
                            <el-input v-model="ruleForm.token"></el-input>
                        </el-form-item>
                        <el-form-item label="消息加解密密钥(EncodingAESKey)" prop="aes_key">
                            <el-input v-model="ruleForm.aes_key"></el-input>
                        </el-form-item>
                        <el-form-item label="公众号二维码" prop="pic_url">
                            <com-attachment :multiple="false" :max="1" @selected="qrcodePicUrl">
                                <el-tooltip class="item" effect="dark" content="建议尺寸44*44" placement="top">
                                    <el-button size="mini">选择文件</el-button>
                                </el-tooltip>
                            </com-attachment>
                            <com-image width="80px" height="80px" mode="aspectFill" :src="ruleForm.qrcode"></com-image>
                        </el-form-item>

                        <el-form-item label="公众号校验文件">
                            <el-col :span="10">
                                <el-input v-model="ruleForm.wechat_js" placeholder="请上传微信校验JS文件" :disabled="true"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <input ref="wechat_js_file" type="file" accept=".txt" :multiple="multiple" style="display: none"
                                       @change="handleChange">
                                <el-button size="small" @click="uploadPem('wechat_js_file')">上传文件</el-button>
                            </el-col>
                        </el-form-item>

                        <el-form-item label="公众号授权清除">
                            <el-button size="small" @click="clearAuth">执行</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </el-card>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                dataLoading: false,
                rules: {
                    name: [
                        {required: true, message: '请输入公众号名称', trigger: 'change'},
                    ],
                    app_id: [
                        {required: true, message: '请输入APPID', trigger: 'change'},
                    ],
                    secret: [
                        {required: true, message: '请输入密钥', trigger: 'change'},
                    ],
                    token: [
                        {required: true, message: '请输入token', trigger: 'change'},
                    ],
                },
                multiple: Boolean,
                wechat: null,
                btnLoading: false,
                web_url : '',
                ruleForm: {
                    name: '',
                    app_id: '',
                    secret: '',
                    token: '',
                    aes_key: '',
                    qrcode: '',
                    wechat_js: '',
                },
            };
        },
        created() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'mall/wechat/edit',
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                         if (!isEmpty(e.data.data.wechat)) {
                             let wechat = e.data.data.wechat
                             for (let key in this.ruleForm) {
                                 if (!isEmpty(wechat[key])) {
                                     this.ruleForm[key] = wechat[key]
                                 }
                             }
                         }
                        this.web_url = e.data.data.web_url;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },
            qrcodePicUrl(e) {
                if (e.length) {
                    this.ruleForm.qrcode = e[0].url;
                }
            },
            submit(formName) {
                this.$refs[formName].validate((valid) => {
                    let self = this;
                    if (valid) {
                        self.btnLoading = true;
                        request({
                            params: {
                                r: 'mall/wechat/edit'
                            },
                            method: 'post',
                            data: {
                                form: self.ruleForm,
                            }
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code === 0) {
                                self.$message.success(e.data.msg);
                            } else {
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e => {

                            self.$message.error(e.data.msg);
                            self.btnLoading = false;
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            uploadPem(key) {
                this.$refs[key].value = null;
                this.$refs[key].click();
            },
            handleChange(e){
                var rawFiles = e.target.files;
                if (rawFiles.length > 1) {
                    this.$message.error('最多一次只能上传一个文件。')
                    return;
                }
                let file = {
                    _complete: false,
                    response: null,
                    rawFile: rawFiles[0],
                };
                let formData = new FormData();
                const params = {};
                params['r'] = 'mall/file/wechat-js';
                for (let i in this.params) {
                    params[i] = this.params[i];
                }
                for (let i in this.fields) {
                    formData.append(i, this.fields[i]);
                }
                formData.append('file', file.rawFile, file.rawFile.name);
                this.$request({
                    headers: {'Content-Type': 'multipart/form-data'},
                    params: params,
                    method: 'post',
                    data: formData,
                }).then(e => {
                    if (e.data.code === 0) {
                        this.ruleForm.wechat_js = e.data.data.path;
                        this.$message.success('上传成功');
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error('上传失败');
                });
            },
            // 清除微信授权
            clearAuth(){
                this.$confirm('此操作不能恢复，确定执行吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request({
                        params: {
                            r: 'mall/user/clear-auth'
                        },
                        method: 'post',
                        data: {
                            platform: 'wechat',
                        }
                    }).then(res => {
                        this.$message.success("清除成功");
                    }).catch(e => {
                        this.$message.error("清除失败");
                    });
                })
            },
        }
    });
</script>