HM21St_Page_Manager/src/views/system_config/PaySetting.vue

<template>
  <div class="manage-root personnel-create">
    <Header />
    <div class="manage-root-contain">
        <nav-menu class="manage-root-contain-left" :activeMenuIndex="activeMenuIndex"></nav-menu>
        <div class="manage-root-contain-right">
            <breadcrumb :breadcrumbList="breadcrumbList" class="breadcrumb-box"></breadcrumb>
            <div class="create-bottom">
                <h3>支付配置</h3>
                <el-form :model="registerForm" ref="registerForm" label-width="100px" class="registerForm" label-position="top">
                    <h6>微信支付：</h6>
                    <el-form-item label="开发者 ID" prop="app_id">
                        <el-input v-model="registerForm.wx.app_id" autocomplete="off" placeholder="请输入址" @blur="handleTrim('registerForm','wx','app_id')" >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="商户 ID" prop="mch_id">
                        <el-input v-model="registerForm.wx.mch_id" autocomplete="off" placeholder="请输入" @blur="handleTrim('registerForm','wx','mch_id')" >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="商户 API 安全密钥" prop="api_key">
                        <el-input v-model="registerForm.wx.api_key" autocomplete="off" placeholder="请输入" @blur="handleTrim('registerForm','wx','api_key')" >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="终端 IP" prop="spbill_create_ip">
                        <el-input v-model="registerForm.wx.spbill_create_ip" autocomplete="off" placeholder="请输入" @blur="handleTrim('registerForm','wx','spbill_create_ip')" >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="安全证书文件" prop="cert_file_List">
                        <upload :datafileList="registerForm.wx.cert_file_List" :changeFillId="handleAvatarSuccess" :fileName="'courseResource'" :filleNumber="1" :showList="true" />
                        <ul v-if="registerForm.wx.cert_file_List.length>0" class="resource-list">
                            <li v-for="(itemR,indexR) in registerForm.wx.cert_file_List" :key="indexR">
                                <a><span>{{itemR.name}}</span></a>
                                <i class="el-icon-delete" @click="handleDelResource(indexR)"></i>
                            </li>
                        </ul>
                    </el-form-item>
                    <el-form-item label="支付通知地址" prop="notify_url">
                        <el-input v-model="registerForm.wx.notify_url" autocomplete="off" placeholder="请输入" @blur="handleTrim('registerForm','wx','notify_url')" >
                        </el-input>
                    </el-form-item>
                    <h6>支付宝支付：</h6>
                    <el-form-item label="请求地址" prop="url">
                        <el-input v-model="registerForm.zfb.url" autocomplete="off" placeholder="请输入" @blur="handleTrim('registerForm','zfb','url')" >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="商户 appid" prop="app_id">
                        <el-input v-model="registerForm.zfb.app_id" autocomplete="off" placeholder="请输入" @blur="handleTrim('registerForm','zfb','app_id')" >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="应用私钥" prop="rsa_private_key">
                        <el-input v-model="registerForm.zfb.rsa_private_key" autocomplete="off" placeholder="请输入" @blur="handleTrim('registerForm','zfb','rsa_private_key')" >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="支付宝公钥" prop="alipay_public_key">
                        <el-input v-model="registerForm.zfb.alipay_public_key" autocomplete="off" placeholder="请输入" @blur="handleTrim('registerForm','zfb','alipay_public_key')" >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="SELLERID" prop="seller_id">
                        <el-input v-model="registerForm.zfb.seller_id" autocomplete="off" placeholder="请输入" @blur="handleTrim('registerForm','zfb','seller_id')" >
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('registerForm')" size="small" :loading="loading">保存</el-button>
                        <el-button @click="onCancel('registerForm')" size="small">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../components/Header.vue";
