|
|
@@ -1,5 +1,20 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
+ <view>
|
|
|
+ <Detiles></Detiles>
|
|
|
+ <up-card
|
|
|
+ title="服务描述"
|
|
|
+ :thumb="thumb"
|
|
|
+ :head-style="{ height: '80rpx', padding: '20rpx' }"
|
|
|
+ >
|
|
|
+ <template #body>
|
|
|
+ <view class="service-description-container">
|
|
|
+ <view class="service-text">{{ listData.businessDescribe }}</view>
|
|
|
+ <view class="service-price">¥{{ listData.businessPrice }}</view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </up-card>
|
|
|
+ </view>
|
|
|
<view>
|
|
|
<up-card
|
|
|
title="志愿者介绍"
|
|
|
@@ -38,16 +53,6 @@
|
|
|
</template>
|
|
|
</up-card>
|
|
|
|
|
|
- <up-card
|
|
|
- title="服务描述"
|
|
|
- :thumb="thumb"
|
|
|
- :head-style="{ height: '80rpx', padding: '20rpx' }"
|
|
|
- >
|
|
|
- <template #body>
|
|
|
- {{ listData.businessDescribe }}
|
|
|
- </template>
|
|
|
- </up-card>
|
|
|
-
|
|
|
<up-card
|
|
|
title="技能介绍"
|
|
|
:thumb="thumb"
|
|
|
@@ -109,14 +114,18 @@
|
|
|
<up-text type="info" text="家庭教育"></up-text>
|
|
|
</view>
|
|
|
<view class="Wrap-info">
|
|
|
- <text style="margin-left: 10rpx">服务次数：</text>
|
|
|
- <up-number-box :modelValue="singleQuantity" :min="listData.minQuantity" @change="valChange"></up-number-box>
|
|
|
+ <text style="margin-left: 10rpx">服务次数：</text>
|
|
|
+ <up-number-box
|
|
|
+ :modelValue="singleQuantity"
|
|
|
+ :min="listData.minQuantity"
|
|
|
+ @change="valChange"
|
|
|
+ ></up-number-box>
|
|
|
</view>
|
|
|
|
|
|
<view class="Wrap-info">
|
|
|
- <text style="margin-left: 10rpx">购买规格：</text>
|
|
|
- <view>{{ listData.projectTypeName + listData.minQuantity }}</view>
|
|
|
- </view>
|
|
|
+ <text style="margin-left: 10rpx">购买规格：</text>
|
|
|
+ <view>{{ listData.projectTypeName + listData.minQuantity }}</view>
|
|
|
+ </view>
|
|
|
<view class="Wrap-content3">
|
|
|
<text style="margin-left: 15rpx">服务周期:</text>
|
|
|
<view style="margin-top: 25rpx">
|
|
|
@@ -130,7 +139,7 @@
|
|
|
<view>
|
|
|
<its-calendar
|
|
|
v-if="show"
|
|
|
- ref="itsCalendarRef"
|
|
|
+ ref="itsCalendarRef"
|
|
|
:businessDuration="listData.businessDuration"
|
|
|
:minQuantity="singleQuantity"
|
|
|
:timeArr="doorToDoorTimeArr"
|
|
|
@@ -329,10 +338,11 @@ import {
|
|
|
import itsCalendar from '@/components/its-calendar/its-calendar.vue'
|
|
|
import uniDatetimePickerMy from '@/uni_modules/lic-uni-datetime-picker/components/lic-uni-datetime-picker/lic-uni-datetime-picker.vue'
|
|
|
import addressComponent from '@/pages_home/components/volunteerData/adresss.vue'
|
|
|
+import Detiles from './detiles.vue'
|
|
|
|
|
|
-const src = ref(
|
|
|
- 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
|
|
|
-)
|
|
|
+// const src = ref(
|
|
|
+// 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
|
|
|
+// )
|
|
|
const itsCalendarRef = ref(null)
|
|
|
const businessPrice = ref() //价格
|
|
|
const singleQuantity = ref(1) // 购买次数，默认为1，不可为0
|
|
|
@@ -356,9 +366,9 @@ const radiovalue1 = ref(null)
|
|
|
const selectedAddress = ref(null)
|
|
|
const addressFlag = ref(false)
|
|
|
const paymentMethod = ref(null) // Add payment method ref with default value 1 (wallet)
|
|
|
+const addressInfo = ref(null)
|
|
|
+const value = ref(1) // 将在onLoad中更新为listData.minQuantity
|
|
|
|
|
|
-const addressInfo = ref(null)
|
|
|
-const value = ref(1); // 将在onLoad中更新为listData.minQuantity
|
|
|
// Radio 单选框数据
|
|
|
const radiolist1 = reactive([
|
|
|
{
|
|
|
@@ -474,7 +484,7 @@ onLoad(async (options) => {
|
|
|
})
|
|
|
|
|
|
listData.value = res.data || {}
|
|
|
-
|
|
|
+
|
|
|
// 更新步进器的初始值为listData中的minQuantity
|
|
|
value.value = listData.value.minQuantity || 1
|
|
|
businessPrice.value = listData.value.businessPrice || 0
|
|
|
@@ -483,36 +493,37 @@ onLoad(async (options) => {
|
|
|
|
|
|
// 添加步进器值变化处理函数
|
|
|
const valChange = (obj) => {
|
|
|
- const durationMs = listData.value.businessDuration * obj.value * 60;
|
|
|
-
|
|
|
- const a = itsCalendarRef.value.upItem
|
|
|
- const b = itsCalendarRef.value.timeHostArr
|
|
|
- const c = itsCalendarRef.value.day_index
|
|
|
-
|
|
|
- const seconds = listData.value.businessDuration * obj.value * 60;
|
|
|
- const endTimestamp = (a.timeStamp + durationMs);
|
|
|
-
|
|
|
- // 根据当前时间分割出后续应选数据数组
|
|
|
- const filteredSlots = b[c].filter(i => {
|
|
|
- return (i.timeStamp > a.timeStamp &&
|
|
|
- i.timeStamp <= endTimestamp)
|
|
|
- });
|
|
|
-
|
|
|
- const timestampDifferenceValue = filteredSlots.length ? (filteredSlots[filteredSlots.length - 1].timeStamp - a.timeStamp) : 0
|
|
|
-
|
|
|
- console.log(filteredSlots, '>>>>>filteredSlots');
|
|
|
-
|
|
|
-
|
|
|
- if (timestampDifferenceValue < durationMs) { // 所选时间差值 小于 服务时间值 结束执行
|
|
|
- uni.showToast({ title: '所选时间的服务时间不充足！', icon: 'none' });
|
|
|
- return false
|
|
|
- }
|
|
|
-
|
|
|
- singleQuantity.value = obj.value || 1;
|
|
|
-
|
|
|
- nextTick(() => {
|
|
|
- itsCalendarRef.value.handleTimeClick2()
|
|
|
- })
|
|
|
+ const durationMs = listData.value.businessDuration * obj.value * 60
|
|
|
+
|
|
|
+ const a = itsCalendarRef.value.upItem
|
|
|
+ const b = itsCalendarRef.value.timeHostArr
|
|
|
+ const c = itsCalendarRef.value.day_index
|
|
|
+
|
|
|
+ const seconds = listData.value.businessDuration * obj.value * 60
|
|
|
+ const endTimestamp = a.timeStamp + durationMs
|
|
|
+
|
|
|
+ // 根据当前时间分割出后续应选数据数组
|
|
|
+ const filteredSlots = b[c].filter((i) => {
|
|
|
+ return i.timeStamp > a.timeStamp && i.timeStamp <= endTimestamp
|
|
|
+ })
|
|
|
+
|
|
|
+ const timestampDifferenceValue = filteredSlots.length
|
|
|
+ ? filteredSlots[filteredSlots.length - 1].timeStamp - a.timeStamp
|
|
|
+ : 0
|
|
|
+
|
|
|
+ console.log(filteredSlots, '>>>>>filteredSlots')
|
|
|
+
|
|
|
+ if (timestampDifferenceValue < durationMs) {
|
|
|
+ // 所选时间差值 小于 服务时间值 结束执行
|
|
|
+ uni.showToast({ title: '所选时间的服务时间不充足！', icon: 'none' })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ singleQuantity.value = obj.value || 1
|
|
|
+
|
|
|
+ nextTick(() => {
|
|
|
+ itsCalendarRef.value.handleTimeClick2()
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
// 选择日期
|
|
|
@@ -626,7 +637,12 @@ const upPopupOpen = () => {
|
|
|
}
|
|
|
|
|
|
const computeMoney = computed(() => {
|
|
|
- console.log(totalTimes.value , businessPrice.value , singleQuantity.value, '>>>>>> console.log(totalTimes.value * businessPrice.value * minQuantity.value);');
|
|
|
+ console.log(
|
|
|
+ totalTimes.value,
|
|
|
+ businessPrice.value,
|
|
|
+ singleQuantity.value,
|
|
|
+ '>>>>>> console.log(totalTimes.value * businessPrice.value * minQuantity.value);'
|
|
|
+ )
|
|
|
return totalTimes.value * businessPrice.value * singleQuantity.value
|
|
|
})
|
|
|
|
|
|
@@ -1111,4 +1127,23 @@ onMounted(async () => {
|
|
|
/* 灰色文字 */
|
|
|
line-height: 20rpx;
|
|
|
}
|
|
|
+
|
|
|
+/* 服务描述卡片样式 */
|
|
|
+.service-description-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.service-text {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.service-price {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ff4d4f;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
</style>
|
jiayubo