eduepos_ui_store/pages/login/login.vue

<template>
	<view class="login-wrap">
        <view class="account-login-wrap" :style="{ visibility: isCheckLogin ? 'visible' : 'hidden', zIndex: isCheckLogin ? 1 : -1 }">
			<view style="margin-bottom: 60rpx;">
				<uni-data-select
			      v-model="areaId"
			      :localdata="addressList"
			      @change="change"
				  placeholder="请选择校区"
			    ></uni-data-select>
			</view>
            <u-input type="text" class="input" v-model="phoneNum" placeholder="请输入登录手机号"/>
            <u-input type="text" class="input" password v-model="password" placeholder="请输入密码"/>
        </view>
        <button v-if="isCheckLogin" class="wechat-login" @click="pdwLogin" >
            登录
        </button>
		<button v-if="!isCheckLogin && !isChecked" @click="phoneLogin()" class="wechat-login" >
		    授权手机号登录
		</button>
        <button v-if="!isCheckLogin && isChecked" open-type="getPhoneNumber" @getphonenumber="authorization" class="wechat-login" >
            授权手机号登录
        </button>
        <view class="argument">
            <checkbox @click="isChecked = !isChecked" class="blue" :class="{ checked: isChecked }" :checked="isChecked ? true : false" style="transform:scale(0.8)"></checkbox>
            <view class="title" @click="isChecked = !isChecked">请阅读并同意</view>
            <text class="text-color" @click="navToWebView('/pages/webView/web_view?src=http://127.0.0.1:8081/fuwu.html')">《用户服务协议》</text>
            <text class="text">和</text>
            <text class="text-color" @click="navToWebView('/pages/webView/web_view?src=http://127.0.0.1:8081/yinsi.html')">《用户隐私条款》</text>
        </view>
        <view class="other-login-wrap">
            <view v-if="!isCheckLogin" @click="changeClick" class="other-login" >
                账号密码登录
            </view>
			<!-- <view v-else @click="changeClick" class="other-login" >
                授权手机号登录
            </view> -->
			
        </view>
    </view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				weixinLoginUrl: '/storeUserLoginApi/loginByWeixin',
				loginurl: '/storeUserLoginApi/loginbyps', //手机号密码登录
				addressUrl: (getApp().globalData.platApiUrl || getApp().globalData.apiUrl) + '/api/areaManage/getAreaListApp',
				isChecked: false,
                isCheckLogin: true,
                params: {},
				phoneNum: '',
				password: '',
				areaId: '',
				addressList: [],
				code: '',
				list: []
			}
		},
		computed:{
			isPhone() { //手机号码校验正则
				return /^1\d{10}$/.test(this.phone);
			},
		},
		onShow() {
			if (wx.canIUse("getUpdateManager")) {
				const updateManager = wx.getUpdateManager();
				updateManager.onCheckForUpdate(function(res) {
					// console.log(res.hasUpdate);
					// 请求完新版本信息的回调
					if (res.hasUpdate) {
						updateManager.onUpdateReady(function() {
							wx.showModal({
								title: "更新提示",
								content: "新版本已经准备好，是否重启应用？",
								success(res) {
									if (res.confirm) {
										// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
										updateManager.applyUpdate();
									}
								}
							});
						});
						updateManager.onUpdateFailed(function() {
							// 新的版本下载失败
							wx.showModal({
								title: "已经有新版本了哟~",
								content: "新版本已经上线啦~，请您删除当前小程序，重新搜索打开"
							});
						});
					}
				});
			} else {
				wx.showModal({
					title: "提示",
					content: "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。"
				});
			}
		},
		methods: {
			...mapMutations(['login']),
			phoneLogin() {
				if (!this.checkedFlag) {
					uni.showToast({
						title: '请先阅读并同意用户协议',
						icon: 'none'
					})
					return
				}
			},
			change(e) {
				this.address = this.list.filter((i) => {
					return i.areaId === e
				})
				this.areaId = this.address[0].areaId || ''
				getApp().globalData.storeInfo = this.address[0];
				this.code = this.address[0].code || ''
				
			},
			changeClick() {
				this.isCheckLogin = !this.isCheckLogin
			},
    //         linkOthers (v) {
    //             console.log(v == 0 ? '服务协议' : '隐私条款');
				// if (v == 0) {
				// 	uni.navigateTo({
				// 	    url: '/pages/tools/userAngument'
				// 	})
				// } else {
				// 	uni.navigateTo({
				// 	    url: '/pages/tools/privacyAngument'
				// 	})
				// }
    //         },
			navToWebView(url) {
				uni.navigateTo({
					url: url
				})
			},
			pdwLogin () {
				if (!this.isChecked) {
					uni.showToast({
						title: '请先阅读并同意用户协议',
						icon: 'none'
					})
					return
				}
				if (this.areaId === '') {
					uni.showToast({
						title: '请选择校区',
						icon: 'none'
					})
					return
				}
				if (this.phoneNum === '') {
					uni.showToast({
						title: '请填写手机号',
						icon: 'none'
					})
					return
				}
				if (this.password === '') {
					uni.showToast({
						title: '请填写密码',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: "登录中"
				});
				let json = uni.getStorageSync('storeInfo')
				if (json) {
					uni.clearStorage()
				}
				var dateStr = (new Date()).getTime();
				var sign = this.getSign(this.phoneNum + this.password + dateStr);
				let that = this
				this.requst({
					url: that.loginurl,
					data: {
						phone: that.phoneNum,
						password: that.password,
						timestamp: dateStr,
						sign: sign,
						code: that.code,
					},
					success: res => {
						if (res.data.rtnBean.rtnCode == 0) {
							that.login(res.data.obj);
							that.loginx(that.code,res.data.obj.storeUserId);
							getApp().globalData.storeInfo = res.data.obj
							uni.switchTab({
								url: '/pages/index/index' //跳转到首页
							});
									
								// }, 1500)
							//}, 0);
						} else {
							uni.hideLoading();
							if (res.data.rtnBean.rtnMsg != '') {
								that.$api.msg(res.data.rtnBean.rtnMsg)
								setTimeout(() => {
									uni.hideToast();
								}, 1500)
								return;
							}
						}
					},
					fail: (e) => {
						uni.showToast({
							title: '失败，请稍后尝试！',
							icon: 'none',
							mask: 'true'
						});
						// this.close();
						return;
					},
				})
				
			},
            authorization(e) {
				console.log('e :>> ', e);
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					var dateStr = (new Date()).getTime();
					var sign = this.getSign(e.detail.code + dateStr);
					this.requst({
						url: this.weixinLoginUrl, //服务器端地址
						data: {
							code: e.detail.code,
							timestamp: dateStr,
							sign: sign
						},
						success: (res) => {
							if (res.data.rtnBean.rtnCode == 0) {
								this.login(res.data.obj);
								// setTimeout(() => {
									// uni.showToast({
									// 	icon: 'none',
									// 	title: '登录成功',
									// });
									// setTimeout(() => {
										uni.switchTab({
											url: '/pages/index/index' //跳转到首页
										});
                                        console.log("########################");
									// }, 1500)
								// }, 0);
							} else {
								uni.hideLoading();
								if (res.data.rtnBean.rtnMsg != '') {
									this.$api.msg(res.data.rtnBean.rtnMsg)
									setTimeout(() => {
										uni.hideToast();
									}, 1500)
									return;
								}
							}
						},
						fail(res) {
							uni.showToast({
								title: '获取用户手机号失败，请稍后尝试！',
								icon: 'none',
								mask: 'true'
							});
							return;
						}
					});
				}
			},
			// 加载校区
			getAddress () {
				uni.showLoading({
					title: '加载中'
				})
				let that = this
				this.requst({
					url: this.addressUrl,
					data: {},
					success: res => {
						if (res.data.rtnBean.rtnCode == 0) {
							that.list = res.data.list
							if (that.list.length) {
								for (var i = 0; i < that.list.length; i++) {
									that.list[i]
									let address = {
										value: that.list[i].areaId,
										text: that.list[i].areaName
									}
									that.addressList.push(address)
								}
							}
						}
						uni.hideLoading()
					},
					fail: (e) => {
						console.log("接口调用失败:" + JSON.stringify(e));
						uni.hideLoading()
					}
				})
			},
			successLogin (res) {
                // 处理用户信息
                console.log('res', res);
				// this.$refs.uToast.show({
				// 	title: '登录成功',
				// 	type: 'success'
				// });
				// setTimeout(() => {
				// 	uni.redirectTo({
				// 		url: "/pages/index/index",
				// 	});
				// }, 1000)
			}
		},
		onReady () {
			const token = uni.getStorageSync('token')
			if (token) {
				uni.redirectTo({
					url: '/pages/index/index' //跳转到首页
				})
			}
		},
		onLoad() {
			this.getAddress();
		},
		onHide() {
			this.code = ''
		}
	}
</script>

<style lang="scss" scoped>
    .login-wrap {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .account-login-wrap {
        width: 80%;
        position: relative;
        z-index: 1;
        /deep/ .u-input {
            margin-bottom: 60rpx;
        }
    }
    .wechat-login {
        width: 80%;
        height: 80rpx;
        border-radius: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #1A78F6;
        color: #fff;
        font-size: 32rpx;
        margin-bottom: 20rpx;
    }
	.argument {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		margin-bottom: 40rpx;
        .text-color {
            color: #1A78F6;
        }
	}
    .other-login-wrap {
        width: 100vw;
        height: 60rpx;
        position: fixed;
        left: 0;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
        @include flexCenter;
        .other-login {
            font-size: $font-base;
            color: #0F40F5;
        }
    }
</style>