From 8b8342b0b237bb92db9240de1c3d1793a1f32e54 Mon Sep 17 00:00:00 2001
From: yuanteng0011 <1876787513@qq.com>
Date: Thu, 12 Dec 2024 10:14:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=8B=E7=BC=A9=E6=95=B4=E5=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/workshop/component/timePopUp.vue | 415 +++++++++++++++++++++++++
 1 file changed, 415 insertions(+)
 create mode 100644 pages/workshop/component/timePopUp.vue

diff --git a/pages/workshop/component/timePopUp.vue b/pages/workshop/component/timePopUp.vue
new file mode 100644
index 0000000..e1fd091
--- /dev/null
+++ b/pages/workshop/component/timePopUp.vue
@@ -0,0 +1,415 @@
+<template>
+	<view class="flex-col justify-start page">
+	  <view class="flex-col section">
+	    <view class="flex-row justify-between group">
+	      <view class="flex-row items-end">
+	        <image
+	          class="image"
+	          :src="productInfo.goodImg"
+	        />
+	        <view class="flex-col items-start relative group_2 ml-13">
+	          <view class="group_3">
+	            <text class="font text_2">￥</text>
+	            <text class="text">{{ productInfo.price }}</text>
+	          </view>
+	          <text class="font_2 text_3">请选择</text>
+	          <!-- <text class="font_2 pos_2">数量：20</text> -->
+	          <text class="font_2 pos">场次</text>
+	        </view>
+	      </view>
+	      <image
+	        class="self-start image_2"
+	        src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FTZQhzAYT-close.png"
+	      />
+	    </view>
+	    <view class="flex-col mt-2">
+	      <view class="flex-col">
+	        <view class="flex-row justify-between items-center section_2">
+	          <text class="font text_4">参加日期：2024年11月</text>
+	          <text class="font_2 text_5">当前预约人数：10</text>
+	        </view>
+	        <view class="flex-col group_4 mt-5">
+	          <view class="flex-col self-stretch group_5"> 
+	            <text class="self-start font_3 text_6">选择预约时间</text>
+	            <view class="flex-col justify-start self-stretch view mt-14">
+	              <scroll-view class="group_10" :scroll-x="true">
+	                <view class="flex-row justify-between items-baseline">
+	                  <text :style="{color: textColor[index]}" class="font_4 text_7" v-for="(item, index) in items" :key="index" @click="choose(index)">
+											今天12-09
+										</text>
+	                </view>
+	              </scroll-view>
+	            </view>
+	          </view>
+	          <view class="flex-row self-center relative grid">
+	            <view class="flex-col justify-start grid-item pos_1">
+	              <view class="section_4"></view>
+	              <text class="font_5 text_11 pos_3">10:00-12:00</text>
+	              <text class="font_3 pos_5">可预约</text>
+	            </view>
+	            <view class="flex-col justify-start grid-item_2 pos_14">
+	              <view class="section_4"></view>
+	              <text class="font_5 pos_4">12:00-14:00</text>
+	              <text class="font_3 pos_6">可预约</text>
+	            </view>
+	            <view class="flex-col justify-start items-center grid-item_3 pos_15">
+	              <text class="font_3">可预约</text>
+	              <view class="flex-col justify-start items-center text-wrapper pos_7">
+	                <text class="font_5">14:00-16:00</text>
+	              </view>
+	            </view>
+	            <view class="flex-col justify-start grid-item_2 pos_11">
+	              <view class="section_4"></view>
+	              <text class="font_5 pos_8">16:00-18:00</text>
+	              <text class="font_3 pos_9">可预约</text>
+	            </view>
+	          </view>
+	          <view class="flex-col justify-start self-stretch group_6">
+	            <view class="flex-row justify-between section_5">
+	              <text class="font_3 text_12">预约时间</text>
+	              <view class="flex-row items-center group_7">
+	                <text class="font_5">2024-12-09</text>
+	                <text class="font_5 ml-22">暂未选择</text>
+	              </view>
+	            </view>
+	          </view>
+	          <view class="flex-col items-start self-stretch section_6">
+	            <text class="font">购买须知：本次课程活动最少需要到</text>
+	            <text class="font">达5人才能进行授课</text>
+	          </view>
+	        </view>
+	      </view>
+	      <view class="flex-col justify-start items-center section_7">
+	        <view class="flex-row section_8">
+	          <text class="font_4 text_13">加入购物车</text>
+	          <!-- <text class="font_4 text_14 ml-21">买</text> -->
+	        </view>
+	      </view>
+	    </view>
+	  </view>
+	</view>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { onLoad } from "@dcloudio/uni-app";
+import { baseUrl } from '../../../api/request';
+const cookie = wx.getStorageSync("cookie")  //请求头
+const items = ref([null,null,null,null,null,null,null])
+const father = defineProps(['pid'])
+const pid = ref(0)  //商品id
+const productInfo = ref({})  //商品对象
+const bookTimeList = ref([])  //时间段数组
+const textColor = ref(['#000', '#000', '#000', '#000', '#000', '#000', '#000'])
+onLoad((options)=>{
+})
+onMounted(()=>{
+	// console.log('onMounted--->',father.pid);
+	getProduct()
+})
+const choose =(index)=>{}
+const getProduct = async ()=>{
+	pid.value = father.pid  //父组件传来的商品id
+	const res = await uni.request({
+		url: baseUrl + '/goods/service/list/id',
+		method: 'POST',
+		data:{ id: pid.value },
+		header: { cookie }
+	})
+	console.log('后端传来的商品信息--->',res.data.data);
+	if(res.data.code === 1 ) {
+		productInfo.value = res.data.data
+		bookTimeList.value = res.data.data.appointmentDateVOList 
+	}
+	console.log('商品信息--->',productInfo.value);
+	console.log('时间段信息--->',bookTimeList.value);
+}
+</script>
+
+<style lang="scss" scoped>
+.ml-13 {
+  margin-left: 24.38rpx;
+}
+.mt-5 {
+  margin-top: 9.38rpx;
+}
+.ml-21 {
+  margin-left: 39.38rpx;
+}
+.page {
+  padding-bottom: 18.75rpx;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+}
+.section {
+  padding: 28.13rpx 0;
+  background-color: #ffffff;
+  border-radius: 37.5rpx 37.5rpx 0rpx 0rpx;
+}
+.group {
+  padding: 0 30rpx;
+}
+.image {
+  border-radius: 5.63rpx;
+  width: 195rpx;
+  height: 204.38rpx;
+}
+.group_2 {
+  margin-bottom: 5.29rpx;
+  padding-bottom: 28.86rpx;
+  width: 157.8rpx;
+}
+.group_3 {
+  margin-left: 17.51rpx;
+  line-height: 29.7rpx;
+}
+.font {
+  font-size: 37.5rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 45rpx;
+  color: #323232;
+}
+.text_2 {
+  color: #c35c5d;
+  line-height: 24.17rpx;
+}
+.text {
+  color: #c35c5d;
+  font-size: 45rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 29.7rpx;
+}
+.font_2 {
+  font-size: 26.25rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 31.88rpx;
+  color: #818181;
+}
+.text_3 {
+  margin-top: 21.26rpx;
+}
+.pos_2 {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+.pos {
+  position: absolute;
+  right: 0;
+  bottom: 28.03rpx;
+}
+.image_2 {
+  margin-right: 20.63rpx;
+  margin-top: 5.63rpx;
+  width: 37.5rpx;
+  height: 37.5rpx;
+}
+.section_2 {
+  padding: 30.53rpx 21.86rpx 30.36rpx;
+  background-color: #ffffff;
+  border-radius: 28.13rpx;
+}
+.text_4 {
+  color: #000000;
+  line-height: 36.62rpx;
+}
+.text_5 {
+  margin-right: 16.14rpx;
+  line-height: 25.43rpx;
+}
+.group_4 {
+  padding: 0 20.63rpx 35.63rpx;
+}
+.group_5 {
+  padding: 31.76rpx 7.5rpx 0;
+  border-top: solid 1.88rpx #d9d9d9;
+}
+.font_3 {
+  font-size: 30rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 27.07rpx;
+  color: #000000;
+}
+.text_6 {
+  line-height: 28.01rpx;
+}
+.view {
+  margin-right: 7.5rpx;
+  padding: 35.98rpx 0 35.87rpx 20rpx;
+  background-color: #faddde;
+  border-radius: 18.75rpx;
+}
+.group_10 {
+  // margin-left: 11.78rpx;
+  margin-right: 14.83rpx;
+}
+.font_4 {
+  font-size: 30rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 27.07rpx;
+  color: #c35c5d;
+}
+.text_7 {
+	// border: 1px solid red;
+	margin-right: 20rpx;
+  line-height: 27.3rpx;
+}
+.grid {
+  margin-top: 75rpx;
+  width: 605.63rpx;
+  height: 228.75rpx;
+}
+.grid-item {
+  background-color: #fbdedf;
+  border-radius: 18.75rpx;
+  background-image: url('https://ide.code.fun/api/image?token=67582be6797f850011f1edb7&name=5f9759dd4fc5b6049913f513ad7248f2.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 253.13rpx;
+}
+.pos_1 {
+  position: absolute;
+  left: 3.75rpx;
+  top: 0;
+}
+.section_4 {
+  background-image: url('https://ide.code.fun/api/image?token=67582be6797f850011f1edb7&name=5f9759dd4fc5b6049913f513ad7248f2.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  height: 90rpx;
+}
+.font_5 {
+  font-size: 30rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 20.04rpx;
+  color: #000000;
+}
+.text_11 {
+  width: 150rpx;
+}
+.pos_3 {
+  position: absolute;
+  left: 50%;
+  top: 16.99rpx;
+  transform: translateX(-50%);
+}
+.pos_5 {
+  position: absolute;
+  left: 74.53rpx;
+  bottom: 12.06rpx;
+}
+.grid-item_2 {
+  background-color: #ffffff;
+  border-radius: 18.75rpx;
+  background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVQSWQJrq-selectbox.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 253.13rpx;
+}
+.pos_14 {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.pos_4 {
+  position: absolute;
+  right: 42.83rpx;
+  top: 20.74rpx;
+}
+.pos_6 {
+  position: absolute;
+  left: 50%;
+  bottom: 13.93rpx;
+  transform: translateX(-50%);
+}
+.grid-item_3 {
+  padding: 54.62rpx 0 8.31rpx;
+  background-color: #ffffff;
+  border-radius: 18.75rpx;
+  width: 253.13rpx;
+}
+.pos_15 {
+  position: absolute;
+  left: 0;
+  top: 138.75rpx;
+}
+.text-wrapper {
+  padding: 22.61rpx 0 47.34rpx;
+  background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVQSWQJrq-selectbox.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 256.88rpx;
+}
+.pos_7 {
+  position: absolute;
+  left: 3.75rpx;
+  right: -7.5rpx;
+  top: 0;
+}
+.pos_11 {
+  position: absolute;
+  right: 0;
+  top: 138.75rpx;
+}
+.pos_8 {
+  position: absolute;
+  right: 39.67rpx;
+  top: 18.86rpx;
+}
+.pos_9 {
+  position: absolute;
+  left: 50%;
+  bottom: 8.31rpx;
+  transform: translateX(-50%);
+}
+.group_6 {
+  margin-top: 97.5rpx;
+  padding-bottom: 9.38rpx;
+  border-bottom: solid 1.88rpx #d9d9d9;
+}
+.section_5 {
+  margin-left: 22.5rpx;
+  margin-right: 11.27rpx;
+  padding: 12.66rpx 14.42rpx 27.9rpx;
+  background-color: #ffffff;
+}
+.text_12 {
+  line-height: 28.01rpx;
+}
+.group_7 {
+  margin-right: 13.74rpx;
+}
+.section_6 {
+  margin: 43.13rpx 46.88rpx 0 41.25rpx;
+  padding: 25.28rpx 6.62rpx 38.19rpx 12.13rpx;
+  background-color: #fff2f2f5;
+  border-radius: 18.75rpx;
+}
+.section_7 {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	// border: 1px solid red;
+  margin-left: 7.5rpx;
+  margin-right: 5.63rpx;
+  padding: 16.88rpx 0;
+  background-color: #ffffff;
+}
+.section_8 {
+  padding: 26.14rpx 0 25.07rpx;
+  background-color: #fbdedf;
+  border-radius: 46.88rpx;
+  width: 618.75rpx;
+}
+.text_13 {
+  margin-left: 240.94rpx;
+  line-height: 27.54rpx;
+}
+.text_14 {
+  line-height: 27.54rpx;
+}
+@import url(../../../common/css/global.css);
+</style>