lh-mobile/pages/tag/sampleTag.vue

<template>
	<view class="bg">
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backview">返回</block>
			<block slot="content">样品标签</block>
		</cu-custom>

		<view ref="qrcode" id="box">
			<view v-for="(item1,index1) in list" :key="index1">
				<view v-for="(item2,index2) in parseInt(item1.num)" :key="index2">
					<view class="tagBox">
						<view class="lh">
							<view>样品名称：</view>
							<view>{{item1.name}}</view>
						</view>
						<view class="la">
							<view class="lh">
								<view>样品编号：</view>
								<view>{{item1.serial}}</view>
							</view>
							<view class="lh" style="margin-left: 15rpx">
								<view>收样时间：</view>
								<view></view>
							</view>
						</view>
						<view class="lh">
							<view>样品类型：</view>
							<view>{{item1.type}}</view>
						</view>
						<view class="lh">
							<view>存储条件：</view>
							<view>{{item1.condition}}</view>
						</view>

						<view class="lh">
							<view>流转状态：</view>
							<view>▢待检，▢已检，▢留样</view>
						</view>
						<view class="lh">
							<view>样品数量：</view>
							<view>{{index2+1}}/{{item1.num}}支</view>
						</view>
						<view>
							<vue-barcode :value="item1.serial" :width="2" :height="40"></vue-barcode>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-button type="primary" class="btn" @click="getAction()" style="margin: 20rpx;" v-if="imgSrc != ''">操作
		</u-button>

	</view>
</template>

<script>
	import html2canvas from "html2canvas";
	import VueBarcode from 'vue-barcode';
	import {
		ACCESS_TOKEN,
		USER_NAME,
		USER_INFO
	} from "@/common/util/constants"
	export default {
		components: {
			VueBarcode
		},
		data() {
			return {
				value: '',
				id: '',
				list: [],
				imgSrc: '',
				userid: '',
				time: ''
			}
		},
		created() {
			this.getInit()
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.getLook(options.id)
			}
		},
		methods: {
			getInit() {
				let info = uni.getStorageSync(USER_INFO);
				if (info.employee.id) {
					this.userid = info.employee.id || ''
				}
				var nowDate = new Date((new Date).getTime() + 8 * 60 * 60 * 1000)
				var time = nowDate.toJSON().split('T').join(' ').substr(0, 19)
				this.time = time
			},
			getLook(id) {
				let sql =
					`select * from t_lhypb where parent_id_ = '${id}'`
				let requestData = this.$sig(sql)


				this.$http.post("/ibps/business/v3/sys/universal/inputSqlSelectData", requestData).then(res => {
					if (res.data.state == 200) {
						const data = res.data.variables.data
						let list = []
						data.forEach(item => {
							if (item.yang_pin_lei_xing != '' && parseInt(item.shu_liang_) > 0) {
								let obj = {
									name: item.yang_pin_ming_che,
									serial: item.yang_pin_bian_hao,
									type: item.yang_pin_lei_xing,
									num: item.shu_liang_,
									condition: item.yang_ben_yun_shu_
								}
								list.push(obj)
							}
							if (item.yang_pin_lei_er_ != '' && parseInt(item.shu_liang_er_) > 0) {
								let obj = {
									name: item.yang_pin_ming_che,
									serial: item.yang_pin_bian_hao,
									type: item.yang_pin_lei_er_,
									num: item.shu_liang_er_,
									condition: item.yang_pin_yun_shu_
								}
								list.push(obj)
							}
							if (item.yang_pin_lei_san_ != '' && parseInt(item.shu_liang_san_) > 0) {
								let obj = {
									name: item.yang_pin_ming_che,
									serial: item.yang_pin_bian_hao,
									type: item.yang_pin_lei_san_,
									num: item.shu_liang_san_,
									condition: item.yang_pin_yun_san
								}
								list.push(obj)
							}
							if (item.yang_pin_lei_si_ != '' && parseInt(item.shu_liang_si_) > 0) {
								let obj = {
									name: item.yang_pin_ming_che,
									serial: item.yang_pin_bian_hao,
									type: item.yang_pin_lei_si_,
									num: item.shu_liang_si_,
									condition: item.yang_pin_yun_si_
								}
								list.push(obj)
							}

						})
						this.list = list

						if (list.length > 0) {
							this.$nextTick(() => {
								this.getBtn()
							})
						}

					}
				})
			},
			getBtn() {
				// document.getElementById("qrcode").appendChild(canvas);
				//点击生成canvas转换成base64的图片
				var width = document.getElementById('box').offsetWidth,
					height = document.getElementById('box').offsetHeight,
					scale = window.devicePixelRatio; //放大倍数
				html2canvas(document.getElementById('box'), {}).then(canvas => {
					const dataURL = canvas.toDataURL()
					this.imgSrc = dataURL
					uni.showToast({
						title: '标签图片已生成,可以保存或者下载',
						icon: 'none',
						duration: 2000
					})

				});
			},
			getAction() {
				let data = ['下载', '保存']
				uni.showActionSheet({
					itemList: data,
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								this.downloadImage()
								break;
							case 1:
								this.getSave()
								break;
						}
					},
					fail: function(res) {}
				});
			},
			downloadImage() {
				// const dataURL = canvas.toDataURL('image/png')
				const creatDom = document.createElement('a')
				document.body.appendChild(creatDom)
				creatDom.href = this.imgSrc
				creatDom.download = this.time + '样品标签图片'
				creatDom.click()
			},
			getSave() {
				let pp = {
					paramWhere: [{
						id_: this.id
					}],
					tableName: "t_lhwtsqb",
					paramCond: {
						biao_qian_tu_pian: this.imgSrc,
						update_time_: this.time,
						update_by_: this.userid
					}
				}
				let data = this.$sig(pp)

				this.$http.post("ibps/business/v3/sys/universal/updateDatasContextTable", data).then(res => {
					if (res.data.state == 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'none',
							duration: 2000
						})
						this.$emit('saveSuccees')

					} else {
						uni.showToast({
							title: '提交失败',
							icon: 'none',
							duration: 2000
						})
					}
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {

		// height: auto;
	}

	.tagBox {
		width: 700rpx;
		height: 420rpx;
		border: 1rpx solid #000000;
		padding: 20rpx;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		margin: 20rpx auto;
		border-radius: 15rpx;
		background-color: #fff;
	}

	.la {
		display: flex;
		align-items: center;
	}

	.lh {
		// line-height: auto;
		font-size: 28rpx;
		display: flex;
		align-items: center;

	}
</style>