H5-Merchant/pages/user/login/index.vue

<template>
	<view class="login">
		<view class="login_header">
			<view class="login_header_top">
				<image src="https://cdn.bjtdba.com/vod/image/2024-04-12/20240412151953641.png" mode="widthFix"></image>
			</view>
			<!-- <view class="login_header_botom">
				<image src="https://cdn.bjtdba.com/vod/image/2022-08-09/20220809135451815.png" mode="widthFix"></image>
			</view> -->
		</view>
		<view class="input-home">
			<view class="input">
				<input placeholder="请输入手机号" type="number" maxlength="11" focus="true"
					placeholder-style="color:#9E9E9E;font-size:30rpx" v-model="form.phone" @input="inputphone">
				<view class="input_code">
					<span v-show="show" @click="getCode"
						　:style="form.phone.length==11?'color:#1F7CFF':'color:#9E9E9E'">获取验证码</span>
					<span v-show="!show" class="count" style="color:#9E9E9E">重新发送({{count}}S)</span>
				</view>
			</view>
			<view class="input">
				<input type="number" placeholder="请输入验证码" maxlength="4"
					placeholder-style="color:#9E9E9E;font-size:30rpx;" v-model="form.sms_code" @input="inputcode">
			</view>
		</view>
		<view class="login-singn" @click="login" :style="form.sms_code.length == 4 ? 'background-color:#1F7CFF':'background-color:rgba(31, 124, 255, 0.3)'">
			<view class="login-singn-text" :style="form.sms_code.length == 4 ? 'color:#FFF':'color: #333'">
				登录
			</view>
		</view>
		<view class="bottom-index">
			<view class="bottom-index-in">
				<image src="https://cdn.bjtdba.com/vod/image/2022-08-09/20220809155152572.png" v-if="is_wei"
					@click="gou" mode="widthFix"></image>
				<image src="https://cdn.bjtdba.com/vod/image/2022-08-09/20220809155125568.png" v-if="is_yes"
					@click="gou" mode="widthFix"></image>
			</view>
			<view class="bottom-index-ri">
				我已经阅读并同意<span style="color: #1f7cff" @click="xieyi()">《注册协议》</span >、<span style="color: #1f7cff" @click="yincang()">《隐私协议》</span>、<span style="color: #1f7cff" @click="ruzhuxieyi()">《商家入驻协议》</span>
			</view>
		</view>
		
		<view class="unLogin-singn" @click="unLogin">
			<view class="login-singn-text">
				暂不登录
			</view>
		</view>
		
		
		<!-- #ifdef MP-WEIXIN -->
			<ws-wx-privacy id="privacy-popup"></ws-wx-privacy>
		<!-- #endif -->


	</view>

</template>

