Introduce.vue 4.08 KB
<template>
  <view class="introduce">
    <!-- 迭代时建议配合接口修改 为数组 -->
    <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
      <view>
        年龄:<view
          v-for="(item,index) in tag.prod_tag_age"
          :key="index"
        >
          {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
        </view>
      </view>
    </view>
    <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
      <view>
        颜色:<view
          v-for="(item,index) in tag.prod_tag_color"
          :key="index"
        >
          {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
        </view>
      </view>
    </view>
    <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
      <view>
        脸型:<view
          v-for="(item,index) in tag.prod_tag_face"
          :key="index"
        >
          {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
        </view>
      </view>
    </view>
    <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
      <view>
        赠品:<view
          v-for="(item,index) in tag.prod_tag_freesend"
          :key="index"
        >
          {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
        </view>
      </view>
    </view>
    <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
      <view>
        保险:<view
          v-for="(item,index) in tag.prod_tag_insurance"
          :key="index"
        >
          {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
        </view>
      </view>
    </view>
    <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
      <view>
        材质:<view
          v-for="(item,index) in tag.prod_tag_metal"
          :key="index"
        >
          {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
        </view>
      </view>
    </view>
    <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
      <view>
        个性:<view
          v-for="(item,index) in tag.prod_tag_personal"
          :key="index"
        >
          {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
        </view>
      </view>
    </view>
    <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
      <view>
        场景:<view
          v-for="(item,index) in tag.prod_tag_sense"
          :key="index"
        >
          {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
        </view>
      </view>
    </view>
    <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
      <view>
        性别:<view
          v-for="(item,index) in tag.prod_tag_sex"
          :key="index"
        >
          {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
        </view>
      </view>
    </view>
    <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
      <view>
        风格:<view
          v-for="(item,index) in tag.prod_tag_style"
          :key="index"
        >
          {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
        </view>
      </view>
    </view>
    <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
      <view>
        重量:<view
          v-for="(item,index) in tag.prod_tag_weight"
          :key="index"
        >
          {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tag: Object,
  },
  created() {
    console.log('lalal')
    console.log('tag', this)
  },
  updated() {
    console.log('lalal-2')
    console.log('tag-2', this.tag)
  },
}
</script>

<style lang="scss" scoped>
.introduce {
  margin-bottom: 4px;
  view {
    display: flex;
    align-content: center;
    font-size: 14px;
    color: #333333;
  }
  span {
    margin-left: 6px;
    margin-right: 5px;
    font-family: "PingFangSC-Regular";
  }
}
</style>