pet_uni/pages/Login/index.vue

<template>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#ffffff"
  ></u-navbar>

  <view class="wallpaper-container row">
    <view class="login-container row">
     <view class="login-logo-container row">
       <view class="logo">
         <u-image mode="widthFix" width="188" height="188" :src="staticImage.loginLogo"></u-image>
       </view>
       <view class="login-title">
         <u-text text="欢迎登录宠物喂养" color="#020B18" size="36"></u-text>
         <view class="title-background"></view>
       </view>
     </view>
      <view class="login-button-container">
        <u-button
            v-if="privateStatus"
            type="success"
            size="normal"
            @getphonenumber="wxLogin"
            open-type="getPhoneNumber"
            shape="circle"
            color="#45C55E"
            height="88"
        >
<!--          <u-icon name="weixin-fill" size="50" color="#fff" class="weixin-icon"></u-icon>-->
          <u-text text="登录" color="#fff" size="32" align="center" prefix-icon="weixin-fill" :icon-style="{fontSize:'50rpx',color:'#ffffff',marginRight:'5rpx'}" custom-style="display:inline;"></u-text>
        </u-button>
        <u-button
            v-else
            type="success"
            size="normal"
            shape="circle"
            color="#45C55E"
            height="88"
            @click="openPopup"
        >
<!--          <u-icon name="weixin-fill" size="50" color="#fff" class="weixin-icon"></u-icon>-->
          <u-text text="登录" color="#fff" size="32" align="center" prefix-icon="weixin-fill" :icon-style="{fontSize:'50rpx',color:'#ffffff',marginRight:'5rpx'}" custom-style="display:inline;"></u-text>
        </u-button>
      </view>
      <view class="privacy-container row">
        <view class="text">
          <u-text text="登录/注册即视为你同意" color="#999999" size="24"></u-text>
        </view>
        <view class="text">
          <u-text text="《小程序隐私保护指引》" color="#178AF2" size="24" @click="openPrivacyContract"></u-text>
        </view>
<!--        <view class="text">-->
<!--          <u-text text="和" color="#999999" size="24"></u-text>-->
<!--        </view>-->
<!--        <view class="text">-->
<!--          <u-text text="《隐私政策》" color="#178AF2" size="24"></u-text>-->
<!--        </view>-->
      </view>
<!--      <u-button-->
<!--      type="success"-->
<!--      size="large"-->
<!--      @click="login"-->
<!--      >-->
<!--        <u-icon name="weixin-circle-fill" size="50" color="#fff" class="weixin-icon"></u-icon>-->
<!--        登录-->
<!--      </u-button>-->
      <uv-popup ref="popup" type="center" :is-mask-click="false" round="20" mode="bottom">
        <view class="popup-box" style="padding:40rpx">
          <view style="padding:20rpx 0;">
            <u-text bold text="用户隐私保护提示" color="#020b18" size="32"></u-text>
          </view>
          <view class="row">
            <view class="">
              <u-text color="#020b18" line-height="50" text="用户隐私保护提示" size="28"></u-text>
            </view>
            <view class="">
              <u-text color="#178AF2" size="28" line-height="50" text="《小程序隐私保护指引》" @click="openPrivacyContract"></u-text>
            </view>
            <view class="">
              <u-text color="#020b18" size="28" line-height="50" text="当您点击同意并开始使用产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法更好的体验产品。"></u-text>
            </view>



          </view>
          <view class="row" style="padding:30rpx;">
            <view class="col-6" style="padding:15rpx;">
              <u-button @click="handleDisagree">拒绝</u-button>
            </view>

           <view class="col-6" style="padding:15rpx;">
             <u-button id="agree-btn" open-type="agreePrivacyAuthorization" color="#45C55E" class="weui-btn agree"
                       @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</u-button>
           </view>
          </view>
        </view>
      </uv-popup>
    </view>
  </view>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import api from '@/utils/functions.js';
import {appletLogin, testLogin, userDetail, userExtends} from "@/api/user";
import {UserCache} from "@/config/config";

export default {
  data() {
    return {
      title: '  登录',
      loading: true,
      staticImage: {
        bg: imghost + '/BG.png',
        newIcon: imghost + '/new-icon.png',
        loginLogo: imghost + '/login-logo.png',
      },
      isTop: false,
      fileList1:[],
      userinfo:{},
      privateStatus:false
    }
  },
  onLoad() {

  },
  computed: {
    api() {
      return api
    },
  },
  methods: {
    login(){
      testLogin({
        user_id:1
      }).then((res) => {
        uni.setStorageSync('token',res.data.token);
        userDetail().then((res) => {
          this.$store.commit('userInfo', UserCache.setAndReturn(res.data));
        });
        userExtends().then((res) => {
          this.$store.commit('userExtends', UserCache.extSetAndReturn(res.data));
        });
      });
    },
    wxLogin(phoneCode) {
      uni.login({
        success: ((res) => {
          appletLogin(res.code).then(res => {
            if(res.code === 200){
              uni.setStorageSync('token',res.data.token);
              this.$store.commit('userInfo', UserCache.setAndReturn(res.data.user));
              uni.navigateBack({
                delta:1,
              })
            }else{
              uni.$u.toast('登录失败');
            }
          }).catch(err => {
            uni.$u.toast('服务器错误');
          })
        })
      });
    },
    openPrivacyContract() {
      uni.openPrivacyContract({});
    },
    handleAgreePrivacyAuthorization() {
      this.$refs.popup.close();
    },
    openPopup(){
      this.$refs.popup.open();
    },
    handleDisagree(){
      this.$refs.popup.close();
    }
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }
  },
  created() {

  },
  mounted() {
    uni.getPrivacySetting({
      success: res => {
        console.log("是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName)
        if (res.needAuthorization) {
          this.privateStatus = false;
        } else {
          this.privateStatus = true;
        }
      },
      fail: () => {
      },
      complete: () => {},
    })
  },
}
</script>

<style lang="scss">
@import './components/index.scss';
</style>