|
|
@@ -1,96 +1,79 @@
|
|
|
<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>
|
|
|
+ <view class='authContainer' v-if="clickDom">
|
|
|
+ <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'></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" />
|
|
|
+ <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>
|
|
|
</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
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
+let app = getApp();
|
|
|
+let appEv = app.$vm.$options;
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ shopInfo: {
|
|
|
+ type: Object
|
|
|
+ },
|
|
|
+ isGetTel: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ clickDom: false,
|
|
|
+ agree: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onSoHAuth() {
|
|
|
+ this.clickDom = !this.clickDom
|
|
|
+ },
|
|
|
+ closeAuthCom() {
|
|
|
+ this.$emit('closeAuthCom');
|
|
|
+ },
|
|
|
+ onGotUserInfo(e) {
|
|
|
+ this.$emit('authSuccess');
|
|
|
+ },
|
|
|
+ onGotPhoneNumber(e) {
|
|
|
+ this.$emit('authGetTelSuccess', e);
|
|
|
+ },
|
|
|
+ checkboxChange(e) {
|
|
|
+ this.agree = e.detail.value.includes("agree")
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
-
|
|
|
<style lang="scss">
|
|
|
.transparentDom,
|
|
|
-.authContainer{
|
|
|
+.authContainer {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
@@ -102,14 +85,16 @@
|
|
|
padding: 0;
|
|
|
z-index: 1999999999999999999;
|
|
|
}
|
|
|
-.authContainer{
|
|
|
- background-color: rgba(0,0,0,0.4);
|
|
|
+
|
|
|
+.authContainer {
|
|
|
+ background-color: rgba(0, 0, 0, 0.4);
|
|
|
display: flex;
|
|
|
display: -webkit-flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
-.no-authorize{
|
|
|
- background-color: #fff;
|
|
|
+
|
|
|
+.no-authorize {
|
|
|
+ background-color: #fff;
|
|
|
padding: 0 32rpx 60rpx;
|
|
|
width: 84%;
|
|
|
position: absolute;
|
|
|
@@ -118,7 +103,8 @@
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 20rpx;
|
|
|
}
|
|
|
-.closeIconBtn{
|
|
|
+
|
|
|
+.closeIconBtn {
|
|
|
position: absolute;
|
|
|
top: 24rpx;
|
|
|
right: 24rpx;
|
|
|
@@ -132,7 +118,8 @@
|
|
|
line-height: 40rpx;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
-.shopInfoBox{
|
|
|
+
|
|
|
+.shopInfoBox {
|
|
|
width: 100%;
|
|
|
padding: 96rpx 20rpx 60rpx;
|
|
|
display: flex;
|
|
|
@@ -140,11 +127,12 @@
|
|
|
align-items: center;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
-.shopInfoBox .imgPic{
|
|
|
+
|
|
|
+.shopInfoBox .imgPic {
|
|
|
width: 144rpx;
|
|
|
height: 144rpx;
|
|
|
/* margin-right: 30rpx; */
|
|
|
- box-shadow: 0rpx 4rpx 16rpx rgba(68,169,47,0.2);
|
|
|
+ box-shadow: 0rpx 4rpx 16rpx rgba(68, 169, 47, 0.2);
|
|
|
border-radius: 50%;
|
|
|
overflow: hidden;
|
|
|
flex-grow: 1;
|
|
|
@@ -157,12 +145,14 @@
|
|
|
margin-left: -72rpx;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
-.shopInfoBox .imgPic .img{
|
|
|
+
|
|
|
+.shopInfoBox .imgPic .img {
|
|
|
display: block;
|
|
|
width: 144rpx;
|
|
|
height: 144rpx;
|
|
|
}
|
|
|
-.shopInfoBox .stitle{
|
|
|
+
|
|
|
+.shopInfoBox .stitle {
|
|
|
font-size: 40rpx;
|
|
|
font-weight: 500;
|
|
|
color: #121212;
|
|
|
@@ -171,7 +161,8 @@
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
}
|
|
|
-.no-authorize_title{
|
|
|
+
|
|
|
+.no-authorize_title {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 500;
|
|
|
color: #121212;
|
|
|
@@ -179,17 +170,20 @@
|
|
|
padding-bottom: 12rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
-.no-authorize_text{
|
|
|
+
|
|
|
+.no-authorize_text {
|
|
|
font-size: 24rpx;
|
|
|
color: #999;
|
|
|
line-height: 1.6;
|
|
|
text-align: center;
|
|
|
}
|
|
|
-.btnBar{
|
|
|
+
|
|
|
+.btnBar {
|
|
|
margin-top: 70rpx;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
-.no-authorize_btn{
|
|
|
+
|
|
|
+.no-authorize_btn {
|
|
|
background: #44a92f;
|
|
|
color: #fff;
|
|
|
font-size: 30rpx;
|
|
|
@@ -199,31 +193,37 @@
|
|
|
border-radius: 60rpx;
|
|
|
border: 2rpx solid #44a92f;
|
|
|
}
|
|
|
-.isDisabledBtn{
|
|
|
+
|
|
|
+.isDisabledBtn {
|
|
|
border-color: #ccc;
|
|
|
color: #aaa;
|
|
|
background: #eee;
|
|
|
}
|
|
|
-.unSetBtn{
|
|
|
+
|
|
|
+.unSetBtn {
|
|
|
background: #fff;
|
|
|
color: #44a92f;
|
|
|
}
|
|
|
-.no-authorize_btn::after{
|
|
|
+
|
|
|
+.no-authorize_btn::after {
|
|
|
border: none;
|
|
|
}
|
|
|
-.checkbox-box{
|
|
|
+
|
|
|
+.checkbox-box {
|
|
|
margin-top: 60rpx;
|
|
|
margin-bottom: -20px;
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
}
|
|
|
-.checkbox-box text{
|
|
|
+
|
|
|
+.checkbox-box text {
|
|
|
/* color: #07d; */
|
|
|
/* color: #44A92F; */
|
|
|
color: #44a92f;
|
|
|
}
|
|
|
-.checkbox-box .checkbox .checkboxCom{
|
|
|
+
|
|
|
+.checkbox-box .checkbox .checkboxCom {
|
|
|
transform: scale(0.84);
|
|
|
-webkit-transform: scale(0.84);
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|