Client-Teapay/src/components/authorize-module/index.vue

<template>
	<view>
		<view class="transparentDom" v-if="clickDom" @tap="onSoHAuth"></view>
		<view class='authContainer' v-else>
			<view class='no-authorize'>
				<view class='closeIconBtn' @tap='onSoHAuth'>×</view>
				<view class='shopInfoBox'>
					<view class='imgPic'><image class='img' mode='widthFix' :src='shopInfo.shop_image || "/static/logo.jpg"'></image></view>
					<view class='stitle'>{{isGetTel ? '欢迎来到 - '+shopInfo.shop_name:'您还未登录'}}</view>
				</view>
				<view class='no-authorize_title'>为提更供优质的服务，需要获取以下信息</view>
				<view class='no-authorize_text'>
				   <text>·</text> {{isGetTel ? '获得你微信绑定的手机号码':'获得你的公开信息 (昵称、头像、地区及性别)'}}
				</view>
		
				<div class="checkbox-box flex_r flex_ac" v-if='!isGetTel'>
					<checkbox-group @change="checkboxChange" class="flex_r flex_ac">
						<label class="checkbox flex_r flex_ac">
							<checkbox class='checkboxCom' value="agree" checked />
							<view>我同意</view>
						</label>
						<span @click="goto('/pages/agreement/index',{tit:'隐私协议',type:26})" class="hover_a">《用户服务协议》</span>
                        <text>和</text>
						<span @click="goto('/pages/agreement/index',{tit:'隐私协议',type:27})" class="hover_a">《隐私协议》</span>
					</checkbox-group>
				</div>
				
				<view class="btnBar flex_r flex_ac flex_jb">
					<button class='no-authorize_btn unSetBtn' @tap="onSoHAuth">{{isGetTel ? "暂不授权" : "暂不登录"}}</button>
					<button open-type="getPhoneNumber" class='no-authorize_btn' @getphonenumber="onGotPhoneNumber" lang="zh_CN">立即登录</button>
					<!-- <button open-type="getUserInfo" class='no-authorize_btn' @getuserinfo="onGotUserInfo" lang="zh_CN" v-else>获取用户信息</button> -->
					<!-- <button open-type="getUserInfo" class='no-authorize_btn' @tap="onGotUserInfo" lang="zh_CN">立即登录</button> -->
                    <!-- <button  @tap="getUserProfile" v-else> 获取头像昵称 </button> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	
	//#ifdef MP
	var appEv = app.$vm.$options;
	//#endif
	
	//#ifdef H5
	var appEv = app.$options;
	//#endif
	export default {
		props:{
			shopInfo:{
			    type: Object
			},
			isGetTel: {
			    type: Boolean,
			    observer: function (res) {
			        if(res){
			            // this.clickDom = false
			        }
			    }
			},
		},
		data() {
			return{
				isDisabled: false,
				clickDom: true
			}
		},
		methods:{
			onSoHAuth(){
			    this.clickDom = !this.clickDom
			},
			closeAuthCom(){
			    this.$emit('closeAuthCom');
			},
			onGotUserInfo (e) {
			    this.$emit('authSuccess');
			},
			onGotPhoneNumber(e){
                this.$emit('authGetTelSuccess', e);
			},
			checkboxChange(e) {
			    var value = e.detail.value;
			    this.isDisabled = value.length == 0
			},
		}
	}
</script>

<style lang="scss">
.transparentDom,
.authContainer{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 1999999999999999999;
}
.authContainer{
    background-color: rgba(0,0,0,0.4);
    display: flex;
    display: -webkit-flex;
    align-items: center;
}
.no-authorize{
    background-color: #fff; 
    padding: 0 32rpx 60rpx;
    width: 84%;
    position: absolute;
    left: 8%;
    right: 8%;
    box-sizing: border-box;
    border-radius: 20rpx;
}
.closeIconBtn{
    position: absolute;
    top: 24rpx;
    right: 24rpx;
    border: 1px solid #808080;
    color: #303030;
    font-size: 18px;
    height: 44rpx;
    width: 44rpx;
    text-align: center;
    border-radius: 50%;
    line-height: 40rpx;
    font-weight: 600;
}
.shopInfoBox{
    width: 100%;
    padding: 96rpx 20rpx 60rpx;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    box-sizing: border-box;
}
.shopInfoBox .imgPic{
    width: 144rpx;
    height: 144rpx;
    /* margin-right: 30rpx; */
    box-shadow: 0rpx 4rpx 16rpx rgba(68,169,47,0.2);
    border-radius: 50%;
    overflow: hidden;
    flex-grow: 1;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    position: absolute;
    left: 50%;
    top: -72rpx;
    margin-left: -72rpx;
    background-color: #fff;
}
.shopInfoBox .imgPic .img{
    display: block;
    width: 144rpx;
    height: 144rpx;
}
.shopInfoBox .stitle{
    font-size: 40rpx;
    font-weight: 500;
    color: #121212;
    flex-grow: 0;
    /* width: calc(100% - 110rpx); */
    width: 100%;
    text-align: center;
}
.no-authorize_title{
    font-size: 30rpx;
    font-weight: 500;
    color: #121212;
    line-height: 1.5;
    padding-bottom: 12rpx;
    text-align: center;
}
.no-authorize_text{
    font-size: 24rpx;
    color: #999;
    line-height: 1.6;
    text-align: center;
}
.btnBar{
    margin-top: 70rpx;
    overflow: hidden;
}
.no-authorize_btn{
    background: #44a92f;
    color: #fff;
    font-size: 30rpx;
    min-width: calc(50% - 12rpx);
    box-sizing: border-box;
    margin: unset;
    border-radius: 60rpx;
    border: 2rpx solid #44a92f;
}
.isDisabledBtn{
    border-color: #ccc;
    color: #aaa;
    background: #eee;
}
.unSetBtn{
    background: #fff;
    color: #44a92f;
}
.no-authorize_btn::after{
    border: none;
}
.checkbox-box{
    margin-top: 60rpx;
    margin-bottom: -20px;
    font-size: 28rpx;

}
.checkbox-box text{
    /* color: #07d; */
    /* color: #44A92F; */
    color: #44a92f;
}
.checkbox-box .checkbox .checkboxCom{
    transform: scale(0.84);
    -webkit-transform: scale(0.84);
}
</style>