siyu_app/pages_watch/index/equipment/deviceInfo.vue

<template>
	<view class="container">
		<view class="qrcode-box">
			<view class="qrcode">
				<image class="qrcodeImg" v-show="hide" :src="image" mode="aspectFill" @longpress="savePoster"></image>
				<uqrcode ref="uqrcode" :hide="hide" canvas-id="qrcode" :value="qrValue" size="300" sizeUnit="rpx" @complete="onComplete"></uqrcode>
			</view>
		</view>
		<view class="qrcode-tips"><text v-show="success">绑定二维码(长按保存)</text></view>
		<view class="box-item" @click="setSIM()">
			<view class="box-iteml">手表SIM卡号</view>
			<view class="box-itemr">
				<text>去设置</text>
				<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="box-item">
			<view class="box-iteml">IMEI号</view>
			<view class="box-itemr" v-if="deviceInfo.deviceId">
				<view class="copybtn" @tap="copyIMEI">复制</view>
				<text>{{deviceInfo.deviceId}}</text>
			</view>
		</view>
		<view class="box-item">
			<view class="box-iteml">固件版本</view>
			<view class="box-itemr">
				<text>{{deviceInfo.version}}</text>
				<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill"></image>
			</view>
		</view>
		<myDialog ref="inputDialog" title="输入SIM卡号" @cancel="onCancel" @confirm="onConfirm">
			<template v-slot:dialogBody>
				<view class="popbody">
					<view class="inputDialog-tips">请输入手表的通话号码</view>
					<view class="uni-input-wrapper">
						<view class="uni-input">
							<input placeholder="请输入号码" :value="value" maxlength="100" :focus='focusState'
								@input="onKeyInput" />
						</view>
						<uni-icons type="clear" size="20" color="#aaa" v-if="showClearIcon"
							@click="clearIcon"></uni-icons>
					</view>
				</view>
			</template>
		</myDialog>
	</view>
</template>

<script>
	import myDialog from "@/pages_watch/components/myDialog/myDialog.vue";
	import {getDeviceData,getDeviceDataJson,updateSim} from "@/api/pages_watch/index.js"
	
	export default {
		components: {
			myDialog
		},
		data() {
			return {
				deviceId: uni.getStorageSync("deviceId") || '',
				deviceInfo: {},
				value: "",
				showClearIcon: false,
				focusState: true,
				qrValue: "",
				hide: false,
				success: false,
				image: "",
				downImg: ""
			}
		},
		onLoad() {
			this.getDeviceData()
		},
		methods: {
			getDeviceData() {
				getDeviceData({deviceId: this.deviceId}).then(res=>{
					if(res.code == 200) {
						this.deviceInfo = res.data || {}
						this.value = this.deviceInfo.sim || ''
						this.qrValue = JSON.stringify(this.deviceInfo)
					}
				})
			},
			onComplete(e) {
				this.hide = true
				this.success = e.success
				if(this.success) {
					this.$refs.uqrcode.toTempFilePath({
					  success: res => {
					    this.image = res.tempFilePath
					  }
					});
				}
			},
			copyIMEI(text) {
				uni.setClipboardData({
					data: this.deviceInfo.deviceId,
					success:()=>{
						uni.showToast({
							title:'内容已成功复制到剪切板',
							icon:'none'
						})
					}
				});
			},
			setSIM() {
				this.value = this.deviceInfo.sim
				this.$refs.inputDialog.open()
				this.$nextTick(() => {
					this.focusState = true
				})
			},
			onKeyInput(event) {
				this.value = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon() {
				this.value = '';
				this.showClearIcon = false;
			},
			onCancel() {
				this.$refs.inputDialog.close()
			},
			onConfirm() {
				if(!this.value) {
					uni.showToast({
						title: "请输入号码",
						icon: "none"
					})
					return
				}
				uni.showLoading()
				updateSim({deviceId: this.deviceId,sim:this.value}).then(res=>{
					uni.hideLoading()
					if(res.code == 200) {
						this.deviceInfo.sim = this.value
						this.$refs.inputDialog.close()
					}
				}).catch(()=>{
					uni.hideLoading()
				})
			},
			savePoster() {
				uni.showActionSheet({
					itemList: ['保存图片到本地'],
					success: (res)=> {
						this.uploadFile()
					}
				});
			},
			uploadFile() {
				uni.uploadFile({
					url: uni.getStorageSync('requestPath')+'/app/common/uploadOSS', //仅为示例，非真实的接口地址
					filePath: this.image,
					name: 'file',
					success: (uploadFileRes) => {
						const info = JSON.parse(uploadFileRes.data); // 返回的是字符串，需要转成对象格式
						this.downImg = info.url
						
						if(info.code == 200){
							uni.saveImageToPhotosAlbum({
								filePath: this.downImg,
								success: () => {
									uni.showToast({
										title: "保存成功",
										icon: "success",
									});
								},
								fail: () => {
									uni.showToast({
										title: "保存失败",
										icon: "error",
									});
								},
							});
						} else {
							uni.showToast({
								title: "保存失败",
								icon: "error",
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.popbody {
		display: flex;
		flex-direction: column;
		align-items: center;
		.inputDialog-tips {
			font-size: 28rpx;
			text-align: center;
		}
		.uni-input-wrapper {
			background-color: #f0f0f0;
			width: 450rpx;
			padding: 18rpx 20rpx;
			margin: 40rpx 0;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
		
			.uni-input {
				flex: 1;
			}
		}
	}

	.container {
		width: 100%;
		background-color: #fff;
		padding: 0 24rpx;
		box-sizing: border-box;
		@include u-flex(column, center, flex-start);

		.qrcode-box {
			display: inline-block;
			padding: 10rpx;
			margin: 100rpx 0 30rpx 0;
			border: 1rpx solid #FF7700;
			position: relative;
		}

		.qrcode {
			height: 300rpx;
			width: 300rpx;
		}
		.qrcodeImg {
			height: 300rpx;
			width: 300rpx;
		}

		.qrcode-tips {
			height: 38rpx;
			margin-bottom: 50rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
		}
	}

	.copybtn {
		flex-shrink: 0;
		height: 46rpx;
		width: 90rpx;
		margin-right: 10rpx;
		border-radius: 46rpx;
		line-height: 46rpx;
		text-align: center;
		background: rgba(0, 0, 0, 0.1);
		font-size: 24rpx;
		color: #666;
	}

	.box {
		&-item {
			width: 100%;
			height: 108rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;

			.arrow_black {
				flex-shrink: 0;
				height: 48rpx;
				width: 48rpx;
			}
		}

		&-iteml {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}

		&-itemr {
			font-size: 28rpx;
			display: inline-flex;
			align-items: center;
			justify-content: flex-start;
		}
	}
</style>