index.vue

<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" @click="jumpNationality">
        <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 class="finish" v-if="showFinish" @click="jumpPageIndex">完成</div>
  </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,
      showFinish: false
    }
  },
  components: {
    UpdatePhoto
  },
  mounted() {
    // 如果从注册跳转过来到 那么要显示 “完成” 按钮
    const { status } = this.$route.query
    if (status) {
      this.showFinish = true
    }
  },
  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 = ''
    },
    // 点击完成 跳转到 我的
    jumpPageIndex() {
      this.$router.push({
        path: '/user/center'
      })
    },
    // 跳转到 国籍列表页面
    jumpNationality() {
      this.$router.push({
        path: '/user/nationality'
      })
    }
  }
}
</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;
}
.finish {
  margin-top: 33px;
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #1170bf;
  background: #fff;
}
</style>