quickapp_front/src/views/My/index.ux

<template>
  <div class="user-wrap">
    <div class="my_title"><text>我的</text></div>
    <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" @click="goToLogin" else>未登录</text>
        <text>ID：{{ user.id }}</text>
      </div>
    </div>
    

    <div class="my-collect-box">
      <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>
      <div class="task-box">
        <image class="task-rukou-img" src="../../assets/imgs/task-rukou.png"></image>
      </div>
    </div>
    <div class="operator-wrap">
      <div class="operator-item__wrap">
        <div class="operator-item" for="item in set_list" @click="pageChange(item.url)">
          <div class="item-name">
            <image src="{{item.icon}}"></image>
            <text>{{item.title}}</text>
          </div>
          <div class="info-text" if="{{item.arrow}}">
            <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 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>

    <div class="bottom-info">
      <text @click="pageChange('Agreement')">用户协议</text>
      <text class="line">|</text>
      <text @click="pageChange('Privacy')">隐私协议</text>
      <text if="{{!send_order_id &&  haslogin && loginPhone}}" class="line"
        >|</text
      >
      <text
        if="{{!send_order_id && haslogin && loginPhone}}"
        @click="pageChange('Cancellation', { fee: user.balance })"
        >注销账号</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'
import webview from '@system.webview'
export default {
  props: {
    tabindex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      user: {},
      haslogin: undefined,
      loginPhone: undefined,
      send_order_id: '',
      set_list :[
        {
          icon:"../../assets/imgs/sign.png",
          title:"签到记录",
          url:"Sign",
          arrow:true,
        },{
          icon:"../../assets/imgs/recharge_record.png",
          title:"充值记录",
          url:"Recharge",
          arrow:true,
        },{
          icon:"../../assets/imgs/consume_record.png",
          title:"消费记录",
          url:"Consume",
          arrow:true,
        }
      ],
    }
  },
  async onInit() {
    this.$watch('tabindex', 'watchPropsChange')
    this.$on('refreshData', this.broadevt)
  },goToLogin(){
    if(!(this.haslogin && this.loginPhone)){
      router.push({
        uri: `/views/Phone`
      })
    }  
  },
  async getUser() {
    let user = await getUserInfo()
    this.user = user
    this.haslogin = (await storage.get({ key: 'hasLogin' })).data
    this.loginPhone = (await storage.get({ key: 'loginPhone' })).data
    if (user.send_order_id) {
      this.send_order_id = user.send_order_id
    }
  },
  async watchPropsChange(v) {
    if (v === 3) {
      //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 == 3) {
      this.getUser()
    }
  },
  showCustomerQrcode() {
    this.$emit('customer')
  },
  pageChange(page, params) {
    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`
        })
      }
    }
    if (page == 'Privacy') {
      webview.loadUrl({
        url:
          'https://zhuishuyun.oss-cn-hangzhou.aliyuncs.com/qapp/privacy/qingm_privacy.htm',
        showloadingdialog: true
      })
    } else {
      router.push({
        uri: `/views/${page}`,
        params: params ? params : {}
      })
    }
  },
  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>