qimall/backend/modules/mall/views/alipay-mini/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>

            </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="is_use_cert">
                            <el-switch
                                v-model="ruleForm.is_use_cert"
                                :active-value="1"
                                :inactive-value="0"
                                active-text="证书版"
                                inactive-text="公钥版">
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="商户ID" prop="mch_id">
                            <el-input v-model="ruleForm.mch_id"></el-input>
                        </el-form-item>
                        <el-form-item label="小程序名称" prop="name">
                            <el-input v-model="ruleForm.name"></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="AES密钥" prop="encryptKey">
                            <el-input v-model="ruleForm.encryptKey"></el-input>
                        </el-form-item>

                        <el-form-item label="应用私钥" prop="secret">
                            <el-input @focus="hidden.secret = false" v-if="hidden.secret" readonly placeholder="已隐藏内容，点击查看或编辑"></el-input>
                            <el-input v-else v-model.trim="ruleForm.merchantPrivateKey"></el-input>
                        </el-form-item>




<!--                        <el-form-item label="应用公钥证书" prop="merchantCertPath">-->
<!--                            <el-col :span="10">-->
<!--                                <el-input v-model="ruleForm.merchantCertPath" :placeholder="ruleForm.merchantCertPath" :disabled="true"></el-input>-->
<!--                            </el-col>-->
<!--                            <el-col :span="4">-->
<!--                                <input ref="merchantCertPath" type="file" accept=".key" :multiple="multiple" style="display: none"-->
<!--                                       @change="handleChange">-->
<!--                                <el-button size="small" @click="uploadPem('merchantCertPath')">上传文件</el-button>-->
<!--                            </el-col>-->
<!--                        </el-form-item>-->
                        <div v-show="ruleForm.is_use_cert == 1">
                            <el-form-item label="应用公钥" prop="merchantCertPath">
                                <el-col :span="10">
                                    <el-input v-model="ruleForm.merchantCertPath" :placeholder="ruleForm.merchantCertPath" :disabled="true"></el-input>
                                </el-col>
                                <el-col :span="4">
                                    <input ref="merchantCertPath" type="file" accept=".key" :multiple="multiple" style="display: none"
                                           @change="handleChange">
                                    <el-button size="small" @click="uploadPem('merchantCertPath')">上传文件</el-button>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="支付宝根证书" prop="alipayRootCertPath">
                                <el-col :span="10">
                                    <el-input v-model="ruleForm.alipayRootCertPath" :placeholder="ruleForm.alipayRootCertPath" :disabled="true"></el-input>
                                </el-col>
                                <el-col :span="4">
                                    <input ref="alipayRootCertPath" type="file" accept=".key" :multiple="multiple" style="display: none"
                                           @change="handleChangeAlipayRootCertPath">
                                    <el-button size="small" @click="uploadPem('alipayRootCertPath')">上传文件</el-button>
                                </el-col>
                            </el-form-item>
                        </div>
                        <el-form-item label="支付宝公钥证书" prop="alipayCertPath">
                            <el-col :span="10">
                                <el-input v-model="ruleForm.alipayCertPath" :placeholder="ruleForm.alipayCertPath" :disabled="true"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <input ref="alipayCertPath" type="file" accept=".key" :multiple="multiple" style="display: none"
                                       @change="handleChangeAlipayCertPath">
                                <el-button size="small" @click="uploadPem('alipayCertPath')">上传文件</el-button>
                            </el-col>
                        </el-form-item>


                        <el-form-item label="拥有授权手机号能力" prop="can_auth_phone">
                            <el-switch
                                    v-model="ruleForm.can_auth_phone"
                                    :active-value="1"
                                    :inactive-value="0"  active-text="是"
                                    inactive-text="否">
                            </el-switch>
                        </el-form-item>
<!--                        <el-form-item label="支付宝根证书" prop="alipayRootCertPath">-->
<!--                            <el-col :span="10">-->
<!--                                <el-input v-model="ruleForm.alipayRootCertPath" :placeholder="ruleForm.alipayRootCertPath" :disabled="true"></el-input>-->
<!--                            </el-col>-->
<!--                            <el-col :span="4">-->
<!--                                <input ref="alipayRootCertPath" type="file" accept=".key" :multiple="multiple" style="display: none"-->
<!--                                       @change="handleChangeAlipayRootCertPath">-->
<!--                                <el-button size="small" @click="uploadPem('alipayRootCertPath')">上传文件</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'},
                    ],
                    mch_id: [
                        {required: true, message: '请输入mch_id', trigger: 'change'},
                    ],
                },
                btnLoading: false,
                btnLoadings: false,
                cardLoading: false,
                mini_program: '',
                ruleForm: {
                    name: '',
                    app_id: '',
                    merchantPrivateKey: '',
                    merchantCertPath: '',
                    alipayPublicKey: '',
                    alipayRootCertPath: '',
                    alipayCertPath: '',
                    encryptKey:'',
                    mch_id: '',
                    is_use_cert: 0,
                    can_auth_phone: 0,
                },
                pem_value: '',
                qrcode:'',
                sharePop:false,
                posterLoading: false,
                multiple: false
            };
        },
        created() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'mall/alipay-mini/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/alipay-mini/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.pem_value = key;
                console.log(this.$refs)
                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) {
                        this.$set(this.ruleForm, 'merchantCertPath', e.data.data.path)
                        this.$message.success('上传成功');
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error('上传失败');
                });
            },


            handleChangeAlipayCertPath(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) {
                        this.$set(this.ruleForm, 'alipayCertPath', e.data.data.path)
                        this.$message.success('上传成功');
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error('上传失败');
                });
            },


            handleChangeAlipayRootCertPath(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) {
                        this.$set(this.ruleForm, 'alipayRootCertPath', e.data.data.path)
                        this.$message.success('上传成功');
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error('上传失败');
                });
            },


        }
    });
</script>