oil/mobile-uniapp/pages/wallet/index.vue

<template>
  <view class="container" v-if="!isLoading">
    <view class="space-upper">
      <view class="wallet-image">
        <image src="/static/wallet.png" mode="widthFix"></image>
      </view>
      <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 btn-group">
        <view v-if="setting.is_entrance" class="btn-submit" @click="onTargetRecharge()">充 值</view>
		<view v-if="share.is_entrance" class="btn-submit" @click="onTargetShare()">分 享</view>
		<view v-if="exchange.is_entrance" class="btn-submit" @click="onTargetExchange()">实体卡兑换</view>
      </view>
      <view class="space-lower_item item-lable dis-flex flex-x-around">
        <view class="lable-text" @click="onTargetBalanceLog()">
          <text>账单详情</text>
        </view>
		<view class="lable-text" @click="onTargetExchangeLog()">
		  <text>兑换记录</text>
		</view>
      </view>
    </view>
  </view>
</template>

<script>
  import * as UserApi from '@/api/user'
  import SettingModel from '@/common/model/Setting'
  import SettingKeyEnum from '@/common/enum/setting/Key'

  export default {
    data() {
      return {
        // 正在加载
        isLoading: true,
        // 会员信息
        userInfo: {},
        // 充值设置
        setting: {},
		// 实体卡兑换设置
		exchange: {},
		// 分享设置
		share: {},
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onShow(options) {
      // 获取页面数据
      this.getPageData()
    },

    methods: {

      // 获取页面数据
      getPageData() {
        const app = this
        app.isLoading = true
        Promise.all([app.getUserInfo(), app.getSetting(), app.getExchange(), app.getShare()])
          .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) => {
          SettingModel.item(SettingKeyEnum.RECHARGE.value, false)
            .then(data => {
              app.setting = data
              resolve(data)
            })
        })
      },
	  
	  // 获取兑换设置
	  getExchange() {
	    const app = this
	    return new Promise((resolve, reject) => {
	      SettingModel.item(SettingKeyEnum.EXCHANGE.value, false)
	        .then(data => {
	          app.exchange = data
	          resolve(data)
	        })
	    })
	  },
	  
	  // 获取分享设置
	  getShare() {
	    const app = this
	    return new Promise((resolve, reject) => {
	      SettingModel.item(SettingKeyEnum.SHARE.value, false)
	        .then(data => {
	          app.share = data
	          resolve(data)
	        })
	    })
	  },
	  
	  // 跳转分享页面
	  onTargetShare() {
	    this.$navTo('pages/wallet/share/index')
	  },
	  
	  // 跳转兑换页面
	  onTargetExchange() {
	    this.$navTo('pages/wallet/exchange/index')
	  },
	  

      // 跳转充值页面
      onTargetRecharge() {
        this.$navTo('pages/wallet/recharge/index')
      },

      // 跳转充值记录页面
      onTargetRechargeOrder() {
        this.$navTo('pages/wallet/recharge/order')
      },

      // 跳转账单详情页面
      onTargetBalanceLog() {
        this.$navTo('pages/wallet/balance/log')
      },
	  
	  // 跳转兑换详情页面
	  onTargetExchangeLog() {
	    this.$navTo('pages/wallet/exchange/log')
	  }

    }
  }
</script>
<style>
  page {
    background: #fff;
  }
</style>
<style lang="scss" scoped>
  .container {
    background: #fff;
  }

  .space-upper {
    padding: 150rpx 0;
    text-align: center;
  }

  .wallet-image image {
    width: 360rpx;
    height: 261.72rpx;
  }

  .wallet-account {
    margin-top: 20rpx;
  }

  .wallet-account_balance {
    font-size: 56rpx;
  }

  .wallet-account_lable {
    margin-top: 14rpx;
    color: #cec1c1;
    font-size: 26rpx;
  }

  .space-lower {
    margin-top: 30rpx;
    padding: 0 80rpx;
  }
  
  .btn-group{
	display: flex;
	gap: 10px;
  }

  .btn-recharge .btn-submit {
    width: 460rpx;
    height: 84rpx;
    margin: 0 auto;
    border-radius: 50rpx;
    background: #786cff;
    color: white;
    font-size: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .item-lable {
    margin-top: 80rpx;
    font-size: 28rpx;
    color: rgb(94, 94, 94);
    padding: 0 100rpx;
  }
</style>