123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230 |
- <!-- 我的钱包页面 -->
- <template>
- <view class="container">
- <view class="content">
- <image class="bg" :src="imgUrl+'/balance_bg.png'" />
- <view class="detail flex_column_start_start">
- <text class="balance_title">{{$L('可用余额(元)')}}</text>
- <view class="balance_num flex_row_start_end">
- <text class="unit">¥</text>
- <text class="amount">{{$getPartNumber(balanceData.balanceAvailable,'int')}}</text>
- <text class="unit">{{$getPartNumber(balanceData.balanceAvailable,'decimal')}}</text>
- </view>
- <view class="total_amount flex_row_start_center">
- <image class="amount_icon" :src="imgUrl+'amount_icon.png'" />
- <text class="con tit">{{$L('账户总额 (元)')}}</text>
- <text class="con unit">¥</text>
- <text class="con amount">{{balanceData.rechargeSum}}</text>
- </view>
- </view>
- <view class="recharge_btn flex_row_center_center" @click="navTo('/pages/recharge/recharge?balance='+balanceData.rechargeSum + '&payMethodType=rechargeBalance')">
- <text class="con">{{$L('充值')}}</text>
- <text class="iconfont iconziyuan11"></text>
- </view>
- </view>
- <view class="detail_list flex_column_start_start">
- <view class="item flex_row_between_center b_b" @click="navTo('/pages/balance/list')">
- <view class="left flex_row_start_center">
- <image class="icon" :src="imgUrl+'balance_icon.png'" />
- <text class="tit">{{$L('余额明细')}}</text>
- </view>
- <text class="iconfont iconziyuan11"></text>
- </view>
- <view class="item flex_row_between_center" @click="navTo('/pages/recharge/list')">
- <view class="left flex_row_start_center">
- <image class="icon" :src="imgUrl+'recharge_icon.png'" />
- <text class="tit">{{$L('充值明细')}}</text>
- </view>
- <text class="iconfont iconziyuan11"></text>
- </view>
- </view>
- </view>
- </template>
- <script>
- import {
- mapState
- } from 'vuex';
- export default {
- data() {
- return {
- imgUrl: getApp().globalData.imgUrl,
- balanceData: {}, //余额
- }
- },
- onLoad() {
- this.getInfo()
- },
- computed: {
- ...mapState(['hasLogin', 'userInfo'])
- },
- methods: {
- //获取会员账户余额
- getInfo() {
- this.$request({
- url: 'v3/member/front/balanceRecharge/getMemberBalance',
- // data: {
- // key: this.userInfo.access_token
- // },
- method: 'GET'
- }).then(res => {
- if (res.state == 200) {
- this.balanceData = res.data;
- } else {
- this.$api.msg(res.msg);
- }
- }).catch((e) => {})
- },
- navTo(url) {
- uni.navigateTo({
- url
- })
- },
- }
- }
- </script>
- <style lang="scss">
- uni-page-body {
- display: flex;
- height: 100%;
- }
- page {
- background: $bg-color-split;
- width: 750rpx;
- margin: 0 auto;
- .container {
- margin-top: 20rpx;
- display: flex;
- flex-direction: column;
- flex: 1;
- background: #fff;
- .content {
- margin-top: 30rpx;
- width: 690rpx;
- height: 340rpx;
- margin-left: 30rpx;
- position: relative;
- .recharge_btn {
- position: absolute;
- z-index: 2;
- right: 0;
- top: 111rpx;
- width: 142rpx;
- height: 60rpx;
- background: linear-gradient(90deg, rgba(238, 238, 238, .5) 0%, rgba(238, 238, 238, 0) 100%);
- // opacity:0.5;
- border-radius: 30rpx;
- color: #fff;
- font-size: 30rpx;
- .iconfont {
- font-size: 16rpx;
- transform: scale(0.75);
- display: inline-block;
- margin-left: 5rpx;
- }
- }
- .bg {
- width: 100%;
- height: 100%;
- }
- .detail {
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- z-index: 2;
- padding: 45rpx 40rpx;
- color: #fff;
- .balance_title {
- font-size: 26rpx;
- }
- .balance_num {
- font-weight: bold;
- margin-top: 41rpx;
- color: #fff;
- .unit {
- font-size: 46rpx;
- font-weight: bold;
- }
- .amount {
- font-size: 66rpx;
- font-weight: bold;
- line-height: 66rpx;
- }
- }
- .total_amount {
- margin-top: 84rpx;
- .amount_icon {
- width: 27rpx;
- height: 23rpx;
- margin-right: 9rpx;
- }
- .con {
- color: rgba(255, 255, 255, .8);
- }
- .tit,
- .amount {
- font-size: 26rpx;
- }
- .unit {
- font-size: 22rpx;
- margin-left: 5rpx;
- }
- }
- }
- }
- .detail_list {
- padding: 0 30rpx;
- .item {
- width: 100%;
- height: 141rpx;
- position: relative;
- .left {
- .icon {
- width: 80rpx;
- height: 80rpx;
- margin-right: 20rpx;
- }
- .tit {
- color: $main-font-color;
- font-size: 30rpx;
- }
- }
- .iconfont {
- color: $main-third-color;
- font-size: 32rpx;
- transform: scale(0.75);
- display: inline-block;
- }
- }
- }
- }
- }
- </style>
|