import NavMenu from "../../components/NavMenu.vue"
import Breadcrumb from '../../components/Breadcrumb.vue';
import { getLogin } from "@/api/ajax";
import Upload from "../../components/Upload.vue"

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, NavMenu, Breadcrumb, Upload },
  props: {},
  data() {
    //这里存放数据
    return {
        activeMenuIndex: "pay_setting",
        breadcrumbList:[
            {
                icon:'setting',
                url:'',
                text:''
            },
            {
                icon:'',
                url:'',
                notLink: true,
                text:'系统配置'
            },
            {
                icon:'',
                url:'',
                text:'支付配置'
            }
        ],
        registerForm:{
            wx:{
                app_id: '',
                mch_id: '',
                api_key: '',
                spbill_create_ip: '',
                notify_url: '',
                cert_file_id: '',
                cert_file_List: [],
                notify_url: ''
            },
            zfb:{
                url: '',
                app_id: '',
                rsa_private_key: '',
                alipay_public_key: '',
                seller_id: ''
            }
        },
        loading: false
    }
  },
  //计算属性 类似于data概念
  computed: {
    
  },
  //监控data中数据变化
  watch: {
    
  },
  //方法集合
  methods: {
    // 去掉前后空格
    handleTrim(form,filds,fild){
        this[form][filds][fild] = this[form][filds][fild].trim()
    },
    handleAvatarSuccess(fileList,name) {
        this.registerForm.wx.cert_file_List = fileList
        this.registerForm.wx.cert_file_id = fileList[0]&&fileList[0].response&&fileList[0].response.file_info_list&&fileList[0].response.file_info_list[0]?fileList[0].response.file_info_list[0].file_id:''
        this.$forceUpdate()
    },
    // 删除资源文件
    handleDelResource(i){
        this.$confirm("确定删除吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
            this.registerForm.wx.cert_file_List.splice(i, 1);
            this.$forceUpdate()
        });
    },
    // 提交表单
    onSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true
            let MethodName = "/OrgServer/Manager/SysConfigManager/SetSysConfig_Pay";
            let data = this.registerForm
            getLogin(MethodName, data)
            .then((res) => {
                this.loading = false
                if(res.status===1){
                    this.$message.success("保存成功")
                }
            }).catch((res) =>{
                this.loading = false
            })
          } else {
            return false;
          }
        });
    },
    // 取消 恢复到修改前状态
    onCancel(formName){
        this.$refs[formName].resetFields();
    },
    // 得到配置信息
    getInfo(){
        let MethodName = "/OrgServer/Manager/SysConfigManager/GetSysConfig_Pay";
        getLogin(MethodName, {})
        .then((res) => {
            if(res.status===1){
                this.registerForm = res
                this.registerForm.wx.cert_file_List = [
                    {
                        id: res.wx.cert_file_id,
                        name: res.wx.cert_file_name
                    }
                ]
            }
        }).catch((res) =>{
            
        })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getInfo()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  //生命周期-创建之前
  beforeCreated() { },
  //生命周期-挂载之前
  beforeMount() { },
  //生命周期-更新之前
  beforUpdate() { },
  //生命周期-更新之后
  updated() { },
  //生命周期-销毁之前
  beforeDestory() { },
  //生命周期-销毁完成
  destoryed() { },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.create-bottom{
    padding: 40px 40px;
    margin-top: 16px;
    background: #FFFFFF;
    border-radius: 4px;
    height: calc(100vh - 140px);
    overflow: auto;
    h3{
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;
        margin: 0 0 28px 0;
        color: #1D2129;
    }
    h6{
        color: #000;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px; /* 150% */
        margin: 24px 0 16px 0;
    }
}
.resource-list{
    list-style: none;
    margin: 12px 0 0 0;
    padding: 0;
    li{
        display: flex;
        align-items: center;
        a{
            width: 360px;
            padding: 7px 12px;
            background: #F7F8FA;
            border-radius: 2px;
            color: #1D2129;
            display: flex;
            align-items: center;
            cursor: inherit;
            span{
                overflow:hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                flex: 1;
                display: block;
                font-size: 14px;
                line-height: 22px;
            }
            .svg-icon{
                width: 16px;
                height: 16px;
                margin-right: 8px;
                color: #4E5969;
            }
        }
        .el-icon-delete{
            color: #4E5969;
            cursor: pointer;
            margin-left: 12px;
            &:hover{
                color: #165DFF;
            }
        }
    }
}
</style>

<style lang="scss">

</style>