FastBee/APP/pagesA/home/device/status/version.vue

<template>
	<page-meta>
		<navigation-bar :title="$tt('firmware.firmware-230980-0')" title-align="center" background-color="#F1F3F9"
			front-color="#000000">
		</navigation-bar>
	</page-meta>
	<view class="container">
		<view class="form-wrap">
			<u--form labelWidth="90" labelAlign="center">
				<view class="card">
					<u-form-item :label="$tt('firmware.firmware-230980-1')" prop="firmwareType" borderBottom>
						{{firmwareParams.firmwareType===1? $tt('firmware.firmware-230980-2') : 'HTTP'}}
					</u-form-item>
					<u-form-item :label="$tt('firmware.firmware-230980-3')">
						Version {{firmwareParams.firmwareVersion}}
					</u-form-item>
				</view>
			</u--form>

			<view style="margin-top: 30rpx; display: flex; gap: 10px;">
				<u-button @click="getLatestFirmware" type="primary" :plain="true"
					customStyle="border: none; border-radius: 5px; padding: 50rpx 0;">{{$tt('firmware.firmware-230980-4')}}</u-button>
			</view>
		</view>
		<u-modal :show="openFirmware" :title="$tt('firmware.firmware-230980-5')" :content='content' @confirm="confirm"
			@cancel="cancel"></u-modal>
		<u-popup :show="isShow" :round="10" :closeOnClickOverlay="false" mode="bottom" overlay>
			<view class="trigger-popup-wrap">
				<view class="nav">
					<text @click="isShow = false">{{$tt('common.cancel')}}</text>
					<text @click="otaUpgrade">{{$tt('firmware.firmware-230980-6')}}</text>
				</view>
				<view class="" style="font-size: 28rpx;color: green;">
					<text>{{$tt('firmware.firmware-230980-7')}}</text>
				</view>
				<view class="cell-group-wrap">
					<u--form labelPosition="left" label-width="100px">
						<u-form-item :label="$tt('firmware.firmware-230980-8')" prop="firmwareType" borderBottom>
							{{firmware.firmwareName}}
						</u-form-item>
						<u-form-item :label="$tt('firmware.firmware-230980-9')" borderBottom>
							{{firmware.productName}}
						</u-form-item>
						<u-form-item :label="$tt('firmware.firmware-230980-10')" borderBottom>
							Version {{ firmware.version }}
						</u-form-item>
						<u-form-item :label="$tt('firmware.firmware-230980-11')" borderBottom>
							<u-link style='display: flex;justify-content: flex-end;'
								:href="getDownloadUrl(firmware.filePath)"
								:text="getDownloadUrl(firmware.filePath)"></u-link>
						</u-form-item>
						<u-form-item :label="$tt('firmware.firmware-230980-12')">
							{{ firmware.remark?firmware.remark:'' }}
						</u-form-item>
					</u--form>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import projectConfig from '@/env.config.js';
	import { getLatestFirmware } from '@/apis/modules/device.js';

	export default {
		name: 'view-version',
		data() {
			return {
				deviceInfo: {}, // 设备信息
				openFirmware: false,
				firmwareParams: {
					firmwareType: '',
					versionInput: '',
				},
				isShow: false,
				firmware: {},
				content: this.$tt('firmware.firmware-230980-13'),
				status: 0,
			};
		},
		onLoad(options) {
			this.deviceInfo = options;
			this.status = options.status;
			this.firmwareParams.firmwareType = options.firmwareType;
			this.firmwareParams.firmwareVersion = options.firmwareVersion;
		},
		methods: {
			/** 设备升级 */
			otaUpgrade() {
				// OTA升级
				let topic = '/' + this.deviceInfo.productId + '/' + this.deviceInfo.serialNumber + '/ota/get';
				let message = '{"version":' + this.firmware.version + ',"downloadUrl":"' + this.getDownloadUrl(this
					.firmware.filePath) + '"}';
				// 发布
				this.$mqttTool
					.publish(topic, message, this.$tt('firmware.firmware-230980-14'))
					.then((res) => {
						this.$modal.notifySuccess(res);
					})
					.catch((res) => {
						this.$modal.notifyError(res);
					});
				this.openFirmware = false;
			},
			// 获取下载路径前缀
			getDownloadUrl(path) {
				return projectConfig.BASE_URL + path;
			},
			/** 获取最新固件 */
			getLatestFirmware() {
				if (this.status !== '3') {
					uni.showToast({
						icon: 'none',
						title: this.$tt('firmware.firmware-230980-15'),
						duration: 3000
					});
					return
				}
				const { deviceId } = this.deviceInfo;
				const firmwareType = this.firmwareParams.firmwareType;
				getLatestFirmware(deviceId, firmwareType).then((response) => {
					if (response.code === 200) {
						this.firmware = response.data;
						if (this.firmware == null || this.firmwareParams.firmwareVersion > this.firmware.version) {
							this.openFirmware = true;
						} else if (this.firmwareParams.firmwareVersion > this.firmware.version) {
							this.isShow = true;
						}
					}
				});
			},
			confirm() {
				this.openFirmware = false;
			},
			// 取消按钮
			cancel() {
				this.openFirmware = false;
			},
		}
	};
</script>


<style lang="scss">
	page {
		background: $uni-bg-color-grey;
	}
</style>
<style lang="scss" scoped>
	.container {
		width: 100%;

		.text-item {
			display: flex;
			justify-content: flex-end;
		}

		.form-wrap {
			padding: 14rpx 30rpx;

			.item-right {
				display: flex;
				flex-direction: row;
			}

			.card {
				padding: 5px 12px;
				background: #FFFFFF;
				border-radius: 5px;

				&:not(:first-child) {
					margin-top: 20rpx;
				}
			}

			::v-deep .u-form-item__body {
				padding: 30rpx 0;
			}
		}

		.trigger-popup-wrap {
			padding: 30rpx;

			.title {
				font-size: 32rpx;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.nav {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				margin-bottom: 34rpx;
			}

			.cell-group-wrap {
				.cell-wrap {
					padding: 6rpx 0;
				}
			}
		}
	}
</style>