xdd-uniapp-new/pages/authorization/index_bak.vue

<template>
  <view class="pages-auth">
    <view class="tip-1">为了提供更优质的服务，需要获取</view>
    <view class="tip-2">您的头像、昵称</view>

    <view class="wechat flex jc-between ai-center">
      <view class="flex ai-end">
        <open-data class="avatar" type="userAvatarUrl"></open-data>
        <view>
          <open-data class="name" type="userNickName"></open-data>
          <view class="info">微信个人信息</view>
        </view>
      </view>
      <image class="select" :src="webUrl+'/20220613104953149068.png'" mode="scaleToFill"/>
    </view>

    <view class="agree-box">
      <checkbox-group @change="changeAgree">
        <label>
          <checkbox value="yes" style="transform:scale(0.8)"/>
        </label>
        <text @click="show=true">我已阅读并同意
          <text class="btn-show">《用户服务协议及隐私政策》</text>
        </text>
      </checkbox-group>
    </view>

    <view class="dialog-mask" v-if="show">
      <view class="dialog-body">
        <image class="btn-close" :src="webUrl+'/20221230200935413332.png'" @click="show=false"/>
        <view class="content">
          <view class="title tc bold">《用户协议及隐私政策》</view>
          <view class="popup-content" v-html="agreeInfo.privacyPolicy"></view>
          <view class="title tc">
            <button size="mini" @click="show=false">关闭</button>
          </view>
        </view>
      </view>
    </view>

    <view class="btn-box">
      <button class="btn-yes" type="default" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">同意</button>
      <button class="btn-yes" type="default" v-else @getuserinfo="getUserInfo" open-type="getUserInfo">同意</button>
      <button class="btn-no" type="default" @tap="back">拒绝</button>
    </view>
  </view>
</template>

<script>
import {mapActions, mapMutations, mapState} from 'vuex'
import cookie from '@/utils/store/cookie'
import {login} from '@/utils'
import {getAgree} from "@/api/public";

export default {
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      authorize: false,
      canIUseGetUserProfile: false,
      agreeInfo: {},
      isAgree: false,
      show: false
    }
  },
  computed: {
    ...mapState(['isAuthorization', '$deviceType', 'token']),
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.canIUseGetUserProfile = true
    }
    // // 先校验用户是否授权，如果没有授权，显示授权按钮
    getAgree().then(({data}) => this.agreeInfo = data);
  },
  onHide() {
    this.updateAuthorizationPage(false)
    this.changeAuthorization(false)
  },
  onUnload() {
    this.updateAuthorizationPage(false)
    this.changeAuthorization(false)
  },
  methods: {
    ...mapActions(['changeAuthorization', 'setUserInfo']),
    ...mapMutations(['updateAuthorizationPage']),
    changeAgree(event) {
      this.isAgree = event.detail.value.length > 0
    },
    toLogin() {
      this.$yrouter.push({
        path: '/pages/user/Login/index',
        query: {},
      })
    },
    back() {
      this.$yrouter.switchTab({
        path: '/pages/home/index',
        query: {},
      })
    },
    getUserInfo(data) {
      console.log("auth",data)
      if (!this.isAgree) {
        uni.showToast({
          title: "请先阅读并同意《用户服务协议及隐私政策》",
          icon: "none",
          duration: 5000
        })
        return
      }

      if (data.detail.errMsg == 'getUserInfo:fail auth deny') {
        uni.showToast({
          title: '取消授权',
          icon: 'none',
          duration: 2000,
        })
        return
      }
      uni.showLoading({
        title: '登录中',
      })
      login()
          .then(e => {
            uni.hideLoading()
            this.$yrouter.reLaunch({
              path: cookie.get('redirect').replace(/\ /g, ''),
            })
          })
          .catch(error => {
            uni.hideLoading()
            uni.showToast({
              title: error,
              icon: 'none',
              duration: 2000,
            })
          })
    },
    getUserInfoProfile(data) {
      if (!this.isAgree) {
        uni.showToast({
          title: "请先阅读并同意《用户服务协议及隐私政策》",
          icon: "none",
          duration: 5000
        })
        return
      }

      wx.getUserProfile({
        lang: 'zh_CN',
        desc: '需要获取您的信息用来展示',
        success: res => {
          uni.showLoading({
            title: '登录中',
          })
          login(res)
              .then(e => {
                var redirectUrl = cookie.get('redirect').replace(/\ /g, '');
                //如果已经是授权页，跳转主页
                if (redirectUrl == '/pages/authorization/index') {
                  redirectUrl = '/pages/home/index';
                }

                this.$yrouter.reLaunch({
                  path: redirectUrl,
                })
              })
              .catch(error => {
                uni.showToast({
                  title: error,
                  icon: 'none',
                  duration: 2000,
                })
              })
        },
      })
    },
  },
  mounted() {
    if (wx.getUserProfile) {
      this.canIUseGetUserProfile = true
    }
  },
}
</script>

<style lang="scss">
.pages-auth {
  padding: 148rpx 48rpx;

  .tip-1 {
    font-size: 28rpx;
    line-height: 40rpx;
    color: #333333;
  }

  .tip-2 {
    margin-top: 20rpx;
    font-size: 40rpx;
    line-height: 58rpx;
    color: #333333;
  }

  .wechat {
    margin-top: 80rpx;

    .avatar {
      width: 112rpx;
      height: 112rpx;
      margin-right: 24rpx;
      border-radius: 8rpx;
    }

    .name {
      font-size: 32rpx;
      line-height: 48rpx;
      color: #333333;
    }

    .info {
      margin-top: 28rpx;
      font-size: 24rpx;
      line-height: 34rpx;
      color: #CECECE;
    }

    .select {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .agree-box {
    margin: 200rpx 0 60rpx;
    font-size: 28rpx;
    color: #666;

    .btn-show {
      color: #000;
    }
  }

  .dialog-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .4);
    z-index: 99;

    .dialog-body {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 630rpx;
      height: 70vh;
      box-sizing: border-box;
      padding: 60rpx;
      border-radius: 10rpx;
      background: #fff;
      overflow: hidden;

      .btn-close{
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        width: 28rpx;
        height: 28rpx;
      }

      .content {
        height: 100%;
        overflow-y: auto;
      }

      .title {
        margin: 30rpx auto;
      }
    }
  }

  .btn-box {
    width: 338rpx;
    margin: 0 auto;

    button::after {
      border: none;
    }

    button {
      height: 72rpx;
      font-size: 30rpx;
    }

    .btn-yes {
      background: #FF564A;
      color: #fff;
    }

    .btn-no {
      margin-top: 32rpx;
      background: #eee;
      color: #FF564A;
    }
  }
}
</style>