wx-starlock/pages/setting/setting.vue

<template>
  <view>
    <view class="view">
      <view class="view-button">
        <view style="width: 150rpx">名称</view>
        <view class="view-button" style="padding: 20rpx 0">
          <view class="info" style="line-height: 40rpx; word-break: break-all">{{
            currentLockInfo.lockAlias
          }}</view>
        </view>
      </view>
      <view class="view-line"></view>
      <view class="view-button">
        <view>锁编号</view>
        <view class="view-button" style="padding: 0">
          <view class="info">{{ currentLockInfo.name }}</view>
        </view>
      </view>
      <view class="view-line"></view>
      <view class="view-button">
        <view>MAC/ID</view>
        <view class="view-button" style="padding: 0">
          <view class="info">{{ currentLockInfo.mac }}/{{ currentLockInfo.lockId }}</view>
        </view>
      </view>
      <view class="view-line"></view>
      <view class="view-button">
        <view>电量</view>
        <view class="view-button" style="padding: 0">
          <view class="info">{{ currentLockInfo.electricQuantity }}%</view>
        </view>
      </view>
    </view>
    <view class="view" v-if="currentLockInfo.userType === 110301">
      <view class="view-button">
        <view>开锁时是否需联网</view>
        <view class="view-button" style="padding: 0">
          <up-switch
            v-model="unlockApp"
            :size="40"
            activeColor="#63b8af"
            :asyncChange="true"
            @change="changeUnlockApp"
            :activeValue="1"
            :inactiveValue="0"
          ></up-switch>
        </view>
      </view>
    </view>
    <view class="view">
      <view v-if="currentLockInfo.keyType === 4">
        <view class="view-button">
          <view>有效期</view>
          <view class="view-button" style="padding: 0">
            <view class="info"
              >{{ timeFormat(currentLockInfo.startDate, 'yyyy-mm-dd') }}～{{
                timeFormat(currentLockInfo.endDate, 'yyyy-mm-dd')
              }}</view
            >
          </view>
        </view>
        <view class="view-line"></view>
        <view class="view-button">
          <view>有效日</view>
          <view class="view-button" style="padding: 0">
            <view class="info">{{ convertWeekDaysToChineseString(currentLockInfo.weekDays) }}</view>
          </view>
        </view>
        <view class="view-line"></view>
        <view class="view-button">
          <view>有效时间</view>
          <view class="view-button" style="padding: 0">
            <view class="info"
              >{{ timeFormat(currentLockInfo.startDate, 'h:M') }}～{{
                timeFormat(currentLockInfo.endDate, 'h:M')
              }}</view
            >
          </view>
        </view>
      </view>
      <view v-else>
        <view class="view-button">
          <view>有效期</view>
          <view class="view-button" style="padding: 10rpx 0">
            <view class="info" v-if="currentLockInfo.keyType === 2" style="line-height: 40rpx">
              <view>{{ timeFormat(currentLockInfo.startDate, 'yyyy-mm-dd h:M') }}</view>
              <view>{{ timeFormat(currentLockInfo.endDate, 'yyyy-mm-dd h:M') }}</view>
            </view>
            <view class="info" v-if="currentLockInfo.keyType === 3">单次</view>
            <view class="info" v-if="currentLockInfo.keyType === 1">永久</view>
          </view>
        </view>
      </view>
    </view>
    <view class="button-logout" @click="deleteLock">删除</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 { useBluetoothStore } from '@/stores/bluetooth'
  import { useUserStore } from '@/stores/user'
  import { deleteLockRequest } from '@/api/lock'
  import { useLockStore } from '@/stores/lock'
  import { updateLockSettingRequest } from '@/api/lockSetting'
  import { deleteKeyRequest } from '@/api/key'
  import { useBasicStore } from '@/stores/basic'

  export default {
    data() {
      return {
        unlockApp: 0,
        showModal: false,
        checked: false
      }
    },
    computed: {
      ...mapState(useUserStore, ['userInfo']),
      ...mapState(useBluetoothStore, ['keyId', 'currentLockInfo']),
      ...mapState(useLockStore, ['lockSearch'])
    },
    onLoad() {
      this.unlockApp = this.currentLockInfo.lockSetting.appUnlockOnline
    },
    methods: {
      timeFormat,
      ...mapActions(useBluetoothStore, ['resetDevice', 'updateCurrentLockInfo']),
      ...mapActions(useLockStore, [
        'getLockList',
        'updateLockSearch',
        'convertWeekDaysToChineseString'
      ]),
      ...mapActions(useBasicStore, ['backAndToast', 'getNetworkType']),
      changeRadio() {
        this.checked = !this.checked
      },
      cancelModal() {
        this.showModal = false
        this.checked = false
      },
      async confirmModal() {
        uni.showLoading({
          title: '删除中',
          mask: true
        })
        const that = this
        const { code } = await deleteKeyRequest({
          keyId: that.keyId,
          includeUnderlings: that.checked ? 1 : 0
        })
        that.showModal = false
        if (code === 0) {
          uni.hideLoading()
          that.updateLockSearch({
            ...that.lockSearch,
            pageNo: 1
          })
          that.getLockList(that.lockSearch)
          that.backAndToast('删除成功', 2)
        } else {
          uni.hideLoading()
          uni.showToast({
            title: 'message',
            icon: 'none'
          })
        }
      },
      async changeUnlockApp(value) {
        const netWork = await this.getNetworkType()
        if (!netWork) {
          return
        }
        uni.showLoading({
          title: '更新中',
          mask: true
        })
        const { code, message } = await updateLockSettingRequest({
          lockId: this.currentLockInfo.lockId,
          appUnlockOnline: value
        })
        if (code === 0) {
          this.unlockApp = value
          const data = this.currentLockInfo
          data.lockSetting.appUnlockOnline = value
          this.updateCurrentLockInfo(data)
          uni.hideLoading()
          uni.showToast({
            title: '更新成功',
            icon: 'none'
          })
        } else {
          uni.hideLoading()
          uni.showToast({
            title: message,
            icon: 'none'
          })
        }
      },
      async deleteLock() {
        const netWork = await this.getNetworkType()
        if (!netWork) {
          return
        }
        const that = this
        if (this.currentLockInfo.userType !== 110301 && this.currentLockInfo.keyRight === 1) {
          this.showModal = true
          return
        }
        const message =
          that.currentLockInfo.userType === 110301
            ? '删除锁后，所有信息都会一起删除，确定删除锁吗？'
            : '确定删除该钥匙吗？'
        uni.showModal({
          title: '提示',
          content: message,
          async success(res) {
            if (res.confirm) {
              uni.showLoading({
                title: '删除中',
                mask: true
              })
              if (that.currentLockInfo.userType === 110301) {
                const { code: resetDeviceCode } = await that.resetDevice({
                  name: that.currentLockInfo.name,
                  authUid: that.userInfo.uid.toString(),
                  keyId: that.keyId.toString()
                })
                if (resetDeviceCode === 0 || resetDeviceCode === -2) {
                  const { code } = await deleteLockRequest({
                    lockId: that.currentLockInfo.lockId
                  })
                  if (code === 0) {
                    uni.hideLoading()
                    that.updateLockSearch({
                      ...that.lockSearch,
                      pageNo: 1
                    })
                    that.getLockList(that.lockSearch)
                    that.backAndToast('删除成功', 2)
                  } else {
                    uni.hideLoading()
                    uni.showToast({
                      title: 'message',
                      icon: 'none'
                    })
                  }
                } else if (resetDeviceCode === -1) {
                  uni.hideLoading()
                  uni.showToast({
                    title: '删除失败，请保持在锁附近',
                    icon: 'none'
                  })
                }
              } else {
                const { code } = await deleteKeyRequest({
                  keyId: that.keyId
                })
                if (code === 0) {
                  uni.hideLoading()
                  that.updateLockSearch({
                    ...that.lockSearch,
                    pageNo: 1
                  })
                  that.getLockList(that.lockSearch)
                  that.backAndToast('删除成功', 2)
                } 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>
  .button-logout {
    position: absolute;
    border-radius: 46rpx;
    bottom: calc(env(safe-area-inset-bottom) + 30rpx);
    width: 600rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    margin-left: 75rpx;
    background: #ec433c;
    color: #ffffff;
    font-size: 40rpx;
    font-weight: bold;
  }

  .view {
    margin-top: 32rpx;
    border-radius: 32rpx;
    width: 710rpx;
    margin-left: 20rpx;
    background: #ffffff;
  }

  .view-button {
    padding: 0 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #292826;
    font-size: 32rpx;
    font-weight: bold;
    line-height: 80rpx;
  }

  .view-line {
    width: 100%;
    height: 3rpx;
    background: #ebebeb;
  }

  radio .wx-radio-input.wx-radio-input-checked {
    border: none;
    background: #c1885a;
  }
  radio .wx-radio-input.wx-radio-input-checked::before {
    border-radius: 50%; /* 圆角 */
    width: 28rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
    height: 28rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
    line-height: 28rpx;
    text-align: center;
    font-size: 20rpx; /* 对勾大小 30rpx */
    color: #fff; /* 对勾颜色 白色 */
    background: #c1885a;
    transform: translate(-50%, -50%) scale(1);
  }
</style>