hotelHomestayWx/pages/house/breast.vue

<template>
	<view class="page" :style="{'height':(h-th)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="添加商品" :showIcon="true"></c-nav-bar>
		<view class="content">
			<view class="item" v-for="(item,index) in list" :key="index">
				<text>{{item.breakfastName}}</text>
				<text>{{item.price}}</text>
				<u-number-box v-model="item.num" min="0">
					<view slot="minus" class="minus">
						<u-icon name="minus" size="22"></u-icon>
					</view>
					<text slot="input" class="input">{{item.num||0}}</text>
					<view slot="plus" class="plus">
						<u-icon name="plus" size="22"></u-icon>
					</view>
				</u-number-box>
			</view>
			<view class="item" v-for="(item,index) in list2" :key="index">
				<text>{{item.projectName}}</text>
				<text>{{item.defaultPrice}}</text>
				<u-number-box v-model="item.num" min="0">
					<view slot="minus" class="minus">
						<u-icon name="minus" size="22"></u-icon>
					</view>
					<text slot="input" class="input">{{item.num||0}}</text>
					<view slot="plus" class="plus">
						<u-icon name="plus" size="22"></u-icon>
					</view>
				</u-number-box>
			</view>
		</view>
		<view class="btn">
			<text @click="conform()">确定</text>
		</view>
	</view>
</template>

<script>
	import listItem from '../../uni_modules/uview-ui/libs/config/props/listItem';
	export default {
		data() {
			return {
				list: [],
				list2: []
			}
		},
		onLoad(opt) {
			console.log(opt)
			let list = JSON.parse(opt.list1);
			let list2 =JSON.parse(opt.list2);
			this.getBreastData(list);
			this.getOtherData(list2);
		},
		methods: {
			conform() {
				this.getOpenerEventChannel().emit('addSuccess', {
					'data1': this.list,
					'data2': this.list2
				});
				uni.navigateBack();
			},
			getBreastData(list) {
				this.$api.get('/merchant/hotel/order/getBreakfastList', {
					homestayId: '1711268640588517378'
				}).then(res => {
					console.log(res)
					if (res.data.code == 0) {
						if (list && list.length != 0) {
							for (let i = 0; i < res.data.data.length; i++) {
								let item = list.filter(
									(item) =>
									item.breakfastName == res.data.data[i].breakfastName
								);
								if (item) {
									res.data.data[i].num = item[0].num;
								}
							}
						}
						this.list = res.data.data
					}
					console.log(this.list)
				})
			},
			getOtherData(list2) {
				this.$api.get('/merchant/hotel/order/getOtherList', {
					homestayId: '1711268640588517378'
				}).then(res => {
					if (res.data.code == 0) {
						if (list2 && list2.length != 0) {
							for (let i = 0; i < res.data.data.length; i++) {
								let item = list2.filter(
									(item) =>
									item.projectName == res.data.data[i].projectName
								);
								if (item) {
									res.data.data[i].num = item[0].num;
								}
							}
						}
						this.list2 = res.data.data
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	.btn {
		position: fixed;
		background-color: #fff;
		padding: 30rpx 0;
		z-index: 9;
		bottom: 0;
		width: 100%;
		left: 0;
		text-align: center;

		text {
			display: inline-block;
			width: 90%;
			height: 96rpx;
			line-height: 96rpx;
			background-color: #1372FF;
			color: #fff;
			font-size: 34rpx;
			border-radius: 48rpx;

		}
	}

	.page {
		background: #F3F4F4;
		box-sizing: border-box;
		overflow-y: auto;
		overflow-x: auto;
	}

	.content {
		padding: 0 30rpx 20rpx;
		width: 96%;
		margin: 20rpx auto 0;
		box-sizing: border-box;
		background-color: #fff;

		.item {
			padding: 36rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #D1D1D1;

			&:last-child {
				border: 0;
			}

			text {
				font-size: 30rpx;
				color: #F14D4D;

				&:nth-of-type(1) {
					font-weight: bold;
					color: #333;
				}
			}
		}

	}
	.input {
		margin: 0 20rpx;
		font-size: 28rpx;
	}
	.minus,
	.plus {
		justify-content: center;
		display: flex;
		width: 34rpx;
		height: 34rpx;
		line-height: 34rpx;
		padding: 8rpx 6rpx;
		border: 1px solid #999;
		border-radius: 6rpx;
	}
	
</style>