qimall/backend/modules/mall/views/mini-program/edit.php

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

?>
<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>
<!--                <el-button class="button-item" :loading="btnLoadings" type="primary" @click="submitWechat()"-->
<!--                           size="small">-->
<!--                    上传小程序文件-->
<!--                </el-button>-->
<!--                <el-button class="button-item" :loading="btnLoading" type="primary" @click="checkImg()"-->
<!--                           size="small">-->
<!--                    查看-->
<!--                </el-button>-->
            </div>
        </div>
        <div class="form-body">
            <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="150px">
                <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="小程序app_id" prop="app_id">
                            <el-input v-model="ruleForm.app_id"></el-input>
                        </el-form-item>
                        <el-form-item label="小程序secret" prop="secret">
                            <el-input @focus="hidden.secret = false" v-if="hidden.secret" readonly placeholder="已隐藏内容，点击查看或编辑"></el-input>
                            <el-input v-else v-model.trim="ruleForm.secret"></el-input>
                        </el-form-item>
                        <el-form-item label="小程序上传密钥" prop="upload_secret_key">
                            <el-input type="textarea" v-model="ruleForm.upload_secret_key" :autosize="{minRows: 4, maxRows: 10}"></el-input>
                        </el-form-item>
                        <el-form-item label="小程序授权清除">
                            <el-button size="small" @click="clearAuth">执行</el-button>
                        </el-form-item>
<!--                        <el-form-item label="版本号" prop="version">-->
<!--                            <el-input v-model="ruleForm.version"></el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="描述" prop="desc">-->
<!--                            <el-input v-model="ruleForm.desc"></el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="是否带直播" prop="desc">-->
<!--                            <el-radio-group  v-model="ruleForm.is_live" size="small">-->
<!--                                <el-radio :label="0" border>否</el-radio>-->
<!--                                <el-radio :label="1" border>是</el-radio>-->
<!--                            </el-radio-group>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="密钥文件" prop="secret_key_file">-->
<!--                            <el-col :span="10">-->
<!--                                <el-input v-model="ruleForm.secret_key_file" :placeholder="ruleForm.secret_key_file" :disabled="true"></el-input>-->
<!--                            </el-col>-->
<!--                            <el-col :span="4">-->
<!--                                <input ref="secret_key_file" type="file" accept=".key" :multiple="multiple" style="display: none"-->
<!--                                       @change="handleChange">-->
<!--                                <el-button size="small" @click="uploadPem('secret_key_file')">上传文件</el-button>-->
<!--                            </el-col>-->
<!--                        </el-form-item>-->

                    </el-col>
                </el-row>
            </el-form>
        </div>
    </el-card>
    <el-dialog v-loading="posterLoading" title="体验版" :visible.sync="sharePop" width="5%" center :close-on-click-modal="false">
        <div class="share-pop-model" flex>
            <div style="width: 180px; height: 180px;background: #F2F2F2;margin-left: 170px;" flex="main:center cross:center">
                <el-image style="width: 144px; height: 144px;" :src="qrcode" center></el-image>
            </div>
        </div>
    </el-dialog>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                hidden: {
                    app_id: true,
                    secret: true,
                    original_id: true,
                    // mch_id: false,
                    // pay_secret: true,
                    // cert_pem: true,
                    // key_pem: true,
                },
                dataLoading: false,
                rules: {
                    name: [
                        {required: true, message: '请输入小程序名称', trigger: 'change'},
                    ],
                    app_id: [
                        {required: true, message: '请输入app_id', trigger: 'change'},
                    ],
                    original_id: [
                        {required: true, message: '请输入原始ID', trigger: 'change'},
                    ],
                    secret: [
                        {required: true, message: '请输入secret', trigger: 'change'},
                    ],
                },
                btnLoading: false,
                btnLoadings: false,
                cardLoading: false,
                mini_program: '',
                ruleForm: {
                    name: '',
                    app_id: '',
                    secret: '',
                    original_id: '',
                    version: '',
                    desc: '',
                    secret_key_file: '',
                    is_live: 0,
                    upload_secret_key:'',
                    index_url: '',
                },
                pem_value: '',
                qrcode:'',
                sharePop:false,
                posterLoading: false,

            };
        },
        created() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'mall/mini-program/edit',
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        if (!isEmpty(e.data.data.mini_program)) {
                            this.ruleForm = e.data.data.mini_program;
                        }
                    } 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/mini-program/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;
                    }
                });
            },
            submitWechat() {
                let self = this;
                self.btnLoadings = true;
                request({
                    params: {
                        r: 'mall/mini-program/upload-wechat'
                    },
                    method: 'post',
                }).then(e => {
                    self.btnLoadings = 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.btnLoadings = false;
                });
            },
            checkImg() {
                let self = this;
                //this.sharePop = true;
                window.open('http://1.14.248.220/' + self.ruleForm.app_id +".jpg")
                return;
                this.qrcode = 'http://1.14.248.220/' + self.ruleForm.app_id +".jpg";
                return false;
            },
            uploadPem(key) {
                this.pem_value = 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/upload';
                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) {
                        console.log(e.data.path);
                        this.ruleForm.secret_key_file = 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: 'mp-wx',
                        }
                    }).then(res => {
                        this.$message.success("清除成功");
                    }).catch(e => {
                        this.$message.error("清除失败");
                    });
                })
            },
        }
    });
</script>