feat(订单): 新增订单修改功能及优化周边伴宠师展示

- 新增订单修改页面，支持修改联系人、联系方式及支付方式
- 优化周边伴宠师展示逻辑，增加距离计算和默认位置处理
- 新增优惠券详细规则弹窗，展示优惠券使用说明
- 修复首页图片展示问题，替换img标签为image组件

api/home.js

@@ -0,0 +1,13 @@
+
+
+import request from '@/utils/request'
+
+
+// 
+export function getTeacherListIndex(data) {
+    return request({
+        url: '/applet/mall/teacher/getTeacherListIndex',
+        method: 'get',
+        data: data
+    })
+}

api/order/order.js

@@ -94,6 +94,32 @@ export const getOrderDetail = (params) => {
     })
 }
 
+// 根据id查询
+export function getOrderDetailById(data) {
+    return request({
+        url: '/api/order/detail',
+        method: 'post',
+        data: data
+    })
+}
+
+// 创建订单
+export function createOrder(data) {
+    return request({
+        url: '/api/order/create',
+        method: 'post',
+        data: data
+    })
+}
+
+// 更新订单
+export function updateOrder(data) {
+    return request({
+        url: '/api/order/update',
+        method: 'post',
+        data: data
+    })
+}
 
 // 评价订单
 export const orderEvaluate = (params) => {

pages.json

@@ -393,6 +393,15 @@
 						"enablePullDownRefresh": false,
 						"navigationBarTextStyle": "white"
 					}
+				},
+				{
+					"path": "order/orderModify",
+					"style": {
+						"navigationBarTitleText": "服务过的伴宠师",
+						"navigationBarBackgroundColor": "#FFBF60",
+						"enablePullDownRefresh": false,
+						"navigationBarTextStyle": "white"
+					}
 				}
 			]
 		}

pages/index.vue

@@ -8,12 +8,8 @@
 				<swiper class="swiper" indicator-dots indicator-color="rgba(255, 255, 255, 0.50)"
 					indicator-active-color="#ffffff" autoplay interval="5000">
 					<swiper-item v-for="(item,i) in bannerList" :key="i">
-						<img :src="item&&item.dictValue" style="width: 100%;" mode="widthFix" />
+						<image :src="item&&item.dictValue" style="width: 100%;" mode="widthFix" />
 					</swiper-item>
-					<!-- 		<swiper-item>
-						<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/banner/banner2_3x.png"
-							style="width: 100%;" mode="widthFix" />
-					</swiper-item> -->
 				</swiper>
 			</uni-swiper-dot>
 		</view>
@@ -64,7 +60,6 @@
 									:startDate="startDate" :endDate="endDate" :showMonth="false"
 									@change="changeCalendar" @confirm="changeCalendar" @close="close" />
 								<view style="display: flex; justify-content: center; align-items: center;">
-									<!-- <button class="bottom-btn" @click="closePopup">确定</button> -->
 									<image @click="closePopup" style="width: 670rpx; height: 80rpx;" slot='cover' src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/yesButton.png" />
 								</view>
 							</view>
@@ -76,11 +71,11 @@
 					<view style="display: flex;">
 						<view @click="getOrder(true)" style="margin-right: 20rpx;">
 							<image style="width: 304rpx; height: 100rpx;" slot='cover'
-								src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/OrderByCompanion.png">
+								src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/OrderByCompanion.png" />
 						</view>
 						<view @click="getOrder(false)">
 							<image style="width: 304rpx; height: 100rpx;"
-								src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/OrderBySystem.png">
+								src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/OrderBySystem.png" />
 						</view>
 					</view>
 				</view>
@@ -117,13 +112,11 @@
 											<text class="card-type-text">专业喂养</text>
 											<text class="card-type-text">专业遛狗</text>
 										</view>
-										<view class="card-time">有效期至: {{item.availableEndTime.slice(0, 16)}}</view>
+										<view class="card-time">有效期至: {{item && item.availableEndTime ? item.availableEndTime.slice(0, 16) : ''}}</view>
 									</view>
 									<view>
-										<!-- <u-button @click="receiveCoupon(item.id)" shape="circle" size="mini"
-											color="#ffaa48" text="立即领取"></u-button> -->
 										<view style="width: 132rpx;height: 52rpx;background-color: #FFAA48; display: flex;align-items: center;justify-content: center;border-radius: 56rpx;">
-											<text style="font-size: 24rpx; font-weight: 500; color: #FFFFFF;">立即领取</text>
+											<text @click="receiveCoupon(item.id)" style="font-size: 24rpx; font-weight: 500; color: #FFFFFF;">立即领取</text>
 										</view>
 									</view>
 								</view>
@@ -132,7 +125,7 @@
 								<view class="card-bottom-text">
 									优惠券不可兑换现金
 								</view>
-								<view class="card-bottom-text">
+								<view class="card-bottom-text" @click="showRulePopup(item)">
 									查看详细规则>
 								</view>
 							</view>
@@ -160,7 +153,7 @@
 					<view class="companion-item">
 						<view class="companion-info">
 							<image class="companion-img" slot='cover'
-								:src="defaultCompanion&&defaultCompanion.staffImages&&defaultCompanion.staffImages.length>0?defaultCompanion.staffImages[0].url:defaultStaffIamge">
+								:src="defaultCompanion.staffImages && defaultCompanion.staffImages.length > 0 ? defaultCompanion.staffImages[0].url : defaultStaffIamge">
 							</image>
 							<view class="companion-info-1">
 								<view class="companion-info-2">
@@ -169,8 +162,7 @@
 											{{defaultCompanion.name}}
 										</view>
 										<view class="companion-sex">
-											<img :src="defaultCompanion.gender=='1'?'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/sex_m.png':
-														'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/sex_f.png'" alt="sex"
+											<image :src="defaultCompanion.gender == '1' ? 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/sex_m.png' : 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/sex_f.png'" alt="sex"
 												style="width: 40rpx;height: 40rpx;" />
 										</view>
 									</view>
@@ -244,8 +236,8 @@
 		</view>
 
 		<view class="service-content">
-			<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/second_stage/ysbz.png"
-				style="width: 100%;" mode="widthFix" alt="service">
+			<image src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/second_stage/ysbz.png"
+				style="width: 100%;" mode="widthFix" alt="service" />
 		</view>
 
 		<view class="card-container">
