qimall/backend/modules/admin/views/setting/pay.php

<?php
use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-attachment');
ComponentHelper::loadComponentView('com-upload');
ComponentHelper::loadComponentView('com-rich-text');

?>
<style>
    .form-body {
        padding: 20px 0;
        background-color: #fff;
        margin-bottom: 20px;
    }

    .form-button {
        margin: 0;
    }

    .form-button .el-form-item__content {
        margin-left: 0!important;
    }

    .button-item {
        padding: 9px 25px;
    }
    .app-share {
        padding-top: 12px;
        border-top: 1px solid #e2e2e2;
        margin-top: -20px;
    }

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

    .app-share .app-share-bg .title {
        width: 160px;
        height: 29px;
        line-height: 1;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .app-share .app-share-bg .pic-image {
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: cover;
        width: 160px;
        height: 130px;
    }
    .goods-list {
        flex-wrap: wrap;
        margin-top: 10px;
        /* cursor: move; */
    }
    .goods-item,
    .goods-add {
        width: 50px;
        height: 50px;
        position: relative;
        border: 1px solid #e2e2e2;
        margin-right: 15px;
        margin-bottom: 15px;
    }
    .goods-add .el-button {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 0;
        padding: 0;
    }
    .goods-delete {
        position: absolute;
        left: calc(100% - 13px);
        top: -13px;
        width: 25px;
        height: 25px;
        line-height: 25px;
        padding: 0 0;
        visibility: hidden;
        z-index: 1;
    }
    .goods-delete .el-icon-close {
        position: absolute;
        top: 6px;
        left: 6px;
    }
    .goods-item:hover .goods-delete {
        visibility: visible;
    }
    .goods-pic {
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
        background-color: #f6f6f6;
        background-repeat: no-repeat;
    }
    .input-item {
        display: inline-block;
        width: 250px;
        margin: 0;
    }
    .input-item .el-input__inner {
        border-right: 0;
    }
    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }
    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }
    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }
    .input-item .el-input-group__append .el-button {
        padding: 0;
    }
    .input-item .el-input-group__append .el-button {
        margin: 0;
    }
    .customize-share-title {
        position: relative;
        margin-top: 10px;
    }
    .customize-share-title .del-btn {
        position: absolute;
        top: -10px;
        left: 70px;
    }
</style>
<div id="app" v-cloak>
    <el-card class="box-card" v-loading="loading" shadow="never" style="border:0;min-width: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div class="form_box">
            <template>
                <el-card>
                    <el-form :model="ruleForm" size="small" ref="ruleForm" label-width="150px">
                        <el-tabs v-model="activeName" type="card">
                            <el-tab-pane label="微信设置" name="wxpay">
                                <?=ComponentHelper::loadComponentView('pay/wxpay', __DIR__); ?>
                            </el-tab-pane>

                            <el-tab-pane label="支付宝设置" name="alipay">
                                <?=ComponentHelper::loadComponentView('pay/alipay', __DIR__); ?>
                            </el-tab-pane>
                            <el-tab-pane label="应用付费" name="addonspay">
                                <?=ComponentHelper::loadComponentView('pay/addonspay', __DIR__); ?>
                            </el-tab-pane>
                        </el-tabs>
                        <el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 24px;" @click="submit" size="small">保存
                        </el-button>
                    </el-form>
                </el-card>
            </template>
            <template>

            </template>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                multiple: Boolean,
                loading: false,
                btnLoading: false,
                params: {},
                activeName: 'wxpay',
                ruleForm: {
                    wechat:{
                        status: {title:'启用微信支付',value:'0',remark: ''},
                        app_id: {title:'微信公众号APPID',value:'',remark: ''},
                        wechat_open_app_id: {title:'微信开放平台应用APPID',value:'',remark: ''},
                        wechat_mch_id: {title:'微信支付商户号',value:'',remark: ''},
                        wechat_pay_secret: {title:'微信支付Api密钥',value:'',remark: ''},
                        wechat_cert_pem: {title:'微信支付apiclient_cert.pem',value:'',remark: ''},
                        wechat_cert_pem_file: {title:'apiclient_cert.pem存储目录',value:'',remark: ''},
                        wechat_key_pem: {title:'微信支付apiclient_key.pem',value:'',remark: ''},
                        wechat_key_pem_file: {title:'apiclient_key.pem存储目录',value:'',remark: ''},
                    },
                    alipay:{
                        status: {title:'启用支付宝支付',value:'0',remark: ''},
                        alipay_app_id: {title:'支付宝app_id',value:'',remark: ''},
                        alipay_private_key: {title:'支付宝应用私钥',value:'',remark: ''},
                        alipay_public_key: {title:'支付宝应用公钥',value:'',remark: ''},
                    },
                    addons:{
                        payagreement:{title:'应用付费服务协议',value:'',remark: ''},
                    }
                },
                pem_value: '',
            }
        },
        mounted: function() {
            this.loadData();
        },
        methods: {
            loadData() {
                if(this.loading === true) return;
                this.loading = true;
                request({
                    params: {
                        r: 'admin/setting/pay',
                        type: 'pay'
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        if(e.data.data) {//有选中的
                            let data = e.data.data
                            Object.keys(this.ruleForm).forEach((key) => {
                                Object.keys(this.ruleForm[key]).forEach((k) => {
                                    if (data[key][k]) {
                                        var dataValue = data[key][k].value;
                                        if(data[key][k].value!=null&&data[key][k].value!=""){
                                            if (typeof dataValue == 'string' && (dataValue.indexOf("{") !== -1 || dataValue.indexOf("[") !== -1)) {
                                                // 将json字符串转为对象
                                                this.ruleForm[key][k].value = JSON.parse(data[key][k].value);
                                            }else{
                                                this.ruleForm[key][k].value = data[key][k].value;
                                            }
                                        }
                                    }
                                });
                            });
                            this.ruleForm.basic.web_url.value = data.web_url;
                        }
                    }
                }).catch(e => {
                    this.loading = false;
                })
            },
            submit() {
                this.btnLoading = true;
                this.$request({
                    params: {
                        r: 'admin/setting/pay',
                    },
                    method: 'post',
                    data: {
                        setting: this.ruleForm,
                    },
                }).then(e => {
                    this.btnLoading = false;
                    if (e.data.code === 0) {
                        this.$message.success(e.data.msg);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.btnLoading = 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'] = 'admin/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.ruleForm.wechat[this.pem_value].value = e.data.data.path;
                        this.$message.success('上传成功');
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error('上传失败');
                });
            },
        }
    });
</script>