quickapp_front/src/views/My/index.ux

<template>
  <div class="user-wrap">
    <div class="user-info__wrap">
      <image src="{{user.head_img}}"></image>
      <text>ID：{{user.id}}</text>
    </div>
    <div class="operator-item__wrap">
      <div class="operator-item">
        <div class="item-name">
          <image src="../../assets/imgs/declining.png"></image>
          <text>您还剩<span class="red">{{user.balance}}</span>书币</text>
        </div>
        <text class="operator-button" @click="pageChange('Pay')">
          充值
        </text>
      </div>
      <div class="operator-item" @click="pageChange('Sign')">
        <div class="item-name">
          <image src="../../assets/imgs/sign.png"></image>
          <text>签到记录</text>
        </div>
        <div class="info-text">
          <image class="arrow" src="../../assets/imgs/arrow-right.png"></image>
        </div>
      </div>
      <div class="operator-item" @click="pageChange('Recharge')">
        <div class="item-name">
          <image src="../../assets/imgs/recharge_record.png"></image>
          <text>充值记录</text>
        </div>
        <div class="info-text">
          <image class="arrow" src="../../assets/imgs/arrow-right.png"></image>
        </div>
      </div>
      <div class="operator-item" @click="pageChange('Consume')">
        <div class="item-name">
          <image src="../../assets/imgs/consume_record.png"></image>
          <text>消费记录</text>
        </div>
        <div class="info-text">
          <image class="arrow" src="../../assets/imgs/arrow-right.png"></image>
        </div>
      </div>
      <div class="operator-item" @click="showCustomerQrcode">
        <div class="item-name">
          <image src="../../assets/imgs/customer.png"></image>
          <text>联系客服</text>
        </div>
        <div class="info-text">
          <image class="arrow" src="../../assets/imgs/arrow-right.png"></image>
        </div>
      </div>
      <div class="operator-item" @click="pageChange('Phone')">
        <div class="item-name">
          <image src="../../assets/imgs/binding.png"></image>
          <text>绑定手机</text>
        </div>
        <div class="info-text">
          <text if="{{!user.phone}}">绑定即送100书币</text>
          <text else>已绑定手机号</text>
          <image class="arrow" src="../../assets/imgs/arrow-right.png"></image>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import router from "@system.router";
import { getUserInfo } from "../../api/index";
import prompt from '@system.prompt';
export default {
  props: {
    tabindex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      user: {}
    }
  },
  onInit() {
    this.$watch('tabindex', 'watchPropsChange');
  },
  async getUser() {
    let user = await getUserInfo();
    this.user = user;
  },
  watchPropsChange(v) {
    if (v === 3) this.getUser();
  },
  showCustomerQrcode() {
    this.$emit('customer');
  },
  pageChange(page) {
    if (page == 'Phone' && this.user.phone) {
      prompt.showToast({
        message: '您已绑定过手机号'
      })
      return false;
    }
    router.push({
      uri: `/views/${page}`
    })
  },
  toUrl(url) {
    router.push({
      uri: url
    })
  }
}
</script>

<style lang="less">
@import "../../assets/less/my.less";
</style>