wx-starlock/pages/keyDetail/keyDetail.vue

<template>
  <view>
    <view class="item">
      <view class="item-title" style="width: 350rpx">姓名</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>
    <up-modal :show="showModal"  title="是否删除授权管理员钥匙？" :showCancelButton="true" width="600rpx" @cancel="cancelModal"
              @confirm="confirmModal">
      <view class="slot-content" @click="changeRadio">
        <view style="display: flex;align-items: center;">
          <radio :checked="checked"></radio>
          <view>同时删除其发送的所有钥匙，钥匙删除后不能恢复</view>
        </view>
      </view>
    </up-modal>
  </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 {
      showModal: false,
      checked: false
    }
  },
  computed: {
    ...mapState(useLockStore, ['currentKeyInfo', 'keySearch']),
  },
  methods: {
    timeFormat,
    ...mapActions(useLockStore, ['updateKeySearch', 'getKeyList', 'convertWeekDaysToChineseString']),
    ...mapActions(useBasicStore, ['backAndToast']),
    cancelModal() {
      this.showModal = false
      this.checked = false
    },
    changeRadio() {
      this.checked = !this.checked
    },
    async confirmModal() {
      uni.showLoading({
        title: '删除中',
        mask: true
      })
      const that = this
      const { code } = await deleteKeyRequest({
        keyId: that.currentKeyInfo.keyId,
        includeUnderlings: that.checked ? 1 : 0
      })
      that.showModal = false
      if(code === 0) {
        that.updateKeySearch({
          ...that.keySearch,
          pageNo: 1
        })
        that.getKeyList(that.keySearch)
        uni.hideLoading()
        that.backAndToast('删除成功')
      } else {
        uni.hideLoading()
        uni.showToast({
          title: 'message',
          icon: 'none'
        })
      }
    },
    async deleteKey () {
      const that = this
      if(that.currentKeyInfo.keyRight === 1) {
        that.showModal = true
        return
      }
      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'
              })
            }
          }
        }
      })
    }
  }
}
</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>