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

<!-- 胎号查询成功页面 -->
<template>
	<view>
		<view class="head" v-if="empty == true">
			<view class="tips">
				<image src="../../../static/sailun/successful.png" mode=""></image>
				<view>查询失败</view>
			</view>
			<view class="stripe"></view>
			<view class="roll">
				<view>查询失败</view>
				<view>
					<view></view>
					<view></view>
					<u-line color="#f4f4f4" border-style="dashed" :hair-line="true" length="94%" style="margin: 0 auto;padding-top: 30rpx;" />
				</view>
				<view class="Exhibition">
					<u-empty text="查询失败" mode="list"></u-empty>
				</view>
			</view>
			<u-button type="primary" shape="circle" class="button" @click="scanning">立即查询</u-button>
		</view>
		
		<view class="head" v-else>
			<view class="tips">
				<image src="../../../static/sailun/successful.png" mode=""></image>
				<view>查询成功</view>
			</view>
			<view class="stripe"></view>
			<view class="roll">
				<view>{{tireNumber}}</view>
				<view>
					<view></view>
					<view></view>
					<u-line color="#f4f4f4" border-style="dashed" :hair-line="true" length="94%" style="margin: 0 auto;padding-top: 30rpx;" />
				</view>
				<view class="Exhibition">
					<view><text>轮胎胎号</text><text>{{tireNumber}}</text></view>
					<view><text>轮胎类型</text><text>{{mouldType}}</text></view>
					<view><text>轮胎品牌</text><text>{{brand}}</text></view>
					<view><text>轮胎规格</text><text>{{specification}}</text></view>
					<view><text>创建时间</text><text>{{createTime}}</text></view>
				</view>
			</view>
			<u-button type="primary" shape="circle" class="button" @click="scanning">继续查询</u-button>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '../../../common/request/request'
	require("promise.prototype.finally").shim()
	export default {
		data() {
			return {
				datalist: '',
				empty: true,
				tireNumber: "未查询",
				mouldType: '未查询',
				brand: '未查询',
				specification: '未查询',
				createTime: '未查询'
			}
		},
		onReady() {
			uni.getNetworkType({
				success: function(res) {
					let none = res.networkType
					console.log(res.networkType);
					if (none == 'none') {
						uni.showToast({
							icon: 'none',
							title: '无网络，请连接网络后再试~',
							position: "bottom"
						})
					}
				}
			});
			setTimeout(() => {
				this.scanning()
			}, 100)

		},
		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 => {
					console.log(res.data)
					if(res.data.code == 0){
						this.empty = false
						this.tireNumber = res.data.data.tireNumber
						this.mouldType = res.data.data.mouldType
						this.brand = res.data.data.brand
						this.specification = res.data.data.specification
						this.createTime = res.data.data.createTime
					}else if (res.data.code == 500) {
						this.empty = true
						uni.showToast({
							icon: 'none',
							title: res.data.msg,
							position: "bottom"
						})
					}
				}).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()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.button {
		width: 90%;
		margin-top: 200rpx;
	}

	.head {
		width: 750rpx;
		height: 440rpx;
		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>view:nth-child(1) {
			font-size: 42rpx;
			font-weight: bold;
			color: #0192FD;
			text-align: center;
			margin-bottom: 50rpx;
		}

		.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;

				view:nth-child(1),
					{
					width: 50rpx;
					height: 50rpx;
					background-color: #F4F4F4;
					border-radius: 100%;
					float: left;
					margin-left: -30rpx;
				}

				view:nth-child(2) {
					width: 50rpx;
					height: 50rpx;
					background-color: #F4F4F4;
					border-radius: 100%;
					float: right;
					margin-right: -30rpx;
				}
			}
		}

		.tips {
			text-align: center;

			image {
				margin-top: 60rpx;
				width: 106rpx;
				height: 112rpx;
			}

			view {
				margin-top: 50rpx;
				color: #FFFFFF;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}

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

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

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