积分获取菜单添加积分充值tab

src/utils/request.js

@@ -4,7 +4,7 @@ import { getToken } from '@/utils/auth'
 
 // let prodBaseURL = 'https://xiaoyou.dgtis.com/admin';//正式地址
 
-let prodBaseURL = 'https://malltest.dgtis.com/';//阿里云地址
+let prodBaseURL = 'https://malltest.dgtis.com/admin';//阿里云地址
 
 let devBaseURL = 'https://xiaoyou.dgtis.com/admin';//测试地址
 

src/views/AddFunds.vue

@@ -0,0 +1,340 @@
+<template>
+    <div class="container">
+      <div class="notification-view">
+        <div class="chat-view">
+          <div class="notification">
+            <div class="payBox" v-loading="fullscreenLoading">
+              <div class="payBox-title">
+                <div class="title">充值选择</div>
+              </div>
+              <div class="payBox-content">
+                <div class="payBox-content-list">
+                  <div class="item" :class="{ 'actived': selected == index ? true : false }"
+                    v-for="(item, index) in payList" :key="index" @click="changePay(item.integralMoney, index)">
+                    <div class="itemUp">
+                      <div style="font-size: 24px;">{{ item.integral }}</div>
+                      <div style="font-size: 12px;font-weight: 400;margin-left: 2px;">积分</div>
+                    </div>
+                    <div class="itemDown">
+                      需支付 {{ item.integralMoney }}元
+                    </div>
+                  </div>
+                  <el-popover placement="top" width="300" v-model="visible">
+                    <el-input size="small" placeholder="输入充值金额" v-model="money" oninput="value=value.match(/\d+\.?\d{0,1}/,'')" style="margin: 10px 0;"></el-input>
+                    <div style="float: left;" v-if="money">充值{{ money * 10 }}积分</div>
+                    <div style="text-align: right; margin: 0">
+                      <el-button size="small" @click="cancel()">取消</el-button>
+                      <el-button type="primary" size="small" @click="confirm()">确定</el-button>
+                    </div>
+                    <div class="item" :class="{ 'actived': selected == -1 ? true : false }" slot="reference"
+                      @click="selected = -1">
+                      <div class="itemUp" v-if="money">
+                        <div style="font-size: 24px; color: rgba(22, 24, 35, .75);">{{ money * 10 }}</div>
+                        <div style="font-size: 12px;font-weight: 400;margin-left: 2px; color: rgba(22, 24, 35, .75);">积分
+                        </div>
+                      </div>
+                      <div class="itemUp" v-else>
+                        <div style=" color: rgba(22, 24, 35, .75);">自定义金额</div>
+                      </div>
+                      <div class="itemDown">
+                        <div v-if="money">
+                          <span style="color: rgba(22, 24, 35, .75);">需支付 {{ money }}元</span> 修改
+                        </div>
+                        <div v-else style="color: rgba(22, 24, 35, .75);">最高100万元</div>
+                      </div>
+                    </div>
+                  </el-popover>
+  
+                </div>
+              </div>
+              <div class="payBox-title">
+                <div class="title">扫码支付</div>
+              </div>
+              <div class="payBox-way">
+                <div class="way-item">
+                  <div class="item-left">
+                    <div :class="{ 'gray': integralMoney  ? false : true }" id="expCode" ref="expCodeRef"></div>
+                    <div v-if="!integralMoney" style="position: absolute;top: 70px;left: 30px;color: #fff;">请先选择套餐</div>
+                  </div>
+                  <div class="item-right">
+                    <div class="up">
+                      <div>应付金额</div>
+                      <div style="color: #fe2c55;margin-left: 8px;">¥ {{ integralMoney ? integralMoney : '--' }}</div>
+                    </div>
+                    <div class="center">
+                      <img style="height: 18px;" src="../assets/icon/weixinPay.png" alt="weixinpay">
+                      <div class="textStyle">微信扫码支付</div>
+                    </div>
+                    <div class="down">
+                      <div>扫码支付代表已阅读并同意</div>
+                      <div style="color: #04498d;cursor: pointer;">《充值协议》</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  <script>
+  import QRCode from 'qrcodejs2';
+  import { payList, getWxPayCode,queryWxPayStatus } from "@/api/pay";
+  export default {
+    data() {
+      return {
+        timerPayWxQRcode: null,
+        timer: null,
+        fullscreenLoading: false,
+        money: undefined,
+        integralMoney: undefined,
+        visible: false,
+        selected: -2,
+        orderNo: undefined,
+        rate:undefined,
+        payList: [],
+        payUrl:'https://dgtmall.dgtis.com/mall'
+      };
+    },
+    created() {
+      this.getPayList();
+      this.$nextTick (function () {
+        this.qrcode(this.payUrl);
+      })
+    },
+    methods: {
+      // 清空二维码,避免生成多个二维码
+      delQrcode() {
+              this.$refs.expCodeRef.innerHTML = ""
+          },
+      qrcode(payUrl) {  // 前端根据 payUrl 生成微信支付二维码
+        this.delQrcode();
+        return new QRCode('expCode', {
+          width: 150,
+          height: 150,
+          text: payUrl,
+          colorDark: '#000',
+          colorLight: '#fff'
+        });
+      },
+      handlePayWxQRcode() {  // 获取微信支付二维码
+        getWxPayCode({    // 这里根据不同的后端接口去修改
+          integral: this.integralMoney*this.rate,
+          totalFee: this.integralMoney*1,
+        }).then(res => {
+          let data = res.data.data;
+          this.fullscreenLoading = false;
+          this.qrcode(data.payUrl);    // 例如：data.payUrl 的值为 "weixin://wxpay/bizpayurl?pr=......"，根据这个值生成相对应的微信支付二维码
+          this.timer = setInterval(() => {    // 通过定时器每间隔一会去请求查询微信支付状态（具体参数根据项目需要而定）
+            this.handleQueryWxPayStatus(data.orderNo);
+          }, 1000);
+          this.timerPayWxQRcode = setInterval(() => {    // 刷新微信支付二维码
+            this.handlePayWxQRcode();
+          }, 180000);
+        }).catch(err => {
+          this.fullscreenLoading = false;
+          console.log(err)
+        })
+      },
+      handleQueryWxPayStatus(orderNo) {  // 查询微信支付状态
+        queryWxPayStatus({    // 这里根据不同的后端接口去修改
+          orderNo: orderNo,
+        }).then(res => {
+          let data = res.data.data;
+          if (data != "订单未支付") {    // 当查询到支付成功时
+            this.$store.dispatch('GetUserInfo'); 
+            this.$message({
+              type: 'success',
+              message: '支付成功！'
+            });
+            clearInterval(this.timer);    // 清除定时器;   
+            clearInterval(this.timerPayWxQRcode);
+          }
+        }).catch(err => {
+          console.log(err)
+        })
+      },
+      cancel() {
+        this.visible = false;
+        this.money = '';
+      },
+      confirm() {
+        clearInterval(this.timer);
+        clearInterval(this.timerPayWxQRcode);
+        this.visible = false;
+        this.integralMoney = this.money;
+        this.fullscreenLoading = true;
+        this.handlePayWxQRcode()
+      },
+      changePay(integralMoney, index) {
+        clearInterval(this.timer);
+        clearInterval(this.timerPayWxQRcode);
+        this.money = '';
+        this.selected = index;
+        this.integralMoney = integralMoney;
+        this.fullscreenLoading = true;
+        this.handlePayWxQRcode()
+      },
+      getPayList() {
+        payList().then(response => {
+          this.rate = response.data.data.rate;
+          this.payList = response.data.data.items;
+        })
+      },
+    },
+    beforeDestroy() {
+      clearInterval(this.timer);
+      clearInterval(this.timerPayWxQRcode);
+    }
+  
+  }
+  </script>
+  <style scoped>
+  .gray {
+    filter: blur(4px);
+  }
+  
+  .container {
+    position: relative;
+    margin: 0 auto;
+    width: 100%;
+    max-width: 960px;
+  }
+  
+  .notification-view {
+    /* margin-top: 1.767rem; */
+  }
+  
+  .chat-view {
+    position: relative;
+    width: 960px;
+  }
+  
+  .chat-view .notification {
+    width: 100%;
+    margin-bottom: 1rem;
+    /* height: 800px; */
+    background-color: #fff;
+    border-radius: 16px;
+  }
+  
+  .payBox {
+    /* padding: 20px 48px 40px; */
+  }
+  
+  .payBox-title {
+    display: flex;
+    align-items: center;
+    /* margin-top: 20px; */
+  }
+  
+  .title {
+    font-weight: 500;
+    font-size: 24px;
+  }
+  
+  .payBox-content {
+    margin-top: 15px;
+    margin-bottom: 26px;
+  }
+  
+  .payBox-content-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  /* .payBox-content-list .item:nth-child(4n+1) {
+    margin-left: 0;
+  } */
+  
+  .payBox-content-list .item {
+    cursor: pointer;
+    width: 200px;
+    height: 120px;
+    margin: 6px;
+    border-radius: 6px;
+    border: .5px solid #e7e7ec;
+    position: relative;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #f7f7f9;
+    display: flex;
+  }
+  
+  .actived {
+    color: #fe2c55;
+    border: .5px solid rgba(254, 44, 85, .5) !important;
+    background: linear-gradient(0deg, rgba(254, 44, 85, .06), rgba(254, 44, 85, .06)), #fff;
+  }
+  
+  .itemUp {
+    display: flex;
+    font-size: 16px;
+    align-items: baseline;
+    font-weight: 500;
+  }
+  
+  .itemDown {
+    font-size: 12px;
+    /* color: rgba(22, 24, 35, .75); */
+  }
+  
+  .payBox-way {
+    margin-top: 16px;
+  }
+  
+  .way-item {
+    display: flex;
+    background-color: #f7f7f9;
+    border-radius: 6px;
+    padding: 12px;
+  
+  }
+  
+  .item-left {
+    position: relative;
+    width: 150px;
+    height: 150px;
+    background-color: #fff;
+    border-radius: 6px;
+    padding: 7px;
+  }
+  
+  .item-right {
+    margin-left: 12px;
+  }
+  
+  .up {
+    display: flex;
+    align-items: flex-end;
+    font-size: 18px;
+    font-weight: 600;
+    height: 60px;
+  }
+  
+  .center {
+    display: flex;
+    align-items: center;
+    margin-top: 6px;
+  }
+  
+  .textStyle {
+    font-size: 16px;
+    font-weight: 400;
+    margin-left: 4px;
+    color: rgba(22, 24, 35, .34);
+  }
+  
+  .down {
+    font-size: 16px;
+    color: rgba(22, 24, 35, .34);
+    margin-top: 16px;
+    display: flex;
+    -moz-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+  </style>
+  

src/views/HomeView/EarnPoints.vue

@@ -200,7 +200,9 @@
           <el-empty v-if="!integralRules" :image-size="200"></el-empty>
           <div v-else v-html="integralRules"></div>
         </el-tab-pane>
-
+        <el-tab-pane label="积分充值" name="fifth">
+          <AddFunds></AddFunds>
+        </el-tab-pane>
       </el-tabs>
     </div>
     <el-dialog title="上传证书" :visible.sync="dialogVisible" width="40%">
@@ -273,12 +275,12 @@
         </el-form-item>
         <el-form-item label="开始时间:" prop="startTime">
           <el-date-picker :disabled="dialogStatus=='view'?true:false" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
-            :picker-options="setDisabled" v-model="dataFormTrain.startTime" placeholder="请选择开始时间" style="width: 95%">
+            v-model="dataFormTrain.startTime" placeholder="请选择开始时间" style="width: 95%">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="结束时间:" prop="endTime">
           <el-date-picker :disabled="dialogStatus=='view'?true:false" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
-            :picker-options="setDisabled" v-model="dataFormTrain.endTime" placeholder="请选择结束时间" style="width: 95%">
+            v-model="dataFormTrain.endTime" placeholder="请选择结束时间" style="width: 95%">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="培训讲师:" prop="lecturer">
@@ -337,11 +339,16 @@
   </div>
 </template>
 <script scoped>
+import AddFunds from '@/views/AddFunds.vue'
 import { certificatePage, certificateUpload, notice, certificatType, dictList, allUserList, citeList, uploadCite, editCite, trainList, uploadTrain,editTrain,remarkHtml } from "@/api/allApi";
 import { handleTree } from '@/utils/index'
 export default {
+  components: {
+    AddFunds
+  },
   data() {
     return {
+      currentPage: 1,
       remarkHtml:'',
       citeLogsList:[],
       trainLogsList:[],