@@ -271,7 +263,7 @@
 		<view>
 			<image style="height: 132rpx; width: 710rpx; margin: 0 20rpx 20rpx 20rpx;"
 				slot='cover'
-				src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/joinus.png">
+				src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/joinus.png" />
 		</view>
 
 		<Kefu></Kefu>
@@ -279,7 +271,6 @@
 			<view class="details-subscribe">
 				<view @click="getCoupon" class="details-btn">点击领取到卡包</view>
 			</view>
-			<!-- 领取弹窗 -->
 			<view v-if="showMask" @closeMask="closeMask">
 				<view class="mask-coupon" @click="closeMask">
 					<view class="wx-coupon">
@@ -290,7 +281,6 @@
 						<view class="content">
 							优惠券列表显示
 						</view>
-						<!-- 小程序领券插件 -->
 						<view class="" v-for="(item,index) in couponList" :key="index">
 							<send-coupon @sendcoupon="getSendCoupon" @userconfirm="redirectuser" :sign="item.sign"
 								:send_coupon_params="item.sendCouponParams"
@@ -304,6 +294,36 @@
 			</view>
 		</view>
 
+		<!-- 优惠券详细规则弹窗 -->
+		<uni-popup ref="rulePopup" type="center">
+			<view class="rule-popup">
+				<view class="rule-popup-title">优惠券详细规则</view>
+				<view class="rule-popup-content">
+					<view class="rule-item">
+						<view class="rule-label">名称：</view>
+						<view class="rule-value">{{currentCoupon && currentCoupon.stockName || ''}}</view>
+					</view>
+					<view class="rule-item">
+						<view class="rule-label">折扣：</view>
+						<view class="rule-value">{{getDiscountText(currentCoupon)}}</view>
+					</view>
+					<view class="rule-item">
+						<view class="rule-label">使用规则：</view>
+						<view class="rule-value">可用于专业喂养和专业遛狗服务</view>
+					</view>
+					<view class="rule-item">
+						<view class="rule-label">有效日期：</view>
+						<view class="rule-value">{{currentCoupon && currentCoupon.availableEndTime ? currentCoupon.availableEndTime.slice(0, 16) : ''}}</view>
+					</view>
+					<view class="rule-item">
+						<view class="rule-label">特别说明：</view>
+						<view class="rule-value">单笔订单仅限使用1张优惠券；优惠券仅限用户本人使用，不可赠送、不可提现、不得找零。</view>
+					</view>
+				</view>
+				<view class="rule-popup-close" @click="closeRulePopup">关闭</view>
+			</view>
+		</uni-popup>
+
 	</view>
 </template>
 
@@ -317,19 +337,20 @@
 		getOpenId,
 		receiveCoupon,
 	} from "@/api/system/user"
-	import {
-		getCompanionList
-	} from "@/api/system/companion"
 	import {
 		setToken,
 		getToken,
 		getOpenIdKey,
 		setOpenIdKey
 	} from '@/utils/auth'
+    import { getTeacherListIndex } from '@/api/home'
 	import Kefu from './common/kefu.vue'
 	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
 	import NewUserCoupon from './components/NewUserCoupon.vue';
