<template>
|
<view>
|
<form @submit="add">
|
<view class="input-group-row">
|
<text class="label">会员姓名<text class="require">*</text></text>
|
<input name="account" type="text" value="" placeholder="请输入会员姓名" placeholder-class='placeholder'/>
|
</view>
|
<view class="input-group-row">
|
<text class="label">手机号码<text class="require">*</text></text>
|
<input name="account" type="number" value="" placeholder="请输入手机号码" placeholder-class='placeholder'/>
|
</view>
|
<view class="input-group-row">
|
<text class="label">性别<text class="require">*</text></text>
|
<view class="radio-group">
|
<radio-group @change="sexChange">
|
<label><radio name="sex" value="1" color="#518EFF" class="radio" checked/>男</label>
|
<label><radio name="sex" value="2" color="#518EFF" class="radio"/>女</label>
|
</radio-group>
|
</view>
|
</view>
|
<view class="input-group-row">
|
<text class="label">生日</text>
|
<view>
|
<picker mode="date" @change="dateChange" :end="endDate">
|
<view class="uni-input">{{birthday}}</view>
|
</picker>
|
</view>
|
</view>
|
<view class="input-group-row">
|
<text class="label">省市区</text>
|
<view @click="openAddres">
|
{{regionText}}
|
</view>
|
</view>
|
</form>
|
<region ref="simpleAddress" @onConfirm="onConfirm" themeColor="#518EFF" cancelColor="#8c9fad"></region>
|
</view>
|
</template>
|
|
<script>
|
import region from '../../components/simple-address/simple-address.vue';
|
export default{
|
components:{
|
region
|
},
|
data(){
|
return {
|
birthday: '1990-01-02',
|
regionText: '321'
|
}
|
},
|
computed: {
|
endDate() {
|
return this.getDate('end');
|
}
|
},
|
methods:{
|
add(){
|
|
},
|
sexChange(e){
|
console.log(e)
|
},
|
dateChange(e){
|
this.birthday = e.detail.value;
|
console.log(e)
|
},
|
getDate(type) {
|
const date = new Date();
|
let year = date.getFullYear();
|
let month = date.getMonth() + 1;
|
let day = date.getDate();
|
|
if (type === 'start') {
|
year = year - 70;
|
}
|
month = month > 9 ? month : '0' + month;;
|
day = day > 9 ? day : '0' + day;
|
return `${year}-${month}-${day}`;
|
},
|
openAddres(){
|
this.$refs.simpleAddress.open();
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.input-group-row{
|
display: flex;
|
justify-content: space-between;
|
padding: 10px 10px;
|
margin-bottom: 10px;
|
border-bottom: 1px solid #EDEAF4;
|
}
|
.input-group-row .label{
|
font-size: 15px;
|
padding-right: 10px;
|
}
|
.input-group-row .label .require{
|
color: #d20808;
|
padding-left: 4px;
|
}
|
.input-group-row input{
|
flex: 1;
|
font-size: 15px;
|
text-align: right;
|
}
|
.input-group-row .radio-group{
|
text-align: right;
|
}
|
.input-group-row .radio-group .radio{
|
transform: scale(0.8);
|
margin-left: 10px;
|
}
|
</style>
|
