jiangchengfeiyi-xiaochengxu/pages/booking/respectable/respectable.vue

<template>
	<!-- 弹窗 -->
	<uni-popup ref="popup1" v-if="showPopup1" :mask-click="false" background-color="white">
			  <view style="text-align: center;margin: 10px;font-size: 18px;">预约须知</view>
			  	<view style="margin: 0 20px;">1.成功预约的顾客需按照预定时间前往店内挑选相应级别的服装。
			  	为确保衣物在体验过程中的完好无损，顾客需根据所选服装的级别补缴尾款以及相应的押金。
			  	拍摄结束后，店铺将依据衣物的实际状况评估是否扣除押金。</view>
			  	<view style="margin: 0 20px;">
			  				2.其中部分物品商家可提供，属于增值服务（如一次性隐形眼镜、
			  				 一次性粉扑等属于服务费以外的赠送服务，买家可选择自带用品，不影响服务价格），
			  				 需要买家自己准备的，客服需要提前告诉买家（如胸贴等贴身物品）
			  			</view>
			  	<button @click="close1" style="width: 50%;background-color:#f2b600;border-radius: 30px;margin-top: 20px;
				margin-bottom: 20px;">我知道了</button>
	</uni-popup>
	<uni-popup ref="popup2" v-if="showPopup2" :mask-click="false" background-color="white">
		<view style="text-align: center;margin: 10px;font-size: 18px;">费用说明</view>
		<view style="margin: 10px;"> 一、费用支付流程</view>
		<view style="margin: 0 20px;">
			<view>1.确定等级：您将根据个人需求选择合适的服装价位区间，并完成预约操作。</view>
			<view>2.预约成功：预约成功后，您需前往店铺挑选对应等级的服装。</view>
			<view>3.补缴尾款及押金：在挑选服装时，您需要补缴尾款（扣除已支付定金后的剩余服务或商品费用）以及押金（用于保障服装归还时的完好）。</view>
		</view>
		<view style="margin: 10px;"> 二、尾款具体事项</view>
		<view style="margin: 0 20px;">
			<view>1.租赁服装：若您选择租赁我们店铺没有的服装，租赁费用将在您支付尾款时一并结算。无论拍摄是否进行，租赁费用均不予退还。</view>
			<view>2.购买服装：如您希望购买我们店铺的服装，且我们同意购买，将按照服装的稀有程度分等级定价。您需按照所选等级支付尾款。</view>
			<view>3.定制服务：若您自带衣服，我们提供妆发及摄影服务。若需我们额外购买服装，将按照上述等级定价，您需支付相应的尾款。</view>
		</view>
		<view style="margin: 10px;"> 三、定金与押金说明</view>
		<view style="margin: 0 20px;">
			<view>1.定金：预约时支付的定金用于确认您的预约意向，定金不予退还。</view>
			<view>2.押金：拍摄完成后，我们将根据服装的归还情况决定是否扣除押金。若服装无损坏，押金将全额退还。</view>
		</view>
		<view style="margin: 10px;"> 四、特殊情况处理</view>
		<view style="margin: 0 20px;">
			<view> 若因特殊情况您需要取消预约，请及时与我们联系。未拍摄情况下，定金不予退还，已支付的租赁费用亦不退还。</view>
		</view>
	      <button @click="close2" style="width: 50%;background-color:#f2b600;border-radius: 30px;margin-top: 20px;
	      margin-bottom: 20px;">我知道了</button>
	    </uni-popup>
	<view class="flex-col page" >
		<view class="flex-col justify-start items-start relative group" @click="goToContact()"> <!-- @click="goToContact()" -->
			<view class="section"></view>
			<text class="font text pos">填写预约信息</text>
			<view class="flex-col section_2 pos_2">
				<view class="flex-row justify-between items-center group_2">
					<view class="flex-row items-center">
						<image class="shrink-0 image"
							src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=8bde7b2f7a6da1a009b89295a48cc8ec.png" />
						<text class="font_2 text_2 ml-7">联系人：张三</text>
						<text class="font_2 text_3 ml-7">15888610253</text>
					</view>
					<image class="image_2"
						src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=10d9d3f5abdae8518f3c6c3fa1bbb544.png" />
				</view>
				<view class="flex-row justify-between items-center group_3">
					<view class="flex-row items-center">
						<image class="image"
							src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=c6dac3074d9c4e4d6286c07f0ea03db5.png" />
						<view class="flex-col items-start ml-9">
							<text class="font_3">到店日期：2024-10-15</text>
							<text class="mt-2 font_3">具体场次：上午场（09:30-12:00）</text>
						</view>
					</view>
					<image class="image_2"
						src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=10d9d3f5abdae8518f3c6c3fa1bbb544.png" />
				</view>
			</view>
		</view>
		<view class="flex-col group_4">
			<text class="self-start font text_4">选择预约类别</text>
			<view class="mt-14 flex-col justify-start self-stretch section_3">
				<view class="flex-row equal-division">
					<view class=" clickable-item " @click="showWhole('0')">
						<image class="image_3"
							src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FQdGvHpRx-paishe.png" />
						<text class="mt-2 font_4 text_5">整套约拍</text>
					</view>
					<view class=" ml-23 clickable-item" @click="showOwn('1')">
						<image class="image_3"
							src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FWJdpNSbl-000.png" />
						<text class="mt-2 font_4">自带服装</text>
					</view>
				</view>
			</view>
		</view>
	<template v-if="zhi === '0'" > 
		<view class="flex-col section_7" >
			<view class="flex-col group_5">
				<text class="self-start font text_6">选择服装价位</text>
				<view class="flex-row items-center self-stretch section_8 view" v-for="(item,index) in Whole" :key="item" @click="goToText(index)" >
					<image :src="item.img" class="shrink-0 image_4"></image>
					<view class="flex-col flex-1 ml-13">
						<view class="self-start font_2 text_7">{{item.name}}</view>
						<view class="flex-row items-baseline self-stretch mt-11">
							<text class="font_2">价位：</text>
							<view class="font_6 text_8 ml-1">￥{{item.price}}</view>
						</view>
						<view class="self-stretch font_7 text_9 mt-11">{{item.title}}</view>
					</view>
					<view class="flex-row shrink-0 ml-21">
						<view class="flex-col justify-start items-center button"><text class="font_5">选择</text></view>
						<image class="ml-8 image_5"
							src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=7d16fc8dfa328fc97ff273ebeab9bc18.png" />
					</view>
				</view>
			</view>
			<view class="flex-col">
				<view class="flex-col group_6">
					<view class="flex-col">
						<text class="self-start font text_15">选择拍摄场景</text>
						<view class="flex-row self-stretch mt-15">
							<view class="flex-row justify-center items-center section_9">
								<image class="image_7"
									src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FDSCeqARd-shinei.png" />
								<text class="ml-16 font_8 text_16">室内</text>
								<checkbox class="ml-16" name="location" value="室内"></checkbox>
							</view>
							<view class="flex-row justify-center items-center section_9 ml-23">
								<image class="image_7"
									src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FgfjDWgWY-shiwai.png" />
								<text class="ml-16 font_8 text_17">室外</text>
								<checkbox class="ml-16" name="location" value="室外"></checkbox>
							</view>
						</view>
					</view>
					<view class="mt-26 flex-row justify-center items-center"  @click="openPopup1">
						<image class="badge"
							src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FkWvkHOaM-0e7d6a68aaa19d61293070fa98a3ae13.png" />
						<text class="ml-4 font_7 text_18">预约须知</text>
					</view>
				</view>
			</view>
		</view>
	</template>
	<template v-if="zhi === '1'" >
		<view class="flex-col section_7">
			<view class="flex-col group_5">
				<text class="self-start font text_6">选择服务</text>
				<view class="flex-row items-center self-stretch section_8 view" v-for="item in Own" :key="item" >
					<image :src="item.img" class="shrink-0 image_4"></image>
					<view class="flex-col flex-1 ml-13">
						<view class="self-start font_2 text_7">{{item.name}}</view>
						<view class="flex-row items-baseline self-stretch mt-11">
							<text class="font_2">价位：</text>
							<view class="font_6 text_8 ml-1">￥{{item.price}}</view>
						</view>
						<view class="self-stretch font_7 text_9 mt-11">{{item.title}}</view>
					</view>
					<view class="flex-row shrink-0 ml-21">
					   <checkbox></checkbox>
					</view>
				</view>
			</view>
			<view class="flex-col">
				<view class="flex-col group_6">
					<view class="flex-col">
						<text class="self-start font text_15">选择拍摄场景</text>
						<view class="flex-row self-stretch mt-15">
							<view class="flex-row justify-center items-center section_9">
								<image class="image_7"
									src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FDSCeqARd-shinei.png" />
								<text class="ml-16 font_8 text_16">室内</text>
								<checkbox class="ml-16" name="location" value="室内"></checkbox>
							</view>
							<view class="flex-row justify-center items-center section_9 ml-23">
								<image class="image_7"
									src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FgfjDWgWY-shiwai.png" />
								<text class="ml-16 font_8 text_17">室外</text>
								<checkbox class="ml-16" name="location" value="室外"></checkbox>
							</view>
						</view>
					</view>
					<view class="flex-row self-stretch section_12">
						<image class="shrink-0 self-center image_66"
							src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FbtvtZqGC-kefu.png" />
						<view class="flex-col shrink-0 self-start group_10">
							<text class="self-start font_2 text_12">联系客服</text>
							<text class="mt-10 self-stretch font_66">请提供详细的问题描述，以便我们更快地为您解决问题。</text>
						</view>
						<image class="shrink-0 self-center image image_77"
							src="https://ide.code.fun/api/image?token=67303857c471750012de63be&name=136eb7cb0ccc86c9685bc319ce005613.png" />
					</view>
					<view class="mt-26 flex-row justify-center items-center"  @click="openPopup1">
						<image class="badge"
							src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FkWvkHOaM-0e7d6a68aaa19d61293070fa98a3ae13.png" />
						<text class="ml-4 font_7 text_18">预约须知</text>
					</view>
				</view>
			</view>
		</view>
	</template>
		<view class="flex-row justify-between items-center section_11">
			<view class="flex-row items-center group_7">
				<view class="flex-col justify-start items-start shrink-0 relative">
					<text class="font_8">定金：</text>
					<image class="image_2 pos_4"
						src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=3393d3563afcfe7dedbadba1ea5328a0.png" />
				</view>
				<text class="font_6 text_19">88.</text>
				<text class="text_21">00</text>
			</view>
			<view class="flex-row items-center">
				<view class="flex-row button_3" @click="openPopup2">
					<text class="text_22">费用说明</text>
					<image class="shrink-0 image_8 ml-3"
						src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=0455b173571a47fdc438588e788f26c5.png" />
				</view>
				<view class="ml-10 flex-col justify-start items-center button_2">
					<text class="font_4 text_20">确定预约</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
