页面优化

components/its-calendar/its-calendar.vue

@@ -44,7 +44,9 @@
       </scroll-view>
     </view>
     <view class="calendar_footer">
-      {{ selectRange }}
+      <view class="selected-time-info">
+        {{ selectRange.join('\n') }}
+      </view>
     </view>
   </view>
 </template>
@@ -70,7 +72,7 @@ export default {
       type: Number,
       default: 1,
     },
-    projectName: {
+    businessTierName: {
       type: String,
       default: '',
     },
@@ -126,13 +128,13 @@ export default {
     },
   },
   mounted() {
-     console.log(this.props.projectName)
-   },
+    console.log(this.businessTierName, "businessTierName from parent component")
+  },
   computed: {
     // 计算选中区域
     selectRange() {
       const reservations = this.timeHostArr[this.day_index]
-      console.log(reservations, '>>>>>reservations')
+      // console.log(reservations, '>>>>>reservations')
       // console.log(JSON.stringify(current), '>>>>>current');
       // return current
       const result = []
@@ -161,7 +163,10 @@ export default {
       }
 
       const timeRangeArr = result.map((arr) => {
-        return arr[0].hours + '-' + arr[arr.length - 1].hours
+        // 获取选中的日期
+        const selectedDate = this.timeArr[this.day_index]
+        const timeRange = arr[0].hours + '-' + arr[arr.length - 1].hours
+        return `${this.businessTierName}\n预约上门时间：${selectedDate} ${timeRange}`
       })
 
       return timeRangeArr
@@ -609,15 +614,28 @@ page {
   border-radius: 12rpx;
   margin: 0 auto 20rpx auto;
   padding: 24rpx 32rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   min-height: 60rpx;
+  white-space: pre-line;
+  font-size: 26rpx;
+  color: #333;
+  line-height: 1.8;
+  border-left: 6rpx solid #FE3B3C;
 }
 
-.remark_content {
+.selected-time-info {
   color: #333;
   word-break: break-all;
   flex: 1;
+  font-weight: 500;
+  padding-left: 15rpx;
+  line-height: 48rpx;
+}
+
+.selected-time-info .business-name {
+  color: #FE3B3C;
+  font-weight: bold;
 }
 </style>

pages.json

@@ -21,7 +21,8 @@
 		{
 			"path": "pages/login",
 			"style": {
-				"navigationBarTitleText": "登录"
+				"navigationBarTitleText": "登录",
+				"navigationStyle": "custom"
 			}
 		},
 		{

pages/login.vue

@@ -1,5 +1,13 @@
 <template>
   <view class="normal-login-container">
+    <view class="wave-container">
+      <image
+        src="/static/login 13780@1x.png"
+        mode="widthFix"
+        class="wave-img"
+      ></image>
+    </view>
+
     <view class="logo-content">
       <image :src="imagePath" mode="aspectFit" class="logo-image"></image>
       <text class="title">金邻助家</text>
@@ -16,12 +24,6 @@
       <text class="slogan-text">和建立综合信用评价体系</text>
     </view>
 
-    <!-- 波浪容器 -->
-    <view class="wave-container">
-      <image src="/static/Vector 1@1x.png" mode="widthFix" class="wave-img"></image>
-      <image src="/static/Vector 2@1x.png" mode="widthFix" class="wave-img"></image>
-    </view>
-
     <view class="actions-container">
       <up-button
         custom-style="{ 'background-color': '#623F34', 'color': '#FFFFFF', 'border-radius': '25px', 'height': '50px', 'line-height': '50px', 'fontSize': '18px' }"
@@ -152,39 +154,58 @@ const loginSuccess = () => {
 // 页面加载时
 onMounted(() => {
   uni.setStorageSync('userType', 0)
-  // open(); // Popup related, removed
+  // 设置状态栏为透明
+  uni.setNavigationBarColor({
+    frontColor: '#ffffff',
+    backgroundColor: 'rgba(0,0,0,0)',
+    animation: {
+      duration: 0,
+      timingFunc: 'easeIn'
+    }
+  })
 })
 </script>
 
 <style lang="scss" scoped>
-page {
-  height: 100vh;
+.wave-container{
   width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  .wave-img{
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .normal-login-container {
   width: 100%;
-  height: 100vh;
+  min-height: 100vh;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  // background: linear-gradient(180deg, #ffa485 0%, #f6b053 100%);
   overflow: hidden;
+  padding-top: var(--status-bar-height);
+  box-sizing: border-box;
 }
 
 .logo-content {
-  margin-top: 177rpx;
+  margin-top: calc(100rpx + var(--status-bar-height));
   display: flex;
   flex-direction: column;
   align-items: center;
-  
+  position: relative;
+  z-index: 1;
+
   .logo-image {
     width: 90rpx;
     height: 90rpx;
     margin-bottom: 20rpx;
   }
-  
+
   .title {
     font-family: PingFang SC;
     font-size: 38rpx;
@@ -192,6 +213,7 @@ page {
     line-height: 38rpx;
     color: #ffffff;
     text-align: center;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   }
 }
 
@@ -199,11 +221,15 @@ page {
   width: 560rpx;
   margin-top: 60rpx;
   margin-bottom: 40rpx;
+  position: relative;
+  z-index: 1;
 }
 
 .slogan-content {
   text-align: center;
-  
+  position: relative;
+  z-index: 1;
+
   .slogan-text {
     font-size: 28rpx;
     color: #593931;
@@ -218,8 +244,8 @@ page {
   position: absolute;
   bottom: 80rpx;
   left: 0;
-  z-index: 2;
-  
+  z-index: 1;
+
   .login-button {
     width: 100%;
     height: 88rpx;
@@ -230,16 +256,16 @@ page {
     font-size: 32rpx !important;
     font-weight: 400;
   }
-  
+
   .xieyi {
     margin-top: 24rpx;
     text-align: center;
-    
+
     .text-grey1 {
       font-size: 24rpx;
       color: #333333;
     }
-    
+
     .text-blue {
       font-size: 24rpx;
       color: #1a88ff;
@@ -248,33 +274,4 @@ page {
   }
 }
 
-/* 波浪区域样式 */
-.wave-container {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 300rpx;
-  overflow: hidden;
-  z-index: 1;
-
-  .wave-img {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-
-    &:first-child {
-      opacity: 0.4;
-      mix-blend-mode: multiply;
-    }
-
-    &:last-child {
-      transform: translateY(20rpx);
-    }
-  }
-}
-
 </style>
-

pages_classify/pages/orderItem/orderdetails.vue

@@ -37,7 +37,7 @@
             </image>
 
             <view class="card-info">
-              <view class="info-item">服务类别：{{ listData.serviceCategory }}</view>
+              <view class="info-item">服务类别：{{ listData.businessManagementName }}</view>
               <view class="info-item">服务时长：{{ listData.serviceDuration}}分钟</view>
               <view class="info-item">服务价格：{{ listData.serviceOnePrice }}</view>
               <view class="info-item">服务数量：{{ listData.singleQuantity }}{{ listData.businessUnit }}</view>
@@ -83,14 +83,17 @@
       </up-card>
       <up-card title="证书" :head-style="{ height: '80rpx', padding: '20rpx' }">
         <template #body>
-          <view class="certificate" v-if="listData.certificationPicture">
+          <view class="certificate-container" v-if="certificationPictures.length > 0">
             <image
-              :src="listData.certificationPicture"
-              mode=""
-              style="width: 100%"
+              v-for="(image, index) in certificationPictures"
+              :key="index"
+              :src="image"
+              mode="widthFix"
               class="certificate-img"
+              @click="previewImage(image, certificationPictures)"
             ></image>
           </view>
+          <view v-else class="no-certificate">暂无证书</view>
         </template>
       </up-card>
     </view>
@@ -113,7 +116,7 @@
             </image>
             <view class="item-info">
               <view class="info-line">
-                服务类别：{{ item.serviceCategory }}
+                服务类别：{{listData.businessManagementName }}
               </view>
               <text>服务价格：{{ item.serviceTotalPrice }}</text>
               <text
@@ -153,12 +156,12 @@ const orderStatus = ref(0)
 const score = ref(null)
 const mainOrderId = ref('') //志愿者ID
 
-// const certificationPictures = computed(() => {
-// 	if (listData.value.volunteerInfo.certificationPicture) {
-// 		return listData.value.volunteerInfo.certificationPicture.split(',')
-// 	}
-// 	return []
-// })
+const certificationPictures = computed(() => {
+  if (listData.value.certificationPicture) {
+    return listData.value.certificationPicture.split(',')
+  }
+  return []
+})
 
 const dictSortMap = computed(() => {
   let mapObj = {}
@@ -195,9 +198,9 @@ const handlButClick = (item) => {
 onLoad(async (options) => {
   mainOrderId.value = options.mainOrderId
   const res = await orderInfomainOrderId(mainOrderId.value)
-  console.log('API Response:', res)
+  // console.log('API Response:', res)
   listData.value = res.data
-  console.log('listData:', listData.value)
+  // console.log('listData:', listData.value)
 })
 
 const hadlClickError = {
@@ -205,6 +208,15 @@ const hadlClickError = {
   height: '50rpx',
   marginTop: '70rpx',
 }
+
+// 预览图片
+const previewImage = (current, urls) => {
+  uni.previewImage({
+    current,
+    urls
+  })
+}
+
 onMounted(() => {
   getData()
 })
@@ -289,7 +301,7 @@ onMounted(() => {
 .card-rating {
   position: absolute;
   top: 20rpx;
-  right: 20rpx;
+  right: 40rpx;
   background-color: #f8f8f8;
   padding: 6rpx 16rpx;
   border-radius: 20rpx;
@@ -343,4 +355,24 @@ onMounted(() => {
   top: 24rpx;
   gap: 10rpx;
 }
+
+.certificate-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20rpx;
+  padding: 10rpx;
+}
+
+.certificate-img {
+  width: 220rpx;
+  height: 220rpx;
+  border-radius: 8rpx;
+  object-fit: cover;
+}
+
+.no-certificate {
+  text-align: center;
+  color: #999;
+  padding: 30rpx;
+}
 </style>

pages_classify/pages/orderItem/userComment.vue

@@ -140,30 +140,41 @@
 	}
 
 	onLoad(async (options) => {
-		const data = JSON.parse(decodeURIComponent(options.data));
-		console.log(data, '》》》》》》 获取传递的 listData');
-
-		// 设置图片
-		if (data.volunteerInfo?.volunteerPicture) {
-			src.value = data.volunteerInfo.volunteerPicture;
-		} else {
-			src.value = '/static/default-avatar.png';
-		}
-
-		// 设置项目名称和志愿者姓名
-		projectName.value = data.volunteerInfo?.projectName || '未知项目';
-		volunteerName.value = data.volunteerInfo?.name || '未知姓名';
-
-		const secondOrderList = data.secondOrderList || [];
-		// 获取第一个 secondOrderId
-		const secondOrderId = secondOrderList.length > 0 ? secondOrderList[0].secondOrderId : null;
-		// 如果 secondOrderId 存在，则设置到 IfonForm 中
-		if (secondOrderId) {
-			IfonForm.value.secondOrderId = secondOrderId;
-		}
-		// 获取 volunteerInfoId
-		const volunteerInfoId = data.volunteerInfo?.volunteerInfoId || data.volunteerInfoId;
-		IfonForm.value.volunteerInfoId = volunteerInfoId;
+		// 使用 uni.getStorage 获取存储的数据，而不是从 URL 参数解析
+		uni.getStorage({
+			key: 'orderDetailsData',
+			success: function(res) {
+				const data = res.data;
+				console.log(data, '》》》》》》 获取传递的 listData');
+
+				// 设置图片
+				if (data.volunteerPicture) {
+					src.value = data.volunteerPicture;
+				} else {
+					src.value = '/static/default-avatar.png';
+				}
+
+				// 设置项目名称和志愿者姓名
+				projectName.value = data.businessManagementName || '未知项目';
+				volunteerName.value = data.volunteerName || '未知姓名';
+
+				// 获取 secondOrderId 从 URL 参数
+				const secondOrderId = options.secondOrderId;
+				if (secondOrderId) {
+					IfonForm.value.secondOrderId = secondOrderId;
+				}
+				
+				// 获取 volunteerInfoId
+				IfonForm.value.volunteerInfoId = data.volunteerInfoId || '';
+			},
+			fail: function(err) {
+				console.error('获取存储数据失败:', err);
+				uni.showToast({
+					title: '获取数据失败',
+					icon: 'error'
+				});
+			}
+		});
 	});
 </script>
 

pages_home/pages/Volunteerside/goodsDetails.vue

@@ -5,12 +5,12 @@
       <up-card
         title="服务描述"
         :thumb="thumb"
-        :head-style="{ height: '80rpx', padding: '20rpx' }"
+        :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">¥{{ listData.businessPrice }}</view>
+            <view class="service-price-tag">¥{{ listData.businessPrice }}</view>
           </view>
         </template>
       </up-card>
@@ -18,37 +18,46 @@
     <view>
       <up-card
         title="志愿者介绍"
-        :head-style="{ height: '80rpx', padding: '20rpx' }"
+        :head-style="{ height: '80rpx', padding: '20rpx', fontWeight: 'bold' }"
       >
         <template #body>
-          <view class="card-container">
+          <view class="volunteer-card">
             <!-- 左侧图片 -->
             <image
-              class="card-image"
+              class="volunteer-image"
               :src="listData.volunteerPicture"
               mode="aspectFill"
             ></image>
 
             <!-- 中间信息（姓名/类别等） -->
-            <view class="card-info">
-              <view class="info-item">姓名：{{ listData.name }}</view>
-              <view class="info-item"
-                >服务项目：{{ listData.businessTierName }}</view
-              >
-              <view v-if="serviceSubjectName != null" class="info-item"
-                >类别：{{ listData.projectTypeName }}
+            <view class="volunteer-info">
+              <view class="info-row">
+                <text class="info-label">姓名：</text>
+                <text class="info-value">{{ listData.name }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">服务项目：</text>
+                <text class="info-value">{{ listData.businessTierName }}</text>
+              </view>
+              <view v-if="serviceSubjectName != null" class="info-row">
+                <text class="info-label">类别：</text>
+                <text class="info-value">{{ listData.projectTypeName }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">服务时长：</text>
+                <text class="info-value">{{ listData.businessDuration }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">电话：</text>
+                <text class="info-value">{{ listData.phonenumber }}</text>
               </view>
-              <view class="Telephone"
-                >服务时长：{{ listData.businessDuration }}</view
-              >
-              <view class="Telephone"
-                >次/件：{{ listData.minQuantity + listData.businessUnit }}</view
-              >
-              <view class="Telephone">电话：{{ listData.phonenumber }}</view>
             </view>
 
-            <!-- 右上角评分 - 使用绝对定位 -->
-            <view class="card-rating">4.5 评分</view>
+            <!-- 右上角评分 -->
+            <view class="volunteer-rating">
+              <text class="rating-text">4.5</text>
+              <text class="rating-label">评分</text>
+            </view>
           </view>
         </template>
       </up-card>
@@ -56,10 +65,12 @@
       <up-card
         title="技能介绍"
         :thumb="thumb"
-        :head-style="{ height: '80rpx', padding: '20rpx' }"
+        :head-style="{ height: '80rpx', padding: '20rpx', fontWeight: 'bold' }"
       >
         <template #body>
-          {{ listData.skillDescribe }}
+          <view class="skill-description">
+            {{ listData.skillDescribe }}
+          </view>
         </template>
       </up-card>
       <up-card
@@ -95,73 +106,79 @@
     <!-- 底部第一层弹框 -->
     <view>
       <up-popup :show="show" @close="close" @open="open"> </up-popup>
-      <up-popup v-model:show="show" @open="upPopupOpen">
-        <view>
-          <view class="Wrapper">
-            <image src="/static/img/Location.png" class="Wrapper-img" />
-            <span class="Wrapper-content">李四</span>
-            <span class="Wrapper-content">重庆永川区</span>
+      <up-popup :show="show" @open="upPopupOpen" :custom-style="popupStyle">
+        <scroll-view scroll-y class="popup-scroll-content">
+          <view>
+            <view class="Wrapper">
+              <image src="/static/img/Location.png" class="Wrapper-img" />
+              <span class="Wrapper-content">李四</span>
+              <span class="Wrapper-content">重庆永川区</span>
+            </view>
+            <span style="margin-left: 15rpx; margin-top: 50rpx">重庆永川区</span>
           </view>
-          <span style="margin-left: 15rpx; margin-top: 50rpx">重庆永川区</span>
-        </view>
-        <up-divider></up-divider>
-        <view class="Wrap-content1">
-          <up-avatar :src="src"></up-avatar>
-          <text style="margin-top: 15rpx">￥{{ businessPrice }}</text>
-        </view>
-        <view class="Wrap-info">
-          <text style="margin-left: 10rpx">服务类别：</text>
-          <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"
-            :max="minQuantityMax"
-            @change="valChange"
-          ></up-number-box>
-        </view>
-
-        <view class="Wrap-info">
-          <text style="margin-left: 10rpx">购买规格：</text>
-          <view>{{ listData.minQuantity + listData.businessUnit }}</view>
-        </view>
-        <view class="Wrap-content3">
-          <text style="margin-left: 15rpx">服务周期:</text>
-          <view style="margin-top: 25rpx">
-            <uniDatetimePickerMy
-              :modelValue="doorToDoorTime"
-              :start="startDisabled"
-              :end="endDisabled"
-              type="daterange"
-            ></uniDatetimePickerMy>
+          <up-divider></up-divider>
+          <view class="Wrap-content1">
+            <up-avatar :src="src"></up-avatar>
+            <text class="service-price">￥{{ businessPrice }}</text>
           </view>
-          <view>
-            <its-calendar
-              v-if="show"
-              ref="itsCalendarRef"
-              :businessDuration="listData.businessDuration"
-              :minQuantity="singleQuantity"
-              :timeArr="doorToDoorTimeArr"
-              :timeHostArr="timeHostArr"
-              :projectName="listData.projectName"
-              @getByDate="getByDate"
-              @getByTime="getByTime"
-            ></its-calendar>
+          <view class="service-info-item">
+            <text class="service-label">服务类别：</text>
+            <up-text type="info" class="service-value" text="家庭教育"></up-text>
           </view>
-        </view>
-
-        <view class="Wrap-content6">
-          <text style="margin-left: 15rpx">备注：</text>
-          <up-input
-            placeholder="请输入内容"
-            border="surround"
-            v-model="remark"
-            @change="change"
-          ></up-input>
-        </view>
-        <view class="Wrap-detils-btn">
+          <view class="service-info-item">
+            <text class="service-label">上门服务次数：</text>
+            <up-number-box
+              :modelValue="singleQuantity"
+              :min="listData.minQuantity"
+              :max="minQuantityMax"
+              class="service-number-box"
+              @change="valChange"
+            ></up-number-box>
+          </view>
+          <view class="service-info-item">
+            <text class="service-label">购买规格：</text>
+            <view class="service-value">{{ listData.minQuantity + 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>
+            </view>
+            <view>
+              <its-calendar
+                v-if="show"
+                ref="itsCalendarRef"
+                :businessDuration="listData.businessDuration"
+                :minQuantity="singleQuantity"
+                :timeArr="doorToDoorTimeArr"
+                :timeHostArr="timeHostArr"
+                :businessTierName="listData.businessTierName"
+                class="calendar-component"
+                @getByDate="getByDate"
+                @getByTime="getByTime"
+              ></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>
+          </view>
+          <!-- 保持内容底部有足够的空白以避免按钮遮挡内容 -->
+          <view style="height: 120rpx;"></view>
+        </scroll-view>
+        <!-- 将按钮移到scroll-view外部，但保持在popup内 -->
+        <view class="popup-fixed-bottom">
           <up-button
             type="primary"
             shape="circle"
@@ -182,7 +199,7 @@
     </view>
 
     <!-- 第二个弹框-->
-    <up-popup v-model:show="showSecond">
+    <up-popup :show="showSecond">
       <view>
         <up-cell-group>
           <view
@@ -289,7 +306,10 @@
         <up-line></up-line>
 
         <!-- 其他支付方式 -->
-        <view class="other-payment"> 其他方式支付 > </view>
+        <view class="other-payment">
+          <text class="other-payment-text">其他方式支付</text>
+          <up-icon name="arrow-right" size="14" color="#1890ff"></up-icon>
+        </view>
 
         <!-- 条款说明 -->
         <view class="terms-of-service">
@@ -387,6 +407,13 @@ const radiolist2 = reactive([
   },
 ])
 
+// 设置第一个弹框的样式
+const popupStyle = {
+  height: '80vh', // 设置为视窗高度的80%
+  overflow: 'hidden', // 防止内容溢出
+  position: 'relative', // 需要这个来支持内部的绝对定位元素
+}
+
 // 详情底部立即购买弹框
 const buttonClick = (e) => {
   show.value = true // 打开弹框
@@ -514,7 +541,7 @@ const valChange = (obj) => {
     ? filteredSlots[filteredSlots.length - 1].timeStamp - a.timeStamp
     : 0
 
-  console.log(filteredSlots, '>>>>>filteredSlots')
+  // console.log(filteredSlots, '>>>>>filteredSlots')
 
   if (timestampDifferenceValue < durationMs) {
     minQuantityMax.value = obj.value - 1
@@ -641,12 +668,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
 })
 
@@ -713,7 +740,7 @@ const proceedToPayment = async () => {
 
     // 保存订单号
     const mainOrderId = res.data.mainOrderId
-    console.log('创建订单成功，订单号:', mainOrderId)
+    // console.log('创建订单成功，订单号:', mainOrderId)
 
     // 如果是微信支付
     if (paymentMethod.value === 2) {
@@ -722,7 +749,7 @@ const proceedToPayment = async () => {
           ...res.data,
           package: res.data.packageValue,
           success: (payRes) => {
-            console.log('支付成功:', payRes)
+            // console.log('支付成功:', payRes)
             if (payRes.errMsg === 'requestPayment:ok') {
               uni.showToast({
                 title: '支付成功',
@@ -739,11 +766,11 @@ const proceedToPayment = async () => {
             }
           },
           fail: async (payRes) => {
-            console.log('支付失败或取消:', payRes)
+            // console.log('支付失败或取消:', payRes)
             try {
               // 调用取消支付接口
               const cancelRes = await coreUsersOrdersPayCancel({ mainOrderId })
-              console.log('取消支付接口调用成功:', cancelRes)
+              // console.log('取消支付接口调用成功:', cancelRes)
 
               if (payRes.errMsg === 'requestPayment:fail cancel') {
                 uni.showToast({
@@ -989,24 +1016,27 @@ onMounted(async () => {
 }
 
 .Wrap-Payment {
-  padding: 30rpx;
+  padding: 40rpx 30rpx;
   background-color: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 20rpx;
 }
 
 .payment-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20rpx 0;
+  padding: 20rpx 0 30rpx;
 }
 
 .payment-title {
   font-size: 32rpx;
   font-weight: bold;
+  color: #333;
 }
 
 .payment-amount {
-  font-size: 36rpx;
+  font-size: 40rpx;
   color: #ff4d4f;
   font-weight: bold;
 }
@@ -1024,18 +1054,26 @@ onMounted(async () => {
 }
 
 .payment-icon {
-  width: 80rpx;
-  height: 80rpx;
-  margin-right: 20rpx;
+  width: 64rpx;
+  height: 64rpx;
+  margin-right: 24rpx;
+  border-radius: 8rpx;
 }
 
 .option-text {
   font-size: 30rpx;
-  font-weight: bold;
+  font-weight: 500;
+  color: #333;
 }
 
 .other-payment {
   padding: 30rpx 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.other-payment-text {
   color: #1890ff;
   font-size: 28rpx;
 }
@@ -1044,11 +1082,19 @@ onMounted(async () => {
   padding: 30rpx 0;
   font-size: 24rpx;
   color: #999;
-  line-height: 1.5;
+  line-height: 1.6;
+  background-color: #f9f9f9;
+  padding: 20rpx;
+  border-radius: 8rpx;
 }
 
-.confirm-button {
-  margin-top: 40rpx;
+.Wrap-detils-btn {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30rpx;
+  background-color: #fff;
+  border-top: 1px solid #f0f0f0;
 }
 
 .certificate {
@@ -1144,10 +1190,223 @@ onMounted(async () => {
   margin-right: 20rpx;
 }
 
-.service-price {
-  font-size: 32rpx;
+.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 {
+  height: calc(80vh - 120rpx); /* 减去底部按钮区域的高度 */
+  padding: 24rpx;
+  padding-bottom: 30px; /* 增加底部内边距，避免内容被按钮遮挡 */
+  box-sizing: border-box;
+}
+
+/* 固定底部按钮样式 */
+.popup-fixed-bottom {
+  position: absolute; /* 相对于popup容器定位 */
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  background-color: white;
+  padding: 20rpx;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: flex-end; /* 右对齐按钮 */
+  align-items: center;
+  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1); /* 顶部阴影，创造分隔感 */
+  z-index: 1; /* 确保按钮在内容之上 */
+}
+
+/* 服务信息项样式 */
+.service-info-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 0;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.service-label {
+  width: 200rpx;
+  font-size: 28rpx;
+  color: #666;
+  flex-shrink: 0;
+}
+
+.service-value {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+}
+
+.service-number-box {
+  background-color: #f8f8f8;
+  border-radius: 8rpx;
+}
+
+/* 服务周期样式 */
+.service-period {
+  padding: 24rpx 0;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.date-picker-container {
+  margin: 20rpx 0;
+  padding: 12rpx;
+  background-color: #f8f8f8;
+  border-radius: 8rpx;
+}
+
+.calendar-component {
+  margin-top: 20rpx;
+  border: 1px solid #f0f0f0;
+  border-radius: 8rpx;
+}
+
+/* 备注容器样式 */
+.remark-container {
+  padding: 24rpx 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.remark-input {
+  margin-top: 16rpx;
+  background-color: #f8f8f8;
+  border-radius: 8rpx;
+}
+
+/* 修改卡片基础样式 */
+.card-container {
+  display: flex;
+  padding: 24rpx;
+  margin: 16rpx 0;
+  background-color: #fff;
+  border-radius: 12rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+}
+
+/* 志愿者卡片样式 */
+.volunteer-card {
+  display: flex;
+  position: relative;
+  padding: 24rpx 0;
+  align-items: flex-start;
+}
+
+.volunteer-image {
+  width: 180rpx;
+  height: 180rpx;
+  border-radius: 12rpx;
+  margin-right: 24rpx;
+  flex-shrink: 0;
+  object-fit: cover;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+}
+
+.volunteer-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+}
+
+.info-label {
+  color: #666;
+  font-size: 26rpx;
+  margin-right: 8rpx;
+  width: 140rpx;
+  flex-shrink: 0;
+}
+
+.info-value {
+  color: #333;
+  font-size: 26rpx;
+  font-weight: 500;
+}
+
+.volunteer-rating {
+  position: absolute;
+  top: 24rpx;
+  right: 0;
+  background-color: #fff8e6;
+  padding: 8rpx 16rpx;
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  border: 1px solid #ffebb7;
+}
+
+.rating-text {
+  font-size: 28rpx;
+  color: #ff9900;
+  font-weight: bold;
+  margin-right: 6rpx;
+}
+
+.rating-label {
+  font-size: 24rpx;
+  color: #ff9900;
+}
+
+/* 技能描述样式 */
+.skill-description {
+  padding: 16rpx 0;
+  font-size: 28rpx;
+  line-height: 1.6;
+  color: #333;
+}
+
+/* 证书样式 */
+.certificate {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.certificate-img {
+  border-radius: 8rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+  margin-bottom: 16rpx;
+}
+
+/* Address selection styles */
+.address-display {
+  padding: 16rpx;
+  background-color: #f8f8f8;
+  border-radius: 8rpx;
+  margin-bottom: 16rpx;
+}
+
+.address-line {
+  font-size: 28rpx;
+  line-height: 40rpx;
+  color: #333;
+  display: block;
+  margin-bottom: 12rpx;
+  font-weight: 500;
+}
+
+.contact-info {
+  display: flex;
+  gap: 20rpx;
+}
+
+.contact-name, .contact-phone {
+  font-size: 26rpx;
+  color: #666;
+  line-height: 36rpx;
 }
 </style>