获取浏览器返回的功能操作

2 years ago · ebb4d26e4d
3 changed files with 482 additions and 78 deletions
--- a/pages.json
+++ b/pages.json
@ -275,6 +275,14 @@
    		"navigationBarTitleText" : "",
    		"enablePullDownRefresh" : false
    	}
+    },
+    {
+    	"path" : "pages/login/index",
+    	"style" : 
+    	{
+    		"navigationBarTitleText" : "",
+    		"enablePullDownRefresh" : false
+    	}
    }
  ],
  "globalStyle": {
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@ -1,111 +1,396 @@
 <template>
-  <view class="login">
-	  <!-- 常规方式登录 -->
-    <Main :isParty="isParty" :partyData="partyData" />
-  </view>
+	<view>
+		
+	</view>
 </template>

 <script>
-  import Main from './components/main'
-  import MpWeixin from './components/mp-weixin'
-  import SettingKeyEnum from '@/common/enum/setting/Key'
-  import SettingModel from '@/common/model/Setting'
-  
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>
+<template>
+  <view class="container">
+
+    <!-- 页面头部 -->
+    <view class="header">
+      <view class="title">
+        <text>登录</text>
+      </view>
+    </view>
+    <!-- 表单 -->
+    <view class="login-form">
+      <!-- 手机号 -->
+      <view class="form-item">
+        <input class="form-item--input" type="number" v-model="mobile" maxlength="11" autocomplete="off" placeholder="请输入手机号码" />
+      </view>
+	  <!-- 密码 -->
+	  <view class="form-item">
+		  <input class="form-item--input" type="password" v-model="vpass" autocomplete="off" placeholder="请输入密码" />
+	  </view>
+	  <!-- 选择机构、个人 -->
+	  <radio-group @change="radioChange">
+		  <view class="form-item">
+		  <radio class="radio" color="#4399ff" value="企业" :checked="utchk1"/> 机构
+		  
+		  </view>
+		  <view class="form-item">
+		  <radio class="radio" color="#4399ff" value="个人" :checked="utchk2"/> 个人
+		  </view>
+	  </radio-group>
+
+      <!-- 登录按钮 -->
+      <view class="login-button" @click="handleLogin">
+        <text>登录</text>
+      </view>
+    </view>
+	<!-- 找回密码 注册 -->
+	<view class="fdreg">
+		<text class="findpass" @click="fdpass">找回密码</text>
+		<text class="regnow" @click="register">立即注册</text>
+	</view>
+	<!-- 隐私政策等 -->
+	<view class="privacy">
+		<checkbox :checked="isTick" color="#4399ff" class="ckbox" @click="readpri"></checkbox>
+		<view class="">
+			我已阅读并同意网站的 《<text class="atxt" @click="gotopage('private')">隐私政策</text> 》和 
+			《<text class="atxt" @click="gotopage('prototal')">用户注册协议</text>》
+		</view>
+	</view>
+	<!-- 协议弹框 -->
+	<whpop v-model="showPopup" :maskCloseAble="true" :mkey="murl"></whpop>

+  </view>
+</template>

+<script>
+  import store from '@/store'
+  import * as LoginApi from '@/api/login'
+  import * as Verify from '@/utils/verify'
+  
+  // 校验登录
+  import { checkLogin, showError } from '@/core/app'
+  import whpop from './components/WhPopup'
+  
  export default {
    components: {
-      Main,
-      MpWeixin
+      // nothing
+	  whpop
    },
-
+	
    data() {
      return {
-        // 数据加载完成 [防止在微信小程序端onLoad和view渲染同步进行]
-        isLoad: false,
-        // 是否显示微信小程序授权登录
-        isMpWeixinAuth: false,
-        // 是否存在第三方用户信息
-        isParty: false,
-        // 第三方用户信息数据
-        partyData: {}
+        // 正在加载
+        isLoading: false,
+        // 手机号
+        mobile: '',
+		// 密码
+		vpass:"",
+		// 阅读标志
+		isTick:false,
+		// user type
+		userType:"",
+		// 用户类型选择
+		utchk1:true,
+		utchk2:false,
+		// 需要打开的链接
+		murl:"",
+		// 显示/隐藏弹窗
+		showPopup: false,
      }
    },
-	
+
    /**
     * 生命周期函数--监听页面加载
     */
-    async onLoad(options) {
-      console.log('login onLoad')
-      // 设置当前是否显示微信小程序授权登录
-      // await this.setShowUserInfo()
-      // 数据加载完成
-      this.isLoad = true
-      console.log('isLoad', true)
+    created() {
+      // console.log('main created')
    },
-
+	
+	mounted() {
+		// 监听返回事件,点击系统返回时
+		if(window.history && window.history.pushState){
+			console.log(window.history)
+			window.addEventListener('popstate',this.goback,false)
+		}		
+	},
    methods: {

-      /**
-       * 设置当前是否显示微信小程序授权登录
-       *  - 条件1: 只有微信小程序才显示获取用户信息按钮
-       *  - 条件2: 后台设置是否已开启该选项 [后台-客户端-注册设置]
-       */
-      async setShowUserInfo() {
-        console.log('setShowUserInfo start')
+		goback(){
+			console.log("6666666666666666666")
+			// let path = this.$route.path
+			// this.$toast(path)
+			this.onNavigateBack(1)
+		},
+	  // 账户类型
+       radioChange(evt) {
+			this.userType = evt.detail.value
+			if(this.userType=="企业"){
+				this.utchk2=false
+				this.utchk1=true;
+			}else{
+				this.utchk2=true
+				this.utchk1=false;
+			}
+	   },
+	   // 判断是否阅读了政策协议
+	   readpri(e){
+		   this.isTick=!this.isTick
+	   },
+	   
+      // 表单验证
+      formValidation() {
        const app = this
-        // 判断当前客户端是微信小程序, 并且支持getUserProfile接口
-        const isMpWeixin = app.platform === 'MP-WEIXIN' && wx.canIUse('getUserProfile')
-
-        // 获取后台设置
-        // await SettingModel.item(SettingKeyEnum.REGISTER.value, false)
-        //   .then(setting => {
-        //     app.isMpWeixinAuth = isMpWeixin && setting.isOauthMpweixin
-        //     console.log('setShowUserInfo complete')
-        //   })
+        // 验证提交登录
+        if (!app.validteMobile(app.mobile) ||!app.validtePass(app.vpass)) {
+            return false
+        }
+		// 处理用户类型
+		if(app.utchk1){
+			this.userType="企业"
+		}
+		if(app.utchk2){
+			this.userType ="个人"
+		}
+		// 检查是否阅读了协议
+		if(!app.isTick){
+			this.$toast("请勾选《隐私保护政策》和《用户注册协议》")
+			return false
+		}
+        return true
      },
 	  
-	  //返回操作
-	  goBack(){
-	  		// 获取url历史记录
-	  		let history = store.state.urlHistory;
-	  		console.log(history,"history");
-	  
-	  		// 判断历史记录的长度
-	  		// if(history.length > 1) {
-	  		//   // 如果历史记录长度大于1，则跳转到倒数第三个历史记录的url
-	  		//   router.push(history[history.length - 3]);
-	  		// } else {
-	  		//   // 否则，跳转到首页
-	  		//   router.push('/');
-	  		// }
-	  
-	  		// // 再次执行以下两行代码，确保后退按钮可以再次触发popstate事件
-	  		// window.history.pushState('forward', null, '');
-	  		// window.history.forward(1);
-	      // this.$router.replace({path: '/'});
+	  // 验证密码
+	  validtePass(str){
+		  if (Verify.isEmpty(str)) {
+		    this.$toast('请先输入登录密码')
+		    return false
+		  }
+		  return true;
 	  },

-      // 获取到用户信息的回调函数
-      onGetUserInfoSuccess({ oauth, code, userInfo }) {
-        // 记录第三方用户信息数据
-        this.partyData = { oauth, code, userInfo }
-        // 显示注册页面
-        this.onShowRegister()
+      // 验证手机号
+      validteMobile(str) {
+        if (Verify.isEmpty(str)) {
+          this.$toast('请先输入手机号')
+          return false
+        }
+        if (!Verify.isMobile(str)) {
+          this.$toast('请输入正确格式的手机号')
+          return false
+        }
+        return true
      },

-      // 显示注册页面
-      onShowRegister() {
-        // 是否显示微信小程序授权登录
-        this.isMpWeixinAuth = false
-        // 已获取到了第三方用户信息
-        // this.isParty = true
-      }
-    }
+      // 点击登录
+      handleLogin() {
+        const app = this
+        if (!app.isLoading && app.formValidation()) {
+          app.submitLogin()
+        }
+      },
+
+      // 确认登录
+      submitLogin() {
+        const app = this
+        app.isLoading = true
+		
+        store.dispatch('Login', {
+			loginName: app.mobile,
+			loginType: "0",
+			password: this.$md5(app.vpass).toUpperCase(), // 转成大写
+			userType: app.userType
+          })
+          .then(result => {
+            // 显示登录成功
+			app.$toast("登录成功")
+            //app.$toast(result.message)
+            // 相应全局事件订阅: 刷新上级页面数据
+            uni.$emit('syncRefresh', true)
+            // 跳转回原页面
+            setTimeout(() => app.onNavigateBack(1), 2000)
+          })
+          .catch(err => {
+			  console.log("err",err)
+            // 跳转回原页面
+            if (err.result.data.isBack) {
+              setTimeout(() => app.onNavigateBack(1), 2000)
+            }
+          })
+          .finally(() => app.isLoading = false)
+      },
+
+      /**
+       * 登录成功-跳转回原页面
+       */
+      onNavigateBack(delta = 1) {
+        const pages = getCurrentPages()
+        if (pages.length > 1) {
+          uni.navigateBack({
+            delta: Number(delta || 1)
+          })
+        } else {
+          //this.$navTo('pages/user/index')
+		  this.$navTo('pages/index/index')
+        }
+      },
+	  
+	  /**
+	   * 阅读注册协议和隐私
+	   */
+	  gotopage(str){
+		  //this.$toast(str)
+		  this.murl = str
+		  this.showPopup = ! this.showPopup
+	  },
+	  /**
+	   * 跳转到注册
+	   */
+	  register(){
+		this.$navTo("pages/reg/reg")  
+	  },
+	  
+	  /**
+	   * 
+	   */
+	  fdpass(){
+		this.$navTo("pages/findpass/findpass")  
+	  },
+
+    },
+	//退出页面
+	destroyed(){
+		//销毁监听
+		window.removeEventListener('popstate',this.goback,false)
+	}

  }
 </script>

 <style lang="scss" scoped>
+  .container {
+    padding: 100rpx 60rpx;
+    min-height: 100vh;
+    background-color: #fff;
+  }
+
+  // 页面头部
+  .header {
+    margin-bottom: 60rpx;

+    .title {
+      color: #191919;
+      font-size: 54rpx;
+    }
+
+  }
+
+  // 输入框元素
+  .form-item {
+    display: flex;
+    padding: 18rpx;
+    border-bottom: 1rpx solid #f3f1f2;
+    margin-bottom: 30rpx;
+    height: 96rpx;
+
+    &--input {
+      font-size: 28rpx;
+      letter-spacing: 1rpx;
+      flex: 1;
+      height: 100%;
+    }
+
+    &--parts {
+      min-width: 100rpx;
+      height: 100%;
+    }
+	
+	&--radgrp{
+		display: flex;
+		flex:1;
+		height: 100%;
+	}
+
+
+
+    // 短信验证码
+    .captcha-sms {
+      font-size: 28rpx;
+      line-height: 50rpx;
+      padding-right: 20rpx;
+
+      .activate {
+        color: #cea26a;
+      }
+
+      .un-activate {
+        color: #9e9e9e;
+      }
+    }
+  }
+
+
+  // 登录按钮
+  .login-button {
+    width: 100%;
+    height: 86rpx;
+    margin-top: 80rpx;
+    background: linear-gradient(to right, #242e4b, #242e4b);
+    color: #fff;
+    // border-radius: 80rpx;
+    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
+    letter-spacing: 5rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  // 找回密码和 立即注册
+  .fdreg{
+	 display: flex;
+	 margin-top: 26rpx;
+	 line-height: 1.4;
+	 min-height: 26rpx;
+	 color:#ff0000;
+	 padding-left: 32rpx;
+	 padding-right: 32rpx;
+	 
+	 text{
+		 display: block;
+		 // display: flex;
+		 float: left;
+		 width: 46%;
+		 line-height: 1.4;
+	 }
+	 
+	 .findpass{
+		 text-align: left;
+	 }
+	 .regnow{
+		 text-align: right;
+	 }
+  }
+  
+  .privacy{
+	  display: flex;
+	  margin-top: 10rpx;
+	  
+	  .ckbox{
+		  border-radius: 50%;
+	  }
+	  
+	  .atxt{
+		  color: #4399ff;
+	  }
+  }
 </style>
--- a/pages/login/indexBk.vue
+++ b/pages/login/indexBk.vue
@ -0,0 +1,111 @@
+<template>
+  <view class="login">
+	  <!-- 常规方式登录 -->
+    <Main :isParty="isParty" :partyData="partyData" />
+  </view>
+</template>
+
+<script>
+  import Main from './components/main'
+  import MpWeixin from './components/mp-weixin'
+  import SettingKeyEnum from '@/common/enum/setting/Key'
+  import SettingModel from '@/common/model/Setting'
+  
+
+
+  export default {
+    components: {
+      Main,
+      MpWeixin
+    },
+
+    data() {
+      return {
+        // 数据加载完成 [防止在微信小程序端onLoad和view渲染同步进行]
+        isLoad: false,
+        // 是否显示微信小程序授权登录
+        isMpWeixinAuth: false,
+        // 是否存在第三方用户信息
+        isParty: false,
+        // 第三方用户信息数据
+        partyData: {}
+      }
+    },
+	
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    async onLoad(options) {
+      console.log('login onLoad')
+      // 设置当前是否显示微信小程序授权登录
+      // await this.setShowUserInfo()
+      // 数据加载完成
+      this.isLoad = true
+      console.log('isLoad', true)
+    },
+
+    methods: {
+
+      /**
+       * 设置当前是否显示微信小程序授权登录
+       *  - 条件1: 只有微信小程序才显示获取用户信息按钮
+       *  - 条件2: 后台设置是否已开启该选项 [后台-客户端-注册设置]
+       */
+      async setShowUserInfo() {
+        console.log('setShowUserInfo start')
+        const app = this
+        // 判断当前客户端是微信小程序, 并且支持getUserProfile接口
+        const isMpWeixin = app.platform === 'MP-WEIXIN' && wx.canIUse('getUserProfile')
+
+        // 获取后台设置
+        // await SettingModel.item(SettingKeyEnum.REGISTER.value, false)
+        //   .then(setting => {
+        //     app.isMpWeixinAuth = isMpWeixin && setting.isOauthMpweixin
+        //     console.log('setShowUserInfo complete')
+        //   })
+      },
+	  
+	  //返回操作
+	  goBack(){
+	  		// 获取url历史记录
+	  		let history = store.state.urlHistory;
+	  		console.log(history,"history");
+	  
+	  		// 判断历史记录的长度
+	  		// if(history.length > 1) {
+	  		//   // 如果历史记录长度大于1，则跳转到倒数第三个历史记录的url
+	  		//   router.push(history[history.length - 3]);
+	  		// } else {
+	  		//   // 否则，跳转到首页
+	  		//   router.push('/');
+	  		// }
+	  
+	  		// // 再次执行以下两行代码，确保后退按钮可以再次触发popstate事件
+	  		// window.history.pushState('forward', null, '');
+	  		// window.history.forward(1);
+	      // this.$router.replace({path: '/'});
+	  },
+
+      // 获取到用户信息的回调函数
+      onGetUserInfoSuccess({ oauth, code, userInfo }) {
+        // 记录第三方用户信息数据
+        this.partyData = { oauth, code, userInfo }
+        // 显示注册页面
+        this.onShowRegister()
+      },
+
+      // 显示注册页面
+      onShowRegister() {
+        // 是否显示微信小程序授权登录
+        this.isMpWeixinAuth = false
+        // 已获取到了第三方用户信息
+        // this.isParty = true
+      }
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>