const displayItem = ref([])
const Whole = ref([
  {
    img: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FFQDXFHYB-000-2.png',
    name: '简约风尚',
    price: '100-200',
    title: '传承非遗之美，简约演绎经典',
  },
  {
    img: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FdTSYNsqi-000-3.png',
    name: '时尚精选',
    price: '200-400',
    title: '融合时尚与传统，精选非遗划账',
  },
  {
    img: ' https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FDSCaeopg-000-1.png',
    name: '奢华专属',
    price: '400-800',
    title: '非遗匠心独运，奢华专属定制',
  }
])
	const Own = ref([{
			img: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FObQGBPnJ-zhuangfa.png',
			name: '妆发预约',
			price: '20',
			title: '包括底妆，眉毛，眼妆，腮红和唇妆，根据您的肤色和服装风格进行个性化设计'
		},
		{
			img: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FDFNymmCN-sheying.png',
			name: '摄影服务',
			price: '15',
			title: '提供专业的摄影棚和灯光设备，为客户打造舒适的拍摄环境'
		}
	])
const zhi = ref('0')

const showWhole = (zhiValue) => {
  zhi.value = zhiValue
  console.log(zhi.value)
}

const showOwn = (zhiValue) => {
  zhi.value = zhiValue
  console.log(zhi.value)
}

