hotel-tablecloth-uniapp-24-08-29/pages_order/mine/lease.vue

<template>
	<view class="page">
		<navbar title="我的物品" leftClick @leftClick="$utils.navigateBack" />
		
		<!-- <view class="tabs">
			<uv-tabs :list="tabs" :activeStyle="{color : '#FD5100', fontWeight : 600}" lineColor="#FD5100" lineHeight="8rpx"
				lineWidth="50rpx" :scrollable="false" @click="clickTabs"></uv-tabs>
		</view> -->
		
		<commoditySelect ref="commoditySelect"/>
		
		<view class="btn fixed" @click="open">
			<button class="a">添加物品</button>
		</view>
		
		<uv-popup ref="addPopup" :round="30">
			
			<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" multiple :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>
			
			<view class="btn" @click="submit">
				<button class="a">添加</button>
			</view>
		</uv-popup>
		
	</view>
</template>

<script>
	import commoditySelect from "../components/commodity/commoditySelect.vue"
	import { mapState } from 'vuex'
	export default {
		components : {
			commoditySelect,
		},
		data() {
			return {
				tabs: [{
						name: '选择租赁物品'
					},
					{
						name: '选择我的物品'
					},
				],
				form : {
					categoryId : 0,
					name : '',
					num : 1,
					length : '',
					wide : '',
				},
				fileList: [],
			}
		},
		computed : {
			...mapState(['category']),
		},
		onShow() {
			this.$refs.commoditySelect.getList()
		},
		methods: {
			//点击tab栏
			clickTabs({
				index,
				name
			}) {
				// this.type = index;
				// this.queryParams.pageSize = 10
				// this.checkboxValue = []
				// this.mixinsListApi = ['orderPage', 'orderPage'][index]
			},
			submit(){
				
				this.form.pic = this.fileList.map((item) => item.url).join(",")
				
				if (this.$utils.verificationAll(this.form, {
						pic : '请上传物品照片',
						name : '请输入物品名称',
						length : '请输入物品长度',
						wide : '请输入物品宽度',
					})) {
					return
				}
				
				this.$api('tablecloth', this.form, res => {
					if(res.code == 200){
						this.$refs.commoditySelect.getList()
						this.$refs.addPopup.close()
					}
				})
			},
			open(){
				this.form = {
					categoryId : 0,
					name : '',
					num : 1,
					length : '',
					wide : '',
				}
				if(this.category.length){
					this.form.categoryId = this.category[0].id
				}
				this.$refs.addPopup.open('bottom')
			},
			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">
.page{
	padding-bottom: 200rpx;
	.tabs{
		position: sticky;
		top: calc(var(--status-bar-height) + 120rpx);
		background-color: #fff;
		// padding-top: 20rpx;
	}
	.fixed{
		position: fixed;
		bottom: 20rpx;
	}
	.btn {
		display: flex;
		justify-content: center;
		width: 100%;
		
		.a {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 90%;
			height: 100rpx;
			color: #FFF;
			background-color: $uni-color;
			border: 1px solid red;
			border-radius: 100rpx;
			font-size: 30rpx;
		}
	}
	.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;
		}
	}
	.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;
				}
			}
		}
	}
}
</style>