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="item" style="margin-top: 20rpx" @click="toRecordList">
      <view class="item-title">操作记录</view>
      <up-icon name="arrow-right"></up-icon>
    </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 { timeFormat } from 'uview-plus'
  import { useLockStore } from '@/stores/lock'
  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', 'routeJump']),
      async toRecordList() {
        this.routeJump({
          name: 'typeRecordList',
          params: {
            name: this.currentKeyInfo.keyName,
            key: 'keyId',
            id: this.currentKeyInfo.keyId
          }
        })
      },
      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>