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>
|