tf-business-card/pages_module/myCard/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="previewCard">
          <image class="" src="@/static/images/my_icon1.png" />
          <text>预览</text>
        </view>
        <view class="seat-item" @click="editCard">
          <image class="" src="@/static/images/my_icon2.png" />
          <text>编辑</text>
        </view>
        <view class="seat-item" @click="deleteCard">
          <image class="" src="@/static/images/my_icon3.png" />
          <text>删除</text>
        </view>
      </view>
      <view class="card-bg">
        <image class="" src="@/static/images/card-bg.png" />
      </view>
    </view>
    <view class="btn-box">
      <button open-type="share">发名片</button>
    </view>
    <view class="card-data">
      <view class="card-container">
        <view class="data-top">
          <text>名片数据</text>
          <tui-icon
            name="arrowright"
            :size="22"
            color="rgba(0, 0, 0, 0.9)"
          ></tui-icon>
        </view>
        <view class="data-bottom">
          <view class="bottom-item">
            <text>12</text>
            <text>今日访客</text>
          </view>
          <view class="bottom-item">
            <text>100</text>
            <text>总访客</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import cardCom from "@/components/cardCom/index.vue";
import { getCardDetailApi, deleteCardApi } from "@/api/index.js";
export default {
  components: {
    cardCom,
  },
  onLoad(option) {
    this.id = option.id;
    this.getCardDetail();
  },
  data() {
    return {
      id: null,
      cardInfo: {},
    };
  },
  methods: {
    //  根据 id 获取详情
    async getCardDetail() {
      let { data } = await getCardDetailApi({ id: this.id });
      this.cardInfo = data;
    },
    //  预览名片
    previewCard() {
      //  存储数据到本地
      this.$cache.setCache("cardInfo", this.cardInfo);
      //  跳转预览页面
      uni.navigateTo({
        url: "/pages_module/previewCard/index",
      });
    },
    //  编辑名片
    editCard() {
      //  存储数据到本地
      this.$cache.setCache("cardInfo", this.cardInfo);
      // 跳转编辑页面
      uni.navigateTo({
        url: `/pages_module/establish/index?id=${this.cardInfo.id}`,
      });
    },
    //  删除名片
    deleteCard() {
      // #ifdef MP-WEIXIN
      wx.showModal({
        title: "提示",
        content: "是否删除当前名片",
        success: async (res) => {
          if (res.confirm) {
            let res = await deleteCardApi({ id: this.cardInfo.id });
            if (res.statusCode == 20000) {
              this.$showToast("删除成功...", "success");
              setTimeout(() => {
                //  跳转首页
                uni.reLaunch({
                  url: "/pages/index/index",
                });
              }, 1200);
            }
          }
        },
      });
      // #endif
    },
    //  返回
    goBack() {
      uni.navigateBack({
        delta: 1,
        fail: () => {
          uni.reLaunch({
            url: "/pages/index/index",
          });
        },
      });
    },
  },
  onShareAppMessage(){
    return {
      title:"团蜂小名片",
			path: `/pages_module/previewCard/index?id=${this.cardInfo.id}`
		}
  },
};
</script>

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