+	import positionMixin from '@/mixins/position.js';
+	
 	export default {
+		mixins: [positionMixin],
 		data() {
 			return {
 				current: 0,
@@ -387,6 +408,7 @@
 					num: "47131",
 					numTime: "2024.12.12",
 				},
+				currentCoupon: null,
 			}
 		},
 		components: {
@@ -400,12 +422,9 @@
 		},
 		methods: {
 			checkNewUser() {
-				// 检查是否为新用户，这里可以根据实际需求修改判断逻辑
-				// 例如：检查本地存储中是否有首次访问的标记
 				const isFirstVisit = !uni.getStorageSync('hasVisited');
 				if (isFirstVisit) {
 					this.isNewUser = true;
-					// 设置访问标记
 					uni.setStorageSync('hasVisited', true);
 				}
 			},
@@ -413,11 +432,9 @@
 				this.isNewUser = false;
 			},
 			handleGetCoupon() {
-				// 如果用户已登录，则直接调用领券方法
 				if (getToken()) {
 					this.getCoupon();
 				} else {
-					// 未登录，跳转到登录页面
 					uni.navigateTo({
 						url: '/pages/personalCenter/index'
 					});
@@ -475,11 +492,9 @@
 			changeCalendar(e) {
 				console.log('change 返回:', e)
 				this.selectedDateShowText = ''
-				// 选中日期
 				const selectedValue = this.selectedDate.find(item => item.date === e.fulldate)
 				console.log('const selectedValue', selectedValue)
 				if (selectedValue) {
-					// 存在则移除
 					this.selectedDate = this.selectedDate.filter(item => item.date !== e.fulldate);
 					this.allInfo.selectedDate = this.selectedDate;
 				} else {
@@ -518,7 +533,6 @@
 				let tomorrow = new Date()
 				tomorrow.setDate(tomorrow.getDate() + 2);
 				this.startDate = this.formatDate(tomorrow);
-				// 获取三个月后的日期
 				let threeMonthsLater = new Date();
 				threeMonthsLater.setMonth(threeMonthsLater.getMonth() + 3);
 				this.endDate = this.formatDate(threeMonthsLater);
@@ -531,9 +545,8 @@
 			},
 			getLocationInfo() {
 				wx.chooseLocation({
-					type: 'gcj02', // 坐标系，默认为 wgs84 返回 gps 原始坐标，gcj02 返回可用于 wx.openLocation 的坐标
+					type: 'gcj02',
 					success: (res) => {
-						// 成功回调
 						this.isCheckLocation = true
 						this.locationName = res.address
 						this.locationLongitude = res.longitude
@@ -545,18 +558,26 @@
 						this.allInfo.locationLongitude = res.longitude
 						this.allInfo.locationLatitude = res.latitude
 						this.allInfo.locationAddress = res.address
+						
+						// 保存位置信息到Vuex
+						this.$store.commit('setPosition', {
+							address: res.address,
+							longitude: res.longitude,
+							latitude: res.latitude
+						});
+						
+						// 获取周边伴宠师
+						this.getCompanionList();
 					},
 					fail: (err) => {
-						// 失败回调
 						console.error('选择位置失败：', err);
 					}
 				});
 			},
 			getLocationFirst() {
 				wx.chooseLocation({
-					type: 'gcj02', // 坐标系，默认为 wgs84 返回 gps 原始坐标，gcj02 返回可用于 wx.openLocation 的坐标
+					type: 'gcj02',
 					success: (res) => {
-						// 成功回调
 						this.isCheckLocation = true
 						this.locationName = res.address
 						this.locationLongitude = res.longitude
@@ -567,44 +588,87 @@
 						this.allInfo.locationLongitude = res.longitude
 						this.allInfo.locationLatitude = res.latitude
 						this.allInfo.locationAddress = res.address
-						this.getCompanionList()
+						
+						// 保存位置信息到Vuex
+						this.$store.commit('setPosition', {
+							address: res.address,
+							longitude: res.longitude,
+							latitude: res.latitude
+						});
+						
+						// 获取周边伴宠师
+						this.getCompanionList();
 					},
 					fail: (err) => {
-						// 失败回调
 						console.error('选择位置失败：', err);
 					}
 				});
 			},
 			getCompanionList() {
-				// let data = {
-				// 	longitude: this.locationLongitude,
-				// 	latitude: this.locationLatitude,
-				// 	petTypes: this.selectedPet,
-				// 	staffName: '',
-				// 	address: this.locationAddress
-				// }
+				// 构建参数，使用当前位置坐标
 				let data = {
-					address: "上海市浦东新区浦东南路150弄",
-					latitude: 29.56471,
-					longitude: 106.55073,
+					address: this.locationAddress || "上海市浦东新区浦东南路150弄",
+					latitude: this.locationLatitude || 31.22514,
+					longitude: this.locationLongitude || 121.49857,
 					petTypes: ["1", "2"],
-					staffName: "君"
+					staffName: ""
 				}
-				console.log('data', data);
-				getCompanionList(data).then(response => {
-					if (response.code == 200) {
-						// this.companionList = response.rows
-						this.defaultCompanion.name = response.rows[0].name
-						this.defaultCompanion.gender = response.rows[0].gender
-						this.defaultCompanion.star = response.rows[0].id
-						this.defaultCompanion.distance = response.rows[0].id
-						this.defaultCompanion.shortDescription = response.rows[0].shortDescription
-						this.defaultCompanion.staffImages = response.rows[0].staffImages
-						this.defaultCompanion.year = 4
-						this.defaultCompanion.record = 11
-						this.defaultCompanion.serviceNum = 13
+				console.log('获取周边伴宠师参数:', data);
+				
+				// 保存当前位置到Vuex，让position mixin能使用
+				this.$store.commit('setPosition', {
+					address: this.locationAddress,
+					longitude: this.locationLongitude,
+					latitude: this.locationLatitude
+				});
+				
+				getTeacherListIndex(data).then(response => {
+					if (response.code == 200 && response.rows && response.rows.length > 0) {
+						const nearbyTeacher = response.rows[0];
+						console.log('伴宠师原始数据:', nearbyTeacher);
+						
+						// 如果伴宠师有地址信息，使用mixin的calculateDistanceAddress计算距离
+						let distance = 0;
+						if (nearbyTeacher.addressList && nearbyTeacher.addressList.length > 0) {
+							distance = this.calculateDistanceAddress(nearbyTeacher.addressList);
+						} else if (nearbyTeacher.latitude && nearbyTeacher.longitude) {
+							// 如果没有地址列表但有经纬度信息，则构造地址对象
+							const addressList = [{
+								latitude: nearbyTeacher.latitude,
+								longitude: nearbyTeacher.longitude
+							}];
+							distance = this.calculateDistanceAddress(addressList);
+						}
+						
+						// 处理用户图片
+						let userImageUrl = "";
+						if (typeof nearbyTeacher.userImage === 'string') {
+							userImageUrl = nearbyTeacher.userImage;
+						} else if (nearbyTeacher.userImage && Array.isArray(nearbyTeacher.userImage) && nearbyTeacher.userImage.length > 0) {
+							userImageUrl = nearbyTeacher.userImage[0].url || "";
+						}
+						
+						// 构建伴宠师信息对象
+						this.defaultCompanion = {
+							name: nearbyTeacher.userName || '宠小二',
+							gender: nearbyTeacher.gender || '1', // 性别，1-男，2-女
+							star: nearbyTeacher.likeNum || 0,
+							distance: distance.toFixed(1),
+							shortDescription: nearbyTeacher.shortDescription || '专业伴宠师，用心照顾每一位小宠物',
+							staffImages: [{
+								url: userImageUrl || "https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png"
+							}],
+							year: nearbyTeacher.serviceAge || 1, // 服务年限
+							record: nearbyTeacher.commentNum || 0, // 评价数
+							serviceNum: nearbyTeacher.serviceSummaryNum || 0 // 服务小结数
+						}
+						
+						console.log('周边伴宠师信息:', this.defaultCompanion);
+					} else {
+						console.log('没有找到周边伴宠师或返回数据有误');
 					}
-					console.log(response);
+				}).catch(err => {
+					console.error('获取周边伴宠师失败:', err);
 				})
 			},
 			getOrder(value) {
@@ -625,7 +689,6 @@
                         })
 
 						uni.navigateTo({
-							// url: '/pages/companionPetList/companionPetList',
 							url: `/pages/companionPetList/companionPetList?info=` 
                             + encodeURIComponent(JSON
 								.stringify(this.allInfo))
@@ -635,22 +698,20 @@
                     this.$store.commit('setPosition', {})
                     this.buyInfo.teacher = null
 					uni.navigateTo({
-						// url: '/pages_order/order/payOrderSuccessful',
 						url: '/pages/newOrder/serviceNew',
-						// url: '/pages/newOrder/serviceNew2',
 					});
 				}
 			},
 			getCoupon() {
-				getCouponList().then(res => {
-					if (res.code == 200) {
-						this.couponList = res.rows
-						this.showMask = true
-					} else {
-						this.$modal.showToast('获取优惠券失败')
-					}
+				// getCouponList().then(res => {
+				// 	if (res.code == 200) {
+				// 		this.couponList = res.rows
+				// 		this.showMask = true
+				// 	} else {
+				// 		this.$modal.showToast('获取优惠券失败')
+				// 	}
 
-				})
+				// })
 
 			},
 			getCouponListAuth() {
@@ -689,20 +750,28 @@
 				})
 			},
 			getCouponListNoAuth() {
-				console.log('进入 getCouponListNoAuth：');
-				getCouponListNoAuth().then(res => {
-					if (res.code == 200) {
-						this.couponData = res.rows
-					} else {
-						this.$modal.showToast('获取优惠券失败')
-					}
-
-				})
+				// console.log('进入 getCouponListNoAuth：');
+				// getCouponListNoAuth().then(res => {
+				// 	if (res.code == 200) {
+				// 		if (res.rows && Array.isArray(res.rows)) {
+				// 			this.couponData = res.rows.filter(item => item !== null);
+				// 			console.log("优惠券数据加载成功：", this.couponData);
+				// 		} else if (res.data && Array.isArray(res.data)) {
+				// 			this.couponData = res.data.filter(item => item !== null);
+				// 			console.log("优惠券数据加载成功：", this.couponData);
+				// 		} else {
+				// 			console.log("获取优惠券数据格式异常:", res);
+				// 		}
+				// 	} else {
+				// 		this.$modal.showToast('获取优惠券失败')
+				// 	}
+				// }).catch(err => {
+				// 	console.error("获取优惠券列表出错:", err);
+				// })
 			},
 			closeMask() {
 				this.showMask = false
 			},
-			// 点击领券获取优惠券信息
 			getSendCoupon(res) {
 				let that = this
 				console.log('res', res)
@@ -733,7 +802,6 @@
 					that.showMask = false
 				}
 			},
-			// 点击确认收券按钮后回调
 			redirectuser() {},
 			getBanner() {
 				getBannerList().then(res => {
@@ -770,9 +838,6 @@
 			},
 			goDetails(item) {
 				if (item) {
-					// uni.navigateTo({
-					// 	url: `/pages/details/successful`
-					// });
 					uni.navigateTo({
 						url: `/pages/details/detail?id=${item.id}`
 					});
@@ -813,7 +878,6 @@
 						this.getOpenId(loginRes.code)
 					},
 					fail: function(error) {
-						// 授权失败处理
 						uni.showToast('授权失败，请授权后再试')
 					}
 				});
@@ -831,23 +895,80 @@
 					}
 				})
 			},
