410 lines
9.8 KiB
Vue
410 lines
9.8 KiB
Vue
<template>
|
||
<view class="flex-col page">
|
||
<view class="flex-col group">
|
||
<view class="flex-row self-stretch group_2">
|
||
<image
|
||
class="image_2"
|
||
:src="productObject.goodImg"
|
||
/>
|
||
<view class="flex-col flex-1 self-start ml-15">
|
||
<image
|
||
class="self-end image"
|
||
@click="close()"
|
||
src="./images/cha.png"
|
||
/>
|
||
<view class="flex-col items-start self-stretch mt-58">
|
||
<text class="text">￥99</text>
|
||
<text class="font text_2 mt-14">请选择</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<text class="self-start font_2 text_3 mt-20">当前日期：{{appointmentDateVOList[appIdx].specificDate}}</text>
|
||
<view class="flex-row justify-between items-center self-stretch mt-20">
|
||
<text class="font_2">剩余预约人数：{{ restNumber }}</text>
|
||
<view class="flex-row items-center group_3" @click="openyyxzTip()">
|
||
<image
|
||
class="shrink-0 image"
|
||
src="./images/yyxz.png"
|
||
/>
|
||
<text class="font text_4 ml-3">预约须知</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row equal-division group_4">
|
||
<view class="flex-col items-center section equal-division-item" :style="selectObj[index]" v-for="(item, index) in appointmentDateVOList" :key="index" @click="isSelected(index)">
|
||
<text class="font" :style="fontColor[index]">星期二</text>
|
||
<text class="font_3 mt-12" :style="fontColor[index]">{{item.specificDate.substring(5)}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="flex-col group_5">
|
||
<view class="flex-row list_2 my_grid">
|
||
<view class="flex-col justify-start items-center text-wrapper"
|
||
v-for="(item, index) in appointmentDateVOList[appIdx].timePeriodVOList" :key="index" @click="itemIsSelected(index)" :style="itemSelectObj[appIdx][index]">
|
||
<text class="font_3 text_5" :style="itemFontColor[appIdx][index]">{{item.timeSlot}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="height: 1.88rpx; background-color: #d9d9d9; margin-top: 30rpx; margin-bottom: 20rpx;"></view>
|
||
|
||
<view class="flex-row justify-between items-center group_7">
|
||
<text class="font_2 text_6">数量</text>
|
||
<view class="flex-row">
|
||
<image
|
||
@click="sub"
|
||
class="image_3"
|
||
src="./images/sub.png"
|
||
/>
|
||
<view class="flex-col justify-start items-center text-wrapper_2 ml-4">
|
||
<text class="font_3 text_7">{{cnt}}</text>
|
||
</view>
|
||
<image
|
||
@click="add"
|
||
class="image_4 ml-4"
|
||
src="./images/add.png"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col justify-start items-center text-wrapper_3"><text class="font text_8">下一步</text></view>
|
||
</view>
|
||
|
||
<uni-popup ref="tip" :animation="false" @maskClick="maskClosehandler">
|
||
<view class="pop">
|
||
<tipVue></tipVue>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import tipVue from './tip.vue';
|
||
import {onMounted, ref} from 'vue'
|
||
import emitter from '../../../utils/emitter';
|
||
import { baseUrl } from '../../../api/request';
|
||
|
||
|
||
let selectObj = ref([])
|
||
let fontColor = ref([])
|
||
let itemSelectObj = ref([])
|
||
let itemFontColor = ref([])
|
||
|
||
const cookie = wx.getStorageSync("cookie") //请求头
|
||
const appIdx = ref(0)
|
||
const cnt = ref(1)
|
||
const productObject = ref({})
|
||
const appointmentDateVOList = ref([])
|
||
|
||
let appointmentDate = ''
|
||
let timeSlot = ''
|
||
|
||
|
||
const restNumber = ref('请选择时间段')
|
||
|
||
let countMap = new Map()
|
||
|
||
onMounted(() => {
|
||
closeyyxzTip()
|
||
emitter.on('getGoodData', (val) => {
|
||
productObject.value = val
|
||
appointmentDateVOList.value = val.appointmentDateVOList
|
||
selectObj.value = new Array(appointmentDateVOList.value.length).fill(null).map(() => ({
|
||
backgroundColor: '#fff',
|
||
borderColor: '#C35C5D'
|
||
}));
|
||
fontColor.value = new Array(appointmentDateVOList.value.length).fill(null).map(() => ({
|
||
color: '#323233'
|
||
}))
|
||
|
||
selectObj.value[0] = {backgroundColor: '#FBDEDF', borderColor: '#FBDEDF'}
|
||
fontColor.value[0] = {color: '#C35C5D'}
|
||
|
||
for (var i = 0; i < appointmentDateVOList.value.length; i ++ ) {
|
||
var col = appointmentDateVOList.value[i].timePeriodVOList.length
|
||
itemSelectObj.value[i] = new Array(col).fill(null).map(() => ({
|
||
backgroundColor: '#F3F3F3'
|
||
}))
|
||
itemFontColor.value[i] = new Array(col).fill(null).map(() => ({
|
||
color: '#323233'
|
||
}))
|
||
}
|
||
})
|
||
|
||
emitter.on('getBookingNumberMap', (val:any) => {
|
||
countMap = val
|
||
console.log("==============>", val)
|
||
appointmentDate = appointmentDateVOList.value[appIdx.value].specificDate;
|
||
})
|
||
})
|
||
|
||
|
||
const maskClosehandler = () => {
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
const tip = ref(null)
|
||
|
||
const closeyyxzTip = () => {
|
||
emitter.on('closeyyxzTip', () => {
|
||
tip.value.close()
|
||
})
|
||
}
|
||
|
||
const openyyxzTip = () => {
|
||
tip.value.open()
|
||
}
|
||
|
||
const add = () => {
|
||
if (restNumber.value === '请选择时间段') {
|
||
uni.showToast({
|
||
title: '请选择时间段',
|
||
icon: 'error'
|
||
})
|
||
return ;
|
||
}
|
||
if (cnt.value < Number(restNumber.value)) {
|
||
cnt.value ++
|
||
}
|
||
}
|
||
|
||
const sub = () => {
|
||
if (cnt.value > 1) {
|
||
cnt.value --
|
||
}
|
||
}
|
||
|
||
const close = () => {
|
||
emitter.emit('closeTimeDialog')
|
||
}
|
||
|
||
|
||
const isSelected = (index:any) => {
|
||
appIdx.value = index
|
||
restNumber.value = '请选择时间段'
|
||
appointmentDate = appointmentDateVOList.value[appIdx.value].specificDate;
|
||
console.log('appointmentDate===================================>', appointmentDate)
|
||
for (var i = 0; i < appointmentDateVOList.value.length; i ++ ) {
|
||
if (i == index) {
|
||
selectObj.value[i].backgroundColor = '#FBDEDF'
|
||
selectObj.value[i].borderColor = '#FBDEDF'
|
||
fontColor.value[i].color = '#C35C5D'
|
||
} else {
|
||
selectObj.value[i].backgroundColor = '#fff'
|
||
selectObj.value[i].borderColor = '#C35C5D'
|
||
fontColor.value[i].color = '#323233'
|
||
}
|
||
}
|
||
var col = appointmentDateVOList.value[appIdx.value].timePeriodVOList.length
|
||
for (var i = 0; i < col; i ++ ) {
|
||
itemSelectObj.value[appIdx.value][i].backgroundColor = '#F3F3F3'
|
||
itemFontColor.value[appIdx.value][i].color = '#323233'
|
||
}
|
||
}
|
||
|
||
|
||
const itemIsSelected = (index:any) => {
|
||
timeSlot = appointmentDateVOList.value[appIdx.value].timePeriodVOList[index].timeSlot
|
||
restNumber.value = countMap[appointmentDate + '&' + timeSlot]
|
||
console.log('timeSlot====================================>', timeSlot)
|
||
var col = appointmentDateVOList.value[appIdx.value].timePeriodVOList.length
|
||
for (var i = 0; i < col; i ++ ) {
|
||
if (i == index) {
|
||
itemSelectObj.value[appIdx.value][i].backgroundColor = '#FBDEDF'
|
||
itemFontColor.value[appIdx.value][i].color = '#C35C5D'
|
||
} else {
|
||
itemSelectObj.value[appIdx.value][i].backgroundColor = '#F3F3F3'
|
||
itemFontColor.value[appIdx.value][i].color = '#323233'
|
||
}
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.ml-15 {
|
||
margin-left: 28.13rpx;
|
||
}
|
||
.ml-3 {
|
||
margin-left: 5.63rpx;
|
||
}
|
||
.mt-91 {
|
||
margin-top: 170.63rpx;
|
||
}
|
||
.page {
|
||
padding: 0 20.63rpx 48.75rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 37.5rpx 37.5rpx 0rpx 0rpx;
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
height: 100%;
|
||
}
|
||
.group {
|
||
padding: 30rpx 0 22.5rpx;
|
||
border-bottom: solid 1.88rpx #d9d9d9;
|
||
}
|
||
.group_2 {
|
||
padding-left: 18.75rpx;
|
||
padding-right: 16.88rpx;
|
||
}
|
||
.image_2 {
|
||
margin-top: 7.5rpx;
|
||
border-radius: 5.63rpx;
|
||
width: 221.25rpx;
|
||
height: 232.5rpx;
|
||
}
|
||
.image {
|
||
width: 37.5rpx;
|
||
height: 37.5rpx;
|
||
}
|
||
.text {
|
||
margin-left: 6.92rpx;
|
||
color: #c35c5d;
|
||
font-size: 37.5rpx;
|
||
font-family: Open Sans;
|
||
line-height: 27.52rpx;
|
||
}
|
||
.font {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 23.94rpx;
|
||
color: #323233;
|
||
}
|
||
.text_2 {
|
||
line-height: 24.21rpx;
|
||
}
|
||
.font_2 {
|
||
font-size: 30rpx;
|
||
font-family: Open Sans;
|
||
line-height: 27.71rpx;
|
||
color: #323233;
|
||
}
|
||
.text_3 {
|
||
margin-left: 3.45rpx;
|
||
line-height: 27.86rpx;
|
||
}
|
||
.group_3 {
|
||
margin-right: 20.57rpx;
|
||
}
|
||
.text_4 {
|
||
color: #000000;
|
||
line-height: 24.23rpx;
|
||
}
|
||
.equal-division {
|
||
margin-top: 43.13rpx;
|
||
}
|
||
.group_4 {
|
||
border-bottom: solid 1.88rpx #d9d9d9;
|
||
padding-bottom: 40rpx;
|
||
-webkit-overflow-scrolling: touch; /* 使滚动更加平滑 */
|
||
margin: 30rpx auto;
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
|
||
.group_4::-webkit-scrollbar {
|
||
display: none; /* 隐藏滚动条 */
|
||
}
|
||
|
||
.section {
|
||
width: 150rpx;
|
||
margin: 0 15rpx;
|
||
}
|
||
.equal-division-item {
|
||
padding: 17.51rpx 0 20.49rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 5.63rpx;
|
||
height: 106.88rpx;
|
||
border: solid 1.88rpx #c35c5d;
|
||
}
|
||
.font_3 {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 19.29rpx;
|
||
color: #323233;
|
||
}
|
||
.group_5 {
|
||
padding: 0 0 58.13rpx;
|
||
}
|
||
.list_2 {
|
||
margin-right: 3.77rpx;
|
||
// border-bottom: solid 1.88rpx #d9d9d9;
|
||
}
|
||
|
||
.list_2::-webkit-scrollbar {
|
||
display: none; /* 隐藏滚动条 */
|
||
}
|
||
|
||
.my_grid{
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
grid-template-rows: repeat(3, 1fr);
|
||
row-gap: 20rpx;
|
||
column-gap: 40rpx;
|
||
overflow-y: auto;
|
||
height: 350rpx;
|
||
}
|
||
|
||
.text-wrapper {
|
||
padding: 39.09rpx 0 35.25rpx;
|
||
background-color: #f3f3f3;
|
||
border-radius: 5.63rpx;
|
||
height: 93.75rpx;
|
||
width: 200rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.text_5 {
|
||
line-height: 19.41rpx;
|
||
}
|
||
.group_7 {
|
||
padding: 28.13rpx 3.75rpx 0 11.32rpx;
|
||
position: fixed;
|
||
bottom: 180rpx;
|
||
left: 30rpx;
|
||
right: 30rpx;
|
||
}
|
||
.text_6 {
|
||
color: #323232;
|
||
}
|
||
.image_3 {
|
||
border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
|
||
width: 46.88rpx;
|
||
height: 46.88rpx;
|
||
}
|
||
.text-wrapper_2 {
|
||
padding: 15.02rpx 0 13.13rpx;
|
||
background-color: #f3f3f3;
|
||
width: 46.88rpx;
|
||
height: 46.88rpx;
|
||
}
|
||
.text_7 {
|
||
color: #323232;
|
||
line-height: 18.73rpx;
|
||
}
|
||
.image_4 {
|
||
border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
|
||
width: 46.88rpx;
|
||
height: 46.88rpx;
|
||
}
|
||
.text-wrapper_3 {
|
||
width: 600rpx;
|
||
padding: 24.82rpx 0 27.84rpx;
|
||
background-color: #fbdedf;
|
||
border-radius: 37.5rpx;
|
||
position: fixed;
|
||
bottom: 50rpx;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
}
|
||
.text_8 {
|
||
color: #c35c5d;
|
||
line-height: 24.21rpx;
|
||
}
|
||
@import url(../../../common/css/global.css);
|
||
</style> |