cashier_app/pageDevice/speaker/components/selectedQrcId.vue

<template>
  <uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" :safe-area="false">
    <view class="card-wrapper">
      <view class="card-title flex-center">请勾选播报的码牌</view>
      <!-- 循环部分 start -->
      <JeepayTableList ref="refQrcTable" :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData" :initData="false">
        <template #tableBody="{ record }">
          <view class="h-wrapper" :style="{ opacity: vdata.qrcList.includes(record.qrcId) ? 1 : 0.6 }">
            <image style="width: 90rpx; height: 90rpx" :src="vdata.imageList[record.qrcState]" mode="scaleToFill" />
            <view class="h-info">
              <view class="h-title">{{ record.qrcAlias }}</view>
              <view class="h-code">{{ record.qrcId }}</view>
            </view>
            <JSwitch
              :bol="vdata.qrcList.includes(record.qrcId)"
              :confirmTips="false"
              @confirm="change($event, record.qrcId)"
              :disabled="vdata.bindQrcId == record.qrcId"
              @click="isDefaultQrc(record.qrcId)"
            />
          </view>
        </template>
      </JeepayTableList>
      <!-- 循环部分end -->
      <view class="footer-wrapper">
        <view class="footer-main">
          <view class="footer-button">
            <view class="flex-center" hover-class="touch-button" @tap="popup.close()">取消</view>
            <view class="confirm flex-center" hover-class="touch-button" @tap="saveQrcId">确认</view>
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { nextTick, reactive, ref } from 'vue'
const popup = ref(null)
import { reqLoad, API_URL_SYS_CODE_LIST, API_URL_SYS_DEVICE_LIST } from '@/http/apiManager.js'
import infoBox from '@/commons/utils/infoBox.js'
const refQrcTable = ref(null)
const emits = defineEmits(['updateDetails'])
const vdata = reactive({
  searchData: {},
  imageList: ['/pageDevice/static/detailsLislImg/code-none.svg', '/pageDevice/static/devIconImg/icon-code.svg'],
})
const open = (storeId, qrcList, deviceId, bindQrcId) => {
  vdata.qrcList = JSON.parse(JSON.stringify(qrcList))
  vdata.deviceId = deviceId
  vdata.bindQrcId = bindQrcId
  vdata.searchData = {
    qrcBelongType: 2,
    storeId,
  }

  popup.value.open()
  nextTick(() => {
    refQrcTable.value.refTable(true)
  })
}
const reqTableDataFunc = (params) => {
  return reqLoad.list(API_URL_SYS_CODE_LIST, params)
}
const change = (e, qrcId) => {
  if (e) {
    vdata.qrcList.push(qrcId)
  } else {
    vdata.qrcList.splice(
      vdata.qrcList.findIndex((val) => val == qrcId),
      1
    )
  }
}
const isDefaultQrc = (qrcId) => {
  if (vdata.bindQrcId == qrcId) return infoBox.showToast('平台指定默认码牌不可更改状态')
}
// 保存
const saveQrcId = () => {
  return reqLoad.addOrUpdate(vdata.deviceId, API_URL_SYS_DEVICE_LIST, { qrcIdList: vdata.qrcList, bindType: 1 }).then((res) => {
    emits('updateDetails')
    popup.value.close()
  })
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.card-wrapper {
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
  padding-bottom: 60rpx;
  max-height: 70vh;
  overflow-y: auto;
  .card-title {
    margin-bottom: 20rpx;
    height: 110rpx;
    font-size: 30rpx;
    font-weight: 400;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.07);
  }
  .footer-wrapper {
    height: 186rpx;
    .footer-main {
      position: fixed;
      left: 0;
      right: 0;
      bottom: env(safe-area-inset-bottom);
      backdrop-filter: blur(20rpx);
      border-top: 1rpx solid #ededed;
      .footer-button {
        padding: 0 30rpx;
        margin-top: 30rpx;
        padding-bottom: 30rpx;
        display: flex;
        justify-content: space-between;
        view {
          width: 330rpx;
          height: 110rpx;
          font-size: 33rpx;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.5);
          border-radius: 20rpx;
          background-color: #f7f7f7;
        }
        .confirm {
          color: #fff;
          background: $jeepay-bg-primary;
        }
      }
    }
  }
}
.h-wrapper {
  display: flex;
  align-items: center;
  padding: 0 40rpx;
  height: 170rpx;
  .h-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 15rpx;
    margin-left: 20rpx;
    .h-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .state {
        margin-right: 30rpx;
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
      }
      margin-bottom: 16rpx;
      font-size: 30rpx;
    }
    .h-code {
      font-size: 26rpx;
      color: #999;
    }
  }
}
</style>