+			showRulePopup(coupon) {
+				if (!coupon) {
+					console.warn('尝试显示空优惠券详情');
+					return;
+				}
+				this.currentCoupon = coupon;
+				this.$refs.rulePopup.open();
+			},
+			closeRulePopup() {
+				this.$refs.rulePopup.close();
+			},
+			getDiscountText(coupon) {
+				if (!coupon || !coupon.stockType) return '';
+
+				if (coupon.stockType === 'PNORMAL') {
+					return '满100可减10元';
+				} else if (coupon.stockType === 'PDISCOUNT') {
+					return '打8折';
+				} else if (coupon.stockType === 'PTRAIL') {
+					return '免费体验一次';
+				}
+				return '';
+			},
 		},
 
 
+		onShow() {
+			if (!getToken() || !getOpenIdKey()) {
+				this.login()
+			}
+			if(this.$globalData.mainSku.length < 1 || !this.$globalData.mainSku[0].price){
+				// 获取主产品
+				this.getProductList()
+			}
+			this.currentAddress = this.$globalData.newOrderData.currentAddress
+			if(this.currentAddress&&this.currentAddress.name){
+				this.isAddressSelected=true
+			}
+			this.currentPets = this.$globalData.newOrderData.currentPets
+			if(this.currentPets&&this.currentPets.length>0){
+				this.isPetSelected=true
+			}
+			this.needPreFamiliarize = this.$globalData.newOrderData.needPreFamiliarize
+			// 初始化伴宠师等级
+			if(this.$globalData.newOrderData.companionLevel) {
+				this.companionLevel = this.$globalData.newOrderData.companionLevel
+			}
+			
+			// 获取周边伴宠师数据
+			this.getCompanionList();
+		},
+		
 		onLoad: function() {
 			this.init()
 			this.getPeopleList()
 			this.getProductList()
 			this.getBanner()
-			// this.getCouponListNoAuth()
 			const accountInfo = wx.getAccountInfoSync();
 			this.envVersion = accountInfo.miniProgram.envVersion;
 			if (!getToken() || !getOpenIdKey()) {
 				this.login()
 			} else {
-				// this.getLocationFirst()
-				this.getCouponListAuth()
 			}
+            this.getCouponListAuth()
+			
+			// 获取优惠券列表（无需登录）
+			this.getCouponListNoAuth()
+			
+			// 设置默认位置，这样即使用户不选择位置也能显示一些伴宠师
+			this.$store.commit('setPosition', {
+				address: "上海市浦东新区浦东南路150弄",
+				longitude: 121.49857,
+				latitude: 31.22514
+			});
 		}
 	}
 </script>
