344 lines
7.1 KiB
Vue
344 lines
7.1 KiB
Vue
<template>
|
|
<view class="container safe-area-inset-bottom">
|
|
<MessageNotification />
|
|
|
|
<view class="title">
|
|
欢迎注册新账号
|
|
</view>
|
|
|
|
<view class="box">
|
|
<view class="info">
|
|
<view class="pwd">
|
|
<d-input :maxlength="11" height="96" v-model="form['mobile']"
|
|
prefixIcon="https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/xk-client-wx/static/choose/act.png" borderRadius="96rpx" prefixIconSize="40rpx"
|
|
placeholder="请输入手机号" @blur="check" @input="is_d=false" :placeholder-style="{fontSize:'32rpx'}"
|
|
:custom-style="{fontSize:'32rpx',paddingLeft:'60rpx'}" />
|
|
</view>
|
|
|
|
<view class="pwd">
|
|
<u-field v-model="code" placeholder="请填写验证码" :placeholder-style="{fontSize:'32rpx'}">
|
|
<u-button size="mini" slot="right" @click="getCode">{{codeText}}</u-button>
|
|
</u-field>
|
|
<u-verification-code ref="uCode" @change="codeChange" class="code">
|
|
</u-verification-code>
|
|
</view>
|
|
|
|
<view class="flex-row" style="margin-top: 88rpx;">
|
|
<u-icon size="35" :color="form['check']?'#2979FF':'#F3F4F5'" name="checkmark-circle-fill"
|
|
@click="form['check']=!form['check']"></u-icon>
|
|
<view class="agreement">
|
|
我已阅读并同意
|
|
<text @click="getInfo(1)">《用户服务协议》</text>
|
|
和
|
|
<text @click="getInfo(2)">《隐私权政策》</text>
|
|
</view>
|
|
</view>
|
|
<view class="btn" :class="form['check']?'':'bg'">
|
|
<u-button :throttle-time="20" shape="circle" @click="register" :disabled="!form['check']">
|
|
立即注册</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<u-popup v-model="show" :safe-area-inset-bottom="true" mode="bottom" height="68%" border-radius="20"
|
|
:closeable="true">
|
|
<view class="agreen">
|
|
<u-parse :html="content"></u-parse>
|
|
</view>
|
|
</u-popup>
|
|
|
|
<u-toast ref="uToast" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getAgreem,
|
|
getCodes,
|
|
getsLogin
|
|
} from '../../request/api/api';
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: {
|
|
check: false
|
|
},
|
|
is_d: false,
|
|
statusBarHeight: this.$statusBarHeight,
|
|
navbarHeight: this.$navbarHeight,
|
|
mobile: '',
|
|
code: '',
|
|
codeText: '',
|
|
time: "",
|
|
};
|
|
},
|
|
onLoad(e) {
|
|
|
|
},
|
|
methods: {
|
|
check() {
|
|
this.getCode()
|
|
},
|
|
getCode() {
|
|
if (this.form['mobile'] == '') {
|
|
// uni.showToast({
|
|
// title: '手机号不能为空',
|
|
// duration: 2000,
|
|
// icon: 'error'
|
|
// });
|
|
this.$refs.uToast.show({
|
|
title: '手机号不能为空',
|
|
type: 'default',
|
|
icon: false
|
|
})
|
|
return
|
|
}
|
|
if (!/^1[345678]\d{9}$/.test(this.form['mobile'])) {
|
|
// uni.showToast({
|
|
// title: '请输入正确的手机号',
|
|
// duration: 2000,
|
|
// icon: 'error'
|
|
// });
|
|
this.$refs.uToast.show({
|
|
title:'请输入正确的手机号',
|
|
type: 'default',
|
|
icon: false
|
|
})
|
|
return
|
|
}
|
|
|
|
let data = {
|
|
mobile: this.form['mobile'],
|
|
store_id: '11001'
|
|
}
|
|
|
|
getCodes({
|
|
method: 'post',
|
|
data: data
|
|
}).then((res) => {
|
|
// console.log(res, 'code');
|
|
if (res.data.errcode == 0) {
|
|
uni.setStorageSync('smsCode', res.data.data.smsCode)
|
|
}
|
|
|
|
if (this.$refs.uCode.canGetCode) {
|
|
// 模拟向后端请求验证码
|
|
uni.showLoading({
|
|
title: '正在获取验证码'
|
|
})
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
// 通知验证码组件内部开始倒计时
|
|
this.$refs.uCode.start();
|
|
}, 1000);
|
|
} else {
|
|
this.$u.toast('倒计时结束后再发送');
|
|
}
|
|
})
|
|
},
|
|
register() {
|
|
if (this.form['pwd'] == []) {
|
|
uni.showToast({
|
|
title: '请输入验证码',
|
|
duration: 2000,
|
|
icon: 'error'
|
|
});
|
|
return
|
|
}
|
|
if (!this.form['check']) {
|
|
uni.showToast({
|
|
title: '请勾选协议',
|
|
duration: 2000,
|
|
icon: 'error'
|
|
});
|
|
return
|
|
}
|
|
|
|
uni.showLoading({
|
|
title: "加载中"
|
|
});
|
|
uni.removeStorageSync('token')
|
|
|
|
let data = {
|
|
mobile: this.form['mobile'],
|
|
smsCode: this.code,
|
|
store_id: '11001',
|
|
status: 3
|
|
}
|
|
getsLogin({
|
|
method: "post",
|
|
data: data
|
|
}).then(res => {
|
|
// console.log(res,'ress');
|
|
|
|
if (res.data.errcode == 0) {
|
|
uni.setStorageSync('token', res.data.data.token)
|
|
uni.reLaunch({
|
|
url: "/pages/home/home",
|
|
fail: (e) => {
|
|
// console.log(e);
|
|
},
|
|
success() {
|
|
uni.showToast({
|
|
title: '登陆成功',
|
|
duration: 2000
|
|
});
|
|
uni.hideLoading();
|
|
}
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
icon: "error",
|
|
title: '登陆失败'
|
|
})
|
|
}
|
|
uni.hideLoading();
|
|
}).catch(() => {
|
|
uni.hideLoading();
|
|
})
|
|
},
|
|
// 协议
|
|
getInfo(e) {
|
|
this.show = true
|
|
|
|
getAgreem({
|
|
method: "post",
|
|
data: {
|
|
end: 1,
|
|
store_id: '11001'
|
|
}
|
|
}).then((res) => {
|
|
console.log(res);
|
|
|
|
if (e == 1) {
|
|
this.content = res.data.data[0].content
|
|
} else {
|
|
this.content = res.data.data[1].content
|
|
}
|
|
})
|
|
},
|
|
checkboxChange(val) {
|
|
console.log(val);
|
|
},
|
|
codeChange(text) {
|
|
this.codeText = text;
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.title {
|
|
width: 750rpx;
|
|
padding-top: 100rpx;
|
|
text-align: center;
|
|
font-size: 48rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #0D111A;
|
|
background: linear-gradient(180deg, #EAF2FF 0%, #FFFFFF 100%);
|
|
margin-bottom: 60rpx;
|
|
}
|
|
|
|
.flex-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 34rpx;
|
|
|
|
.agreement {
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #6C7380;
|
|
margin-left: 16rpx;
|
|
|
|
text {
|
|
color: #2979FF;
|
|
size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box {
|
|
box-sizing: border-box;
|
|
padding: 0 52rpx;
|
|
}
|
|
|
|
.code {
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #1777FF;
|
|
background: #F9FAFB;
|
|
}
|
|
|
|
.agreement {
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #6C7380;
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.pwd {
|
|
width: 646rpx;
|
|
height: 96rpx;
|
|
background: #F9FAFB;
|
|
border-radius: 48rpx 48rpx 48rpx 48rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #CCCCCC;
|
|
margin: 0rpx 0 30rpx;
|
|
|
|
::v-deep button {
|
|
color: #1777FF;
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
.hint {
|
|
margin-top: 80rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #6C7380;
|
|
}
|
|
|
|
.btn {
|
|
::v-deep button {
|
|
width: 648rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
background: #4175EE;
|
|
border: 0;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.bg {
|
|
::v-deep button {
|
|
width: 648rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
background: #8ABAFF;
|
|
border: 0;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.agreen {
|
|
padding: 60rpx 50rpx 20rpx;
|
|
}
|
|
}
|
|
</style> |