大喇叭

src/apps/AppBroadcast1/AppEquipment/detail.vue

@@ -7,26 +7,26 @@
     </AiTopFixed>
     <div class="content">
       <div class="info-content" v-if="currIndex != 1">
-        <p>村头大喇叭</p>
+        <p>{{info.deviceName}}</p>
         <div class="info">
           <span>设备编号</span>
-          <span class="color-333">121312312312</span>
+          <span class="color-333">{{info.serialNo}}</span>
         </div>
         <div class="info">
           <span>设备状态</span>
-          <span style="color: #4E8EEE">在线</span>
+          <span style="color: #4E8EEE">{{info.devStatus}}</span>
         </div>
         <div class="info">
           <span>信号强度</span>
-          <span class="color-333">一般</span>
+          <span class="color-333">{{info.network}}</span>
         </div>
         <div class="info">
           <span>音量</span>
-          <span class="color-333"></span>
+          <span class="color-333">{{info.volume}}</span>
         </div>
         <div class="info">
           <span>所属区划</span>
-          <span class="color-333"></span>
+          <span class="color-333">{{info.areaName}}</span>
         </div>
       </div>
       <div class="list-content" v-else>
@@ -47,9 +47,26 @@
       </div>
     </div>
     
-    <div class="btn">设置音量</div>
-    <u-popup v-model="isShow" mode="bottom">
-      
+    <div class="btn" @click="setVolume">设置音量</div>
+    <u-popup v-model="isShow" mode="bottom" class="popup">
+      <div class="title">
+        <span @click="isShow=false">取消</span>
+        <p>设置音量</p>
+        <span @click="confirmAdd">保存</span>
+      </div>
+      <div class="slider-content">
+        <span>1</span>
+        <div class="slider">
+          <u-slider v-model="volume" min="1" max="100" :use-slot="true" block-color="#007BFF" step="10">
+            <view class="">
+              <view class="badge-button">
+                {{volume}}
+              </view>
+            </view>
+          </u-slider>
+        </div>
+        <span>100</span>
+      </div>
     </u-popup>
   </div>
 </template>
@@ -65,6 +82,8 @@ export default {
       currIndex: 1,
       current: 1,
       isShow: false,
+      volume: 10,
+      info: {}
     }
   },
   onLoad(query) {
@@ -78,10 +97,21 @@ export default {
   methods: {
     change(index) {
       this.currIndex = index
-      this.getListInit()
     },
     toTaskDetail(item) {
       uni.navigateTo({url: `./taskDetail`})
+    },
+    setVolume() {
+      this.isShow = true
+      this.volume = this.info.volume * 10 || 10
+    },
+    confirmAdd() {
+      this.$http.post(`/app/appdlbquipment/volumeControl?deviceId=${this.info.deviceId}&volume=${this.volume}`).then((res) => {
+        if (res.code == 0) {
+          this.getDetail()
+          this.$u.toast('音量设置成功')
+        }
+      })
     }
   },
 
@@ -208,5 +238,54 @@ export default {
     font-weight: 500;
     color: #FFFFFF;
   }
+  .popup{
+    background-color: #fff;
+    .title{
+      padding: 24px 0;
+      line-height: 48px;
+      text-align: center;
+      span{
+        display: inline-block;
+        width: 120px;
+        font-size: 28px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #5297FF;
+        
+      }
+      p{
+        display: inline-block;
+        width: calc(100% - 240px);
+        font-size: 36px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #0F1826;
+      }
+    }
+    .slider-content{
+      padding: 56px 44px 120px;
+      display: flex;
+      span{
+        display: inline-block;
+        font-size: 40px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #666;
+        line-height: 56px;
+      }
+      .slider{
+        display: inline-block;
+        flex: 1;
+        margin: 26px 30px 0;
+      }
+    }
+  }
+
+  ::v-deep .u-slider__button-wrap{
+    margin-top: -40px;
+    font-size: 44px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #666;
+  }
 }
 </style>