tearoom/page_user/huanzuo.vue

<template>
	<view class="page">
		<u-navbar title="换座" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='40' id="navbar">
		</u-navbar>
         <image src="https://api.ccttiot.com/smartmeter/img/static/uXqeEvPV7yCULvZCmQRS" mode="" class="imgbj"></image>
         <view class="xinxi">
         	<view class="one" style="margin-top: 0;">
         		<view class="lt">
         			所属门店
         		</view>
				<view class="rt">
					【福鼎-西湖店】
				</view>
         	</view>
			<view class="one">
				<view class="lt">
					当前包厢
				</view>
				<view class="rt">
					竹韵
				</view>
			</view>
			<view class="one">
				<view class="lt">
					开始时间
				</view>
				<view class="rt">
					2024-11-22 09:00
				</view>
			</view>
			<view class="one">
				<view class="lt">
					结束时间
				</view>
				<view class="rt">
					2024-11-22 13:00
				</view>
			</view>
         </view>
		 <view class="zuowei">
		 	<view class="name">
		 		【福鼎-西湖店】
		 	</view>
			<view class="list">
			    <view
			     :class="['list_item', item.stutas == 1 ? 'activeone' : '']"
			      v-for="(item, index) in listzuowei"
			      :key="index"
				  @click="btnqiehuan(index,item)"
				  :id="selectedIndex == index ? 'active' : ''"
			    >
			      <view class="item_name" :id="selectedIndex == index ? 'active' : ''">{{ item.name }}</view>
			      <view class="yuding" :id="selectedIndex == index ? 'active' : ''">
			        <text v-if="item.stutas == 1">空闲</text>
			        <text v-if="item.stutas == 2">价格不匹配</text>
			        <text v-if="item.stutas == 3">已被预订</text>
			        <text v-if="item.stutas == 4">本次预定</text>
			      </view>
			    </view>
			  </view>
		 </view>
		 <view class="anniu">
		 	确定换座
		 </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "",
                },
				listzuowei:[
					{name:'竹韵',flag:false,stutas:'1'},
					{name:'竹韵',flag:false,stutas:'1'},
					{name:'竹韵',flag:true,stutas:'2'},
					{name:'竹韵',flag:false,stutas:'1'},
					{name:'竹韵',flag:false,stutas:'2'},
					{name:'竹韵',flag:true,stutas:'3'},
					{name:'竹韵',flag:true,stutas:'3'},
					{name:'竹韵',flag:false,stutas:'1'},
					{name:'竹韵',flag:false,stutas:'4'},
				],
				selectedIndex:null,
				
			}
		},
		onLoad() {

		},
		methods: {
			btnqiehuan(index,item){
				if (item.stutas == 1) {
				    this.selectedIndex = index
				}
			},

		}
	}
</script>

<style lang="scss">
	#active{
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		background: #48893B !important;
		color: #fff !important;
	}
	.activeone{
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		background: #fff !important;
		border: 1px solid #95989D;
	}
	page {
		background: #fff;
		.anniu{
			width: 674rpx;
			height: 96rpx;
			background: #48893B;
			border-radius: 53rpx 53rpx 53rpx 53rpx;
			text-align: center;
			line-height: 96rpx;
			font-weight: 600;
			font-size: 40rpx;
			color: #FFFFFF;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 128rpx;
		}
		.zuowei{
			width: 674rpx;
			height: 766rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.15);
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			margin: auto;
			margin-top: 24rpx;
			padding: 30rpx;
			box-sizing: border-box;
			.name{
				font-weight: 600;
				font-size: 32rpx;
				color: #3D3D3D;
				border-left: 8rpx solid #48893B;
				padding-left: 12rpx;
				box-sizing: border-box;
				border-radius: 4rpx;
			}
			.list{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 32rpx;
				.list_item{
					margin-top: 30rpx;
					width: 182rpx;
					height: 182rpx;
					background: #EBEBEB;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					text-align: center;
					.item_name{
						font-weight: 600;
						font-size: 24rpx;
						color: #3D3D3D;
						padding-top: 14rpx;
						box-sizing: border-box;
					}
					.yuding{
						font-size: 24rpx;
						color: #7C7C7C;
						margin-top: 14rpx;
						margin-top: 14rpx;
					}
				}
			}
		}
		.xinxi{
			width: 674rpx;
			max-height: 392rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.15);
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			margin: auto;
			margin-top: 38rpx;
			padding: 46rpx 34rpx;
			box-sizing: border-box;
			.one{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 42rpx;
				.lt{
					font-weight: 600;
					font-size: 32rpx;
					color: #3D3D3D;
				}
				.rt{
					font-weight: 600;
					font-size: 32rpx;
					color: #7C7C7C;
				}
			}
		}
		.imgbj{
			width: 750rpx;
			height: 424rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
		}
	}

</style>