digitalMen/pages/user/signin.vue

<template>
	<view>
		<view style="color: #000;">
			<tn-nav-bar backgroundColor="#fff" :bottomShadow="false">登录</tn-nav-bar>
			<view :style="{height: tobheight+'px'}"></view>
		</view>
		<block>
			<view class="signin">
				<!-- 注册账户 -->
			</view>
			<view class="site_logo">
				<image class="weixin" :src="appInfo.site_logo_path" mode="aspectFill"></image>
			</view>
			<view class="site_name">{{appInfo.site_name}}</view>
			<view class="detailed">
				<view class="">欢迎畅游{{appInfo.site_name}}</view>
				<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="account-fill" color="#26B3A0" size="24"></u-icon>
							<input class="vs-flex-item" v-model="accountLogin.account" :maxlength="11"
								placeholder="请输入账号" />
						</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 v-if="!showlogon" 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="twopassword" v-model="password2"
								placeholder="请再次确认登录密码" placeholder-class="input-placeholder" />
							<u-icon @click="twopassword = !twopassword" :name="twopassword ? 'eye-off' : 'eye-fill'"
								color="#26B3A0" size="18"></u-icon>
						</view> -->
					</view>
					<view @click="getlogin()" hover-class="hoversubmit" class="signinnow">{{showlogon?'立即登录':'立即注册'}}
					</view>
				</view>
			</u-popup>
			<!-- #ifdef MP-WEIXIN -->
			<view class="flxe justify-center">
				<view class="grant" @click="showAuthorizationModal = true">
					<u-icon name="weixin-fill" color="#ffffff" size="26"></u-icon>
					<view class="dlu">微信授权登录</view>
				</view>
				<!-- <button class="getbutton" open-type="getPhoneNumber" @getphonenumber="getphone"></button> -->
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<block v-if="appInfo.h5_run_mode">
				<block v-if="appInfo.h5_run_mode == 1">
					<view v-if="platform == 'wxOfficialAccount'" class="flxe justify-center">
						<view class="grant" @click="thirdLogin('wechat')">
							<u-icon name="weixin-fill" color="#ffffff" size="26"></u-icon>
							<view class="dlu">微信授权登录</view>
						</view>
					</view>
					<view v-if="appInfo.is_account&&appInfo.is_account==1" class="flxe justify-center">
						<view class="grants" @click="showlogon = true,showlogin = true">
							<u-icon name="account-fill" color="#199063" size="26"></u-icon>
							<view class="dlu">账号密码登录</view>
						</view>
					</view>
					<view v-if="appInfo.is_account&&appInfo.is_account==1" @click="showlogon = false,showlogin = true"
						class="toregister flxe justify-center">未注册账号？点击去注册></view>
				</block>
				<block v-if="appInfo.h5_run_mode == 2">
					<view class="flxe justify-center">
						<view class="grants" @click="showlogon = true,showlogin = true">
							<u-icon name="account-fill" color="#199063" size="26"></u-icon>
							<view class="dlu">账号密码登录</view>
						</view>
					</view>
					<view @click="showlogon = false,showlogin = true" class="toregister flxe justify-center">
						未注册账号？点击去注册></view>
				</block>
				<block v-if="appInfo.h5_run_mode == 3">
					<view v-if="platform == 'wxOfficialAccount'" class="flxe justify-center">
						<view class="grant" @click="thirdLogin('wechat')">
							<u-icon name="weixin-fill" color="#ffffff" size="26"></u-icon>
							<view class="dlu">微信授权登录</view>
						</view>
					</view>
					<block v-if="platform == 'H5'">
						<view class="flxe justify-center">
							<view class="grants" @click="showlogon = true,showlogin = true">
								<u-icon name="account-fill" color="#199063" size="26"></u-icon>
								<view class="dlu">账号密码登录</view>
							</view>
						</view>
						<view @click="showlogon = false,showlogin = true" class="toregister flxe justify-center">
							未注册账号？点击去注册></view>
					</block>
				</block>
			</block>

			<block v-else>
				<view v-if="platform == 'wxOfficialAccount'" class="flxe justify-center">
					<view class="grant" @click="thirdLogin('wechat')">
						<u-icon name="weixin-fill" color="#ffffff" size="26"></u-icon>
						<view class="dlu">微信授权登录</view>
					</view>
				</view>
				<block v-if="platform == 'H5'">
					<view class="flxe justify-center">
						<view class="grants" @click="showlogon = true,showlogin = true">
							<u-icon name="account-fill" color="#199063" size="26"></u-icon>
							<view class="dlu">账号密码登录</view>
						</view>
					</view>
					<view @click="showlogon = false,showlogin = true" class="toregister flxe justify-center">
						未注册账号？点击去注册></view>
				</block>
			</block>
			<!-- #endif -->
			<!-- <view class="">{{appInfo.h5_run_mode}}</view> -->
			<view @tap="agree = true" 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>
		<wike-loading-page :isLoading="isLoading"></wike-loading-page>
		<tnui-wx-user-info v-model="showAuthorizationModal" @updated="updatedUserInfoEvent"></tnui-wx-user-info>
	</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 {
		register,
		login
	} from '@/api/robot/index.js'
	export default {
		components: {
			TnuiWxUserInfo
		},
		data() {
			return {
				agree: true,
				showAuthorizationModal: false,
				tobheight: 45,
				platform: this.$platform.get(),
				h5_runmode: ['wxOfficialAccount', 'H5'],
				isLoading: true,
				showlogin: false,
				password: true,
				twopassword: true,
				accountLogin: {
					account: '',
					password: '',
				},
				password2: '',
				showlogon: true,
				route: ''
				// register:0
			}
		},
		computed: {
			...mapGetters(['appInfo', 'userInfo', 'isLogin'])
		},
		onLoad(option) {
			// console.log(option);
			const that = this;
			that.isLoading = false
			if (that.platform == 'wxMiniProgram') {
				var menumtop = uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync().statusBarHeight
				var paddingtop = uni.getSystemInfoSync().statusBarHeight + menumtop
				that.tobheight = (menumtop + paddingtop + uni.getMenuButtonBoundingClientRect().height)
			}
			console.log(that.appInfo.h5_run_mode, that.platform);
			// #ifdef H5
			const {
				code,
				state,
				scope
			} = option;
			that.option = option;
			if (code && scope !== 'snsapi_base') {
				that.$http('wechat.wechatAuth', {
					code: option.code
				}, ).then(res => {
					// console.log(res);				
					if (res.code == 0) {
						uni.setNavigationBarTitle({
							title: that.appInfo.site_name
						});
						that.$store.dispatch('getUserInfo', res.data.token);
						// if(!res.data.phone){

						// 	that.showAuthorizationModal = true;
						// }else{
						uni.showToast({
							title: '登录成功'
						})
						setTimeout(function() {

							const value = uni.getStorageSync('route');
							// console.log(value);
							if (value) {
								if (value == '/pages/chat/chat' || value == '/pages/template/detail' ||
									value == '/pages/painting/draw') {
									uni.reLaunch({
										url: value,
									})
									uni.removeStorageSync('route');
									return;
								}
								uni.switchTab({
									url: value
								})
								uni.removeStorageSync('route');
							} else {
								uni.switchTab({
									url: '/pages/user/user'
								})
							}
						}, 1000);
						// }


					}
				});
			}
			// #endif

		},
		methods: {
			...mapActions(['getUserInfo']),
			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;
				}
				// #ifdef MP-WEIXIN
				if (user) {
					// that.avatarUrl = user.avatarUrl;
					// that.nickName = user.nickName;
					// that.closeAuthModal();
					that.getUserInfo();


				}
				if (user.errMsg == 'getUserProfile:fail auth deny') {
					// this.mobilelogin = false;
					uni.showToast({
						title: '已取消登录',
						icon: 'none'
					})
				} else {
					that.shgfgh()
				}
				// #endif
			},
			// memberadd_coin(){
			// 	this.$http('member.add_coin',{type:'register'}).then(res=>{
			// 		if (res.code === 0) {
			// 			that.shgfgh()
			// 		}
			// 	})
			// },
			updatedUserInfoEvent(e) {

				// console.log(e);
				// uni.showToast({
				// 	title:'已取消登录',
				// 	icon:'none'
				// })
				// uni.navigateBack({
				// })
			},
			async getlogin() {
				if (!this.accountLogin.account) {
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					})
					return;
				}
				if (!uni.$u.test.rangeLength(this.accountLogin.account, [4, 16])) {
					uni.showToast({
						title: '账号不能低于4位和高于16位',
						icon: 'none'
					})
					return;
				}
				if (!this.accountLogin.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return;
				}
				if (!uni.$u.test.rangeLength(this.accountLogin.password, [4, 16])) {
					uni.showToast({
						title: '密码不能低于4位和高于16位',
						icon: 'none'
					})
					return;
				}

				if (/.*[\u4e00-\u9fa5]+.*$/.test(this.accountLogin.password)) {
					uni.showToast({
						title: '密码不能含有汉字',
						icon: 'none'
					})
					return;
				}
				// if (!this.showlogon && !this.password2) {
				// 	uni.showToast({
				// 		title: '请再次确认密码',
				// 		icon: 'none'
				// 	})
				// 	return;
				// }

				if (!uni.$u.test.enOrNum(this.accountLogin.password) || !uni.$u.test.enOrNum(this.password2)) {
					uni.showToast({
						title: '密码只能是字母和数字',
						icon: 'none'
					})
					return;
				}
				// if (!this.showlogon && this.accountLogin.password != this.password2) {
				// 	uni.showToast({
				// 		title: '两次密码不相同,请重新确认',
				// 		icon: 'none'
				// 	})
				// 	return;
				// }

				// 新登录接口
				if (!this.showlogon) {
					let res = await register({
						account: this.accountLogin.account,
						password: this.accountLogin.password
					})
					console.log('注册参数：', {
						account: this.accountLogin.account,
						password: this.accountLogin.password
					});
					console.log('注册返回值：', res);
					if (res.code == 0) {
						this.showlogon = true
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				} else {
					let res = await login({
						account: this.accountLogin.account,
						password: this.accountLogin.password
					})
					console.log('登录参数：', {
						account: this.accountLogin.account,
						password: this.accountLogin.password
					});
					if (res.code == 0) {
						uni.setStorageSync('token', res.data.token)
						uni.showToast({
							title: '登录成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/robot/index'
							})
						}, 1500)
						console.log('登录返回值：', res, res.data.token);
					}
				}
				return


				this.$http(this.showlogon ? 'user.login' : 'user.register', this.accountLogin).then(res => {
					if (res.code === 0) {
						var z = this.showlogon ? '登录成功' : '注册登录成功'

						this.$store.dispatch('getUserInfo', this.showlogon ? res.data.user.token : res.data
							.token);


						uni.showToast({
							title: z
						})
						setTimeout(function() {
							// uni.switchTab({
							// 	url:'/pages/user/user'
							// })
							const value = uni.getStorageSync('route');
							// console.log(value);
							if (value) {
								if (value == '/pages/chat/chat' || value == '/pages/painting/draw' ||
									value == '/pages/user/member/member') {
									uni.reLaunch({
										url: value,
									})
									uni.removeStorageSync('route');
									return;
								}
								if (value.indexOf('/pages/template/detail') > -1) {
									uni.reLaunch({
										url: value,
									})
									uni.removeStorageSync('route');
									return;
								}
								uni.switchTab({
									url: value
								})
								uni.removeStorageSync('route');
							} else {
								uni.switchTab({
									url: '/pages/user/user'
								})
							}
						}, 1000);
					} else {
						// var z = this.showlogon?'登录失败':'注册登录失败'
						// 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">
	.signin {
		font-weight: 700;
		font-size: 20px;
		color: #101010;
		margin: 45rpx 76rpx 76rpx;

	}

	.site_logo {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.weixin {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
	}

	.site_name {
		width: 100%;
		display: flex;
		justify-content: center;
		font-size: 36rpx;
		margin-top: 30rpx;
		font-weight: bold;
	}

	.detailed {
		color: #999;
		font-size: 28rpx;
		margin-top: 80rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.grant {
		background: linear-gradient(to right, #00ca88, #00BCD4);
		border: 1px solid #199063;
		width: 80%;
		height: 42px;
		border-radius: 50rpx;
		font-size: 28rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		margin-top: 180rpx;
		position: relative;

		.dlu {
			padding-left: 12rpx;
		}

		.button {
			position: absolute;
			width: 100%;
			height: 80rpx;
			opacity: 0;
		}
	}

	.toregister {
		font-size: 26rpx;
		margin-top: 16rpx;
		color: #c7c7cc;
	}

	.grants {
		// background:linear-gradient(to right,#199063,#26C47D);
		border: 1px solid #199063;
		// background: #fff;
		width: 80%;
		height: 42px;
		border-radius: 50rpx;
		font-size: 28rpx;
		color: #199063;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		margin-top: 38rpx;
		position: relative;

		.dlu {
			padding-left: 12rpx;
		}

		.button {
			position: absolute;
			width: 100%;
			height: 80rpx;
			opacity: 0;
		}
	}

	.clause {
		display: flex;
		justify-content: center;
		font-size: 26rpx;
		color: #c7c7cc;

		margin-left: 12rpx;
	}

	.getbutton {
		position: absolute;
		width: 100%;
		height: 80rpx;
		opacity: 0;
		margin-top: 180rpx;
	}

	.container {
		margin-top: 60rpx;

		.bg {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			height: 400rpx;
			margin-bottom: 80rpx;
		}

		.topimg {
			image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}
		}

		.textl_ogin {
			font-size: 40rpx;
			margin: 0 60rpx 50rpx;
			font-weight: bold;
		}

		.login {
			margin-bottom: 80rpx;
		}

		.signinnow {
			background: #26C47D;
			font-size: 34rpx;
			color: #fff;
			margin: 0 60rpx 40rpx;
			text-align: center;
			line-height: 90rpx;
			height: 90rpx;
			border-radius: 16rpx;
			font-weight: bold;
		}

		.input {
			// width: 630rpx;
			height: 100rpx;
			padding: 0 30rpx;
			background: #f7f7f7;
			border-radius: 16rpx;
			flex-direction: row;
			// margin-left: 60rpx;
			// margin-bottom: 40rpx;
			margin: 0 60rpx 40rpx;
			font-style: normal;
			font-size: 30rpx;
			font-family: Droid Sans Fallback;

			&-icon {
				width: 30rpx;
				height: 38rpx;
			}
		}

		.hoversubmit {
			background: #F7F7F7;
			color: #ACACB3;
		}

		.vs-flex-item {
			flex: 1;
			margin-left: 16rpx;
		}
	}
</style>