index.vue
4.36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<template>
<div class="person_cantainer">
<NafmHeader :title="$t('title.person')" navClass="nafmii-head-bg3" />
<div class="setting_list">
<input type="file" hidden ref="file" accept="image/*" @change="onFileChange">
<van-cell :title="$t('person.photo')" center is-link value-class="right_content" @click="openFile">
<template #default>
<img :src="headerIcon" class="headerImg" alt="">
</template>
</van-cell>
<van-cell :title="$t('person.nickName')" center is-link @click="editCommon('设置昵称',nickname)" value-class="right_content">
<template #default>
<span v-if="nickname">{{nickname}}</span>
<span v-else>{{$t('person.nickNamePlaceholder')}}</span>
</template>
</van-cell>
<van-cell :title="$t('person.phoneNumber')" center value-class="right_content">
<template #default>
183****8924
</template>
</van-cell>
<van-cell :title="$t('person.name')" center is-link @click="editCommon('设置姓名',name)" value-class="right_content">
<template #default>
<span v-if="name">{{name}}</span>
<span v-else>{{$t('person.namePlaceholder')}}</span>
</template>
</van-cell>
<van-cell :title="$t('person.nationality')" center is-link value-class="right_content">
<template #default>
<span v-if="nationality">{{nationality}}</span>
<span v-else>{{$t('person.nationalityPlaceholder')}}</span>
</template>
</van-cell>
<van-cell :title="$t('person.birthday')" center is-link value-class="right_content" @click="openBirthday(true)">
<template #default>
<span v-if="birthday">{{birthday}}</span>
<span v-else>{{$t('person.birthdayPlaceholder')}}</span>
</template>
</van-cell>
<van-cell :title="$t('person.email')" center is-link @click="editCommon('设置邮箱',email)" value-class="right_content">
<template #default>
<span v-if="name">{{email}}</span>
<span v-else>{{$t('person.emailPlaceholder')}}</span>
</template>
</van-cell>
<van-cell :title="$t('person.company')" center is-link @click="editCommon('设置单位',company)" value-class="right_content">
<template #default>
<span v-if="name">{{company}}</span>
<span v-else>{{$t('person.companyPlaceholder')}}</span>
</template>
</van-cell>
</div>
<van-popup v-model="showPicker" position="bottom">
<van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" @confirm="selectBirthday" @cancel="showPicker = false" />
</van-popup>
<van-popup v-model="showPhoto" position="bottom" style="height:100%">
<UpdatePhoto v-if="showPhoto" :file="previewImg" @close="showPhoto=false" @upDataPhoto="headerIcon=$event" />
</van-popup>
</div>
</template>
<script>
import UpdatePhoto from './components/UpdatePhoto';
export default {
name: 'Person',
data() {
return {
headerIcon: require('@/assets/icon/photo_default.png'),
nickname: '',
name: '',
nationality: '',
birthday: '',
email: '',
company: '',
showPicker: false,
minDate: new Date(1900, 0, 1),
maxDate: new Date(2220, 11, 1),
currentDate: new Date(),
showPhoto: false,
previewImg: null
}
},
components: {
UpdatePhoto
},
methods: {
editCommon(title, value) {
this.$router.push({
path: '/user/commonEdit',
query: {
title,
value
}
})
},
openBirthday(value) {
this.showPicker = value
},
// 选择年月日
selectBirthday(value) {
console.log('date', value)
this.showPicker = false
},
// 打开图片预览和拍照
openFile() {
this.$refs.file.click()
},
// 选择图片操作
onFileChange() {
const file = this.$refs.file.files[0]
this.previewImg = file
this.showPhoto = true
// 为了解决相同图片 不触发 change事件 所以要清空file的value值
this.$refs.file.value = ''
}
}
}
</script>
<style lang="less" scoped>
.person_cantainer {
background: #fafafa;
height: 100vh;
}
.headerImg {
width: 50px;
height: 50px;
border-radius: 50%;
}
.right_content {
display: flex;
align-items: center;
justify-content: flex-end;
}
</style>