zheng_xie_ui/components/toptab/phonebtn.vue

<template>
  <view>
	  <view class="box_hei" @click="getClose" v-if="type">
	  	<view @click.stop="btns"  class="hei_box">
	  		<view class="box_top">
	  			<view class="box_title">
	  				<view>
	  					智能校管家 申请使用
	  				</view>
	  			</view>
	  			<view class="box_nameq">你的手机号码</view>
	  		</view>
	  		<!-- <view class="boxs"></view> -->
	  		<view class="box_btns">
	  			<view @click="getClose" class="box_btn box_btn1">拒绝</view>
	  			<button class="box_btn box_btn2" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">允许</button>
	  		</view>
	  	</view>
	  </view>
  </view>
</template>

<script>
	// import tabSearch from "@/components/toptab/search.vue"
	import {getweChatOpenid} from "@/api/login.js"
  export default {
	  props:{
		type:{
			type:Boolean,
			default () {
				return true
			}
		},
	  },
	data(){
		return{
			sucimg:require("@/static/images/mine/success.png") 
		}
	},
	methods:{
		getClose(){
			this.$emit("getClose")
		},
		btns(){
			
		},
		async getPhoneNumber(e){
			const {iv,encryptedData} = e.detail;
			var that=this;
			uni.login({
			    provider: 'weixin',
			    success: (res) => {
			        // 获取用户信息
					if(res.code) {
						var params={
							iv: iv,
							encryptedData: encryptedData,
							code : res.code,
						}
						// 登录还是注册
						that.$emit("getPhoneNumber",params)
						
					}
			    }
			})			
		}, 
	},
	onLoad: function() {
    }
  }
</script>

<style lang="scss" scoped>
.box_hei{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.8);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3;
		.hei_box{
			background: #fff;
			border-radius:22upx 22upx 0 0;
			height: 440upx;
			padding: 52upx 28upx 104upx;
			position: absolute;
			bottom:0;
			width: 100%;
			box-sizing: border-box;
			.box_top{
				padding: 0 18upx 62upx;
				.box_title{
					display: flex;
					justify-content: space-between;
					font-size: 30upx;
					margin-bottom: 30upx;
					view{
						display: flex;
						align-items: center;
						color: #333333;
					}
					.img{
						margin-right: 14upx;
						width: 180upx;
						height: 48upx;
					}
					.imgs{
						width: 40upx;
						height: 40upx;
					}
				}
				.box_nameq{
					color: #333333;
					font-size: 44upx;
					font-weight: bold;
				}
			}
			.box_phone{
				height: 106upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28upx;
				color: #A6A6A6;
				border-bottom: 1upx solid #EBEBEB;
				border-top: 1upx solid #EBEBEB;
				view{
					display: flex;
					align-items: center;
				}
				.img{
					width: 26upx;
					height: 22upx;
				}
				span{
					color: #333333;
					font-size: 32upx;
					padding-right: 18upx;
					font-weight: bold;
				}
			}
			.box_qita{
				height: 106upx;
				font-size: 28upx;
				color: #7CA4FC;
				line-height: 106upx;
			}
			.boxs{
				height: 50upx;
			}
			.box_btns{
				margin-top: 10upx;
				display: flex;
				justify-content: space-between;
				.box_btn{
					width: 324upx;
					height: 82upx;
					font-size: 32upx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 4upx;
				}
				.box_btn1{
					background: #F3F3F3;
					color: #33B925;
				}
				.box_btn2{
					background: #37962B;
					color: #FFFFFF;
				}
			}
		}
	}
</style>