<!-- <template>

	<view class="flex-col page">
		<view class="flex-col section">
			<text class="self-start text">服装展示</text>
			<view class="flex-col self-stretch mt-21">
				<view class="flex-row items-center mt-10 list-item" v-for="(item, index) in label" :key="index"
					@click="goToText(index)">
					<image class="shrink-0 image_2" :src="item.image" />
					<view class="flex-col flex-1 ml-11">
						<view class="flex-col self-stretch">
							<view class="flex-row justify-end self-stretch group">
								<text class="font">详细信息</text>
								<image class="image" :src="item.image" />
							</view>
							<text class="self-start font_2 text_2 mt-3">{{item.name}}</text>
						</view>
						<view class="self-stretch group_2 mt-5">
							<text class="font_4">服装简介：</text>
							<text class="font_3">
								{{item.intro}}
							</text>
						</view>
						<text class="self-end font_5 mt-5">￥{{item.price}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="mt-48 flex-row items-center section_2">
			<view class="flex-col items-center shrink-0 section_3">
				<image class="image_3"
					src="https://ide.code.fun/api/image?token=674eb236797f850011f0c44a&name=4b56fed14a39630ca2312edf6e34c024.png" />
				<text class="mt-2 text_4">客服</text>
			</view>
			<view class="ml-34 flex-col justify-start items-center flex-1 text-wrapper">
				<text class="text_3">现在去预约</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		baseUrl
	} from '../../../api/request';
	const list = ref([{}])
	const label = ref([{}])
	onMounted(() => {
		getLabel()
	})
	onLoad((options) => {
		list.value = JSON.parse(options.info)
		console.log(list.value, 'id')
	})
	const getLabel = async () => {
		const res = await uni.request({
			url: baseUrl + '/clothesInfo/list/label',
			method: 'POST',
			header: {
				cookie: wx.getAccountInfoSync('cookie')
			},
			data: {
				id: list.value
			}
		})
		console.log(res)
		if (res.data.code === 1) {
			label.value = res.data.data
		} else {
			uin.showtoast({
				icon: 'error',
				title: '获取失败'
			})
		}
	}

	const goToText = (index) => {
		uni.navigateTo({
			url: "/pages/booking/CostumeDetails/CostumeDetails?info=" + JSON.stringify(label.value[index].id)
		})
		console.log(label.value[index].id)
	}
</script>

