|
@@ -0,0 +1,198 @@
|
|
|
+<template>
|
|
|
+
|
|
|
+ <section class="screen flex">
|
|
|
+
|
|
|
+ <!-- 头部部分 -->
|
|
|
+ <header class="personal-data-header flex-1 row">
|
|
|
+
|
|
|
+ <aside class="personal-assets">
|
|
|
+ <header class="row personal-assets-header">
|
|
|
+ <aside class="personal-avatar-container">
|
|
|
+ <header class="personal-header-info">头像</header>
|
|
|
+ <section class="personal-upload-avatar">
|
|
|
+ <v-upload size="big" @upload-next="updateAvatar" :src="user.head_pic" :trigger-image="false">
|
|
|
+ <template v-slot:image="{trigger}">
|
|
|
+ <div @click="trigger" class="cursor-pointer personal-update-avatar center absolute">修改头像</div>
|
|
|
+ </template>
|
|
|
+ </v-upload>
|
|
|
+ </section>
|
|
|
+ </aside>
|
|
|
+ <aside class="flex-1">
|
|
|
+ <header class="personal-header-info">声音</header>
|
|
|
+ <section class="personal-audio-container">
|
|
|
+ <sound-recording></sound-recording>
|
|
|
+ </section>
|
|
|
+ </aside>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <footer class="personal-assets-footer row between">
|
|
|
+
|
|
|
+ <aside
|
|
|
+ v-for="(item,index) in photoWallNumber"
|
|
|
+ class="personal-assets-footer-item"
|
|
|
+ :key="'footer-'+index"
|
|
|
+ >
|
|
|
+ <v-upload
|
|
|
+ @upload-next="updatePhotoWallPool(index,$event)"
|
|
|
+ :src="$store.getters.photoWall[index]"
|
|
|
+ ></v-upload>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ </footer>
|
|
|
+
|
|
|
+
|
|
|
+ </aside>
|
|
|
+ <aside class="personal-info flex">
|
|
|
+ <header class="personal-header-info rowACenter">
|
|
|
+ <div class="flex-1">资料</div>
|
|
|
+ <aside @click="switchEditMode" class="rowACenter personal-edit-icon cursor-pointer">
|
|
|
+ <img src="../images/info.png" />
|
|
|
+ <span>{{infoEdit?'保存资料':'编辑资料'}}</span>
|
|
|
+ </aside>
|
|
|
+ </header>
|
|
|
+ <section class="flex-1 overflow personal-info-scroll">
|
|
|
+ <scroll-view>
|
|
|
+ <aside
|
|
|
+ v-for="(item,index) in infoData"
|
|
|
+ class="personal-info-item row"
|
|
|
+ :class="{'personal-info-edit-item':infoEdit}"
|
|
|
+ :key="'info-item-'+index"
|
|
|
+ >
|
|
|
+ <div class="personal-info-label">{{item.label}}:</div>
|
|
|
+ <div class="personal-info-value flex-1"
|
|
|
+ :class="{'personal-info-placeholder': !infoDataValue[item.key].value}"
|
|
|
+ v-if="infoDataValue[item.key] && !infoEdit"
|
|
|
+ >{{ infoDataValue[item.key].label || item.labelPlaceholder }}</div>
|
|
|
+ <div v-else-if="infoEdit" class="flex-1 overflow">
|
|
|
+
|
|
|
+ <v-address
|
|
|
+ v-if="LibComponent.address === item.component"
|
|
|
+ @change="changeAddress(item,$event)"
|
|
|
+ >
|
|
|
+
|
|
|
+ </v-address>
|
|
|
+ <a-date-picker
|
|
|
+ v-else-if="LibComponent.date === item.component"
|
|
|
+ :default-value="infoDataValue[item.key].value"
|
|
|
+ :placeholder="item.placeholder"
|
|
|
+ class="personal-edit-input personal-edit-date"
|
|
|
+ @change="changeValue(item,$event)"
|
|
|
+ />
|
|
|
+ <a-select v-else-if="LibComponent.select === item.component"
|
|
|
+ class="personal-edit-input personal-edit-select"
|
|
|
+ :value="infoDataValue[item.key].value"
|
|
|
+ :placeholder="item.placeholder"
|
|
|
+ @change="changeValue(item,$event)"
|
|
|
+ >
|
|
|
+ <a-select-option
|
|
|
+ v-for="(cItem,cIndex) in item.data"
|
|
|
+ :value="cItem.value"
|
|
|
+ >
|
|
|
+ {{cItem.label}}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+
|
|
|
+ <div v-else-if="LibComponent.textarea === item.component" class="personal-edit-input personal-edit-textarea-container">
|
|
|
+ <textarea class="personal-edit-textarea screen"
|
|
|
+ :placeholder="item.placeholder"
|
|
|
+ :maxlength="item.maxLength"
|
|
|
+ v-model="infoDataValue[item.key].value"
|
|
|
+ ></textarea>
|
|
|
+ <section class="personal-edit-textarea-length">{{infoDataValue[item.key].value ? infoDataValue[item.key].value.length : 0}}/{{item.maxLength}}</section>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 默认输入 -->
|
|
|
+ <div v-else class="personal-edit-input">
|
|
|
+
|
|
|
+ <input type="text" class="screen" :placeholder="item.placeholder"
|
|
|
+ v-model="infoDataValue[item.key].value"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </aside>
|
|
|
+ </scroll-view>
|
|
|
+ </section>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <!-- 底部 -->
|
|
|
+ <footer class="personal-data-footer row">
|
|
|
+ <div
|
|
|
+ v-for="(item,index) in footerData"
|
|
|
+ :key="'footer-'+index"
|
|
|
+ class="flex-1 rowCenter"
|
|
|
+ >
|
|
|
+ <img :src="item.icon" class="personal-footer-icon" />
|
|
|
+ <div class="flex-1">{{item.label}}</div>
|
|
|
+ <div class="cursor-pointer personal-footer-button center">认证</div>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
+
|
|
|
+ </section>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import footerData from '../data/footer';
|
|
|
+import mixins from '../mixins/index';
|
|
|
+import {
|
|
|
+ Select,
|
|
|
+ DatePicker
|
|
|
+} from 'ant-design-vue';
|
|
|
+import {
|
|
|
+ vAddress,
|
|
|
+ scrollView,
|
|
|
+ vUpload,
|
|
|
+ soundRecording
|
|
|
+} from '$components';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "personal-data",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ footerData
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mixins,
|
|
|
+ components:{
|
|
|
+ [Select.name]:Select,
|
|
|
+ [Select.Option.displayName]:Select.Option,
|
|
|
+ [DatePicker.name]:DatePicker,
|
|
|
+ vAddress,
|
|
|
+ scrollView,
|
|
|
+ vUpload,
|
|
|
+ soundRecording
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss" src="../style.scss"></style>
|
|
|
+
|
|
|
+<style>
|
|
|
+.personal-edit-select .ant-select-selector,.personal-edit-date .ant-input{
|
|
|
+ background-color: transparent !important;
|
|
|
+ border: none !important;
|
|
|
+ outline: none !important;
|
|
|
+ color: #fff;
|
|
|
+ padding: 0 !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+ opacity: 1 !important;
|
|
|
+}
|
|
|
+.personal-edit-date .ant-input{
|
|
|
+ height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.personal-edit-date .ant-input::placeholder{
|
|
|
+ color: rgba(255,255,255,0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.personal-edit-select .ant-select-selection-item,.personal-edit-select .ant-select-arrow,.personal-edit-date .ant-calendar-picker-icon {
|
|
|
+ color: #fff !important;
|
|
|
+
|
|
|
+}
|
|
|
+.personal-edit-date .ant-calendar-picker-clear{
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+</style>
|