页面修改

src/components/FALiPaySetting.vue

+<style>
+  .FALiPaySetting {
+    height: 100%;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    -ms-flex-preferred-size: auto;
+    flex-basis: auto;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    min-width: 0;
+    font-size: 14px;
+  }
+
+  .FALiPaySetting .mainLeftMenu {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    color: #fff;
+  }
+
+  .FALiPaySetting .leftMenu1 {
+    background: #444444;
+    cursor: pointer;
+    width: 200px;
+    height: 100%;
+    overflow-y: auto;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  .FALiPaySetting .asideInner {
+    background: rgba(0, 0, 0, 0.15);
+    padding: 6px 6px;
+    width: 100%;
+    border-radius: 3px;
+    font-weight: bold;
+  }
+
+  .FALiPaySetting .F_Logo {
+    height: 60px;
+    background: #464d54;
+    color: #f2f2f2;
+    cursor: pointer;
+    font-weight: bold;
+    text-align: center;
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+  }
+
+  .FALiPaySetting .mainRightContent {
+    width: 100%;
+    height: 100%;
+    background-color: #f3f3f3;
+  }
+
+  .FALiPaySetting .mainRightTop {
+    width: 100%;
+    height: 60px;
+    background: #fff;
+    display: flex;
+    justify-content: space-between;
+    color: #909399;
+  }
+
+  .FALiPaySetting .mainRightLeft {
+    width: 110px;
+    height: 60px;
+    line-height: 62px;
+    text-align: center;
+    margin-left: 30px;
+    cursor: pointer;
+    position: relative;
+    top: -2px;
+  }
+
+  .FALiPaySetting .marinRightList {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 300px;
+    float: right;
+  }
+
+  .FALiPaySetting .marinRightList ul {
+    display: flex;
+    width: 100%;
+    justify-content: space-around;
+  }
+
+  .FALiPaySetting .marinRightList ul li {
+    display: block;
+    list-style-type: none;
+    cursor: pointer;
+    color: #909399;
+    outline: none;
+    border: none;
+  }
+
+  .FALiPaySetting .main_routerPage {
+    padding: 20px;
+    overflow-y: scroll;
+  }
+
+  .FALiPaySetting .FALiPaySettingUU {
+    position: fixed;
+    width: 200px;
+    height: 100%;
+    position: fixed;
+    top: 60px;
+    left: 0;
+    overflow: auto;
+    z-index: 5;
+    background-color: rgb(84, 92, 100);
+  }
+
+  .FALiPaySetting .FALiPaySettingUU .menu_item {
+    font-size: 14px;
+    color: #303133;
+    padding: 0 20px;
+    cursor: pointer;
+    -webkit-transition: border-color .3s, background-color .3s, color .3s;
+    transition: border-color .3s, background-color .3s, color .3s;
+    box-sizing: border-box;
+    height: 56px;
+    line-height: 56px;
+    list-style: none;
+    white-space: nowrap;
+    color: #fff;
+    display: flex;
+    align-items: center;
+  }
+
+  .FALiPaySetting .FALiPaySettingUU .menu_item i {
+    margin-right: 5px;
+    width: 24px;
+    text-align: center;
+    font-size: 18px;
+    vertical-align: middle;
+    color: #909399;
+  }
+
+  .FALiPaySetting .menu_item:hover {
+    background-color: rgba(67, 74, 80);
+  }
+
+  .FALiPaySetting .F_Logo:hover {
+    background-color: #30353a;
+    color: #fff;
+  }
+
+  .FALiPaySetting .Fchecked {
+    color: rgb(255, 208, 75) !important;
+  }
+
+  .FALiPaySetting .Fchecked i {
+    color: rgb(255, 208, 75) !important;
+  }
+
+</style>
+<template>
+  <div class="FALiPaySetting">
+    <div class="mainLeftMenu">
+      <div class="leftMenu1">
+        <div class="F_Logo">
+          <div class="asideInner" @click="CommonJump('mallIndex')">{{currentUser.MallName}}
+          </div>
+        </div>
+        <ul class="FALiPaySettingUU">
+          <li class="menu_item" :class="{'Fchecked':isChecked=='/ALiPayAppConfig'}"
+            @click="isChecked='/ALiPayAppConfig',CommonJump('ALiPayAppConfig')">
+            <i class="el-icon-menu"></i><span>基础配置</span>
+          </li>
+          <li class="menu_item" :class="{'Fchecked':isChecked=='/ALiPayAppMsg'}"
+            @click="isChecked='/ALiPayAppMsg',CommonJump('ALiPayAppMsg')">
+            <i class="el-icon-menu"></i><span>消息通知</span>
+          </li>
+
+        </ul>
+      </div>
+    </div>
+    <div class="mainRightContent">
+      <div class="mainRightTop">
+        <div class="mainRightLeft">支付宝小程序</div>
+        <div class="marinRightList">
+          <ul>
+            <li style="display:none">缓存</li>
+            <li style="display:none"> title="教程管理">
+              <el-dropdown trigger="click">
+                <span class="el-dropdown-link">
+                  教程管理<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item>操作教程</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </li>
+            <li :title="currentUser.MallName">
+              <el-dropdown trigger="click">
+                <span class="el-dropdown-link">
+                  {{currentUser.MallName}}<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item disabled>{{currentUser.MallName}}</el-dropdown-item>
+                  <el-dropdown-item disabled>{{currentUser.Account}}({{currentUser.MobilePhone}})</el-dropdown-item>
+                  <el-dropdown-item @click.native="CommonJump('index')">返回系统</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="main_routerPage" :style="{height: Height+'px'}">
+        <router-view />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        currentUser: {},
+        isChecked: '',
+        Height: 0
+      };
+    },
+    created() {
+      this.currentUser = this.getLocalStorage();
+      this.isChecked = this.$route.path;
+      if (this.$route.query.FIndex) {
+        this.CommonJump('ALiPayAppConfig');
+        this.isChecked = '/ALiPayAppConfig'
+      }
+    },
+    methods: {},
+    mounted() {
+      this.Height = document.documentElement.clientHeight - 60;
+      //监听浏览器窗口变化　
+      window.onresize = () => {
+        this.Height = document.documentElement.clientHeight - 60
+      }
+    }
+  };
+
+</script>