<style lang="scss" scoped>
	.mt-21 {
		margin-top: 39.38rpx;
	}

	.ml-11 {
		margin-left: 20.63rpx;
	}

	.mt-3 {
		margin-top: 5.63rpx;
	}

	.mt-5 {
		margin-top: 9.38rpx;
	}

	.page {
		padding-top: 69.38rpx;
		background-color: #f5f5dc;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		margin: 0 18.75rpx;
		padding: 37.5rpx 30rpx 129.38rpx;
		background-color: #fffef8;
		border-radius: 18.75rpx;
	}

	.text {
		color: #000000;
		font-size: 30rpx;
		font-family: Open Sans;
		line-height: 27.71rpx;
	}

	.list-item {
		padding: 22.5rpx 22.5rpx 22.5rpx 30rpx;
		background-color: #fff3c3;
		border-radius: 9.38rpx;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.image_2 {
		border-radius: 9.38rpx;
		width: 148.13rpx;
		height: 165rpx;
	}

	.group {
		padding: 0 3.75rpx;
	}

	.font {
		font-size: 18.75rpx;
		font-family: Open Sans;
		line-height: 17.44rpx;
		color: #323232;
	}

	.image {
		width: 15rpx;
		height: 15rpx;
	}

	.font_2 {
		font-size: 26.25rpx;
		font-family: Open Sans;
		line-height: 22.5rpx;
		color: #323232;
	}

	.text_2 {
		line-height: 24.26rpx;
	}

	.group_2 {
		line-height: 22.5rpx;
	}

	.font_4 {
		font-size: 18.75rpx;
		font-family: Open Sans;
		line-height: 22.5rpx;
		color: #323232;
	}

	.font_3 {
		font-size: 18.75rpx;
		font-family: Open Sans;
		line-height: 22.5rpx;
		color: #828282;
	}

	.font_5 {
		font-size: 33.75rpx;
		font-family: Times New Roman;
		line-height: 24.73rpx;
		color: #ff3c3c;
	}

	.section_2 {
		background-color: #fffef8;
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.section_3 {
		padding: 15rpx 0;
		background-color: #ffc470;
		width: 118.13rpx;
		height: 114.38rpx;
	}

	.image_3 {
		width: 52.5rpx;
		height: 52.5rpx;
	}

	.text_4 {
		color: #fffef8;
		font-size: 26.25rpx;
		font-family: Inter;
		line-height: 24.17rpx;
	}

	.text-wrapper {
		margin-right: 26.25rpx;
		padding: 26.25rpx 0;
		background-color: #fbb612;
		border-radius: 75rpx;
		height: 82.5rpx;
	}

	.text_3 {
		color: #ffffff;
		font-size: 30rpx;
		font-family: Inter;
		line-height: 27.86rpx;
	}

	@import url("../../../common/css/global.css");
</style> -->


<template>
	<view class="flex-col justify-start relative page">
		<view class="shrink-0 section"></view>
		<view class="flex-col justify-start items-center text-wrapper pos"><text class="text">服装详情</text></view>
		<view class="flex-col pos_2">
			<view class="flex-row items-center list-item" v-for="(item, index) in label" :key="index" @click="goToText(index)">
				<image class="shrink-0 image"
					 :src="item.image" />
				<view class="flex-col flex-1 ml-5">
					<text class="self-start font">{{item.name}}</text>
					<text class="self-start font_2 text_2">
					{{item.intro}}
					</text>
					<text class="self-end font_3 text_3">￥{{item.price}}</text>
				</view>
			</view>
		</view>
		<view class="flex-row justify-between items-center section_4 pos_3">
			<view class="flex-col items-center">
				<image class="image_2"
					src="https://ide.code.fun/api/image?token=67610a10797f850011f30392&name=a18599a262f28b8e3d504092795de649.png" />
				<text class="text_5 mt-3">客服</text>
			</view>
			<view class="flex-col justify-start items-center text-wrapper_2"><text class="font text_4">现在去预约</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		baseUrl
	} from '../../../api/request';
	const list = ref([{}])
	const label = ref([{}])
	onMounted(() => {
		getLabel()
	})
	onLoad((options) => {
		list.value = JSON.parse(options.info)
		console.log(list.value, 'id')
	})
	const getLabel = async () => {
		const res = await uni.request({
			url: baseUrl + '/clothesInfo/list/label',
			method: 'POST',
			header: {
				cookie: wx.getAccountInfoSync('cookie')
			},
			data: {
				id: list.value
			}
		})
		console.log(res)
		if (res.data.code === 1) {
			label.value = res.data.data
		} else {
			uin.showtoast({
				icon: 'error',
				title: '获取失败'
			})
		}
	}

	const goToText = (index) => {
		uni.navigateTo({
			url: "/pages/booking/CostumeDetails/CostumeDetails?info=" + JSON.stringify(label.value[index].id)
		})
		console.log(label.value[index].id)
	}
</script>

<style lang="scss" scoped>
	.ml-5 {
  margin-left: 9.38rpx;
}
.mt-3 {
  margin-top: 5.63rpx;
}
.page {
  background-color: #ffffff;
  overflow: hidden;
  background-image: url('https://ide.code.fun/api/image?token=67610a10797f850011f30392&name=7f5f6eb3a306f1097a8541736adfb354.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  background-image: url('https://ide.code.fun/api/image?token=67610a10797f850011f30392&name=7f5f6eb3a306f1097a8541736adfb354.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 750rpx;
  height: 1659.38rpx;
}
.text-wrapper {
  padding: 26.25rpx 0 22.5rpx;
  background-color: #ebe7e480;
}
.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.text {
  color: #000000;
  font-size: 37.5rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 36.34rpx;
}
.pos_2 {
  position: absolute;
  left: 45rpx;
  right: 37.5rpx;
  top: 150rpx;
}
.list-item {
  padding: 0 7.5rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
}
.image {
  width: 161.25rpx;
  height: 219.38rpx;
}
.font {
  font-size: 28.13rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 27.69rpx;
  color: #000000;
}
.font_2 {
  font-size: 22.5rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 27.69rpx;
  color: #00000099;
}
.text_2 {
  margin-top: 18.75rpx;
  line-height: 26.25rpx;
  width: 427.5rpx;
}
.font_3 {
  font-size: 28.13rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 18.79rpx;
  color: #ff0707;
}
.text_3 {
  margin-right: 18.75rpx;
}
.section_4 {
  padding: 15rpx 45rpx;
  background-color: #ffffff;
}
.pos_3 {
  position: absolute;
  left: 0;
  right: 0;
  position: fixed;
  bottom: 0;
}
.image_2 {
  width: 46.88rpx;
  height: 46.88rpx;
}
.text_5 {
  color: #9d2624;
  font-size: 22.5rpx;
  font-family: Open Sans;
  line-height: 20.72rpx;
}
.text-wrapper_2 {
  margin-right: 22.5rpx;
  padding: 30rpx 0 26.25rpx;
  background-color: #e79ea1;
  border-radius: 75rpx;
  width: 466.14rpx;
  height: 82.5rpx;
}
.text_4 {
  color: #ffffff;
  font-size: 30rpx;
  line-height: 27.43rpx;
}

	@import url("../../../common/css/global.css");
// </style>