tf-business-card/pages/index/index.vue

<template>
  <view class="index">
    <capsule :showBorder="true" bgColor="transparent">
      <template v-slot:top>
        <view class="detail-top">
          <view class="top-left" @click="openDrawer">
            <image class="" src="@/static/images/catalogue_icon.png" />
          </view>
          <view class="top-text">团蜂电子名片</view>
        </view>
      </template>
    </capsule>
    <view class="seat"></view>
    <view class="box-bg">
      <!-- <view class="bg"></view> -->
    </view>
    <view class="container">
      <view
        class="card-list"
        :style="{ height: cardListHeight + 'rpx' }"
        v-if="cardList.length > 0"
      >
        <view
          class="card-item"
          v-for="(item, index) in cardList"
          :key="index"
          :style="{ top: index * 120 + 'rpx', zIndex: index }"
          @click.stop="goCard('/pages_module/myCard/index?id=' + item.id)"
        >
          <cardCom :cardData="item" :imgSerial="item.style"></cardCom>
        </view>
        <!-- <view class="card-item" v-for="item in 3" :key="item" :style="{top: (item)*120 + 'rpx'}">
          <cardCom></cardCom>
        </view> -->
      </view>
      <view class="empty-box" v-else>
        <image src="@/static/images/empty-card.png" />
        <text>暂未添加名片</text>
      </view>
      <view class="card-btn">
        <button @click="addCard">+&nbsp; &nbsp;&nbsp;新增名片</button>
      </view>
    </view>
    <tui-drawer mode="left" :visible="visible" @close="closeDrawer">
      <view class="d-container">
        <view class="d-image">
          <template v-if="cardList[0].head">
            <image class="" :src="cardList[0].head" />
          </template>
          <template v-else>
            <image class="" src="@/static/images/default_avatar.png" />
          </template>
          <text>{{ cardList[0].name }}</text>
        </view>
        <view class="quit" @click="quitLogin">退出登录</view>
      </view>
    </tui-drawer>
    <!-- <tui-modal
      :show="modal"
      :button="[{ text: '确定', type: 'red', plain: false }]"
      @click="handleClick"
      @cancel="hideModal"
      title="提示"
      content="您还未登录，是否需要登录？"
    ></tui-modal> -->
    <tui-bottom-popup
      :zIndex="1000"
      backgroundColor="#FFFFFF"
      :show="modal"
      @close="clonePopup"
    >
      <view class="tf-login">
        <tui-icon
          class="close"
          name="shut"
          :size="24"
          color="#1C1B1E"
          @click="modal = false"
        ></tui-icon>
        <view class="tf-container">
          <image class="" src="@/static/images/index-select.png" />
          <text>登录团蜂电子名片</text>
        </view>
        <view class="tf-agreement">
          <checkbox-group @change="changeBox">
            <checkbox :checked="false" value="check" color="#0E40FF" />
          </checkbox-group>
          <view @click="goPrivacy">
            已阅读并同意<text>团蜂电子名片服务协议</text>和<text>隐私政策</text>
          </view>
        </view>
        <view class="tf-btn">
          <button @click="handleClick">快捷授权登录</button>
        </view>
      </view>
    </tui-bottom-popup>
  </view>
</template>

<script>
import cardCom from "@/components/cardCom/index.vue";
import { wxLoginApi, getCardListApi } from "@/api/index.js";
export default {
  components: {
    cardCom,
  },
  onShow() {
    //  判断是否登录
    if (!this.$cache.getCache("token")) return;
    this.getCardList();
  },
  computed: {
    // 计算高度
    cardListHeight() {
      let num = 308 + this.cardList.length * 120;
      return num;
    },
  },
  data() {
    return {
      visible: false,
      top: null,
      modal: false,
      checkList: [],
      //  卡片列表
      cardList: [],
    };
  },
  methods: {
    changeBox(list) {
      this.checkList = list.detail.value;
    },
    //  去到隐私页面
    goPrivacy() {
      uni.navigateTo({
        url: "/pages_module/privacy/index",
      });
    },
    //  获取当前用户所有名片
    async getCardList() {
      let { data, statusCode } = await getCardListApi();
      if (statusCode == 50000) {
        this.modal = true;
        this.cardList = [];
        return;
      }
      this.cardList = data;
    },
    //  打开侧边弹框
    openDrawer() {
      if (!this.$cache.getCache("token")) {
        this.modal = true;
        return;
      }
      this.visible = true;
    },
    //  关闭侧边弹框
    closeDrawer() {
      this.visible = false;
    },
    //  新增卡片
    addCard() {
      //  获取本地 token
      const flag = this.$cache.getCache("token");
      if (!flag) {
        this.modal = true;
        return;
      }
      uni.navigateTo({
        url: "/pages_module/establish/index",
      });
    },
    // 退出登录
    quitLogin() {
      // #ifdef MP-WEIXIN
      wx.showModal({
        title: "提示",
        content: "是否退出当前登录的账号",
        success: async (res) => {
          if (res.confirm) {
            this.$cache.removeCache("token");
            this.cardList = [];
            this.visible = false;
          }
        },
      });
      // #endif
    },
    handleClick(e) {
      console.log(this.checked);
      if (this.checkList.length <= 0) {
        uni.showToast({
          title: "请先阅读并同意协议",
          icon: "none",
        });
        return;
      }
      // 微信登录
      this.$loading.show("登录中...");
      // #ifdef MP-WEIXIN
      wx.login({
        success: async (res) => {
          let codeRes = await wxLoginApi({ code: res.code });
          if (codeRes.statusCode !== 20000) return;
          //  获取名片列表
          this.getCardList();
          //  存储 token 到本地
          this.$cache.setCache("token", codeRes.data);
          this.modal = false;
        },
        complete: () => {
          this.$loading.hide();
        },
      });
      // #endif
    },
    hideModal() {
      this.modal = false;
    },
    goCard(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

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