<script>
	import {
		userPhoneLogOnCode,
		userPhoneLogOn,
		selectMerchant,
		queryStoreBranch,
		getImUser
	} from '@/commit/api.js'
	import emHandleReconnect from '@/EaseIM/utils/emHandleReconnect'; 
	import { emConnect,emUserInfos } from '@/EaseIM/emApis';
	const { updateUserInfosFromServer } = emUserInfos();
	const { loginWithPassword } = emConnect();
	import wxPrivacy from '@/uni_modules/ws-wx-privacy/components/ws-wx-privacy/ws-wx-privacy.vue'
	export default {
		data() {
			return {
				show: true,
				count: '',
				timer: null,
				is_wei: true,
				is_yes: false,
				form: {
					phone: uni.getStorageSync("user_phone").length == 0?'':uni.getStorageSync("user_phone"),
					sms_code: '',
					type: '1'
				},
				
				type: ''
			}
		},
		onLoad(options) {
			//#ifdef MP-WEIXIN        
			wx.requirePrivacyAuthorize({            
			  success: () => {                
			    console.log('点击同意');            
			 },            
			  fail: () => {                
			    console.log('点击拒绝');                            
			 },             
			  complete: () => {                
			    console.log('用户已点击');            
			 }       
			})
			//#endif
			
			this.type = options.type
			console.log(options.type)
			console.log(this.type)
		},
		components: {
			wxPrivacy
		},
		methods: {
			
			handleDisagree() {
			    // 处理用户不同意隐私协议的逻辑
			},
			handleAgree() {
			    // 处理用户同意隐私协议的逻辑
		    },
			
			
			getCode() {
				var mobileReg = /^1[3456789]\d{9}$/;
				if (this.form.phone == "") {
					uni.showToast({
						title: "手机号不能为空",
						icon: "none"
					})
				} else if (!mobileReg.test(this.form.phone)) {
					uni.showToast({
						title: "手机号格式有误",
						icon: "none"
					})
				} else {
					// 点击获取验证码后 保存手机号
					uni.setStorageSync('user_phone',this.form.phone);
					const TIME_COUNT = 60;
					if (!this.timer) {
						this.count = TIME_COUNT;
						this.show = false;
						if (this.show == false) {
							// 获取验证码
							userPhoneLogOnCode({
								phone: this.form.phone
							}).then(res => {
								if (res.data.status == 200) {
									uni.showToast({
										title: res.data.data.message,
										icon: "none"
									})
								}
							}, fail => {
								uni.showToast({
									title: fail,
									icon: "error"
								})
							}).catch(err => {
								console.log(err)
							})
						}
						this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= TIME_COUNT) {
								this.count--;
							} else {
								this.show = true;
								clearInterval(this.timer);
								this.timer = null;
							}
						}, 1000)
					}
				}
			},
			inputphone(e) {
				const o = e.target;
				const inputRule = /[^\d]/g
				this.$nextTick(function() {
					this.form.phone = o.value.replace(inputRule, '');
					if (this.form.phone.length < 11) {
						if(this.show==false){
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}
				})
			},
			inputcode(e) {
				const o = e.target;
				const inputRule = /[^\d]/g
				this.$nextTick(function() {
					this.form.sms_code = o.value.replace(inputRule, '');
				})
			},
			xieyi() {
				
				uni.setStorageSync('agreementType','2')
				
				uni.navigateTo({
					url: "/pages/index/bottombat?type=2" 
				})
			},
			yincang() {
				uni.setStorageSync('agreementType','1')
				uni.navigateTo({
					url: "/pages/index/bottombat?type=1"
				})
			},
			ruzhuxieyi() {
				uni.setStorageSync('agreementType','6')
				uni.navigateTo({
					url: "/pages/index/bottombat?type=6" 
				})
			},
			gou() {
				if (this.is_wei == true) {
					this.is_wei = false;
					this.is_yes = true;
				} else {
					this.is_wei = true;
					this.is_yes = false;
				}
			},
			// 暂不登录
			unLogin() {
				setTimeout(function() {
					uni.switchTab({
						url: '../../my/index'
					});
				}, 300);
			},
			//lww
			// loginWithUserId (){
			// 	try {
			// 	  uni.setStorage({
			// 	    key: 'myUsername',
			// 	    data: loginState.name.toLowerCase(),
			// 	  });
			// 	  console.log('22222');
			// 	  loginStore.setLoginUserBaseInfos({ loginUserId: loginState.name });
			// 	  setUserTokenToStorage(loginState.name.toLowerCase(), res.accessToken);
			// 	} catch (error) {
			// 	  console.log('>>>>>>', error);
			// 	  uni.showToast({
			// 	    title: '登录失败',
			// 	    icon: 'none',
			// 	  });
			// 	  console.log('33333');
			// 	} finally {
			// 	  loginState.name = '';
			// 	  loginState.psd = '';
			// 	}
			// },
			//lww
			async loginWithUserId() {
			 this.loginEaseIMId =uni.getStorageSync('im_userid')
			  try {
			    const res = await loginWithPassword(
			      this.loginEaseIMId,
			      uni.getStorageSync('im_pass')
			    );
			    this.$store.commit('SET_LOGIN_USER_BASE_INFOS', {
			      loginUserId:  this.loginEaseIMId,
			    });
			    this.setEMUserLoginInfosToStorage(
			      this.loginEaseIMId.toLowerCase(),
			      res.accessToken
				  //注意：res.accessToken
			    );
				// this.updateHXUser();
			  } catch (error) {
			    console.log('>>>>>>', error);
			    uni.showToast({
			      title: '登录失败',
			      icon: 'none',
			    });
			  } finally {
			    this.loginEaseIMId = '';
			  }
			},
			setEMUserLoginInfosToStorage(userId, token) {
			  const params = {
			    key: `EM_LOGIN_INFOS`,
			    data: { userId: userId, token: token },
			  };
			  uni.setStorage({ ...params });
			},
			updateHXUser(){
				console.log('修改环信的昵称');
				updateUserInfosFromServer({nickname: JSON.stringify(uni.getStorageSync('userinfo')).nickname,avatarurl:JSON.stringify(uni.getStorageSync('userinfo')).avatar});
				// {nickname: JSON.stringify(uni.getStorageSync('userinfo')).nickname,avatar:JSON.stringify(uni.getStorageSync('userinfo')).avatar}
			},
			//lww结束
			login() {
				 const { actionEMReconnect } = emHandleReconnect();
				var mobileReg = /^1[3456789]\d{9}$/;
				if (this.form.phone == "") {
					uni.showToast({
						title: "手机号不能为空",
						icon: "none"
					})
				} else if (!mobileReg.test(this.form.phone)) {
					uni.showToast({
						title: "手机号格式有误",
						icon: "none"
					})
				} else if (this.form.sms_code == "") {
					uni.showToast({
						title: "请输入验证码",
						icon: "none"
					})
				} else if (this.is_wei == true) {
					uni.showToast({
						title: "请勾选协议",
						icon: "none"
					})
					return;
				} else {
					// 登录注册
					userPhoneLogOn(this.form).then(res => {
						console.log(res)
						if (res.data.status == 200 && JSON.stringify(res.data.data) != "{}") {
							uni.setStorageSync('userinfo', res.data.data.user);
							uni.setStorageSync('authorization', res.data.data.x_token);
							uni.setStorageSync('storeStaff', res.data.data.storeStaff);
							// 用户状态判断
							selectMerchant({
								uid: res.data.data.user.uid
							}).then(data => {
								uni.setStorage({
								  key: 'myUsername',
								  data: JSON.stringify(uni.getStorageSync('userinfo').uid),
								});
								uni.setStorage({
								  key: 'mer_id',
								  data: data.data.data.merchantIntention.mer_id,
								});
								
								if (data.data.status == 200) {
									uni.setStorageSync('selectmerchant', data.data.data);
									//lww
									
									getImUser({
										mer_id:	uni.getStorageSync('mer_id'),
									}).then(data=>{
										console.log('getImUser======',data.data.data);
										// actionEMReconnect();
										 // this.loginWithUserId()
										const { loginWithPassword } = emConnect();
										uni.setStorage({
											key: 'im_userid',
											data:data.data.data.im_userid
										})
										uni.setStorage({
											key: 'im_pass',
											data:data.data.data.im_pass
										})
										uni.setStorage({
											key: 'im_uuid',
											data:data.data.data.im_uuid
										})
										//环信注册成功 登录
										if(data.data.status==200){
											console.log('>>>>>>>>环信注册成功 登录')
											this.loginWithUserId()
											//更新环信的用户信息 头像，昵称
											
										}
									})
									//lww
									let storeStaff = uni.getStorageSync('storeStaff')
									if (storeStaff != null) {
										queryStoreBranch({
											id: storeStaff.department
										}).then(res => {
											if (res.data.status == 200) {
												uni.setStorageSync('jurisdiction', res.data.data.jurisdiction);
											}
										})
									} else {
										uni.setStorageSync('jurisdiction', [7, 9, 5, 3]);
									}
									uni.showToast({
										title: res.data.message,
										icon: "none"
									})
									
									console.log(this.type, 'this.type')
									
									if (this.type == 1) {
										
										console.log('返回上一页')
										uni.navigateBack({
											delta: 1
										})
									} else {
										setTimeout(function() {
											uni.switchTab({
												url: '../../cashier/index'
											});
										}, 700);
									}
								}
							}, fail => {
								uni.showToast({
									title: fail,
									icon: "none"
								})
							}).catch(err => {
								console.log(err)
							})
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none"
							})
						}
					}, fail => {
						uni.showToast({
							title: fail,
							icon: "none"
						})
					}).catch(data => {
						console.log(data)
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.login_header {
			height: 211rpx;
			margin-top: 74rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.login_header_top {
				width: 216rpx;
				height: 242rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.login_header_botom {
				width: 156rpx;
				height: 48rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.input-home {
			width: 658rpx;
			height: 238rpx;
			margin-top: 67rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.input {
				width: 100%;
				height: 118rpx;
				border-bottom: 1rpx solid #E5E5E5;
				position: relative;

				input {
					width: 485rpx;
					height: 100rpx;
					margin: 20rpx 0 0 10rpx;
					color: #333333;
				}

				.input_code {
					position: absolute;
					top: 55rpx;
					right: 15rpx;
					font-size: 30rpx;
					font-weight: 400;
				}
			}
		}

		.login-singn {
			width: 658rpx;
			height: 88rpx;
			background-color: rgba(31, 124, 255, 0.3);
			border-radius: 10rpx;
			margin-top: 70rpx;
			font-size: 30rpx;
			font-weight: 400;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #333333;
		}

		.unLogin-singn {
			margin-top: 88rpx;
		}
		.bottom-index {
			width: 658rpx;
			height: 33rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 60rpx;

			.bottom-index-in {
				width: 32rpx;
				height: 32rpx;
				line-height: 33rpx;
				transform: sale(2);
				image {
					width: 100%;
					height: 100%;
				}
				margin-right: 20rpx;
				// position: relative;
			}

			.bottom-index-ri {
				height: 100%;
				font-size: 24rpx;
			}
		}
	}
</style>