删除旧版本 云广播

src/apps/AppBroadcast/selectEquipment.vue

@@ -1,112 +1,163 @@
 <template>
   <div class="selectEquipment">
-    <div class="search">
-      <div class="search-bg">
-        <img src="./img/search-icon.png" alt="">
-        <u-input v-model="value" type="text" placeholder="搜索设备名称" class="search-input" height="18"/>
+    <AiTopFixed>
+      <div class="currentLeft-top">
+        <div class="left">
+          <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" selectRoot>
+            <span class="label" v-if="areaName">{{ areaName }}</span>
+            <span v-else>请选择</span>
+            <u-icon name="arrow-down" color="#666" size="24" style="margin-left: 4px" />
+          </AiAreaPicker>
+        </div>
+        <u-search v-model="keyword" :clearabled="true" placeholder="请输入设备名称" :show-action="false" bg-color="#F5F5F5" search-icon-color="#ccc" color="#666" height="58" @search="getList" @clear="handerClear"></u-search>
       </div>
-    </div>
+    </AiTopFixed>
     <div class="record">
-      <div class="item">
-        <img src="./img/cir.png" alt="" class="check-img">
+      <div class="item" v-for="(item, index) in list" :key="index" @click="checkClick(index)">
+        <img src="./img/select-blue.png" mode="aspectFill" alt="" class="check-img" v-if="item.isCheck">
+        <img src="./img/cir.png" alt="" mode="aspectFill" class="check-img" v-else>
         <img src="./img/lb@2x.png" alt="" class="voice-img">
         <div class="info">
           <div class="text">
-            <p>村头大喇叭</p>
-            <span>刘家河居委会</span>
+            <p>{{item.name}}</p>
+            <span>{{item.areaName}}</span>
           </div>
-          <div class="status">在线</div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./img/cir.png" alt="" class="check-img">
-        <img src="./img/lb@2x.png" alt="" class="voice-img">
-        <div class="info">
-          <div class="text">
-            <p>村头大喇叭</p>
-            <span>刘家河居委会</span>
-          </div>
-          <div class="status">在线</div>
+          <div class="status">{{ $dict.getLabel('dlbDevStatus', item.devStatus) }}</div>
         </div>
       </div>
     </div>
+    <AiEmpty v-if="!list.length"></AiEmpty>
     <div class="btn">
-      <div>确定选择</div>
+      <div @click="confirm">确定选择</div>
     </div>
   </div>
 </template>
 <script>
+import { mapState } from 'vuex'
 export default {
   name: "selectEquipment",
+  data() {
+    return {
+      areaId: '',
+      areaName: '',
+      keyword: '',
+      list: [],
+      selectList: []
+    }
+  },
+  computed: { ...mapState(['user']) },
+  onLoad(option) {
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
+    this.$dict.load(['dlbDevStatus']).then(() => {
+      this.getList()
+    })
+  },
+  methods: {
+    areaSelect(e) {
+      this.areaId = e
+      // this.getList()
+    },
+    getList() {
+      this.$http.post(`/app/appdlbquipment/list?current=1&size=20&name=${this.keyword}&devStatus=5&areaId=${this.areaId}`).then((res) => {
+        if (res.code == 0) {
+          res.data.records.map(item => {
+            item.isCheck = false
+          })
+          if (this.current > 1) {
+            this.list = [...this.list, ...res.data.records]
+          } else {
+            this.list = res.data.records
+          }
+        }
+      })
+    },
+    checkClick(index) {
+      this.list[index].isCheck = !this.list[index].isCheck
+    },
+    confirm() {
+      this.selectList = []
+      this.list.map(item => {
+        if(item.isCheck) {
+          var info = {
+            serialNo: item.serialNo,
+            serialName: item.name
+          }
+          this.selectList.push(info)
+        }
+      })
+      if(!this.selectList.length) {
+        return this.$u.toast('请选择播放设备')
+      }
+      uni.$emit('chooseEquipment', {
+        equipmentList: this.selectList
+      })
+      uni.navigateBack({
+        delta: 1
+      })
+
+    }
+  },
+  onReachBottom() {
+
+  }
 }
 </script>
 <style lang="scss" scoped>
 .selectEquipment {
   padding-bottom: 128px;
 
-  .search {
-    width: 100%;
-    height: 104px;
-    background: #FFF;
-    margin-bottom: 4px;
-    padding: 20px 32px;
-    box-sizing: border-box;
+  .currentLeft-top {
+    display: flex;
+    align-items: center;
 
-    .search-bg {
-      width: 686px;
-      height: 64px;
-      padding: 14px 0;
-      box-sizing: border-box;
-      background: #F5F5F5;
-      border-radius: 32px;
-      position: relative;
+    .left {
+      width: 200px;
+      display: flex;
+      align-items: center;
 
       img {
-        width: 32px;
-        height: 32px;
-        position: absolute;
-        top: 16px;
-        left: 32px;
-      }
-
-      .search-input {
-        width: 590px;
-        height: 36px;
-        line-height: 36px;
-        font-size: 28px;
-        margin-left: 70px;
+        width: 48px;
+        height: 48px;
       }
     }
   }
-
   .record {
+    margin-top: 8px;
     padding-left: 32px;
     background-color: #fff;
 
     .item {
       width: 100%;
       display: flex;
+      align-items: center;
+      height: 110rpx;
       border-bottom: 1px solid #ddd;
 
+      &:last-child {
+        border: none;
+      }
+
       .check-img {
-        width: 32px;
-        height: 32px;
-        margin: 32px 32px 0 0;
+        width: 44px;
+        height: 44px;
+        margin-right: 32px;
       }
 
       .voice-img {
-        width: 48px;
-        height: 48px;
-        margin: 28px 16px 0 0;
+        width: 44px;
+        height: 44px;
+        margin-right: 32px;
       }
 
       .info {
-        width: calc(100% - 148px);
-        padding: 18px 0;
+        flex: 1;
         line-height: 44px;
+        padding-right: 32px;
         font-size: 34px;
         display: flex;
         justify-content: space-between;
+        align-items: center;
 
         .text {
           p {