421 lines
9.5 KiB
Vue
421 lines
9.5 KiB
Vue
<template>
|
||
<view class="voucherCenter_content" :style="`padding-bottom:${contentSafeHeight}rpx`">
|
||
<view class="balance_info">
|
||
<view class="balance_info_box">
|
||
<view class="balance_info_name">您的余额</view>
|
||
<view class="balance_coin_box">
|
||
<view class="balance_num">{{ userInfo.egold }}</view>
|
||
<view class="balance_title">书币</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="voucher_center_info">
|
||
<view class="voucher_annual_pass_box">
|
||
<view class="_annual_pass_tips">
|
||
<view class="_pass_tips_name">年卡</view>
|
||
<view class="_pass_tips_msg">尊享无限时书城免费畅读</view>
|
||
</view>
|
||
<view class="_annual_pass_money">
|
||
<view class="_pass_money_unit">￥</view>
|
||
<view class="_pass_money_num">{{ annualPass.price }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="voucher_center_list">
|
||
<view class="_center_list_col_box" v-for="m in payList" :key="m.id" @tap="selectVoucherMoney($event, m)" :data-id="m.id">
|
||
<view :class="['_center_list_col_item', selectVoucherMoneyId === m.id ? 'active' : '']">
|
||
<view class="_col_item_money">
|
||
<view class="_item_money_num">{{ m.price }}</view>
|
||
<view class="_item_money_unit">元</view>
|
||
</view>
|
||
<view class="_col_item_coin">
|
||
<!-- {{m.egold}}书币+{{zb}}书币 -->
|
||
{{ m.title }}
|
||
</view>
|
||
<view class="_col_item_deliver">
|
||
{{ m.description }}
|
||
</view>
|
||
<view v-if="m.poster" class="_col_item_hot_sales">{{ m.poster }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="voucher_center_illustrate">
|
||
<view class="_center_illustrate_box">
|
||
<view class="_illustrate_box_title">充值说明</view>
|
||
<view class="_illustrate_box_tips_">
|
||
<view class="_illustrate_box_tips_item">1、1元=100书币，IP和书币属于虚拟商品,一旦购买不作退换,望周知。</view>
|
||
<view class="_illustrate_box_tips_item">
|
||
2、充值后书币到账可能有延迟，15分钟内未到账请联系微信客服，微信号:
|
||
<text style="color: #ff728f">yttfyyl,</text>
|
||
<text style="color: #ff728f">yt20216688</text>
|
||
， 工作时间:周一到周五9:00-17:00。
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="voucher_center_confirm" >
|
||
<view class="_center_confirm_money">
|
||
<view class="_center_confirm_money_box">
|
||
<view class="_confirm_money_unit">￥</view>
|
||
<view class="_confirm_money_num">{{ price }}</view>
|
||
<!-- <view class="_confirm_money_preferential">已优惠12元</view> -->
|
||
<view class="_confirm_money_preferential">{{ preferential }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="_center_confirm_btn">确认充值</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { isGetSystemInfo } from '@/utils/systemInfo.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
selectVoucherMoneyId: '',
|
||
footerSafeHeight: 0,
|
||
contentSafeHeight: 130,
|
||
payList: [],
|
||
annualPass: {},
|
||
userInfo: {},
|
||
price: 0,
|
||
preferential: ''
|
||
};
|
||
},
|
||
onShow() {
|
||
const { windowHeight = 0, screenHeight = 0, windowTop = 0 } = isGetSystemInfo();
|
||
const footerSafeHeight = screenHeight - windowHeight - windowTop;
|
||
if (footerSafeHeight) {
|
||
// this.footerSafeHeight = footerSafeHeight;
|
||
this.contentSafeHeight = footerSafeHeight + 130;
|
||
}
|
||
this.isGetPayList();
|
||
const data = {};
|
||
uni.$u.http
|
||
.post('/getUserInfo', data)
|
||
.then((res) => {
|
||
uni.hideLoading();
|
||
if (res.status == 1) {
|
||
const user = res.data.user;
|
||
this.userInfo = user;
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
uni.hideLoading();
|
||
console.log(err, '========');
|
||
});
|
||
},
|
||
methods: {
|
||
selectVoucherMoney(event, row) {
|
||
this.selectVoucherMoneyId = event.currentTarget.dataset.id;
|
||
this.price = row.price;
|
||
this.preferential = row.title;
|
||
},
|
||
isGetPayList() {
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
});
|
||
const data = {};
|
||
uni.$u.http
|
||
.post('/getPayList', data)
|
||
.then((res) => {
|
||
uni.hideLoading();
|
||
if (res.status == 1) {
|
||
this.annualPass = res.data.AnnualPass;
|
||
this.payList = res.data.list;
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
uni.hideLoading();
|
||
console.log(err, '========');
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.voucherCenter_content {
|
||
width: 100%;
|
||
// padding-bottom: 130rpx;
|
||
|
||
.balance_info {
|
||
position: relative;
|
||
z-index: 2;
|
||
width: 100%;
|
||
padding: 32rpx 32rpx 0;
|
||
box-sizing: border-box;
|
||
|
||
.balance_info_box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
height: 168rpx;
|
||
background: url('/static/images/myInfo/balance_bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 30rpx 40rpx;
|
||
box-sizing: border-box;
|
||
|
||
.balance_info_name {
|
||
font-size: 30rpx;
|
||
color: #ffffff;
|
||
line-height: 1;
|
||
}
|
||
|
||
.balance_coin_box {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
line-height: 1;
|
||
|
||
.balance_num {
|
||
font-size: 50rpx;
|
||
color: #ffffff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.balance_title {
|
||
font-size: 30rpx;
|
||
color: #ffffff;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.voucher_center_info {
|
||
width: 100%;
|
||
padding: 32rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
box-shadow: 0 -10rpx 10rpx 0 rgba(0, 0, 0, 0.2);
|
||
box-sizing: border-box;
|
||
|
||
.voucher_annual_pass_box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 132rpx;
|
||
padding: 24rpx 40rpx;
|
||
background: linear-gradient(to left, #fecca7, #ffe5d6);
|
||
border-radius: 16rpx;
|
||
box-sizing: border-box;
|
||
|
||
._annual_pass_tips {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
// justify-content: space-between;
|
||
._pass_tips_name {
|
||
font-size: 38rpx;
|
||
color: #5b0c0c;
|
||
line-height: 1;
|
||
font-weight: 700;
|
||
}
|
||
|
||
._pass_tips_msg {
|
||
font-size: 26rpx;
|
||
color: #5b0c0c;
|
||
line-height: 1;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
._annual_pass_money {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
|
||
._pass_money_unit {
|
||
font-size: 28rpx;
|
||
color: #5b0c0c;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
}
|
||
|
||
._pass_money_num {
|
||
font-size: 52rpx;
|
||
color: #5b0c0c;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.voucher_center_list {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
width: 100%;
|
||
|
||
._center_list_col_box {
|
||
width: 50%;
|
||
padding-top: 32rpx;
|
||
box-sizing: border-box;
|
||
|
||
._center_list_col_item {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 200rpx;
|
||
border: 1px solid #dddddd;
|
||
border-radius: 16rpx;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 24rpx 0;
|
||
|
||
._col_item_money {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
|
||
._item_money_num {
|
||
font-size: 48rpx;
|
||
color: #1a1a1a;
|
||
line-height: 1;
|
||
font-weight: 600;
|
||
}
|
||
|
||
._item_money_unit {
|
||
font-size: 26rpx;
|
||
color: #1a1a1a;
|
||
margin-left: 8rpx;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
|
||
._col_item_coin {
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
line-height: 1;
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
._col_item_deliver {
|
||
font-size: 26rpx;
|
||
color: #ff4876;
|
||
line-height: 1;
|
||
margin-top: 18rpx;
|
||
}
|
||
|
||
._col_item_hot_sales {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
// width: 104rpx;
|
||
padding: 0 16rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
transform: translateY(-50%);
|
||
background: linear-gradient(to left, #ff2d2d, #ff5c5c);
|
||
font-size: 26rpx;
|
||
color: #ffffff;
|
||
border-radius: 0 20rpx 0 20rpx;
|
||
}
|
||
}
|
||
|
||
._center_list_col_item.active {
|
||
background-color: #ffeaef;
|
||
border-color: #ff4876;
|
||
}
|
||
}
|
||
|
||
._center_list_col_box:nth-child(2n-1) {
|
||
// padding-left: 16rpx;
|
||
padding-right: 16rpx;
|
||
}
|
||
|
||
._center_list_col_box:nth-child(2n) {
|
||
padding-left: 16rpx;
|
||
}
|
||
}
|
||
|
||
.voucher_center_illustrate {
|
||
margin-top: 64rpx;
|
||
|
||
._center_illustrate_box {
|
||
._illustrate_box_title {
|
||
font-size: 32rpx;
|
||
color: #1a1a1a;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
._illustrate_box_tips_ {
|
||
width: 100%;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
background-color: #fff3f6;
|
||
border-radius: 24rpx;
|
||
|
||
._illustrate_box_tips_item {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
margin-bottom: 8rpx;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.voucher_center_confirm {
|
||
display: flex;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 130rpx;
|
||
box-shadow: 0 -6rpx 6rpx 0 rgba(207, 207, 207, 0.25);
|
||
background-color: #ffffff;
|
||
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS 设备 */
|
||
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iPhone X 及以上设备 */
|
||
|
||
._center_confirm_money {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 32rpx;
|
||
|
||
._center_confirm_money_box {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
|
||
._confirm_money_unit {
|
||
font-size: 26rpx;
|
||
color: #ff4876;
|
||
line-height: 1;
|
||
font-weight: 600;
|
||
}
|
||
|
||
._confirm_money_num {
|
||
font-size: 52rpx;
|
||
color: #ff4876;
|
||
line-height: 1;
|
||
font-weight: 600;
|
||
margin-left: 6rpx;
|
||
}
|
||
|
||
._confirm_money_preferential {
|
||
font-size: 26rpx;
|
||
color: #8a8a8a;
|
||
line-height: 1;
|
||
margin-left: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
._center_confirm_btn {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 320rpx;
|
||
height: 130rpx;
|
||
line-height: 130rpx;
|
||
font-size: 36rpx;
|
||
color: #ffffff;
|
||
background: linear-gradient(to left, #ff87b5, #ff4775);
|
||
}
|
||
}
|
||
}
|
||
</style>
|