571 lines
13 KiB
Vue
571 lines
13 KiB
Vue
<template>
|
|
<view :style="viewColor" class="wrapper">
|
|
<view class="bag">
|
|
<img :src="`${domain}/static/images/logo_bgh.png`" alt="" srcset="">
|
|
</view>
|
|
<view class="system-height" :style="{ height: statusBarHeight }"></view>
|
|
<!-- #ifdef MP -->
|
|
<view class="title-bar" style="height: 43px;">
|
|
<view class="icon" @click="back" v-if="!isHome">
|
|
<text class="iconfont icon-fanhui"></text>
|
|
</view>
|
|
<view class="icon" @click="home" v-else>
|
|
<text class="iconfont icon-shouye2"></text>
|
|
</view>
|
|
商城登录
|
|
</view>
|
|
<!-- #endif -->
|
|
<view class="merchant-msg">
|
|
<img :src="login_logo" />
|
|
<view class="name">
|
|
{{site_name}}
|
|
</view>
|
|
</view>
|
|
<view class="wechat_login">
|
|
<view class="btn-wrapper">
|
|
<!-- #ifdef H5 -->
|
|
<button hover-class="none" @click="wechatLogin" class="bg-theme btn1">微信登录</button>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP -->
|
|
<template>
|
|
<!--受否配置微信公众号-->
|
|
<button class="bg-theme btn1" v-if="wechat_phone_switch==1 && bindPhone" open-type="getPhoneNumber"
|
|
@getphonenumber="getphonenumber">授权登录</button>
|
|
<button v-else class="bg-theme btn1" @click="getAuthLogin">
|
|
授权登录
|
|
</button>
|
|
</template>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
<view class="protocol" v-if="!canGetPrivacySetting">
|
|
<checkbox-group @click.stop='ChangeIsDefault'>
|
|
<checkbox :class="inAnimation?'trembling':''" @animationend='inAnimation=false'
|
|
:checked="protocol ? true : false" /> <text @click.stop='ChangeIsDefault'>已阅读并同意</text>
|
|
<text class="main-color" @click.stop="privacy(4)">《用户协议》</text>
|
|
与<text class="main-color" @click.stop="privacy(3)">《隐私协议》</text>
|
|
</checkbox-group>
|
|
</view>
|
|
<block>
|
|
<editUserModal :isShow="isShow" @closeEdit="closeEdit" @editSuccess="editSuccess">
|
|
</editUserModal>
|
|
</block>
|
|
<!-- #ifdef MP -->
|
|
<privacyAgreementPopup v-if="canGetPrivacySetting" @onReject="onReject" @onAgree="onAgree">
|
|
</privacyAgreementPopup>
|
|
<!-- #endif -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
const app = getApp();
|
|
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
|
|
import editUserModal from '@/components/eidtUserModal/index.vue'
|
|
import privacyAgreementPopup from '@/components/privacyAgreementPopup/index.vue'
|
|
import { commonAuth } from '@/api/public';
|
|
import { EXPIRES_TIME, USER_INFO } from '@/config/cache';
|
|
import { getUserInfo,loginMpPhone,getAuthType } from '@/api/user.js';
|
|
import Routine from '@/libs/routine';
|
|
import wechat from '@/libs/wechat';
|
|
import auth from '@/libs/wechat.js';
|
|
import { HTTP_REQUEST_URL } from '@/config/app';
|
|
import { isWeixin,configMap } from "@/utils";
|
|
import Cache from '@/utils/cache';
|
|
import { toLogin } from '@/libs/login.js';
|
|
import { mapGetters } from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
domain: HTTP_REQUEST_URL,
|
|
isUp: false,
|
|
canClose: true,
|
|
phone: '',
|
|
statusBarHeight: statusBarHeight,
|
|
isHome: false,
|
|
isPhoneBox: false,
|
|
protocol: false,
|
|
isShow: false,
|
|
logoUrl: '',
|
|
code: '',
|
|
codeVal: "",
|
|
authKey: '',
|
|
options: '',
|
|
userInfo: {},
|
|
codeNum: 0,
|
|
canUseGetUserProfile: false,
|
|
canGetPrivacySetting: false,
|
|
inAnimation: false,
|
|
colorStatus: uni.getStorageSync('color_status'),
|
|
mp_is_new: this.$Cache.get('MP_VERSION_ISNEW') || false,
|
|
configData: Cache.get('BASIC_CONFIG'),
|
|
bindPhone: false,
|
|
wechat_phone_switch: 0,
|
|
};
|
|
},
|
|
computed:{
|
|
...configMap({login_logo:'',site_name: '',first_avatar_switch: ''}, mapGetters(['isLogin','viewColor'])),
|
|
},
|
|
components: {
|
|
editUserModal,
|
|
privacyAgreementPopup
|
|
},
|
|
watch:{
|
|
|
|
},
|
|
onLoad(options) {
|
|
if (uni.getUserProfile) {
|
|
this.canUseGetUserProfile = true
|
|
}
|
|
// #ifdef MP
|
|
if (wx.getPrivacySetting) {
|
|
this.canGetPrivacySetting = true
|
|
}
|
|
// #endif
|
|
let that = this;
|
|
let pages = getCurrentPages();
|
|
let prePage = pages[pages.length - 2];
|
|
if (prePage && prePage.route == 'pages/order_addcart/order_addcart') {
|
|
this.isHome = true;
|
|
} else {
|
|
this.isHome = false;
|
|
}
|
|
},
|
|
onReady(){
|
|
this.getCode()
|
|
},
|
|
created() {
|
|
// #ifdef MP
|
|
if (wx.getUserProfile) {
|
|
this.canUseGetUserProfile = true
|
|
}
|
|
// #endif
|
|
},
|
|
methods: {
|
|
// 小程序 22.11.8日删除getUserProfile 接口获取用户昵称头像
|
|
getCode() {
|
|
let that = this
|
|
// #ifdef MP
|
|
Routine.getCode().then(code => {
|
|
uni.hideLoading();
|
|
that.code = code;
|
|
let data = {code: code, spread: app.globalData.spid}
|
|
getAuthType(data).then(res => {
|
|
that.bindPhone = res.data.bindPhone
|
|
that.wechat_phone_switch = res.data.wechat_phone_switch
|
|
uni.setStorageSync('auth_token',res.data.key);
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err,
|
|
duration: 2000
|
|
});
|
|
});
|
|
}).catch(e => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: '登录失败',
|
|
duration: 2000
|
|
});
|
|
})
|
|
// #endif
|
|
// #ifndef MP
|
|
that.code = 1;
|
|
// #endif
|
|
},
|
|
getAuthLogin() {
|
|
let self = this;
|
|
if(!self.protocol && !self.canGetPrivacySetting){
|
|
return self.$util.Tips({
|
|
title: '请勾选用户协议与隐私政策'
|
|
});
|
|
}
|
|
uni.showLoading({
|
|
title: "正在登录中"
|
|
});
|
|
self.canUseGetUserProfile = false;
|
|
Routine.getUserProfile()
|
|
.then(res => {
|
|
let userInfo = res.userInfo;
|
|
userInfo.code = self.code;
|
|
userInfo.spread = app.globalData.spid; //获取推广人ID
|
|
userInfo.spread_code = app.globalData.code; //获取推广人分享二维码ID
|
|
commonAuth({
|
|
auth: {
|
|
type:'routine',
|
|
auth: userInfo
|
|
}
|
|
}).then(res=>{
|
|
if(res.data.status == 200){
|
|
let time = res.data.result.expires_time - Cache.time();
|
|
self.$store.commit('UPDATE_USERINFO', res.data.result.user);
|
|
self.$store.commit('LOGIN', {token:res.data.result.token, time:time});
|
|
self.$store.commit('SETUID', res.data.result.user.uid);
|
|
Cache.set(EXPIRES_TIME,res.data.result.expires_time,time);
|
|
Cache.set(USER_INFO,res.data.result.user,time);
|
|
if(res.data.result.user.isNew && self.mp_is_new && self.first_avatar_switch==1){
|
|
uni.hideLoading();
|
|
self.isShow = true;
|
|
}else{
|
|
this.$util.Tips({
|
|
title: '授权成功',
|
|
icon: 'success'
|
|
}, {
|
|
tab: 3
|
|
});
|
|
}
|
|
}else{
|
|
uni.setStorageSync('auth_token',res.data.result.key);
|
|
return uni.navigateTo({
|
|
url:'/pages/users/login/index'
|
|
})
|
|
}
|
|
}).catch(res => {
|
|
uni.hideLoading();
|
|
console.log('auth'+res)
|
|
uni.showToast({
|
|
title: res,
|
|
icon: 'none',
|
|
duration: 2000,
|
|
});
|
|
});
|
|
})
|
|
.catch(res => {
|
|
uni.hideLoading();
|
|
console.log('Routine'+res)
|
|
uni.showToast({
|
|
title: res.errMsg,
|
|
icon: 'none',
|
|
duration: 2000,
|
|
});
|
|
});
|
|
},
|
|
onAgree() {
|
|
this.protocol = true
|
|
},
|
|
ChangeIsDefault(e) {
|
|
this.$set(this, 'protocol', !this.protocol);
|
|
},
|
|
editSuccess() {
|
|
this.isShow = false
|
|
},
|
|
closeEdit() {
|
|
this.isShow = false
|
|
this.$util.Tips({
|
|
title: '登录成功',
|
|
icon: 'success'
|
|
}, {
|
|
tab: 3
|
|
});
|
|
},
|
|
onReject() {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
},
|
|
// #ifdef MP
|
|
back() {
|
|
if (this.isLogin) {
|
|
this.$store.commit('LOGIN', {
|
|
token: '',
|
|
time: 0
|
|
});
|
|
}
|
|
uni.navigateBack();
|
|
},
|
|
// #endif
|
|
// #ifndef MP
|
|
back() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},
|
|
// #endif
|
|
home() {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
},
|
|
// 弹窗关闭
|
|
maskClose(new_user) {
|
|
this.isUp = false;
|
|
// #ifdef MP
|
|
if (new_user) {
|
|
this.isShow = true
|
|
}
|
|
// #endif
|
|
},
|
|
bindPhoneClose(data) {
|
|
this.isPhoneBox = false;
|
|
if (data.isStatus) {
|
|
// #ifdef MP
|
|
this.getUserInfo(data.new_user)
|
|
// #endif
|
|
// #ifndef MP
|
|
this.$util.Tips({
|
|
title: '登录成功',
|
|
icon: 'success'
|
|
}, {
|
|
tab: 3
|
|
});
|
|
// #endif
|
|
}
|
|
},
|
|
// #ifdef MP
|
|
// 小程序获取手机号码
|
|
getphonenumber(e) {
|
|
let that = this;
|
|
if(!that.protocol && !that.canGetPrivacySetting){
|
|
return that.$util.Tips({
|
|
title: '请勾选用户协议与隐私政策'
|
|
});
|
|
}else{
|
|
if(e.detail.iv){
|
|
Routine.getCode().then(code => {
|
|
uni.hideLoading();
|
|
that.code = code;
|
|
loginMpPhone({
|
|
iv:e.detail.iv,
|
|
encryptedData:e.detail.encryptedData,
|
|
code:code,
|
|
auth_token: uni.getStorageSync('auth_token'),
|
|
}).then(({
|
|
data
|
|
}) => {
|
|
const backUrl = that.$Cache.get('login_back_url') || "/pages/index/index";
|
|
that.$Cache.clear('login_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);
|
|
let method
|
|
let indexPat = ['/pages/index/index', '/pages/order_addcart/order_addcart', '/pages/goods_cate/goods_cate',
|
|
'/pages/user/index','/pages/plant_grass/index'
|
|
]
|
|
if (indexPat.includes(that.getPath(backUrl))) {
|
|
method = 'switchTab'
|
|
} else {
|
|
method = 'navigateTo'
|
|
}
|
|
if (that.getPath(backUrl) === '/pages/users/login/index') {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
});
|
|
return
|
|
}
|
|
uni[method]({
|
|
url: backUrl
|
|
});
|
|
})
|
|
.catch(res => {
|
|
that.$util.Tips({
|
|
title: res
|
|
});
|
|
});
|
|
}).catch(e => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: '登录失败',
|
|
duration: 2000
|
|
});
|
|
})
|
|
}
|
|
}
|
|
},
|
|
// #endif
|
|
getPath(url) {
|
|
if (url.indexOf("?") != -1) {
|
|
url = url.split("?")[0];
|
|
console.log(url);
|
|
}
|
|
return url
|
|
},
|
|
/**
|
|
* 获取个人用户信息
|
|
*/
|
|
getUserInfo(new_user, back_url) {
|
|
let that = this;
|
|
getUserInfo().then(res => {
|
|
uni.hideLoading();
|
|
that.userInfo = res.data;
|
|
that.$store.commit('SETUID', res.data.uid);
|
|
that.$store.commit('UPDATE_USERINFO', res.data);
|
|
if (new_user) {
|
|
this.isShow = true
|
|
} else {
|
|
// #ifdef MP
|
|
that.$util.Tips({
|
|
title: '登录成功',
|
|
icon: 'success'
|
|
}, {
|
|
tab: 3
|
|
});
|
|
// #endif
|
|
// #ifndef MP
|
|
that.$util.Tips({
|
|
title: '登录成功',
|
|
icon: 'success'
|
|
}, {
|
|
tab: 4,
|
|
url: back_url || '/pages/user/index'
|
|
});
|
|
// #endif
|
|
}
|
|
}).catch(err => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: err.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
});
|
|
},
|
|
privacy(type) {
|
|
uni.navigateTo({
|
|
url: "/pages/users/privacy/index?type=" + type
|
|
})
|
|
},
|
|
// #ifdef H5
|
|
// 公众号登录
|
|
wechatLogin() {
|
|
let that = this;
|
|
if(!this.protocol){
|
|
return this.$util.Tips({
|
|
title: '请勾选用户协议与隐私政策'
|
|
});
|
|
}else{
|
|
auth.oAuth();
|
|
}
|
|
},
|
|
// #endif
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #fff;
|
|
}
|
|
/deep/uni-checkbox .uni-checkbox-input,
|
|
/deep/checkbox .wx-checkbox-input{
|
|
border-radius: 100%;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
/deep/checkbox .uni-checkbox-input.uni-checkbox-input-checked,
|
|
/deep/checkbox .wx-checkbox-input.wx-checkbox-input-checked {
|
|
border: 1px solid var(--view-theme)!important;
|
|
background-color: var(--view-theme)!important;
|
|
}
|
|
.wrapper {
|
|
position: relative;
|
|
height: 100vh;
|
|
.bag {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
opacity: .8;
|
|
z-index: -1;
|
|
/* #ifdef H5 */
|
|
z-index: 0;
|
|
/* #endif */
|
|
img {
|
|
width: 100%;
|
|
height: 838rpx;
|
|
}
|
|
}
|
|
.merchant-msg {
|
|
padding-top: 252rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
z-index: 2;
|
|
/* #ifdef H5 */
|
|
position: relative;
|
|
/* #endif */
|
|
img {
|
|
width: 152rpx;
|
|
height: 152rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.name {
|
|
font-size: 40rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 56rpx;
|
|
margin-top: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
.wechat_login {
|
|
margin-top: 96rpx;
|
|
.img image {
|
|
width: 100%;
|
|
}
|
|
.btn-wrapper {
|
|
padding: 0 66rpx;
|
|
button {
|
|
width: 100%;
|
|
height: 86rpx;
|
|
line-height: 86rpx;
|
|
margin-bottom: 40rpx;
|
|
border-radius: 120rpx;
|
|
font-size: 30rpx;
|
|
&.btn1 {
|
|
color: #fff;
|
|
background: var(--view-theme);
|
|
}
|
|
&.btn2 {
|
|
color: #666666;
|
|
border: 1px solid #DDDDDD;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.title-bar {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 34rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 48rpx;
|
|
}
|
|
.icon {
|
|
position: absolute;
|
|
left: 30rpx;
|
|
top: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
}
|
|
.protocol {
|
|
position: fixed;
|
|
bottom: 52rpx;
|
|
left: 0;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
color: #999999;
|
|
font-size: 24rpx;
|
|
line-height: 22rpx;
|
|
text-align: center;
|
|
bottom: calc(52rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
|
bottom: calc(52rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
|
.main-color {
|
|
color: var(--view-theme);
|
|
}
|
|
.trembling {
|
|
animation: shake 0.6s;
|
|
}
|
|
}
|
|
</style> |