quickapp_front/src/views/My/index.ux

<template>
  <div class="user-wrap">
    <div class="my_title"><text>我的</text></div>
    <list style="width:100%">
      <list-item type="mycollect" style="height:440px">
        <stack style="background-color:#fff">
          <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>
              <!-- <text class="vip-card" if="{{user.is_vip}}">免费阅读卡还剩{{ user.vip_days }}</text> -->
            </div>
           
          </div>
          <div class="my-collect">
            <!-- if="{{user.is_vip}}" -->
            <div class="collect-content">
              <div class="coin_wrap">
                <div>
                  <!--  -->
                  <text>我的账户</text>
                  <text class="collect-info"
                    ><span class="vip-card" if="{{user.is_vip}}"
                      >免费阅读卡还剩{{ user.vip_days }}</span
                    ></text
                  >
                </div>
                <div style="padding:5px">
                  <text class="book_coin">书币: </text>
                  <text class="coin">{{ user.balance }}</text>
                </div>
              </div>
            </div>
            <text class="pay-btn" @click="pageChange('Pay')">充值</text>
          </div>
        </stack>
      </list-item>
      <list-item type="myitem">
        <div class="operator-item__wrap">
          <div class="task_wrap">
            <div class="task_wrap_item">
              <div @click="pageChange('Task')" class="operator-item">
                <image src="../../assets/imgs/task.png"></image>
                <text>任务福利</text>
              </div>
              <div class="operator-item" @click="pageChange('Sign')">
                <image src="../../assets/imgs/sign.png"></image>
                <text>签到记录</text>
              </div>
              <div class="operator-item" @click="pageChange('Recharge')">
                <image src="../../assets/imgs/recharge_record.png"></image>
                <text>充值记录</text>
              </div>
              <div class="operator-item" @click="pageChange('Consume')">
                <image src="../../assets/imgs/consume_record.png"></image>
                <text>消费记录</text>
              </div>
            </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/Agreement.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/Privacy.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
            class="operator-item"
            @click="pageChange('Cancellation', { fee: user.balance })"
            if="{{!send_order_id && haslogin && loginPhone}}"
          >
            <div class="item-name">
              <image src="../../assets/imgs/Privacy.png"></image>
              <text>注销账号</text>
            </div>
            <div class="info-text">
              <image
                class="arrow"
                src="../../assets/imgs/arrow-right.png"
              ></image>
            </div>
          </div></div
      ></list-item>
      <list-item type="bottominfo">
        <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>
      </list-item></list
    >
  </div>
</template>

<script>
import router from '@system.router'
import { getUserInfo } from '../../api/index'
import prompt from '@system.prompt'
import webview from '@system.webview'
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()
    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')
  },goToLogin(){
    if(!(this.haslogin && this.loginPhone)){
      router.push({
        uri: `/views/Phone`
      })
    }  
  },
  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') {
      let privacy = this.$app.$def.manifest.config.data.yinsi_addr;
      webview.loadUrl({
          url:privacy,
          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>