src/components/StoreDesign/ALiPayAppConfig.vue

+<style>
+  .wexinappconfig .mimitBody {
+    padding: 20px;
+    background-color: #fff;
+    margin: 10px 0 20px 0;
+    display: table;
+    width: 100%;
+  }
+
+  .wexinappconfig .mimitList {
+    margin-bottom: 15px;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .wexinappconfig .mimitBody .el-tag {
+    min-width: 120px;
+    padding-right: 50px;
+  }
+
+  .wexinappconfig .el-button--small {
+    padding: 9px 25px;
+  }
+
+</style>
+<template>
+  <div class="wexinappconfig">
+    <div class="CommonHeader">支付宝小程序配置</div>
+    <div class="mimitBody">
+      <div class="el-col el-col-12">
+        <el-form :model="appConfig" :rules="rules" ref="appConfig" label-width="150px">
+          <el-form-item label="小程序AppId" prop="AliPayAppId" size="small">
+            <el-input type="text" size="small" maxlength="200" v-model="appConfig.AliPayAppId">
+            </el-input>
+          </el-form-item>
+          <el-form-item label="支付宝公钥" prop="AliPayApiSecret" size="small">
+            <el-input v-if="isShowAppSecret" type="text" @focus="isShowAppSecret=false" size="small"
+              placeholder="已隐藏内容，点击查看或编辑">
+            </el-input>
+            <el-input v-else type="text" size="small" maxlength="5000" v-model="appConfig.AliPayApiSecret">
+            </el-input>
+          </el-form-item>
+          <el-form-item label="开发者私钥" prop="AliPayPrivateKey" size="small">
+            <el-input type="text" size="small" maxlength="5000" v-model="appConfig.AliPayPrivateKey">
+            </el-input>
+          </el-form-item>
+
+          <el-form-item label="支付宝支付证书" prop="AliPayCertificateUrl" size="small">
+            <template>
+              <el-upload class="upload-demo" accept='doc,.docx,.xlsx,.xls,.pdf,.pem,.p12' :action="importFileUrl"
+                :multiple="false" :on-success="successUpload" :file-list="fileList" :on-remove="handleRemove">
+                <el-button size="small" type="primary">点击上传</el-button>
+              </el-upload>
+            </template>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <el-button size="small" type="primary" @click="submitForm('appConfig')">保存</el-button>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        //是否显示小程序appSecret
+        isShowAppSecret: true,
+        //是否显示微信支付Api密钥
+        isShowApi: true,
+        //是否显示微信支付
+        isShowClientOne: true,
+        isShowClientTwo: true,
+        //修改配置MSG
+        appConfig: {
+          MallBaseId: 0, //小程序Id
+          AliPayAppId: "", //支付宝小程序AppId
+          AliPayApiSecret: "", //支付宝公钥，由支付宝生成
+          AliPayPrivateKey: "", //开发者私钥
+          AliPayCertificate: "", //支付宝支付证书
+          AliPayCertificateUrl: "", //支付宝支付证书路径
+        },
+        fileList: [],
+        importFileUrl: this.domainManager().UploadBlob,
+
+        rules: {
+          AliPayAppId: [{
+            required: true,
+            message: "请输入appid",
+            trigger: "blur"
+          }],
+          AliPayApiSecret: [{
+            required: true,
+            message: "请输入appsecret",
+            trigger: "blur"
+          }],
+          AliPayPrivateKey: [{
+            required: true,
+            message: "请输入mchid",
+            trigger: "blur"
+          }],
+          WeChatApiSecret: [{
+            required: true,
+            message: "请输入key",
+            trigger: "blur"
+          }],
+        //   AliPayCertificateUrl: [{
+        //     required: true,
+        //     message: "请上传微信支付证书",
+        //     trigger: "blur"
+        //   }]
+        }
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      //版权信息
+      GetALiPayAppConfig() {
+        this.fileList = [];
+        this.appConfig.MallBaseId = this.getLocalStorage().MallBaseId;
+        this.apipost("/api/AliPayConfig/GetALiAppConfig", {
+          MallBaseId: this.appConfig.MallBaseId,
+        }, res => {
+          if (res.data.resultCode == 1) {
+            this.appConfig.AliPayAppId = res.data.data.AliPayAppId;
+            this.appConfig.AliPayApiSecret = res.data.data.AliPayApiSecret;
+            this.appConfig.AliPayPrivateKey = res.data.data.AliPayPrivateKey;
+            this.appConfig.AliPayCertificate = res.data.data.AliPayCertificate;
+            this.appConfig.AliPayCertificateUrl = res.data.data.AliPayCertificateUrl;
+          
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+      submitForm(msg) {
+        //提交创建、修改表单
+        this.$refs[msg].validate(valid => {
+          if (valid) {
+            this.UpdateAppConfig();
+          } else {
+            return false;
+          }
+        });
+      },
+      //修改支付宝小程序配置
+      UpdateAppConfig() {
+        this.apipost("/api/AliPayConfig/SetAliAppConfig", this.appConfig, res => {
+          if (res.data.resultCode == 1) {
+            this.GetALiPayAppConfig();
+            this.Success("操作成功!");
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+      successUpload(file) {
+        let list = [];
+        list.push({
+          name: file.data.Path.split('WeChatApp')[1].replace(/[\\]/g, ''),
+          url: file.data.Path.split('WeChatApp')[1].replace(/[\\]/g, ''),
+        })
+        this.fileList = list;
+        //this.appConfig.WeChatPayCertificateUrl = file.data.Path.split('WeChatApp')[1].replace(/[\\]/g, '')
+      },
+      handleRemove(file, fileList) {
+        this.fileList = fileList;
+        if (this.fileList.length == 0) {
+         // this.appConfig.WeChatPayCertificateUrl = '';
+        }
+      },
+    },
+    mounted() {
+      this.GetALiPayAppConfig();
+    },
+  };
+
+</script>

src/components/StoreDesign/ALiPayAppMsg.vue

+<style>
+  .weixinappmsg {
+    position: relative;
+  }
+
+  .weixinappmsg .mimitBody {
+    padding: 20px;
+    background-color: #fff;
+    margin: 10px 0 20px 0;
+    display: table;
+    width: 100%;
+  }
+
+  .weixinappmsg .mimitList {
+    margin-bottom: 15px;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .weixinappmsg .mimitBody .el-tag {
+    min-width: 120px;
+    padding-right: 50px;
+  }
+
+  .weixinappmsg .el-button--small {
+    padding: 9px 15px;
+  }
+
+  .wexin_Header {
+    padding: 0 20px;
+    height: 56px;
+    line-height: 56px;
+    background-color: #fff;
+    margin-bottom: 10px;
+  }
+
+  .weixinTopBtn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 2;
+  }
+
+  .weixin_warmTips {
+    margin: 0px 20px 20px;
+    background-color: rgb(244, 244, 245);
+    padding: 10px 15px;
+    color: rgb(144, 147, 153);
+    display: inline-block;
+    font-size: 15px;
+  }
+
+</style>
+<template>
+  <div class="weixinappmsg">
+    <el-button class="weixinTopBtn" type="primary" size="small" @click="getMiniAdd">一键添加订阅信息</el-button>
+    <div class="wexin_Header">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="商城订阅信息" name="1"></el-tab-pane>
+        <el-tab-pane label="分销订阅信息" name="2"></el-tab-pane>
+      </el-tabs>
+    </div>
+    <template v-if="checkIndex==1">
+      <div class="mimitBody">
+        <div class="el-col el-col-24">
+          <div class="weixin_warmTips">温馨提示：获取前请先确认您已获得订阅消息的使用权限，并且订阅消息中没有任何数据。获取后请不要到小程序后台 删除相应的订阅消息，否则会影响订阅消息正常使用。
+          </div>
+          <el-form :model="appMallSubscribeMsg" ref="appMallSubscribeMsg" label-width="300px">
+            <el-form-item label="下单成功提醒(类目: 服装/鞋/箱包)">
+              <el-input type="text" style="width:30%" size="small" maxlength="200"
+                v-model="appMallSubscribeMsg.OrderSuccessTpl">
+              </el-input>
+              <el-button plain size="small">查看订阅消息示例</el-button>
+            </el-form-item>
+            <el-form-item label="订单取消通知(类目: 服装/鞋/箱包)">
+              <el-input type="text" style="width:30%" size="small" maxlength="200"
+                v-model="appMallSubscribeMsg.OrderCancelTpl">
+              </el-input>
+              <el-button plain size="small">查看订阅消息示例</el-button>
+            </el-form-item>
+            <el-form-item label="订单发货通知(类目: 服装/鞋/箱包)">
+              <el-input type="text" style="width:30%" size="small" maxlength="200"
+                v-model="appMallSubscribeMsg.OrderDeliverGoodsTpl">
+              </el-input>
+              <el-button plain size="small">查看订阅消息示例</el-button>
+            </el-form-item>
+            <el-form-item label="退款通知(类目: 服装/鞋/箱包)">
+              <el-input type="text" style="width:30%" size="small" maxlength="200"
+                v-model="appMallSubscribeMsg.RefundTpl">
+              </el-input>
+              <el-button plain size="small">查看订阅消息示例</el-button>
+            </el-form-item>
+            <el-form-item label="活动状态通知(类目: 服装/鞋/箱包)">
+              <el-input type="text" style="width:30%" size="small" maxlength="200"
+                v-model="appMallSubscribeMsg.ActiveStateTpl">
+              </el-input>
+              <el-button plain size="small">查看订阅消息示例</el-button>
+            </el-form-item>
+            <el-form-item label="审核结果通知(类目: 服装/鞋/箱包)">
+              <el-input type="text" style="width:30%" size="small" maxlength="200"
+                v-model="appMallSubscribeMsg.AuditResultTpl">
+              </el-input>
+              <el-button plain size="small">查看订阅消息示例</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <el-button size="small" type="primary" @click="UpdateMallSubscribeMsg()">保 存</el-button>
+
+    </template>
+    <template v-else>
+      <div class="mimitBody">
+        <div class="el-col el-col-24">
+          <div class="weixin_warmTips">温馨提示：获取前请先确认您已获得订阅消息的使用权限，并且订阅消息中没有任何数据。获取后请不要到小程序后台 删除相应的订阅消息，否则会影响订阅消息正常使用。
+          </div>
+          <el-form :model="appMallSubscribeMsg" ref="appMallSubscribeMsg" label-width="300px">
+            <el-form-item label="提现成功通知(类目: 服装/鞋/箱包)">
+              <el-input type="text" style="width:30%" size="small" maxlength="200"
+                v-model="appMallSubscribeMsg.ReflectSuccessTpl">
+              </el-input>
+              <el-button plain size="small">查看订阅消息示例</el-button>
+            </el-form-item>
+            <el-form-item label="提现失败通知(类目: 服装/鞋/箱包)">
+              <el-input type="text" style="width:30%" size="small" maxlength="200"
+                v-model="appMallSubscribeMsg.ReflectFailTpl">
+              </el-input>
+              <el-button plain size="small">查看订阅消息示例</el-button>
+            </el-form-item>
+            <el-form-item label="会员等级变更通知(类目: 服装/鞋/箱包)">
+              <el-input type="text" style="width:30%" size="small" maxlength="200"
+                v-model="appMallSubscribeMsg.MembersLevelChangeTpl">
+              </el-input>
+              <el-button plain size="small">查看订阅消息示例</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <el-button size="small" type="primary" @click="UpdateMallDistributionMsg()">保 存</el-button>
+    </template>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        //商城订阅消息
+        appMallSubscribeMsg: {
+          MallBaseId: 0, //小程序Id
+          OrderSuccessTpl: "", //下单成功提醒(类目:服装/鞋/箱包)
+          OrderCancelTpl: "", //订单取消提醒(类目:服装/鞋/箱包)
+          OrderDeliverGoodsTpl: "", //订单发货提醒(类目:服装/鞋/箱包)
+          RefundTpl: "", //退款提醒(类目:服装/鞋/箱包)
+          ActiveStateTpl: "", //活动状态提醒(类目:服装/鞋/箱包)
+          AuditResultTpl: "", //审核结果提醒(类目:服装/鞋/箱包)
+          //分销订阅消息
+          ReflectSuccessTpl: "", //提现成功通知(类目: 服装/鞋/箱包 )
+          ReflectFailTpl: "", //提现失败通知(类目: 服装/鞋/箱包 )
+          MembersLevelChangeTpl: "", //会员等级变更通知(类目: 服装/鞋/箱包 )
+        },
+
+
+        activeName: '1',
+        checkIndex: 1,
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      //版权信息
+      GetWeiXinAppConfig() {
+        this.appMallSubscribeMsg.MallBaseId = this.getLocalStorage().MallBaseId;
+        this.apipost("/api/AliPayConfig/GetALiAppConfig", {
+          MallBaseId: this.getLocalStorage().MallBaseId,
+        }, res => {
+          if (res.data.resultCode == 1) {
+            //商城订阅消息
+            this.appMallSubscribeMsg.OrderSuccessTpl = res.data.data.OrderSuccessTpl;
+            this.appMallSubscribeMsg.OrderCancelTpl = res.data.data.OrderCancelTpl;
+            this.appMallSubscribeMsg.OrderDeliverGoodsTpl = res.data.data.OrderDeliverGoodsTpl;
+            this.appMallSubscribeMsg.RefundTpl = res.data.data.RefundTpl;
+            this.appMallSubscribeMsg.ActiveStateTpl = res.data.data.ActiveStateTpl;
+            this.appMallSubscribeMsg.AuditResultTpl = res.data.data.AuditResultTpl;
+            //分销订阅消息
+            this.appMallSubscribeMsg.ReflectSuccessTpl = res.data.data.ReflectSuccessTpl;
+            this.appMallSubscribeMsg.ReflectFailTpl = res.data.data.ReflectFailTpl;
+            this.appMallSubscribeMsg.MembersLevelChangeTpl = res.data.data.MembersLevelChangeTpl;
+
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+      //修改商城订阅消息
+      UpdateMallSubscribeMsg() {
+        this.apipost("/api/AliPayConfig/SetMiniProgramMallDistribution", this.appMallSubscribeMsg, res => {
+          if (res.data.resultCode == 1) {
+            this.GetWeiXinAppConfig();
+            this.Success("操作成功!");
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+      //修改分销订阅配置信息
+      UpdateMallDistributionMsg() {
+        this.apipost("/api/AliPayConfig/SetMiniProgramMallDistribution", this.appMallSubscribeMsg, res => {
+          if (res.data.resultCode == 1) {
+            this.GetWeiXinAppConfig();
+            this.Success("操作成功!");
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+      getMiniAdd() {
+        this.apipost("/api/Tenant/GetMiniAddTemplent", {}, res => {
+          if (res.data.resultCode == 1) {
+            this.Success(res.data.message)
+            this.GetWeiXinAppConfig()
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+      //切换
+      handleClick(tab) {
+        this.checkIndex = tab.name;
+      }
+    },
+    mounted() {
+      this.GetWeiXinAppConfig();
+    }
+  };
+
+</script>

src/router/index.js

@@ -116,6 +116,25 @@ export default new Router({
         }
       ]
     },
+    {
+      path: '/FALiPaySetting', //支付宝小程序设置
+      name: 'FALiPaySetting',
+      component: resolve => require(['@/components/FALiPaySetting'], resolve),
+      children: [
+        //店铺管理 支付宝基础设置
+        {
+          path: '/ALiPayAppConfig',
+          name: 'ALiPayAppConfig',
+          component: resolve => require(['@/components/StoreDesign/ALiPayAppConfig'], resolve),
+        }, //店铺管理 支付宝基础设置
+        {
+          path: '/ALiPayAppMsg',
+          name: 'ALiPayAppMsg',
+          component: resolve => require(['@/components/StoreDesign/ALiPayAppMsg'], resolve),
+        },
+        
+      ]
+    },
     {
       path: '/Ftemplate', //DIY装修
       name: 'Ftemplate',