@@ -859,12 +980,10 @@
 
 	.home-content {
 		position: relative;
-		// background: linear-gradient(360deg, #F5F5F7 0%, #FFBF60 99%);
 
 
 		.swiper {
 			height: calc(100vw * 1098/1125);
-			// background-image: linear-gradient(180deg, #FFBF60 0%, #FFBF60 90%, #ffffff 99.41%);
 		}
 
 		.banner {
@@ -879,15 +998,9 @@
 		.float-button {
 			position: fixed;
 			bottom: 150px;
-			/* 距离底部的距离 */
 			right: 10px;
-			/* 距离右侧的距离 */
 			width: 50px;
-			/* 按钮的宽度 */
 			height: 50px;
-
-			/* 按钮的高度 */
-			/* 其他样式 */
 			.kf-btn {
 				background-color: rgba(255, 255, 255, 1);
 				height: 52px;
@@ -944,17 +1057,7 @@
 					align-items: center;
 					width: 100%;
 					padding: 10px 0;
-					// background: #fff;
-					// background: #f6f5f8;
-					// border: 1px solid #FFBF60;
 					border-radius: 8px 8px 0 0;
-					// -webkit-mask-image: radial-gradient(circle at 88px 4px, transparent 4px, #d8d8d8 4.5px), radial-gradient(closest-side circle at 50%, #d8d8d8 99%, transparent 100%);
-					// -webkit-mask-size: 100%, 2px 4px;
-					// -webkit-mask-repeat: repeat, repeat-y;
-					// -webkit-mask-position: 0 -4px, 87px;
-					// -webkit-mask-composite: source-out;
-					// mask-composite: subtract;
-					// background: linear-gradient(45deg, orange, red);
 				}
 
 				.card-bottom {
@@ -984,7 +1087,6 @@
 				.card-center {
 					display: flex;
 					flex-direction: column;
-					// align-items: center;
 
 					.card-center-top {
 						width: 40rpx;
@@ -1011,7 +1113,6 @@
 					padding: 0 16rpx 0 0;
 					display: flex;
 					flex: 1;
-					/* flex-direction: column; */
 					justify-content: space-between;
 					align-items: center;
 					height: 60px;
@@ -1026,42 +1127,6 @@
 						top: -10px;
 					}
 				}
-
-				.card-info {
-					margin: 0;
-					font-size: 28rpx;
-					line-height: 28rpx;
-					color: #333333;
-					font-weight: 500;
-				}
-
-				.card-type {
-					font-size: 24rpx;
-					font-weight: 400;
-					line-height: 24rpx;
-					font-weight: 400;
-					color: #AAAAAA;
-					margin-top: 10rpx;
-
-					.card-type-text {
-						color: #FFAA48;
-						font-size: 24rpx;
-						font-weight: 400;
-						line-height: 24rpx;
-						border: #FFAA48 1px solid;
-						border-radius: 7rpx;
-						margin-left: 8rpx;
-					}
-				}
-
-				.card-time {
-					font-size: 24rpx;
-					font-weight: 400;
-					line-height: 24rpx;
-					font-weight: 400;
-					color: #AAAAAA;
-					margin-top: 10rpx;
-				}
 			}
 		}
 
@@ -1138,7 +1203,6 @@
 								.companion-name {
 									color: #333;
 									font-size: 32rpx;
-									// line-height: 32rpx;
 									margin-right: 10rpx;
 									font-weight: 900;
 									font-style: normal;
@@ -1354,7 +1418,6 @@
 		}
 	}
 
-	/* #ifndef APP-NVUE */
 	page {
 		display: flex;
 		flex-direction: column;
@@ -1364,8 +1427,6 @@
 		height: auto;
 	}
 
-	/* #endif */
-
 	.text {
 		text-align: center;
 		font-size: 26rpx;
@@ -1400,9 +1461,7 @@
 	}
 
 	.swiper-item {
-		/* #ifndef APP-NVUE */
 		display: flex;
-		/* #endif */
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
@@ -1426,7 +1485,6 @@
 	}
 
 	.service-content-img {
-		// height: 208px;
 		padding: 5px;
 		margin-top: 5px;
 		border-radius: 8px;
@@ -1479,7 +1537,6 @@
 		font-size: 10px;
 		font-style: normal;
 		line-height: 14px;
-		/* 140% */
 		position: absolute;
 		top: 15px;
 		left: 0;
@@ -1531,11 +1588,8 @@
 	.text-wrapper {
 		position: absolute;
 		bottom: 83px;
-		/* 根据需要调整文字距离图片底部的距离 */
 		left: 10px;
-		/* 根据需要调整文字距离图片左边的距离 */
 		color: #fff;
-		/* 根据需要调整文字颜色 */
 		font-size: 10px;
 		font-weight: blod;
 		font-family: PingFang SC;
@@ -1632,9 +1686,7 @@
 	@media screen and (min-width: 500px) {
 		.uni-swiper-dot-box {
 			width: 400px;
-			/* #ifndef APP-NVUE */
 			margin: 0 auto;
-			/* #endif */
 			margin-top: 8px;
 		}
 
@@ -1642,4 +1694,54 @@
 			width: 100%;
 		}
 	}
+
+	/* 优惠券规则弹窗样式 */
+	.rule-popup {
+		width: 600rpx;
+		background-color: #FFFFFF;
+		border-radius: 16rpx;
+		overflow: hidden;
+	}
+
+	.rule-popup-title {
+		height: 100rpx;
+		line-height: 100rpx;
+		text-align: center;
+		font-size: 32rpx;
+		font-weight: 600;
+		color: #FFFFFF;
+		background-color: #FFAA48;
+	}
+
+	.rule-popup-content {
+		padding: 30rpx;
+	}
+
+	.rule-item {
+		display: flex;
+		margin-bottom: 20rpx;
+	}
+
+	.rule-label {
+		width: 140rpx;
+		font-size: 28rpx;
+		color: #666666;
+		flex-shrink: 0;
+	}
+
+	.rule-value {
+		flex: 1;
+		font-size: 28rpx;
+		color: #333333;
+		line-height: 40rpx;
+	}
+
+	.rule-popup-close {
+		height: 90rpx;
+		line-height: 90rpx;
+		text-align: center;
+		font-size: 30rpx;
+		color: #FFAA48;
+		border-top: 1px solid #EEEEEE;
+	}
 </style>

pages/newOrder/confirmOrder.vue

@@ -683,6 +683,8 @@
 				if(this.buyInfo.teacher){
 					order.teacherId = this.buyInfo.teacher.userId
 				}else{
+                    //打印
+                    console.log(this.$globalData.newOrderData.companionLevel);
 					order.companionLevel = ['', 'junior', 'senior'].indexOf(this.$globalData.newOrderData.companionLevel)
 				}
 				

pages/newOrder/serviceNew.vue

@@ -244,7 +244,9 @@
 			// 初始化伴宠师等级
 			if(this.$globalData.newOrderData.companionLevel) {
 				this.companionLevel = this.$globalData.newOrderData.companionLevel
-			}
+			}else{
+                this.$globalData.newOrderData.companionLevel = this.companionLevel
+            }
 		},
 		methods:{
 			selectAddress(){

pages_order/order/orderDetail.vue

@@ -28,6 +28,9 @@
 			<view class="footer-btn pay-btn" v-if="orderDetail.status === '1'" @click="goToPay">
 				<text>去付款</text>
 			</view>
+			<!-- <view class="footer-btn modify-btn" v-if="orderDetail.status != 0 && orderDetail.status != 3" @click="modifyOrder">
+				<text>修改订单</text>
+			</view> -->
 			<view class="footer-btn review-btn" v-if="orderDetail.status === 4" @click="goToReview">
 				<text>评价订单</text>
 			</view>
@@ -208,6 +211,14 @@
 			// 处理取消订单
 			handleCancelOrder() {
 				// 待实现取消订单逻辑
+			},
+			
+			// 修改订单
+			modifyOrder() {
+				// 跳转到服务选择页面，并传递订单ID参数
+                uni.navigateTo({
+                    url: `/pages_order/order/orderModify?orderId=${this.orderId}`
+                });
 			}
 		}
 	}
