xiangan/servicePages/pages/invite.vue

<template>
  <view class="container">
    <view class="form-container">
      <view class="form-item" @click="showRoom = true">
        <text class="label">到访地址</text>
        <text class="value">{{ address }}</text>
      </view>
      <view class="form-item">
        <text class="label">访客手机号码</text>
        <input class="input" type="text" v-model="phone" placeholder="输入手机号" placeholder-class="placeholder"/>
      </view>
      <view class="form-item">
        <text class="label">访客属性</text>
        <view class="value-with-arrow">
          <text>短期访客</text>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>
      <view class="form-item">
        <text class="label">有效次数</text>
        <text class="value">有效期内5次</text>
      </view>
      <view class="form-item" @click="showTime = true">
        <text class="label">到访时间</text>
        <view class="value-with-arrow">
          <text>{{ time || '请选择' }}</text>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>
      <view class="form-item">
        <text class="label">有效时长</text>
        <view class="value-with-arrow">
          <text>3小时</text>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>
      <view class="form-item">
        <text class="label">有效时间</text>
        <text class="value-time">{{ time ? `${time}~${timeEnd}` : '' }}</text>
      </view>
    </view>

    <view class="tips">
      <text class="tips-content">温馨提示: 关注小区安全, 请谨慎分享给访客。</text>
    </view>

    <view class="button-container">
      <u-button shape="circle" type="primary" @click="submit">一键分享</u-button>
    </view>
    <u-picker :show="showRoom" :columns="[roomList]" keyName="title" @confirm="selectRoom"
              @cancel="showRoom = false"/>
    <u-datetime-picker
      :show="showTime"
      v-model="timeValue"
      mode="datetime"
      @confirm="timeConfirm"
      @cancel="showTime = false"
    ></u-datetime-picker>
    <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 {userRoomListReq} from "@/api/room";
import dayjs from "dayjs";
import {addInvite, makeInviteQr} from "@/api/invite";

export default {
  data() {
    return {
      imageList: [],
      roomList: [],
      currentRoom: null,
      address: '',
      phone: '',
      showRoom: false,
      showTime: false,
      showPopup: false,
      time: '',
      qr: '',
      timeEnd: '',
      timeValue: Number(new Date()),
    }
  },
  methods: {
    async getRoomList() {
      const {data} = await userRoomListReq()
      this.roomList = data.map(item => {
        item.title = ''
        if (item.villageName) item.title += item.villageName
        if (item.buildingName) item.title += `-${item.buildingName}`
        if (item.unitName) item.title += `-${item.unitName}`
        if (item.roomNumber) item.title += `-${item.roomNumber}`
        return item
      })
      if (this.roomList.length) {
        this.currentRoom = this.roomList[0]
        this.address = this.currentRoom.title
      }
    },
    timeConfirm(e) {
      this.showTime = false
      const date = new Date(e.value)
      this.time = dayjs(date).format('YYYY-MM-DD HH:mm')
      this.timeEnd = dayjs(date).add(3, 'hour').format('YYYY-MM-DD HH:mm')
    },
    selectRoom({value}) {
      this.currentRoom = value[0]
      this.address = this.currentRoom.title
      this.showRoom = false
    },
    async submit() {
      if (!this.time) return uni.showToast({title: '请选择时间', icon: 'none'})
      if (!this.phone) return uni.showToast({title: '请输入手机号', icon: 'none'})
      if (!this.currentRoom) return uni.showToast({title: '请选择到访地址', icon: 'none'})
      uni.showLoading({title: '正在生成二维码'})
      const {data} = await addInvite({
        baseVillageVillageCode: this.currentRoom.baseVillageVillageCode,
        roomCode: this.currentRoom.baseRoomRoomCode,
        phone: this.phone,
        startTime: this.time,
        duration: 3,
        endTime: this.timeEnd,
      })
      const qrRes = await makeInviteQr({id: data}).finally(() => uni.hideLoading())
      this.qr = qrRes.data
      this.showPopup = true
    }
  },
  onShow() {
    this.getRoomList()
  },
}
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f7f7f7;
  padding: 20rpx;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 0 30rpx;
}

.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 28rpx;

  &:last-child {
    border-bottom: none;
  }

  .label {
    color: #333;
    width: 300rpx;
  }

  .value {
    color: #333;
  }

  .value-time {
    color: #333;
    text-align: right;
    line-height: 1.5;
  }

  .input {
    text-align: right;
    color: #333;
  }

  .placeholder {
    color: #999;
  }

  .value-with-arrow {
    display: flex;
    align-items: center;
    color: #999;

    text {
      margin-right: 10rpx;
    }
  }
}

.tips {
  padding: 20rpx 30rpx;
  color: #999;
  font-size: 24rpx;
}

.button-container {
  margin-top: auto;
  padding: 20rpx;
}

.share-button {
  background-color: #ffc107;
  color: #fff;
  border: none;
  border-radius: 50rpx;
  font-size: 32rpx;
  padding: 20rpx 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>