我的页面

my.vue

<template>
  <view class="page">
    <view class="top">
      <image class="top-bg" src="/static/mine/top-bg.png" mode="widthFix"></image>
      <view class="user">
        <view class="left">
          <view class="mobile">
            <text class="mobile-text">{{userInfo.name}}</text>
            <image v-if="userInfo&&userInfo.is_vip" class="mobile-image" src="/static/mine/vip.png" mode="aspectFill"></image>
          </view>
          <text class="msg">{{welcomeMsg}}</text>
        </view>
        <view class="right">
          <image class="avatar" src="/static/mine/avatar.png" mode="widthFix"></image>
        </view>
      </view>
      <view class="banner" @click="goPay">
        <image class="bg" src="/static/mine/vip-banner.png" mode="widthFix" v-if="userInfo.is_vip"></image>
        <image class="bg" src="/static/mine/vip-banner-grey.png" mode="widthFix" v-else></image>
        <image class="icon" src="/static/mine/vip-icon.png" mode="widthFix"></image>
        <view class="right">
          <template v-if="message==='立即开通'">
            <view class="btn-pay"><text class="btn-pay-text">{{ message }}</text></view>
          </template>
          <template v-else>
            <text class="vip-status-txt">{{message}}</text>
            <image style="width: 12px" src="@/static/right-white.png" mode="widthFix"></image>
          </template>
        </view>
      </view>
    </view>
    <view class="list">
      <view v-if="isVisible" class="list-item first" @click="activate">
        <view class="list-item-content">
          <view class="left">
            <image class="icon" src="/static/mine/activate.png" mode="widthFix"></image>
            <text class="title">使用兑换码</text>
          </view>
          <view class="right">
            <image style="width: 12px" src="@/static/right.png" mode="widthFix"></image>
          </view>
        </view>
      </view>
      <view :class="!isVisible?'first':''" class="list-item" @click="customerService">
        <view class="list-item-content">
          <view class="left">
            <image class="icon" src="/static/mine//service.png" mode="widthFix"></image>
            <text class="title">在线客服</text>
          </view>
          <view class="right">
            <image style="width: 12px" src="@/static/right.png" mode="widthFix"></image>
          </view>
        </view>
      </view>
      <!-- <view class="list-item">
        <view class="list-item-content border-top">
          <view class="left">
            <image class="icon" src="/static/mine/movie.png" mode="widthFix"></image>
            <text class="title">制作视频</text>
          </view>
          <view class="right">
            <u-icon name="arrow-right" color="#999" size="13"></u-icon>
          </view>
        </view>
      </view> -->
      <view class="line"></view>
      <view class="list-item first" v-if="hasWechatApp">
        <view class="list-item-content">
          <view class="left">
            <image class="icon" src="/static/mine/wechat.png" mode="widthFix"></image>
            <text class="title">微信授权</text>
          </view>
          <view class="right">
            <u-switch v-model="switch1" @change="switchChange1" asyncChange activeColor="#ff404a">
            </u-switch>
          </view>
        </view>
      </view>
      <view class="list-item" v-if="isIOS13">
        <view class="list-item-content">
          <view class="left">
            <image class="icon" src="/static/mine/apple.png" mode="widthFix"></image>
            <text class="title">苹果授权</text>
          </view>
          <view class="right">
            <u-switch v-model="switch2" @change="switchChange2" asyncChange activeColor="#ff404a">
            </u-switch>
          </view>
        </view>
      </view>
      <view class="line"></view>
      <view class="list-item first" @click="gotoReg">
        <view class="list-item-content">
          <view class="left">
            <image class="icon" src="/static/mine/agreement.png" mode="widthFix"></image>
            <text class="title">用户协议</text>
          </view>
          <view class="right">
            <image style="width: 12px" src="@/static/right.png" mode="widthFix"></image>
          </view>
        </view>
      </view>
      <view class="list-item" @click="gotoPri">
        <view class="list-item-content">
          <view class="left">
            <image class="icon" src="/static/mine/security.png" mode="widthFix"></image>
            <text class="title">隐私政策</text>
          </view>
          <view class="right">
            <image style="width: 12px" src="@/static/right.png" mode="widthFix"></image>
          </view>
        </view>
      </view>
      
      <view class="line"></view>
      <view class="list-item first" @click="userRemove">
        <view class="list-item-content">
          <view class="left">
            <image class="icon" src="/static/mine///user-remove.png" mode="widthFix"></image>
            <text class="title">注销账号</text>
          </view>
        </view>
      </view>
    </view>
    <view class="footer">
      <text class="version">当前版本：v{{version}}</text>
      <tik-button styleType="styleType2" text="退出登录" width="320rpx" @click="logout"></tik-button>
    </view>
    
    <u-modal :show="showLogoutConfirm" :zoom="false" @cancel="showLogoutConfirm=false" @confirm="doLogout"
      content="是否退出登录？" :showCancelButton="true" confirmColor="#ff4049"></u-modal>
    <u-modal :show="showWxUnbindConfirm" :zoom="false" @cancel="showWxUnbindConfirm=false" @confirm="doWxUnbind"
      content="是否解绑微信账号？" :showCancelButton="true" confirmColor="#ff4049"></u-modal>
    <u-modal :show="showIosUnbindConfirm" :zoom="false" @cancel="showIosUnbindConfirm=false" @confirm="doIosUnbind"
      content="是否解绑苹果账号？" :showCancelButton="true" confirmColor="#ff4049"></u-modal>
  </view>
