tf-business-card/pages_module/previewCard/index.vue

<template>
  <view class="previewCard">
    <capsule :showBorder="true" bgColor="transparent">
      <template v-slot:top>
        <view class="detail-top">
          <view class="back-box" @click="goBack">
            <tui-icon name="arrowleft" color="#000" :size="28"></tui-icon>
          </view>
          <view class="top-text">预览名片</view>
        </view>
      </template>
    </capsule>
    <view class="seat"></view>
    <view class="box-bg"></view>
    <view class="card-box">
      <cardCom :cardData="cardInfo" :imgSerial="cardInfo.style"></cardCom>
      <view class="seat-list">
        <view class="seat-item" @click="callMobile">
          <image class="" src="@/static/images/preview_icon1.png" />
          <text>电话</text>
        </view>
        <view class="seat-item" @click="copyText('wechat')">
          <image class="" src="@/static/images/preview_icon2.png" />
          <text>微信</text>
        </view>
        <view class="seat-item" @click="copyText('address')">
          <image class="" src="@/static/images/preview_icon3.png" />
          <text>地址</text>
        </view>
      </view>
      <view class="card-bg">
        <image class="" src="@/static/images/card-bg.png" />
      </view>
    </view>
    <view class="brief">
      <view class="brief-item">
        <view class="item-title">个人简介</view>
        <view class="item-container">{{
          cardInfo.personalIntroduction || "--"
        }}</view>
      </view>
      <view class="brief-item">
        <view class="item-title">公司简介</view>
        <view class="item-container">{{ cardInfo.companyIntroduction }}</view>
      </view>
    </view>
    <view class="footer">
      <view class="btn-list" v-if="id == ''">
        <button @click="goBack">返回</button>
      </view>
    </view>
  </view>
</template>

<script>
import cardCom from "@/components/cardCom/index.vue";
import { getCardDetailApi } from "@/api/index.js";
export default {
  components: {
    cardCom,
  },
  onLoad(option) {
    if (!option.id) {
      // 拿到本地存储的数据
      this.cardInfo = this.$cache.getCache("cardInfo");
    } else {
      this.id = option.id;
      //  请求名片数据
      this.getCardDetail();
    }
  },
  data() {
    return {
      id: "",
      cardInfo: {},
    };
  },
  methods: {
    //  根据 id 获取详情
    async getCardDetail() {
      let { data } = await getCardDetailApi({ id: this.id });
      this.cardInfo = data;
    },
    //  打电话
    callMobile() {
      uni.makePhoneCall({
        phoneNumber: this.cardInfo.mobile,
      });
    },
    //  复制内容
    copyText(txt) {
      console.log("进来了1111");
      uni.setClipboardData({
        data: this.cardInfo[txt] || '',
        success: () => {
          this.$showToast("复制成功");
        },
        fail:(err)=>{
          console.log(err);
        }
      });
    },
    goBack() {
      uni.navigateBack({
        delta: 1,
        fail: () => {
          if (this.id != "") {
            uni.reLaunch({
              url: "/pages/index/index",
            });
          }
        },
      });
    },
  },
  //  页面卸载
  onUnload() {
    //  删除本地存储
    this.$cache.removeCache("cardInfo");
  },
};
</script>

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