hotel-tablecloth-uniapp-24-08-29/pages_order/components/product/addLeaseForm.vue

<template>
	<view class="form">
		<view class="shopName">
			<view>物品分类</view>
			<view class="list">
				<view :class="{act : form.categoryId == item.id}" @click="form.categoryId = item.id" :key="index"
					v-for="(item, index) in category">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="shopName">
			<view>物品照片</view>
			<view>
				<uv-upload :fileList="fileList" :maxCount="1" width="180rpx" 
				height="180rpx" multiple
				@afterRead="afterRead" @delete="deleteImage">
					<image src="../../static/help/uploading.png" mode="aspectFill"
						style="width: 180rpx;height: 180rpx;" />
				</uv-upload>
			</view>
		</view>
		<view class="shopName">
			<view>物品名称</view>
			<view>
				<input v-model="form.name" placeholder="请输入物品名称" clearable></input>
			</view>
		</view>
		<view class="shopName">
			<view>物品长度CM</view>
			<view>
				<input v-model="form.length" type="number" placeholder="请输入物品长度" clearable></input>
			</view>
		</view>
		<view class="shopName">
			<view>物品宽度CM</view>
			<view>
				<input v-model="form.wide" type="number" placeholder="请输入物品宽度" clearable></input>
			</view>
		</view>
		<view class="shopName">
			<view>物品数量</view>
			<view>
				<uv-number-box v-model="form.num" :min="1"></uv-number-box>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				form: {
					categoryId: 0,
					name: '',
					num: 1,
					length: '',
					wide: '',
				},
				fileList: [],
			}
		},
		computed: {
			...mapState(['category']),
		},
		mounted() {
			this.closeForm()
		},
		methods: {
			submit(fn) {
				this.form.pic = this.fileList.map((item) => item.url).join(",")
				let form = {
					...this.form
				}
				if (this.$utils.verificationAll(form, {
						pic: '请上传物品照片',
						name: '请输入物品名称',
						length: '请输入物品长度',
						wide: '请输入物品宽度',
					})) {
					return
				}
				fn && fn(form)
			},
			closeForm() {
				this.form = {
					categoryId: 0,
					name: '',
					num: 1,
					length: '',
					wide: '',
				}
				this.fileList = []
				if (this.category.length) {
					this.form.categoryId = this.category[0].id
				}
			},
			deleteImage(e) {
				this.fileList.splice(e.index, 1)
			},
			afterRead(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.fileList.push({
							url
						})
					})
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.form {
		padding: 20rpx 0;

		.shopName {
			display: flex;
			align-items: center;
			background-color: #FFF;
			margin: 10rpx 0 0 0;
			padding: 10rpx 20rpx;

			>view:nth-of-type(1) {
				width: 30%;
				// font-weight: 700;
			}

			>view:nth-of-type(2) {
				width: 70%;
				// padding: 0 20rpx 0 0;
				border-radius: 10rpx;
				overflow: hidden;

				input {
					background-color: #f5f5f5;
					// color: #a4a4a4;
					font-size: 28rpx;
					padding: 8rpx 8rpx 8rpx 15rpx;
				}
			}
		}
	}
	.list {
		display: flex;
		flex-wrap: wrap;
		font-size: 22rpx;
	
		.act {
			color: $uni-color;
			border: 1px solid $uni-color;
			background-color: #F9E7DE;
		}
	
		view {
			border-radius: 15rpx;
			background-color: #F3F3F3;
			border: 1px solid #F3F3F3;
			margin: 10rpx;
			display: flex;
			justify-content: center;
			padding: 10rpx 20rpx;
		}
	}
</style>