tf-business-card/components/cardCom/index.vue

<template>
  <view class="cardCom">
    <view class="card-bg">
      <image class="" :src="bgList[imgSerial]" />
    </view>
    <view class="card-container">
      <view class="card-header">
        <view class="header-left">
          <view class="header-title">
            <text>{{ cardData.name || '' }}</text>
            <text>{{ cardData.positions }}</text>
          </view>
          <view class="company">{{ cardData.company || '' }}</view>
        </view>
        <view class="header-right" @click="changeImg">
          <view class="edit" v-if="isEdit">编辑</view>
          <view class="img-box">
            <template v-if="cardData.head">
              <image
              class=""
              :src="cardData.head"
            />
            </template>
            <template v-else>
              <image
              class=""
              src="@/static/images/default_avatar.png"
            />
            </template>
           
          </view>
        </view>
      </view>
      <view class="card-content">
        <view class="content-item" v-if="cardData.mobile">
          <image class="" src="@/static/images/icon_1.png" />
          <text>{{ cardData.mobile }}</text>
        </view>
        <view class="content-item" v-if="cardData.wechat">
          <image class="" src="@/static/images/icon_2.png" />
          <text>{{ cardData.wechat }}</text>
        </view>
        <view class="content-item" v-if="cardData.address">
          <image class="" src="@/static/images/icon_3.png" />
          <text>{{ cardData.address }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 控制第几章名片背景
    imgSerial: {
      typeof: Number,
      default: 0,
    },
    // 控制编辑背景是否需要
    isEdit: {
      typeof: Boolean,
      default: false,
    },
    //  传递过来的卡片数据
    cardData:{
      typeof: Object,
      default:{}
    }
  },
  data() {
    return {
      bgList: [
        require("@/static/images/card_0.png"),
        require("@/static/images/card_1.png"),
        require("@/static/images/card_2.png"),
      ],
    };
  },
  methods: {
    changeImg(){
      if(!this.isEdit)return
      this.$emit("changeImg")
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>