<template>
|
<view class="container d-flex flex-column">
|
<view class="flex-fill form">
|
<list-cell :hover="false">
|
<view class="form-input w-100 d-flex align-items-center">
|
<view class="label">昵称</view>
|
<view class="input flex-fill">
|
<input type="text" placeholder="请填写昵称" placeholder-class="text-color-assist font-size-base"
|
v-model="member.nickname">
|
</view>
|
</view>
|
</list-cell>
|
<list-cell :hover="false">
|
<view class="form-input w-100 d-flex align-items-center">
|
<view class="label">手机号码</view>
|
<view class="input flex-fill">
|
<input type="text" v-model="member.mobilePhone" disabled>
|
</view>
|
</view>
|
</list-cell>
|
<list-cell :hover="false">
|
<view class="form-input w-100 d-flex align-items-center">
|
<view class="label">性别</view>
|
<view class="input flex-fill">
|
<view class="radio-group">
|
<view class="radio" :class="{'checked': member.gender == '1'}" style="margin-right: 10rpx;" @tap="member.gender=1">先生</view>
|
<view class="radio" :class="{'checked': member.gender == '2'}" @tap="member.gender=2">女士</view>
|
</view>
|
</view>
|
</view>
|
</list-cell>
|
<list-cell :hover="false" :arrow="!member.birthday">
|
<view class="form-input w-100 d-flex align-items-center">
|
<view class="label">生日</view>
|
<view class="input flex-fill">
|
<picker mode="date" :value="date" :start="startDate" :end="endDate" v-if="!member.birthday" @change="handleDateChange">
|
生日当天有惊喜
|
</picker>
|
<input type="text" v-else :value="member.birthday" disabled>
|
</view>
|
</view>
|
</list-cell>
|
<list-cell :hover="false" last>
|
<view class="form-input w-100 d-flex align-items-center">
|
<view class="label">入会时间</view>
|
<view class="input flex-fill">
|
<input type="text" v-model="member.openingCardDate" disabled>
|
</view>
|
</view>
|
</list-cell>
|
</view>
|
<view class="btn-box d-flex align-items-center just-content-center">
|
<button type="primary" class="save-btn" @tap="save">保存</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import listCell from '@/components/list-cell/list-cell'
|
|
export default {
|
components: {
|
listCell
|
},
|
data() {
|
const currentDate = this.getDate({format: true})
|
return {
|
member: {},
|
date: currentDate
|
}
|
},
|
computed: {
|
startDate() {
|
return this.getDate('start');
|
},
|
endDate() {
|
return this.getDate('end');
|
}
|
},
|
onLoad() {
|
this.member = this.$store.state.member
|
},
|
methods: {
|
getDate(type) {
|
const date = new Date();
|
let year = date.getFullYear();
|
let month = date.getMonth() + 1;
|
let day = date.getDate();
|
|
if (type === 'start') {
|
year = year - 60;
|
} else if (type === 'end') {
|
year = year + 2;
|
}
|
month = month > 9 ? month : '0' + month;;
|
day = day > 9 ? day : '0' + day;
|
return `${year}-${month}-${day}`;
|
},
|
handleDateChange(e) {
|
this.member.birthday = e.target.value
|
},
|
save() {
|
const member = Object.assign(this.$store.state.member, this.member)
|
this.$store.commit('SET_MEMBER', member)
|
uni.navigateBack()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
page {
|
height: 100%;
|
}
|
|
.container {
|
padding: 20rpx 30rpx;
|
}
|
|
.form {
|
border-radius: 8rpx;
|
}
|
|
.form-input {
|
.label {
|
width: 160rpx;
|
font-size: $font-size-base;
|
color: $text-color-base;
|
}
|
|
.input {
|
}
|
|
.radio-group {
|
display: flex;
|
justify-content: flex-start;
|
|
.radio {
|
padding: 10rpx 30rpx;
|
border-radius: 6rpx;
|
border: 2rpx solid $text-color-assist;
|
color: $text-color-assist;
|
font-size: $font-size-base;
|
|
&.checked {
|
background-color: $color-primary;
|
color: $text-color-white;
|
border: 2rpx solid $color-primary;
|
}
|
}
|
}
|
}
|
|
.btn-box {
|
height: calc((100vh - 40rpx) / 2);
|
}
|
|
.save-btn {
|
width: 90%;
|
border-radius: 50rem !important;
|
font-size: $font-size-lg;
|
}
|
</style>
|
