tire_parts_shop_applets/pages/login/login.vue

<template>
	<view>
		<view class="login-view">
			<image :src="logo" class="logo" mode="widthFix"></image>
			<view class="t-login">
				<u-button type="primary" class="custom-style" shape="circle" open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber" color="linear-gradient(0deg, #FD5003 0%, #FBA680 100%)"
					:ripple="true">
					授权手机号登录
				</u-button>
			</view>
		</view>
		<div style="margin-top: 20rpx;display: flex;justify-content: center;">
			<view>
				<u-checkbox-group v-model="checkboxValue1" placement="column">
				    <u-checkbox :customStyle="{marginBottom: '8px'}" ></u-checkbox>
				</u-checkbox-group>
			</view>
			<view>
				<text>我已阅读</text>
				<text style="color: #73a8fc;" @click="tiaozhuanxieyi">《 用户协议 》</text>
			</view>
		</div>
		<view style="position:absolute; bottom:20rpx;font-size: 20rpx;width: 100%;text-align: center;z-index: -1;">
			<image src="/static/images/login/bottom.png" style="
				display: block;
				width: 60%;
				height: auto;
				margin: 0 auto 10rpx;" mode="widthFix"></image>
			青岛途宝软件开发有限公司提供技术支持
		</view>
	</view>
</template>
<script>
	import md5 from '@/utils/md5.js'
	export default {
		data() {
			return {
				phone: '', //手机号码
				pwd: '', //密码
				// phone: '13021669111', //手机号码18669858069
				// pwd: '123456', //密码
				checked: false,
				lifeData: {},
				logo: "/static/images/logo/logo.png",
				checkboxValue1:[]
			}
		},
		onShow() {},
		methods: {
			// 协议跳转
			tiaozhuanxieyi(){
				uni.$u.route('pages/login/xieyi')
			},
			zhuangtao(type){
				this.checkboxValue1 = [""]
			},
			change(e) {
				this.checked = !this.checked
			},
			//当前登录按钮操作
			getPhoneNumber(e) {
				let this_ = this
				if(this.checkboxValue1.length == 0) return uni.showToast({icon: 'none',title: '请勾选用户协议',position: "bottom",mask: true})
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					wx.login({
						success(res) {
							if (res.code) {
								wx.getUserInfo({
									success: function(rest) {
										this_.$u.api.tokenTwo({
											telCode: e.detail.code,
											loginCode: res.code,
											iv: rest.iv,
											encryptedData: rest.encryptedData,
											applets_id: uni.getAccountInfoSync().miniProgram.appId
										}).then(rest => {
											uni.showLoading({
												title: '登录中',
												mask: true
											});
											this_.$u.api.empowerToken({
												username: rest.data.phoneNumber,
												union_id: rest.data.unionid,
												open_id: rest.data.openid,
												applets_id: uni.getAccountInfoSync().miniProgram.appId,
												password: md5('123456')
											}).then(data => {
												uni.hideLoading();
												uni.showToast({
													icon: 'none',
													title: '登录成功',
													position: "bottom",
													mask: true
												})
												setTimeout(function() {
													this_.$u.func.login(data)
												}, 1000);
											}).catch(err=>{
												uni.hideLoading();
												uni.showToast({
													icon: 'none',
													title: err.error_description,
													position: "bottom",
													mask: true
												})
											})
										})
									},
									fail: res => {
										uni.showToast({
											icon: 'none',
											title: '已拒绝授权,请重新授权',
											position: "bottom"
										})
									}
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: res.errMsg,
									position: "bottom"
								})
							}
						}
					})
				} else if (e.detail.errMsg == 'getPhoneNumber:fail no permission') {
					uni.showToast({
						icon: 'none',
						title: '微信认证过期',
						position: "bottom"
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '已拒绝授权',
						position: "bottom"
					})
				}
			},
		}
	};
</script>
<style lang="scss" scoped>
	.custom-style {
		color: #3ab2f7;
		margin-top: 140rpx;
		box-shadow: 2px 5px 10px 1px rgba(43, 117, 250, 0.3);
	}

	.txt {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.img-a {
		width: 100%;
		height: 400rpx;
	}

	.logo {
		display: block;
		width: 281rpx;
		height: auto;
		margin: 35% auto;
	}

	.reg {
		font-size: 28rpx;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		font-weight: bold;
		background: #f5f6fa;
		color: #000000;
		text-align: center;
		margin-top: 30rpx;
	}

	.login-view {
		width: 100%;
	}

	.t-login {
		width: 600rpx;
		margin: 0 auto;
		font-size: 28rpx;
		margin-top: 80rpx;
	}

	.t-login button {
		font-size: 28rpx;
		background: #2796f2;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		font-weight: bold;
	}

	.t-login input {
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		border-bottom: 1px solid #e9e9e9;
		font-size: 28rpx;
	}

	.t-login .t-a {
		position: relative;
	}

	.t-b {
		text-align: left;
		font-size: 42rpx;
		color: #000;
		padding: 130rpx 0 0 70rpx;
		font-weight: bold;
		line-height: 70rpx;
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0;
	}

	.t-login .t-g {
		float: left;
		width: 50%;
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 150rpx 0 0 0;
		color: #666;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #aeaeae;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}
</style>