jiangchengfeiyi-xiaochengxu/pages/workshop/component/timePopUp.vue

<template>
<view class="flex-col page">
  <view class="flex-col self-stretch">
    <view class="flex-col self-stretch group">
      <view class="flex-row justify-between group_2">
        <view class="flex-row items-end group_3">
          <image class="image-wrapper" :src="productInfo.goodImg"></image>
          <view class="flex-col items-start relative group_5 ml-13">
            <view class="group_6">
              <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">最大人数：0</text>
            <!-- <text class="font_2 pos">场次</text> -->
          </view>
        </view>
        <view class="flex-col group_4">
          <image
            class="self-end image_2"
            src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FTZQhzAYT-close.png"
          />
          <view class="flex-row self-stretch mt-63">
            <image
              class="image_3"
              src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FnKMzaToH-short.png"
							@click="short()"
            />
            <view class="flex-col justify-start items-center text-wrapper ml-2"><text class="text_4">{{ classNum }}</text></view>
            <image
              class="image_4 ml-2"
              src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FhvzZoTdm-add.png"
							@click="add()"
            />
          </view>
        </view>
      </view>
      <view class="flex-row justify-between items-center section">
        <text class="font text_5">参加日期：{{ selected.date }}</text>
        <text class="font_2 text_6">当前预约人数：10</text>
      </view>
    </view>
    <view class="self-stretch divider view"></view>
    <text class="self-start font_3 text_7">选择预约时间</text>
    <view class="section_1">
			<scroll-view scroll-x="true">
				<view class="flex-row items-baseline group_1">
					<text :style="{ color: item.color }" class="font_4 text_8" v-for="(item, index) in bookTimeList" :key="index" @click="chooseDate(index)">
						{{ weekDay(item.specificDate) }}{{ item.specificDate.substring(5,10) }}
					</text>
				</view>
			</scroll-view>
    </view>
  </view>
  <view class="flex-row justify-start self-center grid">
		<!-- 时间段数组小于等于2的情况 -->
		<view class="flex-1 list_temp" v-if="timeSlotList.length <= 2">
		  <view class="flex-col justify-start relative" v-for="(item, index) in timeSlotList" :key="index" @click="chooseTimeSlot(index)">
		    <view :style="{ backgroundColor: item.color }" class="section_3" ></view>
		    <text class="font_5 text_12 pos_temp3">{{ item.timeSlot }}</text>
		    <text class="font_3 pos_temp5">可预约</text>
		  </view>
		</view>
		<!-- 时间段数组大于三才显示 -->
    <view class="flex-1 list_2" v-if="timeSlotList.length >= 3">
      <view class="flex-col justify-start relative" v-for="(item, index) in timeSlotList" :key="index" @click="chooseTimeSlot(index)">
        <view class="section_3" :style="{ backgroundColor: item.color }"></view>
        <text class="font_5 text_12 pos_3">{{ item.timeSlot }}</text>
				<!-- 缺当前预约人数 -->
        <text class="font_3 pos_5">可预约</text>
      </view>
    </view>
  </view>
  <view class="flex-col self-stretch group_7">
    <view class="flex-row justify-between section_4">
      <text class="font_3 text_13">预约时间</text>
      <text class="font_3 text_14">{{ selected.date }}&nbsp;{{ selected.time }}</text>
    </view>
    <view class="divider mt-9"></view>
  </view>
  <view class="flex-col items-start self-center section_5">
    <text class="font_6">购买须知：本次课程活动最少需要到达5人才</text>
    <text class="font_6 text_1">能进行授课</text>
  </view>
  <view class="flex-col justify-start items-center self-stretch section_6">
    <view class="flex-row section_7">
      <text class="font_4 text_15">加入购物车</text>
      <!-- <text class="font_4 text_16 ml-21">买</text> -->
    </view>
  </view>
