484 lines
12 KiB
Vue
484 lines
12 KiB
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 }} {{ 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>
|