products/uni-shop/pages/personal-user/personal-user.vue

<template>
  <v-header title="我的信息" backgroundColor="#fff">
    <view>
      <view
        v-for="(item,index) in data"
        :key="index"
        class="personal-item row aCenter"
        :class="['personal-item-'+item.type]"
      >
        <view class="flex-all-1">{{item.label}}</view>
        <view @click.stop="trigger(item)"  v-if="item.type==='avatar'" class="personal-item-use-avatar overflow">
          <v-image  class="personal-item-use-avatar overflow" :src="user[item.key]"></v-image>
        </view>
        <view v-else class="person-item-value line-1"
              @click.stop="trigger(item)"
          :class="{'person-item-placeholder':!user[item.key]}"
        >{{user[item.key] || item.placeholder || ''}}</view>
        <text class="iconfont iconfont-more person-more"></text>
      </view>
    </view>

    <modal v-model="modal">
      <view class="screen_all center">
        <view class="personal-modal flex">
          <view class="personal-modal-header center">{{ useItem.label }}</view>
          <view class="personal-modal-input-wrap jCenter">
            <input :placeholder="useItem.placeholder" :type="useItem.type || 'text'" :maxlength="useItem.maxLength || 10" v-model="useItem.value" />
          </view>
          <view class="row flex-all-1 overflow personal-modal-footer">
            <view @click="closeModal" class="flex-all-1 center">取消</view>
            <view class="flex-all-1 center" @click="triggerSubmit">确定</view>
          </view>
        </view>
      </view>
    </modal>
  </v-header>
</template>

<script>
import data from './data/data';
import vHeader from '@/components/v-header/main';
import mixins from './mixins';
import VImage from "../../components/v-image/main";
import Modal from "../../components/modal/main";
export default {
  name: "personal",
  data(){
    return {
      data
    }
  },
  mixins,
  components:{
    Modal,
    VImage,
    vHeader
  }
}
</script>

<style src="./style.scss" lang="scss">

</style>