cashier_admin_app/pageDevice/lite/view.vue

<template>
  <JeepayBackground :bgColorStyle="{}">
    <JeepayCustomNavbar textColor="#fff"
      bgDefaultColor="linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)" title="如意Lite详情"
      backCtrl="back" />

    <JeepayTableListItem viewClass="list-item-by-detail" logo="/pageDevice/static/detailsLislImg/lite-white.svg"
      :title="vdata.record.deviceName" :subtitle="vdata.record.deviceNo" :moreBtnList="list" />
    <JeepayCard editText="编辑信息" @editTap="go.to('PAGES_LITE_EDIT', { deviceId: vdata.record.deviceId })">
      <JeepayDescview>
        <JeepayDescviewItem title="设备名称" :desc="vdata.record.deviceName" />
        <JeepayDescviewItem title="绑定应用" :desc="vdata.record.appId" />
        <JeepayDescviewItem title="绑定门店" :desc="vdata.record.storeName" />
      </JeepayDescview>
    </JeepayCard>
    <JeepayCard title="其他设置" viewStyle="margin-top: 30rpx;">
      <JeepayTableListItem title="终端状态" subtitle="状态禁用后，当前终端将无法使用">
        <template #titleRight>
          <JeepayStateSwitch v-model:state="vdata.record.state" :showSwitchType="true" :updateStateFunc="updateState" />
        </template>
      </JeepayTableListItem>
    </JeepayCard>
    <JeepayCard :title="`${!vdata.record.alipayBindState ? '' : '已'}绑定至蚂蚁店铺`" @clickTitle="bindingAlitStore"
      viewStyle="margin-top: 30rpx;" :isTitleBorder="vdata.record.alipayBindState">
      <template #titleRight>
        <image class="selected-qrcId" src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill"
          v-if="!vdata.record.alipayBindState" />
      </template>
      <JeepayTableListItem :title="vdata.aliStoreInfo.storeName" :subtitle="vdata.aliStoreInfo.alipayShopId"
        v-if="vdata.record.alipayBindState" />

      <view class="un-binding" hover-stay-time="50" hover-class="hover-button" v-if="vdata.record.alipayBindState"
        @tap="unBindIng">解绑蚂蚁店铺</view>
    </JeepayCard>
  </JeepayBackground>

  <JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
  <JeepayBizinfoSelect ref="refSelectedStore" :params="{alipayShopStatus: 99}" bizType="store" />
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { reqLoad, API_URL_SYS_DEVICE_LIST, $deviceUnbind, API_URL_MCH_STORE_LIST, $BindLite } from '@/http/apiManager.js'
import go from '@/commons/utils/go.js'
import emit from '@/commons/utils/emit.js'
import infoBox from '@/commons/utils/infoBox.js'

const jeepayPopupConfirmRef = ref()

onLoad((options) => {
  refData(options.deviceId)
})
const refSelectedStore = ref(null)
const vdata = reactive({
  record: {},
  aliStoreInfo: {}
})

// 监听 更新事件 
onUnload(() => uni.$off(emit.ENAME_REF_AUTOPOS_DETAIL))
uni.$on(emit.ENAME_REF_AUTOPOS_DETAIL, function (data) {
  refData(vdata.record.deviceId)
})

function refData (id) {
  reqLoad.getById(API_URL_SYS_DEVICE_LIST, id).then(({ bizData }) => {
    vdata.record = bizData
    getAliStoreInfo()
  })
}
function deleteFunc () {
  jeepayPopupConfirmRef.value.open('您确认解绑设备吗？', { confirmColor: '#FF5B4C' }).then(() => {
    $deviceUnbind(vdata.record.deviceId).then(() => {
      infoBox.showSuccessToast('解绑成功')
      return go.back(1, emit.ENAME_REF_AUTOPOS_LIST)
    })
  })
}
const list = reactive([
  { label: '解绑设备', value: 'delete', color: 'red', fun: deleteFunc },
  { label: '编辑设备', value: 'edit',  fun: ()=>{
    go.to('PAGES_LITE_EDIT', { deviceId: vdata.record.deviceId })
  } },
])
// 更新状态
function updateState (state) {
  return reqLoad.updateById(API_URL_SYS_DEVICE_LIST, vdata.record.deviceId, { state: state }).then(() => {
    emit.refPageAndSearchEmit(emit.ENAME_REF_AUTOPOS_LIST) // 修改列表页面。
    infoBox.showSuccessToast('修改成功')
  })
}
// 绑定蚂蚁门店
const bindingAlitStore = () => {
  refSelectedStore.value.open().then(res => {
    const data = {
      alipayBindState: 1,
      deviceId: vdata.record.deviceId,
      storeId: res.storeId,
    }
    jeepayPopupConfirmRef.value.open(`您确认要把[${res.storeName}]绑定至蚂蚁店铺吗？`).then(r => {
      $BindLite(data).then(res => {
        infoBox.showSuccessToast('蚂蚁店铺绑定成功')
        refData(vdata.record.deviceId)
      })
    }).catch(er=>{
      bindingAlitStore()
    })
  })
}
// 获取蚂蚁店铺信息
const getAliStoreInfo = () => {
  reqLoad.list(API_URL_MCH_STORE_LIST, { pageSize: '-1', alipayShopStatus: 99 }).then(({ bizData }) => {
    vdata.aliStoreInfo = bizData.records.find(v => v.storeId == vdata.record.storeId)
  })
}
// 解绑店铺
const unBindIng = () => {
  const data = {
    alipayBindState: 0,
    deviceId: vdata.record.deviceId,
    storeId: vdata.record.storeId,
  }
  jeepayPopupConfirmRef.value.open('您确认要解绑蚂蚁店铺吗？', { confirmColor: '#FF5B4C' }).then(res => {
    $BindLite(data).then(res => {
      infoBox.showSuccessToast('蚂蚁店铺解绑成功')
      refData(vdata.record.deviceId)
    })
  })
}
</script>

<style lang="scss" scoped>
.default-image {
  width: 50rpx;
  height: 50rpx;
}

.selected-qrcId {
  width: 40rpx;
  height: 40rpx;
  transform: rotate(90deg);
}

.un-binding {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px;
  margin-top: 0;
  height: 110rpx;
  background-color: rgba($color: #ec4444, $alpha: 0.1);
  color: #ec4444;
  border-radius: 10rpx;
}

.hover-button {
  opacity: 0.5;
}
</style>