quickapp_front/src/views/My/index.ux

<template>
  <div class="user-wrap">
    <stack>
      <div class="user-info__wrap">
        <image src="../../assets/imgs/user_login.png" if="{{haslogin && loginPhone}}"></image>
        <image src="../../assets/imgs/user_logo.png" else ></image>
        <div class="uesr-info__message">
          <text class="user-name" if="{{haslogin && loginPhone}}">书友{{user.id}}</text>
          <text class="un-Login" else>未登录</text>
          <text>ID：{{ user.id }}</text>
          <!-- <text class="vip-card" if="{{user.is_vip}}">免费阅读卡还剩{{ user.vip_days }}</text> -->
        </div>
        
      </div>
        <div class="my-collect">
            <div class="collect-content">
              <text class="collect-info"><span class="title">我的账户</span><span class="vip-card" if="{{user.is_vip}}">免费阅读卡还剩{{ user.vip_days }}天</span></text>
              <text class="book_coin">书币:{{ user.balance }}</text>
            </div>
            <text  class="pay-btn" @click="pageChange('Pay')">充值</text>
        </div>
    </stack>
   

    <div class="operator-item__wrap">
      <div
        class="operator-item"
        @click="pageChange('Task')"
        if="{{!user.is_vip}}"
      >
        <div class="item-name">
          <image src="../../assets/imgs/task.png"></image>
          <text class="orange">每日做任务，小说免费读</text>
        </div>
        <div class="info-text">
          <image class="arrow" src="../../assets/imgs/arrow-right.png"></image>
        </div>
      </div>
      <!-- <div class="operator-item">
        <div class="item-name">
          <image src="../../assets/imgs/declining.png"></image>
          <text
            ><span>您还剩</span><span class="red">{{ user.balance }}</span
            ><span>书币</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('Agreement')">
        <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('Privacy')">
        <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 if="{{!(haslogin && loginPhone)}}"> 登录绑定</text>
          <text else>退出登录</text>
        </div>
        <div class="info-text">
          <text if="{{!(haslogin && loginPhone)}}"></text>
          <text else>已绑定手机号</text>
          <image class="arrow" src="../../assets/imgs/arrow-right.png"></image>
        </div>
      </div>
    </div>

    <div class="bottom-info">
      <text  @click="pageChange('Agreement')">用户协议</text><text class="line">|</text><text  @click="pageChange('Privacy')">隐私协议</text>
    </div>
  </div>
</template>

<script>
import router from "@system.router";
import { getUserInfo } from "../../api/index";
import prompt from '@system.prompt';
import storage from '@system.storage';
export default {
  props: {
    tabindex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      user: {},
      haslogin: undefined,
      loginPhone: undefined,
      send_order_id: '',
    }
  },
  async onInit() {
    this.$watch('tabindex', 'watchPropsChange');
    this.$on('refreshData', this.broadevt);
  },
  async getUser() {
    let user = await getUserInfo();
    var reg = /^(\d{3})\d*(\d{4})$/;
    if (user.phone) user.dtel = user.phone.replace(reg, '$1****$2')
    this.user = user;
    let haslogin = (await storage.get({ key: "hasLogin" })).data;
    this.loginPhone = (await storage.get({ key: "loginPhone" })).data;
    this.haslogin = haslogin;
    if (!this.send_order_id) this.send_order_id = user.send_order_id;
  },
  async watchPropsChange(v) {
    if (v === 2) {
      let s = (await storage.get({ key: "send_order_id" })).data;
      if (s) this.send_order_id = s;
      this.getUser();
    }
  },
  broadevt(evt) {
    if (evt.detail.current == 2) {
      this.getUser()
    }
  },
  showCustomerQrcode() {
    this.$emit('customer');
  },
  pageChange(page) {
    if (page == 'Phone' && this.haslogin) {
      this.loginOut();
      return false;
    }
    if (page == 'Pay') {
      if (this.send_order_id || (this.haslogin && this.loginPhone)) {
        router.push({
          uri: `/views/${page}`
        })
      } else {
        router.push({
          uri: `/views/Phone`
        })
      }
    } else {
      router.push({
        uri: `/views/${page}`
      })
    }


  },
  toUrl(url) {
    router.push({
      uri: url
    })
  },
  loginOut() {
    let self = this;
    prompt.showDialog({
      title: '提示',
      message: '确认是否要退出登录？',
      buttons: [
        {
          text: '确定',
          color: '#666'
        },
        {
          text: '取消',
          color: '#9900FF'
        }
      ],
      success: function (data) {
        if (data.index == 1) {
          prompt.showToast({
            message: '取消操作'
          })
        } else {
          prompt.showToast({
            message: '退出成功'
          })
          console.log(data)
          storage.delete({
            key: 'hasLogin',
            success: function (data) {
              self.getUser();
              console.log('handling success')
            },
            fail: function (data, code) {
              console.log(`handling fail, code = ${code}`)
            }
          })
          storage.delete({
            key: 'loginPhone',
            success: function (data) {
              console.log('handling success')
            },
            fail: function (data, code) {
              console.log(`handling fail, code = ${code}`)
            }
          })
        }
      },
      cancel: function () {
        prompt.showToast({
          message: '取消操作'
        })
      },
      fail: function (data, code) {
        console.log(`handling fail, code = ${code}`)
      }
    })
  }
}
</script>

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