473 lines
9.2 KiB
Vue
473 lines
9.2 KiB
Vue
<template>
|
|
<view>
|
|
<view class="body">
|
|
<uni-nav-bar fixed statusBar left-icon="left" right-icon="gear" background-color="transparent"
|
|
:style="{ '--right-padding': getMenuInfoList + 'px' }" :border="false" @clickLeft="back"
|
|
title="我的账户"></uni-nav-bar>
|
|
<view class="back"></view>
|
|
<view class="list">
|
|
<view class="list_money">{{ getBobbiesList.money }}</view>
|
|
<view class="list_title">我的金币</view>
|
|
<view class="list_content">
|
|
<view class="list_mdoule fa sb">
|
|
<view class="list_recharge">账户充值</view>
|
|
<view class="list_record fa" @click="totransactionRecord">交易记录<image
|
|
src="/static/images/more.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
<view class="list_detail">
|
|
<view class="list_item" :class="{ 'list_active': recharge_package_id == item.id }"
|
|
v-for="(item, index) in memberList" :key="item.id" @click="memberClick(item.id)">
|
|
<view class="list_gold fx">{{ item.jinbi }}<text>金币</text></view>
|
|
<view class="list_price fx">{{ item.money }}<text>元</text></view>
|
|
</view>
|
|
</view>
|
|
<view class="list_customize faj">
|
|
<image src="/static/images/mine_edit.png" mode="widthFix"></image>
|
|
<input class="" placeholder="自定义金额" placeholder-class="list_input" @input="inputMoney"
|
|
@focus="focusMoney" v-model="money" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="module">
|
|
<view class="module_title">支付方式</view>
|
|
<view class="module_content">
|
|
<view class="module_detail fa sb" @click="paymentSelect(0)">
|
|
<view class="module_item fa">
|
|
<image src="/static/images/weixin.png" mode="widthFix"></image>
|
|
微信支付
|
|
</view>
|
|
<view class="module_select faj">
|
|
<image v-if="paymentMethod === 0" src="/static/images/selectA.png" mode="widthFix"></image>
|
|
<image v-else src="/static/images/select.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="module_detail fa sb" @click="paymentSelect(1)">
|
|
<view class="module_item fa">
|
|
<image src="/static/images/zhifubao.png" mode="widthFix"></image>
|
|
支付宝支付
|
|
</view>
|
|
<view class="module_select faj">
|
|
<image v-if="paymentMethod === 1" src="/static/images/selectA.png" mode="widthFix"></image>
|
|
<image v-else src="/static/images/select.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
<view class="agreement faj">充值即代表阅读并同意<text>《充值协议》</text></view>
|
|
<view class="opt">
|
|
<view class="opt_module">
|
|
<view class="opt_data">
|
|
<view class="opt_btn faj" @click="submit">
|
|
充值
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
RechargePackageApi,
|
|
CreateJinbiOrderApi,
|
|
GetUserBasic,
|
|
JinbiPayApi
|
|
} from '@/utils/api.js'
|
|
import notHave from '@/components/not-have.vue';
|
|
import topSafety from '@/components/top-safety.vue';
|
|
import tabBar from '@/components/tab-bar.vue';
|
|
export default {
|
|
components: {
|
|
notHave,
|
|
topSafety,
|
|
tabBar,
|
|
},
|
|
data() {
|
|
return {
|
|
memberList: [],
|
|
paymentMethod: 0, // 0: 微信支付, 1: 支付宝支付
|
|
recharge_package_id: '',
|
|
money: '',
|
|
getBobbiesList: '',
|
|
getMenuInfoList: '',
|
|
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getRechargePackage()
|
|
this.getUserBasic()
|
|
// #ifdef MP-WEIXIN
|
|
this.getMenuInfo()
|
|
// #endif
|
|
},
|
|
methods: {
|
|
getUserBasic() {
|
|
GetUserBasic({}).then(res => {
|
|
if (res.code == 1) {
|
|
this.getBobbiesList = res.data
|
|
}
|
|
})
|
|
},
|
|
submit() {
|
|
if (this.money == '' && this.recharge_package_id == '') {
|
|
uni.showToast({
|
|
title: '请选择充值套餐或输入自定义金额',
|
|
icon: 'none',
|
|
position: 'top'
|
|
})
|
|
return
|
|
}
|
|
CreateJinbiOrderApi({
|
|
recharge_package_id: this.recharge_package_id,
|
|
money: this.money,
|
|
pay_type: 'miniWechat'
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
this.recharge_package_id = ''
|
|
this.money = ''
|
|
this.goPay(res.data.out_trade_no)
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
position: 'top'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
goPay(orderId) {
|
|
JinbiPayApi({
|
|
out_trade_no: orderId
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
uni.showToast({
|
|
title: '充值成功',
|
|
icon: 'none',
|
|
position: 'top'
|
|
})
|
|
setTimeout(() => {
|
|
this.getUserBasic()
|
|
}, 1000)
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
position: 'top'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
inputMoney(e) {
|
|
this.money = e.detail.value
|
|
},
|
|
focusMoney() {
|
|
this.recharge_package_id = ''
|
|
},
|
|
//充值套餐列表
|
|
getRechargePackage() {
|
|
RechargePackageApi({}).then(res => {
|
|
if (res.code == 1) {
|
|
this.memberList = res.data
|
|
}
|
|
})
|
|
},
|
|
memberClick(id) {
|
|
this.recharge_package_id = id
|
|
},
|
|
paymentSelect(index) {
|
|
this.paymentMethod = index;
|
|
},
|
|
totransactionRecord() {
|
|
uni.navigateTo({
|
|
url: '/pages/mine/transactionRecord'
|
|
})
|
|
},
|
|
back() {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
},
|
|
getMenuInfo() {
|
|
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
|
|
console.log('胶囊信息:', menuButtonInfo);
|
|
|
|
// 胶囊宽度
|
|
const capsuleWidth = menuButtonInfo.width;
|
|
|
|
// 胶囊距离右侧的距离 = 屏幕宽度 - 胶囊右边界的x坐标
|
|
const distanceFromRight = systemInfo.windowWidth - menuButtonInfo.right;
|
|
|
|
console.log('胶囊宽度:', capsuleWidth);
|
|
console.log('胶囊距离右侧的距离:', distanceFromRight);
|
|
|
|
this.getMenuInfoList = capsuleWidth + distanceFromRight;
|
|
|
|
return {
|
|
width: capsuleWidth,
|
|
distanceFromRight: distanceFromRight,
|
|
menuButtonInfo: menuButtonInfo
|
|
};
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background: #F7F7F7;
|
|
}
|
|
</style>
|
|
<style>
|
|
.body {
|
|
position: relative;
|
|
padding: 0 40rpx;
|
|
}
|
|
|
|
.back {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 596rpx;
|
|
background: linear-gradient(180deg, #FFE3E9 0%, #F7F7F7 100%);
|
|
}
|
|
|
|
.list {
|
|
position: relative;
|
|
margin: 48rpx 0 0 0;
|
|
}
|
|
|
|
.list_money {
|
|
font-weight: 700;
|
|
font-size: 72rpx;
|
|
color: #222222;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.list_title {
|
|
margin: 30rpx 0 0 0;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #9E9E9E;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.list_content {
|
|
position: relative;
|
|
margin: 38rpx 0 0 0;
|
|
}
|
|
|
|
.list_mdoule {
|
|
position: relative;
|
|
}
|
|
|
|
.list_recharge {
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #222222;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.list_record {
|
|
position: relative;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #9E9E9E;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.list_record image {
|
|
margin: 0 0 0 10rpx;
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
display: block;
|
|
}
|
|
|
|
.list_detail {
|
|
position: relative;
|
|
margin: 20rpx 0 0 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-column-gap: 50rpx;
|
|
grid-row-gap: 40rpx;
|
|
}
|
|
|
|
.list_item {
|
|
position: relative;
|
|
padding: 30rpx 62rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 12rpx;
|
|
border: 1px solid #ffffff;
|
|
}
|
|
|
|
.list_gold {
|
|
font-weight: 700;
|
|
font-size: 52rpx;
|
|
color: #8449FE;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.list_gold text {
|
|
font-size: 28rpx;
|
|
color: #9E9E9E;
|
|
line-height: 62rpx
|
|
}
|
|
|
|
.list_price {
|
|
margin: 10rpx 0 0 0;
|
|
font-weight: 700;
|
|
font-size: 52rpx;
|
|
color: #8449FE;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.list_price text {
|
|
font-size: 28rpx;
|
|
color: #9E9E9E;
|
|
line-height: 62rpx
|
|
}
|
|
|
|
.list_customize {
|
|
position: relative;
|
|
margin: 40rpx 0 0 0;
|
|
padding: 36rpx 0;
|
|
background: #FFFFFF;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.list_customize image {
|
|
margin: 0 14rpx 0 0;
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
}
|
|
|
|
.list_customize input {
|
|
width: 200rpx;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.list_input {
|
|
color: #9E9E9E;
|
|
}
|
|
|
|
.module {
|
|
position: relative;
|
|
margin: 40rpx 0 0 0;
|
|
}
|
|
|
|
.module_title {
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #222222;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.module_content {
|
|
position: relative;
|
|
margin: 20rpx 0 0 0;
|
|
}
|
|
|
|
.module_detail {
|
|
position: relative;
|
|
margin: 0 0 20rpx 0;
|
|
padding: 40rpx 20rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.module_item {
|
|
position: relative;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
line-height: 42rpx;
|
|
}
|
|
|
|
.module_item image {
|
|
margin: 0 20rpx 0 0;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
display: block;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.module_select {
|
|
position: relative;
|
|
}
|
|
|
|
.module_select image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
display: block;
|
|
}
|
|
|
|
.agreement {
|
|
position: relative;
|
|
margin: 40rpx 0 0 0;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #9E9E9E;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.agreement text {
|
|
color: #8449FE;
|
|
}
|
|
|
|
|
|
.opt {
|
|
|
|
height: 150rpx;
|
|
}
|
|
|
|
.opt_module {
|
|
|
|
padding: 5rpx 0 70rpx 0;
|
|
height: 85rpx;
|
|
width: 100%;
|
|
background: #F6F8FA;
|
|
bottom: 0;
|
|
left: 0;
|
|
box-sizing: content-box;
|
|
border-top: 1px solid #f0f0f0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.opt_data {
|
|
padding: 5rpx 50rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.opt_btn {
|
|
padding: 24rpx 0;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
line-height: 50rpx;
|
|
background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.list_active {
|
|
border: 1px solid #8449FE !important;
|
|
}
|
|
|
|
.uni-navbar__header-btns {
|
|
padding-right: var(--right-padding, 0);
|
|
}
|
|
|
|
.uni-navbar__header-btns-right.data-v-26544265 {
|
|
width: 60rpx !important;
|
|
}
|
|
</style> |