</view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app";
import { baseUrl } from '../../../api/request';
import { weekDay } from '../../../common/global';
const cookie = wx.getStorageSync("cookie")  //请求头
const father = defineProps(['pid'])
const pid = ref(0)  //商品id
const productInfo = ref({})  //商品对象
const bookTimeList = ref([])  //日期数组
const timeSlotList = ref([])  //时间段数组
const selected = ref({  //选中的日期+时间
	date: '',
	time: '',
	minNum: 0,
	maxNum: 0
})
const classNum = ref(1) //课程数量
const flag = ref(0)
onLoad((options)=>{
})
onMounted( async ()=>{
	await getProduct()
	//每次加载都先选第一个
	await chooseDate(0)
	await chooseTimeSlot(0) 
})
const chooseDate = (index) => {  //选中后要改变颜色和切换日期
	selected.value.date = bookTimeList.value[index].specificDate
	selected.value.time = ''
	classNum.value = 1 //切换了时间就初始化
	bookTimeList.value.forEach((item)=>{
		if(item != bookTimeList.value[index]) {
			item.color = '#000000'
		} else {
			bookTimeList.value[index].color = '#C35C5D'
		}
	})
	timeSlotList.value = bookTimeList.value[index].timePeriodVOList  //将当前日期下的时间段赋值
	console.log('选中下日期时间段--->',bookTimeList.value[index].timePeriodVOList);
}
const chooseTimeSlot =(index) => {  //选中后要改变颜色和切换时间段
	selected.value.time = timeSlotList.value[index].timeSlot
	selected.value.maxNum = timeSlotList.value[index].maxNumber
	classNum.value = 1 //切换了时间就初始化
	timeSlotList.value.forEach((item)=>{
		if(item != timeSlotList.value[index]) {
			item.color = '#FFFFFF'
		} else {
			item.color = '#FBDEDF'
		}
	})
}
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);
}
const short =()=> {  //减少购买课程数量
	if( selected.value.maxNum === 0 ) {
		uni.showToast({
			icon: 'error',
			title: '请先选择时间段',
			duration: 1000
		})
		return;
	}
	if(classNum.value > 1) {
		classNum.value -= 1
	}
}
const add =()=> {  //传入当前课程最大人数
	if( selected.value.maxNum === 0 ) {
		uni.showToast({
			icon: 'error',
			title: '请先选择时间段',
			duration: 1000
		})
		return;
	}
	if(classNum.value < selected.value.maxNum) {
		classNum.value += 1
	}
}
</script>

