|
@@ -1,212 +1,166 @@
|
|
|
<template>
|
|
|
- <view class="forget-wrap">
|
|
|
- <view class="logo">
|
|
|
- <u-image src="/static/logo.png" width="140" height="140" ></u-image>
|
|
|
- </view>
|
|
|
+ <view class="login-wrap">
|
|
|
+ <!-- <view v-if="!buildType" style="text-align: center;color: #999999;padding-top: 40px;">{{ envTips }}</view> -->
|
|
|
+ <image src="../../static/logo.jpg" class="logo"></image>
|
|
|
<form class="login-form" @submit="formSubmit">
|
|
|
<view class="form-item">
|
|
|
- <input v-model="form.phone" class="item-inp" name="phone" type="number" maxlength="11" placeholder="请输入登录手机号" />
|
|
|
+ <u-icon size="34" color="#999" name="account"></u-icon>
|
|
|
+ <input v-model="form.loginName" class="item-inp" name="loginName" type="text" maxlength="30" placeholder="请输入用户名" />
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
- <input v-model="form.verifyCode" class="item-inp" name="verifyCode" type="number" maxlength="6" placeholder="请输入短信验证码" />
|
|
|
- <button class="getcode-btn" :disabled="isDisable" @click="getCodeValidate">{{nowVal}}</button>
|
|
|
+ <u-icon size="34" color="#999" name="lock"></u-icon>
|
|
|
+ <input v-model="form.password" class="item-inp" name="password" password type="text" maxlength="12" placeholder="请输入密码" />
|
|
|
+ </view>
|
|
|
+ <view class="flex-box" style="margin-top: 60upx;">
|
|
|
+ <view class="remember-pass">
|
|
|
+ <u-checkbox v-model="isRemember" value="true" :size="30" :label-size="26" active-color="#2ab4e5" class="login-form-checkbox" @change="rememberChange">记住密码</u-checkbox>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="form-btn-con">
|
|
|
- <button class="form-btn" @click="submitFn">登录</button>
|
|
|
+ <button class="form-btn" form-type="submit">登录</button>
|
|
|
</view>
|
|
|
</form>
|
|
|
- <!-- 图文验证码 -->
|
|
|
- <uni-popup ref="imageTxtPopup" type="center">
|
|
|
- <popup-con title="图文验证码" :popBtn="popBtn" :changeImg="changeImg" @captchaImg="captchaVerify"></popup-con>
|
|
|
- </uni-popup>
|
|
|
+ <view class="authUserYs">
|
|
|
+ <u-checkbox v-model="isAuthuserYs" value="true" :size="30" :label-size="26" active-color="#2ab4e5" class="login-form-checkbox" @change="authuserChange">登录代表同意</u-checkbox>
|
|
|
+ <text @click="toYsPage()" style="vertical-align: text-top;font-size: 26rpx;text-decoration: underline;">乐色助手用户协议及隐私保护政策</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { isvalidPhone } from '@/libs/validate.js'
|
|
|
- import uniPopup from '@/components/uni-popup/uni-popup.vue'
|
|
|
- import popupCon from '@/components/uni-popup/popup-con.vue'
|
|
|
- import { loginPhone, sendVerifyCode, checkCustomerState } from '@/api/user.js'
|
|
|
- export default{
|
|
|
- components: {
|
|
|
- uniPopup,
|
|
|
- popupCon
|
|
|
- },
|
|
|
- data(){
|
|
|
- return{
|
|
|
- form: {
|
|
|
- phone: '',
|
|
|
- verifyCode: '',
|
|
|
- password: '',
|
|
|
- passwords: ''
|
|
|
- },
|
|
|
- nowVal: '获取验证码', // 按钮显示内容
|
|
|
- count: '', // 当前秒数
|
|
|
- timer: null, // 倒计时
|
|
|
- isDisable: false, // 是否禁止获取验证码
|
|
|
- popBtn: [], // name为操作按钮名称,color为操作按钮颜色值
|
|
|
- changeImg: false, // 是否重新更换图形验证码
|
|
|
- randomCode: '', // 图片验证码随机码
|
|
|
- wxcode: '',
|
|
|
- path: '/pages/index/index',
|
|
|
- lanuch: false,
|
|
|
- encode:'' // 二维码地址
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(opts) {
|
|
|
- console.log(opts,'----参数')
|
|
|
- this.encode=opts.encode
|
|
|
- console.log(opts,this.encode,'----参数')
|
|
|
- // 开启分享
|
|
|
- uni.showShareMenu({
|
|
|
- withShareTicket: true,
|
|
|
- menus: ['shareAppMessage', 'shareTimeline']
|
|
|
+import { checkVersionToLoadUpdate, setStorageForAppVersion,clzConfirm } from '@/libs/tools'
|
|
|
+import { isvalidPhone } from '@/libs/validate.js';
|
|
|
+import { login } from '@/api/user.js';
|
|
|
+import { getSysVersion } from '@/api/data.js'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ loginName: this.$store.state.vuex_user.account,
|
|
|
+ password: this.$store.state.vuex_user.password
|
|
|
+ },
|
|
|
+ isRemember: true, // 是否记住密码
|
|
|
+ isAuthuserYs: true, // 是否同意隐私政策
|
|
|
+ envTips: '',
|
|
|
+ buildType: '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.isRemember = this.$store.state.vuex_isRemember || true;
|
|
|
+ this.isAuthuserYs = this.$store.state.vuex_isUsrAuthYs || true;
|
|
|
+ this.envTips = getApp().globalData.envTips;
|
|
|
+ this.buildType = getApp().globalData.buildType;
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取微信login code
|
|
|
+ getWechatCode(){
|
|
|
+ const _this = this
|
|
|
+ wx.login({
|
|
|
+ success (res) {
|
|
|
+ if (res.code) {
|
|
|
+ //发起网络请求
|
|
|
+ let formData = JSON.parse(JSON.stringify(_this.form))
|
|
|
+ formData.code = res.code
|
|
|
+ _this.submitForm(formData)
|
|
|
+ } else {
|
|
|
+ console.log('登录失败,点击“登录”重试!' + res.errMsg)
|
|
|
+ }
|
|
|
+ }
|
|
|
})
|
|
|
- const {
|
|
|
- path,
|
|
|
- lanuch,
|
|
|
- encode
|
|
|
- } = option;
|
|
|
- // console.log(option,'----参数')
|
|
|
- this.lanuch = (lanuch + '') === 'true';
|
|
|
},
|
|
|
- onUnload() {
|
|
|
- uni.$off('getUserInfo')
|
|
|
+ // 表单提交
|
|
|
+ formSubmit() {
|
|
|
+ const _this = this;
|
|
|
+ // 表单校验
|
|
|
+ if (_this.form.loginName == '') {
|
|
|
+ uni.showToast({ icon: 'none', title: '请输入用户名' });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // if (!isvalidPhone(_this.form.loginName)) {
|
|
|
+ // uni.showToast({ icon: 'none', title: '请输入正确的手机号码' });
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ if (_this.form.password == '') {
|
|
|
+ uni.showToast({ icon: 'none', title: '请输入密码' });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (_this.form.password.length < 6 || _this.form.password.length > 12) {
|
|
|
+ uni.showToast({ icon: 'none', title: '请输入6-12位密码' });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!_this.isAuthuserYs) {
|
|
|
+ uni.showToast({ icon: 'none', title: '请同意并阅读用户隐私政策' });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ uni.showLoading({
|
|
|
+ title: '正在登录...'
|
|
|
+ });
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ // 获取微信login code
|
|
|
+ this.getWechatCode()
|
|
|
+ // #endif
|
|
|
+ // #ifndef MP-WEIXIN
|
|
|
+ this.submitForm(_this.form)
|
|
|
+ // #endif
|
|
|
},
|
|
|
- methods: {
|
|
|
- // 登录
|
|
|
- submitFn(){
|
|
|
- const _this = this
|
|
|
- // 表单校验
|
|
|
- if(this.form.phone == ''){
|
|
|
- uni.showToast({icon: 'none',title: '请输入登录手机号'})
|
|
|
- return
|
|
|
- }
|
|
|
- if(!isvalidPhone(this.form.phone)){
|
|
|
- uni.showToast({icon: 'none',title: '请输入正确的手机号码'})
|
|
|
- return
|
|
|
- }
|
|
|
- if(this.form.verifyCode == ''){
|
|
|
- uni.showToast({icon: 'none',title: '请输入验证码'})
|
|
|
- return
|
|
|
- }
|
|
|
- // 校验短信验证码是否正确
|
|
|
- const obj = {}
|
|
|
- obj.phone = _this.form.phone
|
|
|
- obj.random = _this.randomCode // 当前随机码
|
|
|
- obj.verifiCode = _this.form.verifyCode
|
|
|
- if(this.encode){
|
|
|
- obj.encode=this.encode
|
|
|
- }
|
|
|
- uni.login({
|
|
|
- provider: 'weixin',
|
|
|
- success(res) {
|
|
|
- console.log(res)
|
|
|
- _this.wxcode = res.code
|
|
|
- obj.code = res.code
|
|
|
- loginPhone(obj).then(res => {
|
|
|
- if(res.status == 200){
|
|
|
- console.log(res,'login success')
|
|
|
- getApp().globalData.token = res.data
|
|
|
- _this.$u.vuex('vuex_token',res.data)
|
|
|
- uni.$emit("getUserInfo")
|
|
|
- if (_this.path === '/pages/index/index' || _this.lanuch) {
|
|
|
- uni.reLaunch({
|
|
|
- url: _this.path
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.redirectTo({
|
|
|
- url: _this.path
|
|
|
- });
|
|
|
- }
|
|
|
- }else{
|
|
|
- uni.showToast({icon: 'none',title: res.message})
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 单击获取验证码
|
|
|
- getCodeValidate(){
|
|
|
- if(this.form.phone){
|
|
|
- if(!isvalidPhone(this.form.phone)){
|
|
|
- uni.showToast({icon: 'none',title: '请输入正确的手机号码'})
|
|
|
- return
|
|
|
- }else{
|
|
|
- // 先校验手机号用户是否禁用
|
|
|
- checkCustomerState({phone:this.form.phone}).then(res=>{
|
|
|
- if(res.status == 200) {
|
|
|
- this.retsetCode()
|
|
|
- // 图文验证码
|
|
|
- this.$refs.imageTxtPopup.open()
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: res.message,
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
+ submitForm(formData){
|
|
|
+ const _this = this;
|
|
|
+ // 登录
|
|
|
+ login(formData).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.status == 200) {
|
|
|
+ _this.$u.vuex('vuex_token', res.data);
|
|
|
+ getApp().globalData.token = res.data;
|
|
|
+ //登录成功将用户名密码存储到用户本地
|
|
|
+ if (_this.isRemember) {
|
|
|
+ //用户勾选“记住密码”
|
|
|
+ _this.$u.vuex('vuex_user.account', _this.form.loginName);
|
|
|
+ _this.$u.vuex('vuex_user.password', _this.form.password);
|
|
|
+ } else {
|
|
|
+ //用户没有勾选“记住密码”
|
|
|
+ _this.$u.vuex('vuex_user.account', '');
|
|
|
+ _this.$u.vuex('vuex_user.password', '');
|
|
|
+ _this.form.loginName = '';
|
|
|
+ _this.form.password = '';
|
|
|
}
|
|
|
- }else{
|
|
|
- uni.showToast({icon: 'none',title: '请先输入手机号'})
|
|
|
+ uni.setStorageSync('loginTimeOut', 'NO');
|
|
|
+ _this.toMain();
|
|
|
+ } else {
|
|
|
+ uni.showToast({ icon: 'none', title: res.message });
|
|
|
}
|
|
|
- },
|
|
|
- // 开始倒计时
|
|
|
- getCodeFun(){
|
|
|
- const TIME_COUNT = 60
|
|
|
- if (!this.timer) {
|
|
|
- this.count = TIME_COUNT
|
|
|
- this.timer = setInterval(() => {
|
|
|
- if (this.count > 0 && this.count <= TIME_COUNT) {
|
|
|
- this.count--
|
|
|
- this.nowVal = this.count + 's后重发'
|
|
|
- this.isDisable = true
|
|
|
- } else {
|
|
|
- this.nowVal = '重新获取验证码'
|
|
|
- clearInterval(this.timer)
|
|
|
- this.timer = null
|
|
|
- this.isDisable = false
|
|
|
- }
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
- },
|
|
|
- // 验证图片验证码
|
|
|
- captchaVerify(code, nowRandomCode){
|
|
|
- const _this = this
|
|
|
- let obj = {}
|
|
|
- obj.phone = this.form.phone
|
|
|
- obj.random = nowRandomCode
|
|
|
- obj.code = code
|
|
|
- // 发送短信验证码
|
|
|
- sendVerifyCode(obj).then(res => {
|
|
|
- console.log(JSON.stringify(res))
|
|
|
- if(res.status == 200){ // 验证码输入正确
|
|
|
- _this.randomCode = nowRandomCode // 图片验证码随机码
|
|
|
- // 关闭 图形验证码 弹框
|
|
|
- _this.$refs.imageTxtPopup.close()
|
|
|
- // 开启倒计时
|
|
|
- _this.getCodeFun()
|
|
|
- uni.showToast({icon: 'none',title: '验证码发送成功'})
|
|
|
- }else { // 验证码输入错误
|
|
|
- _this.retsetCode()
|
|
|
- uni.showToast({icon: 'none',title: res.message})
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 重新触发获取图片验证码
|
|
|
- retsetCode(){
|
|
|
- const _this = this
|
|
|
- _this.form.verifyCode = ''
|
|
|
- _this.randomCode = ''
|
|
|
- // 切换验证码重新校验
|
|
|
- _this.changeImg = false
|
|
|
- _this.$nextTick(function(){
|
|
|
- _this.changeImg = true
|
|
|
- })
|
|
|
- }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ toMain() {
|
|
|
+ // 跳转到首页
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/index'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 忘记密码
|
|
|
+ forgetPass() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/login/forget-pass?username=' + this.form.loginName
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 判断是否记住密码
|
|
|
+ rememberChange(e) {
|
|
|
+ this.isRemember = e.value;
|
|
|
+ },
|
|
|
+ // 隐私
|
|
|
+ authuserChange(e) {
|
|
|
+ this.isAuthuserYs = e.value;
|
|
|
+ this.$u.vuex('vuex_isUsrAuthYs', this.isAuthuserYs);
|
|
|
+ },
|
|
|
+ toYsPage() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/agreement/agreement'
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
+};
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
- @import './login.scss';
|
|
|
-</style>
|
|
|
+@import './loginPw.scss';
|
|
|
+</style>
|