wx-starlock/pages/keyDetail/keyDetail.vue

<template>
  <view>
    <view class="item">
      <view class="item-title">名称</view>
      <view class="item-content">{{ currentKeyInfo.keyName }}</view>
    </view>
    <view class="item" style="margin-top: 2rpx">
      <view class="item-title">有效期</view>
      <view v-if="currentKeyInfo.keyType === 1">永久</view>
      <view v-else-if="currentKeyInfo.keyType === 3">单次</view>
      <view v-else-if="currentKeyInfo.keyType === 4">
        <view class="item-content">{{ timeFormat(currentKeyInfo.startDate, 'yyyy-mm-dd') }}</view>
        <view class="item-content">{{ timeFormat(currentKeyInfo.endDate, 'yyyy-mm-dd') }}</view>
      </view>
      <view v-else>
        <view class="item-content">{{ timeFormat(currentKeyInfo.startDate, 'yyyy-mm-dd h:M') }}</view>
        <view class="item-content">{{ timeFormat(currentKeyInfo.endDate, 'yyyy-mm-dd h:M') }}</view>
      </view>
    </view>
    <view v-if="currentKeyInfo.keyType === 4" class="item" style="margin-top: 2rpx">
      <view class="item-title">有效日</view>
      <view class="item-content">{{ convertWeekDaysToChineseString(currentKeyInfo.weekDays) }}</view>
    </view>
    <view class="item" v-if="currentKeyInfo.keyType === 4" style="margin-top: 2rpx">
      <view class="item-title">有效时间</view>
      <view class="item-content">
        {{ timeFormat(currentKeyInfo.startDate, 'h:M') }}-{{ timeFormat(currentKeyInfo.endDate, 'h:M') }}
      </view>
    </view>
    <view class="item" style="margin-top: 20rpx">
      <view class="item-title">接收者</view>
      <view class="item-content">{{ currentKeyInfo.username }}</view>
    </view>
    <view class="item" style="margin-top: 2rpx">
      <view class="item-title">发送人</view>
      <view class="item-content">{{ currentKeyInfo.senderUsername }}</view>
    </view>
    <view class="item" style="margin-top: 2rpx">
      <view class="item-title">发送时间</view>
      <view class="item-content">{{ timeFormat(currentKeyInfo.sendDate, 'yyyy-mm-dd h:M') }}</view>
    </view>
    <view class="button" @click="deleteKey">删除钥匙</view>
  </view>
</template>

<script>
import { mapActions, mapState } from 'pinia'
import { useLockStore } from '@/stores/lock'
import { timeFormat } from 'uview-plus'
import { deleteKeyRequest } from '@/api/key'
import { useBasicStore } from '@/stores/basic'

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(useLockStore, ['currentKeyInfo', 'keySearch']),
  },
  methods: {
    timeFormat,
    ...mapActions(useLockStore, ['updateKeySearch', 'getKeyList']),
    ...mapActions(useBasicStore, ['backAndToast']),
    async deleteKey () {
      const that = this
      uni.showModal({
        title: '提示',
        content: '确定要删除该钥匙',
        async success(res) {
          if(res.confirm) {
            uni.showLoading({
              title: '删除中',
              mask: true
            })
            const { code: requestCode, message } = await deleteKeyRequest({
              keyId: that.currentKeyInfo.keyId
            })
            if(requestCode === 0) {
              uni.hideLoading()
              that.updateKeySearch({
                ...that.keySearch,
                pageNo: 1
              })
              await that.getKeyList(that.keySearch)
              that.backAndToast('删除成功')
            } else {
              uni.hideLoading()
              uni.showToast({
                title: message,
                icon: 'none'
              })
            }
          }
        }
      })
    },
    convertWeekDaysToChineseString(weekDays) {
      const dayMap = {
        1: '一',
        2: '二',
        3: '三',
        4: '四',
        5: '五',
        6: '六',
        7: '日'
      }

      const chineseWeekDays = weekDays.map(day => dayMap[day])

      return chineseWeekDays.join('，')
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: $uni-bg-color-grey;
}
</style>

<style lang="scss" scoped>
.item {
  padding: 24rpx 32rpx;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 32rpx;
  font-weight: 500;
}

.tips {
  padding: 24rpx 32rpx;
  font-size: 24rpx;
  color: #999999;
}

.button {
  margin: 32rpx;
  width: 686rpx;
  height: 88rpx;
  background-color: #df282d;
  color: white;
  text-align: center;
  line-height: 88rpx;
  border-radius: 44rpx;
  font-weight: bold;
}
</style>