H5_QiCaiYao/pages_tool/quality_test/quality_test.vue

<template>
	<view class="quality_test_wrapper">
		<page-meta :page-style="themeColor"></page-meta>
		<u--form labelPosition="left" :model="FormData" :rules="rules" ref="FormData" labelWidth="80" errorType="toast">
			<u-form-item label="品名" prop="name">
				<u--input v-model="FormData.name" border="none" placeholder="请输入品名" clearable></u--input>
			</u-form-item>
			<u-form-item label="产品批号" prop="lot">
				<u--input v-model="FormData.lot" border="none" placeholder="请输入产品批号" clearable></u--input>
			</u-form-item>
			<u-form-item label="生产厂家" prop="manufacturer" @click="showBusiness = true; hideKeyboard()">
				<u--input v-model="FormData.manufacturer" border="none" placeholder="请输入生产厂家" clearable></u--input>
			</u-form-item>
		</u--form>
		<view class="btn" :style="{background:base_color}" @click="submit">查询</view>
		<view v-if="!showResult">
			<view class="cardBOX">
				<view>“品名、产品批号、生产厂家在哪里看？”</view>
				<img :src="$util.img('public/static/img/quality_test.png')" alt="" />
			</view>
		</view>
		<view v-if="showResult" class="cardBOX">
			<u-parse :content="content" :selectable="true" :showImgMenu="false"></u-parse>
		</view>
		<u-picker :show="showBusiness" :columns="[BusinessList]" @confirm="confirmBusiness"  @cancel="showBusiness = false"></u-picker>
		<!-- <u-action-sheet :show="showBusiness" :actions="BusinessList" title="请选择生产厂家" @close="showBusiness = false"
			@select="sexSelect">
		</u-action-sheet> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				base_color: uni.getStorageSync("theme_style").bg_color,
				FormData: { manufacturer: '', lot: '', name: '' },
				showResult: false,
				content: '',
				showBusiness: false,
				BusinessList: [],
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请输入品名',
						trigger: ['blur', 'change']
					},
					lot: {
						type: 'string',
						required: true,
						message: '请输入产品批号',
						trigger: ['blur', 'change']
					},
					manufacturer: {
						type: 'string',
						required: true,
						message: '请输入生产厂家',
						trigger: ['blur', 'change']
					}
				}
			};
		},
		onLoad() {
			this.getBusinessList()
		},
		methods: {
			getBusinessList() {
				this.$api.sendRequest({
					url: '/api/goodssku/getBusinessList',
					success: res => {
						this.BusinessList = res.data

					}
				})
			},
			confirmBusiness(e) {
				this.FormData.manufacturer = e.value[0];
				this.showBusiness = false;
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			submit() {
				let _this = this;
				_this.$refs.FormData.validate()
					.then(res => {
						this.$api.sendRequest({
							url: '/api/config/qaCheck',
							data: {
								name: _this.FormData.name,
								code: _this.FormData.lot,
								business: _this.FormData.manufacturer
							},
							success: res => {
								if (!res.data) {
									this.$util.showToast({
										title: '查询失败，请填写正确的信息'
									});
									return;
								}
								console.log(res);
								this.content = res.data.content;
								let content = this.content;
								content = content.replace(
									/\<img/gi,
									'<img style="width:auto;height:auto;max-width:100%;"'
								);
								this.content = content;
								_this.showResult = true;
							}
						});
					})
					.catch(err => {
						uni.$u.toast(err[0].message);
					});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.quality_test_wrapper {
		min-height: 100vh;
		background-color: #fff;
		padding: 10rpx 32rpx;

		/deep/ .u-form {
			padding: 20rpx 0;
			margin-top: 30rpx;

			.u-form-item {
				border-radius: 16rpx;
				padding-left: 20rpx;
				margin-bottom: 20rpx;
				background: #f6f6f6;
			}
		}

		.btn {
			margin-top: 60rpx;
			height: 80rpx;
			background: var(--base-color);
			border-radius: 50rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.result {
			margin-top: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 532rpx;

			image {
				height: 100%;
			}
		}

		.cardBOX {
			margin-top: 48rpx;
			width: 100%;
			height: 532rpx;

			view {
				text-align: center;
				padding-bottom: 20rpx;
			}

			img {
				width: 80%;
				height: 80%;
				margin-left: 10%;
			}
		}

		.save_btn {
			height: 80rpx;
			background: rgba(33, 187, 243, 0.08);
			border-radius: 40rpx;

			display: flex;
			justify-content: center;
			align-items: center;

			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: $base-color;
			margin-top: 24rpx;
		}
	}
</style>