161 lines
3.4 KiB
Vue
161 lines
3.4 KiB
Vue
<template>
|
||
<view class="container" v-if="!isLoading">
|
||
<view class="space-upper">
|
||
<view class="wallet-account">
|
||
<view class="wallet-account_balance">
|
||
<text>￥{{ userInfo.balance }}</text>
|
||
</view>
|
||
<view class="wallet-account_lable">
|
||
<text>余额（元）</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="space-lower">
|
||
<view class="space-lower_item btn-recharge">
|
||
<view class="btn-submit" @click="onTargetRecharge()">充值</view>
|
||
</view>
|
||
<view class="space-lower_item item-lable dis-flex flex-x-around">
|
||
<view class="lable-text" @click="onTargetRechargeOrder()">
|
||
<text>充值记录</text>
|
||
</view>
|
||
<view class="lable-text" @click="onTargetBalanceLog()">
|
||
<text>账单详情</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as UserApi from '@/api/user'
|
||
import * as BalanceApi from '@/api/balance'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 正在加载
|
||
isLoading: true,
|
||
// 会员信息
|
||
userInfo: {},
|
||
// 充值设置
|
||
setting: {},
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad(options) {
|
||
// 获取页面数据
|
||
this.getPageData()
|
||
},
|
||
|
||
methods: {
|
||
|
||
// 获取页面数据
|
||
getPageData() {
|
||
const app = this
|
||
app.isLoading = true
|
||
Promise.all([app.getUserInfo(), app.getSetting()])
|
||
.then(() => app.isLoading = false)
|
||
},
|
||
|
||
// 获取会员信息
|
||
getUserInfo() {
|
||
const app = this
|
||
return new Promise((resolve, reject) => {
|
||
UserApi.info()
|
||
.then(result => {
|
||
app.userInfo = result.data.userInfo
|
||
resolve(app.userInfo)
|
||
})
|
||
})
|
||
},
|
||
|
||
// 获取充值设置
|
||
getSetting() {
|
||
const app = this
|
||
return new Promise((resolve, reject) => {
|
||
BalanceApi.setting()
|
||
.then(result => {
|
||
app.setting = result.data.data
|
||
resolve(app.setting)
|
||
})
|
||
})
|
||
},
|
||
|
||
// 跳转充值页面
|
||
onTargetRecharge() {
|
||
this.$navTo('pages/wallet/recharge/index')
|
||
},
|
||
|
||
// 跳转充值记录页面
|
||
onTargetRechargeOrder() {
|
||
this.$navTo('pages/wallet/recharge/order')
|
||
},
|
||
|
||
// 跳转账单详情页面
|
||
onTargetBalanceLog() {
|
||
this.$navTo('pages/wallet/balance/log')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
page {
|
||
background: #fff;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
background: #fff;
|
||
}
|
||
|
||
.space-upper {
|
||
padding: 100rpx 0;
|
||
text-align: center;
|
||
background: #00acac;
|
||
margin: 50rpx 30rpx 10rpx 30rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.wallet-account {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.wallet-account_balance {
|
||
font-size: 52rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.wallet-account_lable {
|
||
margin-top: 10rpx;
|
||
color: #FFFFFF;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.space-lower {
|
||
margin-top: 30rpx;
|
||
padding: 0rpx 30rpx 0rpx 30rpx;
|
||
}
|
||
|
||
.btn-recharge .btn-submit {
|
||
width: 100%;
|
||
height: 84rpx;
|
||
line-height: 84rpx;
|
||
margin: 100rpx auto;
|
||
text-align: center;
|
||
border-radius: 5rpx;
|
||
background: linear-gradient(to right, #f9211c, #ff6335);
|
||
color: white;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.item-lable {
|
||
margin-top: 80rpx;
|
||
font-size: 26rpx;
|
||
color: rgb(94, 94, 94);
|
||
padding: 0 100rpx;
|
||
}
|
||
</style>
|