warm_man/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">
        <!--#ifdef MP-WEIXIN-->
        <u-button
            v-if="!isRead"
            type="success"
            size="normal"
            shape="circle"
            color="#FF9545"
            height="88"
            @click="readTip()"
        >
          <u-text text="手机号快捷登录" color="#fff" size="32" align="center" custom-style="display:inline;"></u-text>
        </u-button>
        <u-button
            v-else-if="privateStatus"
            type="success"
            size="normal"
            @getphonenumber="wxLogin"
            open-type="getPhoneNumber"
            shape="circle"
            color="#FF9545"
            height="88"
        >
          <u-text text="手机号快捷登录" color="#fff" size="32" align="center" custom-style="display:inline;"></u-text>
        </u-button>
        <u-button
            v-else
            type="success"
            size="normal"
            shape="circle"
            color="#FF9545"
            height="88"
            @click="openPopup"
        >
          <u-text text="手机号快捷登录" color="#fff" size="32" align="center" custom-style="display:inline;"></u-text>
        </u-button>
        <!--#endif-->
        <!--#ifdef H5-->
        <u-button
            type="success"
            size="normal"
            shape="circle"
            color="#FF9545"
            height="88"
            @click="peopleCloudLogin"
        >
          <u-text text="快捷登录" color="#fff" size="32" align="center" custom-style="display:inline;"></u-text>
        </u-button>
        <u-button
            type="success"
            size="normal"
            shape="circle"
            color="#FF9545"
            height="88"
            @click="login"
        >
          <u-text text="手机号快捷登录" color="#fff" size="32" align="center" custom-style="display:inline;"></u-text>
        </u-button>
        <!--#endif-->
      </view>
      <!--#ifdef MP-WEIXIN-->
      <view class="privacy-container row" style="align-items: center;">
        <view class="checkbox">
          <u-checkbox :checked="isRead" @change="isRead = !isRead" shape="circle" active-color="#FF9545" icon-size="30rpx" size="40rpx"></u-checkbox>
        </view>
        <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>
      <!--#endif-->
      <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="#FF9545" class="weui-btn agree"
                       @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</u-button>
           </view>
          </view>
        </view>
      </uv-popup>
    </view>
  </view>
</template>

<script>
import {imghost} from '@/config/host.js'
import MzSubsection from '@/components/MzSubsection/Index.vue';
import api from '@/utils/functions.js';
import {appletLogin, cloudLogin, testLogin, userDetail} from "@/api/user";
import {CLOUD_CLIENT_ID, CLOUD_LOGIN_PATH} from "../../config/config";
import {cloud_host} from "../../config/host";

export default {
  components: {
    MzSubsection
  },
  data() {
    return {
      isRead:false,
      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(params) {
    if(params.code){
      cloudLogin({code:params.code}).then(res => {
        if(res.code === 200){
          uni.setStorageSync('token',res.data.token);
          uni.setStorageSync('user',res.data);
          this.$store.commit('userInfo', res.data);
          uni.redirectTo({
            url:'/pages/Index/index'
          })
        }else{
          uni.$u.toast('登录失败');
        }
      });
    }
  },
  computed: {
    api() {
      return api
    },
  },
  methods: {
    readTip(){
      uni.showToast({title:'请同意隐私协议',icon:'error'})
    },
    login(){
      testLogin({
        user_id:1
      }).then((res) => {
        uni.setStorageSync('token',res.data.token);
        userDetail().then((res) => {
          // uni.setStorageSync('token',res.data.token);
          uni.setStorageSync('user',res.data);
          this.$store.commit('userInfo', res.data);
          uni.navigateBack({
            delta:1,
          })
        });
      });
    },
    wxLogin(phoneCode) {
      uni.login({
        success: ((res) => {
          console.log(phoneCode)
          appletLogin({
            code:res.code,
            phone_code:phoneCode.detail.code,
          }).then(res => {
            if(res.code === 200){
              uni.setStorageSync('token',res.data.token);
              uni.setStorageSync('user',res.data);
              this.$store.commit('userInfo', res.data);
              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();
    },
    peopleCloudLogin(){
      window.location.href = `${cloud_host}/oauth/authorize?client_id=${CLOUD_CLIENT_ID}&response_type=code&redirect_uri=${CLOUD_LOGIN_PATH}&scope=read`;
      // console.log(url)
      // uni.redirectTo({
      //   url:url
      // });
    },
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }
  },
  created() {

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

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