You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
563 lines
12 KiB
563 lines
12 KiB
<template>
|
|
<view class="pages">
|
|
<!-- 头部标题 -->
|
|
<view class="title">
|
|
<text class="title_text">充值</text>
|
|
<view class="icon" @click="toDetale">
|
|
<text>充值明细</text>
|
|
<u-icon name="arrow-right"></u-icon>
|
|
</view>
|
|
</view>
|
|
<!-- 选择区域 -->
|
|
<view class="card">
|
|
<view v-for="(item,index) in list" :key="index" class="item_box">
|
|
<view :class="index == status? 'item select_item ': 'item' " @click="selectItem(index)"
|
|
v-if="item.role == -1">
|
|
<u-icon v-show="index == status" size='20' name="checkmark-circle-fill"></u-icon>
|
|
|
|
<view class="position_text">
|
|
<image class="image_img" :src="IMG_URL +'special_bg.png'" mode=""></image>
|
|
<text v-if="item.wallet !== null"
|
|
class=" text-center m-t-10 position_t">{{item.title? item.title:"今日充值特惠"}}</text>
|
|
</view>
|
|
<!-- <text v-if="item.wallet !== null" class="font-36 text-center m-t-10 position_text" >{{item.title? item.title:"今日充值特惠"}}</text> -->
|
|
|
|
<view class=" up m-t-30">
|
|
<text class="text_up">充</text>
|
|
<text class="num">{{item.wallet}}</text>
|
|
<text class="text_give">得</text>
|
|
<text class="num">{{item.getMoney+ item.getInteger}}</text>
|
|
</view>
|
|
<!-- <view class="give">
|
|
<text class="text_give">得</text>
|
|
<text class="num">{{item.getMoney+ item.getInteger}}</text>
|
|
</view> -->
|
|
<text class="alt">{{'（'+item.getMoney+'消费金+'+item.getInteger +'兑购金）'}}</text>
|
|
<view class="time" v-if="item.endTime !== null && item.type == 1">
|
|
<text>活动结束时间：</text>
|
|
<text>{{item.endTime}}</text>
|
|
</view>
|
|
</view>
|
|
<view :class="index == status? 'item select_item ': 'item' " @click="selectItem(index)"
|
|
v-if="userInfo.level == item.role">
|
|
<u-icon v-show="index == status" size='20' name="checkmark-circle-fill"></u-icon>
|
|
<text v-if="item.endTime !== null"
|
|
class="font-36 text-center m-t-10 position_text">{{item.title? item.title:"今日充值特惠"}}</text>
|
|
<view class="up m-t-30">
|
|
<text class="text_up">充</text>
|
|
<text class="num">{{item.wallet}}</text>
|
|
<text class="text_give"> 得 </text>
|
|
<text class="num">{{item.getMoney+ item.getInteger}}</text>
|
|
</view>
|
|
<!-- <view class="give">
|
|
<text class="text_give">得</text>
|
|
<text class="num">{{item.getMoney+ item.getInteger}}</text>
|
|
</view> -->
|
|
<text class="alt">{{'（'+item.getMoney+'消费金+'+item.getInteger +'兑购金）'}}</text>
|
|
<view class="time" v-if="item.endTime !== null && item.type == 1">
|
|
<text>活动结束时间：</text>
|
|
<text>{{item.endTime}}</text>
|
|
</view>
|
|
<text
|
|
class="alt text-red">多得实惠{{ (item.getMoney+ item.getInteger - item.wallet).toFixed(2)}}元</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 充值说明 -->
|
|
<view class="explain">
|
|
<text class="explain_title">{{agreementInfo.title}}</text>
|
|
<rich-text :nodes="agreementInfo.content"></rich-text>
|
|
<!-- <text >1、{{}}</text> -->
|
|
</view>
|
|
|
|
<!-- 充值福利 -->
|
|
<!-- <view class="welfare">
|
|
<view class="welfare_title">
|
|
<text>充</text>
|
|
<text>值</text>
|
|
<text>福</text>
|
|
<text>利</text>
|
|
</view>
|
|
<view :class="'item bg'+index" v-for="(item,index) in welfareList" :key="index">
|
|
<view class="title_box">
|
|
<u-icon name="play-right-fill"></u-icon>
|
|
<text class="item_title">{{item.title}}</text>
|
|
</view>
|
|
<text>{{item.textlist[0]}}</text>
|
|
<text>{{item.textlist[1]}}</text>
|
|
<text>{{item.textlist[2]}}</text>
|
|
</view>
|
|
</view>
|
|
-->
|
|
<!-- 按钮 -->
|
|
<view class="btn_box">
|
|
<button class="up_btn btn" @click="toPay">确认充值</button>
|
|
<button class="pass_btn btn" @click="toUpMenber">去升级会员，实惠更多</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import dataList from "./config.js"
|
|
import {
|
|
IMG_URL
|
|
} from '@/env.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
IMG_URL,
|
|
list: [],
|
|
welfareList: dataList.welfareList,
|
|
status: 0,
|
|
userInfo: {},
|
|
rechargeId: null,
|
|
agreementInfo: {}, // 充值说明
|
|
}
|
|
},
|
|
onLoad() {
|
|
uni.showLoading();
|
|
this.getUserInfo();
|
|
this.getRechargeList();
|
|
this.getRechargeInfo();
|
|
uni.hideLoading();
|
|
},
|
|
methods: {
|
|
getRechargeInfo() {
|
|
// 获取充值说明
|
|
this.$api('getAgreement', {
|
|
type: 2
|
|
}).then(res => {
|
|
let {
|
|
code,
|
|
result,
|
|
message
|
|
} = res;
|
|
if (code == 200) {
|
|
console.log(result);
|
|
this.agreementInfo = result;
|
|
} else {
|
|
this.$Toast(message)
|
|
}
|
|
}).catch(err => {
|
|
this,
|
|
$Toast(err.message);
|
|
})
|
|
},
|
|
getRechargeList() {
|
|
// 获取充值列表
|
|
this.$api('rechargeList', {
|
|
pageSize: 999
|
|
}).then(res => {
|
|
let {
|
|
code,
|
|
result,
|
|
message
|
|
} = res;
|
|
if (code == 200) {
|
|
console.log(result);
|
|
let newList = []
|
|
result.records.forEach((item, index) => {
|
|
if (item.type == 1) {
|
|
if (item.endTime !== null) {
|
|
newList.push(item)
|
|
}
|
|
result.records[index].endTime = item.endTime.substring(5);
|
|
}
|
|
})
|
|
console.log(result.records, newList)
|
|
this.list = [...new Set([...newList, ...result.records])]
|
|
|
|
this.rechargeId = this.list[0].id
|
|
} else {
|
|
this.$Toast(message)
|
|
}
|
|
}).catch(err => {
|
|
this.$Toast(err.message);
|
|
})
|
|
},
|
|
// 获取用户信息
|
|
getUserInfo() {
|
|
uni.showLoading();
|
|
this.$api('getUserInfo')
|
|
.then(res => {
|
|
let {
|
|
code,
|
|
result,
|
|
message
|
|
} = res
|
|
uni.hideLoading();
|
|
if (code === 200) {
|
|
this.userInfo = {
|
|
...result.userInfo,
|
|
...result.account
|
|
}
|
|
this.$storage.setStorage("__user_info", this.userInfo)
|
|
console.log(this.userInfo)
|
|
} else {
|
|
this.$Toast(message)
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$Toast(err.message)
|
|
uni.hideLoading();
|
|
})
|
|
},
|
|
toDetale() {
|
|
// 去充值明细
|
|
this.$tools.navigateTo({
|
|
url: "/pagesB/homeGridList/topUp/detale/detale"
|
|
})
|
|
|
|
},
|
|
// 选择的那个
|
|
selectItem(index) {
|
|
this.status = index;
|
|
this.rechargeId = this.list[index].id
|
|
},
|
|
// 去升级会员
|
|
toUpMenber() {
|
|
uni.navigateTo({
|
|
url: "/pagesC/member/upgrades_renewals/index"
|
|
})
|
|
},
|
|
toPay() {
|
|
const that = this;
|
|
// 创建支付订单
|
|
const params = {
|
|
id: this.rechargeId
|
|
}
|
|
console.log(this.rechargeId)
|
|
this.$api('rechargePay', params).then(res => {
|
|
const {
|
|
code,
|
|
result,
|
|
message
|
|
} = res
|
|
console.log(res)
|
|
if (code == 200) {
|
|
uni.requestPayment({
|
|
provider: 'wxpay',
|
|
timeStamp: result.timeStamp,
|
|
nonceStr: result.nonceStr,
|
|
package: result.packageValue,
|
|
signType: result.signType,
|
|
paySign: result.paySign,
|
|
success: res => {
|
|
that.$Toast('支付成功');
|
|
alert('支付成功')
|
|
// 刷新用户数据
|
|
that.getUserInfo();
|
|
},
|
|
fail: error => {
|
|
alert('取消支付')
|
|
that.$Toast('取消支付')
|
|
}
|
|
})
|
|
} else {
|
|
that.$Toast(message)
|
|
}
|
|
})
|
|
// .catch(err => {
|
|
// console.log(err.message)
|
|
// this.$Toast(err.message)
|
|
// })
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 54rpx;
|
|
margin-left: 36rpx;
|
|
margin-right: 40rpx;
|
|
|
|
.title_text {
|
|
font-size: 66rpx;
|
|
font-weight: bold;
|
|
color: #000;
|
|
}
|
|
|
|
.icon {
|
|
font-size: 38rpx;
|
|
color: #01AEEA;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0 auto;
|
|
margin-top: 7rpx;
|
|
width: 717rpx;
|
|
|
|
justify-content: space-between;
|
|
display: flex;
|
|
.item_box {
|
|
width: 47%;
|
|
margin: 0 10rpx;
|
|
position: relative;
|
|
|
|
.position_text {
|
|
right: 260rpx;
|
|
|
|
.image_img {
|
|
width: 206rpx;
|
|
height: 50rpx;
|
|
position: absolute;
|
|
}
|
|
|
|
position: absolute;
|
|
top: 15rpx;
|
|
padding: 0 10rpx;
|
|
|
|
.position_t {
|
|
position: absolute;
|
|
width: 206rpx;
|
|
color: #FF3030;
|
|
z-index: 22;
|
|
}
|
|
|
|
// background-color: #fff;
|
|
}
|
|
}
|
|
|
|
.item {
|
|
margin: 0 10rpx;
|
|
width: 100%;
|
|
min-height: 286rpx;
|
|
border-radius: 23rpx;
|
|
border: 1px solid #707070;
|
|
box-shadow: 0 3rpx 6rpx 0 rgba(0, 0, 0, 0.16);
|
|
color: #707070;
|
|
background-color: #F3F3F3;
|
|
margin-top: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
&:nth-child(3n-2) {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.up {
|
|
font-size: 36rpx;
|
|
|
|
.text_up {
|
|
font-size: 36rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.num {
|
|
// font-size: 42rpx;
|
|
}
|
|
}
|
|
|
|
.text_give {
|
|
padding: 0 6rpx;
|
|
}
|
|
|
|
|
|
.alt {
|
|
margin-top: 10rpx;
|
|
margin-bottom: 25rpx;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.time {
|
|
font-size: 30rpx;
|
|
color: #FF0000;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.select_item {
|
|
width: 100%;
|
|
color: #01AEEA;
|
|
border-color: #01AEEA;
|
|
position: relative;
|
|
|
|
.position_text {
|
|
position: absolute;
|
|
top: -28rpx;
|
|
right: 259rpx;
|
|
padding: 0 10rpx;
|
|
|
|
.image_img {
|
|
width: 206rpx;
|
|
height: 50rpx;
|
|
position: absolute;
|
|
}
|
|
|
|
.position_t {
|
|
position: absolute;
|
|
width: 206rpx;
|
|
color: #FF3030;
|
|
z-index: 22;
|
|
}
|
|
|
|
// background-color: #fff;
|
|
}
|
|
|
|
/deep/ .u-icon {
|
|
position: absolute;
|
|
background-color: #fff;
|
|
transform: translate(50%, 50%);
|
|
top: 44%;
|
|
right: 0;
|
|
.u-icon__icon {
|
|
color: #01AEEA;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
// 充值说明
|
|
.explain {
|
|
width: 674rpx;
|
|
margin-left: 60rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
text {
|
|
font-size: 26rpx;
|
|
color: #000;
|
|
margin-top: 14rpx;
|
|
}
|
|
|
|
.explain_title {
|
|
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-top: 40rpx;
|
|
}
|
|
}
|
|
|
|
// 充值福利
|
|
.welfare {
|
|
width: 654rpx;
|
|
margin: 94rpx auto 0;
|
|
border: 3px solid #F6CB86;
|
|
position: relative;
|
|
|
|
.welfare_title {
|
|
position: absolute;
|
|
top: -88rpx;
|
|
left: -20rpx;
|
|
transform: translate(50%, 50%);
|
|
display: flex;
|
|
|
|
text {
|
|
width: 83rpx;
|
|
height: 83rpx;
|
|
text-align: center;
|
|
line-height: 83rpx;
|
|
border-radius: 50%;
|
|
margin-right: 5rpx;
|
|
font-size: 43rpx;
|
|
font-weight: bold;
|
|
color: #A12527;
|
|
background-color: #F6CB86;
|
|
}
|
|
}
|
|
|
|
.bg0 {
|
|
background-color: #01AEEA;
|
|
margin-top: 74rpx !important;
|
|
}
|
|
|
|
.bg1 {
|
|
background-color: #59E5A3;
|
|
}
|
|
|
|
.bg2 {
|
|
background-color: #FAB875;
|
|
}
|
|
|
|
.bg3 {
|
|
background-color: #F33D3D;
|
|
}
|
|
|
|
.bg4 {
|
|
background-color: #000000;
|
|
margin-bottom: 35rpx !important;
|
|
}
|
|
|
|
.item {
|
|
width: 532rpx;
|
|
margin: 0 auto 15rpx;
|
|
display: flex;
|
|
color: #fff;
|
|
flex-direction: column;
|
|
border-radius: 10rpx;
|
|
padding-left: 20rpx;
|
|
box-sizing: border-box;
|
|
padding-bottom: 20rpx;
|
|
|
|
.title_box {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.item_title {
|
|
margin-left: 10rpx;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
text {
|
|
padding-top: 20rpx;
|
|
font-size: 21rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
height: 94rpx;
|
|
border-radius: 46rpx;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.up_btn {
|
|
margin-top: 50rpx;
|
|
width: 569rpx;
|
|
border: 3px solid #01AEEA;
|
|
background-color: #fff;
|
|
color: #01AEEA;
|
|
|
|
}
|
|
|
|
.pass_btn {
|
|
margin-top: 42rpx;
|
|
margin-bottom: 59rpx;
|
|
width: 637rpx;
|
|
background-color: #01AEEA;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn_box {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.pages {
|
|
padding-bottom: 370rpx;
|
|
}
|
|
</style>
|