@@ -252,6 +263,11 @@
 			color: #FFFFFF;
 		}
 		
+		.modify-btn {
+			background-color: #FFAA48;
+			color: #FFFFFF;
+		}
+		
 		.review-btn {
 			background-color: #FFAA48;
 			color: #FFFFFF;

pages_order/order/orderList.vue

@@ -69,6 +69,9 @@
 						<view class="action-btn pay-btn" v-if="order.status == 0" @click="goToPay(order.orderId)">
 							<text>去付款</text>
 						</view>
+						<!-- <view class="action-btn pay-btn" v-if="order.status == 1 || order.status == 2" @click="modifyOrder(order)">
+							<text>修改订单</text>
+						</view> -->
 						<view class="action-btn pay-btn" v-if="order.status == 4" @click="goToReview(order)">
 							<text>去评价</text>
 						</view>
@@ -311,6 +314,13 @@
 				this.currentOrder = order;
 				this.$refs.companionSelectPopup.open();
 			},
+			
+			// 修改订单
+			modifyOrder(order) {
+                uni.navigateTo({
+                    url: `/pages_order/order/orderModify?orderId=${order.orderId}`
+                });
+			},
 
 		},
 		onLoad() {

pages_order/order/orderModify.vue

@@ -1,66 +1,51 @@
 <template>
-	<view class="order-modify-page">
-		<!-- 页面头部 -->
-		<view class="page-header">
-			<text class="header-title">修改订单</text>
+	<view class="order-modify-container">
+		<view class="header">
+			<text class="title">修改订单</text>
 		</view>
 		
-		<!-- 订单内容区域 -->
-		<view class="order-modify-content">
-			<!-- 订单修改说明 -->
-			<view class="modify-notice">
-				<view class="notice-item">
-					<text class="notice-icon">🐾</text>
-					<text class="notice-text">您可以对<text class="highlight-text">未服务或未支付</text>的订单进行修改或取消</text>
-				</view>
-				<view class="notice-item">
-					<text class="notice-icon">🐾</text>
-					<text class="notice-text">若需修改已支付的服务项目，如「增加服务时间/服务项目」，可点击下方按钮【<text class="highlight-text">联系客服</text>】寻求帮助，感谢！</text>
-				</view>
+		<view class="content">
+			<!-- 加载状态 -->
+			<view class="loading-container" v-if="loading">
+				<view class="loading-circle"></view>
+				<text class="loading-text">加载中...</text>
 			</view>
 			
-			<!-- 服务修改信息 -->
-			<view class="modify-info-card">
-				<view class="card-title">
-					<text>服务修改信息</text>
+			<view v-else>
+				<view class="info-section">
+					<view class="section-title">修改说明</view>
+					<view class="info-content">
+						<view class="desc-text">修改订单不会额外收取任何费用，如需修改服务内容，请点击"修改服务"按钮。</view>
+					</view>
 				</view>
 				
-				<view class="info-content">
-					<view class="info-item">
-						<text class="info-label">联系人</text>
-						<text class="info-value">{{modifyInfo.contactName}}</text>
-					</view>
-					
-					<view class="info-item">
-						<text class="info-label">联系方式</text>
-						<text class="info-value">{{modifyInfo.contactPhone}}</text>
-					</view>
-					
-					<view class="info-item payment-method">
-						<text class="info-label">销售支持方式</text>
-						<view class="info-value payment-value">
-							<text>{{modifyInfo.paymentMethod}}</text>
-							<text class="arrow-right">></text>
+				<view class="info-section">
+					<view class="section-title">修改信息</view>
+					<view class="info-content">
+						<view class="info-item">
+							<text class="info-label">联系人</text>
+							<input class="info-value" type="text" v-model="modifyInfo.contactName" placeholder="请输入联系人姓名" />
+						</view>
+						
+						<view class="info-item">
+							<text class="info-label">联系方式</text>
+							<input class="info-value" type="text" v-model="modifyInfo.contactPhone" placeholder="请输入联系电话" />
+						</view>
+						
+						<view class="info-item payment-method">
+							<text class="info-label">销售支持方式</text>
+							<view class="info-value payment-value">
+								<input type="text" v-model="modifyInfo.paymentMethod" placeholder="请输入支付方式" />
+								<text class="arrow-right">></text>
+							</view>
 						</view>
 					</view>
 				</view>
-			</view>
-			
-			<!-- 修改原因 -->
-			<view class="modify-reason-card">
-				<view class="card-title">
-					<text>修改原因</text>
-				</view>
 				
-				<view class="reason-content">
-					<textarea 
-						class="reason-input" 
-						v-model="modifyReason" 
-						placeholder="请输入修改原因（选填）" 
-						maxlength="200"
-					></textarea>
-					<view class="word-count">
-						<text>{{modifyReason.length}}/200</text>
+				<view class="info-section">
+					<view class="section-title">修改原因</view>
+					<view class="info-content">
+						<textarea class="reason-input" v-model="modifyReason" placeholder="请输入修改原因（选填）"></textarea>
 					</view>
 				</view>
 			</view>
@@ -68,8 +53,8 @@
 		
 		<!-- 底部按钮区域 -->
 		<view class="order-modify-footer">
-			<view class="footer-btn cancel-service-btn" @click="$refs.cancelPopup.open()">
-				<text>取消服务</text>
+			<view class="footer-btn cancel-service-btn" @click="modifyOrder">
+				<text>修改服务</text>
 			</view>
 			<view class="footer-btn confirm-modify-btn" @click="confirmModify">
 				<text>确认修改</text>
@@ -88,320 +73,347 @@
 </template>
 
 <script>
-import CancelOrderPopup from '../../components/order/CancelOrderPopup.vue';
+import { getOrderDetail, updateOrder } from '@/api/order/order.js';
 
 export default {
 	components: {
-		CancelOrderPopup
 	},
 	data() {
 		return {
-			orderId: '', // 订单ID
+			loading: false,
+			orderId: null,
 			modifyInfo: {
-				contactName: '张小二',
-				contactPhone: '18888888888',
-				paymentMethod: '存子快递宝'
+				contactName: '',
+				contactPhone: '',
+				paymentMethod: '',
 			},
-			modifyReason: '', // 修改原因
-			showCancelOrderPopup: false // 是否显示取消订单弹窗
-		};
+			modifyReason: '',
+			showCancelOrderPopup: false,
+			originalOrderData: null
+		}
 	},
 	onLoad(options) {
-		// 获取路由参数中的订单ID
-		if (options.id) {
-			this.orderId = options.id;
-			// 加载订单数据
+		if (options.orderId) {
+			this.orderId = options.orderId;
 			this.loadOrderData();
+		} else {
+			uni.showToast({
+				title: '订单ID不存在',
+				icon: 'none'
+			});
+			setTimeout(() => {
+				uni.navigateBack();
+			}, 1500);
 		}
 	},
 	methods: {
 		// 加载订单数据
-		loadOrderData() {
-			// 这里应该调用API获取订单详情
-			// 示例代码：
-			/*
-			const params = {
-				openId: getOpenIdKey(),
-				orderId: this.orderId
-			};
+		async loadOrderData() {
+			if (!this.orderId) return;
 			
-			getOrderDetail(params).then(res => {
+			this.loading = true;
+			try {
+				const res = await getOrderDetail({ id: this.orderId });
 				if (res && res.code === 200) {
-					// 设置订单信息
-					this.modifyInfo = {
-						contactName: res.data.contactName,
-						contactPhone: res.data.contactPhone,
-						paymentMethod: res.data.paymentMethod
-					};
+					const orderData = res.data;
+					this.originalOrderData = JSON.parse(JSON.stringify(orderData));
+					
+					// 初始化修改信息
+					this.modifyInfo.contactName = orderData.contactName || '';
+					this.modifyInfo.contactPhone = orderData.contactPhone || '';
+					this.modifyInfo.paymentMethod = orderData.paymentMethod || '';
+				} else {
+					uni.showToast({
+						title: res.msg || '获取订单信息失败',
+						icon: 'none'
+					});
 				}
-			}).catch(err => {
-				console.error('获取订单详情失败', err);
+			} catch (error) {
+				console.error('获取订单数据失败', error);
 				uni.showToast({
-					title: '获取订单信息失败',
+					title: '网络异常，请稍后重试',
 					icon: 'none'
 				});
-			});
-			*/
-			
-			// 这里使用模拟数据
-			console.log('加载订单数据，ID:', this.orderId);
+			} finally {
+				this.loading = false;
+			}
 		},
 		
-		// 确认修改订单
-		confirmModify() {
-			// 这里应该调用API修改订单
-			// 示例代码：
-			/*
-			const params = {
-				openId: getOpenIdKey(),
-				orderId: this.orderId,
-				reason: this.modifyReason
-			};
+		// 确认修改
+		async confirmModify() {
+			// 表单验证
+			if (!this.modifyInfo.contactName.trim()) {
+				return uni.showToast({
+					title: '请输入联系人姓名',
+					icon: 'none'
+				});
+			}
 			
-			modifyOrder(params).then(res => {
+			if (!this.modifyInfo.contactPhone.trim()) {
+				return uni.showToast({
+					title: '请输入联系方式',
+					icon: 'none'
+				});
+			}
+			
+			// 验证手机号
+			const phoneReg = /^1[3-9]\d{9}$/;
+			if (!phoneReg.test(this.modifyInfo.contactPhone)) {
+				return uni.showToast({
+					title: '请输入正确的手机号码',
+					icon: 'none'
+				});
+			}
+			
+			// 检查是否有修改
+			const hasChanged = 
+				this.modifyInfo.contactName !== this.originalOrderData.contactName ||
+				this.modifyInfo.contactPhone !== this.originalOrderData.contactPhone ||
+				this.modifyInfo.paymentMethod !== this.originalOrderData.paymentMethod;
+				
+			if (!hasChanged) {
+				return uni.showToast({
+					title: '未检测到任何修改',
+					icon: 'none'
+				});
+			}
+			
+			this.loading = true;
+			try {
+				const updateData = {
+					id: this.orderId,
+					contactName: this.modifyInfo.contactName,
+					contactPhone: this.modifyInfo.contactPhone,
+					paymentMethod: this.modifyInfo.paymentMethod,
+					modifyReason: this.modifyReason || '客户修改订单信息'
+				};
+				
+				const res = await updateOrder(updateData);
 				if (res && res.code === 200) {
 					uni.showToast({
 						title: '订单修改成功',
 						icon: 'success'
 					});
-					// 修改成功后返回订单详情页
+					
 					setTimeout(() => {
 						uni.navigateBack();
 					}, 1500);
+				} else {
+					uni.showToast({
+						title: res.msg || '订单修改失败',
+						icon: 'none'
+					});
 				}
-			}).catch(err => {
-				console.error('修改订单失败', err);
+			} catch (error) {
+				console.error('订单修改失败', error);
 				uni.showToast({
-					title: '修改订单失败',
+					title: '网络异常，请稍后重试',
 					icon: 'none'
 				});
-			});
-			*/
-			
-			// 这里使用模拟数据，显示修改成功提示
-			uni.showToast({
-				title: '订单修改成功',
-				icon: 'success'
-			});
-			
-			// 1.5秒后返回订单详情页
-			setTimeout(() => {
-				uni.navigateBack();
-			}, 1500);
+			} finally {
+				this.loading = false;
+			}
+		},
+		
+		// 修改服务（跳转到下单流程）
+		modifyOrder() {
+            uni.navigateTo({
+                url: `/pages/newOrder/serviceNew?orderId=${this.orderId}&isModify=true`
+            });
 		},
 		
-		// 处理取消订单
-		handleCancelOrder(orderId) {
-			this.hideCancelPopup();
-			
-			// 这里应该调用API取消订单
-			// 示例代码：
-			/*
-			const params = {
-				openId: getOpenIdKey(),
-				orderId: this.orderId,
-				reason: this.modifyReason
-			};
-			
-			cancelOrder(params).then(res => {
-				if (res && res.code === 200) {
-					uni.showToast({
-						title: '订单已取消',
-						icon: 'success'
-					});
-					// 取消成功后返回订单列表页
-					setTimeout(() => {
-						uni.navigateBack({delta: 2});
-					}, 1500);
-				}
-			}).catch(err => {
-				console.error('取消订单失败', err);
-			});
-			*/
-			
-			// 这里使用模拟数据，显示取消成功提示
-			uni.showToast({
-				title: '订单已取消',
-				icon: 'success'
-			});
-			
-			// 1.5秒后返回订单列表页
-			setTimeout(() => {
-				uni.navigateBack({delta: 2});
-			}, 1500);
-		}
 	}
