app2.0微信登录

Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/weixinLogin.vue

@@ -0,0 +1,399 @@
+<template>
+  <view class="page">
+    <view class="content">
+      <view class="head-banner">
+        <!-- 标题文字 -->
+        <view class="main-title">
+          微信登录
+          <!-- <text v-if="DEV" class="margin-left-sm text-red">(开发模式)</text> -->
+          <!-- <text class="text-gray margin-left-sm" style="font-size: 0.7em;">{{ APP_VERSION }}</text> -->
+        </view>
+
+        <!-- 首页 Logo -->
+        <view mode="aspectFit" class="logo">
+			<image src="~@/static/wx.png" mode="widthFix" class="logoImg"></image>
+		</view>
+
+        <!-- 【仅生产环境】使用账号的原因，无此项则微信审核通不过 -->
+        <!-- <view v-if="!DEV" class="intro">
+          <view class="intro">注册登录智慧校园账号后，您将可以体验力软框架产品中的所有功能与业务</view>
+          <view class="intro">OA · 进销存 · 工作流审批 · 数据可视化</view>
+          <view class="intro text-gray" style="font-size: 0.9em;">
+            如果您之前已在智慧校园 PC 端中注册过体验账号，可以直接使用原账号登录，无需另行注册
+          </view>
+        </view> -->
+      </view>
+
+      <!-- 账户密码表单 -->
+      <l-input v-if="ready" v-model="username" placeholder="用户名" left>
+        <l-icon slot="title" type="people" />
+      </l-input>
+      <l-input v-if="ready" v-model="password" placeholder="密码" password left>
+        <l-icon slot="title" type="lock" />
+      </l-input>
+      <l-button v-if="ready" @click="loginClick(null)" size="lg" color="blue" class="margin-top-sm block" block>确 认</l-button>
+	  <view class="otherLogin">
+	  	<navigator url="/pages/login" class="textBtn">常规登陆</text></navigator>
+	  </view>
+      <!-- <l-button v-if="enableSignUp" @click="signUp" size="lg" line="blue" class="margin-top-sm block" block>
+        教师注册
+      </l-button> -->
+
+      <!-- 【仅小程序】一键登录按钮 -->
+      <!-- #ifdef MP -->
+      <l-button v-if="MPLogin" @click="login(PLATFORM)" size="lg" line="green" class="margin-top-sm block" block>
+        {{ PLATFORM_TEXT }}一键登录
+      </l-button>
+      <!-- #endif -->
+
+      <!-- 【仅开发模式】显示，后台地址切换 -->
+      <!-- <view v-if="DEV" class="more">
+        <view @click="showApiRootSelector = true" class="morebtn">后台地址(点击切换):</view>
+        <view class="morebtn">{{ currentApiRoot }}</view>
+      </view> -->
+
+      <!-- 【仅开发模式】选择 API 地址的弹层 -->
+      <l-modal
+        v-if="DEV && ready"
+        v-model="showApiRootSelector"
+        @radioIndex="changeApiRoot"
+        :radio="currentApiRoot"
+        :range="apiRootList"
+        type="radio"
+      />
+    </view>
+    <!-- 页面底部版权文字 -->
+    <view class="footer">{{ copyRightDisplay }}</view>
+  </view>
+</template>
+
+<script>
+import moment from 'moment';
+export default {
+  data() {
+    return {
+      username: '',
+      password: '',
+	  
+	  code:'',
+
+      ready: false,
+      showApiRootSelector: false,
+
+      currentApiRoot: '',
+      apiRootList: [],
+      devAccountList: []
+    }
+  },
+
+  async onLoad() {
+	if(this.getHashSearchParam("code")){
+		this.code = this.getHashSearchParam("code")
+	}
+    await this.init()
+  },
+
+  methods: {
+    // 页面初始化
+    async init() {
+      const index = this.DEV ? this.CONFIG('devApiHostIndex') : this.CONFIG('prodApiHostIndex')
+      this.apiRootList = this.CONFIG('apiHost')
+      this.currentApiRoot = this.apiRootList[index]
+
+      // 如果是开发模式，填入测试账号密码
+      if (this.DEV) {
+        this.devAccountList = this.CONFIG('devAccount')
+        const account = this.devAccountList[index] || { username: '', password: '' }
+        this.username = account.username
+        this.password = account.password
+      }
+      // this.ready = true
+	  this.loginInit()
+    },
+	getHashSearchParam(key) {
+	  let search = location.search
+	  let array = []
+	  if(search){
+		  search = search.substring(1)
+		  array = search.split("&")
+		  let res = array.find((item)=>item.split("=")[0] == key)
+		  return res.split("=")[1]
+	  }
+	  return ''
+	},
+
+    // 点击新用户注册
+    signUp() {
+      this.NAV_TO('/pages/signup')
+    },
+
+    loginInit(){
+		if (this.code) {
+			this.LOADING("加载中...")
+			this.HTTP_POST("weixinapi/getweixinaccess_token?code="+this.code,null).then(success=>{
+				this.HIDE_LOADING()
+				if(!success){
+					location.href = "http://" + window.location.host;
+					return
+				}
+				if(success.logined){
+					// var logininfo = {
+					//     account: account,
+					//     token: success.baseinfo.token,
+					//     date: moment().format('yyyy-MM-dd hh:mm:ss')
+					// };
+					this.SET_STORAGE("token",success.baseinfo.token)
+					// this.SET_STORAGE("logininfo",logininfo)
+					// this.SET_STORAGE("userinfo",success)
+					location.href = "http://" + window.location.host;
+					// location.href = "http://" + window.location.host;
+				}else{
+					this.ready = true
+					this.openid = success.openid
+				}
+			})
+		} else {
+		    this.HIDE_LOADING();
+			this.HTTP_GET("weixinapi/weixinconfig").then(success=>{
+				if(!success){
+					return
+				}
+				window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + success.appid + "&redirect_uri=" + encodeURIComponent('http://' + window.location.host + '/#/pages/weixinLogin') + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
+			})
+		}
+	},
+	
+	loginClick(){
+		// 点击登录
+		// 账号密码登录时，验证输入，输入有误则返回
+		if (!this.check()) {
+		  return
+		}
+		let up = true
+		
+		var postData = {
+		    username: this.username,
+		    password: this.password,
+		    openid: this.openid,
+		    up: up
+		};
+		this.LOADING("正在登录，请稍后")
+		this.HTTP_POST("weixinapi/login", postData).then(success=>{
+			this.HIDE_LOADING()
+			if(!success){
+				return
+			}
+			var logininfo = {
+			    account: this.username,
+			    token: success.baseinfo.token,
+			    date: moment().format('yyyy-MM-dd hh:mm:ss')
+			};
+			this.SET_STORAGE("token",success.baseinfo.token)
+			// this.SET_STORAGE('logininfo', logininfo);
+			// this.SET_STORAGE('userinfo', success);
+			this.username = ""
+			this.password = ""
+			if (success.pwd === true) {
+			    this.SET_STORAGE('pwd', true);
+			    this.TOAST("绑定失败！您的密码不满足强度要求，请您先修改密码后再执行系统其他操作");
+			} else {
+			    this.SET_STORAGE('pwd', false);
+			}
+			location.href = "http://" + window.location.host + "/#/pages/my/newpassword";
+		})
+	},
+	
+	// 切换后台地址
+    changeApiRoot(newIndex) {
+      const newApiRoot = this.apiRootList[newIndex]
+      this.currentApiRoot = newApiRoot
+      this.SET_GLOBAL('apiRoot', newApiRoot)
+
+      // 如果是开发模式，填入测试账号密码
+      if (this.DEV && this.devAccountList && this.devAccountList[newIndex]) {
+        const account = this.devAccountList[newIndex] || { username: '', password: '' }
+        this.username = account.username
+        this.password = account.password
+      }
+    },
+
+    // 发起登录
+    // type=null 时表示使用账号密码登录
+    // type='weixin'/'alipay'/'dingtalk' 时表示使用小程序一键登录
+    async login(type) {
+      const { username, password, check } = this
+
+      // 账号密码登录时，验证输入，输入有误则返回
+      if (!type && !check()) {
+        return
+      }
+      this.LOADING('登录中…')
+
+      // 根据不同的登录方式，调用 API
+      let loginResult = null
+
+      // 不是小程序，则提交用户名、密码登录
+      // 是小程序，则申请授权码登录
+      if (!type) {
+        let postResult = await this.POST('learun/adms/user/login', { username, password: this.MD5(password) })
+        if(postResult[1].data.code=='200'){
+          loginResult=postResult[1].data.data;
+        }else{
+          this.TOAST(postResult[1].data.info);
+        }
+      } else {
+        const [codeErr, { code } = {}] = await uni.login({ provider: type })
+        if (codeErr || !code) {
+          this.HIDE_LOADING()
+          this.CONFIRM('登录失败', '无法获取小程序登录授权码')
+          return
+        }
+
+        loginResult = await this.HTTP_POST('learun/adms/user/openid_login', { code, type }, '登录时发生错误')
+      }
+
+      if (!loginResult) {
+        return
+      }
+
+      // loginUser 中合并 role、post 两个字段
+      const { baseinfo, mpinfo, post, role } = loginResult
+      const user = { ...baseinfo, post, role }
+      const token = baseinfo.token
+
+      // 返回的用户信息中，有 mpinfo 字段表示是否是小程序
+      if (mpinfo && Array.isArray(mpinfo) && mpinfo.includes(type)) {
+        user.miniProgram = true
+      }
+
+      this.SET_GLOBAL('token', token)
+      this.SET_GLOBAL('loginUser', user)
+
+      this.SET_STORAGE('token', token)
+
+      this.HIDE_LOADING()
+      // this.TAB_TO('/pages/home')
+	  this.NAV_TO('/pages/my/newpassword')
+    },
+
+    // 验证用户输入
+    check() {
+      const { username, password } = this
+      if (username.length <= 0 || password.length <= 0) {
+        this.CONFIRM('输入错误', '账号或密码不能为空，请重新输入')
+        return false
+      }
+      return true
+    }
+  },
+
+  computed: {
+    // 页面底部公司名、版权信息
+    copyRightDisplay() {
+      const year = new Date().getFullYear()
+      const company = this.CONFIG('company')
+
+      return `Copyright © ${year} ${company}`
+    },
+
+    // 是否显示小程序登录按键
+    MPLogin() {
+      return this.CONFIG(`miniProgramAccount.${this.PLATFORM}`).includes('login')
+    },
+
+    // 是否展示注册按钮
+    enableSignUp() {
+      return this.CONFIG('enableSignUp')
+    }
+  }
+}
+</script>
+
+<style lang="less">
+page {
+  height: 100%;
+}
+
+/* #ifdef MP-ALIPAY */
+.page {
+  height: 100%;
+  position: absolute;
+}
+/* #endif */
+</style>
+
+<style lang="less" scoped>
+.page {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .content {
+    text-align: center;
+    width: 100%;
+    padding: 0 38rpx;
+  }
+
+  .head-banner {
+    margin-bottom: 40rpx;
+
+    .logo {
+      // background-image: url('~@/static/logo.png');
+      background-size: contain;
+      height: 120rpx;
+      width: 120rpx;
+      text-align: center;
+      display: inline-block;
+      border-radius: 5px;
+    }
+	.logoImg {
+		width: 100%;
+	}
+    .main-title {
+      display: block;
+      margin: 20rpx 0;
+      color: #555;
+      font-size: 1.4em;
+      margin-bottom: 30rpx;
+    }
+
+    .intro {
+      margin-top: 20rpx;
+    }
+  }
+  
+  .otherLogin{
+  	  display: flex;
+  	  justify-content: flex-end;
+  	  .textBtn{
+  		  width: 100px;
+  		  color: #606266;
+  	  }
+  }
+
+  .more {
+    margin-top: 30rpx;
+
+    .morebtn {
+      color: #555;
+    }
+  }
+
+  .footer {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 10px;
+    bottom: calc(10px + env(safe-area-inset-bottom));
+    text-align: center;
+    font-size: 14px;
+    color: #555;
+
+    /* #ifdef MP-ALIPAY */
+    bottom: 10px;
+    /* #endif */
+  }
+}
+</style>