|
|
@@ -1,340 +0,0 @@
|
|
|
-<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>
|
|
|
- <a href="/RechargeAgreement" target="_blank" style="color: #04498d;">《充值协议》</a>
|
|
|
- </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>
|
|
|
-
|
