bnyer-cloud-hub/pages-userInfo/withdraw/withdrawIndex.vue

<template>
	<view class="container">
		<view class="head">
      <uni-icons custom-prefix="iconfont" :type="'icon-tixian'" size="50" :color="iconColor" ></uni-icons>
			<view class="account-balance-title-box">
        钱包余额
        <span class="income-hidden-but" @click="clickHidden">
          <uni-icons v-if="hidden" type="eye" :size="18" :color="'#fff'" />
          <uni-icons v-else type="eye-slash" :size="18" :color="'#fff'" />
        </span>
			</view>
			<view class="account-balance-box">
        <MoneyView :character="'￥'" :value="userInfo.amt || 0" :size="60" :hidden="hidden"/>
        <span class="income-refresh-but"  v-if="!hidden"  @click="clickRefresh">
          <uni-icons type="loop" :size="20" :color="'#fff'" />
        </span>
			</view>
			<button class="withdrawBtn" size="default" :loading="loadingFlag" @click="withdraw('/pages-userInfo/withdraw/withdraw')" :disabled="checkUpload">发起提现</button>
		</view>
		<view class="bottom">
      <view class="foot-item-box" v-for="(item, index) in list" :index="index" :key="index" >
        <view class="list-click-item" @click="clickItem(item)">
          <uni-icons class="listIconImage" :custom-prefix="item.iconType" :type="item.icon" size="20" :color="iconColor" ></uni-icons>
          <div class="text uni-white">{{item.title}}</div>
          <uni-icons type="right" size="12" color="#ffffff" />
        </view>
      </view>
		</view>
	</view>
</template>

<script>
import {
  getCreatorInfo
} from '@/api/userInfo.js'
import MoneyView from "@/components/money-view/money-view.vue";
export default {
  components: {
    MoneyView
  },
  data() {
    return {
      iconColor: '#0b6375',
      userInfo: {},
      hidden: true,
      list: [{
        url: '/pages-userInfo/creatorAccount/creatorAccount',
        title: '管理收款账户',
        click: 'link',
        iconType: '',
        icon: 'wallet'
      }, {
        url: '/pages-userInfo/withdraw/withdrawLog',
        title: '提现记录',
        click: 'link',
        iconType: '',
        icon: 'compose'
      },
      ],
    }

  },
  created() {
    const userInfo = uni.getStorageSync('userInfo')
    if (!userInfo) {
      console.log('havent userInfo')
      uni.showModal({
        content: '艺术家账户过期,请重新登录！',
        showCancel: false,
        success() {
          //没有缓存则跳转登录页面
          uni.reLaunch({
            url: '/pages/login/login'
          });
        }
      });
    } else {
      this.userInfo = userInfo;
      console.log('have userInfo')
    }
  },
  methods: {
    // targetToDetail(orderId) {
    // 	console.log('orderId', orderId)
    // 	if (orderId) {
    // 		uni.navigateTo({
    // 			url: 'withdrawDetail?orderId=' + orderId,
    // 		});
    // 	}
    // },
    withdraw(url){
      uni.navigateTo({
        url: url
      })
    },
    clickItem(item) {
      if (item.click === 'link') {
        /** 跳转指定页面*/
        uni.navigateTo({
          url: item.url
        });
      } else if (item.click === 'click') {
        this[item.url]();
      }
    },
    clickHidden() {
      this.hidden = !this.hidden;
    },
    clickRefresh() {
      let that = this
      uni.showLoading({
        title: "加载中"
      });
      getCreatorInfo(that.userInfo.id).then(res => {
        if (res.data.code === 200) {
          that.userInfo = res.data.data;
        }
        uni.hideLoading()
      }).catch(error => {
        uni.hideLoading()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	.container{
    width: 670rpx;
    margin: 0 auto;

		.head{
			margin-bottom: 50rpx;
			text-align: center;

      .account-balance-title-box {
        color: $uni-white;
        font-size: 28rpx;
        margin-top: 40rpx;

        .income-hidden-but {
          margin-left: 30rpx;
        }

      }

      .account-balance-box {
        display: flex;
        justify-content: center;
        margin-bottom: 40rpx;
        line-height: 80rpx;
        height: 80rpx;

        .income-refresh-but {
          margin-left: 30rpx;
        }

      }

      .withdrawBtn{
        color: $uni-btn-text-color;
      }

		}

    .bottom {

      .foot-item-box {
        width: calc(100% - 40rpx);
        background: #1d2734;
        border-radius: 20rpx;
        padding: 20rpx;
        margin-bottom: 20rpx;

        .list-click-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 60rpx;

          .listIconImage{
            width: 40rpx;
            height: 40rpx;
          }

          .text {
            font-size: 24rpx;
            line-height: 40rpx;
            width: 500rpx;
          }

        }

      }
    }
	}
</style>