419 lines
10 KiB
Vue
419 lines
10 KiB
Vue
<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) => { //选中后要改变颜色和切换
|
||
console.log(textColor.value[index]);
|
||
textColor.value[index] = '#C35C5D'
|
||
}
|
||
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>
|