first

pageDevice/scanPos/view.vue

@@ -0,0 +1,126 @@
+<template>
+  <JeepayBackground :bgColorStyle="{ height: '706rpx' }">
+    <JeepayCustomNavbar textColor="#fff" bgDefaultColor="linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)" title="扫码POS详情" backCtrl="back" />
+		
+		<JeepayTableListItem viewClass="list-item-by-detail"
+			logo="/pageDevice/static/detailsLislImg/scanPos-white.svg"
+			:title="vdata.record.deviceName"
+      :subtitle="vdata.record.deviceId"
+			:moreBtnList="list" />
+		
+    <view class="create-time">
+      <view class="time-title">设备厂商</view>
+      <view class="dev-info">{{ datamap.provider(vdata.record.provider) }}</view>
+    </view>
+    <view class="create-time" style="border: none; padding-top: 0">
+      <view class="time-title">创建时间</view>
+      <view class="time-info">{{ vdata.record.createdAt }}</view>
+    </view>
+		<JeepayCard editText="编辑信息" @editTap="go.to('PAGES_APP_SCANPOS_BIND', {deviceId: vdata.record.deviceId})">
+		 <JeepayDescview>
+			 <JeepayDescviewItem title="设备名称" :desc="vdata.record.deviceName" />
+			 <JeepayDescviewItem title="绑定门店" :desc="vdata.record.storeName" />
+			 <JeepayDescviewItem title="绑定应用" :desc="vdata.record.appId" />
+		 </JeepayDescview>
+		 
+		</JeepayCard>
+    <JDetailsSwitch title="设备状态" subTitle="状态禁用后，该设备将无法使用">
+      <template #titleRight>
+        <JeepayStateSwitch v-model:state="vdata.record.state" :showSwitchType="true" :updateStateFunc="updateState" />
+      </template>
+    </JDetailsSwitch>
+  </JeepayBackground>
+  <JSinglePopup ref="more" :list="list" activeColor="#FF5B4C" />
+  <JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { onLoad, onUnload } from '@dcloudio/uni-app'
+import { reqLoad, API_URL_SYS_DEVICE_LIST, $deviceUnbind } 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'
+import datamap from '@/commons/utils/datamap.js'
+
+const jeepayPopupConfirmRef = ref()
+
+onLoad((options) => {
+  refData(options.deviceId)
+})
+
+const vdata = reactive({
+	record: {},
+})
+
+// 监听 更新事件 
+onUnload(() => uni.$off(emit.ENAME_REF_SCANPOS_DETAIL))
+
+uni.$on(emit.ENAME_REF_SCANPOS_DETAIL, function(data){
+	refData(vdata.record.deviceId)
+})
+
+// 获取设备详情
+const refData = (id) => {
+  reqLoad.getById(API_URL_SYS_DEVICE_LIST, id).then(({ bizData }) => {
+    vdata.record = bizData
+  })
+}
+
+function deleteFunc () {
+  jeepayPopupConfirmRef.value.open('您确认解绑设备吗？',{ confirmColor: '#FF5B4C' }).then(() => {
+    $deviceUnbind(vdata.record.deviceId).then(() => {
+      infoBox.showSuccessToast('解绑成功')
+      return go.back(1, emit.ENAME_REF_SCANPOS_LIST)
+    })
+  })
+}
+
+const list = reactive([
+  { label: '解除绑定', value: 'remove', color: '#FF5B4C', fun: deleteFunc }
+])
+
+// 更新状态
+function updateState(state) {
+  return reqLoad.updateById(API_URL_SYS_DEVICE_LIST, vdata.record.deviceId, { state: state }).then(() => {
+		emit.refPageAndSearchEmit(emit.ENAME_REF_SCANPOS_LIST) // 修改列表页面。
+    infoBox.showSuccessToast('修改成功')
+  })
+}
+
+</script>
+
+<style lang="scss" scoped>
+.create-time {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 75rpx;
+  padding: 50rpx 0;
+  font-size: 30rpx;
+  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+  .time-title {
+    color: rgba(255, 255, 255, 0.7);
+  }
+  .time-info {
+    color: #fff;
+  }
+}
+.store-info {
+  padding: 0.1rpx;
+  margin: 0 35rpx;
+  background-color: #fff;
+  border-radius: $J-b-r32;
+}
+.default-img {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.dev-info {
+  padding: 3rpx 15rpx;
+  border-radius: 6rpx;
+  background: rgba(255, 255, 255, 0.15);
+  font-size: 26rpx;
+  color: #fff;
+}
+</style>