sailun-tbr-web/pages/me/scancodequery/result.vue

<!-- 胎号查询成功页面 -->
<template>
	<view>
		<view class="head">
			<view class="tips" @click="scanning">
				<view>
					<view><text>点击扫码</text></view>
				</view>
			</view>
			<view class="stripe"></view>
			<view class="roll">
				<view>
					<view @click="show =! show">
						<u-icon name="edit-pen"></u-icon>手动录入
					</view>
					<view class="lnput" v-if="show==false">
						<input type="text" v-model="number" placeholder="请输入胎号" clearable="true" focus="true" />
						<u-button type="primary" size="medium" @click="query">查询</u-button>
					</view>
					<view class="roll_s" v-else>
						<view>{{datalist}}</view>
					</view>
				</view>
				<view>
					<view class="left"></view>
					<view class="right"></view>
					<u-line color="#f4f4f4" border-style="dashed" :hair-line="true" length="94%" style="margin: 0 auto;padding-top: 30rpx;" />
				</view>
				<view class="Exhibition" v-if="show_s == false">
					<view><text>轮胎胎号</text><text>{{Information.tireNumber}}</text></view>
					<view><text>轮胎品牌</text><text>{{Information.brand}}</text></view>
					<view><text>轮胎规格</text><text>{{Information.specification}}</text></view>
					<view><text>操作类型</text><text>{{Information.mouldInType}}</text></view>
					<view><text>操作时间</text><text>{{Information.mouldInTime}}</text></view>
					<view v-if="Information.mouldOutType != null "><text>操作类型</text><text>{{Information.mouldOutType}}</text></view>
					<view v-if="Information.mouldOutTime != null "><text>操作时间</text><text>{{Information.mouldOutTime}}</text></view>
				</view>
				<view v-else style="margin-top: 100rpx;margin-bottom: 100rpx;">
					<u-empty :text="text" mode="list"></u-empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '../../../common/request/request'
	require("promise.prototype.finally").shim()
	export default {
		data() {
			return {
				datalist: '请扫码查询或手动录入',
				number:'',
				empty: true,
				mouldOutTime: '',
				mouldOutType: '',
				mouldInTime: '',
				mouldInType: '',
				tireNumber: "",
				brand: '',
				specification: '',
				text: '请扫码或输入胎号',
				show: true,
				show_s:true,
				Information:[]
			}
		},
		onReady() {
			uni.getNetworkType({
				success: function(res) {
					let none = res.networkType
					console.log(res.networkType);
					if (none == 'none') {
						uni.showToast({
							icon: 'none',
							title: '无网络，请连接网络后再试~',
							position: "bottom"
						})
					}
				}
			});
			// uni.$on('update', data => {
			// 	this.datalist = data.materialList
			// })

		},
		methods: {
			rendering() {
				console.log(this.datalist)
				request({
					url: '/myapp/mouldSelect',
					method: 'Post',
					data: {
						storeId: this.$store.state.storeInfo.storeId,
						userId: this.$store.state.storeInfo.userId,
						tireNumber: this.datalist,
					}
				}).then(res => {
					this.Information = []
					console.log(res.data)
					if (res.data.code == 0) {
						uni.showToast({
							icon: 'none',
							title: '查询成功',
							position: "bottom"
						})
						this.empty = false
						this.show_s = false
						this.Information = res.data.data
					} else if (res.data.code == 500) {
						this.empty = true
						this.show_s = true
						uni.showToast({
							icon: 'none',
							title: res.data.msg,
							position: "bottom"
						})
					}
					this.text = res.data.msg
				}).catch(err => {
					console.log(err)
					uni.showToast({
						icon: 'none',
						title: '出错了请联系管理员~',
						position: "bottom"
					})
				}).finally(() => {
					// Loading.close()
				})
			},
			scanning() {
				let this_ = this
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						this_.datalist = res.result
						this_.rendering()
					}
				})
			},
			query() {
				console.log(this.datalist)
				request({
					url: '/myapp/mouldSelect',
					method: 'Post',
					data: {
						storeId: this.$store.state.storeInfo.storeId,
						userId: this.$store.state.storeInfo.userId,
						tireNumber: this.number,
					}
				}).then(res => {
					this.Information = []
					console.log(res.data)
					if (res.data.code == 0) {
						uni.showToast({
							icon: 'none',
							title: '查询成功',
							position: "bottom"
						})
						this.empty = false
						this.show_s = false
						this.Information = res.data.data
						this.number = ''
					} else if (res.data.code == 500) {
						this.empty = true
						this.show_s = true
						this.text = res.data.msg
						uni.showToast({
							icon: 'none',
							title: res.data.msg,
							position: "bottom"
						})
					}
					this.text = res.data.msg
				}).catch(err => {
					console.log(err)
					uni.showToast({
						icon: 'none',
						title: '出错了请联系管理员~',
						position: "bottom"
					})
				}).finally(() => {
					// Loading.close()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.roll>view:nth-child(1)>view:nth-child(1) {
		width: 200rpx;
		color: #0094FE;
		position: relative;
		top: -40rpx;
		left: 400rpx;
		font-size: 32rpx;
		text-align: center;
	}

	.lnput>input {
		background-color: none;
		width: 50%;
		font-size: 42rpx;
		float: left;
		margin-top: 10rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		font-weight: bold;
		color: #0192FD;
	}

	.lnput>u-button {
		margin-left: 10rpx;
	}

	.button {
		width: 90%;
		margin-top: 200rpx;
	}

	.roll_s {
		font-size: 42rpx;
		font-weight: bold;
		color: #0192FD;
		margin-bottom: 50rpx;
		text-align: center;
	}

	.head {
		width: 750rpx;
		height: 650rpx;
		background-color: #0095FF;

		.stripe {
			width: 650rpx;
			height: 30rpx;
			background: rgba(0, 0, 0, 0.2);
			border-radius: 12rpx;
			margin: 0 auto;
			margin-top: 40rpx;
		}

		.roll {
			width: 600rpx;
			height: auto;
			background: #FFFFFF;
			margin: 0 auto;
			margin-top: -15rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(101, 176, 249, 0.3);
			border-bottom-left-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
			padding-top: 50rpx;
			padding-bottom: 40rpx;

			view:nth-child(2) {
				width: 100%;
				height: auto;

				.left {
					width: 50rpx;
					height: 50rpx;
					background-color: #F4F4F4;
					border-radius: 100%;
					float: left;
					margin-left: -30rpx;
				}

				.right {
					width: 50rpx;
					height: 50rpx;
					background-color: #F4F4F4;
					border-radius: 100%;
					float: right;
					margin-right: -30rpx;
				}
			}
		}

		.tips {
			text-align: center;
			height: 500rpx;

			view {
				width: 500rpx;
				height: 500rpx;
				background-color: rgba(255, 255, 255, 0.1);
				border-radius: 20rpx;
				margin: 0 auto;
				color: #FFFFFF;
				font-size: 32rpx;
				font-weight: bold;
				padding-top: 2%;

				view {
					width: 92%;
					height: 96%;
					background-color: #000000;
					padding-top: 41%;

					text {
						font-size: 42rpx;
					}
				}
			}
		}
	}

	.Exhibition {
		width: 94%;
		margin: 0 auto;
		margin-top: 25rpx;
	}

	.Exhibition>view {
		margin-bottom: 10rpx;
	}

	.Exhibition>view>text:nth-child(2) {
		float: right;
	}
</style>