You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
407 lines
8.2 KiB
407 lines
8.2 KiB
<template>
|
|
<view class="order-modify-page">
|
|
<!-- 页面头部 -->
|
|
<view class="page-header">
|
|
<text class="header-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>
|
|
|
|
<!-- 服务修改信息 -->
|
|
<view class="modify-info-card">
|
|
<view class="card-title">
|
|
<text>服务修改信息</text>
|
|
</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>
|
|
</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>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部按钮区域 -->
|
|
<view class="order-modify-footer">
|
|
<view class="footer-btn cancel-service-btn" @click="$refs.cancelPopup.open()">
|
|
<text>取消服务</text>
|
|
</view>
|
|
<view class="footer-btn confirm-modify-btn" @click="confirmModify">
|
|
<text>确认修改</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 取消订单弹窗 -->
|
|
<cancel-order-popup
|
|
ref="cancelPopup"
|
|
@cancel="handleCancelOrder"
|
|
></cancel-order-popup>
|
|
|
|
<!-- 客服组件 -->
|
|
<Kefu></Kefu>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import CancelOrderPopup from '../../components/order/CancelOrderPopup.vue';
|
|
|
|
export default {
|
|
components: {
|
|
CancelOrderPopup
|
|
},
|
|
data() {
|
|
return {
|
|
orderId: '', // 订单ID
|
|
modifyInfo: {
|
|
contactName: '张小二',
|
|
contactPhone: '18888888888',
|
|
paymentMethod: '存子快递宝'
|
|
},
|
|
modifyReason: '', // 修改原因
|
|
showCancelOrderPopup: false // 是否显示取消订单弹窗
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
// 获取路由参数中的订单ID
|
|
if (options.id) {
|
|
this.orderId = options.id;
|
|
// 加载订单数据
|
|
this.loadOrderData();
|
|
}
|
|
},
|
|
methods: {
|
|
// 加载订单数据
|
|
loadOrderData() {
|
|
// 这里应该调用API获取订单详情
|
|
// 示例代码：
|
|
/*
|
|
const params = {
|
|
openId: getOpenIdKey(),
|
|
orderId: this.orderId
|
|
};
|
|
|
|
getOrderDetail(params).then(res => {
|
|
if (res && res.code === 200) {
|
|
// 设置订单信息
|
|
this.modifyInfo = {
|
|
contactName: res.data.contactName,
|
|
contactPhone: res.data.contactPhone,
|
|
paymentMethod: res.data.paymentMethod
|
|
};
|
|
}
|
|
}).catch(err => {
|
|
console.error('获取订单详情失败', err);
|
|
uni.showToast({
|
|
title: '获取订单信息失败',
|
|
icon: 'none'
|
|
});
|
|
});
|
|
*/
|
|
|
|
// 这里使用模拟数据
|
|
console.log('加载订单数据，ID:', this.orderId);
|
|
},
|
|
|
|
// 确认修改订单
|
|
confirmModify() {
|
|
// 这里应该调用API修改订单
|
|
// 示例代码：
|
|
/*
|
|
const params = {
|
|
openId: getOpenIdKey(),
|
|
orderId: this.orderId,
|
|
reason: this.modifyReason
|
|
};
|
|
|
|
modifyOrder(params).then(res => {
|
|
if (res && res.code === 200) {
|
|
uni.showToast({
|
|
title: '订单修改成功',
|
|
icon: 'success'
|
|
});
|
|
// 修改成功后返回订单详情页
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
}, 1500);
|
|
}
|
|
}).catch(err => {
|
|
console.error('修改订单失败', err);
|
|
uni.showToast({
|
|
title: '修改订单失败',
|
|
icon: 'none'
|
|
});
|
|
});
|
|
*/
|
|
|
|
// 这里使用模拟数据，显示修改成功提示
|
|
uni.showToast({
|
|
title: '订单修改成功',
|
|
icon: 'success'
|
|
});
|
|
|
|
// 1.5秒后返回订单详情页
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
}, 1500);
|
|
},
|
|
|
|
// 处理取消订单
|
|
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 {
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.page-header {
|
|
background-color: #FFAA48;
|
|
padding: 20rpx 30rpx;
|
|
color: #FFFFFF;
|
|
|
|
.header-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.order-modify-content {
|
|
flex: 1;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.modify-notice {
|
|
background-color: #FFF9F0;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modify-info-card, .modify-reason-card {
|
|
background-color: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 8rpx;
|
|
height: 32rpx;
|
|
background-color: #FFAA48;
|
|
margin-right: 16rpx;
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
|
|
.info-content {
|
|
.info-item {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.order-modify-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx 30rpx;
|
|
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;
|
|
}
|
|
|
|
.confirm-modify-btn {
|
|
background-color: #FFAA48;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
</style>
|