-};
+}
 </script>
 
 <style lang="scss" scoped>
-.order-modify-page {
+.order-modify-container {
 	background-color: #f5f5f5;
 	min-height: 100vh;
 	display: flex;
 	flex-direction: column;
 }
 
-.page-header {
+.header {
 	background-color: #FFAA48;
 	padding: 20rpx 30rpx;
 	color: #FFFFFF;
 	
-	.header-title {
+	.title {
 		font-size: 36rpx;
 		font-weight: bold;
 	}
 }
 
-.order-modify-content {
+.content {
 	flex: 1;
 	padding: 20rpx;
 }
 
-.modify-notice {
-	background-color: #FFF9F0;
-	border-radius: 20rpx;
-	padding: 20rpx;
+.loading-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	height: 300rpx;
+	margin-top: 100rpx;
+}
+
+.loading-circle {
+	width: 80rpx;
+	height: 80rpx;
+	border: 4rpx solid #FFAA48;
+	border-top-color: transparent;
+	border-radius: 50%;
+	animation: spin 1s linear infinite;
 	margin-bottom: 20rpx;
-	
-	.notice-item {
-		display: flex;
-		align-items: flex-start;
-		margin-bottom: 10rpx;
-		
-		&:last-child {
-			margin-bottom: 0;
-		}
-		
-		.notice-icon {
-			margin-right: 10rpx;
-			font-size: 28rpx;
-		}
-		
-		.notice-text {
-			font-size: 26rpx;
-			color: #666;
-			line-height: 1.5;
-			flex: 1;
-			
-			.highlight-text {
-				color: #FFAA48;
-			}
-		}
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
 	}
 }
 
-.modify-info-card, .modify-reason-card {
+.loading-text {
+	font-size: 28rpx;
+	color: #666;
+}
+
+.info-section {
 	background-color: #FFFFFF;
 	border-radius: 20rpx;
-	padding: 30rpx;
 	margin-bottom: 20rpx;
-	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+	overflow: hidden;
 }
 
-.card-title {
+.section-title {
 	font-size: 32rpx;
 	font-weight: bold;
-	color: #333;
-	margin-bottom: 20rpx;
+	padding: 20rpx;
+	border-bottom: 1px solid #EEEEEE;
+}
+
+.info-content {
+	padding: 20rpx;
+}
+
+.desc-text {
+	font-size: 28rpx;
+	color: #666;
+	line-height: 1.5;
+}
+
+.info-item {
 	display: flex;
 	align-items: center;
+	margin-bottom: 20rpx;
 	
-	&::before {
-		content: '';
-		display: inline-block;
-		width: 8rpx;
-		height: 32rpx;
-		background-color: #FFAA48;
-		margin-right: 16rpx;
-		border-radius: 4rpx;
+	&:last-child {
+		margin-bottom: 0;
+	}
+	
+	.info-label {
+		width: 180rpx;
+		font-size: 28rpx;
+		color: #666;
+	}
+	
+	.info-value {
+		flex: 1;
+		font-size: 28rpx;
+		color: #333;
+		padding: 10rpx;
+		border: 1px solid #EEEEEE;
+		border-radius: 8rpx;
 	}
 }
 
-.info-content {
-	.info-item {
+.payment-method {
+	.payment-value {
 		display: flex;
-		justify-content: space-between;
 		align-items: center;
-		padding: 20rpx 0;
-		border-bottom: 1px solid #EEEEEE;
-		
-		&:last-child {
-			border-bottom: none;
-		}
-		
-		.info-label {
-			font-size: 28rpx;
-			color: #666;
-		}
 		
-		.info-value {
-			font-size: 28rpx;
-			color: #333;
-		}
-		
-		&.payment-method {
-			.payment-value {
-				display: flex;
-				align-items: center;
-				
-				.arrow-right {
-					margin-left: 10rpx;
-					color: #999;
-				}
-			}
+		input {
+			flex: 1;
+			border: none;
+			padding: 0;
 		}
-	}
-}
-
-.reason-content {
-	.reason-input {
-		width: 100%;
-		height: 200rpx;
-		background-color: #F8F8F8;
-		border-radius: 10rpx;
-		padding: 20rpx;
-		font-size: 28rpx;
-		color: #333;
-		box-sizing: border-box;
-	}
-	
-	.word-count {
-		text-align: right;
-		margin-top: 10rpx;
 		
-		text {
+		.arrow-right {
 			font-size: 24rpx;
 			color: #999;
+			margin-left: 10rpx;
 		}
 	}
 }
 
-.order-modify-footer {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 20rpx 30rpx;
+.reason-input {
+	width: 100%;
+	height: 200rpx;
+	font-size: 28rpx;
+	padding: 20rpx;
+	box-sizing: border-box;
+	border: 1px solid #EEEEEE;
+	border-radius: 8rpx;
+}
+
+.footer {
+	padding: 30rpx 20rpx;
 	background-color: #FFFFFF;
 	border-top: 1px solid #EEEEEE;
 	
-	.footer-btn {
-		padding: 16rpx 30rpx;
-		border-radius: 30rpx;
-		font-size: 28rpx;
-		text-align: center;
-		width: 45%;
-	}
-	
-	.cancel-service-btn {
-		background-color: #F5F5F5;
-		color: #666;
-		border: 1px solid #DDDDDD;
+	.btn-container {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		
+		.btn {
+			flex: 1;
+			padding: 16rpx 30rpx;
+			border-radius: 30rpx;
+			text-align: center;
+			font-size: 30rpx;
+			margin: 0 10rpx;
+			
+			&:first-child {
+				margin-left: 0;
+			}
+			
+			&:last-child {
+				margin-right: 0;
+			}
+			
+			&:disabled {
+				opacity: 0.6;
+			}
+		}
+		
+		.modify-service {
+			background-color: #F5F5F5;
+			color: #666;
+			border: 1px solid #DDDDDD;
+		}
+		
+		.confirm-modify {
+			background-color: #FFAA48;
+			color: #FFFFFF;
+		}
+		
+		.cancel-order {
+			background-color: #F5F5F5;
+			color: #666;
+			border: 1px solid #DDDDDD;
+			width: 100%;
+		}
 	}
 	
-	.confirm-modify-btn {
-		background-color: #FFAA48;
-		color: #FFFFFF;
+	.mt-20 {
+		margin-top: 20rpx;
 	}
 }
 </style>