gas-cylinder-app/pages/order/cannibalize.vue

<template>
	<view>
		<u-navbar :title="headTile" autoBack placeholder></u-navbar>
		<view class="card_cannibalize">
			<view class="card_erweima_af">
				<canvas id="qrcode" canvas-id="qrcode" style="width: 140px;height:140px;" />
				<view class="title_balize">调拨码</view>
			</view>
			<view v-if="transferFlag">
				<view class="subheading_title">调拨人</view>
				<view style="display: flex;align-items: center;">
					<image class="mine_image" src="../../static/portrait.png" mode=""></image>
					<view class="card_user_title">
						<view class="mine_phone" v-if="transferList.allotUser">{{transferList.allotUser.nickName}}
						</view>
						<view class="mine_phone" v-if="transferList.allotCompany">{{transferList.allotCompany.name}}
						</view>
					</view>
				</view>
				<view class="subheading_title1">钢瓶编号</view>
				<view class="card_innercode" v-for="(item1,index1) in transferList.innerCodeList" :key="index1">
					<view style="color: #82848a;">{{ index1 + 1 }}</view>
					<view class="title_innerCode">{{ item1 }}</view>
				</view>
			</view>
		</view>
		<view class="btn_cannibalize" v-if="transferFlag">
			<view style="flex: 1;">
				<u-button style="width: 80%;" type="error" @click="cancelAllocation">取消</u-button>
			</view>
			<view style="flex: 1;">
				<u-button style="width: 80%;" type="primary" @click="submit">确定</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import UQRCode from "static/js/uqrcode.js";
	export default {
		data() {
			return {
				orderId: '',
				headTile: '',
				transferList: {},
				transferFlag: false,
			}
		},
		onLoad(value) {
			this.orderId = value.type
			this.headTile = value.title
		},
		mounted() {
			var userInfo = this.$cache.getCache('userInfo')
			this.userInfo = userInfo
			const qr = new UQRCode();
			let numarr = 'dialCode?' + this.orderId + ',' + userInfo.id + ',' + userInfo.nickName + ',' + userInfo.dept
				.id + ',' +
				userInfo.dept.name + ','
			qr.data = numarr;
			qr.size = 140;
			qr.make();
			const ctx = uni.createCanvasContext('qrcode', this);
			qr.canvasContext = ctx;
			qr.drawCanvas();

			this.getallot()
		},
		methods: {
			getallot() {
				this.$api.get('/api/gas-cylinder-allot/opt-type/' + this.orderId).then(res => {
					if (res.code == 200) {
						this.transferFlag = true
						this.transferList = res.data
					} else {
						setTimeout(() => {
							this.getallot()
						}, 60000);
					}
				})
			},
			// 取消调拨
			cancelAllocation() {
				this.$api.post('/api/gas-cylinder-allot/cancel', {
					id: this.transferList.id,
				}).then(res => {
					if (res.code == 200) {
						this.transferFlag = false
						this.transferList = {}
						uni.$u.toast(res.msg)
					}
				})
			},
			// 确定调拨钢瓶
			submit() {
				this.$api.post('/api/gas-cylinder-allot/submit', {
					id: this.transferList.id,
					optType: this.transferList.optType,
					allotUserId: this.transferList.allotUserId,
					acceptUserId: this.transferList.acceptUserId,
					allotCompanyId: this.transferList.allotCompanyId,
					acceptCompanyId: this.transferList.acceptCompanyId,
					innerCodeList: this.transferList.innerCodeList,
				}).then(res => {
					if (res.code == 200) {
						this.transferFlag = false
						this.transferList = {}
						uni.$u.toast(res.msg)
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/indexRouter?page=1'
							});
						}, 1500)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f4f4f5;
	}

	.card_cannibalize {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		margin: 30rpx;
		padding: 30rpx;
		border-radius: 10rpx;
	}

	.card_erweima_af {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.title_balize {
		font-size: 40rpx;
		margin-top: 10rpx;
		font-weight: 600;
	}

	.mine_image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.card_user_title {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.mine_phone {
		margin-left: 20rpx;
		font-size: 30rpx;
	}

	.card_innercode {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #d7d7d7;
	}

	.subheading_title {
		font-size: 34rpx;
		font-weight: 600;
		margin: 20rpx 0rpx;
	}

	.subheading_title1 {
		font-size: 34rpx;
		font-weight: 600;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #d7d7d7;
	}

	.title_innerCode {
		font-size: 30rpx;
		margin-left: 10rpx;
	}

	.btn_cannibalize {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 20rpx 0rpx;
	}
</style>