180 lines
4.3 KiB
Vue
180 lines
4.3 KiB
Vue
<template>
|
|
<view class="content">
|
|
<u-form :model="form" ref="uForm" :error-type="['toast']">
|
|
<u-form-item label="登陆帐号:" prop="username" label-width="170"><u-input placeholder="请输入登陆帐号" v-model="form.username" /></u-form-item>
|
|
<u-form-item label="真实姓名:" label-width="170" prop="name"><u-input placeholder="请输入真实姓名" v-model="form.name" /></u-form-item>
|
|
<u-form-item label="手机号:" label-width="170" prop="phone"><u-input placeholder="请输入输入手机号码" v-model="form.phone" /></u-form-item>
|
|
<u-form-item label="登陆密码:" label-width="170" prop="password"><u-input type="password" placeholder="请输入登陆密码" v-model="form.password" /></u-form-item>
|
|
|
|
<view class="agreement">
|
|
<u-checkbox size="40rpx" v-model="check" @change="checkboxChange"></u-checkbox>
|
|
<view class="agreement-text">
|
|
我已知晓并同意 <text @click="showPopup(4)" style="color:cornflowerblue">《用户服务协议》</text>及<text @click="showPopup(5)" style="color:cornflowerblue">《隐私政策》</text>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="submit_con">
|
|
<u-button type="primary" @click="submit">提交注册</u-button>
|
|
</view>
|
|
</u-form>
|
|
|
|
|
|
<u-popup v-model="popupVisible" mode="bottom" length="60%" :closeable="true">
|
|
<view class="popup-content">
|
|
<rich-text :nodes="protocolsContent" style="line-height: 50rpx;"></rich-text>
|
|
</view>
|
|
<view class="popup-footer">
|
|
|
|
<u-button class="close_pop" size="medium" type="primary" @click="hidePopup">关闭</u-button>
|
|
</view>
|
|
</u-popup>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {toast, clearStorageSync, setStorageSync,getStorageSync, useRouter} from '@/utils/utils.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
action: this.$api_url + '/api/index/upload_cos',
|
|
fileList:[],
|
|
popupVisible: false,
|
|
protocolsContent: "",
|
|
check: false,
|
|
agreement: false,
|
|
form: {
|
|
username: '',
|
|
name: '',
|
|
phone: '',
|
|
cardno: '',
|
|
photo:'',
|
|
password:''
|
|
},
|
|
form_data : {
|
|
floder : 'photo'
|
|
},
|
|
rules: {
|
|
username: [
|
|
{
|
|
required: true,
|
|
message: '请输入登陆帐号',
|
|
// 可以单个或者同时写两个触发验证方式
|
|
trigger: ['change','blur'],
|
|
}
|
|
],
|
|
password: [
|
|
{
|
|
required: true,
|
|
message: '请输入密码',
|
|
// 可以单个或者同时写两个触发验证方式
|
|
trigger: ['change','blur'],
|
|
}
|
|
],
|
|
name: [
|
|
{
|
|
required: true,
|
|
message: '请输入真实姓名',
|
|
// 可以单个或者同时写两个触发验证方式
|
|
trigger: ['change','blur'],
|
|
}
|
|
],
|
|
phone: [
|
|
{
|
|
required: true,
|
|
type:"number",
|
|
message: '请输入登陆手机号',
|
|
// 可以单个或者同时写两个触发验证方式
|
|
trigger: ['change','blur'],
|
|
}
|
|
],
|
|
}
|
|
};
|
|
},
|
|
onReady(){
|
|
this.$refs.uForm.setRules(this.rules);
|
|
},
|
|
|
|
methods: {
|
|
checkboxChange(e) {
|
|
this.agreement = e.value;
|
|
},
|
|
showPopup(id) {
|
|
this.popupVisible = true;
|
|
|
|
const params ={id:id}
|
|
this.$api.page(params).then(res => {
|
|
//console.log('list', res.data);
|
|
this.protocolsContent = res.data.content
|
|
})
|
|
|
|
},
|
|
hidePopup() {
|
|
this.popupVisible = false;
|
|
},
|
|
|
|
submit() {
|
|
this.$refs.uForm.validate(valid => {
|
|
if (valid) {
|
|
if(!this.agreement) return toast('请查看并同意相关协议');
|
|
this.$api.register(this.form).then(res => {
|
|
if(res.code==0){
|
|
toast(res.msg)
|
|
setTimeout(()=>{
|
|
uni.navigateBack()
|
|
},1500)
|
|
|
|
console.log(res);
|
|
}else{
|
|
toast(res.msg)
|
|
console.log(res);
|
|
}
|
|
})
|
|
|
|
|
|
console.log(this.form)
|
|
} else {
|
|
|
|
console.log('验证失败');
|
|
}
|
|
})
|
|
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
.popup-content {
|
|
padding: 40rpx;
|
|
padding-bottom: 120rpx;
|
|
|
|
}
|
|
|
|
.popup-footer {
|
|
margin-top: 20rpx;
|
|
text-align: center;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
.content{padding:30rpx}
|
|
.agreement {
|
|
display: flex;
|
|
margin: 40rpx 0 0 10rpx;
|
|
|
|
.agreement-text {
|
|
padding-left: 0rpx;
|
|
color: $u-tips-color;
|
|
}
|
|
}
|
|
.submit_con{margin-top: 20rpx;}
|
|
</style>
|
|
|