</template>

<script>
  import TikButton from '@/components/TikButton.nvue'
  import request from '@/common/request'
  import {
    redirectTo,
    toast,
    setValue,
    formatTime,
    navigateTo,
  } from '@/common/utils/func.js'
  import Api from '@/common/api/index.js'
  export default {
    name: 'Mine',
    components: {
      TikButton
    },
    data() {
      return {
        hasWechatApp: false,
        isIOS13: false,
        switch1: false,
        switch2: false,
        showLogoutConfirm: false,
        showWxUnbindConfirm: false,
        showIosUnbindConfirm: false,
        userInfo: {},
        version: '',
      }
    },
    computed: {
      message() {
        return this.userInfo.user_status
      },
      welcomeMsg() {
        return this.userInfo.tips
      },
      isVisible() {
        return this.userInfo.app_check===0 || !getApp().globalData.isIOS
      }
    },
    onLoad() {
      const app = getApp()
      this.hasWechatApp = app.globalData.hasWechatApp
      this.isIOS13 = app.globalData.isIOS13
      this.version = plus.runtime.version + (request.baseUrl.includes('-dev') ? '.dev' : '')
    },
    onShow() {
      if (getApp().globalData.isNetworkConnected) {
        this.getUserInfo()
      }
    },
    methods: {
      getProducts() {
        return Api.getProducts().then(res => {
          this.help = res.help
        })
      },
      customerService() {
        this.getProducts().then(()=>{
          let wechat = this.help.wechat
          uni.showModal({
            title: '联系客服',
            content: `${this.help.popup}(${wechat})`,
            confirmText: '复制',
            cancelText: '关闭',
            success: (res)=>{
              if (res.confirm) {
                uni.setClipboardData({
                  data: wechat,
                  success: ()=>{
                    uni.showToast({
                      title: '复制成功'
                    })
                  }
                });
              } 
            }
          })
        })
      },
      activate() {
        navigateTo('/pages/activate/activate')
      },
      goPay() {
        navigateTo('/pages/pay/pay')
      },
      getUserInfo() {
        Api.getUserInfo().then(res => {
          this.userInfo = res
          this.switch1 = this.userInfo.bind.wechat
          this.switch2 = this.userInfo.bind.apple
        })
      },
      logout() {
        this.showLogoutConfirm = true
      },
      doLogout() {
        this.showLogoutConfirm = false
        uni.clearStorage()
        uni.setStorageSync('route_401_times', 1)
        navigateTo('/pages/login/login')
      },
      gotoReg() {
        uni.navigateTo({
          url: '/pages/webview/webview?openUrl=' + encodeURIComponent('https://www.code0xff.com/smartcut-reg.html'),
        })
      },
      gotoPri() {
        uni.navigateTo({
          url: '/pages/webview/webview?openUrl=' + encodeURIComponent('https://www.code0xff.com/smartcut-privacy.html'),
        })
      },
      doWxUnbind() {
        this.showWxUnbindConfirm = false
        Api.unbind('wechat').then(res => {
          this.switch1 = false
        })
      },
      doIosUnbind() {
        this.showIosUnbindConfirm = false
        Api.unbind('apple').then(res => {
          this.switch2 = false
        })
      },
      doWxBind() {
        plus.oauth.getServices((services) => {
          var auths = [];
          for (var service of services) {
            auths[service.id] = service;
          }
          var aweixin = auths['weixin'];
          aweixin.authorize((result) => {
            console.log(result)
            if (result.code) {
              Api.wxBind(result.code).then(res => {
                console.log(res)
                toast('微信授权成功')
                this.switch1 = true
              })
            } else {
              uni.showModal({
                content: '微信授权失败',
                showCancel: false
              })
              this.switch1 = false
            }
          }, (e) => {
            uni.showModal({
              content: '微信授权失败',
              showCancel: false
            })
            this.switch1 = false
          })
        })
      },
      doIosBind() {
        uni.login({
          provider: 'apple',
          success: (loginRes) => {
            // 登录成功
            uni.getUserInfo({
              provider: 'apple',
              success: (res) => {
                console.log(res)
                Api.appleBind(res.userInfo.identityToken).then(res2 => {
                  // setValue('token', res2.token);
                  toast('授权成功')
                  this.switch2 = true
                }).catch(err => {
                  this.switch2 = false
                })
              }
            })
          },
          fail: (err) => {
            // 登录失败
            toast('授权失败')
            this.switch2 = false
          }
        });
      },
      switchChange1(e) {
        if (e) {
          this.doWxBind()
        } else {
          this.showWxUnbindConfirm = true
        }
      },
      switchChange2(e) {
        if (e) {
          this.doIosBind()
        } else {
          this.showIosUnbindConfirm = true
        }
      },
      userRemove() {
        uni.showModal({
          title: '',
          content: `注销账号后视为您放弃VIP权利\n您确定要继续注销账号吗`,
          success: (res) => {
            if (res.confirm) {
              Api.userRemove().then(()=>{
                this.doLogout()
              })
            }
          },
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .page>.top {
    height: 580rpx;

    >.top-bg {
      position: absolute;
      height: 580rpx;
      width: 750rpx;
    }

    >.user {
      flex-direction: row;
      margin-top: 150rpx;
      padding-left: 40rpx;
      align-items: center;

      >.left {
        flex: 1;

        .mobile {
          display: flex;
          flex-direction: row;
          align-items: center;
          height: 26px;
          margin-bottom: 28rpx;
          .mobile-text {
            font-size: 20px;
            font-weight: bold;
          }
          .mobile-image {
            width: 32px;
            height: 16px;
            margin-left: 6rpx;
          }
        }

        .msg {
          color: #a1a1a1;
          font-size: 13px;
        }
      }

      >.right {
        .avatar {
          width: 292rpx;
        }
      }
    }

    >.banner {
      width: 690rpx;
      height: 110rpx;
      margin: 0 30rpx;
      position: absolute;
      bottom: 0;
      flex-direction: row;
      align-items: center;
      padding: 0 20rpx 0 40rpx;
      justify-content: space-between;

      .bg {
        width: 690rpx;
        height: 110rpx;
        position: absolute;
        bottom: 0;
        left: 0;
      }

      .icon {
        width: 104rpx;
      }

      >.right {
        flex-direction: row;
        align-items: center;

        .vip-status-txt {
          color: #fff;
          font-size: 13px;
          margin-right: 4px;
        }
        
        .btn-pay {
          padding: 4px 8px;
          background-color: white;
          border-radius: 50%;
        }
        .btn-pay-text {
          color: #FF4049;
          font-size: 13px;
        }
      }
    }
  }

  .page>.list {
    padding-top: 15rpx;
    background-color: #fff;

    .list-item {
      height: 88rpx;
      padding: 0 30rpx;
      background-color: #fff;

      .list-item-content {
        border-top: 1px solid #eee;
        height: 88rpx;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .left {
          flex-direction: row;
          align-items: center;

          .icon {
            width: 40rpx;
            margin-right: 8px;
          }

          .title {
            font-size: 15px;
          }
        }

        .right {
          flex-direction: row;
          align-items: center;

          .txt {
            color: #999;
            font-size: 13px;
            margin-right: 4px;
          }
        }
      }

      .border-top {
        border-top: 1rpx solid #eee;
      }
    }

    .list-item.first {
      .list-item-content {
        border-top: 0
      }
    }

    >.line {
      height: 16rpx;
      background-color: #f5f5f5;
    }
  }

  .page>.protocol {
    flex-direction: row;
    justify-content: center;
    margin-top: 44rpx;

    .link,
    .line {
      color: #ff404a;
      font-size: 13px;
    }

    .line {
      margin: 0 4px;
    }
  }

  .page>.footer {
    padding: 23rpx 0;
    align-items: center;
    width: 750rpx;

    .version {
      color: #999999;
      font-size: 13px;
      margin-bottom: 23rpx;
    }
  }
</style>