feat: 工具箱接口对接

CHANGELOG.md

@@ -1,4 +1,4 @@
-# 0.1.0 (2021-12-03)
+# 0.1.0 (2021-12-06)
 
 ### 🌟 新功能
 范围|描述|commitId
@@ -243,6 +243,7 @@
  - | 修改代码格式 | [14123d7](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/14123d7)
  - | 修改定期任务骨架屏高度 | [909a734](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/909a734)
  - | 修改时间轴自动滚动到当天任务的时间 | [20bbf6a](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/20bbf6a)
+ - | 压缩代码，提交体验版 | [c5f50ff](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/c5f50ff)
  - | 小红点api缓存修改 | [e992343](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/e992343)
  - | 提交本地代码 | [e0cf2ed](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/e0cf2ed)
  - | 提升性能的代码更改 | [3548af7](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/3548af7)

src/apis/yanyuan.js

@@ -21,6 +21,11 @@ const install = (Vue, vm) => {
 
   // 绑定工具箱
   vm.$u.api.bindTool = param => vm.$u.post(`${yanyuan}/tool/bind`, param);
+  // 查询指定工具箱二维码
+  vm.$u.api.qrCode = param => vm.$u.post(`${yanyuan}/tool/qrCode`, param);
+  // 查询工具箱列表
+  vm.$u.api.queryToolList = param => vm.$u.post(`${yanyuan}/tool/queryToolList`, param);
+
   // 用户身份判断
   vm.$u.api.identityUserPower = param => vm.$u.post(`${yanyuan}/userPower/identity`, param);
 

src/common/styles/tailwind.scss

@@ -1126,6 +1126,12 @@
 .h-screen {
   height: 100vh;
 }
+.w-1 {
+  width: 0.25rem;
+}
+.w-2 {
+  width: 0.5rem;
+}
 .w-4 {
   width: 1rem !important;
 }

src/pagesProject/project/components/GuidePage/GuidePage.vue

@@ -1,11 +1,6 @@
 <template>
-  <swiper class="swiper" :indicator-dots="true" :interval="5000" :autoplay="true" :circular="false">
+  <swiper class="swiper" :circular="false" :current="current">
-    <swiper-item v-for="(item, index) in list" :key="index">
+    <swiper-item v-for="(item, index) in list" :key="index" @click="next(index)">
-      <view class="w-full flex flex-col items-center" v-if="index === list.length - 1">
-        <u-button class="absolute" style="bottom: 55px" @click="changePic">
-          <text class="text-blue-500 mx-10">开始体验</text>
-        </u-button>
-      </view>
       <view
         class="img h-full"
         :style="{
@@ -46,6 +41,15 @@ export default {
     };
   },
   methods: {
+    next(index) {
+      this.current = index;
+      if (this.current === this.list.length - 1) {
+        this.changePic();
+      } else {
+        this.current++;
+      }
+    },
+
     changePic() {
       this.$emit('quitGuide');
     },

src/pagesYanyuan/hold-all/hold-all.vue

@@ -1,53 +1,106 @@
 <template>
   <view class="bg-white flex flex-col px-2">
-    <view v-for="(item, index) in lists" :key="index">
+    <view class="flex flex-nowrap text-xs text-gray-400 my-2">
+      提示:
+      <view v-for="(tip, tipIndex) in tips" :key="tipIndex" class="flex flex-nowrap items-center ml-3">
+        <view class="w-2 h-2 rounded-full mr-1" :class="tip.bg"></view>
+        {{ tip.value }}
+      </view>
+    </view>
+    <view v-if="lists && lists.length">
+      <view v-for="item in lists" :key="item.toolId">
         <view class="flex justify-between items-center py-3 border-b">
-        <view>{{ item.title }}</view>
+          <view class="flex flex-row items-center">
+            <view
+              class="mr-2"
+              :class="
+                item.equipmentStatus === 0
+                  ? 'text-blue-500'
+                  : item.equipmentStatus === 1
+                  ? 'text-gray-500'
+                  : item.equipmentStatus === 2
+                  ? 'text-red-500'
+                  : 'text-green-500'
+              "
+            >
+              {{ item.code }}
+            </view>
             <view class="flex items-center text-gray-400">
-          <text class="mr-2" v-if="item.name">{{ item.name }}</text>
+              <u-icon name="wifi" :color="item.wifiStatus === 2 ? '#1890FF' : '#999999'" size="36"></u-icon>
-          <text class="mr-2" v-else @click="$t.page.openPage('/pages/wifi-binding/wifi-binding')">绑定</text>
+            </view>
-          <u-icon name="wifi" :color="item.bound ? '#1890FF' : '#999999'" size="36"></u-icon>
           </view>
+          <view class="flex flex-nowrap items-center">
+            <view class="battery-box">
+              <view class="battery-text u-font-10 font-light">{{ item.electricQuantity }}</view>
+              <view class="battery" :style="{ width: setWidth(item.electricQuantity) }"></view>
             </view>
           </view>
         </view>
+      </view>
+    </view>
+    <u-empty v-else text="列表为空" mode="list" class="mt-10"></u-empty>
+  </view>
 </template>
 
 <script>
 export default {
   data() {
     return {
-      lists: [
+      lists: [],
+      tips: [
         {
-          title: '工具箱1',
+          value: '开机',
-          name: 'ccsens_5G',
+          bg: 'bg-blue-500',
-          bound: true,
         },
         {
-          title: '工具箱2',
+          value: '休眠',
-          name: 'ccsens_5G',
+          bg: 'bg-gray-500',
-          bound: true,
         },
         {
-          title: '工具箱3',
+          value: '断电',
-          name: 'ccsens_5G',
+          bg: 'bg-red-500',
-          bound: true,
         },
         {
-          title: '工具箱4',
+          value: '正常',
-          name: '',
+          bg: 'bg-green-500',
-          bound: false,
-        },
-        {
-          title: '工具箱5',
-          name: '',
-          bound: false,
         },
       ],
     };
   },
 
-  methods: {},
+  async created() {
+    await this.queryToolList();
+  },
+
+  methods: {
+    openBinding() {
+      uni.navigateToMiniProgram({
+        appId: 'wx1989853133e3da70',
+        path: '',
+        extraData: {},
+        success(res) {
+          // 打开成功
+          console.log('打开成功res: ', res);
+        },
+      });
+    },
+
+    setWidth(res) {
+      return (res * 21) / 100 + 'px';
+    },
+
+    /**
+     * 查询工具箱列表
+     */
+    async queryToolList() {
+      try {
+        const data = await this.$u.api.queryToolList();
+        this.lists = data;
+      } catch (error) {
+        console.error('error: ', error);
+      }
+    },
+  },
 };
 </script>
 
@@ -55,4 +108,41 @@ export default {
 page {
   background-color: $uni-bg-color-grey;
 }
+
+.battery-box {
+  width: 26px;
+  height: 12px;
+  background: url(https://www.tall.wiki/staticrec/yanyuan/battery.png) center no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.battery-text {
+  width: 21px;
+  height: 8px;
+  line-height: 8px;
+  text-align: center;
+  margin: 2px 0;
+  position: absolute;
+  left: 2px;
+  z-index: 99;
+}
+
+.battery {
+  height: 8px;
+  margin: 2px 0;
+  background: #e0e0e0;
+  position: absolute;
+  left: 2px;
+}
+
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
+}
+
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
+}
 </style>