zh_order_food_xcx/pages/login/index.vue

<template>
  <view class="permission">
    <Nav :leftShow='false' title="君子校园"></Nav>
    <view class="user-permission">
     <view class="head">
		  <view class="head-button" >				
			<image src="@/static/img/logo/logo.png" class="head-img" mode=""></image>
			<view class="head-text">君子校园</view>
		  </view>
      </view>
	  
	  <view class="hint-box">
		  <view class="hint-title">该程序将获取以下授权：</view>
		  <view class="hint-info">获取你的公开信息（昵称，头像等）</view>
		  <view class="hint-info">获取你的小程序唯一标示用于账户授权登陆</view>
		</view>
	  
	  <view class="hint">
	  		<view class="hint-left-circle" @click.stop="isFlag = !isFlag">
	  			<view v-if="!isFlag" class="hint-circle"></view>
	  			<image v-else  class="hint-img" src="@/static/img/common/y-select.png" mode=""></image>
	  		</view>
	  		<view class="hint-text-1" @click.stop="isFlag = !isFlag">我已阅读并同意</view>
	  		<view class="hint-text-2" @click="isPop = true;html = member_agreement">《用户服务》</view>
			<view class="hint-text-2" @click="isPop = true;html = privacy_protocol">《隐私协议》</view>
	  </view>
	  
	  
      <view class="button">
        <view class="common permission-login" @click="login">微信授权登录</view>
        <view class="common permission-cancel" @click="noLogin">暂不登录</view>
      </view>
    </view>
	
	
	<view v-if="isPop" class="pop-view">
		<view class="pop-view-box">
			<view class="pop-info" v-html="html"></view>
			<view class="pop-botton">
				<view style="background-color: #3169FA;color: white;" class=" " @click="setCheck(1)">确定</view>
				<view style="color: #3169FA;" class="" @click="setCheck()">取消</view>
			</view>
		</view>
	</view>
  </view>
</template>

<script>
import tools from "@/service/tools";
import { appletLogin } from "@/api/member";
import {getAgreement} from "@/api/common.js";

export default {
  data() {
    return {
		isFlag: false,
		isAjax: false,
		
		from: {
			code: "",
		},
		isPop:false,
		html:'',
		member_agreement:'',//用户协议
		privacy_protocol:'',//隐私协议
    };
  },
  onLoad() {
    
  },
  mounted() {
  	this.getPrivacyInfo()
  },
  methods: {
	getPrivacyInfo(){
		getAgreement().then((res)=>{
			if(res.code === 1){
				this.member_agreement = res.data.member_agreement;
				this.privacy_protocol = res.data.privacy_protocol;
			}
		})
	},
	
	setCheck(type){
		if(type === 1){
			this.isFlag = false
		}
		this.isPop = false
	},

    login() {
	  if(!this.isFlag){
		return tools.error("请先勾选协议");
	  }
      if (this.isAjax) {
        return false;
      }
      this.isAjax = true;
	  
	  uni.login({
	    provider: "weixin",
	    success: (loginRes) => {
		  this.from.code = loginRes.code;
		  this.getUserInfo();
	    },
	    fail: (loginRes) => {
	      this.isAjax = false;
	      tools.error("获取授权信息失败");
	    },
	  });
    },
    noLogin() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    async getUserInfo() {
      const res = await appletLogin(this.from);
      if (res.code == 1) {
       uni.setStorageSync('token',res.data.token)
	   uni.setStorageSync('m_id',res.data.m_id)
		tools.success("授权成功");
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/index/index",
          });
        }, 1000); 
      } else {
        this.isAjax = false;
        tools.error(res.msg);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.permission {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  position: relative;
   
   .hint {
   	margin-top: 20rpx;
   	display: flex;
   	height: 34rpx;
   	.hint-left-circle{
   		width: 32rpx;
   		height: 32rpx;
   		margin-right: 18rpx;
   		.hint-circle{
   			width: 30rpx;
   			height: 30rpx;
   			border-radius: 50%;
   			background-color: #fff;
   			border: 2rpx solid #D9D9D9;
   		}
   		.hint-img{
   			width: 32rpx;
   			height: 32rpx;
   			border-radius: 50%;
   		}
   	}
   	.hint-text-1,.hint-text-2{
   		font-size: 24rpx;
   		font-weight: 400;
   	}
   	.hint-text-1{
   		color: #999999;
   	}
   	.hint-text-2{
   		color: #ED301D;
   	}
   }
   
  .hint-box {
          margin-top: 140rpx;
          margin-bottom: 20rpx;
  
          .hint-title {
            font-size: 28rpx;
          }
  
          .hint-info {
            font-size: 24rpx;
            color: #6f6f6f;
            margin-top: 12rpx;
          }
        }
  
  .pop-view{
  	width: 100%;
  	height: 100vh;
  	position: absolute;
  	top:0;
  	left: 0;
  	background: rgba(0, 0, 0, 0.5);
  	.pop-view-box{
		display: flex;
		flex-direction: column;
		
  		margin: 400rpx auto;
  		width: 80vw;
  		height: 50vh;
  		overflow: scroll;
  		background-color: #fff;
  		border-radius: 10rpx;
  		box-sizing: border-box;
  		padding: 20rpx 40rpx;
  		.pop-info{
			flex: 1;
			overflow: auto;
		}
  		.pop-botton{
  			display: flex;
  			justify-content: space-between;
  			margin-top: 20rpx;
  			box-sizing: border-box;
  			padding: 0 130rpx;
  			view{
  				width: 100rpx;
  				height: 50rpx;
  				line-height: 50rpx;
  				text-align: center;
  				font-size: 30rpx;
  				border:2rpx solid #3169FA;
  				border-radius: 10rpx;
  				margin: 0 10rpx;
  			}
  		}
  	}
  }
  
  
  .user-permission {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 36rpx;
    box-sizing: border-box;
	.head {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  button::after{
		  border-color: #fff !important;
	  }
		.head-button{
			background-color: #fff;
			padding: 0;
		}
		.head-text{
			text-align: center;
			margin-top: 16rpx;
			font-weight: 400;
			color: #333333;
			font-size: 28rpx;
		}
	  .head-img {
	    width: 120rpx;
	    height: 120rpx;
	    border-radius: 50%;
		margin: 0 auto;
	  }
	}
	.user-name-view{
		display: flex;
		margin-top: 100rpx;
		.user-name{
			font-weight: 400;
			color: #333333;
			font-size: 32rpx;
		}
		.user-input{
			width: 568rpx;
			border-bottom: 1rpx solid #D9D9D9;
			font-size: 32rpx;
			padding-bottom: 16rpx;
		}
	}
	
	.button {
	  margin-top: 60rpx;
	  .common {
	    width: 100%;
	    height: 88rpx;
	    line-height: 88rpx;
	    text-align: center;
	    border-radius: 200rpx;
	  }
	  .permission-login {
	    background: #41ABF5;
	    color: #fff;
	    &:active {
	      background-color: #41ABF5;
	    }
	  }
	  .permission-cancel {
	    margin-top: 40rpx;
	    background: rgb(247, 247, 247);
	    &:active {
	      background-color: rgb(238, 238, 238);
	    }
	  }
	}
  }
}
</style>