hlm_pl_mall_h5/pages/member/account/Account.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  <member-base :show="false"><view class="div container">
    <view class="div common-header-wrap">
      <view :style="'height:'+navHeight+'px'"></view>
      <view class="common-header-holder"></view>
      <view class="common-header-fixed">
      <title-header />
      <uni-nav-bar title="我的钱包" class="common-header" left-icon="back" @clickLeft="goBack()">
      </uni-nav-bar>
    </view>
    </view>
    <view class="div account_header">
      <view class="div predeposit ">
        <text class="predeposit_title">可用余额：</text><text class='available_predeposit'>{{ available_predeposit }}</text>
      </view>
      <view class="div amount-wrapper">
        <view class="div amount_item">充值卡余额 {{available_rc_balance}}</view>
        <view class="div amount_item">冻结金额 {{freeze_predeposit}}</view>
      </view>
    </view>
    <view class="div card-wrapper">
    	<view class="div card_item" @click="goNavigate('/pages/member/voucher/VoucherList',{ index: 1 })">
    		<image mode="aspectFit" class="img" src="../../../static/image/member/icon_daijinquan_nor.png"></image>
    		<view class="explain">店铺代金券：{{voucher_count}}</view>
    	</view>
    	<view class="border"></view>
    	<view class="div card_item" @click="goNavigate('/pages/member/point/PointList')">
    		<image mode="aspectFit" class="img" src="../../../static/image/member/icon_jifen_nor.png"></image>
    		<view class="explain">积分：{{points}}</view>
    	</view>
    </view>
	<view class="div predeposit_handle mt-5">
	  <view class="div item" @click="goNavigate('/pages/member/recharge/RechargeList')"><image mode="aspectFit" class="img" src="../../../static/image/member/icon_chongzhi_pre.png" /><text>充值</text></view>
	  <view class="div item" @click="goNavigate('/pages/member/withdraw/WithdrawList')"><image mode="aspectFit" class="img" src="../../../static/image/member/icon_tixian_pre.png" /><text>提现</text></view>
	</view>
    <view class="div account mt-5">
      <view class="div menu">
        <view class="div" @click="goNavigate('/pages/member/mallvoucher/MallVoucherList',{ index: 1 })"><flex-line class="menu-item" :is-link="true" :show-border="true"><text class="span line-name">平台代金券</text></flex-line></view>
    	<view class="div" @click="goNavigate('/pages/member/predeposit/PredepositList')"><flex-line class="menu-item" :is-link="true" :show-border="true"><text class="span line-name">资金明细</text></flex-line></view>
        <view class="div" @click="goNavigate('/pages/member/pointsorder/OrderList')"><flex-line class="menu-item" :is-link="true" :show-border="true"><text class="span line-name">积分兑换</text></flex-line></view>
        <view class="div" @click="goNavigate('/pages/member/bank/BankList')"><flex-line class="menu-item" :is-link="true" :show-border="true"><text class="span line-name">提现账户</text></flex-line></view>
        <view class="div" @click="goNavigate('/pages/member/predeposit/RechargeCardList')"><flex-line class="menu-item" :is-link="true" :show-border="true"><text class="span line-name">我的充值卡</text></flex-line></view>
        <view class="div" @click="goNavigate('/pages/member/bonusreceive/Bonusreceive')"><flex-line class="menu-item" :is-link="true" :show-border="true"><text class="span line-name">红包领取记录</text></flex-line></view>
      </view>
    </view>
  </view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'
import MemberBase from '../MemberBase'
import { getMemberIndex } from '../../../api/member'
import { mapState } from 'vuex'
import flexLine from '../../flexLine'
export default {
  components:{
    TitleHeader,
    MemberBase,
    flexLine
  },
  data(){
    return {
      navHeight: 0,
      available_predeposit: 0.00,
      freeze_predeposit: 0.00,
      voucher_count: 0,
      points: 0,
      available_rc_balance: 0
    }
  },
  created () {
    getMemberIndex().then(
      response => {
        if (response && response.result.member_info) {
          this.available_predeposit = response.result.member_info.available_predeposit
          this.freeze_predeposit = response.result.member_info.freeze_predeposit
          this.voucher_count = response.result.member_info.voucher_count
          this.points = response.result.member_info.member_points
          this.available_rc_balance = response.result.member_info.available_rc_balance
        }
      },
      error => {}
    )
  },
  computed:{

  fontSize(){

    return getFontSize()

  },

  },
  mounted(){

  // #ifdef  MP-WEIXIN

  this.navHeight = uni.getMenuButtonBoundingClientRect().top

  // #endif

  },
  methods:{
    goNavigate(path,query=false){
      uni.navigateTo({url:path+(query?('?'+urlencode(query)):'')})
    },


  goBack(){uni.navigateBack({delta:1})},

  }
}
</script>
<style scoped lang="scss">
 .common-header-wrap .common-header{box-shadow: unset}
 .account_header{
   background: linear-gradient(360deg, #FB2732 0%, #FC5767 100%);
   color: #fff;
   padding: .7rem;
   font-size:$fontSize;
   box-sizing: border-box;
   .predeposit{
     padding: .5rem 0;
     margin-top:.8rem;
     display: flex;
 	  justify-content: center;
 	  align-items: center;
 	  .predeposit_title{
 		  font-size: 1rem;
 	  }
     .available_predeposit{
       font-size:1.5rem;
     }

   }
   .amount-wrapper{
     margin-top: 1.5rem;
     padding-top:.7rem;
     border-top:1px dashed rgba(255,255,255,.5);
     overflow: hidden;
     .amount_item{
       float: left;
       width: 50%;
     }
     .amount_item:nth-child(2){
       text-align: right;
     }
   }
 }
 .card-wrapper{
 	background-color: #fff;
 	display: flex;
 	padding: .5rem 0;
 	justify-content: center;
 	align-items: center;
 	.card_item{
 		width: 36%;
 		margin: 0 6%;
 		background-color: #F5A623;
 		padding: .8rem 0;
 		border-radius: .5rem;
 		text-align: center;
 		.img{
 			width: 1.5rem;
 			height: 1.5rem;
 		}
 		.explain{
 			font-size: $subFontSize;
 			color: #fff;
 		}
 	}
 	.card_item:nth-child(3){
 		background-color: #FF862F;
 	}
 	.border{
 		width: 1px;
 		background-color: #cdcdcd;
 		height: 2.8rem;
 	}
 }
 .predeposit_handle{
   height: 4rem;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: stretch;
   background-color: #fff;
   .item{
     display: flex;
     justify-content: center;
     align-items: center;
 	  flex: 1;
     .img{
       width: 3rem;
       height: 3rem;
     }
 	  text{
 		font-size: .9rem;
 		color: #666;
 	  }
   }
 }
 .account{
   padding: 0 $pageSpace;
   background: #fff;

   .menu{
     background: #fff;
   }
 }
</style>