OhPlay/pages/demo/mqtt/mqttDemo.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/demo/previous.png" class="next-icon" @click="previous" />
			<image v-if="playInfo.PlayState != 1" src="../../../static/demo/play.png" class="next-icon" @click="play" />
			<image v-if="playInfo.PlayState == 1" src="../../../static/demo/pause.png" class="next-icon"
				@click="pause" />
			<image src="../../../static/demo/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/demo/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() {
				if (getApp().globalData.uid) {
					//添加设备
					this.$store.dispatch({
						type: "moduleMqtt/addDevice",
						clientId: `wx_${getApp().globalData.uid}`,
						device: {
							devName: "MW-V",
							uuid: "89860474192070498495",
						},
					});
				}else{
					uni.showModal({
						title:"温馨提示",
						content:"请登录！",
						success() {
							uni.navigateTo({
								url:'../../login/login'
							})
						}
					})
				}

			},
			//获取播放信息
			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",
					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>