wx-starlock/pages/setting/setting.vue

<template>
  <view>
    <view class="view">
      <view class="view-button">
        <view style="width: 350rpx">名称</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 { useBluetoothStore } from '@/stores/bluetooth'
import { useUserStore } from '@/stores/user'
import { mapActions, mapState } from 'pinia'
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'
import { timeFormat } from 'uview-plus'

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,
        success: async function (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, message } = 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>