<style lang="scss" scoped>
.ml-13 {
  margin-left: 24.38rpx;
}
.mt-63 {
  margin-top: 118.13rpx;
}
.mt-9 {
  margin-top: 16.88rpx;
}
.ml-21 {
  margin-left: 39.38rpx;
}
.page {
  padding-top: 28.13rpx;
  background-color: #ffffff;
  border-radius: 37.5rpx 37.5rpx 0rpx 0rpx;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  padding-bottom: 9.38rpx;
}
.group_2 {
  padding: 0 30rpx;
}
.group_3 {
  margin-bottom: 5.01rpx;
}
.image-wrapper {
  border-radius: 5.63rpx;
  // background-image: url('https://ide.code.fun/api/image?token=677b3b47797f850011f57419&name=f41b64b57071affd8eecfaa15a455af2.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 195rpx;
  height: 204.38rpx;
}
.group_5 {
  margin-bottom: 5.29rpx;
  padding-bottom: 48.86rpx;
  width: 157.8rpx;
}
.group_6 {
  margin-left: 17.51rpx;
  line-height: 29.7rpx;
}
.font {
  font-size: 37.5rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
}
.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;
}
.group_4 {
  margin-top: 5.63rpx;
  width: 176.25rpx;
}
.image_2 {
  margin-right: 20.63rpx;
  width: 37.5rpx;
  height: 37.5rpx;
}
.image_3 {
  border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
  width: 45.21rpx;
  height: 48.13rpx;
}
.text-wrapper {
  padding: 14.74rpx 0 14.66rpx;
  background-color: #ffffff;
  width: 58.41rpx;
  height: 48.13rpx;
}
.text_4 {
  color: #323232;
  font-size: 26.25rpx;
  font-family: Open Sans;
  line-height: 18.73rpx;
}
.image_4 {
  border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
  width: 45.21rpx;
  height: 48.13rpx;
}
.section {
  padding: 30.53rpx 21.86rpx 30.36rpx;
  background-color: #ffffff;
  border-radius: 28.13rpx;
}
.text_5 {
  color: #000000;
  line-height: 36.62rpx;
}
.text_6 {
  margin-right: 16.14rpx;
  line-height: 25.43rpx;
}
.divider {
  background-color: #d9d9d9;
  height: 1.88rpx;
}
.view {
  margin-left: 20.63rpx;
  margin-right: 26.27rpx;
}
.font_3 {
  font-size: 30rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 27.07rpx;
  color: #000000;
}
.text_7 {
  margin-left: 29.31rpx;
  margin-top: 29.89rpx;
  line-height: 28.01rpx;
}
.section_1 {
	padding: 30rpx 0;
	background-color: #FBDEDF;
	border-radius: 10rpx;
  align-self: stretch;
  margin: 26.47rpx 28.13rpx 0 28.13rpx;
}
.group_1 {
  margin-left: 11.78rpx;
  margin-right: 14.83rpx;
}
.font_4 {
  // font-size: 30rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 27.07rpx;
  color: #000000;
}
.text_8 {
  line-height: 27.3rpx;
	margin-left: 30rpx;
}
.grid {
  margin-top: 60rpx;
  width: 605.63rpx;
}
.list_2 {
  height: 228.75rpx;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 54rpx;
  column-gap: 102rpx;
	overflow-y: auto;
	overflow-x: hidden;
}
//处理时间段数组长度小于2的情况
.list_temp {
	height: 105.75rpx;
	display: grid;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	grid-template-columns: repeat(2, minmax(0, 1fr));
	row-gap: 54rpx;
	column-gap: 102rpx;
	overflow-y: auto;
	overflow-x: hidden;
}
.pos_temp3 {
	position: absolute;
	left: 50%;
	top: 52.99rpx;
	transform: translateX(-50%);
}
.pos_temp5 {
	position: absolute;
	left: 74.53rpx;
	bottom: -14.94rpx;
}
.group_temp7 {
  margin-top: 97.5rpx;
  padding: 0 22.5rpx;
}
//到这里结束
.section_3 {
  background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FkDkwyiFc-border.png');
  background-color: #ffffff;
	border-radius: 26rpx;
	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_12 {
  width: 150rpx;
}
.pos_3 {
  position: absolute;
  left: 50%;
  top: 16.99rpx;
  transform: translateX(-50%);
}
.pos_5 {
  position: absolute;
  left: 74.53rpx;
  bottom: 12.06rpx;
}
.group_7 {
  margin-top: 60rpx;
  padding: 0 22.5rpx;
}
.section_4 {
  margin-left: 20.63rpx;
  margin-right: 9.38rpx;
  // padding: 12.66rpx 13.54rpx 76.65rpx 16.29rpx;
  background-color: #ffffff;
}
.text_13 {
  line-height: 28.01rpx;
}
.text_14 {
  line-height: 28.84rpx;
}
.section_5 {
	margin: 54.38rpx 0 100rpx 0;
  padding: 32.23rpx 10.56rpx 91.29rpx 17.57rpx;
  background-color: #fff2f2f5;
  border-radius: 18.75rpx;
}
.font_6 {
  font-size: 30rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 35.63rpx;
  color: #323232;
}
.text_1 {
  margin-left: 2.12rpx;
}
.section_6 {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
  // margin-left: 15rpx;
  // margin-top: 88.13rpx;
  padding: 16.88rpx 0;
}
.section_7 {
  padding: 26.14rpx 0 25.07rpx;
  background-color: #fbdedf;
  border-radius: 46.88rpx;
  width: 618.75rpx;
}
.text_15 {
  // margin-left: 260.94rpx;
	margin: 0 auto;
  line-height: 27.54rpx;
}
.text_16 {
  line-height: 27.54rpx;
}
.text_8:first-child {
	margin-left: 0rpx;
}
@import url(../../../common/css/global.css);
</style>