xiangan/userPages/pages/inviteLog.vue

<template>
  <view class="container">
    <view v-if="logList.length === 0" class="empty-state">
      <image src="/static/empty-property.png" class="empty-image"/>
      <text class="empty-text">暂无访客记录</text>
    </view>
    <view v-else>
      <view class="log-item" v-for="(item, index) in logList" :key="index">
        <view class="item-header">
          <text class="visitor-name">访客: {{ item.phone }}</text>
          <text class="status" :class="{'status-valid': item.status}">
            {{ item.status ? '有效' : '已失效' }}
          </text>
        </view>
        <view class="item-body">
          <view class="info-line">
            <text class="label">到访地址:</text>
            <text class="value">{{ item.room.village }}{{ item.room.building }}{{ item.room.unit }}{{
                item.room.roomNumber
              }}
            </text>
          </view>
          <view class="info-line">
            <text class="label">有效时间:</text>
            <text class="value">{{ item.startTime }} 至 {{ item.endTime }}</text>
          </view>
        </view>
        <view class="item-footer">
          <button class="qr-button" @click="getRq(item.id)">查看二维码</button>
        </view>
      </view>
    </view>
    <u-popup :show="showPopup" close-on-click-overlay round="10" mode="bottom">
      <view class="p-30 flex flex-col justify-center items-center">
        <view class="text-30 my-20">访客二维码</view>
        <view class="flex flex-col justify-center items-center my-20">
          <u-image :src="qr" width="300rpx" height="300rpx" show-menu-by-longpress/>
          <view class="text-center">长按可保存二维码</view>
        </view>
        <u-button shape="circle" type="primary" @click="showPopup = false">关闭</u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {makeInviteQr, userInviteListReq} from "@/api/invite";
import dayjs from 'dayjs'

export default {
  data() {
    return {
      logList: [],
      showPopup: false,
      qr: '',
    };
  },
  methods: {
    async getList() {
      const {data} = await userInviteListReq()
      this.logList = data.map(item => {
        item.status = dayjs(item.endTime).isBefore(dayjs())
        return item
      })
    },
    async getRq(id) {
      uni.showLoading({
        title: '正在生成二维码...',
        mask: true
      })
      const qrRes = await makeInviteQr({id}).finally(() => uni.hideLoading())
      this.qr = qrRes.data
      this.showPopup = true
    },
    onShow() {
      this.getList()
    },
  }
};
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;

  .empty-image {
    width: 300rpx;
    height: 300rpx;
  }

  .empty-text {
    margin-top: 20rpx;
    color: #999;
  }
}

.log-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #f0f0f0;

  .visitor-name {
    font-size: 30rpx;
    font-weight: bold;
  }

  .status {
    font-size: 26rpx;
    color: #999;
  }

  .status-valid {
    color: #007aff;
  }
}

.item-body {
  padding: 20rpx 0;

  .info-line {
    display: flex;
    font-size: 26rpx;
    margin-bottom: 10rpx;

    .label {
      color: #666;
      width: 150rpx;
    }

    .value {
      color: #333;
      flex: 1;
    }
  }
}

.item-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 10rpx;

  .qr-button {
    background-color: #007aff;
    color: #fff;
    font-size: 24rpx;
    padding: 10rpx 20rpx;
    border-radius: 30rpx;
    line-height: 1.5;
  }
}
</style>