main
fanfan
6 months ago
parent
b2cd396ff3
commit
c3ac2340d8
@ -1,322 +1,391 @@ |
||||
<template> |
||||
<view class="login"> |
||||
<view class="refund-navbar"> |
||||
<u-navbar |
||||
title="" |
||||
:border-bottom="false" |
||||
:background="background" |
||||
></u-navbar> |
||||
</view> |
||||
<view class="login-hd"> |
||||
<view class="a">验证码登录</view> |
||||
<view class="b">若该手机号未注册，我们将自动为您注册</view> |
||||
</view> |
||||
<view class="login-bd"> |
||||
<view class="a" |
||||
>+86<input v-model="phoneNum" type="tel" placeholder="请输入手机号" |
||||
/></view> |
||||
<view class="b"> |
||||
<input v-model="semCode" placeholder="请输入验证码" /> |
||||
<text @click="getCode" v-if="!showCountDown">获取验证码</text> |
||||
<text v-if="showCountDown">{{ countdown }}s</text> |
||||
</view> |
||||
<view class="c" style="display: flex; align-items: center"> |
||||
<u-checkbox |
||||
active-color="#FF343C" |
||||
v-model="isCheckout" |
||||
style="margin-right: -20rpx" |
||||
></u-checkbox |
||||
>同意<text @click="toTextPage(1)">《用户服务协议》</text>和<text |
||||
@click="toTextPage(2)" |
||||
>《隐私政策》</text |
||||
> |
||||
</view> |
||||
</view> |
||||
<view class="login-fd login-fd-on" @click="login">登录</view> |
||||
<view class="" v-if="isCheckout"> |
||||
<mpWeiXinMobile :refereeId="refereeId"></mpWeiXinMobile> |
||||
</view> |
||||
<view |
||||
class="" |
||||
v-else |
||||
style=" |
||||
<view class="login"> |
||||
<view class="refund-navbar"> |
||||
<u-navbar title="" :border-bottom="false" :background="background"></u-navbar> |
||||
</view> |
||||
<view class="login-hd"> |
||||
<view class="a">验证码登录</view> |
||||
<view class="b">若该手机号未注册，我们将自动为您注册</view> |
||||
</view> |
||||
<view class="login-bd"> |
||||
<view class="a">+86<input v-model="phoneNum" type="tel" placeholder="请输入手机号" /></view> |
||||
<view class="b"> |
||||
<input v-model="semCode" placeholder="请输入验证码" /> |
||||
<text @click="getCode" v-if="!showCountDown">获取验证码</text> |
||||
<text v-if="showCountDown">{{ countdown }}s</text> |
||||
</view> |
||||
<view class="c" style="display: flex; align-items: center"> |
||||
<u-checkbox active-color="#FF343C" v-model="isCheckout" style="margin-right: -20rpx"></u-checkbox> |
||||
同意<text @click="toTextPage(1)">《用户服务协议》</text>和<text @click="toTextPage(2)">《隐私政策》</text> |
||||
</view> |
||||
</view> |
||||
<view class="login-fd login-fd-on" @click="login">登录</view> |
||||
<view class="" v-if="isCheckout"> |
||||
<mpWeiXinMobile :refereeId="refereeId"></mpWeiXinMobile> |
||||
</view> |
||||
<view class="" v-else style=" |
||||
font-size: 28rpx; |
||||
color: #666; |
||||
text-align: center; |
||||
margin-top: 50rpx; |
||||
" |
||||
@click="login" |
||||
> |
||||
手机号快捷登录 |
||||
</view> |
||||
</view> |
||||
" @click="login"> |
||||
手机号快捷登录 |
||||
</view> |
||||
</view> |
||||
<view class="login-box" style="display: none;"> |
||||
<view class="refund-navbar"> |
||||
<u-navbar title="" :border-bottom="false" background="rgba(255, 233, 240, 1)"></u-navbar> |
||||
</view> |
||||
<view class="login-logo"> |
||||
<image src="../../static/login_logo.png" mode=""></image> |
||||
</view> |
||||
<view class="login-name"> |
||||
京苏云商 |
||||
</view> |
||||
<view class="c"> |
||||
<u-checkbox active-color="#FF343C" v-model="isCheckout" style="margin-right: -20rpx"></u-checkbox> |
||||
同意<text @click="toTextPage(1)">《用户服务协议》</text>和<text @click="toTextPage(2)">《隐私政策》</text> |
||||
</view> |
||||
<view class="fd fd-on" @click="login">登录</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as UserApi from "@/api/user"; |
||||
import * as CaptchaApi from "@/api/captcha"; |
||||
import mpWeiXinMobile from "./components/mp-weixin-mobile.vue"; |
||||
import store from "@/store"; |
||||
import { isEmpty } from "@/utils/util"; |
||||
import { getSceneData } from '@/core/app' |
||||
export default { |
||||
components: { |
||||
mpWeiXinMobile, |
||||
}, |
||||
data() { |
||||
return { |
||||
isCheckout: false, |
||||
showCountDown: false, |
||||
currentIndex: 0, |
||||
background: { |
||||
background: `url(${this.$picUrl}/static/news/login-bg.png) center top no-repeat`, |
||||
backgroundSize: "100% auto", |
||||
}, |
||||
phoneNum: "", |
||||
semCode: "", |
||||
countdown: 60, |
||||
countDownFun: null, |
||||
code: "", |
||||
refereeId: "", |
||||
}; |
||||
}, |
||||
onLoad(o) { |
||||
// 获取二维码场景值 |
||||
const scene = getSceneData(o) |
||||
// 记录推荐人ID |
||||
const refereeId = scene.refereeId ? scene.refereeId : (scene.uid?scene.uid:o.refereeId) |
||||
this.refereeId = refereeId; |
||||
console.log(scene) |
||||
console.log(o) |
||||
console.log(scene.refereeId) |
||||
console.log("refereeId",refereeId) |
||||
console.log(this.refereeId) |
||||
}, |
||||
methods: { |
||||
toTextPage(n) { |
||||
uni.navigateTo({ |
||||
url: "/pages/news1/text?pageFlag=" + n, |
||||
}); |
||||
}, |
||||
validatePhoneNumber(phone) { |
||||
// 定义手机号码的正则表达式 |
||||
var regExp = /^1[3456789]\d{9}$/; |
||||
import * as UserApi from "@/api/user"; |
||||
import * as CaptchaApi from "@/api/captcha"; |
||||
import mpWeiXinMobile from "./components/mp-weixin-mobile.vue"; |
||||
import store from "@/store"; |
||||
import { |
||||
isEmpty |
||||
} from "@/utils/util"; |
||||
import { |
||||
getSceneData |
||||
} from '@/core/app' |
||||
export default { |
||||
components: { |
||||
mpWeiXinMobile, |
||||
}, |
||||
data() { |
||||
return { |
||||
isCheckout: false, |
||||
showCountDown: false, |
||||
currentIndex: 0, |
||||
background: { |
||||
background: `url(${this.$picUrl}/static/news/login-bg.png) center top no-repeat`, |
||||
backgroundSize: "100% auto", |
||||
}, |
||||
phoneNum: "", |
||||
semCode: "", |
||||
countdown: 60, |
||||
countDownFun: null, |
||||
code: "", |
||||
refereeId: "", |
||||
}; |
||||
}, |
||||
onLoad(o) { |
||||
// 获取二维码场景值 |
||||
const scene = getSceneData(o) |
||||
// 记录推荐人ID |
||||
const refereeId = scene.refereeId ? scene.refereeId : (scene.uid ? scene.uid : o.refereeId) |
||||
this.refereeId = refereeId; |
||||
console.log(scene) |
||||
console.log(o) |
||||
console.log(scene.refereeId) |
||||
console.log("refereeId", refereeId) |
||||
console.log(this.refereeId) |
||||
}, |
||||
methods: { |
||||
toTextPage(n) { |
||||
uni.navigateTo({ |
||||
url: "/pages/news1/text?pageFlag=" + n, |
||||
}); |
||||
}, |
||||
validatePhoneNumber(phone) { |
||||
// 定义手机号码的正则表达式 |
||||
var regExp = /^1[3456789]\d{9}$/; |
||||
|
||||
if (regExp.test(phone)) { |
||||
return true; // 符合手机号码格式要求 |
||||
} else { |
||||
return false; // 不符合手机号码格式要求 |
||||
} |
||||
}, |
||||
getCode() { |
||||
// 获取验证码 |
||||
const that = this; |
||||
if (that.isCheckout == false) { |
||||
that.$toast("请勾选用户协议"); |
||||
return; |
||||
} |
||||
if (!that.validatePhoneNumber(that.phoneNum)) { |
||||
uni.showToast({ |
||||
title: "请输入正确的手机号", |
||||
}); |
||||
return; |
||||
} |
||||
that.showCountDown = !that.showCountDown; |
||||
|
||||
CaptchaApi.sendSmsCaptcha({ |
||||
mobile: that.phoneNum |
||||
}).then((res) => { |
||||
if (res.status == 200) { |
||||
that.countDownFun = setInterval(() => { |
||||
if (that.countdown >= 1) { |
||||
that.countdown = that.countdown - 1; |
||||
} else { |
||||
that.showCountDown = false; |
||||
that.countdown = 60; |
||||
clearInterval(that.countDownFun); |
||||
} |
||||
}, 1000); |
||||
uni.showToast({ |
||||
icon:"none", |
||||
title: res.message, |
||||
}); |
||||
} else { |
||||
uni.showToast({ |
||||
icon:"none", |
||||
title: res.message, |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
login() { |
||||
let that = this; |
||||
if (that.isCheckout == false) { |
||||
that.$toast("请勾选用户协议"); |
||||
return; |
||||
} |
||||
// 登录 |
||||
if (!that.validatePhoneNumber(that.phoneNum)) { |
||||
that.$toast("请输入正确的手机号"); |
||||
return; |
||||
} |
||||
if (that.semCode == "") { |
||||
that.$toast("请输入验证码"); |
||||
return; |
||||
} |
||||
uni.login({ |
||||
provider: "weixin", |
||||
success: function (res) { |
||||
store |
||||
.dispatch("Login", { |
||||
smsCode: that.semCode, |
||||
mobile: that.phoneNum, |
||||
refereeId: that.refereeId, |
||||
isParty: false, |
||||
partyData: {}, |
||||
ucode: res.code |
||||
}) |
||||
.then((res) => { |
||||
uni.setStorageSync("token", res.data.token); |
||||
that.$toast(res.message); |
||||
that.getUserInfo(); |
||||
setTimeout(() => that.onNavigateBack(1), 2000); |
||||
}); |
||||
}, |
||||
fail:function(){ |
||||
store |
||||
.dispatch("Login", { |
||||
smsCode: that.semCode, |
||||
mobile: that.phoneNum, |
||||
refereeId: that.refereeId, |
||||
isParty: false, |
||||
partyData: {}, |
||||
// ucode: res.code |
||||
}) |
||||
.then((res) => { |
||||
uni.setStorageSync("token", res.data.token); |
||||
that.$toast(res.message); |
||||
that.getUserInfo(); |
||||
setTimeout(() => that.onNavigateBack(1), 2000); |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
getUserInfo() { |
||||
UserApi.info().then((result) => { |
||||
uni.setStorageSync("userInfo", result.data.userInfo); |
||||
}); |
||||
}, |
||||
onNavigateBack(delta = 1) { |
||||
// 登录成功返回原页面 |
||||
const pages = getCurrentPages(); |
||||
if (pages.length > 1) { |
||||
uni.navigateBack({ |
||||
delta: Number(delta || 1), |
||||
}); |
||||
} else { |
||||
this.$navTo("pages/index/index"); |
||||
} |
||||
}, |
||||
}, |
||||
}; |
||||
if (regExp.test(phone)) { |
||||
return true; // 符合手机号码格式要求 |
||||
} else { |
||||
return false; // 不符合手机号码格式要求 |
||||
} |
||||
}, |
||||
getCode() { |
||||
// 获取验证码 |
||||
const that = this; |
||||
if (that.isCheckout == false) { |
||||
that.$toast("请勾选用户协议"); |
||||
return; |
||||
} |
||||
if (!that.validatePhoneNumber(that.phoneNum)) { |
||||
uni.showToast({ |
||||
title: "请输入正确的手机号", |
||||
}); |
||||
return; |
||||
} |
||||
that.showCountDown = !that.showCountDown; |
||||
|
||||
CaptchaApi.sendSmsCaptcha({ |
||||
mobile: that.phoneNum |
||||
}).then((res) => { |
||||
if (res.status == 200) { |
||||
that.countDownFun = setInterval(() => { |
||||
if (that.countdown >= 1) { |
||||
that.countdown = that.countdown - 1; |
||||
} else { |
||||
that.showCountDown = false; |
||||
that.countdown = 60; |
||||
clearInterval(that.countDownFun); |
||||
} |
||||
}, 1000); |
||||
uni.showToast({ |
||||
icon: "none", |
||||
title: res.message, |
||||
}); |
||||
} else { |
||||
uni.showToast({ |
||||
icon: "none", |
||||
title: res.message, |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
login() { |
||||
let that = this; |
||||
if (that.isCheckout == false) { |
||||
that.$toast("请勾选用户协议"); |
||||
return; |
||||
} |
||||
// 登录 |
||||
if (!that.validatePhoneNumber(that.phoneNum)) { |
||||
that.$toast("请输入正确的手机号"); |
||||
return; |
||||
} |
||||
if (that.semCode == "") { |
||||
that.$toast("请输入验证码"); |
||||
return; |
||||
} |
||||
uni.login({ |
||||
provider: "weixin", |
||||
success: function(res) { |
||||
store |
||||
.dispatch("Login", { |
||||
smsCode: that.semCode, |
||||
mobile: that.phoneNum, |
||||
refereeId: that.refereeId, |
||||
isParty: false, |
||||
partyData: {}, |
||||
ucode: res.code |
||||
}) |
||||
.then((res) => { |
||||
uni.setStorageSync("token", res.data.token); |
||||
that.$toast(res.message); |
||||
that.getUserInfo(); |
||||
setTimeout(() => that.onNavigateBack(1), 2000); |
||||
}); |
||||
}, |
||||
fail: function() { |
||||
store |
||||
.dispatch("Login", { |
||||
smsCode: that.semCode, |
||||
mobile: that.phoneNum, |
||||
refereeId: that.refereeId, |
||||
isParty: false, |
||||
partyData: {}, |
||||
// ucode: res.code |
||||
}) |
||||
.then((res) => { |
||||
uni.setStorageSync("token", res.data.token); |
||||
that.$toast(res.message); |
||||
that.getUserInfo(); |
||||
setTimeout(() => that.onNavigateBack(1), 2000); |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
getUserInfo() { |
||||
UserApi.info().then((result) => { |
||||
uni.setStorageSync("userInfo", result.data.userInfo); |
||||
}); |
||||
}, |
||||
onNavigateBack(delta = 1) { |
||||
// 登录成功返回原页面 |
||||
const pages = getCurrentPages(); |
||||
if (pages.length > 1) { |
||||
uni.navigateBack({ |
||||
delta: Number(delta || 1), |
||||
}); |
||||
} else { |
||||
this.$navTo("pages/index/index"); |
||||
} |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.login { |
||||
width: 100%; |
||||
background: #fffafb url(https://www.royaum.com.cn/static/news/login-bg.png) |
||||
center top no-repeat; |
||||
background-size: 100% auto; |
||||
min-height: 100vh; |
||||
.login-box { |
||||
width: 100%; |
||||
background: linear-gradient(180deg, rgba(255, 233, 240, 1) 0%, rgba(226, 244, 243, 0) 35%); |
||||
min-height: 100vh; |
||||
|
||||
&-hd { |
||||
padding: 90rpx 75rpx 75rpx; |
||||
overflow: hidden; |
||||
.login-logo { |
||||
margin: 365rpx auto 0 auto; |
||||
width: 132rpx; |
||||
height: 132rpx; |
||||
border-radius: 24rpx; |
||||
background: rgba(243, 74, 64, 1); |
||||
box-shadow: -4rpx -8rpx 20rpx rgba(243, 74, 64, 0.16); |
||||
|
||||
.a { |
||||
line-height: 80rpx; |
||||
font-size: 40rpx; |
||||
font-weight: 500; |
||||
color: #000000; |
||||
} |
||||
image { |
||||
width: 75rpx; |
||||
height: 85rpx; |
||||
margin: 23.5rpx 0 0 28.5rpx; |
||||
} |
||||
} |
||||
|
||||
.b { |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #5a5a5a; |
||||
line-height: 50rpx; |
||||
} |
||||
} |
||||
.login-name { |
||||
width: 100%; |
||||
text-align: center; |
||||
|
||||
&-bd { |
||||
padding: 0 75rpx; |
||||
overflow: hidden; |
||||
font-weight: bold; |
||||
font-size: 36rpx; |
||||
color: rgba(243, 74, 64, 1); |
||||
margin-top: 22rpx; |
||||
} |
||||
|
||||
.a { |
||||
padding: 20rpx 0; |
||||
border-bottom: 1px solid #f2f2f2; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 32rpx; |
||||
font-weight: 400; |
||||
color: #212121; |
||||
.c { |
||||
justify-content: center; |
||||
padding: 28rpx 0; |
||||
font-size: 26rpx; |
||||
font-weight: 400; |
||||
color: #a0a0a0; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
input { |
||||
flex: 1; |
||||
margin-left: 30rpx; |
||||
line-height: 50rpx; |
||||
border-left: 1px solid #c4c4c4; |
||||
padding-left: 30rpx; |
||||
font-size: 28rpx; |
||||
color: #212121; |
||||
} |
||||
} |
||||
text { |
||||
color: #ff343c; |
||||
} |
||||
|
||||
.b { |
||||
padding: 30rpx 0; |
||||
border-bottom: 1px solid #f2f2f2; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #f3202a; |
||||
::v-deep .u-checkbox__icon-wrap--square { |
||||
border-radius: 50% !important; |
||||
width: 17px !important; |
||||
height: 17px !important; |
||||
} |
||||
} |
||||
|
||||
input { |
||||
flex: 1; |
||||
margin-right: 30rpx; |
||||
line-height: 50rpx; |
||||
font-size: 28rpx; |
||||
color: #212121; |
||||
} |
||||
} |
||||
.fd { |
||||
width: 680rpx; |
||||
line-height: 88rpx; |
||||
background: rgba(243, 74, 64, 1); |
||||
border-radius: 88rpx; |
||||
text-align: center; |
||||
margin: 0 auto; |
||||
margin-top: 50rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 600; |
||||
color: #ffffff; |
||||
|
||||
.fd-on { |
||||
background-color: rgba(243, 74, 64, 1); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.c { |
||||
padding: 28rpx 0; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #a0a0a0; |
||||
.login { |
||||
width: 100%; |
||||
background: #fffafb url(https://www.royaum.com.cn/static/news/login-bg.png) center top no-repeat; |
||||
background-size: 100% auto; |
||||
min-height: 100vh; |
||||
|
||||
text { |
||||
color: #ff343c; |
||||
} |
||||
} |
||||
} |
||||
&-hd { |
||||
padding: 90rpx 75rpx 75rpx; |
||||
overflow: hidden; |
||||
|
||||
&-fd { |
||||
width: 680rpx; |
||||
line-height: 88rpx; |
||||
background: #ffbdba; |
||||
border-radius: 88rpx; |
||||
text-align: center; |
||||
margin: 0 auto; |
||||
margin-top: 120rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 600; |
||||
color: #ffffff; |
||||
.a { |
||||
line-height: 80rpx; |
||||
font-size: 40rpx; |
||||
font-weight: 500; |
||||
color: #000000; |
||||
} |
||||
|
||||
.b { |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #5a5a5a; |
||||
line-height: 50rpx; |
||||
} |
||||
} |
||||
|
||||
&-on { |
||||
background-color: #ff343c; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
&-bd { |
||||
padding: 0 75rpx; |
||||
overflow: hidden; |
||||
|
||||
.a { |
||||
padding: 20rpx 0; |
||||
border-bottom: 1px solid #f2f2f2; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 32rpx; |
||||
font-weight: 400; |
||||
color: #212121; |
||||
|
||||
input { |
||||
flex: 1; |
||||
margin-left: 30rpx; |
||||
line-height: 50rpx; |
||||
border-left: 1px solid #c4c4c4; |
||||
padding-left: 30rpx; |
||||
font-size: 28rpx; |
||||
color: #212121; |
||||
} |
||||
} |
||||
|
||||
.b { |
||||
padding: 30rpx 0; |
||||
border-bottom: 1px solid #f2f2f2; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #f3202a; |
||||
|
||||
input { |
||||
flex: 1; |
||||
margin-right: 30rpx; |
||||
line-height: 50rpx; |
||||
font-size: 28rpx; |
||||
color: #212121; |
||||
} |
||||
} |
||||
|
||||
.c { |
||||
padding: 28rpx 0; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #a0a0a0; |
||||
|
||||
text { |
||||
color: #ff343c; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&-fd { |
||||
width: 680rpx; |
||||
line-height: 88rpx; |
||||
background: #ffbdba; |
||||
border-radius: 88rpx; |
||||
text-align: center; |
||||
margin: 0 auto; |
||||
margin-top: 120rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 600; |
||||
color: #ffffff; |
||||
|
||||
&-on { |
||||
background-color: #ff343c; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue