253 lines
7.4 KiB
Vue
253 lines
7.4 KiB
Vue
<template>
|
||
<view class="main" :style="{backgroundImage: 'url('+ staticUrl + 'login/bg.jpg)'}">
|
||
<text class="color-w font60">中亿华商</text>
|
||
<view class="form">
|
||
<view class="form-item flex flex-align-end">
|
||
<input type="text" :maxlength="11" placeholder="请输入昵称" placeholder-class="placeholder" v-model="form.nickname" />
|
||
</view>
|
||
<view class="form-item flex flex-align-end">
|
||
<input type="number" :maxlength="11" placeholder="请输入手机号" placeholder-class="placeholder" v-model="form.mobile" />
|
||
</view>
|
||
<view class="form-item flex flex-align-end">
|
||
<input type="number" :maxlength="6" placeholder="请输入短信验证码" placeholder-class="placeholder" v-model="form.code" />
|
||
<sms :phone="form.mobile" typeCode="0"></sms>
|
||
</view>
|
||
<view class="form-item flex flex-align-end">
|
||
<input :password="!showPassword" placeholder="登录密码（长度为6-24位字母和数字组合）" placeholder-class="placeholder" class="flex-grow" v-model="password" />
|
||
<text class="iconfont font40 eye" @tap="showPassword = !showPassword">{{showPassword?'\ue7c0':'\ue7bf'}}</text>
|
||
</view>
|
||
<view class="form-item flex flex-align-end">
|
||
<input :password="!confirmPwd" placeholder="确认密码（长度为6-24位字母和数字组合）" placeholder-class="placeholder" class="flex-grow" v-model="confimpassword" />
|
||
<text class="iconfont font40 eye" @tap="confirmPwd = !confirmPwd">{{confirmPwd?'\ue7c0':'\ue7bf'}}</text>
|
||
</view>
|
||
<view v-if="!hasCode" class="form-item flex flex-align-end" >
|
||
<input type="text" placeholder="推荐码(选填)" placeholder-class="placeholder" @input="onInput" v-model="form.recommendCode" />
|
||
</view>
|
||
<view v-else-if="hasCode && recommendCode" class="form-item flex flex-align-end">
|
||
<input type="text" :placeholder="`推荐码: ${recommendCode}`" placeholder-class="placeholder" :disabled="true"/>
|
||
</view>
|
||
<view class="btn flex flex-center flex-column">
|
||
<button type="primary" class="bg-base btn-item" :loading="loading" :disabled="loading" @tap="onRegister">立即注册</button>
|
||
<view class="download bg-base">
|
||
<view class="download-item" @click="download(androidUrl)">
|
||
<text class="iconfont icon"></text>
|
||
<text class="font32">安卓下载</text>
|
||
</view>
|
||
<text class="xian"></text>
|
||
<view class="download-item" @tap="jumpWeb">
|
||
<text class="iconfont icon"></text>
|
||
<text class="font32">苹果网页版</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view style="height: 200rpx;"></view> -->
|
||
<view class="flex flex-center fixed">
|
||
<u-checkbox-group v-model="agreeChecked">
|
||
<u-checkbox
|
||
name="agree"
|
||
:size="15"
|
||
:icon-size="10"
|
||
:label-size="12"
|
||
label-color="#cbcccf"
|
||
>
|
||
</u-checkbox>
|
||
<view class="agreement-text">
|
||
<text class="font24" style="color: #cbcccf;">我已阅读并同意</text>
|
||
<text class="font24 agreement-link" @tap="$navigateTo('/pages/notice/agreement?id='+noticeId)">《用户协议及隐私策略》</text>
|
||
</view>
|
||
</u-checkbox-group>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import sms from "@/components/sms.vue"
|
||
import url from "@/common/http/url.js"
|
||
import mix from "../login/mix.js"
|
||
import publics from "@/common/utils/public.js"
|
||
|
||
export default{
|
||
mixins: [mix],
|
||
components: { sms },
|
||
data(){
|
||
return {
|
||
staticUrl: this.$staticUrl,
|
||
confimpassword: "",
|
||
hasCode: false,
|
||
noticeId: getApp().privacyAgreementNoticeId,//隐私协议ID
|
||
recommendCode: "",
|
||
agreeChecked: []
|
||
}
|
||
},
|
||
async onLoad(opt) {
|
||
uni.clearStorageSync()
|
||
if (opt.code){
|
||
this.hasCode = true
|
||
this.form.recommendCode = opt.code
|
||
this.recommendCode = opt.code
|
||
}
|
||
|
||
// 获取隐私协议
|
||
/* this.$http("GET", url.common.privacyAgreement).then(res =>{
|
||
if (res.data && res.data.length > 0) {
|
||
res.data.forEach(v => {
|
||
if (v.keyCode === "platform_privacy_agreement_user"){
|
||
this.noticeId = v.keyValue
|
||
return
|
||
}
|
||
})
|
||
}
|
||
}) */
|
||
|
||
let _this = this
|
||
// #ifdef APP-PLUS
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
geocode: true,
|
||
success: async function (res) {
|
||
let e = await publics.getPositionToLngAndLat(res.longitude, res.latitude)
|
||
_this.form.adcode = e.result['ad_info'].adcode
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
methods: {
|
||
async onRegister(){
|
||
if (!this.form.nickname) return this.$msg("请输入昵称")
|
||
if (!this.form.mobile) return this.$msg("请输入手机号")
|
||
if (!this.form.code) return this.$msg("请输入短信验证码")
|
||
if (!this.password) return this.$msg("请输入密码")
|
||
if (this.confimpassword !== this.password) return this.$msg("两次密码不一致")
|
||
if (this.hasCode && this.recommendCode) this.form.recommendCode = this.recommendCode
|
||
|
||
// 判断是否勾选用户协议
|
||
if (!this.agreeChecked.includes('agree')) {
|
||
this.showAgreementDialog()
|
||
return
|
||
}
|
||
|
||
this.proceedWithRegistration()
|
||
},
|
||
|
||
showAgreementDialog() {
|
||
uni.showModal({
|
||
title: '',
|
||
content: '请您先阅读并同意《用户协议及隐私策略》',
|
||
confirmText: '同意并注册',
|
||
cancelText: '不同意',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 用户点击同意，自动勾选checkbox并继续注册
|
||
this.agreeChecked = ['agree'] // uview-ui的u-checkbox-group绑定的是数组，包含选中的name值
|
||
this.proceedWithRegistration()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
async proceedWithRegistration() {
|
||
this.loading = true
|
||
this.form.password = await this.passwordEncryption(this.rsaKey, this.password)
|
||
console.log(this.form)
|
||
uni.removeStorageSync('smsTime')
|
||
this.$http("POST", url.login.register, this.form).then(res => {
|
||
this.$msg("注册成功，请下载APP~")
|
||
}).catch(()=>{
|
||
this.loading = false
|
||
})
|
||
},
|
||
onInput(e){
|
||
this.form.recommendCode = e.detail.value
|
||
},
|
||
jumpWeb(){
|
||
window.open("https://hejiume-wap.hushuo.show")
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.main{
|
||
min-height: 100vh;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
padding: 0 30rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.form{
|
||
width: 100%;
|
||
background-color: white;
|
||
border-radius: 20rpx;
|
||
padding: 0 20rpx;
|
||
margin-top: 45rpx;
|
||
&-item{
|
||
border-bottom: 2rpx solid #eee;
|
||
height: 80rpx;
|
||
justify-content: space-between;
|
||
padding-bottom: 10rpx;
|
||
.eye{
|
||
color: #d4d5d8;
|
||
}
|
||
.placeholder{
|
||
color: #999;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
.btn{
|
||
margin-top: 60rpx;
|
||
&-item{
|
||
width: 90%;
|
||
border-radius: 50rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
.btn::after{ border: none;}
|
||
}
|
||
.fixed{
|
||
position: fixed;
|
||
bottom: 30rpx;
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
.download{
|
||
width: 90%;
|
||
border-radius: 50rpx;
|
||
height: 40rpx;
|
||
padding: 20rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 40rpx;
|
||
.xian{
|
||
width: 2rpx;
|
||
height: 100%;
|
||
background-color: white;
|
||
}
|
||
&-item{
|
||
width: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
.icon{
|
||
font-size: 40rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.agreement-text {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
|
||
.agreement-link {
|
||
color: #FFCC33;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
</style> |