1295 lines
30 KiB
Vue
1295 lines
30 KiB
Vue
<template>
|
||
<view style="background-color: #fff;">
|
||
<!-- <z-nav-bar :shadow="false"></z-nav-bar> -->
|
||
<!-- 公共组件-每个页面必须引入 -->
|
||
<public-module></public-module>
|
||
<view class="logo_bg">
|
||
<text>您好，<br>欢迎来到 吴门医述</text>
|
||
<image src="../../static/logo.png" mode="aspectFit" class="icon_hua_1"></image>
|
||
<image src="../../static/logo.png" mode="aspectFit" class="icon_hua_2"></image>
|
||
</view>
|
||
<view class="register_page">
|
||
|
||
|
||
|
||
<view class="login_method">
|
||
<view class="title" :class="{ active: type == 2000 }" v-if="type == 2000">验证码登录/注册</view>
|
||
<view class="title" :class="{ active: type == 1000 }" v-if="type == 1000">密码登录</view>
|
||
<!-- <view class="title" :class="{ active: type == 2000 }" @click="type = 2000">验证码登录/注册</view>
|
||
<view class="title" :class="{ active: type == 1000 }" @click="type = 1000">密码登录</view> -->
|
||
</view>
|
||
|
||
<!-- 验证码登录 -->
|
||
<view v-if="type == 2000">
|
||
<view class="flexbox" style=" margin-top: 50rpx;">
|
||
<view class="input_tit emaPho" style="margin-top: 0; margin-right: 20rpx;">
|
||
<view @click="brand=3000" :class="{ active: brand == 3000 }">手机号</view>
|
||
<span>/</span>
|
||
<view @click="brand=4000" :class="{ active: brand == 4000 }">邮箱</view>
|
||
</view>
|
||
</view>
|
||
<!-- 带区号手机号 -->
|
||
<view class="flexbox" v-if="brand == 3000" style="margin:36rpx 0; justify-content: space-between;">
|
||
<!-- <view class="triangle borderBottom phoneNumberInput" style="width: 150rpx;">
|
||
<input type="number" v-model="quCode" placeholder="区号" placeholder-class="grey" />
|
||
|
||
</view> -->
|
||
<view class="quhao">
|
||
<uni-data-select class="myselect" placeholder="请选择区号" v-model="quCode" :localdata="quCodeList"
|
||
style="height: 30rpx !important;" @change="quChange"></uni-data-select>
|
||
</view>
|
||
<view class="triangle borderBottom phoneNumberInput"
|
||
:clasfs="[type == 1000 ? 'left_triangle': 'right_triangle']">
|
||
<input type="number" v-model="phone" @input="onInput" placeholder="请输入您的手机号"
|
||
placeholder-class="grey" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 不带区号 -->
|
||
<!-- <view class="triangle borderBottom phoneNumberInput input_box"
|
||
:clasfs="[type == 1000 ? 'left_triangle': 'right_triangle']">
|
||
<input type="number" v-model="phone" @input="onInput" placeholder="请输入您的手机号" placeholder-class="grey" />
|
||
</view> -->
|
||
|
||
<!-- 邮箱 -->
|
||
<view class="input_box" v-if="brand == 4000">
|
||
<input v-model="email" placeholder="请输入您的邮箱" placeholder-class="grey" @input="onInput" />
|
||
</view>
|
||
<view class="input_tit">验证码</view>
|
||
<view class="input_box">
|
||
<input v-model="code" placeholder="请输入您的验证码" placeholder-class="grey" @input="onInput" maxlength="6"
|
||
@confirm="onSubmit" />
|
||
<button class="active" @click="onSetCode">{{ codeText }}</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 密码登录 -->
|
||
<view v-if="type == 1000">
|
||
<!-- 手机号/邮箱 -->
|
||
<view class="input_tit" style=" margin-top: 80rpx;">手机号 / 邮箱</view>
|
||
<view class="input_box">
|
||
<input v-model="phoneEmail" placeholder="请输入您的手机号或者邮箱" placeholder-class="grey" @input="onInput" />
|
||
</view>
|
||
<view class="input_tit">密码</view>
|
||
<view class="input_box">
|
||
<input class="input_item" v-model="password" @input="onInput" :password="!isSee" placeholder="请输入密码"
|
||
placeholder-class="grey" @confirm="onSubmit" />
|
||
<image v-if="isSee" src="../../static/icon/ic_logon_display.png" mode="aspectFit"
|
||
@click="isSee = false">
|
||
</image>
|
||
<image v-else-if="!isSee" src="../../static/icon/ic_logon_hide.png" mode="aspectFit"
|
||
@click="isSee = true">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="protocol_box">
|
||
<view class="select" :class="{active: agree}" @click="agree = !agree"></view>
|
||
我已同意
|
||
<!-- <text @click="plus.runtime.openURL('https://main.nuttyreading.com/agreement.html')">《用户协议》</text> -->
|
||
<!-- <text @click="onPageJump('/pages/user/protocol')">《用户协议》</text> -->
|
||
<span class="highlight" @click="yhxyShow=true">《用户协议》</span>
|
||
和
|
||
<span class="highlight" @click="yszcShow=true">《隐私协议》</span>
|
||
<!-- <text @click="onPageJump('/pages/user/protocol')">《隐私协议》</text>-->
|
||
</view>
|
||
<view class="btn_box">
|
||
<button @click="onSubmit" class="active" v-if="btnShow">登 录</button>
|
||
<button v-else>登 录</button>
|
||
</view>
|
||
<!-- <view class="password_register" style="margin: 0 auto; text-align: center; display: block;">
|
||
<button @click="onPageJump('/pages/user/register')">注册账号</button>
|
||
<text v-if="type == 1000" @click="onPageJump('/pages/user/forget')">忘记密码？</text>
|
||
</view> -->
|
||
<view class="third_party_login_box" v-if="iosHide">
|
||
<view class="third_party_title"><text>第三方登录</text></view>
|
||
<view class="third_party_content">
|
||
<image src="../../static/icon/ic_login_health.png" @click="onHealthLogin" mode="aspectFit">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="qie_huan" style="display: flex; justify-content: center;">
|
||
<view style="width: 30%;" @click="type = 1000" v-if="type == 2000">密码登录</view>
|
||
<view style="width:50%; display: flex; justify-content:space-between;" v-if="type == 1000">
|
||
<text @click="type = 2000">验证码登录</text>
|
||
<text v-if="type == 1000" @click="onPageJump('/pages/user/forget')">忘记密码？</text>
|
||
<!-- <text @click="resetPassWord()">忘记密码</text> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="youKeL" style="margin-bottom: 80rpx;">
|
||
<view @click="onPageJump('/pages/user/visitor')">免登陆体验</view>
|
||
</view>
|
||
|
||
|
||
<z-popup v-model="HealthOpen" type="center" :hideOnBlur="false">
|
||
<view class="popup_box">
|
||
<view class="popup_title">
|
||
<view>
|
||
<image src="../../static/icon/ic_login_health.png" mode="aspectFit"></image>
|
||
一路健康用户 - 登录
|
||
</view>
|
||
</view>
|
||
<view class="popup_content">
|
||
<view class="input_tit">账号</view>
|
||
<view class="input_box triangle" :class="[type == 1000 ? 'left_triangle': 'right_triangle']">
|
||
<input type="text" v-model="health_phone" placeholder="请输入您的一路健康账号"
|
||
placeholder-class="grey" />
|
||
</view>
|
||
<view class="input_tit">密码</view>
|
||
<view class="input_box">
|
||
<input class="input_item" v-model="health_password" :password="!isSee_H" placeholder="请输入密码"
|
||
placeholder-class="grey" @confirm="onSubmit_Health" />
|
||
<image v-if="isSee_H" src="../../static/icon/ic_logon_display.png" mode="aspectFit"
|
||
@click="isSee_H = false">
|
||
</image>
|
||
<image v-else-if="!isSee_H" src="../../static/icon/ic_logon_hide.png" mode="aspectFit"
|
||
@click="isSee_H = true">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<view class="popup_footer">
|
||
<view @click="HealthOpen = false">取消</view>
|
||
<view @click="onSubmit_Health">确定</view>
|
||
</view>
|
||
</view>
|
||
</z-popup>
|
||
|
||
<!-- #ifdef APP-PLUS -->
|
||
<!-- <view class="third_party_login_box" v-if="isIos && system >= 13">6
|
||
<view class="third_party_title"><text>第三方登录</text></view>
|
||
<view class="third_party_content">
|
||
<image src="../../static/icon/ic_login_weixin.png" v-if="isWeixin" @click="onWxAppLogin"
|
||
mode="aspectFit"></image>
|
||
<image src="../../static/icon/ic_login_ios.png" v-if="isIos && system >= 13" @click="onAppleLogin"
|
||
mode="aspectFit"></image>
|
||
</view>
|
||
</view> -->
|
||
<!-- #endif -->
|
||
|
||
<u-popup :show="yhxyShow" title='用户协议' :round="10" @close="yhxyShow=false">
|
||
<view class="tanchu">
|
||
<view class="dp_title" v-html="yhxyText.title"></view>
|
||
<view class="dp_content" v-html="yhxyText.content"></view>
|
||
<!-- <yhxyPage></yhxyPage> -->
|
||
</view>
|
||
</u-popup>
|
||
|
||
<u-popup :show="yszcShow" title='隐私政策' :round="10" @close="yszcShow=false">
|
||
<view class="tanchu">
|
||
<view class="dp_title" v-html="yszcText.title"></view>
|
||
<view class="dp_content" v-html="yszcText.content"></view>
|
||
<!-- <yszcPage></yszcPage> -->
|
||
</view>
|
||
</u-popup>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import $http from '@/config/requestConfig.js';
|
||
import md5 from '@/plugins/md5';
|
||
// import yhxyPage from '@/pages/agreement/yhxyPage.vue';
|
||
// import yszcPage from '@/pages/agreement/yszcPage.vue';
|
||
|
||
|
||
// import localuserxieyi from '@/static/json/userAndyinsiP.json'
|
||
// import localyinsixieyi from '@/static/json/yinsiP.json'
|
||
var clear;
|
||
import {
|
||
mapState,
|
||
mapMutations
|
||
} from 'vuex';
|
||
import socket from '@/config/socket';
|
||
export default {
|
||
// components: {
|
||
// yhxyPage,
|
||
// yszcPage
|
||
// },
|
||
data() {
|
||
return {
|
||
type: 2000,
|
||
brand: 3000,
|
||
isSee: false,
|
||
code: '',
|
||
// phone: '15022449475',
|
||
// phone: '18047689535',
|
||
phone: '',
|
||
email: '',
|
||
phoneEmail: '',
|
||
password: '',
|
||
// phoneEmail: '2227572976@qq.com',
|
||
// password: 'zm123456',
|
||
//验证码
|
||
codeText: '获取验证码',
|
||
//验证码已发
|
||
readonly: false,
|
||
btnShow: true,
|
||
agree: false,
|
||
isIos: true,
|
||
isWeixin: true,
|
||
system: 13,
|
||
clearTime: null,
|
||
HealthOpen: false,
|
||
// health_phone: '13333333333',
|
||
// health_password: '123456',
|
||
health_phone: '',
|
||
health_password: '',
|
||
isSee_H: false,
|
||
yhxyShow: false,
|
||
yszcShow: false,
|
||
yhxyText: {},
|
||
yszcText: {},
|
||
quShow: false,
|
||
quCodeList: [], // 国家区域码
|
||
quCode: 86,
|
||
|
||
};
|
||
},
|
||
//第一次加载
|
||
onLoad(e) {
|
||
|
||
// #ifdef APP-PLUS
|
||
this.isIos = (plus.os.name == "iOS");
|
||
let systemInfo = uni.getSystemInfoSync();
|
||
this.system = parseFloat(systemInfo['system'].replace(/[a-zA-Z]/g, ""));
|
||
this.isWeixin = plus.runtime.isApplicationExist({
|
||
pname: 'com.tencent.mm',
|
||
action: "weixin://"
|
||
});
|
||
// #endif
|
||
},
|
||
//页面显示
|
||
onShow() {
|
||
this.closeMusic()
|
||
this.getCountyCode()
|
||
this.getSettlement()
|
||
},
|
||
//方法
|
||
methods: {
|
||
...mapMutations(['setUserInfo']),
|
||
...mapMutations(['setHealthMes']),
|
||
closeMusic() {
|
||
this.$music.setCloseBgm() // 关闭音频
|
||
uni.setStorage({
|
||
key: 'playVisible',
|
||
data: false,
|
||
success: function() {
|
||
console.log('success');
|
||
}
|
||
});
|
||
this.setUserInfo({
|
||
'playVisible': false
|
||
})
|
||
},
|
||
// 获取国家区域编码
|
||
getCountyCode() {
|
||
$http.request({
|
||
url: "book/baseArea/getAllBaseArea",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data: {},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
// console.log(res,'区域码')
|
||
if (res.code == 0 && res.baseAreas.length > 0) {
|
||
// this.quCodeList = res.baseAreas
|
||
this.quCodeList = res.baseAreas.map(item => {
|
||
let obj = {
|
||
'text': item.title + ' (+' + item.code + ')',
|
||
'value': item.code,
|
||
}
|
||
return obj
|
||
})
|
||
// console.log('改变格式后',this.quCodeList)
|
||
} else {
|
||
this.quCodeList = []
|
||
// this.totalPage = 0
|
||
}
|
||
}).catch(e => {
|
||
console.log(e, 'e')
|
||
});
|
||
},
|
||
// 获取协议内容
|
||
getSettlement() {
|
||
$http.request({
|
||
url: "/sys/agreement/getAgreement",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data: {
|
||
"id": 103
|
||
},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
this.yszcText = res.agreement
|
||
}
|
||
}).catch(e => {
|
||
console.log(e)
|
||
})
|
||
|
||
|
||
$http.request({
|
||
url: "/sys/agreement/getAgreement",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data: {
|
||
"id": 102
|
||
},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
this.yhxyText = res.agreement
|
||
}
|
||
}).catch(e => {
|
||
console.log(e)
|
||
})
|
||
},
|
||
quChange(e) {
|
||
console.log(e, 'e')
|
||
},
|
||
// 修改密码
|
||
resetPassWord() {
|
||
console.log('重置密码')
|
||
uni.navigateTo({
|
||
url: "/pages/home/shop/goodsDetail"
|
||
})
|
||
},
|
||
|
||
|
||
onPageJump(url) {
|
||
uni.navigateTo({
|
||
url: url
|
||
});
|
||
},
|
||
onInput() {
|
||
// this.clearTime && clearTimeout(this.clearTime)
|
||
// this.clearTime = setTimeout(() => {
|
||
// if (this.type == 2000) {
|
||
// if (this.phone && this.code) {
|
||
// this.btnShow = true;
|
||
// } else {
|
||
// this.btnShow = false;
|
||
// }
|
||
// } else {
|
||
// if (this.phone && this.password) {
|
||
// this.btnShow = true;
|
||
// } else {
|
||
// this.btnShow = false;
|
||
// }
|
||
// }
|
||
// }, 500);
|
||
},
|
||
//验证码按钮文字状态
|
||
getCodeState() {
|
||
clear && clearInterval(clear);
|
||
const _this = this;
|
||
this.readonly = true;
|
||
this.codeText = '60S';
|
||
var s = 60;
|
||
clear = setInterval(() => {
|
||
s--;
|
||
_this.codeText = s + 'S';
|
||
if (s <= 0) {
|
||
clearInterval(clear);
|
||
_this.codeText = '获取验证码';
|
||
_this.readonly = false;
|
||
}
|
||
}, 1000);
|
||
},
|
||
// 发送验证码
|
||
onSetCode() {
|
||
if (this.readonly) {
|
||
return;
|
||
}
|
||
|
||
if (!this.agree) {
|
||
uni.showToast({
|
||
title: '请先同意《用户协议》和《隐私协议》',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (this.brand == 3000) {
|
||
if (!this.phone) {
|
||
uni.showToast({
|
||
title: '请输入手机号',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (this.quCode == null || this.quCode == 86) { // 如果没选择国家code，默认是中国大陆
|
||
if (!this.$base.phoneRegular.test(this.phone)) {
|
||
uni.showToast({
|
||
title: '手机格式不正确',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
console.log(this.quCode, '选择的区段')
|
||
}
|
||
this.$http
|
||
.get('book/user/sms/sendcode', {
|
||
phone: this.phone,
|
||
areaCode: this.quCode,
|
||
type: 2000
|
||
})
|
||
.then(res => {
|
||
uni.showToast({
|
||
title: '验证码发送成功',
|
||
icon: 'none'
|
||
});
|
||
this.getCodeState();
|
||
});
|
||
} else {
|
||
if (!this.email) {
|
||
uni.showToast({
|
||
title: '请输入邮箱',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (!this.$base.mailRegular.test(this.email)) {
|
||
uni.showToast({
|
||
title: '邮箱格式不正确',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
this.$http
|
||
.get('book/user/getMailCaptcha', {
|
||
email: this.email
|
||
})
|
||
.then(res => {
|
||
uni.showToast({
|
||
title: '验证码发送成功',
|
||
icon: 'none'
|
||
});
|
||
this.getCodeState();
|
||
});
|
||
}
|
||
|
||
|
||
},
|
||
|
||
// 手机密码登录
|
||
onSubmit() {
|
||
if (!this.agree) {
|
||
uni.showToast({
|
||
title: '请先同意《用户协议》和《隐私协议》',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
let httpData = {};
|
||
if (this.type == 2000) {
|
||
if (this.brand == 3000) {
|
||
if (!this.phone) {
|
||
uni.showToast({
|
||
title: '请输入手机号',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (this.quCode == null || this.quCode == 86) {
|
||
if (!this.$base.phoneRegular.test(this.phone)) {
|
||
uni.showToast({
|
||
title: '手机格式不正确',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
httpData.tel = this.phone;
|
||
} else {
|
||
if (!this.email) {
|
||
uni.showToast({
|
||
title: '请输入邮箱',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (!this.$base.mailRegular.test(this.email)) {
|
||
uni.showToast({
|
||
title: '邮箱格式不正确',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
httpData.tel = this.email;
|
||
}
|
||
if (!this.code) {
|
||
uni.showToast({
|
||
title: '请输入验证码',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
httpData.code = this.code;
|
||
|
||
this.$http
|
||
.get('book/user/registerOrLogin', httpData)
|
||
.then(res => {
|
||
res.userInfo.token = res.token.token;
|
||
this.setUserInfo(res.userInfo);
|
||
// socket.init();
|
||
uni.showToast({
|
||
title: '登录成功',
|
||
duration: 1000,
|
||
});
|
||
|
||
|
||
|
||
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: '/pages/peanut/home'
|
||
});
|
||
}, 1000);
|
||
});
|
||
} else {
|
||
if (!this.phoneEmail) {
|
||
uni.showToast({
|
||
title: '请输入手机号或邮箱',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (!this.password) {
|
||
uni.showToast({
|
||
title: '请输入密码',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
// httpData.password = md5(this.password);
|
||
httpData.password = this.password;
|
||
httpData.phone = this.phoneEmail;
|
||
this.$http
|
||
.post('book/user/login', httpData)
|
||
.then(res => {
|
||
res.userInfo.token = res.token.token;
|
||
this.setUserInfo(res.userInfo);
|
||
// socket.init();
|
||
uni.showToast({
|
||
title: '登录成功',
|
||
duration: 1000,
|
||
});
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: '/pages/peanut/home'
|
||
});
|
||
}, 1000);
|
||
});
|
||
}
|
||
},
|
||
|
||
// 一路健康APP登录进入
|
||
onSubmit_Health() {
|
||
if (!this.health_phone) {
|
||
uni.showToast({
|
||
title: '请输入一路健康账号',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!this.health_password) {
|
||
uni.showToast({
|
||
title: '请输入密码',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
let healthData = {};
|
||
healthData.phone = this.health_phone;
|
||
healthData.password = this.health_password
|
||
|
||
this.$http
|
||
.post('book/user/getEverhealthInfo', healthData)
|
||
.then(res => {
|
||
this.setHealthMes(res.everhealthInfo);
|
||
if (res.userInfo) {
|
||
res.userInfo.token = res.token.token;
|
||
this.setUserInfo(res.userInfo);
|
||
uni.showToast({
|
||
title: '登录成功',
|
||
duration: 1000,
|
||
});
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: '/pages/peanut/home'
|
||
});
|
||
}, 1000);
|
||
} else {
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: '/pages/user/healthLog'
|
||
});
|
||
}, 600);
|
||
uni.showToast({
|
||
title: '账号验证成功',
|
||
duration: 600,
|
||
});
|
||
}
|
||
|
||
// if (!IsPhoneHealth) {
|
||
// setTimeout(() => {
|
||
// uni.navigateTo({
|
||
// url: '/pages/user/healthLog'
|
||
// });
|
||
// }, 600);
|
||
// uni.showToast({
|
||
// title: '验证成功',
|
||
// duration: 600,
|
||
// });
|
||
// } else {
|
||
// uni.showModal({
|
||
// title: '提示',
|
||
// content: '验证您的一路健康账号成功，请问您要通过该账户登录花生吗？',
|
||
// success: function(res) {
|
||
// if (res.confirm) {
|
||
// this.setUserInfo(res.userInfo);
|
||
// // socket.init();
|
||
// uni.switchTab({
|
||
// url: "/pages/home/home"
|
||
// });
|
||
// } else if (res.cancel) {
|
||
// console.log('用户点击取消');
|
||
// }
|
||
// }
|
||
// });
|
||
|
||
// }
|
||
|
||
});
|
||
|
||
},
|
||
|
||
// 一路健康APP登录
|
||
onHealthLogin() {
|
||
if (!this.agree) {
|
||
uni.showToast({
|
||
title: '请先同意《用户协议》和《隐私协议》',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
this.HealthOpen = true
|
||
},
|
||
|
||
// 微信APP登录
|
||
onWxAppLogin() {
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: res => {
|
||
uni.getUserInfo({
|
||
success: (info) => {
|
||
this.userInfo = info.userInfo;
|
||
if (res.authResult.openid && res.authResult.unionid) {
|
||
this.$http
|
||
.post('api/open/v1/login', {
|
||
wxAppOpenId: res.authResult.openid,
|
||
unionid: res.authResult.unionid,
|
||
nickname: this.userInfo.nickName,
|
||
headImg: this.userInfo.avatarUrl
|
||
})
|
||
.then(data => {
|
||
this.setUserInfo({
|
||
openId: res.authResult.openid,
|
||
unionid: res.authResult
|
||
.unionid,
|
||
...data,
|
||
});
|
||
if (data.thirdLoginSuccess) {
|
||
socket.init();
|
||
uni.showToast({
|
||
title: '登录成功',
|
||
duration: 2000
|
||
});
|
||
// 跳转底部导航
|
||
|
||
|
||
setTimeout(() => {
|
||
// uni.switchTab({
|
||
// url: "/pages/home/home"
|
||
// });
|
||
uni.switchTab({
|
||
url: "/pages/home/home",
|
||
success: function() {
|
||
let page =
|
||
getCurrentPages()[
|
||
0
|
||
];
|
||
page.$vm
|
||
.requestAll();
|
||
},
|
||
});
|
||
}, 1000);
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您还未绑定手机号，请先绑定~',
|
||
confirmText: '去绑定',
|
||
cancelText: '再逛会',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: '/pages/user/bindPhone'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '点击无效，请再次点击',
|
||
icon: "none"
|
||
});
|
||
}
|
||
},
|
||
fail: () => {
|
||
console.log("未授权");
|
||
}
|
||
})
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
}
|
||
});
|
||
},
|
||
// 苹果登录
|
||
onAppleLogin() {
|
||
uni.login({
|
||
provider: 'apple',
|
||
success: loginRes => {
|
||
uni.getUserInfo({
|
||
provider: 'apple',
|
||
success: userInfoRes => {
|
||
if (userInfoRes.userInfo.identityToken) {
|
||
this.$http
|
||
.post('api/open/v1/ios_login', {
|
||
identityToken: userInfoRes.userInfo
|
||
.identityToken
|
||
})
|
||
.then(data => {
|
||
this.setUserInfo(data);
|
||
if (data.thirdLoginSuccess) {
|
||
socket.init();
|
||
uni.showToast({
|
||
title: '登录成功',
|
||
duration: 2000
|
||
});
|
||
setTimeout(() => {
|
||
// uni.switchTab({
|
||
// url: "/pages/home/home"
|
||
// });
|
||
uni.switchTab({
|
||
url: "/pages/home/home",
|
||
success: function() {
|
||
let page =
|
||
getCurrentPages()[
|
||
0
|
||
];
|
||
page.$vm
|
||
.requestAll();
|
||
},
|
||
});
|
||
}, 1000);
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您还未绑定手机号，请先绑定~',
|
||
confirmText: '去绑定',
|
||
cancelText: '再逛会',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: '/pages/user/bindPhone'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
})
|
||
},
|
||
fail: err => {
|
||
uni.showToast({
|
||
title: '登录失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
//页面隐藏
|
||
onHide() {},
|
||
//页面卸载
|
||
onUnload() {},
|
||
//页面下来刷新
|
||
onPullDownRefresh() {},
|
||
//页面上拉触底
|
||
onReachBottom() {},
|
||
//用户点击分享
|
||
onShareAppMessage(e) {
|
||
return this.wxShare();
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import '@/style/mixin.scss';
|
||
|
||
.phoneNumberInput {
|
||
width: calc(100% - 160rpx);
|
||
// width: 100%;
|
||
height: 67rpx;
|
||
|
||
input {
|
||
font-size: 28rpx;
|
||
margin: 20rpx 0;
|
||
}
|
||
}
|
||
|
||
.borderBottom {
|
||
border-bottom: 1px solid #efeef4;
|
||
}
|
||
|
||
.flexbox {
|
||
display: flex;
|
||
}
|
||
|
||
.quhao {
|
||
height: 50rpx;
|
||
width: 290rpx;
|
||
margin: 12rpx 15rpx 0 0;
|
||
|
||
|
||
}
|
||
|
||
|
||
|
||
.myselect {
|
||
height: 50rpx !important;
|
||
|
||
/deep/.uni-select {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
/deep/.uni-select__selector-item {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.highlight {
|
||
color: $themeColor;
|
||
}
|
||
|
||
.tanchu {
|
||
padding: 40rpx 30rpx 40rpx 30rpx;
|
||
position: relative;
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
|
||
.logo_bg {
|
||
background-image: url('@/static/icon/login_bg.png');
|
||
// background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
height: 25vh;
|
||
position: relative;
|
||
|
||
text {
|
||
font-size: 45upx;
|
||
line-height: 65rpx;
|
||
position: absolute;
|
||
bottom: 110rpx;
|
||
left: 60rpx;
|
||
color: #fff;
|
||
letter-spacing: 6rpx;
|
||
}
|
||
|
||
.icon_hua_1 {
|
||
position: absolute;
|
||
bottom: 60rpx;
|
||
left: 245rpx;
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
opacity: 0.08;
|
||
}
|
||
|
||
.icon_hua_2 {
|
||
position: absolute;
|
||
bottom: 10rpx;
|
||
right: 30rpx;
|
||
width: 250rpx;
|
||
height: 250rpx;
|
||
opacity: 0.15;
|
||
}
|
||
}
|
||
|
||
.register_page {
|
||
padding: calc(var(--status-bar-height)) 60rpx 50rpx 60rpx;
|
||
background-color: #fff;
|
||
min-height: 75vh;
|
||
|
||
.login_method {
|
||
|
||
// display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 96rpx;
|
||
// padding-bottom: 5rpx;
|
||
text-align: center;
|
||
|
||
.title {
|
||
margin: 0 auto;
|
||
font-size: 40rpx;
|
||
letter-spacing: 3rpx;
|
||
color: #666;
|
||
|
||
&.active {
|
||
position: relative;
|
||
color: $themeColor;
|
||
padding-bottom: 35rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
&.active::after {
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%) translateY(-50%);
|
||
position: absolute;
|
||
content: '';
|
||
width: 150rpx;
|
||
height: 6rpx;
|
||
background-color: $themeColor;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.left_triangle {
|
||
&::before {
|
||
left: 140rpx;
|
||
}
|
||
|
||
&::after {
|
||
left: 140rpx;
|
||
}
|
||
}
|
||
|
||
.right_triangle {
|
||
&::before {
|
||
left: 470rpx;
|
||
}
|
||
|
||
&::after {
|
||
left: 470rpx;
|
||
}
|
||
}
|
||
|
||
.input_tit {
|
||
margin-top: 20rpx;
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: $themeColor;
|
||
}
|
||
|
||
.emaPho {}
|
||
|
||
.emaPho>view {
|
||
display: inline-block;
|
||
padding: 10rpx 0;
|
||
color: #888;
|
||
}
|
||
|
||
.emaPho>view.active {
|
||
color: $themeColor;
|
||
padding: 10rpx 10rpx;
|
||
border-bottom: 2px solid $themeColor;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.emaPho>span {
|
||
display: inline-block;
|
||
margin: 0 30rpx;
|
||
color: #ccc;
|
||
}
|
||
|
||
.input_box {
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 8rpx;
|
||
border-bottom: solid 2rpx #efeef4;
|
||
margin: 30rpx 0;
|
||
|
||
image {
|
||
width: 36rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
input {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
height: 70rpx;
|
||
}
|
||
|
||
.input_item {
|
||
font-size: 28rpx;
|
||
border: 0px;
|
||
flex: 1;
|
||
background-color: #f8f9fb;
|
||
height: 70rpx;
|
||
width: 100%;
|
||
outline: none;
|
||
//margin-left: 32rpx;
|
||
}
|
||
|
||
button {
|
||
height: 60rpx;
|
||
background-color: #f8f9fb;
|
||
font-size: 28rpx;
|
||
padding: 0 14rpx;
|
||
color: $themeColor;
|
||
line-height: 60rpx;
|
||
margin-left: 20rpx;
|
||
//margin-right: 40rpx;
|
||
}
|
||
|
||
.grey {
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.btn_box {
|
||
margin-top: 40rpx;
|
||
|
||
button {
|
||
font-size: 32rpx;
|
||
background-color: #e5e5e5;
|
||
color: #fff;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-radius: 50rpx;
|
||
|
||
&.active {
|
||
@include theme('btn_bg') color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.password_register {
|
||
margin-top: 40rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
//text-align: center;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
//text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
.protocol_box {
|
||
margin-top: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
|
||
.select {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
background-image: url("../../static/icon/ic_gender_unselected.png");
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% auto;
|
||
margin-right: 15rpx;
|
||
|
||
&.active {
|
||
background-image: url("../../static/icon/ic_agreed.png");
|
||
}
|
||
}
|
||
|
||
>text {
|
||
color: $themeColor;
|
||
}
|
||
}
|
||
}
|
||
|
||
.station {
|
||
height: 230rpx;
|
||
}
|
||
|
||
.third_party_login_box {
|
||
position: fixed;
|
||
bottom: 60rpx;
|
||
width: 100%;
|
||
left: 0;
|
||
padding: 0 30rpx;
|
||
|
||
.third_party_title {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&:before,
|
||
&:after {
|
||
content: '';
|
||
flex: 1;
|
||
height: 2rpx;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
flex-shrink: 0;
|
||
padding: 0 20rpx;
|
||
}
|
||
}
|
||
|
||
.third_party_content {
|
||
margin-top: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 80upx;
|
||
height: 80upx;
|
||
margin: 0 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup_box {
|
||
width: 600upx;
|
||
border-radius: 10rpx;
|
||
|
||
.popup_title {
|
||
display: flex;
|
||
justify-content: center;
|
||
height: 88upx;
|
||
line-height: 88upx;
|
||
|
||
view {
|
||
align-items: center;
|
||
font-size: 30upx;
|
||
display: flex;
|
||
|
||
image {
|
||
width: 50upx;
|
||
height: 50upx;
|
||
margin: 0 20rpx 0 0;
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup_content {
|
||
padding: 30rpx 40rpx;
|
||
}
|
||
|
||
.popup_footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
view {
|
||
width: 45%;
|
||
flex-shrink: 0;
|
||
text-align: center;
|
||
font-size: 28upx;
|
||
color: #999;
|
||
line-height: 70upx;
|
||
margin: 0 0 30rpx 0;
|
||
}
|
||
|
||
view:last-child {
|
||
background-color: $themeColor;
|
||
color: #fff;
|
||
border-radius: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.dp_title {
|
||
font-size: 36rpx;
|
||
margin-bottom: 50rpx;
|
||
color: #555;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.dp_content {
|
||
max-height: 1000rpx;
|
||
overflow-y: scroll;
|
||
font-size: 28rpx;
|
||
color: #555;
|
||
line-height: 45rpx;
|
||
|
||
.dp_con1 {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
// .dp_con2 {
|
||
// font-size: 30rpx;
|
||
// margin-top: 10rpx;
|
||
// margin-bottom: 10rpx;
|
||
// }
|
||
|
||
}
|
||
|
||
.qie_huan {
|
||
font-size: 26rpx;
|
||
margin: 20rpx 0 0 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.comTy {
|
||
font-size: 28rpx;
|
||
line-height: 46rpx;
|
||
text-align: left;
|
||
}
|
||
|
||
.youKeL {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 30rpx 0 0 0;
|
||
font-size: 26rpx;
|
||
color: $themeColor;
|
||
|
||
view {
|
||
font-weight: bold;
|
||
border: 1px solid $themeColor;
|
||
border-radius: 10rpx;
|
||
padding: 5rpx 15rpx;
|
||
}
|
||
}
|
||
</style> |