storevisit-ui-mobile/src/views/deviceWithin/taskTips.vue

<template>
  <div class="tips">
    <span class="examples" v-if="examplePhoto" @click="openExamplesImg(examplePhoto)"
      >拍摄要求</span
    >
    <span class="phone" v-if="contactPhone">
      <van-icon name="phone" size="18px" /><a :href="'tel:' + contactPhone" class="call">{{
        contactPhone
      }}</a>
    </span>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
export default {
  props: {
    contactPhone: {
      type: [String, Number],
      default: '',
    },
    examplePhoto: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {};
  },
  methods: {
    // 点击查看示例图片
    openExamplesImg(examplePhoto) {
      if (!examplePhoto) return;
      ImagePreview([examplePhoto]);
      // this.examplePhotoImg = examplePhoto;
    },
  },
};
</script>
<style lang="scss" scoped>
.tips {
  //   position: absolute;
  //   right: 0;
  //   top: 11px;
  display: inline;
  //   height: 25px;
  //   line-height: 25px;
  .examples {
    margin: 0 10px;
    background: rgb(255, 151, 106);
    color: #fff;
    padding: 2px 4px;
    border-radius: 2px 2px 8px 2px;
    font-size: 14px;
  }
  .phone {
    display: inline-block;
    i {
      vertical-align: -2px;
    }
    a {
      color: #0057ba;
      text-decoration: underline;
    }
  }
}
</style>