435 lines
13 KiB
Vue
435 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view class="login_box">
|
|||
|
|
<image class="image" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/login-bg.png" mode="">
|
|||
|
|
</image>
|
|||
|
|
|
|||
|
|
<view class="cont_box">
|
|||
|
|
<view class="headline">
|
|||
|
|
<view class="title">里海数字平台</view>
|
|||
|
|
<view class="text">输入手机号获取验证码登录</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="form_box">
|
|||
|
|
<view class="from_input">
|
|||
|
|
<view class="phone_iput">
|
|||
|
|
<input type="text" placeholder="输入手机号码" class="text_input" v-model="account">
|
|||
|
|
</view>
|
|||
|
|
<view class="codeIput_box">
|
|||
|
|
<input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha">
|
|||
|
|
<button v-debounce class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''"
|
|||
|
|
@click="handleVerify">
|
|||
|
|
{{ text }}
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="protocol">
|
|||
|
|
<checkbox-group class="checkgroup" @change='isAgree=!isAgree'>
|
|||
|
|
<checkbox class="checkbox" :checked="isAgree ? true : false" />
|
|||
|
|
<text class="protocol_text">登录及代表同意<text @click="userAgree" class="font_pro">用户协议</text>与<text
|
|||
|
|
@click="userPrivacyAgree" class="font_pro">隐私政策</text></text>
|
|||
|
|
</checkbox-group>
|
|||
|
|
</view>
|
|||
|
|
<view class="logon" @click="loginMobile">登录</view>
|
|||
|
|
<!-- #ifdef APP-PLUS -->
|
|||
|
|
<view class="iconfont icon-weixin weixin" @click="wxLogin"></view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<Verify @success="success" :captchaType="'blockPuzzle'" :imgSize="{ width: '330px', height: '155px' }" ref="verify">
|
|||
|
|
</Verify>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { commonAuth, bindMp } from '@/api/public';
|
|||
|
|
import { loginMobile, registerVerify, getSiteAPI } from '@/api/user'
|
|||
|
|
import { LOGO_URL, USER_INFO, EXPIRES_TIME } from '@/config/cache';
|
|||
|
|
import Cache from '@/utils/cache';
|
|||
|
|
import sendVerifyCode from "@/mixins/SendVerifyCode";
|
|||
|
|
import Verify from '@/components/verify/verify.vue';
|
|||
|
|
const BACK_URL = "login_back_url";
|
|||
|
|
export default {
|
|||
|
|
mixins: [sendVerifyCode],
|
|||
|
|
components: {
|
|||
|
|
Verify
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
isAgree: true,
|
|||
|
|
account: "",
|
|||
|
|
captcha: '',
|
|||
|
|
appUserInfo: null, // 微信登录保存的用户信息
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(e) {
|
|||
|
|
// console.log('options', e)
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// App微信登录
|
|||
|
|
wxLogin() {
|
|||
|
|
if (!this.isAgree) return this.$util.Tips({
|
|||
|
|
title: '请勾选用户协议与隐私政策'
|
|||
|
|
});
|
|||
|
|
let self = this
|
|||
|
|
this.account = ''
|
|||
|
|
this.captcha = ''
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '登录中'
|
|||
|
|
})
|
|||
|
|
uni.login({
|
|||
|
|
provider: 'weixin',
|
|||
|
|
// onlyAuthorize: true,
|
|||
|
|
success: function(loginRes) {
|
|||
|
|
self.appUserInfo = loginRes
|
|||
|
|
self.wxLoginApi()
|
|||
|
|
},
|
|||
|
|
fail(error) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '登录失败',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
wxLoginApi() {
|
|||
|
|
const that = this
|
|||
|
|
// console.log('appUserInfo', that.appUserInfo);
|
|||
|
|
commonAuth({
|
|||
|
|
auth: {
|
|||
|
|
type: 'app_wechat',
|
|||
|
|
auth: {
|
|||
|
|
code: that.appUserInfo.authResult.access_token,
|
|||
|
|
openid: that.appUserInfo.authResult.openid,
|
|||
|
|
phone: this.account,
|
|||
|
|
// code: '68_CTElk8-PqBEmCksAPUQ8CYBEPbArY6MsSSjn8DjT_ZUhbkpGSwJECWjzYBEmvvkZloz2-E20smA8l7uNhGyGbuzqVxV9wVx-bAazxnSL_Us',
|
|||
|
|
// openid: "oRrdQt-mZ3UOPossISgiDt-aEWNg",
|
|||
|
|
// phone: this.account,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}).then(res => {
|
|||
|
|
const data = res.data;
|
|||
|
|
// console.log('res', data);
|
|||
|
|
if (res.data.status == 200) {
|
|||
|
|
that.$Cache.clear(BACK_URL);
|
|||
|
|
that.$store.commit("LOGIN", {
|
|||
|
|
'token': data.result.token,
|
|||
|
|
'time': data.result.exp
|
|||
|
|
});
|
|||
|
|
that.$store.commit("SETUID", data.result.user.uid);
|
|||
|
|
that.$store.commit('UPDATE_USERINFO', data.result.user);
|
|||
|
|
let time = data.expires_time - Cache.time();
|
|||
|
|
// #ifdef MP
|
|||
|
|
Cache.set(EXPIRES_TIME, data.expires_time, time);
|
|||
|
|
Cache.set(USER_INFO, data.user, time);
|
|||
|
|
// #endif
|
|||
|
|
if (data.user.no_update === 1) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/users/completeMsg/completeMsg?phone=${data.user.phone}`
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
getSiteAPI().then(res => that.$store.commit('setMyInfo', res))
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url: '/pages/user/index'
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
that.auth_token = res.data.result.key;
|
|||
|
|
that.bindStatus = true;
|
|||
|
|
}
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}).catch(res => {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.message || res,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
handleVerify() {
|
|||
|
|
let that = this;
|
|||
|
|
if (!that.account) return that.$util.Tips({
|
|||
|
|
title: '请输入手机号码'
|
|||
|
|
});
|
|||
|
|
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
|
|||
|
|
title: '请输入正确的手机号码'
|
|||
|
|
});
|
|||
|
|
if (!that.isAgree) return that.$util.Tips({
|
|||
|
|
title: '请勾选用户协议与隐私政策'
|
|||
|
|
});
|
|||
|
|
that.$refs.verify.show();
|
|||
|
|
},
|
|||
|
|
success(data) {
|
|||
|
|
this.$refs.verify.hide();
|
|||
|
|
this.code(data);
|
|||
|
|
},
|
|||
|
|
async loginMobile() {
|
|||
|
|
// 验证码登录
|
|||
|
|
let that = this;
|
|||
|
|
if (!that.account) return that.$util.Tips({
|
|||
|
|
title: '请输入手机号码'
|
|||
|
|
});
|
|||
|
|
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
|
|||
|
|
title: '请输入正确的手机号码'
|
|||
|
|
});
|
|||
|
|
if (!that.captcha) return that.$util.Tips({
|
|||
|
|
title: '请输入验证码'
|
|||
|
|
});
|
|||
|
|
if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
|
|||
|
|
title: '请输入正确的验证码'
|
|||
|
|
});
|
|||
|
|
if (!that.isAgree) return that.$util.Tips({
|
|||
|
|
title: '请勾选用户协议与隐私政策'
|
|||
|
|
});
|
|||
|
|
loginMobile({
|
|||
|
|
auth_token: uni.getStorageSync('auth_token'),
|
|||
|
|
phone: that.account,
|
|||
|
|
sms_code: that.captcha,
|
|||
|
|
spread: that.$Cache.get("spread"),
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
user_type: 'app',
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef H5
|
|||
|
|
user_type: 'h5',
|
|||
|
|
// #endif
|
|||
|
|
})
|
|||
|
|
.then(({
|
|||
|
|
data
|
|||
|
|
}) => {
|
|||
|
|
// #ifdef MP
|
|||
|
|
//用户没有绑定openid，授权并绑定
|
|||
|
|
if (data.user.wechat_user_id === 0) {
|
|||
|
|
let that = this
|
|||
|
|
wx.getUserInfo({
|
|||
|
|
success: function(res) {
|
|||
|
|
const encryptedData = res.encryptedData
|
|||
|
|
const iv = res.iv
|
|||
|
|
wx.login({
|
|||
|
|
success(res) {
|
|||
|
|
if (res.code) {
|
|||
|
|
bindMp({ code: res.code, iv: iv, encryptedData: encryptedData, phone: that
|
|||
|
|
.account }).then(res => {
|
|||
|
|
// console.log(res);
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
// console.log('登录失败！' + res.errMsg)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
fail(e) {
|
|||
|
|
// console.log('登录失败！' + res.errMsg)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
// console.log('验证码登录', data);
|
|||
|
|
// let time = data.expires_time - Cache.time();
|
|||
|
|
// const backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
|
|||
|
|
// that.$Cache.clear(BACK_URL);
|
|||
|
|
// that.$store.commit("LOGIN", {
|
|||
|
|
// 'token': data.token,
|
|||
|
|
// 'time': data.exp
|
|||
|
|
// });
|
|||
|
|
// that.$store.commit("SETUID", data.user.uid);
|
|||
|
|
// that.$store.commit('UPDATE_USERINFO', data.user);
|
|||
|
|
// // Cache.set(EXPIRES_TIME, data.result.expires_time, time);
|
|||
|
|
// // #ifdef MP
|
|||
|
|
// Cache.set(EXPIRES_TIME, data.expires_time, time);
|
|||
|
|
// Cache.set(USER_INFO, data.user, time);
|
|||
|
|
// // #endif
|
|||
|
|
// let method
|
|||
|
|
// let indexPat = ['/pages/index/index', '/pages/order_addcart/order_addcart',
|
|||
|
|
// '/pages/goods_cate/goods_cate',
|
|||
|
|
// '/pages/user/index'
|
|||
|
|
// ]
|
|||
|
|
// if (indexPat.includes(this.getPath(backUrl))) {
|
|||
|
|
// method = 'switchTab'
|
|||
|
|
// } else {
|
|||
|
|
// method = 'navigateTo'
|
|||
|
|
// }
|
|||
|
|
// if (this.getPath(backUrl) === '/pages/users/login/index') {
|
|||
|
|
// uni.switchTab({
|
|||
|
|
// url: '/pages/index/index'
|
|||
|
|
// });
|
|||
|
|
// return
|
|||
|
|
// }
|
|||
|
|
// uni[method]({
|
|||
|
|
// url: backUrl
|
|||
|
|
// });
|
|||
|
|
})
|
|||
|
|
.catch(res => {
|
|||
|
|
that.$util.Tips({
|
|||
|
|
title: res
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
async code(data) {
|
|||
|
|
let that = this;
|
|||
|
|
if (!that.account) return that.$util.Tips({
|
|||
|
|
title: '请输入手机号码'
|
|||
|
|
});
|
|||
|
|
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
|
|||
|
|
title: '请输入正确的手机号码'
|
|||
|
|
});
|
|||
|
|
// if (that.formItem == 2) that.type = "register";
|
|||
|
|
await registerVerify({
|
|||
|
|
phone: that.account,
|
|||
|
|
type: 'login',
|
|||
|
|
key: that.keyCode,
|
|||
|
|
// code: that.codeVal,
|
|||
|
|
toke: data.token,
|
|||
|
|
captchaType: 'blockPuzzle',
|
|||
|
|
captchaVerification: data.captchaVerification
|
|||
|
|
})
|
|||
|
|
.then(res => {
|
|||
|
|
that.$util.Tips({
|
|||
|
|
title: res.message
|
|||
|
|
});
|
|||
|
|
that.sendCode();
|
|||
|
|
})
|
|||
|
|
.catch(res => {
|
|||
|
|
that.$util.Tips({
|
|||
|
|
title: res
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getPath(url) {
|
|||
|
|
if (url.indexOf("?") != -1) {
|
|||
|
|
url = url.split("?")[0];
|
|||
|
|
// console.log(url);
|
|||
|
|
}
|
|||
|
|
return url
|
|||
|
|
},
|
|||
|
|
userAgree() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/users/user_about/index?from=sys_user_agree'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
userPrivacyAgree() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/users/user_about/index?from=sys_userr_privacy'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login_box {
|
|||
|
|
|
|||
|
|
.image {
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 812.28rpx;
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: -1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logon {
|
|||
|
|
width: 526.32rpx;
|
|||
|
|
height: 84.21rpx;
|
|||
|
|
background-color: #009E56;
|
|||
|
|
border-radius: 100px;
|
|||
|
|
color: #fff;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 84.21rpx;
|
|||
|
|
font-size: 29.82rpx;
|
|||
|
|
margin-top: 78.95rpx;
|
|||
|
|
margin-left: 50%;
|
|||
|
|
transform: translate(-50%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cont_box {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 208.77rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%);
|
|||
|
|
width: 682.46rpx;
|
|||
|
|
|
|||
|
|
.headline {
|
|||
|
|
margin-left: 43.86rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 45.61rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
font-size: 29.82rpx;
|
|||
|
|
margin-top: 14.04rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form_box {
|
|||
|
|
margin-top: 196.49rpx;
|
|||
|
|
width: 682.46rpx;
|
|||
|
|
height: 701.75rpx;
|
|||
|
|
padding: 61.4rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
box-shadow: 0px 3px 6px 1px rgba(0, 106, 53, 0.2);
|
|||
|
|
border-radius: 16px 16px 16px 16px;
|
|||
|
|
|
|||
|
|
.protocol {
|
|||
|
|
margin-top: 70.18rpx;
|
|||
|
|
font-size: 26.32rpx;
|
|||
|
|
|
|||
|
|
.checkgroup {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.font_pro,
|
|||
|
|
.font_pro {
|
|||
|
|
color: #68A2FF;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.from_input {
|
|||
|
|
|
|||
|
|
.phone_iput,
|
|||
|
|
.codeIput_box {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 87.72rpx;
|
|||
|
|
border-bottom: 1px solid #b7b7b7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.codeIput_box {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-top: 47.37rpx;
|
|||
|
|
|
|||
|
|
.code {
|
|||
|
|
font-size: 29.82rpx;
|
|||
|
|
color: #68A2FF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.on {
|
|||
|
|
color: #AEAEAE;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.weixin {
|
|||
|
|
color: #009E56;
|
|||
|
|
font-size: 45.61rpx;
|
|||
|
|
margin: 35.09rpx auto;
|
|||
|
|
width: 87.72rpx;
|
|||
|
|
height: 87.72rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 87.72rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|