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">
      <device-card
        v-for="(device, index) in deviceList"
        :key="index"
        :device="device"
      ></device-card>
      <!-- <text v-for="(device, index) in deviceList" :key="index" space="ensp"
        >{{ device.name }} {{ device.online }}</text
      > -->
    </view>
    <view class="play-info">
      <image class="play-thmub" :src="playInfo.albumURI" mode="aspectFit" />
      <text style="margin-top: 30rpx">{{ playInfo.title }}</text>
      <text style="margin-top: 30rpx">{{ 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: 30rpx; margin-left:50rpx">音量</text>
    <slider value="20" class="progress"  min="0" max="100" step="1" @change="setVolume" show-value></slider>
    <text style="margin-top: 30rpx; 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: {
          name: "MW-M3",
          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':'1560652541',
            'channel_id':event.target.value+''
          }
        })
        .then((result) => {})
        .catch((err) => {
          console.warn(err);
        });

    },
    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,
    }),
  },
};
</script>

<style>
.content {
  margin: 10rpx;
  display: flex;
  flex-direction: column;
}
.play-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dbox {
  display: flex;
  flex-direction: row;
}
.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>