|
@@ -1,33 +1,32 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <view>
|
|
|
- <Detiles></Detiles>
|
|
|
- <up-card
|
|
|
- title="服务描述"
|
|
|
- :thumb="thumb"
|
|
|
- :head-style="{ height: '80rpx', padding: '20rpx', fontWeight: 'bold' }"
|
|
|
- >
|
|
|
- <template #body>
|
|
|
- <view class="service-description-container">
|
|
|
- <view class="service-text">{{ listData.businessDescribe }}</view>
|
|
|
- <view class="service-price-tag">¥{{ listData.businessPrice }}</view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </up-card>
|
|
|
- </view>
|
|
|
+
|
|
|
+ <!-- 顶部轮播图 -->
|
|
|
+ <view>
|
|
|
+ <Detiles></Detiles>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 页面背景整体定位 -->
|
|
|
+ <view class="service-description-position">
|
|
|
+
|
|
|
+ <!-- 价格服务介绍 -->
|
|
|
+ <view class="service-description-container">
|
|
|
+ <view class="service-text">{{ listData.businessDescribe }}</view>
|
|
|
+ <view class="service-price-tag">¥{{ listData.businessPrice }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
<view class="service-description-box">
|
|
|
- <up-card
|
|
|
- title="志愿者介绍"
|
|
|
- :head-style="{ height: '80rpx', padding: '20rpx', fontWeight: 'bold' }"
|
|
|
- >
|
|
|
+ <up-card title="志愿者介绍" :head-style="{ height: '80rpx', padding: '20rpx', fontWeight: 'bold' }">
|
|
|
<template #body>
|
|
|
<view class="volunteer-card">
|
|
|
<!-- 左侧图片 -->
|
|
|
- <image
|
|
|
- class="volunteer-image"
|
|
|
- :src="listData.volunteerPicture"
|
|
|
- mode="aspectFill"
|
|
|
- ></image>
|
|
|
+ <image class="volunteer-image" :src="listData.volunteerPicture" mode="aspectFill"></image>
|
|
|
|
|
|
<!-- 中间信息(姓名/类别等) -->
|
|
|
<view class="volunteer-info">
|
|
@@ -62,44 +61,25 @@
|
|
|
</template>
|
|
|
</up-card>
|
|
|
|
|
|
- <up-card
|
|
|
- title="个人简介"
|
|
|
- :thumb="thumb"
|
|
|
- :head-style="{ height: '80rpx', padding: '20rpx', fontWeight: 'bold' }"
|
|
|
- >
|
|
|
+ <up-card title="个人简介" :thumb="thumb" :head-style="{ height: '80rpx', padding: '20rpx', fontWeight: 'bold' }">
|
|
|
<template #body>
|
|
|
<view class="skill-description">
|
|
|
{{ listData.skillDescribe }}
|
|
|
</view>
|
|
|
</template>
|
|
|
</up-card>
|
|
|
- <up-card
|
|
|
- title="证书"
|
|
|
- :thumb="thumb"
|
|
|
- :head-style="{ height: '80rpx', padding: '20rpx' }"
|
|
|
- >
|
|
|
+ <up-card title="证书" :thumb="thumb" :head-style="{ height: '80rpx', padding: '20rpx' }">
|
|
|
<template #body>
|
|
|
<view class="certificate">
|
|
|
- <up-image
|
|
|
- v-for="item in certificationPictures"
|
|
|
- :key="item"
|
|
|
- :src="item"
|
|
|
- style="width: 100%"
|
|
|
- class="certificate-img"
|
|
|
- mode="widthFix"
|
|
|
- ></up-image>
|
|
|
+ <up-image v-for="item in certificationPictures" :key="item" :src="item" style="width: 100%"
|
|
|
+ class="certificate-img" mode="widthFix"></up-image>
|
|
|
</view>
|
|
|
</template>
|
|
|
</up-card>
|
|
|
<!-- 固定底部按钮区 -->
|
|
|
<view class="Wrap-btn">
|
|
|
- <uni-goods-nav
|
|
|
- :fill="true"
|
|
|
- :options="options"
|
|
|
- :buttonGroup="buttonGroup"
|
|
|
- @click="onClick"
|
|
|
- @buttonClick="buttonClick"
|
|
|
- />
|
|
|
+ <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
|
|
|
+ @buttonClick="buttonClick" />
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
@@ -127,75 +107,39 @@
|
|
|
</view>
|
|
|
<view class="service-info-item">
|
|
|
<text class="service-label">上门服务次数:</text>
|
|
|
- <up-number-box
|
|
|
- v-model="singleQuantity"
|
|
|
- :min="listData.minQuantity"
|
|
|
- :max="minQuantityMax"
|
|
|
- class="service-number-box"
|
|
|
- :disabled="isChanging"
|
|
|
- :longPress="false"
|
|
|
- @change="valChange"
|
|
|
- ></up-number-box>
|
|
|
+ <up-number-box v-model="singleQuantity" :min="listData.minQuantity" :max="minQuantityMax"
|
|
|
+ class="service-number-box" :disabled="isChanging" :longPress="false" @change="valChange"></up-number-box>
|
|
|
<view class="service-values">{{ listData.businessUnit }}</view>
|
|
|
</view>
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
<view class="service-period">
|
|
|
<text class="service-label">服务周期:</text>
|
|
|
<view class="date-picker-container">
|
|
|
- <uniDatetimePickerMy
|
|
|
- :modelValue="doorToDoorTime"
|
|
|
- :start="startDisabled"
|
|
|
- :end="endDisabled"
|
|
|
- type="daterange"
|
|
|
- ></uniDatetimePickerMy>
|
|
|
+ <uniDatetimePickerMy :modelValue="doorToDoorTime" :start="startDisabled" :end="endDisabled"
|
|
|
+ type="daterange"></uniDatetimePickerMy>
|
|
|
</view>
|
|
|
<view>
|
|
|
|
|
|
<!-- :businessDuration="listData.businessDuration" -->
|
|
|
- <its-calendar
|
|
|
- v-if="show"
|
|
|
- ref="itsCalendarRef"
|
|
|
- :businessDuration="businessDurationComputed"
|
|
|
- :minQuantity="singleQuantity"
|
|
|
- :timeArr="doorToDoorTimeArr"
|
|
|
- :timeHostArr="timeHostArr"
|
|
|
- :businessTierName="listData.businessTierName"
|
|
|
- class="calendar-component"
|
|
|
- @getByDate="getByDate"
|
|
|
- @getByTime="getByTime"
|
|
|
- @changeMinQuantityMax="changeMinQuantityMax"
|
|
|
- ></its-calendar>
|
|
|
+ <its-calendar v-if="show" ref="itsCalendarRef" :businessDuration="businessDurationComputed"
|
|
|
+ :minQuantity="singleQuantity" :timeArr="doorToDoorTimeArr" :timeHostArr="timeHostArr"
|
|
|
+ :businessTierName="listData.businessTierName" class="calendar-component" @getByDate="getByDate"
|
|
|
+ @getByTime="getByTime" @changeMinQuantityMax="changeMinQuantityMax"></its-calendar>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="remark-container">
|
|
|
<text class="service-label">备注:</text>
|
|
|
- <up-input
|
|
|
- placeholder="请输入内容"
|
|
|
- border="surround"
|
|
|
- v-model="remark"
|
|
|
- class="remark-input"
|
|
|
- @change="change"
|
|
|
- ></up-input>
|
|
|
+ <up-input placeholder="请输入内容" border="surround" v-model="remark" class="remark-input"
|
|
|
+ @change="change"></up-input>
|
|
|
</view>
|
|
|
<!-- 保持内容底部有足够的空白以避免按钮遮挡内容 -->
|
|
|
<view style="height: 120rpx;"></view>
|
|
|
</scroll-view>
|
|
|
<!-- 将按钮移到scroll-view外部,但保持在popup内 -->
|
|
|
<view class="popup-fixed-bottom">
|
|
|
- <up-button
|
|
|
- type="primary"
|
|
|
- shape="circle"
|
|
|
- :customStyle="wrapqx"
|
|
|
- @click="handlCancel"
|
|
|
- >取消</up-button
|
|
|
- >
|
|
|
- <up-button
|
|
|
- type="error"
|
|
|
- shape="circle"
|
|
|
- :customStyle="wrapqx"
|
|
|
- @click="handleBuy"
|
|
|
- >
|
|
|
+ <up-button type="primary" shape="circle" :customStyle="wrapqx" @click="handlCancel">取消</up-button>
|
|
|
+ <up-button type="error" shape="circle" :customStyle="wrapqx" @click="handleBuy">
|
|
|
预约¥{{ computeMoney.toFixed(2) }}
|
|
|
</up-button>
|
|
|
</view>
|
|
@@ -206,10 +150,7 @@
|
|
|
<up-popup :show="showSecond">
|
|
|
<view>
|
|
|
<up-cell-group>
|
|
|
- <view
|
|
|
- @click="jumpToAddressSelect"
|
|
|
- style="display: flex; align-items: center; padding: 10px"
|
|
|
- >
|
|
|
+ <view @click="jumpToAddressSelect" style="display: flex; align-items: center; padding: 10px">
|
|
|
<up-icon name="more-dot-fill" size="16" />
|
|
|
<view v-if="selectedAddress" style="margin-left: 8px; flex: 1">
|
|
|
<view class="address-display">
|
|
@@ -221,32 +162,18 @@
|
|
|
<text class="contact-name">{{ selectedAddress.name }}</text>
|
|
|
<text class="contact-phone">{{
|
|
|
selectedAddress.telephone
|
|
|
- }}</text>
|
|
|
+ }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <text v-else style="margin-left: 8px; font-size: 18px"
|
|
|
- >请选择服务地址</text
|
|
|
- >
|
|
|
+ <text v-else style="margin-left: 8px; font-size: 18px">请选择服务地址</text>
|
|
|
</view>
|
|
|
<scroll-view scroll-y style="height: 460rpx">
|
|
|
- <view
|
|
|
- class="card-container"
|
|
|
- v-for="(item, index) in selectedTimes"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <image
|
|
|
- class="card-image"
|
|
|
- :src="listData.volunteerPicture"
|
|
|
- mode="aspectFill"
|
|
|
- ></image>
|
|
|
+ <view class="card-container" v-for="(item, index) in selectedTimes" :key="index">
|
|
|
+ <image class="card-image" :src="listData.volunteerPicture" mode="aspectFill"></image>
|
|
|
<view class="card-content">
|
|
|
- <view class="info-item"
|
|
|
- >服务项目:{{ listData.projectName }}</view
|
|
|
- >
|
|
|
- <view class="Telephone"
|
|
|
- >服务时长:{{ listData.businessDuration }}</view
|
|
|
- >
|
|
|
+ <view class="info-item">服务项目:{{ listData.projectName }}</view>
|
|
|
+ <view class="Telephone">服务时长:{{ listData.businessDuration }}</view>
|
|
|
<view class="date">日期:{{ item.date }}</view>
|
|
|
<view class="time"> 时间:{{ item.time }} </view>
|
|
|
</view>
|
|
@@ -270,18 +197,9 @@
|
|
|
<image src="/static/钱包.png" class="payment-icon"></image>
|
|
|
<text class="option-text">钱包</text>
|
|
|
</view>
|
|
|
- <up-radio-group
|
|
|
- v-model="radiovalue1"
|
|
|
- placement="column"
|
|
|
- @change="handlePaymentMethodChange"
|
|
|
- >
|
|
|
- <up-radio
|
|
|
- :customStyle="{ marginLeft: 'auto' }"
|
|
|
- v-for="(item, index) in radiolist1"
|
|
|
- :key="index"
|
|
|
- :label="item.name"
|
|
|
- :name="item.name"
|
|
|
- ></up-radio>
|
|
|
+ <up-radio-group v-model="radiovalue1" placement="column" @change="handlePaymentMethodChange">
|
|
|
+ <up-radio :customStyle="{ marginLeft: 'auto' }" v-for="(item, index) in radiolist1" :key="index"
|
|
|
+ :label="item.name" :name="item.name"></up-radio>
|
|
|
</up-radio-group>
|
|
|
</view>
|
|
|
<up-line></up-line>
|
|
@@ -292,18 +210,9 @@
|
|
|
<image src="/static/微信支付.png" class="payment-icon"></image>
|
|
|
<text class="option-text">微信支付</text>
|
|
|
</view>
|
|
|
- <up-radio-group
|
|
|
- v-model="radiovalue1"
|
|
|
- placement="column"
|
|
|
- @change="handlePaymentMethodChange"
|
|
|
- >
|
|
|
- <up-radio
|
|
|
- :customStyle="{ marginLeft: 'auto' }"
|
|
|
- v-for="(item, index) in radiolist2"
|
|
|
- :key="index"
|
|
|
- :label="item.name"
|
|
|
- :name="item.name"
|
|
|
- ></up-radio>
|
|
|
+ <up-radio-group v-model="radiovalue1" placement="column" @change="handlePaymentMethodChange">
|
|
|
+ <up-radio :customStyle="{ marginLeft: 'auto' }" v-for="(item, index) in radiolist2" :key="index"
|
|
|
+ :label="item.name" :name="item.name"></up-radio>
|
|
|
</up-radio-group>
|
|
|
</view>
|
|
|
|
|
@@ -321,31 +230,16 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="Wrap-detils-btn">
|
|
|
- <up-button
|
|
|
- type="primary"
|
|
|
- shape="circle"
|
|
|
- :customStyle="wrapqx"
|
|
|
- @click="closeSecond"
|
|
|
- >取消</up-button
|
|
|
- >
|
|
|
- <up-button
|
|
|
- type="error"
|
|
|
- shape="circle"
|
|
|
- :customStyle="wrapqx"
|
|
|
- @click="handlConfiRmpurchase"
|
|
|
- >
|
|
|
+ <up-button type="primary" shape="circle" :customStyle="wrapqx" @click="closeSecond">取消</up-button>
|
|
|
+ <up-button type="error" shape="circle" :customStyle="wrapqx" @click="handlConfiRmpurchase">
|
|
|
购买¥{{ computeMoney }}
|
|
|
</up-button>
|
|
|
</view>
|
|
|
</up-popup>
|
|
|
|
|
|
<view v-if="addressFlag" class="box">
|
|
|
- <addressComponent
|
|
|
- :modelValue="addressFlag"
|
|
|
- @update:modelValue="(val) => (addressFlag = val)"
|
|
|
- :addressInfo="addressInfo"
|
|
|
- @update:addressInfo="handleAddressUpdate"
|
|
|
- ></addressComponent>
|
|
|
+ <addressComponent :modelValue="addressFlag" @update:modelValue="(val) => (addressFlag = val)"
|
|
|
+ :addressInfo="addressInfo" @update:addressInfo="handleAddressUpdate"></addressComponent>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
@@ -906,6 +800,15 @@ onMounted(async () => {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+
|
|
|
+/* 整体背景定位 */
|
|
|
+.service-description-position{
|
|
|
+ width: 750rpx;
|
|
|
+ /* background: #FFFFFF; */
|
|
|
+ background: red;
|
|
|
+ position: relative;
|
|
|
+ z-index: 180;
|
|
|
+}
|
|
|
/* 添加卡片样式 */
|
|
|
.card-container {
|
|
|
display: flex;
|
|
@@ -1250,20 +1153,6 @@ onMounted(async () => {
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
|
|
|
-.service-text {
|
|
|
- flex: 1;
|
|
|
- margin-right: 20rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.service-price-tag {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #ff4d4f;
|
|
|
- white-space: nowrap;
|
|
|
- padding: 8rpx 16rpx;
|
|
|
- background-color: #fff2f0;
|
|
|
- border-radius: 8rpx;
|
|
|
-}
|
|
|
|
|
|
/* 弹框滚动内容样式 */
|
|
|
.popup-scroll-content {
|