344 lines
8.2 KiB
Vue
344 lines
8.2 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- <VNavigationBar title-color="#333" background-color="#fff" title="注册会员"></VNavigationBar> -->
|
|
<view class="top_Bar">
|
|
<uni-icons @click="goHome()" size="24" type="left"
|
|
color="#000" style="margin-left: 10px;" ></uni-icons>
|
|
<view class="title_top">完善会员信息</view>
|
|
<view style="width: 24px;height: 24px;"></view>
|
|
</view>
|
|
<view class="body">
|
|
<view class="formItem">
|
|
<view class="formLabel">姓名</view>
|
|
<view class="formContainer">
|
|
<input placeholder="请填写你的真实姓名" v-model="formData.cusName" type="text"/>
|
|
</view>
|
|
</view>
|
|
<view class="formItem">
|
|
<view class="formLabel">性别</view>
|
|
<view class="formContainer">
|
|
<radio-group name="group1" class="radioGroup" :bindchange="radioChange">
|
|
<label class="radio" v-for="(item, index) in radioSexItems" :key="item.value">
|
|
<radio activeBackgroundColor="#009EDA" :value="item.value" :checked="item.checked"/>
|
|
{{item.name}}
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
<view class="formItem">
|
|
<view class="formLabel">身份证号</view>
|
|
<view class="formContainer">
|
|
<input placeholder="请填写你的身份证号" v-model="formData.idCard" type="text"/>
|
|
</view>
|
|
</view>
|
|
<view class="formItem">
|
|
<view class="formLabel">生日</view>
|
|
<view class="formContainer">
|
|
<picker mode="date" :value="formData.birthday" @change="bindDateChange">
|
|
<view>{{formData.birthday}}</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="formItem">-->
|
|
<!-- <view class="formLabel">手机号</view>-->
|
|
<!-- <view class="formContainer">-->
|
|
<!-- <input placeholder="请填写你的手机号" v-model="formData.phoneNumber" type="text"/>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<view class="formItem">
|
|
<view class="formLabel">联系地址</view>
|
|
<view class="formContainer">
|
|
<textarea placeholder="请填写你的联系地址" v-model="formData.address" maxlength="300"/>
|
|
</view>
|
|
</view>
|
|
<view class="dl" @click="getlogin()">
|
|
<text>保存</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import VNavigationBar from '@/components/VNavigationBar.vue'
|
|
import request from "../../utils/request";
|
|
import {
|
|
setToken,
|
|
} from '@/utils/auth.js'
|
|
|
|
export default {
|
|
components: {
|
|
VNavigationBar
|
|
},
|
|
data() {
|
|
return {
|
|
formData: {
|
|
openId: "",
|
|
cusName: "",
|
|
sex: "",
|
|
idCard:"",
|
|
birthday:"请选择你的生日",
|
|
// phoneNumber:"",
|
|
address:"",
|
|
},
|
|
//性别
|
|
radioSexItems: [
|
|
{ name: '男', value: '0', checked: true },
|
|
{ name: '女', value: '1', checked: false },
|
|
],
|
|
detailAddress: [
|
|
['a', 'b'],
|
|
['b', 'a']
|
|
],
|
|
addressRange: [
|
|
['山东'],
|
|
['济南'],
|
|
['历下区']
|
|
]
|
|
};
|
|
},
|
|
onLoad(e) {
|
|
this.formData.openId = e.openId
|
|
},
|
|
methods: {
|
|
goHome(){
|
|
uni.reLaunch({
|
|
url:'/pages-home/home/home'
|
|
})
|
|
},
|
|
/**
|
|
* 注册
|
|
*/
|
|
async getlogin(){
|
|
//校验表单填写
|
|
if(this.checkForm()){
|
|
//获取选的性别
|
|
this.formData.sex = this.radioSexItems.filter(item => item.checked ===true)[0].value;
|
|
await request({
|
|
url: '/base/custom-app/register',
|
|
method: 'post',
|
|
data: this.formData
|
|
}).then((res) => {
|
|
if (res.code==200) {
|
|
uni.reLaunch({
|
|
url: '/pages-home/home/home'
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
checkForm(){
|
|
if(""==this.formData.cusName){
|
|
uni.showToast({
|
|
title: '请填写姓名',
|
|
icon: 'none'
|
|
})
|
|
return false
|
|
}
|
|
if(""==this.formData.idCard || !this.isValidID(this.formData.idCard)){
|
|
uni.showToast({
|
|
title: '请填写正确的身份证号',
|
|
icon: 'none'
|
|
})
|
|
return false
|
|
}
|
|
if("请选择你的生日"==this.formData.birthday){
|
|
uni.showToast({
|
|
title: '请选择生日',
|
|
icon: 'none'
|
|
})
|
|
return false
|
|
}
|
|
// if(""==this.formData.phoneNumber || !this.isValidPhoneNumber(this.formData.phoneNumber)){
|
|
// uni.showToast({
|
|
// title: '请填写手机号',
|
|
// icon: 'none'
|
|
// })
|
|
// return false
|
|
// }
|
|
if(""==this.formData.address){
|
|
uni.showToast({
|
|
title: '请填写联系地址',
|
|
icon: 'none'
|
|
})
|
|
return false
|
|
}
|
|
return true;
|
|
},
|
|
/**
|
|
* 校验身份证号是否合法
|
|
* @param id
|
|
* @returns {boolean}
|
|
*/
|
|
isValidID(id) {
|
|
const regex = /^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/;
|
|
return regex.test(id);
|
|
},
|
|
/**
|
|
* 校验手机号
|
|
* @param phoneNumber
|
|
* @returns {boolean}
|
|
*/
|
|
isValidPhoneNumber(phoneNumber) {
|
|
const regex = /^1[3-9]\d{9}$/;
|
|
return regex.test(phoneNumber);
|
|
},
|
|
bindDateChange(e) {
|
|
this.formData.birthday = e.detail.value;
|
|
this.$forceUpdate()
|
|
},
|
|
radioChange: function(e) {
|
|
let radioItems = this.radioSexItems;
|
|
for (let i = 0, len = radioItems.length; i < len; ++i) {
|
|
radioItems[i].checked = radioItems[i].value === e.detail.value;
|
|
}
|
|
this.radioSexItems = radioItems;
|
|
},
|
|
submit() {
|
|
this.$refs.form.validate().then(res => {
|
|
console.log('表单数据信息：', res);
|
|
}).catch(err => {
|
|
console.log('表单错误信息：', err);
|
|
})
|
|
},
|
|
detailColumnChangeFun({
|
|
detail
|
|
}) {
|
|
if (detail.column === 0) {
|
|
// 动态配置第二列
|
|
this.$set(this.detailAddress, 1, ['m', 'n'])
|
|
}
|
|
},
|
|
addressColumnChangeFun({
|
|
detail
|
|
}) {
|
|
if (detail.column === 0) {
|
|
// 动态配置第二列
|
|
this.$set(this.detailAddress, 1, ['济宁'])
|
|
// 动态配置第三列
|
|
this.$set(this.detailAddress, 2, ['任城'])
|
|
} else if (detail.column === 1) {
|
|
// 动态配置第三列
|
|
this.$set(this.detailAddress, 2, ['任城'])
|
|
}
|
|
},
|
|
// 获取上传状态
|
|
select(e) {
|
|
console.log('选择文件：', e)
|
|
},
|
|
// 获取上传进度
|
|
progress(e) {
|
|
console.log('上传进度：', e)
|
|
},
|
|
|
|
// 上传成功
|
|
success(e) {
|
|
console.log('上传成功')
|
|
},
|
|
|
|
// 上传失败
|
|
fail(e) {
|
|
console.log('上传失败：', e)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.container {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.body {
|
|
flex: 1;
|
|
height: 0;
|
|
overflow: auto;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.formItem {
|
|
padding: 40rpx 0;
|
|
margin: 0 32rpx;
|
|
border-bottom: 1rpx solid #EEEEEE;
|
|
}
|
|
|
|
.formLabel {
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
.formLabel:before {
|
|
content: "*";
|
|
color: red;
|
|
}
|
|
|
|
.radioGroup {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 100rpx;
|
|
}
|
|
|
|
.radio {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 20rpx;
|
|
}
|
|
|
|
/* #ifdef MP-WEIXIN */
|
|
radio {
|
|
filter: hue-rotate(90deg);
|
|
}
|
|
|
|
/* #endif */
|
|
.formPicker {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 20rpx;
|
|
}
|
|
|
|
.formPickerInput {
|
|
flex: 1;
|
|
width: 0;
|
|
}
|
|
|
|
.formPickerBtn {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
}
|
|
.dl {
|
|
width: 90%;
|
|
height: 44px;
|
|
background: linear-gradient(-46deg, #0853C4 0%, #4282D8 80%);
|
|
border-radius: 5px;
|
|
margin: 0 auto;
|
|
font-size: 16px;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 22px;
|
|
}
|
|
.top_Bar{
|
|
width: 100%;
|
|
height: 40px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
|
|
padding-top: 44px;
|
|
}
|
|
.title_top{
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
</style>
|