yicangzongtai_app_240321/pages/login/index.vue

<template>
	<view class="container-mine">
		<navbar ref="navbar" :config="config"></navbar>
		<view class="top">
			<view class="title">手机号登录</view>
			<view class="tig">首次登录将为您注册</view>
		</view>
		<view class="body">
			<view class="inpBox">
				<image src="/static/czd/phone.png" mode=""></image>
				<input class="uni-input" v-model="mobile" type="number" maxlength="11" placeholder="输入手机号码" />
			</view>
			<view class="btnBox">
				<u-button type="primary" hover-class="hoverClass" @click="login">立即登录</u-button>
			</view>
		</view>
		<view class="more-login-way" v-if="false">
			<u-divider>更多登录方式</u-divider>
			<view class="way-btn">
				<view class="login-way">
					<view class="icon-box"><u-icon name="grid" size="60" color="#4095E5"></u-icon></view>
					<view class="text">宜格服务</view>
				</view>
			</view>
		</view>

		<view class="agreementCls">
			<u-checkbox-group size="26rpx">
				<u-checkbox shape="circle" active-color="#56CBD9" v-model="checked" :name="1">
					我已阅读同意“宜格服务”
				</u-checkbox>
			</u-checkbox-group>
			<text @click="goAgreement('user_protocol')">《服务协议》</text>和<text
				@click="goAgreement('privacy_protocol')">《隐私政策》</text>
		</view>

		<view class="loginBox">
			<u-divider half-width="50">更多登录方式</u-divider>
			<view class="loginBox_b">
				<view @click="wxLogin(0)" v-if="isInstallWx||platform!='ios'">
					<image src="/static/czd/wx_icon.png" mode=""></image>
					<!-- <view>微信</view> -->
				</view>
				<view @click="alipayLogin(1)" v-if="isInstallZfb||platform!='ios'">
					<image src="/static/czd/zfb.png" mode=""></image>
					<!-- <view>支付宝</view> -->
				</view>
				<view @click="ygLogin()"  v-if="isInstallWx||platform!='ios'">
					<image src="/static/czd/yg.png" mode=""></image>
					<!-- <view>宜格服务</view> -->
				</view>
				<view v-if="osVersion >= 13 && platform=='ios'" @click="appleLogin()">
					<image src="/static/czd/iphone_icon.png" mode=""></image>
					<!-- <view>苹果</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp()
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '',
					color: '#fff',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, '#F9F9F9'],
				},
				statusBarHeight: app.globalData.statusBarHeight,
				mobile: '',
				checked: false,
				osVersion: "",
				platform: "",
				isInstallWx:true,//是否安装微信
				isInstallZfb:true,//是否安装支付宝
			}
		},
		onLoad() {
			uni.removeStorageSync('shop')
			// 先判断 系统版本
			uni.getSystemInfo({
				success: (res) => {
					this.osVersion = res.osVersion.split('.')[0]
					this.platform = res.platform;
				}
			})
			this.isInstallWx=plus.runtime.isApplicationExist({pname:'com.tencent.mm',action:'weixin://'});
			this.isInstallZfb=plus.runtime.isApplicationExist({pname:'com.eg.android.AlipayGphone',action:'alipay://'});
		},
		methods: {
			login() {
				if (!this.mobile) {
					return this.$mUtil.toast("请输入手机号")
				} else if (!this.$u.test.mobile(this.mobile)) {
					return this.$mUtil.toast("请输入正确手机号")
				} else if (!this.checked) {
					return this.$mUtil.toast("请阅读并同意相关协议")
				}
				uni.navigateTo({
					url: '/pages/login/code?mobile=' + this.mobile
				})
			},
			goAgreement(val) {
				uni.navigateTo({
					url: "/pages/user/agreement?type=" + val
				})
			},
			// 微信登录
			wxLogin(thirdType) {
				if (!this.checked) {
					return this.$mUtil.toast("请阅读并同意相关协议")
				}
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: (event) => {
						const {
							code
						} = event
						// console.log(event)
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						let param = {
							code: code,
							thirdType: thirdType
						}
						this.loginRe(param)

					},
					fail: (err) => {
						console.log(err)
						// 登录授权失败
						// err.code是错误码
						this.$u.toast('当前环境不支持微信操作!');
					}
				})
			},
			loginRe(param) {
				this.$yghttp.post('/user/login/third', param).then(res => {
					console.log(res)
					if (res.data.isReg) {
						uni.showToast({
							title: '登录成功！',
							icon: 'success',
							duration: 1500
						})
						uni.setStorageSync('apiToken', res.data.token);
						this.getUsrShopInfo()
						uni.switchTab({
							url: '/pages/home'
						})
					} else {
						uni.navigateTo({
							url: "/pages/login/bindPhone?identityCode=" + res.data.identityCode +
								"&thirdType=" + param.thirdType
						})
					}
				})
			},
			// 支付宝登录
			alipayLogin(thirdType) {
				if (!this.checked) {
					return this.$mUtil.toast("请阅读并同意相关协议")
				}
				const AlipayAuth = uni.requireNativePlugin("DHQ-AlipayAuth");
				AlipayAuth.login({
						appId: '2021004128667996', //你在支付宝平台申请的App ID
						scheme: 'ygfwUrlSchemes', // 需要传到支付宝SDK的scheme,注意需要在manifest.json-->App其他常用配置-->UrlSchemes中配置Android和iOS的
						scope: 'auth_user', //默认为auth_user
						init: 'init' //默认传入init
					},
					(res) => {
						console.log('原生授权返回res', res)
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						let code = res.auth_code;
						if(code){
							let param = {
								code: code,
								thirdType: thirdType
							}
							this.loginRe(param)
						}
					})
			},
			// 宜格服务登录
			ygLogin() {
				if (!this.checked) {
					return this.$mUtil.toast("请阅读并同意相关协议")
				}
				this.$openWXminiprogram(null, 1).then(result => {
					this.$yghttp.post('/user/login/yige-login', {
						yigeResult: result.data
					}).then(res => {
						if (res && res.code == 200) {
							uni.showToast({
								title: '登录成功！',
								icon: 'success',
								duration: 1500
							})
							uni.setStorageSync('apiToken', res.data.token);
							this.getUsrShopInfo()
							uni.switchTab({
								url: '/pages/home'
							})
						}
					})
				})
				// return false
				// plus.share.getServices(
				// 		res => {
				// 			let sweixin = '';
				// 			for (var i = 0; i < res.length; i++) {
				// 				let t = res[i];
				// 				if (t.id == 'weixin') {
				// 					sweixin = t;
				// 				}
				// 			}
				// 			if (sweixin) {
				// 				sweixin.launchMiniProgram({
				// 						id:"gh_9b86ebba08b0", // 要跳转小程序的原始ID
				// 						type: 2, // 微信小程序版本类型可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
				// 						 path: `/pages/authLogin/authLogin?appName=宜格服务`
				// 					},
				// 					// 目标小程序点击返回App后执行的回调，在此接收微信小程序传递的参数
				// 					res2 => {
				// 						console.log(typeof res2, res2)
				// 						// res2是微信小程序传递回来的参数 类型为string 需转化为js对象使用
				// 						let result = JSON.parse(res2)
				// 						// uni.navigateTo({
				// 						// 	url: "/pages/login/bindPhone?yigeResult="+result.data
				// 						// })
				// 						this.$yghttp.post('/user/login/yige-login',{yigeResult:result.data}).then(res=>{
				// 							if (res && res.code == 200) {
				// 								uni.showToast({
				// 									title: '登录成功！',
				// 									icon: 'success',
				// 									duration: 1500
				// 								})
				// 								uni.setStorageSync('apiToken', res.data.token);
				// 								uni.switchTab({
				// 									url: '/pages/home'
				// 								})
				// 							} 
				// 						})

				// 						// 拿到参数后执行你需要的逻辑
				// 					},
				// 					err2 => {
				// 						console.log(err2)
				// 					}
				// 				);
				// 			} else {
				//                 // 没有获取到微信分享服务
				// 				uni.showToast({
				// 					icon: 'none',
				// 					title: '当前环境不支持微信操作!'
				// 				})
				// 			}
				// 		},
				// 		err => {
				//             // 获取分享服务列表失败
				// 			console.log(err)
				// 		}
				// 	)
			},
			// 苹果登录
			appleLogin() {
				if (!this.checked) {
					return this.$mUtil.toast("请阅读并同意相关协议")
				}
				// 判断是 iOS13版本
				uni.login({
					provider: 'apple',
					success: (loginRes) => {
						uni.getUserInfo({
							provider: 'apple',
							success: (userInfoRes) => {
								let param = {
									code: userInfoRes.userInfo.identityToken,
									thirdType: 3
								}
								this.loginRe(param)
							},
							fail: (err) => {
								console.log(err)
							}
						})
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},

			// 获取商城用户店铺信息 商城接口
			getUsrShopInfo() {
				this.$http.get('/yxt/shop/loadSubShopByUserId').then(res => {
					if (res && res.code == 200) {
						uni.setStorageSync("shop", res.shop);
					}
				})
			},
			  onBackPress() {
			    uni.switchTab({
			      url: "/pages/home"
			    })
				// uni.navigateBack({
				// 	delta: 2
				// })
			    return true
			  },
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	/deep/ .hx-navbar__icon {
		color: #303133 !important;
	}

	/deep/.u-divider {
		background-color: #F9F9F9 !important;
	}

	.lgoin-nav {
		width: 100%;
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 0;
	}

	.top {
		text-align: center;
		padding: 50rpx 0 100rpx;
		font-size: 28rpx;

		.title {
			font-size: 60rpx;
			margin-bottom: 10rpx;
			font-weight: 700;
		}

		.tig {
			font-size: 30rpx;
		}
	}

	.body {
		margin: auto;
		width: 615rpx;
		margin-bottom: 30rpx;

		.inpBox {
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			display: flex;
		}

		image {
			width: 36rpx;
			height: 44rpx;
			margin-right: 30rpx;
		}

		.uni-input {
			height: 40rpx;

			.uni-input-placeholder {
				color: #BEBEBE;
			}
		}

		.login-btn {
			background-color: #4095E5;
			color: #fff;
			margin-top: 100rpx;
		}
	}

	.more-login-way {
		.way-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;

			.login-way {
				display: flex;
				flex-direction: column;
				align-items: center;

				.icon-box {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
					border: 1rpx solid #EFEFEF;
					border-radius: 50%;
				}

				.text {
					color: #101010;
				}
			}
		}
	}

	.agreementCls {
		margin: auto;
		width: 615rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		/deep/ .u-checkbox__label {
			margin-right: 0rpx;
			font-size: 26rpx;
		}

		text {
			color: #56CBD9;
		}
	}

	.loginBox {
		width: 100%;
		position: absolute;
		bottom: 100rpx;

		.loginBox_b {
			width: 615rpx;
			display: flex;
			justify-content: space-around;
			margin: auto;
			margin-top: 60rpx;


			>view {
				text-align: center;

				image {
					width: 82rpx;
					height: 82rpx;
					border-radius: 50%;
				}

				>view {
					font-size: 26rpx;
					color: #333333;
				}
			}
		}
	}

	.btnBox {
		width: 100%;
		margin-top: 60rpx;
	}

	.u-btn {
		width: 615rpx;
		border-radius: 10rpx;
		background: rgb(64, 149, 229);
		font-size: 30rpx;
		font-weight: 700;
		margin: auto;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		background: linear-gradient(6deg, #56d9ee 0%, #3ebcd0 100%) #3c66d9;
	}

	.hoverClass {
		background: linear-gradient(6deg, #56d9ee 0%, #3ebcd0 100%) #3c66d9;
	}
</style>