const close1 = () => {
  popup1.value.close()
}
const close2 = () => {
  popup2.value.close()
}

const popup1 = ref(null)
const popup2 = ref(null)
const showPopup1 = ref(false)
const showPopup2 = ref(false)

const openPopup1 = () => {
  showPopup1.value = true;
  popup1.value.open('center');
}

const openPopup2 = () => {
  showPopup2.value = true;
  popup2.value.open('center');
}

const closePopup1 = () => {
  showPopup1.value = false;
}

const closePopup2 = () => {
  showPopup2.value = false;
}
const selectedLocation = ref(null)
const handleFormSubmit = () => {
    selectedLocation.value = null
}
const goToText = (index) =>{
	console.log(index);
	uni.navigateTo({
		url:"/pages/booking/CostumeDisplay/CostumeDisplay?info="
		+ JSON.stringify(Whole.value[index])
	})
}
const goToContact = ()=>{
	uni.navigateTo({
		url:'/pages/mine/Contact/Contact'
	})
}
console.log(Whole.value[1])
</script>

<style lang="scss" scoped>
	.ml-7 {
		margin-left: 13.13rpx;
	}

	.ml-9 {
		margin-left: 16.88rpx;
	}

	.ml-13 {
		margin-left: 24.38rpx;
	}

	.ml-21 {
		margin-left: 39.38rpx;
	}

	.ml-1 {
		margin-left: 1.88rpx;
	}

	.mt-15 {
		margin-top: 28.13rpx;
	}

	.ml-23 {
		margin-left: 43.13rpx;
	}

	.mt-11 {
		margin-top: 20.63rpx;
	}

	.ml-3 {
		margin-left: 5.63rpx;
	}

	.page {
		padding-top: 45rpx;
		background-color: #f5f5dc;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}
    .font_66 {
    	font-size: 22.5rpx;
    	font-family: Open Sans;
    	line-height: 26.25rpx;
    	color: #898989;
    }
	.group {
		padding-top: 11.25rpx;
	}

	.section {
		margin-left: 71.25rpx;
		background-color: #ffffff00;
		border-radius: 18.75rpx;
		width: 281.25rpx;
		height: 281.25rpx;
	}

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

	.text {
		line-height: 27.96rpx;
	}

	.pos {
		position: absolute;
		left: 21.62rpx;
		top: 0;
	}

	.section_2 {
		padding-left: 33.75rpx;
		padding-right: 28.13rpx;
		background-color: #fffef8;
		border-radius: 18.75rpx;
	}

	.pos_2 {
		position: absolute;
		left: 20.63rpx;
		right: 20.63rpx;
		top: 53.63rpx;
	}

	.group_2 {
		padding: 31.88rpx 0 15rpx;
		border-bottom: solid 1.88rpx #e2e0e0;
	}

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

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

	.text_2 {
		line-height: 24rpx;
	}

	.text_3 {
		line-height: 24rpx;
	}

	.image_2 {
		width: 33.75rpx;
		height: 33.75rpx;
	}

	.group_3 {
		padding: 22.5rpx 0 37.5rpx;
	}

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

	.group_4 {
		margin-top: 26.25rpx;
		padding: 0 30rpx;
	}

	.text_4 {
		line-height: 27.69rpx;
	}

	.section_3 {
		padding: 31.88rpx 0;
		background-color: #fffef8;
		border-radius: 18.75rpx;
	}

	.equal-division {
		margin: 0 41.25rpx;
	}

	.section_4 {
		flex: 1 1 281.25rpx;
	}

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

	.font_4 {
		font-size: 30rpx;
		font-family: Inter;
		line-height: 27.75rpx;
		color: #323232;
	}

	.text_5 {
		line-height: 27.99rpx;
	}

	.section_5 {
		position: relative;
		flex: 1 1 281.25rpx;
	}

.clickable-item {
  padding: 15rpx 0 41.25rpx;
  background-color: white;
  border-radius: 18.75rpx;
  height: 281.25rpx;
  flex: 1 1 281.25rpx;
  align-items: center;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  flex-shrink: 0;
}

.clickable-item.selected {
  background-color: #f08b00;
}

.clickable-item.selected::after {
  background-color: #f08b00;
}
	.section_6 {
		background-color: #ffffff99;
		border-radius: 18.75rpx;
		width: 281.25rpx;
		height: 281.25rpx;
	}

	.pos_3 {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.section_7 {
		margin-top: 30rpx;
		padding-bottom: 46.88rpx;
		background-color: #fff3c3;
	}

	.group_5 {
		padding: 30rpx 30rpx 37.5rpx;
	}

	.text_6 {
		line-height: 27.86rpx;
	}

	.section_8 {
		margin-top: 16.88rpx;
		padding: 26.25rpx 26.25rpx 26.25rpx 39.38rpx;
		background-color: #fffef8;
		border-radius: 18.75rpx;
	}

	.view {
		margin-top: 41.25rpx;
	}

	.image_4 {
		border-radius: 9.38rpx;
		width: 118.13rpx;
		height: 151.88rpx;
	}

	.text_7 {
		line-height: 24.26rpx;
	}
	.text_77 {
		line-height: 24.96rpx;
	}
	.font_6 {
		font-size: 33.75rpx;
		font-family: Open Sans;
		line-height: 24.3rpx;
		color: #ff3c3c;
	}

	.text_8 {
		line-height: 24.81rpx;
	}

	.button {
		padding: 7.5rpx 0;
		background-color: #fbb612;
		border-radius: 9.38rpx;
		width: 75rpx;
		height: 37.5rpx;
	}
    .button2 {
    	padding: 7.5rpx 0;
		background-color: #f5f5dc;
    	border-radius: 50rpx;
    	width: 37.5rpx;
    	height: 37.5rpx;
    }
	.font_5 {
		font-size: 22.5rpx;
		font-family: Open Sans;
		line-height: 20.72rpx;
		color: #ffffff;
	}

	.image_5 {
		width: 37.5rpx;
		height: 37.5rpx;
	}

	.text_10 {
		line-height: 24.15rpx;
	}

	.text_12 {
		line-height: 24.81rpx;
	}

	.text-wrapper {
		padding: 7.5rpx 0;
		background-color: #d9d9d9;
		border-radius: 9.38rpx;
		width: 75rpx;
		height: 37.5rpx;
	}

	.text_11 {
		line-height: 20.61rpx;
	}

	.image_6 {
		width: 118.13rpx;
		height: 151.88rpx;
	}
    .image_66 {
    		border-radius: 9.38rpx;
    		width: 93.75rpx;
    		height: 118.13rpx;
    	}
	.text_14 {
		line-height: 24.23rpx;
	}

	.divider {
		margin: 0 22.5rpx;
		background-color: #ff8550;
		height: 1.88rpx;
	}

	.group_6 {
		padding: 22.5rpx 30rpx 0;
	}

	.text_15 {
		line-height: 27.64rpx;
	}

	.section_9 {
		flex: 1 1 322.5rpx;
		padding: 26.25rpx 0;
		background-color: #fffef8;
		border-radius: 18.75rpx;
		height: 153.75rpx;
	}

	.image_7 {
		border-radius: 9.38rpx;
		width: 123.75rpx;
		height: 101.25rpx;
	}
	.image_77 {
		margin-left: 48.75rpx;
	}

	.font_8 {
		font-size: 26.25rpx;
		font-family: Inter;
		line-height: 24.3rpx;
		color: #000000;
	}
    .group_10 {
    	margin-left: 22.5rpx;
    	margin-top: 15rpx;
    	width: 405rpx;
    }
	.text_16 {
		line-height: 24.21rpx;
	}

	.section_10 {
		background-color: #ffffff;
		border-radius: 50%;
		width: 33.75rpx;
		height: 33.75rpx;
		border-left: solid 1.88rpx #c4c4c4;
		border-right: solid 1.88rpx #c4c4c4;
		border-top: solid 1.88rpx #c4c4c4;
		border-bottom: solid 1.88rpx #c4c4c4;
	}

	.text_17 {
		line-height: 24.09rpx;
	}

	.badge {
		width: 28.13rpx;
		height: 28.13rpx;
	}

	.font_7 {
		font-size: 22.5rpx;
		font-family: Open Sans;
		line-height: 20.72rpx;
		color: #8a8a8a;
	}

	.text_13 {
		line-height: 21.38rpx;
	}

	.text_9 {
		line-height: 21.36rpx;
	}

	.text_18 {
		color: #000000;
		line-height: 20.77rpx;
	}

	.section_11 {
		margin-top: 48.75rpx;
		padding: 15rpx 22.5rpx;
		background-color: #fffef8;
	}

	.group_7 {
		width: 180.06rpx;
	}
	.group_77{
		margin-left: 37.5rpx;
	}

	.pos_4 {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.text_19 {
		color: #fbb612;
		font-weight: 700;
		line-height: 24.84rpx;
	}

	.text_21 {
		color: #fbb612;
		font-size: 26.25rpx;
		font-family: Open Sans;
		font-weight: 700;
		line-height: 19.29rpx;
	}

	.button_3 {
		padding: 9.38rpx 11.25rpx;
		background-color: #d9d9d9;
		border-radius: 9.38rpx;
		height: 37.5rpx;
	}

	.text_22 {
		color: #323232;
		font-size: 18.75rpx;
		font-family: Inter;
		line-height: 17.36rpx;
	}

	.image_8 {
		width: 18.75rpx;
		height: 18.75rpx;
	}

	.button_2 {
		padding: 26.25rpx 0;
		background-color: #fbb612;
		border-radius: 75rpx;
		width: 238.13rpx;
		height: 82.5rpx;
	}
	.text_20 {
		color: #ffffff;
	}
    
    .section_12 {
    	margin: 26.25rpx 16.88rpx 0 11.25rpx;
    	padding: 15rpx 26.25rpx;
    	background-color: #fffef8;
    	border-radius: 18.75rpx;
    }
@import url(/common/css/global.css);
</style>