|
|
<template>
|
|
|
<!-- 20221101 -->
|
|
|
<view class="money-recharge-page">
|
|
|
<!-- 页面内容 -->
|
|
|
<view class="page-content padding-bottom-20">
|
|
|
<!-- 充值金额，直接充值 -->
|
|
|
<view class="padding-lr-40 padding-bottom-10 bg-ff">
|
|
|
<view class="line-height-100 text-32 text-33">充值金额</view>
|
|
|
<view class="padding-bottom-10 height-60 flex align-center">
|
|
|
<view class="text-60">¥</view>
|
|
|
<input class="flex-one margin-left-15 height-60 text-50" type="number" v-model="money"
|
|
|
placeholder="请输入金额" placeholder-class="text-50 text-cc" @tap="choose('')">
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 充值卡列表 -->
|
|
|
<view class="margin-top-15 padding-lr-40 padding-top-30 padding-bottom-20 border-bottom-ed bg-ff" v-if="list.length">
|
|
|
<view class="flex flex-wrap">
|
|
|
<view v-for="(item,index) in list" :key="index"
|
|
|
class="card-item margin-bottom-20 margin-right-20 padding-25 radius-10"
|
|
|
:class="cardIndex === index ? 'active' : ''" v-show="index <= 5 || isCardOpen"
|
|
|
@tap="choose(index)">
|
|
|
<view class="text-40 text-bold">¥{{item.price}}</view>
|
|
|
<view class="margin-top-10 text-26 text-80">赠送¥{{item.give_money}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="flex align-center justify-end" v-if="list.length > 6">
|
|
|
<view class="flex align-center" @tap="isCardOpen = !isCardOpen">
|
|
|
<view class="text-26 text-80">{{isCardOpen ? '收起' : '展开'}}</view>
|
|
|
<text class="tyIcon-xiala1 text-18 text-b3"
|
|
|
:style="isCardOpen ? 'transform: rotate(180deg);' : ''"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 充值按钮 -->
|
|
|
<view class="margin-40 line-height-90 bg-main-gradient text-center text-32 text-ff radius-45"
|
|
|
@tap="confirm">
|
|
|
充值
|
|
|
</view>
|
|
|
|
|
|
<!-- 充值说明 -->
|
|
|
<view class="notice_block margin-lr-40 padding-30 radius-10 text-28 text-4d">
|
|
|
<text>{{rechargeNotice}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 页面浮层 -->
|
|
|
<view class="page-layer">
|
|
|
<!-- 订单支付方式 -->
|
|
|
<ty-layer-pay :show.sync="isPayLayerShow" :pay-money="payMoney" :pay-way="payWay" @pay="pay">
|
|
|
</ty-layer-pay>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import money from "./api/money.js"
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// 余额充值说明
|
|
|
rechargeNotice: '',
|
|
|
// 充值卡列表
|
|
|
list: {},
|
|
|
// 充值卡是否展开 true--展开 false--未展开
|
|
|
isCardOpen: false,
|
|
|
// 选中充值卡index ''为输入充值金额未选充值卡
|
|
|
cardIndex: '',
|
|
|
// 是否显示支付浮层 false--不显示 true--显示
|
|
|
isPayLayerShow: false,
|
|
|
// 输入充值金额
|
|
|
money: '',
|
|
|
// 购买方式 1--直接充值 2--购买充值卡
|
|
|
buyType: 1,
|
|
|
// 支付金额
|
|
|
payMoney: 0.00,
|
|
|
// 支付方式
|
|
|
payWay: ['weixin', 'alipay'],
|
|
|
}
|
|
|
},
|
|
|
|
|
|
onShow() {
|
|
|
// #ifdef H5
|
|
|
// 是否为跳转H5支付返回
|
|
|
if (this.cn.userAgent() == 'h5') { //H5环境
|
|
|
// H5微信支付时，已跳转H5微信支付页面
|
|
|
if (uni.getStorageSync('hasOpenMwebUrl')) {
|
|
|
uni.removeStorageSync('hasOpenMwebUrl')
|
|
|
// 弹窗提示
|
|
|
this.cn.confirm('请确认支付是否已完成', "已取消支付", "已完成支付").then(res => {
|
|
|
uni.redirectTo({
|
|
|
url: '/pages/money/list'
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
// #endif
|
|
|
},
|
|
|
|
|
|
onReady() {
|
|
|
// #ifdef H5
|
|
|
if (this.cn.userAgent() == 'weixin') {
|
|
|
// 兼容微信公众号支付路径，避免报错“当前URL未注册”
|
|
|
let url = window.location.href
|
|
|
if (!url.match(/\?#/)) {
|
|
|
location.replace(window.location.href.split('#')[0] + '?' + window.location.hash)
|
|
|
}
|
|
|
}
|
|
|
// #endif
|
|
|
|
|
|
// 加载充值配置
|
|
|
this.loadData()
|
|
|
|
|
|
// 加载充值卡列表
|
|
|
this.loadCardList()
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
/**
|
|
|
* 加载充值配置
|
|
|
* @date 2022-11-01
|
|
|
*/
|
|
|
loadData() {
|
|
|
money.getRechargeConfig().then(res => {
|
|
|
this.rechargeNotice = res.data.config.recharge_notice
|
|
|
})
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 加载充值卡列表
|
|
|
* @date 2022-11-01
|
|
|
*/
|
|
|
loadCardList() {
|
|
|
money.listCard().then(res => {
|
|
|
this.list = res.data.list
|
|
|
})
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 切换充值卡和输入框
|
|
|
* @param {Object} index 0及以上数字为充值卡INDEX 空为输入充值金额未选充值卡
|
|
|
* @date 2022-11-01
|
|
|
*/
|
|
|
choose(index) {
|
|
|
// 充值卡INDEX
|
|
|
this.cardIndex = index
|
|
|
if (index !== '') {
|
|
|
// 清空充值金额
|
|
|
this.money = ''
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 点击充值按钮
|
|
|
* @date 2022-11-01
|
|
|
*/
|
|
|
confirm() {
|
|
|
console.log(this.cardIndex)
|
|
|
if (this.cardIndex === ''){
|
|
|
// 正则校验 最多为2位小数
|
|
|
let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
|
|
|
if (!reg.test(this.money) || this.money <= 0) {
|
|
|
this.cn.toast('请输入正确的充值金额')
|
|
|
return false
|
|
|
}
|
|
|
// 需支付金额
|
|
|
this.payMoney = this.money
|
|
|
// 购买方式为1--直接充值
|
|
|
this.buyType = 1
|
|
|
} else {
|
|
|
// 需支付金额
|
|
|
this.payMoney = this.list[this.cardIndex].price
|
|
|
// 购买方式为2--购买充值卡
|
|
|
this.buyType = 2
|
|
|
}
|
|
|
// 显示浮层
|
|
|
this.isPayLayerShow = true
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 提交订单并支付
|
|
|
* @param {Object} e
|
|
|
* @date 2022-11-01
|
|
|
*/
|
|
|
pay(e) {
|
|
|
// 充值卡ID
|
|
|
let cardId = this.cardIndex === '' ? '' : this.list[this.cardIndex].id
|
|
|
|
|
|
// 提交订单并支付
|
|
|
money.insertOrder(this.buyType, this.money, cardId, e.pay_type).then(res => {
|
|
|
if (res.code == 0) {
|
|
|
// H5调起支付宝支付
|
|
|
if (this.cn.userAgent() == 'h5' && e.pay_type == 2) {
|
|
|
this.rawHtml = res.data.pay_params
|
|
|
// H5调起微信支付
|
|
|
} else if (this.cn.userAgent() == 'h5' && e.pay_type == 1) {
|
|
|
// 关闭支付浮层
|
|
|
this.isPayLayerShow = false
|
|
|
// 记录已跳转状态
|
|
|
uni.setStorageSync('hasOpenMwebUrl', 1)
|
|
|
// 跳转H5支付
|
|
|
window.location.href = res.data.pay_params
|
|
|
// 其他情况
|
|
|
} else {
|
|
|
// 1--微信支付 2--支付宝支付
|
|
|
let payType = e.pay_type
|
|
|
// 调起支付
|
|
|
this.cn.requestPayment(res.data.pay_params, payType).then(res => {
|
|
|
uni.navigateBack({
|
|
|
delta: 1
|
|
|
})
|
|
|
}).catch(res => {
|
|
|
uni.navigateBack({
|
|
|
delta: 1
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
/* 充值卡 */
|
|
|
.card-item {
|
|
|
width: 325rpx;
|
|
|
height: 140rpx;
|
|
|
border: 2rpx solid #e6e6e6;
|
|
|
background: #fff;
|
|
|
}
|
|
|
|
|
|
.card-item:nth-child(2n) {
|
|
|
margin-right: 0 !important;
|
|
|
}
|
|
|
|
|
|
.card-item.active {
|
|
|
border: 2rpx solid var(--main);
|
|
|
background: var(--mainLight);
|
|
|
}
|
|
|
|
|
|
/* 提示 */
|
|
|
.notice_block {
|
|
|
border: 1rpx solid #FBEFC7;
|
|
|
background: #FFFCF2;
|
|
|
}
|
|
|
</style>
|
