pointsMall/src/views/Ipay.vue

<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': checked  ? false : true }" id="expCode" ref="expCodeRef"></div>
                  <div v-if="!checked" class="grayText">请先阅读并同意相关协议再扫码支付</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">
                    <el-checkbox v-model="checked" style="margin-right: 5px;font-size: 16px;"></el-checkbox>
                    <div>
                      请阅读并同意
                    </div>
                    <span style="color: #04498d;cursor: pointer;" @click="getHtmldata()">《充值协议》</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="用户充值协议"
      :visible.sync="dialogVisible"
      width="50%">
      <div v-html="htmlData"></div>
      <span slot="footer" class="dialog-footer" style="display: flex;justify-content: center">
        <el-button style="width:50%;font-size: 24px;" type="danger" @click="dialogVisible = false">我已知晓</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2';
import { dictList } from "@/api/allApi";
import { payList, getWxPayCode,queryWxPayStatus } from "@/api/pay";
export default {
  data() {
    return {
      checked:false,
      htmlData:'',
      dialogVisible: false,
      timerPayWxQRcode: null,
      timer: null,
      fullscreenLoading: false,
      money: undefined,
      integralMoney: undefined,
      visible: false,
      selected: 0,
      orderNo: undefined,
      rate:undefined,
      payList: [],
      payUrl:'https://dgtmall.dgtis.com/mall'
    };
  },
  created() {
    this.getPayList();
    // this.$nextTick (function () {
    //   this.handlePayWxQRcode()
    //   this.qrcode(this.payUrl);
    // })
  },
  methods: {
    getHtmldata(){
      dictList({dictType:'recharge_agreement'}).then(response => {
          this.htmlData = response.data.data[0].remark; 
          this.dialogVisible = true;
      })
    },
    // 清空二维码,避免生成多个二维码
    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(() => {    // 刷新微信支付二维码
          console.log('刷新微信支付二维码');
          clearInterval(this.timer);    // 清除定时器;   
          clearInterval(this.timerPayWxQRcode);
          this.handlePayWxQRcode();
        }, 60000);
      }).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;
        this.integralMoney = response.data.data.items[0].integralMoney;
        this.handlePayWxQRcode();
      })
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
    clearInterval(this.timerPayWxQRcode);
  }

}
</script>
<style scoped>
::v-deep .el-dialog {
  left: 50%;
  top: 5%;
  transform: translate(-50%, -5%);
  margin: 0px !important;
  border-radius: 8px;
}
::v-deep .el-dialog__title,::v-deep .el-dialog__headerbtn{
  font-size: 24px;
}
::v-deep .el-dialog__header {
    -webkit-box-shadow: 0 1px 4px 0 rgba(31, 45, 61, .12);
    box-shadow: 0 1px 4px 0 rgba(31, 45, 61, .12);
}
::v-deep .el-dialog__body{
    overflow: auto;
    overflow-x: hidden;
    max-height: 70vh!important;
}
::v-deep .el-dialog__footer {
    border-top: 1px solid #d7d9dc;
}
.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-left .grayText{
  width: 100px;
  position: absolute;
  left: 50%;    
	top:50%;      
	transform:translate(-50%,-50%);
  color: #fff;
  text-align: center;
}
.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>