quickapp_front/src/views/My/index.ux

<template>
  <div class="user-wrap">
    <div class="my_title"><text>我的</text></div>
    <list>
      <list-item type="mycollect">
        <div class="my-collect">
          <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 class="user_id">ID：{{ user.id }}</text>
              <!-- <text class="vip-card" if="{{user.is_vip}}">免费阅读卡还剩{{ user.vip_days }}</text> -->
            </div>
          </div>
          <div class="my-collect-wrap">
            <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>
      </list-item>
      <list-item type="myitem">
        <div class="first_item" @click="pageChange('Task')">
          <image src="../../assets/imgs/task.png"></image></div
      ></list-item>
      <list-item type="operatoritem">
        <div class="operator-item__wrap">
          <div class="operator-item_wrap_content">
            <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 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>
      </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 === 4) {
      //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 == 4) {
      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/suishen_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>