shuquAi/pages/user/signin.vue

<template>
	<view class="outerCon">
		<view class="mobile">
			<view style="padding: 30rpx; padding-top: 24rpx;padding-bottom: 200rpx;">
				<view class="topTxtAndImg">
					<view class="swiper">
						<swiper class="banner" circular :autoplay="false"
							:style="{width:isPc?'600rpx':'680rpx',height:isPc?'auto':'450rpx'}">
							<!-- <swiper class="banner" circular :autoplay="false"> -->
							<swiper-item v-for="i in bannerList">
								<image :src="i.picture" mode=""></image>
							</swiper-item>
						</swiper>
					</view>
					<view class="txt">
						<u-parse :content="companyDes"></u-parse>
					</view>
				</view>
				<block>
					<view class="site_name">{{appInfo.site_name}}</view>
					<view class="detailed">
						<view class="">欢迎立即加入我们！</view>
					</view>
					<u-popup :show="showlogin" mode="bottom" :round="10" closeable @close="showlogin = false">
						<view class="container">
							<view class="textl_ogin">{{showlogon?'账号密码登录':'账号密码注册'}}</view>
							<view class="login">
								<view class="input u-flex align-center">
									<u-icon name="phone-fill" color="#26B3A0" size="24"></u-icon>
									<input class="vs-flex-item" v-model="accountLogin.mobile" :maxlength="11"
										placeholder="请输入手机号" />
								</view>
								<view v-if="!showlogon" class="input u-flex align-center">
									<u-icon name="account-fill" color="#26B3A0" size="24"></u-icon>
									<input class="vs-flex-item" v-model="accountLogin.code" :maxlength="11"
										placeholder="验证码" />
									<view class="" style="width: 250rpx;">
										<u-button style="width: 250rpx;" color='#26B3A0' class="custom-style"
											@tap="getCode">{{tips}}</u-button>
									</view>
								</view>
								<view class="input u-flex align-center">
									<u-icon name="lock-fill" color="#26B3A0" size="24"></u-icon>
									<input class="vs-flex-item" type="text" :password="password"
										v-model="accountLogin.password" placeholder="请输入密码"
										placeholder-class="input-placeholder" />
									<u-icon @click="password = !password" :name="password ? 'eye-off' : 'eye-fill'"
										color="#26B3A0" size="18"></u-icon>
								</view>
								<view class="forgetPwd" @click="forgetPwd" v-if="showlogon">
									忘记密码
								</view>
								<view v-if="!showlogon" class="input u-flex align-center">
									<u-icon name="account-fill" color="#26B3A0" size="24"></u-icon>
									<input class="vs-flex-item" v-model="accountLogin.invite_code" :maxlength="11"
										placeholder="请输入邀请码" />
								</view>
								<view @tap="agree = !agree" class="flxe align-center justify-center"
									style="margin-top: 50rpx;">
									<u-icon name="checkmark-circle-fill" :color="agree?'#07C160':'#ededed'"
										size="16"></u-icon>
									<view class="clause">我已阅读并同意：<view @tap.stop="agreement('privacy')"
											style="color: #34c758;">
											《隐私政策》
										</view>和<view @tap.stop="agreement('use')" style="color: #34c758;">《用户协议》</view>
									</view>
								</view>
							</view>
							<view @click="getlogin()" hover-class="hoversubmit" class="signinnow">
								{{showlogon?'立即登录':'立即注册'}}
							</view>
						</view>
						<view class="wrap">
							<u-toast ref="uToast"></u-toast>
							<u-code :seconds="seconds" @end="" @start="" ref="uCode" @change="codeChange"></u-code>

						</view>
					</u-popup>
					<block v-if="platform == 'wxOfficialAccount'&&showWX">
						<!-- <block v-if="false"> -->
						<view class="wxBox">
							<view class="">
								<view class="grant wxBtn" @click="thirdLogin('wechat')"
									style="border: none;width: 280rpx;">
									<u-icon name="weixin-fill" color="#ffffff" size="26"></u-icon>
									<view class="">绑定微信</view>
								</view>
							</view>
							<view class="tyGpt" style="width: 280rpx;" @click="useGpt">体验CHATGPT</view>
						</view>
						<view @tap="agree = !agree" class="flxe align-center justify-center" style="margin-top: 50rpx;">
							<u-icon name="checkmark-circle-fill" :color="agree?'#07C160':'#ededed'" size="16"></u-icon>
							<view class="clause">我已阅读并同意：<view @tap.stop="agreement('privacy')" style="color: #34c758;">
									《隐私政策》
								</view>和<view @tap.stop="agreement('use')" style="color: #34c758;">《用户协议》</view>
							</view>
						</view>
					</block>

					<block v-else>
						<!-- <block> -->
						<view class="" v-if="!showWX"
							style="color: #34c758;font-weight: 600; margin-bottom: 100rpx;width: 100%;text-align: center;margin-top: 30rpx;">
							微信绑定成功，请手机号注册后登录,如已注册请直接登录
						</view>
						<view class="main">
							<view class="defBtn" style="" @click="showlogon = true,showlogin = true">
								<u-icon name="account-fill" color="#199063" size="26"></u-icon>
								<view class="">账号登录</view>
							</view>

							<view class="chatGpt" @click="useGpt">
								体验CHATGPT
							</view>
						</view>
						<view style="color: #199063" @click="showlogon = false,showlogin = true" class="deftoregister">
							未注册账号？点击去注册></view>
					</block>
				</block>
				<tnui-wx-user-info v-model="showAuthorizationModal" @updated="updatedUserInfoEvent"></tnui-wx-user-info>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import wechat from '@/common/wechat/wechat';
	import TnuiWxUserInfo from '@/components/tnui-wx-user-info/tnui-wx-user-info';

	import {
		sendCode,
		register,
		login,
		sysParms
	} from '@/api/my/index.js'
	import {
		banner
	} from '@/api/index/index.js'


	// 判断是否为微信环境
	const isWechat = () => {
		return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
	}

	export default {
		components: {
			TnuiWxUserInfo
		},
		data() {
			return {
				showWX: true,
				list3: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],

				tips: '',
				// refCode: null,
				seconds: 60,



				agree: true,
				// agree1: false,
				showAuthorizationModal: false,
				tobheight: 45,
				platform: this.$platform.get(),
				h5_runmode: ['wxOfficialAccount', 'H5'],
				isLoading: true,
				showlogin: false,
				password: true,
				twopassword: true,


				accountLogin: {
					code: '',
					invite_code: '',
					mobile: '',
					password: '',
				},


				password2: '',
				showlogon: true,
				route: '',
				// register:0

				bannerList: [],
				companyDes: '',


				code: '',
				wx_code: '',

				isPc: true
			}
		},
		computed: {
			...mapGetters(['appInfo', 'userInfo', 'isLogin'])
		},
		async onLoad(option) {
			if (navigator.userAgent.indexOf('Mobile') > -1) {
				// alert('移动端')
				this.isPc = false
			}

			if (option.code) {
				this.wx_code = option.code
				uni.showToast({
					title: '绑定微信成功，请用手机号注册后登录',
					icon: 'none',
					duration: 3000
				})
				this.showWX = false
			}
			// this.getWechatCode()
			console.log('isWechat', isWechat());

			if (option.iviteCode) {
				if (uni.getStorageSync('invite_code')) {
					uni.removeStorageSync('invite_code')
					// this.accountLogin.invite_code = option.iviteCode
					uni.setStorageSync('invite_code', option.iviteCode)
				} else {
					uni.setStorageSync('invite_code', option.iviteCode)
				}
			}
			let ress = await sysParms({

			})
			console.log('登录页系统参数返回值', ress, ress.msg);
			if (ress.code == 0) {
				this.companyDes = ress.data[5].value
			}


			let res = await banner()
			console.log('登录页轮播图返回值', res);
			if (res.code == 0) {
				this.bannerList = res.data
			}

			// console.log(option);
			const that = this;
			that.isLoading = false

			// #ifdef H5
			const {
				code,
				state,
				scope
			} = option;
			that.option = option;
			if (code && scope !== 'snsapi_base') {}
			// #endif

		},
		onUnload() {
			console.log('onUnload()-----------------');
		},
		onShow() {
			if (uni.getStorageSync('invite_code')) {
				this.accountLogin.invite_code = uni.getStorageSync('invite_code')
			}

			// if (uni.getStorageSync('token')) {
			// 	uni.redirectTo({
			// 		url: '/pages/index/index'
			// 	})
			// }
		},
		methods: {
			async thirdLogin(provider) {
				if (!this.agree) {
					this.$u.toast('请同意用户协议');
					return false;
				}
				// console.log(provider)
				const that = this;
				let user = '';
				// uni.showLoading({
				// 	title:'登录中...'
				// })
				switch (provider) {
					case 'wechat':
						user = await wechat.login();
						break;
					default:
						break;
				}
			},

			auth() {
				this.getWechatCode()
			},

			getWechatCode() {
				if (isWechat) {
					let appid = "wx96cad2970c232f6e"; //微信APPid
					let code = this.getUrlCode().code; //是否存在code
					uni.showToast({
						title: '点击按钮获取的wx_code-----------' + code,
						icon: 'none',
						duration: 20000
					})

					// let local = window.location.href;
					let local = 'http://www.liwantao.top'
					if (code == null || code === "") {
						//不存在就打开上面的地址进行授权
						window.location.href =
							"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
							appid +
							"&redirect_uri=" +
							encodeURIComponent(local) +
							"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
					} else {
						this.code = code;
					}
				}
			},

			getUrlCode() {
				// 截取url中的code方法
				var url = location.search;
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					var strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
					}
				}
				console.log(theRequest);
				return theRequest;
			},















			// ...mapActions(['getUserInfo']),

			forgetPwd() {
				uni.navigateTo({
					url: `/pages/user/accountSafe/updatePwd/index?from=login`
				})
			},
			useGpt() {
				uni.navigateTo({
					// url: 'pages/gptLead/index'
					url: '/pages/chat/chat'
				})
			},

			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.accountLogin.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return;
				}
				if (!phoneReg.test(this.accountLogin.mobile)) {
					uni.showToast({
						title: '手机号不合法',
						icon: 'none'
					})
					return
				}
				let res = await sendCode({
					mobile: this.accountLogin.mobile
				})
				console.log('验证码返回值', res);
				if (res.code == 0) {
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 2000);
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				} else {
					uni.hideLoading();
					uni.$u.toast(res.msg);
				}
			},

			async getlogin() {
				let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.accountLogin.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return;
				}
				if (!phoneReg.test(this.accountLogin.mobile)) {
					uni.showToast({
						title: '手机号不合法',
						icon: 'none'
					})
					return
				}
				if (!this.showlogon && !this.accountLogin.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				if (!this.accountLogin.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return;
				}
				if (!uni.$u.test.rangeLength(this.accountLogin.password, [6, 12])) {
					uni.showToast({
						title: '密码长度为6至12位',
						icon: 'none'
					})
					return;
				}

				if (/.*[\u4e00-\u9fa5]+.*$/.test(this.accountLogin.password)) {
					uni.showToast({
						title: '密码不能含有汉字',
						icon: 'none'
					})
					return;
				}
				if (!uni.$u.test.enOrNum(this.accountLogin.password)) {
					uni.showToast({
						title: '密码只能是字母和数字',
						icon: 'none'
					})
					return;
				}
				if (!this.agree) {
					uni.showToast({
						title: '请勾选协议',
						icon: 'none'
					})
					return;
				}
				if (this.showlogon) {
					console.log('登录参数', {
						account: this.accountLogin.mobile,
						password: this.accountLogin.password,
						code: this.wx_code
					});
					// uni.showToast({
					// 	title: this.wx_code,
					// 	icon: 'none',
					// 	duration: 1500
					// })

					let ress = await login({
						account: this.accountLogin.mobile,
						password: this.accountLogin.password,
						wx_code: this.wx_code
						// code: '051Lrz100YBhhQ1tsl200JsnrE4Lrz16'
					})
					// return
					console.log('登录返回值', ress);
					if (ress.code == 0) {
						this.$store.dispatch('login', ress.data.token);
						// this.$store.dispatch('login',
						// 	'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOi8vdDIwLjkwMjYuY29tL2FwaS9hdXRoL2xvZ2luIiwiaWF0IjoxNjg4MDg3MTUxLCJleHAiOjE2ODg2OTE5NTEsIm5iZiI6MTY4ODA4NzE1MSwianRpIjoiU1h5Z0d0NHZqa3E0RkxiaSIsInN1YiI6IjEzIiwicHJ2IjoiMjNiZDVjODk0OWY2MDBhZGIzOWU3MDFjNDAwODcyZGI3YTU5NzZmNyIsInJvbGUiOiJ1c2VyIn0.RLc82OcM-HVhey8IpZlvsp-IruWuk70HGxWBoRwwMDY'
						// );
						uni.showToast({
							title: '登录成功',
							icon: 'none'
						})

						setTimeout(function() {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1000);

					} else {
						// this.$store.dispatch('login',
						// 	'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOi8vdDIwLjkwMjYuY29tL2FwaS9hdXRoL2xvZ2luIiwiaWF0IjoxNjg4MDg3MTUxLCJleHAiOjE2ODg2OTE5NTEsIm5iZiI6MTY4ODA4NzE1MSwianRpIjoiU1h5Z0d0NHZqa3E0RkxiaSIsInN1YiI6IjEzIiwicHJ2IjoiMjNiZDVjODk0OWY2MDBhZGIzOWU3MDFjNDAwODcyZGI3YTU5NzZmNyIsInJvbGUiOiJ1c2VyIn0.RLc82OcM-HVhey8IpZlvsp-IruWuk70HGxWBoRwwMDY'
						// );
						// setTimeout(function() {
						// 	uni.switchTab({
						// 		url: '/pages/index/index'
						// 	})
						// }, 1000);

						uni.showToast({
							title: ress.msg,
							icon: 'none'
						})
					}
				} else {
					console.log('注册参数', {
						account: this.accountLogin.mobile,
						password: this.accountLogin.password,
						invite: this.accountLogin.invite_code,
						code: this.accountLogin.code,

						wx_code: this.wx_code
					});
					let res = await register({
						account: this.accountLogin.mobile,
						password: this.accountLogin.password,
						invite: this.accountLogin.invite_code,
						code: this.accountLogin.code,

						wx_code: this.wx_code
					})
					console.log('注册错误信息', res, res.msg);
					if (res.code == 0) {
						uni.removeStorageSync('invite_code')
						var z = '注册成功'
						uni.showToast({
							title: z
						})
						this.showlogon = true
					} else {
						var z = '注册失败,' + res.msg
						uni.showToast({
							title: z,
							icon: 'none'
						})
					}
				}
			},
			shgfgh() {
				let that = this;

				// setTimeout(function(){

				uni.showToast({
					title: '登录成功'
				})
				setTimeout(function() {
					// uni.navigateBack()
					uni.switchTab({
						url: '/pages/user/user'
					})
				}, 1000);

				// },2000);
			},
			agreement(e) {
				uni.navigateTo({
					url: './public/agreement?type=' + e
				})
			},
			// 绑定手机号
			async getphone(e) {
				let that = this;
				// uni.showLoading({
				// 	title:'绑定中...'
				// })
				let res = await wechat.getPhoneNumber(e.detail);
				// console.log(res)
				if (res.code === 0) {
					// uni.showToast({
					// 	title:that.cur?'绑定成功':'登录成功',
					// 	duration:1500
					// })
					// that.whether = true;
					// that.$store.commit('userInfo',res.data)
					// uni.navigateTo({
					// 	url:'/pages/public/webview?url=https://y.iduomi.cc/api/wechat_login.html'
					// })
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './signin.scss';
	@import './signin1.scss';
</style>