MqttDemo/pages/index/device.vue

<template>
  <view class="content">
    <!-- <view class="dbox">
      <button @click="addDevice">添加设备</button>
      <button @click="getPlayInfo">获取播放信息</button>
      <button @click="getDeviceInfo">获取设备信息</button>
    </view> -->
    <view class="dbox">
      <button @click="addDevice" class="btn">+</button>
      <device-card
        v-for="(device, index) in deviceList"
        :key="index"
        :device="device"
       
      ></device-card>
      <!-- <device-card v-if="currentDevice" :device="currentDevice"/> -->
    </view>
    <view class="play-info">
      <image class="play-thmub" :src="playInfo.albumURI" mode="aspectFit" />
      <text style="margin-top: 20rpx">{{ playInfo.title }}</text>
      <text style="margin-top: 20rpx">{{ playInfo.artist }}</text>
    </view>
    <view class="play-ctrl">
      <image
        src="../../static/image/play/previous.png"
        class="next-icon"
        @click="previous"
      />
      <image
        v-if="playInfo.PlayState != 1"
        src="../../static/image/play/play.png"
        class="next-icon"
        @click="play"
      />
      <image
        v-if="playInfo.PlayState == 1"
        src="../../static/image/play/pause.png"
        class="next-icon"
        @click="pause"
      />
      <image
        src="../../static/image/play/next.png"
        class="next-icon"
        @click="next"
      />
    </view>
    <text style="margin-top: 20rpx; margin-left: 50rpx">音量</text>
    <slider
      :value="currentDevice && currentDevice.Volume ? currentDevice.Volume : 0"
      class="progress"
      min="0"
      max="100"
      step="1"
      @change="setVolume"
      show-value
    ></slider>
    <text style="margin-top: 10rpx; margin-left: 50rpx">频道</text>
    <slider
      :value="playInfo.channel"
      class="progress"
      min="0"
      max="11"
      step="1"
      @change="setChannel"
      show-value
    ></slider>
  </view>
</template>

<script>
import deviceCard from "../../components/deviceCard/deviceCard.vue";
import { mapState } from "vuex";
export default {
  components: { deviceCard },
  data() {
    return {
      //deviceList:[]
    };
  },
  onLoad() {
    //this.deviceList = this.$store.state.moduleMqtt.deviceList;
    uni.$on("mqtt_onoffline", this.onofflineCallback);
  },
  onUnload() {
    uni.$off("mqtt_onoffline", this.onofflineCallback);
  },
  methods: {
    onofflineCallback(value) {
      //console.log("onofflineCallback");
    },
    //测试添加设备
    addDevice() {
      //添加设备
      this.$store.dispatch({
        type: "moduleMqtt/addDevice",
        clientId: "wx_650633",
        device: {
          devName: "MW-V",
          uuid: "89860474192070498495",
        },
      });
    },
    //获取播放信息
    getPlayInfo() {
      this.$store
        .dispatch({
          type: "moduleMqtt/publishWithType",
          mqttType: "get_position",
        })
        .then((result) => {})
        .catch((err) => {
          console.warn(err);
        });
    },
    //获取设备信息
    getDeviceInfo() {
      this.$store
        .dispatch({
          type: "moduleMqtt/publishWithType",
          mqttType: "get_dev_info",
        })
        .then((result) => {})
        .catch((err) => {
          console.warn(err);
        });
    },
    //下一曲
    next() {
      this.$store
        .dispatch({
          type: "moduleMqtt/publishWithType",
          mqttType: "next",
        })
        .then((result) => {})
        .catch((err) => {
          console.warn(err);
        });
    },
    //上一曲
    previous() {
      this.$store
        .dispatch({
          type: "moduleMqtt/publishWithType",
          mqttType: "previous",
        })
        .then((result) => {})
        .catch((err) => {
          console.warn(err);
        });
    },
    //播放
    play() {
      this.$store
        .dispatch({
          type: "moduleMqtt/publishWithType",
          mqttType: "play",
        })
        .then((result) => {})
        .catch((err) => {
          console.warn(err);
        });
    },
    //暂停
    pause() {
      this.$store
        .dispatch({
          type: "moduleMqtt/publishWithType",
          mqttType: "pause",
        })
        .then((result) => {})
        .catch((err) => {
          console.warn(err);
        });
    },
    //设置音量
    setVolume(event) {
      console.log(event.target.value);
      this.$store
        .dispatch({
          type: "moduleMqtt/publishWithType",
          mqttType: "volume_set",
          other: {
            volume: event.target.value,
          },
        })
        .then((result) => {})
        .catch((err) => {
          console.warn(err);
        });
    },
    //设置频道
    setChannel(event) {
      console.log(event.target.value);
      this.$store
        .dispatch({
          type: "moduleMqtt/publishWithType",
          mqttType: "play",
          other: {
            user_id: "650633",
            timestamp: "", //暂时没有时间戳，先不填
            channel_id: event.target.value + "",
            url: "",
            media_data: "",
            order: "",
            resource_from: "",
          },
        })
        .then((result) => {})
        .catch((err) => {
          console.warn(err);
        });
    },
    goDeviceInfo() {
      console.log("goDeviceInfo");
      uni.navigateTo({
        url: "../deviceInfo/deviceInfo",
        complete(res){
          console.warn(res);
        }
      });
    },
    godoBle() {
      //添加设备
      // #ifdef MP-WEIXIN||APP-PLUS
      uni.navigateTo({
        url: "../ble/ScanBleDevice",
      });
      // #endif
      // #ifdef H5
      uni.navigateTo({
        url: "../ble/ConnectBleDevice",
      });
      // uni.showToast({
      // 	title:'H5页面不支持扫描设备',
      // 	icon:'none'
      // })
      // #endif
    },
  },
  computed: {
    // deviceList() {
    //   return this.$store.state.moduleMqtt.deviceList;
    // },
    ...mapState({
      deviceList: (state) => state.moduleMqtt.deviceList,
      playInfo: (state) => state.moduleMqtt.playInfo,
      currentDevice: (state) => state.moduleMqtt.currentDevice,
    }),
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
}
.play-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dbox {
  display: flex;
  flex-direction: row;
  width: 100vw;
  justify-content: flex-start;
}
.btn {
  margin-left: 0rpx;
  margin-right: 10rpx;
  width: 160rpx;
  height: 25vw;
  /* display: flex; */
  /* justify-content: center;
  align-items: center; */
  line-height: 25vw;
  border: 1rpx solid #333333;
  font-size: 120rpx;
}
.text1 {
  width: 150px;
  word-break: break-all;
  /* text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap; */
}
.play-thmub {
  display: flex;
  align-self: center;
  width: 300rpx;
  height: 300rpx;
  margin-top: 30rpx;
}
.play-ctrl {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 40rpx;
}
.next-icon {
  width: 54rpx;
  height: 60rpx;
}
.progress {
  align-self: center;
  width: 80vw;
}
</style>