kaiguan-zfb/page_fenbao/fenxiang.vue

<template>
	<view class="page">
		<u-navbar title="分享二维码" :border-bottom="false" :background="bgc" back-icon-color="#000" title-color='#000'
			title-size='36' height='50' id="navbar">
		</u-navbar>

		<view class="tishi">
			<text>微信“扫一扫” 使用小程序</text>
			<text>选择您所需要的用电套餐</text>
		</view>

		<!-- 展示二维码 -->
		<view class="imgewm" @longpress="saveCanvas">
			<!-- <canvas canvas-id="qrcode" style="height: 600rpx;margin: 0 auto;" /> -->
			<image :src="imgpic" mode="aspectFit"></image>
			<view class="" style="width: 100%;text-align: center;margin-top: 20rpx;">
				SN:{{deviceNo}}
			</view>
			<view class="btn" @click="saveCanvas">
				保存二维码
			</view>
		</view>
	</view>
</template>

<script>
	var xBlufi = require("@/page_components/blufi/xBlufi.js")
	import uQRCode from '@/common/uqrcode.js'
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts'
	let chart = null
	export default {
		components: {
			uniEcCanvas
		},
		data() {
			return {
				suitSurplus: '',
				showflag: false,
				imgflag: false,
				wemflag: false,
				btnmsk: false,
				bluetoothflag: false,
				shibaiflag: false,
				danwei: '',
				bgc: {
					backgroundColor: "#F9F8FF ",
				},
				ec: {
					lazyLoad: true
				},
				deviceInfo: {},
				loadings: false,
				info: '',
				checked: false,
				tittxt: "设备详情",
				titlist: [],
				tdtxt: '开启',
				curtitidx: 0,
				id: '',
				focus: false,
				timeday: '',
				imglist: '',
				token: '',
				userImgs: '',
				imgflag: true,
				mac: "",
				name: '',
				deviceId: '',
				storeId: '',
				qrResult: '',
				devicesList: [],
				setMode: null,
				vipflag: false,
				cztime: '',
				opflag: true,
				timer: null,
				url: "",
				deviceNo: '',
				modelId: [],
				damweiid: '',
				intervalId: null,
				sklist: {},
				sklistflag: false,
				imgpic: ''
			}
		},
		onLoad(option) {
			this.deviceNo = option.id
			this.qrFun()
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创想物联',
				path: '/pages/shouye/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创想物联',
				query: '',
				path: '/pages/shouye/index'
			}
		},
		onShow() {

		},
		mounted() {
			
		},
		methods: {
			// 保存二维码
			saveCanvas() {
				let that = this
				if (that.imgpic) {
					my.saveImageToPhotosAlbum({
						filePath: that.imgpic, // 要保存的图片的文件路径
						success: () => {
							my.showToast({
								title: '保存成功',
								icon: 'success',
								duration: 2000
							});
						},
						fail: (err) => {
							console.log(err);
							my.showToast({
								title: '保存失败',
								icon: 'none',
								duration: 2000
							})
						}
					});
				} else {
					my.showToast({
						title: '请先生成二维码',
						icon: 'none',
						duration: 2000
					});
				}
			},
			//**生成二维码**//
			qrFun() {
				my.generateImageFromCode({
					code: 'https://kg.chuantewulian.cn/w?s=' + this.deviceNo, // 替换为有效的二维码内容
					format: 'QRCODE',
					width: 200,
					correctLevel: 'H',
					codeColor: '#8883F0',
					backgroundColor: '#ffffff',
					success: (res) => { // 使用箭头函数来保持this的上下文
						console.log(res)
						this.imgpic = res.image
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},

			ewmyc() {
				this.wemflag = false
			},

			btnlyqx() {
				this.shibaiflag = false
				this.bluetoothflag = false
			},

			getQiniuToken() {
				this.$u.get("/common/qiniu/uploadInfo").then((res) => {
					if (res.code == 200) {
						this.token = res.token
					}
				});
			},


			btnpic() {
				uni.chooseImage({
					count: 1,
					success: (rst) => {
						this.url = rst.tempFilePaths[0]
					}
				})
			},
			onok(ev) {
				this.url = ""
				this.path = ev.path;
				let _this = this
				let math = 'static/' + _this.$u.guid(20)
				wx.uploadFile({
					url: 'https://up-z2.qiniup.com',
					name: 'file',
					filePath: _this.path,
					formData: {
						token: _this.token,
						key: 'smartmeter/img/' + math
					},
					success: function(res) {
						// console.log(res);
						let str = JSON.parse(res.data)
						_this.userImgs = 'https://api.ccttiot.com/' + str.key
						_this.imglist = _this.userImgs
						// console.log(_this.imglist,'_this.imglist_this.imglist')
						let data = {
							deviceId: _this.id,
							customPicture: _this.imglist
						}
						_this.putdevice(data)
					}
				})
			},
			oncancel() {
				// url设置为空，隐藏控件
				this.url = ""
			},
			putdevice(data) {
				this.$u.put('/app/device', data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功',
							icon: 'success',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},

			opendevice() {
				let stause = 0
				if (this.deviceInfo.powerStatus == 1) {
					stause = 0
				} else {
					stause = 1
				}
				// console.log(stause, 'stausestause');
				this.$u.put(`/app/device/${this.deviceInfo.deviceId}/changePower?status=` + stause).then((res) => {
					if (res.code == 200) {
						// this.groupList=res.rows
						setTimeout(() => {
							this.getDevice(this.id)
						}, 2000)

						// this.loadings=true
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			opendevices() {

			},
			swiperchange(e) {
				this.curtitidx = e.detail.current
				// console.log(e, 'aaaa');
			},
			changeidx(index) {
				this.curtitidx = index
			},

			toydfx() {
				uni.navigateTo({
					url: "/page_components/eletj?id=" + this.id
				})
			},



		}
	}
</script>

<style lang="scss">
	/deep/ .panel {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 99 !important;
		overflow: hidden;
	}

	.btn {
		width: 100%;
		height: 94rpx;
		background: #8883F0;
		border-radius: 47rpx 47rpx 47rpx 47rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 94rpx;
		margin-top: 184rpx;
	}

	.imgewmflag {
		width: 750rpx;
		height: 100vh;
		background: #fff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		z-index: 1;
		position: fixed;
		top: 0;
		left: 0;
	}

	.imgewm {
		width: 300px;
		height: 300px;
		margin: auto;
		margin-top: 104rpx;
		z-index: 2;
	}

	.tishi {
		width: 620rpx;
		height: 180rpx;
		background: rgba(217, 216, 255, 0.3294);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		text-align: center;
		padding: 36rpx 72rpx;
		box-sizing: border-box;
		margin: auto;
		margin-top: 104rpx;

		text {
			margin-top: 16rpx;
			display: block;
			font-size: 36rpx;
			color: #3D3D3D;
		}
	}
</style>