1054425342@qq.com
1 month ago
6 changed files with 3422 additions and 9 deletions
@ -0,0 +1,878 @@ |
|||||
|
<template> |
||||
|
<view class="aftersale-container"> |
||||
|
<!-- 订单信息 --> |
||||
|
<view class="order-section"> |
||||
|
<view class="section-title">订单信息</view> |
||||
|
<view class="order-card"> |
||||
|
<view class="order-header"> |
||||
|
<text class="order-no">订单号：{{ orderInfo.orderNo }}</text> |
||||
|
<text class="order-status">{{ getOrderStatusText(orderInfo.status) }}</text> |
||||
|
</view> |
||||
|
<view class="supplier-info"> |
||||
|
<text class="supplier-name">供应商：{{ orderInfo.supplierName }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 商品信息 --> |
||||
|
<view class="goods-section"> |
||||
|
<view class="section-title">选择售后商品</view> |
||||
|
<view class="goods-list"> |
||||
|
<view |
||||
|
class="goods-item" |
||||
|
v-for="goods in orderInfo.orderGoods" |
||||
|
:key="goods.id" |
||||
|
:class="{ 'selected': selectedGoods.includes(goods.id) }" |
||||
|
@click="toggleGoodsSelect(goods)" |
||||
|
> |
||||
|
<view class="goods-checkbox"> |
||||
|
<view class="checkbox" :class="{ 'checked': selectedGoods.includes(goods.id) }"> |
||||
|
<text class="checkbox-icon" v-if="selectedGoods.includes(goods.id)">✓</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="goods-image"> |
||||
|
<image :src="showImgJdsz(goods.goodsImg)" mode="aspectFill" /> |
||||
|
</view> |
||||
|
<view class="goods-info"> |
||||
|
<view class="goods-name">{{ goods.goodsTitle }}</view> |
||||
|
<view class="goods-sku" v-if="goods.skuName">{{ goods.skuName }}</view> |
||||
|
<view class="goods-meta"> |
||||
|
<text class="goods-price">¥{{ goods.price }}</text> |
||||
|
<text class="goods-quantity">×{{ goods.num }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 售后类型 --> |
||||
|
<view class="type-section"> |
||||
|
<view class="section-title">售后类型</view> |
||||
|
<view class="type-list"> |
||||
|
<view |
||||
|
class="type-item" |
||||
|
v-for="type in aftersaleTypes" |
||||
|
:key="type.value" |
||||
|
:class="{ 'selected': aftersaleForm.type === type.value }" |
||||
|
@click="selectType(type.value)" |
||||
|
> |
||||
|
<view class="type-radio"> |
||||
|
<view class="radio" :class="{ 'checked': aftersaleForm.type === type.value }"> |
||||
|
<view class="radio-dot" v-if="aftersaleForm.type === type.value"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="type-info"> |
||||
|
<text class="type-name">{{ type.name }}</text> |
||||
|
<text class="type-desc">{{ type.desc }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 售后原因 --> |
||||
|
<view class="reason-section"> |
||||
|
<view class="section-title">售后原因</view> |
||||
|
<view class="reason-list"> |
||||
|
<view |
||||
|
class="reason-item" |
||||
|
v-for="reason in reasonList" |
||||
|
:key="reason.value" |
||||
|
:class="{ 'selected': aftersaleForm.reason === reason.value }" |
||||
|
@click="selectReason(reason.value)" |
||||
|
> |
||||
|
<text class="reason-text">{{ reason.name }}</text> |
||||
|
<view class="reason-check" v-if="aftersaleForm.reason === reason.value">✓</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 问题描述 --> |
||||
|
<view class="description-section"> |
||||
|
<view class="section-title">问题描述</view> |
||||
|
<textarea |
||||
|
class="description-input" |
||||
|
v-model="aftersaleForm.description" |
||||
|
placeholder="请详细描述遇到的问题，以便我们更好地为您处理" |
||||
|
maxlength="500" |
||||
|
/> |
||||
|
<view class="char-count">{{ aftersaleForm.description.length }}/500</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 上传凭证 --> |
||||
|
<view class="upload-section"> |
||||
|
<view class="section-title">上传凭证（选填）</view> |
||||
|
<view class="upload-area"> |
||||
|
<view class="image-list"> |
||||
|
<view |
||||
|
class="image-item" |
||||
|
v-for="(image, index) in aftersaleForm.images" |
||||
|
:key="index" |
||||
|
> |
||||
|
<image class="uploaded-image" :src="image" mode="aspectFill" /> |
||||
|
<view class="delete-btn" @click="deleteImage(index)">×</view> |
||||
|
</view> |
||||
|
<view class="upload-btn" @click="chooseImage" v-if="aftersaleForm.images.length < 6"> |
||||
|
<text class="upload-icon">+</text> |
||||
|
<text class="upload-text">添加图片</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="upload-tip">最多可上传6张图片，支持jpg、png格式</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 联系方式 --> |
||||
|
<view class="contact-section"> |
||||
|
<view class="section-title">联系方式</view> |
||||
|
<view class="contact-form"> |
||||
|
<view class="form-item"> |
||||
|
<text class="form-label">联系人</text> |
||||
|
<input |
||||
|
class="form-input" |
||||
|
v-model="aftersaleForm.contactName" |
||||
|
placeholder="请输入联系人姓名" |
||||
|
/> |
||||
|
</view> |
||||
|
<view class="form-item"> |
||||
|
<text class="form-label">联系电话</text> |
||||
|
<input |
||||
|
class="form-input" |
||||
|
v-model="aftersaleForm.contactPhone" |
||||
|
placeholder="请输入联系电话" |
||||
|
type="number" |
||||
|
/> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 底部提交按钮 --> |
||||
|
<view class="submit-section"> |
||||
|
<button class="submit-btn" @click="submitAftersale" :disabled="!canSubmit"> |
||||
|
提交售后申请 |
||||
|
</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
orderId: '', |
||||
|
orderInfo: { |
||||
|
orderNo: '', |
||||
|
status: 0, |
||||
|
supplierName: '', |
||||
|
orderGoods: [] |
||||
|
}, |
||||
|
selectedGoods: [], // 选中的商品ID列表 |
||||
|
aftersaleForm: { |
||||
|
type: 1, // 售后类型：1-退货退款，2-换货，3-仅退款 |
||||
|
reason: '', // 售后原因 |
||||
|
description: '', // 问题描述 |
||||
|
images: [], // 上传的图片 |
||||
|
contactName: '', // 联系人 |
||||
|
contactPhone: '' // 联系电话 |
||||
|
}, |
||||
|
aftersaleTypes: [ |
||||
|
{ |
||||
|
value: 1, |
||||
|
name: '退货退款', |
||||
|
desc: '商品有质量问题，需要退货并退款' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
name: '换货', |
||||
|
desc: '商品有问题，需要更换同款商品' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
name: '仅退款', |
||||
|
desc: '未收到商品或商品严重损坏' |
||||
|
} |
||||
|
], |
||||
|
reasonList: [ |
||||
|
{ value: 'quality', name: '商品质量问题' }, |
||||
|
{ value: 'damage', name: '商品破损' }, |
||||
|
{ value: 'wrong', name: '发错商品' }, |
||||
|
{ value: 'description', name: '与描述不符' }, |
||||
|
{ value: 'logistics', name: '物流问题' }, |
||||
|
{ value: 'other', name: '其他原因' } |
||||
|
] |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
// 是否可以提交 |
||||
|
canSubmit() { |
||||
|
return ( |
||||
|
this.selectedGoods.length > 0 && |
||||
|
this.aftersaleForm.type && |
||||
|
this.aftersaleForm.reason && |
||||
|
this.aftersaleForm.description.trim() && |
||||
|
this.aftersaleForm.contactName.trim() && |
||||
|
this.aftersaleForm.contactPhone.trim() |
||||
|
); |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
if (options.orderId) { |
||||
|
this.orderId = options.orderId; |
||||
|
this.loadOrderInfo(); |
||||
|
this.loadUserInfo(); |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
showImgJdsz(img) { |
||||
|
if (!img) return '/static/images/default-goods.png'; |
||||
|
if (img.indexOf("https://") != -1 || img.indexOf("http://") != -1) { |
||||
|
return img; |
||||
|
} else { |
||||
|
return this.JDSU_IMG_URL + img; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 加载订单信息 |
||||
|
async loadOrderInfo() { |
||||
|
try { |
||||
|
this.Post( |
||||
|
{ orderId: this.orderId }, |
||||
|
'/framework/haveFeeling/order/detail', |
||||
|
'DES' |
||||
|
).then((res) => { |
||||
|
if (res.code == 200) { |
||||
|
this.orderInfo = res.data; |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: res.msg, |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} catch (error) { |
||||
|
console.error('加载订单信息失败:', error); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 加载用户信息 |
||||
|
loadUserInfo() { |
||||
|
const userInfo = uni.getStorageSync('userInfo'); |
||||
|
if (userInfo) { |
||||
|
const user = JSON.parse(userInfo); |
||||
|
this.aftersaleForm.contactName = user.nickName || ''; |
||||
|
this.aftersaleForm.contactPhone = user.phone || ''; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 获取订单状态文本 |
||||
|
getOrderStatusText(status) { |
||||
|
const statusMap = { |
||||
|
"-1": "已取消", |
||||
|
0: "待支付", |
||||
|
1: "已支付", |
||||
|
2: "已发货", |
||||
|
3: "已完成" |
||||
|
}; |
||||
|
return statusMap[status] || "未知"; |
||||
|
}, |
||||
|
|
||||
|
// 切换商品选择 |
||||
|
toggleGoodsSelect(goods) { |
||||
|
const index = this.selectedGoods.indexOf(goods.id); |
||||
|
if (index > -1) { |
||||
|
this.selectedGoods.splice(index, 1); |
||||
|
} else { |
||||
|
this.selectedGoods.push(goods.id); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 选择售后类型 |
||||
|
selectType(type) { |
||||
|
this.aftersaleForm.type = type; |
||||
|
}, |
||||
|
|
||||
|
// 选择售后原因 |
||||
|
selectReason(reason) { |
||||
|
this.aftersaleForm.reason = reason; |
||||
|
}, |
||||
|
|
||||
|
// 选择图片 |
||||
|
chooseImage() { |
||||
|
const remainCount = 6 - this.aftersaleForm.images.length; |
||||
|
uni.chooseImage({ |
||||
|
count: remainCount, |
||||
|
sizeType: ['compressed'], |
||||
|
sourceType: ['album', 'camera'], |
||||
|
success: (res) => { |
||||
|
this.uploadImages(res.tempFilePaths); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 上传图片 |
||||
|
async uploadImages(filePaths) { |
||||
|
uni.showLoading({ |
||||
|
title: '上传中...' |
||||
|
}); |
||||
|
|
||||
|
try { |
||||
|
for (let filePath of filePaths) { |
||||
|
const uploadResult = await this.uploadSingleImage(filePath); |
||||
|
if (uploadResult) { |
||||
|
this.aftersaleForm.images.push(uploadResult); |
||||
|
} |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('图片上传失败:', error); |
||||
|
uni.showToast({ |
||||
|
title: '图片上传失败', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} finally { |
||||
|
uni.hideLoading(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 上传单张图片 |
||||
|
uploadSingleImage(filePath) { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
uni.uploadFile({ |
||||
|
url: this.BASE_URL + '/framework/upload/image', |
||||
|
filePath: filePath, |
||||
|
name: 'file', |
||||
|
success: (res) => { |
||||
|
try { |
||||
|
const data = JSON.parse(res.data); |
||||
|
if (data.code === 200) { |
||||
|
resolve(data.data.url); |
||||
|
} else { |
||||
|
reject(new Error(data.msg)); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
reject(error); |
||||
|
} |
||||
|
}, |
||||
|
fail: (error) => { |
||||
|
reject(error); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 删除图片 |
||||
|
deleteImage(index) { |
||||
|
this.aftersaleForm.images.splice(index, 1); |
||||
|
}, |
||||
|
|
||||
|
// 提交售后申请 |
||||
|
async submitAftersale() { |
||||
|
if (!this.canSubmit) { |
||||
|
uni.showToast({ |
||||
|
title: '请完善售后信息', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 验证联系电话格式 |
||||
|
const phoneReg = /^1[3-9]\d{9}$/; |
||||
|
if (!phoneReg.test(this.aftersaleForm.contactPhone)) { |
||||
|
uni.showToast({ |
||||
|
title: '请输入正确的手机号', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
uni.showLoading({ |
||||
|
title: '提交中...' |
||||
|
}); |
||||
|
|
||||
|
try { |
||||
|
const params = { |
||||
|
orderId: this.orderId, |
||||
|
goodsIds: this.selectedGoods, |
||||
|
type: this.aftersaleForm.type, |
||||
|
reason: this.aftersaleForm.reason, |
||||
|
description: this.aftersaleForm.description, |
||||
|
images: this.aftersaleForm.images.join(','), |
||||
|
contactName: this.aftersaleForm.contactName, |
||||
|
contactPhone: this.aftersaleForm.contactPhone |
||||
|
}; |
||||
|
|
||||
|
this.Post( |
||||
|
params, |
||||
|
'/framework/haveFeeling/aftersale/submit', |
||||
|
'DES' |
||||
|
).then((res) => { |
||||
|
uni.hideLoading(); |
||||
|
if (res.code == 200) { |
||||
|
uni.showToast({ |
||||
|
title: '售后申请提交成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
setTimeout(() => { |
||||
|
uni.navigateBack(); |
||||
|
}, 1500); |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: res.msg || '提交失败', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} catch (error) { |
||||
|
uni.hideLoading(); |
||||
|
console.error('提交售后申请失败:', error); |
||||
|
uni.showToast({ |
||||
|
title: '提交失败', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.aftersale-container { |
||||
|
min-height: 100vh; |
||||
|
background-color: #f5f5f5; |
||||
|
padding-bottom: 100rpx; |
||||
|
} |
||||
|
|
||||
|
// 通用样式 |
||||
|
.section-title { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
margin-bottom: 24rpx; |
||||
|
} |
||||
|
|
||||
|
// 订单信息 |
||||
|
.order-section { |
||||
|
background-color: #fff; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.order-card { |
||||
|
background-color: #f8f9fa; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.order-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.order-no { |
||||
|
font-size: 26rpx; |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.order-status { |
||||
|
font-size: 24rpx; |
||||
|
color: #007aff; |
||||
|
background-color: #e6f3ff; |
||||
|
padding: 4rpx 12rpx; |
||||
|
border-radius: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.supplier-info { |
||||
|
.supplier-name { |
||||
|
font-size: 24rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 商品选择 |
||||
|
.goods-section { |
||||
|
background-color: #fff; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.goods-list { |
||||
|
.goods-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 20rpx 0; |
||||
|
border-bottom: 1rpx solid #f0f0f0; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
&.selected { |
||||
|
background-color: #f0f8ff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.goods-checkbox { |
||||
|
margin-right: 20rpx; |
||||
|
|
||||
|
.checkbox { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
border: 2rpx solid #ddd; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&.checked { |
||||
|
background-color: #007aff; |
||||
|
border-color: #007aff; |
||||
|
|
||||
|
.checkbox-icon { |
||||
|
color: #fff; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.goods-image { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
border-radius: 8rpx; |
||||
|
overflow: hidden; |
||||
|
margin-right: 20rpx; |
||||
|
|
||||
|
image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.goods-info { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.goods-name { |
||||
|
font-size: 26rpx; |
||||
|
color: #333; |
||||
|
font-weight: 600; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.goods-sku { |
||||
|
font-size: 22rpx; |
||||
|
color: #666; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.goods-meta { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.goods-price { |
||||
|
font-size: 24rpx; |
||||
|
color: #f56565; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.goods-quantity { |
||||
|
font-size: 22rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
// 售后类型 |
||||
|
.type-section { |
||||
|
background-color: #fff; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.type-list { |
||||
|
.type-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 24rpx 0; |
||||
|
border-bottom: 1rpx solid #f0f0f0; |
||||
|
|
||||
|
&:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
&.selected { |
||||
|
background-color: #f0f8ff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.type-radio { |
||||
|
margin-right: 20rpx; |
||||
|
|
||||
|
.radio { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
border: 2rpx solid #ddd; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&.checked { |
||||
|
border-color: #007aff; |
||||
|
|
||||
|
.radio-dot { |
||||
|
width: 20rpx; |
||||
|
height: 20rpx; |
||||
|
background-color: #007aff; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.type-info { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.type-name { |
||||
|
display: block; |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
font-weight: 600; |
||||
|
margin-bottom: 6rpx; |
||||
|
} |
||||
|
|
||||
|
.type-desc { |
||||
|
font-size: 22rpx; |
||||
|
color: #666; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
// 售后原因 |
||||
|
.reason-section { |
||||
|
background-color: #fff; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.reason-list { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.reason-item { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 16rpx 24rpx; |
||||
|
background-color: #f5f5f5; |
||||
|
border-radius: 24rpx; |
||||
|
border: 1rpx solid transparent; |
||||
|
transition: all 0.3s ease; |
||||
|
min-width: 140rpx; |
||||
|
|
||||
|
&.selected { |
||||
|
background-color: #e6f3ff; |
||||
|
border-color: #007aff; |
||||
|
color: #007aff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.reason-text { |
||||
|
font-size: 24rpx; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.reason-check { |
||||
|
position: absolute; |
||||
|
top: -8rpx; |
||||
|
right: -8rpx; |
||||
|
width: 24rpx; |
||||
|
height: 24rpx; |
||||
|
background-color: #007aff; |
||||
|
color: #fff; |
||||
|
border-radius: 50%; |
||||
|
font-size: 16rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
// 问题描述 |
||||
|
.description-section { |
||||
|
background-color: #fff; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.description-input { |
||||
|
width: 100%; |
||||
|
min-height: 200rpx; |
||||
|
background-color: #f8f9fa; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 20rpx; |
||||
|
font-size: 26rpx; |
||||
|
color: #333; |
||||
|
line-height: 1.6; |
||||
|
border: none; |
||||
|
resize: none; |
||||
|
} |
||||
|
|
||||
|
.char-count { |
||||
|
text-align: right; |
||||
|
font-size: 22rpx; |
||||
|
color: #999; |
||||
|
margin-top: 12rpx; |
||||
|
} |
||||
|
|
||||
|
// 上传凭证 |
||||
|
.upload-section { |
||||
|
background-color: #fff; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.upload-area { |
||||
|
.image-list { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 16rpx; |
||||
|
margin-bottom: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.image-item { |
||||
|
position: relative; |
||||
|
width: 160rpx; |
||||
|
height: 160rpx; |
||||
|
border-radius: 12rpx; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.uploaded-image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.delete-btn { |
||||
|
position: absolute; |
||||
|
top: -8rpx; |
||||
|
right: -8rpx; |
||||
|
width: 32rpx; |
||||
|
height: 32rpx; |
||||
|
background-color: #ff4757; |
||||
|
color: #fff; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 20rpx; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.upload-btn { |
||||
|
width: 160rpx; |
||||
|
height: 160rpx; |
||||
|
background-color: #f8f9fa; |
||||
|
border: 2rpx dashed #ddd; |
||||
|
border-radius: 12rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
color: #666; |
||||
|
|
||||
|
.upload-icon { |
||||
|
font-size: 48rpx; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.upload-text { |
||||
|
font-size: 22rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.upload-tip { |
||||
|
font-size: 22rpx; |
||||
|
color: #999; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 联系方式 |
||||
|
.contact-section { |
||||
|
background-color: #fff; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.contact-form { |
||||
|
.form-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 24rpx; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.form-label { |
||||
|
width: 160rpx; |
||||
|
font-size: 26rpx; |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.form-input { |
||||
|
flex: 1; |
||||
|
height: 80rpx; |
||||
|
background-color: #f8f9fa; |
||||
|
border-radius: 8rpx; |
||||
|
padding: 0 20rpx; |
||||
|
font-size: 26rpx; |
||||
|
color: #333; |
||||
|
border: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 提交按钮 |
||||
|
.submit-section { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
background-color: #fff; |
||||
|
padding: 20rpx 30rpx; |
||||
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); |
||||
|
border-top: 1rpx solid #eee; |
||||
|
} |
||||
|
|
||||
|
.submit-btn { |
||||
|
width: 100%; |
||||
|
height: 88rpx; |
||||
|
background-color: #007aff; |
||||
|
color: #fff; |
||||
|
border-radius: 12rpx; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 600; |
||||
|
border: none; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:disabled { |
||||
|
background-color: #ccc; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
&:not(:disabled):active { |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
@ -0,0 +1,810 @@ |
|||||
|
<template> |
||||
|
<view class="order-list-container"> |
||||
|
<!-- Tab切换 --> |
||||
|
<view class="tab-container"> |
||||
|
<view |
||||
|
class="tab-item" |
||||
|
:class="[{ active: currentTab == index }]" |
||||
|
v-for="(tab, index) in tabs" |
||||
|
:key="index" |
||||
|
@click="switchTab(index)" |
||||
|
> |
||||
|
<text class="tab-text">{{ tab.name }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 订单列表 --> |
||||
|
<scroll-view |
||||
|
class="order-scroll" |
||||
|
scroll-y |
||||
|
@scrolltolower="loadMore" |
||||
|
:show-scrollbar="false" |
||||
|
enhanced |
||||
|
> |
||||
|
<!-- 订单项 --> |
||||
|
<view |
||||
|
class="order-item" |
||||
|
v-for="order in orderList" |
||||
|
:key="order.id" |
||||
|
@click="goToOrderDetail(order)" |
||||
|
> |
||||
|
<!-- 订单头部 - 供应商信息 --> |
||||
|
<view class="order-header"> |
||||
|
<view class="supplier-info"> |
||||
|
<view class="supplier-name">{{ |
||||
|
order.supplierName || "默认供应商" |
||||
|
}}</view> |
||||
|
<view class="order-number">订单号：{{ order.orderNo }}</view> |
||||
|
</view> |
||||
|
<view class="order-status-wrapper"> |
||||
|
<text class="status-name" :class="[getStatusClass(order.status)]">{{ |
||||
|
getStatusText(order.status) |
||||
|
}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 商品列表 --> |
||||
|
<view class="goods-section"> |
||||
|
<view class="goods-list"> |
||||
|
<view |
||||
|
class="goods-item" |
||||
|
v-for="goods in order.orderItems" |
||||
|
:key="goods.id" |
||||
|
> |
||||
|
<view class="goods-image-container"> |
||||
|
<image |
||||
|
v-if="goods.specImage" |
||||
|
class="goods-image" |
||||
|
:src="goods.specImage" |
||||
|
mode="aspectFill" |
||||
|
/> |
||||
|
</view> |
||||
|
<view class="goods-info"> |
||||
|
<text class="goods-name">{{ goods.goodsName }}</text> |
||||
|
<view class="goods-specs"> |
||||
|
<view class="spec-tag"> |
||||
|
{{ goods.specValueOne }}-{{ goods.specValueTwo }} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="goods-meta"> |
||||
|
<text class="goods-price">¥{{ goods.price }}</text> |
||||
|
<text class="goods-quantity">×{{ goods.quantity || 1 }}</text> |
||||
|
</view> |
||||
|
<!-- 规格信息 --> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 订单底部 --> |
||||
|
<view class="order-footer"> |
||||
|
<view class="order-info"> |
||||
|
<view class="order-total-section"> |
||||
|
<text class="total-label">实付</text> |
||||
|
<text class="order-total">¥{{ order.payAmount || 0 }}</text> |
||||
|
</view> |
||||
|
<view class="order-time">{{ order.createTime }}</view> |
||||
|
</view> |
||||
|
<view class="order-actions"> |
||||
|
<!-- 基于订单状态的操作按钮 --> |
||||
|
<button |
||||
|
class="action-btn" |
||||
|
@click.stop="handleOrderAction(order, 'pay')" |
||||
|
v-if="order.status === 0" |
||||
|
> |
||||
|
去支付 |
||||
|
</button> |
||||
|
<button |
||||
|
class="action-btn" |
||||
|
@click.stop="handleOrderAction(order, 'logistics')" |
||||
|
v-if="[2, 3].includes(order.status)" |
||||
|
> |
||||
|
查看物流 |
||||
|
</button> |
||||
|
<button |
||||
|
class="action-btn confirm-btn" |
||||
|
@click.stop="handleOrderAction(order, 'confirm')" |
||||
|
v-if="order.status === 2" |
||||
|
> |
||||
|
确认收货 |
||||
|
</button> |
||||
|
<button |
||||
|
class="action-btn" |
||||
|
@click.stop="handleOrderAction(order, 'contact')" |
||||
|
v-if="[1, 2].includes(order.status)" |
||||
|
> |
||||
|
联系供应商 |
||||
|
</button> |
||||
|
<button |
||||
|
class="action-btn secondary-btn" |
||||
|
@click.stop="handleOrderAction(order, 'aftersale')" |
||||
|
v-if="order.status === 3" |
||||
|
> |
||||
|
申请售后 |
||||
|
</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 空状态 --> |
||||
|
<view |
||||
|
class="empty-state" |
||||
|
v-if="(orderList && orderList.length == 0) || loading" |
||||
|
> |
||||
|
<image |
||||
|
class="empty-image" |
||||
|
:src=" |
||||
|
showImg('/uploads/20250808/c16267f9cc2b7a68bf23713b5847987e.png') |
||||
|
" |
||||
|
mode="aspectFit" |
||||
|
/> |
||||
|
<text class="empty-text">暂无订单</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 加载更多 --> |
||||
|
<view class="load-more" v-if="hasMore && orderList.length > 0"> |
||||
|
<text class="load-text">{{ |
||||
|
loading ? "加载中..." : "上拉加载更多" |
||||
|
}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 没有更多数据 --> |
||||
|
<view class="no-more" v-if="!hasMore && orderList.length > 0"> |
||||
|
<text class="no-more-text">没有更多数据了</text> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
currentTab: 0, |
||||
|
tabs: [ |
||||
|
{ |
||||
|
name: "全部", |
||||
|
status: "", |
||||
|
}, |
||||
|
{ |
||||
|
name: "待支付", |
||||
|
status: 0, |
||||
|
}, |
||||
|
{ |
||||
|
name: "已支付", |
||||
|
status: 1, |
||||
|
}, |
||||
|
{ |
||||
|
name: "已发货", |
||||
|
status: 2, |
||||
|
}, |
||||
|
{ |
||||
|
name: "已完成", |
||||
|
status: 3, |
||||
|
}, |
||||
|
], |
||||
|
orderList: [], |
||||
|
loading: false, |
||||
|
refresherTriggered: false, |
||||
|
hasMore: true, |
||||
|
currentPage: 1, |
||||
|
pageSize: 10, |
||||
|
}; |
||||
|
}, |
||||
|
onLoad(e) { |
||||
|
if (e.status) { |
||||
|
this.currentTab = e.status; |
||||
|
} |
||||
|
}, |
||||
|
onShow() { |
||||
|
this.resetList(); |
||||
|
this.loadOrderList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
showImgJdsz(img) { |
||||
|
if (!img) return; |
||||
|
if (img.indexOf("https://") != -1 || img.indexOf("http://") != -1) { |
||||
|
return img; |
||||
|
} else { |
||||
|
return this.JDSU_IMG_URL + img; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 切换Tab |
||||
|
switchTab(index) { |
||||
|
this.currentTab = index; |
||||
|
this.resetList(); |
||||
|
this.loadOrderList(); |
||||
|
}, |
||||
|
|
||||
|
// 重置列表 |
||||
|
resetList() { |
||||
|
this.orderList = []; |
||||
|
this.currentPage = 1; |
||||
|
this.hasMore = true; |
||||
|
}, |
||||
|
|
||||
|
// 加载订单列表 |
||||
|
async loadOrderList() { |
||||
|
if (this.loading || !this.hasMore) return; |
||||
|
|
||||
|
this.loading = true; |
||||
|
try { |
||||
|
const params = { |
||||
|
pageNum: this.currentPage, |
||||
|
pageSize: this.pageSize, |
||||
|
status: this.tabs[this.currentTab].status, |
||||
|
}; |
||||
|
|
||||
|
this.Post( |
||||
|
{ |
||||
|
...params, |
||||
|
}, |
||||
|
"/framework/ygOrder/pageList", |
||||
|
"DES" |
||||
|
).then((res) => { |
||||
|
if (res.code == 200) { |
||||
|
this.orderList.push(...res.rows); |
||||
|
console.log(this.orderList); |
||||
|
this.hasMore = res.rows.length === this.pageSize; |
||||
|
this.currentPage++; |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: res.msg, |
||||
|
icon: "none", |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} catch (error) { |
||||
|
console.error("加载订单列表失败:", error); |
||||
|
uni.showToast({ |
||||
|
title: "加载失败", |
||||
|
icon: "none", |
||||
|
}); |
||||
|
} finally { |
||||
|
this.loading = false; |
||||
|
this.refresherTriggered = false; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 上拉加载更多 |
||||
|
loadMore() { |
||||
|
this.loadOrderList(); |
||||
|
}, |
||||
|
|
||||
|
// 下拉刷新 |
||||
|
onRefresh() { |
||||
|
this.refresherTriggered = true; |
||||
|
this.resetList(); |
||||
|
this.loadOrderList(); |
||||
|
}, |
||||
|
|
||||
|
// 获取订单状态文本 |
||||
|
getStatusText(status) { |
||||
|
const statusMap = { |
||||
|
"-1": "已取消", |
||||
|
0: "待支付", |
||||
|
1: "已支付", |
||||
|
2: "已发货", |
||||
|
3: "已完成", |
||||
|
}; |
||||
|
return statusMap[status] || "未知"; |
||||
|
}, |
||||
|
|
||||
|
// 获取订单状态样式类 |
||||
|
getStatusClass(status) { |
||||
|
const classMap = { |
||||
|
"-1": "status-cancelled", |
||||
|
0: "status-pending", |
||||
|
1: "status-paid", |
||||
|
2: "status-shipping", |
||||
|
3: "status-completed", |
||||
|
}; |
||||
|
return classMap[status] || ""; |
||||
|
}, |
||||
|
|
||||
|
// 处理订单操作 |
||||
|
handleOrderAction(order, action) { |
||||
|
switch (action) { |
||||
|
case "pay": |
||||
|
this.goToPay(order); |
||||
|
break; |
||||
|
case "logistics": |
||||
|
this.viewLogistics(order); |
||||
|
break; |
||||
|
case "confirm": |
||||
|
this.confirmReceipt(order); |
||||
|
break; |
||||
|
case "contact": |
||||
|
this.contactSupplier(order); |
||||
|
break; |
||||
|
case "aftersale": |
||||
|
this.applyAfterSale(order); |
||||
|
break; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 去支付 |
||||
|
goToPay(order) { |
||||
|
this.Post( |
||||
|
{ |
||||
|
method: "POST", |
||||
|
orderNo: order.orderNo, |
||||
|
fromType: 2, |
||||
|
payAmount: order.payAmount, |
||||
|
}, |
||||
|
"/framework/wxPay/submitShopPurOrder", |
||||
|
"DES" |
||||
|
).then((res) => { |
||||
|
uni.requestPayment({ |
||||
|
nonceStr: res.data.wxInfo.nonceStr, |
||||
|
package: res.data.wxInfo.package, |
||||
|
paySign: res.data.wxInfo.paySign, |
||||
|
signType: res.data.wxInfo.signType, |
||||
|
timeStamp: res.data.wxInfo.timeStamp, |
||||
|
success: () => { |
||||
|
this.resetList(); |
||||
|
this.loadOrderList(); |
||||
|
}, |
||||
|
fail() { |
||||
|
// uni.navigateTo({ |
||||
|
// url: '/subPackages/order/trades' |
||||
|
// }) |
||||
|
}, |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 查看物流 |
||||
|
viewLogistics(order) { |
||||
|
uni.navigateTo({ |
||||
|
url: `/subPackages/haveFeeling/logistics?orderId=${order.id}`, |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 确认收货 |
||||
|
confirmReceipt(order) { |
||||
|
uni.showModal({ |
||||
|
title: "确认收货", |
||||
|
content: "确认已收到所有商品吗？", |
||||
|
success: (res) => { |
||||
|
if (res.confirm) { |
||||
|
this.confirmReceiptApi(order.id); |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 确认收货API |
||||
|
confirmReceiptApi(orderId) { |
||||
|
uni.showLoading({ |
||||
|
title: "确认中...", |
||||
|
}); |
||||
|
|
||||
|
this.Post( |
||||
|
{ |
||||
|
orderId: orderId, |
||||
|
}, |
||||
|
"/framework/haveFeeling/order/confirm", |
||||
|
"DES" |
||||
|
).then((res) => { |
||||
|
uni.hideLoading(); |
||||
|
if (res.code == 200) { |
||||
|
uni.showToast({ |
||||
|
title: "确认收货成功", |
||||
|
icon: "success", |
||||
|
}); |
||||
|
setTimeout(() => { |
||||
|
this.resetList(); |
||||
|
this.loadOrderList(); |
||||
|
}, 800); |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: res.msg || "确认收货失败", |
||||
|
icon: "none", |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 联系供应商 |
||||
|
contactSupplier(order) { |
||||
|
uni.showToast({ |
||||
|
title: "正在联系供应商", |
||||
|
icon: "none", |
||||
|
}); |
||||
|
// 这里可以跳转到聊天页面或者拨打电话 |
||||
|
}, |
||||
|
|
||||
|
// 申请售后 |
||||
|
applyAfterSale(order) { |
||||
|
uni.navigateTo({ |
||||
|
url: `/subPackages/haveFeeling/aftersale?orderId=${order.id}`, |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 跳转到订单详情页面 |
||||
|
goToOrderDetail(order) { |
||||
|
uni.navigateTo({ |
||||
|
url: `/subPackages/haveFeeling/detail?id=${order.id}`, |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
// 主题色彩变量 |
||||
|
$primary-color: #667eea; |
||||
|
$secondary-color: #f8f9fa; |
||||
|
$text-primary: #2d3748; |
||||
|
$text-secondary: #718096; |
||||
|
$text-muted: #a0aec0; |
||||
|
$border-color: #e2e8f0; |
||||
|
$success-color: #48bb78; |
||||
|
$warning-color: #ed8936; |
||||
|
$danger-color: #f56565; |
||||
|
$bg-light: #f7fafc; |
||||
|
|
||||
|
.order-list-container { |
||||
|
min-height: 100vh; |
||||
|
background-color: $bg-light; |
||||
|
} |
||||
|
|
||||
|
// Tab样式 |
||||
|
.tab-container { |
||||
|
display: flex; |
||||
|
background-color: #ffffff; |
||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
||||
|
color: black; |
||||
|
position: sticky; |
||||
|
top: 0; |
||||
|
z-index: 10; |
||||
|
} |
||||
|
|
||||
|
.tab-item { |
||||
|
flex: 1; |
||||
|
padding: 32rpx 0; |
||||
|
text-align: center; |
||||
|
position: relative; |
||||
|
transition: all 0.3s ease; |
||||
|
color: #333333; |
||||
|
|
||||
|
&.active { |
||||
|
.tab-text { |
||||
|
color: #77f3f9; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
&::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
width: 60rpx; |
||||
|
height: 4rpx; |
||||
|
background-color: #77f3f9; |
||||
|
border-radius: 2rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:not(.active) { |
||||
|
.tab-text { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tab-text { |
||||
|
font-size: 26rpx; |
||||
|
color: #333333; |
||||
|
font-weight: 600; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
// 订单列表样式 |
||||
|
.order-scroll { |
||||
|
height: calc(100vh - 120rpx); |
||||
|
padding: 0 24rpx; |
||||
|
width: 702rpx; |
||||
|
} |
||||
|
|
||||
|
.order-item { |
||||
|
background-color: #ffffff; |
||||
|
border-radius: 20rpx; |
||||
|
overflow: hidden; |
||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); |
||||
|
border: none; |
||||
|
transition: all 0.3s ease; |
||||
|
margin-top: 40rpx; |
||||
|
|
||||
|
&:active { |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 订单头部 - 供应商信息 |
||||
|
.order-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 24rpx 28rpx 20rpx; |
||||
|
background: white; |
||||
|
} |
||||
|
|
||||
|
.supplier-info { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.supplier-name { |
||||
|
font-size: 30rpx; |
||||
|
color: $text-primary; |
||||
|
font-weight: 600; |
||||
|
margin-bottom: 8rpx; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
max-width: 490rpx; |
||||
|
} |
||||
|
|
||||
|
.order-number { |
||||
|
font-size: 24rpx; |
||||
|
color: $text-secondary; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.order-status-wrapper { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.status-name { |
||||
|
font-size: 26rpx; |
||||
|
padding: 12rpx 20rpx; |
||||
|
border-radius: 24rpx; |
||||
|
font-weight: 600; |
||||
|
letter-spacing: 0.5rpx; |
||||
|
|
||||
|
&.status-pending { |
||||
|
background: #fff3cd; |
||||
|
color: #856404; |
||||
|
} |
||||
|
|
||||
|
&.status-paid { |
||||
|
background: #e6f3ff; |
||||
|
color: #0c5460; |
||||
|
} |
||||
|
|
||||
|
&.status-cancelled { |
||||
|
background: #f8d7da; |
||||
|
color: #721c24; |
||||
|
} |
||||
|
|
||||
|
&.status-shipping { |
||||
|
background: #d4edda; |
||||
|
color: #155724; |
||||
|
} |
||||
|
|
||||
|
&.status-completed { |
||||
|
background: #d1ecf1; |
||||
|
color: #0c5460; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 商品部分 |
||||
|
.goods-section { |
||||
|
margin: 20rpx 0; |
||||
|
} |
||||
|
|
||||
|
.goods-list { |
||||
|
padding: 0 20rpx; |
||||
|
} |
||||
|
|
||||
|
.goods-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 20rpx; |
||||
|
margin-bottom: 12rpx; |
||||
|
background: #ffffff; |
||||
|
border-radius: 16rpx; |
||||
|
border: 1px solid rgba(0, 0, 0, 0.05); |
||||
|
transition: all 0.3s ease; |
||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.goods-image-container { |
||||
|
position: relative; |
||||
|
margin-right: 20rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.goods-image { |
||||
|
width: 100rpx; |
||||
|
height: 100rpx; |
||||
|
border-radius: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.goods-info { |
||||
|
flex: 1; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.goods-name { |
||||
|
display: block; |
||||
|
font-size: 26rpx; |
||||
|
color: $text-primary; |
||||
|
font-weight: 600; |
||||
|
margin-bottom: 12rpx; |
||||
|
line-height: 1.4; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
max-width: 490rpx; |
||||
|
} |
||||
|
|
||||
|
.goods-meta { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.goods-price { |
||||
|
font-size: 26rpx; |
||||
|
color: $danger-color; |
||||
|
font-weight: 600; |
||||
|
font-family: "SF Mono", "Monaco", "Cascadia Code", monospace; |
||||
|
} |
||||
|
|
||||
|
.goods-quantity { |
||||
|
font-size: 22rpx; |
||||
|
color: $text-muted; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
// 商品规格样式 |
||||
|
.goods-specs { |
||||
|
margin-top: 10rpx; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.spec-tag { |
||||
|
background: #f0f8ff; |
||||
|
border: 1rpx solid #e6f3ff; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 4rpx 12rpx; |
||||
|
display: inline-block; |
||||
|
margin-bottom: 6rpx; |
||||
|
font-size: 22rpx; |
||||
|
color: #4a90e2; |
||||
|
font-weight: 500; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
max-width: 490rpx; |
||||
|
} |
||||
|
|
||||
|
// 订单底部 |
||||
|
.order-footer { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 24rpx 28rpx; |
||||
|
background: white; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.order-info { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.order-total-section { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.total-label { |
||||
|
font-size: 22rpx; |
||||
|
color: $text-muted; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.order-total { |
||||
|
font-size: 32rpx; |
||||
|
color: $danger-color; |
||||
|
font-weight: 600; |
||||
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", |
||||
|
"Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif; |
||||
|
} |
||||
|
|
||||
|
.order-time { |
||||
|
font-size: 22rpx; |
||||
|
color: $text-muted; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.order-actions { |
||||
|
display: flex; |
||||
|
gap: 12rpx; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.action-btn { |
||||
|
padding: 8rpx 20rpx; |
||||
|
border-radius: 10rpx; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 600; |
||||
|
border: none; |
||||
|
color: #333333; |
||||
|
transition: all 0.3s ease; |
||||
|
min-width: 100rpx; |
||||
|
text-align: center; |
||||
|
background-color: #77f3f9; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
height: 58rpx; |
||||
|
&:active { |
||||
|
transform: scale(0.95); |
||||
|
} |
||||
|
|
||||
|
&.confirm-btn { |
||||
|
background-color: $success-color; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
&.secondary-btn { |
||||
|
background-color: #f5f5f5; |
||||
|
color: #666666; |
||||
|
border: 1rpx solid #ddd; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 空状态 |
||||
|
.empty-state { |
||||
|
text-align: center; |
||||
|
padding: 240rpx 40rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.empty-image { |
||||
|
width: 240rpx; |
||||
|
height: 240rpx; |
||||
|
margin-bottom: 40rpx; |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
|
||||
|
.empty-text { |
||||
|
font-size: 32rpx; |
||||
|
color: $text-muted; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
// 加载更多 |
||||
|
.load-more, |
||||
|
.no-more { |
||||
|
text-align: center; |
||||
|
padding: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.load-text, |
||||
|
.no-more-text { |
||||
|
font-size: 28rpx; |
||||
|
color: $text-muted; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,592 @@ |
|||||
|
<template> |
||||
|
<view class="logistics-container"> |
||||
|
<!-- 物流状态头部 --> |
||||
|
<view class="status-header"> |
||||
|
<view class="status-info"> |
||||
|
<view class="status-icon"> |
||||
|
<image :src="getStatusIcon(logisticsInfo.status)" mode="aspectFit" /> |
||||
|
</view> |
||||
|
<view class="status-content"> |
||||
|
<view class="status-title">{{ getStatusText(logisticsInfo.status) }}</view> |
||||
|
<view class="status-desc" v-if="logisticsInfo.lastUpdate"> |
||||
|
最新状态：{{ logisticsInfo.lastUpdate }} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 快递信息 --> |
||||
|
<view class="express-section"> |
||||
|
<view class="section-title">快递信息</view> |
||||
|
<view class="express-card"> |
||||
|
<view class="express-item"> |
||||
|
<text class="express-label">快递公司</text> |
||||
|
<text class="express-value">{{ logisticsInfo.expressCompany || '--' }}</text> |
||||
|
</view> |
||||
|
<view class="express-item"> |
||||
|
<text class="express-label">快递单号</text> |
||||
|
<text class="express-value" @longpress="copyExpressNo">{{ logisticsInfo.expressNo || '--' }}</text> |
||||
|
</view> |
||||
|
<view class="express-item"> |
||||
|
<text class="express-label">发货时间</text> |
||||
|
<text class="express-value">{{ logisticsInfo.shippingTime || '--' }}</text> |
||||
|
</view> |
||||
|
<view class="express-item"> |
||||
|
<text class="express-label">预计送达</text> |
||||
|
<text class="express-value">{{ logisticsInfo.estimatedTime || '--' }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 收货地址 --> |
||||
|
<view class="address-section"> |
||||
|
<view class="section-title">收货地址</view> |
||||
|
<view class="address-card"> |
||||
|
<view class="address-info"> |
||||
|
<view class="recipient-info"> |
||||
|
<text class="recipient-name">{{ addressInfo.linkName }}</text> |
||||
|
<text class="recipient-phone">{{ addressInfo.phone }}</text> |
||||
|
</view> |
||||
|
<view class="address-detail"> |
||||
|
{{ addressInfo.province }}{{ addressInfo.city }}{{ addressInfo.area }}{{ addressInfo.address }} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 物流轨迹 --> |
||||
|
<view class="trace-section"> |
||||
|
<view class="section-title">物流轨迹</view> |
||||
|
<view class="trace-list"> |
||||
|
<view |
||||
|
class="trace-item" |
||||
|
v-for="(trace, index) in logisticsTrace" |
||||
|
:key="index" |
||||
|
:class="{ 'is-current': index === 0 }" |
||||
|
> |
||||
|
<view class="trace-time">{{ trace.time }}</view> |
||||
|
<view class="trace-content"> |
||||
|
<view class="trace-status">{{ trace.status }}</view> |
||||
|
<view class="trace-location" v-if="trace.location">{{ trace.location }}</view> |
||||
|
<view class="trace-remark" v-if="trace.remark">{{ trace.remark }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 空状态 --> |
||||
|
<view class="empty-trace" v-if="!logisticsTrace || logisticsTrace.length === 0"> |
||||
|
<image class="empty-image" src="/static/images/empty-logistics.png" mode="aspectFit" /> |
||||
|
<text class="empty-text">暂无物流轨迹信息</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 联系供应商 --> |
||||
|
<view class="contact-section"> |
||||
|
<view class="section-title">联系供应商</view> |
||||
|
<view class="contact-card"> |
||||
|
<view class="supplier-info"> |
||||
|
<view class="supplier-name">{{ supplierInfo.name || '默认供应商' }}</view> |
||||
|
<view class="supplier-phone">联系电话：{{ supplierInfo.phone || '暂无' }}</view> |
||||
|
</view> |
||||
|
<button class="contact-btn" @click="contactSupplier"> |
||||
|
<text>联系供应商</text> |
||||
|
</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 订单操作 --> |
||||
|
<view class="order-actions"> |
||||
|
<button |
||||
|
class="action-btn confirm-btn" |
||||
|
@click="confirmReceipt" |
||||
|
v-if="logisticsInfo.status === 3" |
||||
|
> |
||||
|
确认收货 |
||||
|
</button> |
||||
|
<button |
||||
|
class="action-btn secondary-btn" |
||||
|
@click="applyAfterSale" |
||||
|
v-if="[2, 3, 4].includes(logisticsInfo.status)" |
||||
|
> |
||||
|
申请售后 |
||||
|
</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
orderId: '', |
||||
|
logisticsInfo: { |
||||
|
status: 0, |
||||
|
expressCompany: '', |
||||
|
expressNo: '', |
||||
|
shippingTime: '', |
||||
|
estimatedTime: '', |
||||
|
lastUpdate: '' |
||||
|
}, |
||||
|
addressInfo: { |
||||
|
linkName: '', |
||||
|
phone: '', |
||||
|
province: '', |
||||
|
city: '', |
||||
|
area: '', |
||||
|
address: '' |
||||
|
}, |
||||
|
supplierInfo: { |
||||
|
name: '', |
||||
|
phone: '' |
||||
|
}, |
||||
|
logisticsTrace: [] |
||||
|
}; |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
if (options.orderId) { |
||||
|
this.orderId = options.orderId; |
||||
|
this.loadLogisticsInfo(); |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 加载物流信息 |
||||
|
async loadLogisticsInfo() { |
||||
|
try { |
||||
|
uni.showLoading({ |
||||
|
title: '加载中...' |
||||
|
}); |
||||
|
|
||||
|
this.Post( |
||||
|
{ orderId: this.orderId }, |
||||
|
'/framework/haveFeeling/order/logistics', |
||||
|
'DES' |
||||
|
).then((res) => { |
||||
|
if (res.code == 200) { |
||||
|
this.logisticsInfo = res.data.logistics || {}; |
||||
|
this.addressInfo = res.data.address || {}; |
||||
|
this.supplierInfo = res.data.supplier || {}; |
||||
|
this.logisticsTrace = res.data.trace || []; |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: res.msg, |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} catch (error) { |
||||
|
console.error('加载物流信息失败:', error); |
||||
|
uni.showToast({ |
||||
|
title: '加载失败', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} finally { |
||||
|
uni.hideLoading(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 获取状态文本 |
||||
|
getStatusText(status) { |
||||
|
const statusMap = { |
||||
|
0: '待发货', |
||||
|
1: '已发货', |
||||
|
2: '运输中', |
||||
|
3: '派送中', |
||||
|
4: '已签收', |
||||
|
5: '异常' |
||||
|
}; |
||||
|
return statusMap[status] || '待发货'; |
||||
|
}, |
||||
|
|
||||
|
// 获取状态图标 |
||||
|
getStatusIcon(status) { |
||||
|
const iconMap = { |
||||
|
0: '/static/images/logistics-waiting.png', |
||||
|
1: '/static/images/logistics-shipped.png', |
||||
|
2: '/static/images/logistics-transit.png', |
||||
|
3: '/static/images/logistics-delivering.png', |
||||
|
4: '/static/images/logistics-completed.png', |
||||
|
5: '/static/images/logistics-exception.png' |
||||
|
}; |
||||
|
return iconMap[status] || '/static/images/logistics-waiting.png'; |
||||
|
}, |
||||
|
|
||||
|
// 复制快递单号 |
||||
|
copyExpressNo() { |
||||
|
if (this.logisticsInfo.expressNo) { |
||||
|
uni.setClipboardData({ |
||||
|
data: this.logisticsInfo.expressNo, |
||||
|
success: () => { |
||||
|
uni.showToast({ |
||||
|
title: '快递单号已复制', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 联系供应商 |
||||
|
contactSupplier() { |
||||
|
if (this.supplierInfo.phone) { |
||||
|
uni.makePhoneCall({ |
||||
|
phoneNumber: this.supplierInfo.phone |
||||
|
}); |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: '暂无供应商联系方式', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 确认收货 |
||||
|
confirmReceipt() { |
||||
|
uni.showModal({ |
||||
|
title: '确认收货', |
||||
|
content: '确认已收到所有商品吗？', |
||||
|
success: (res) => { |
||||
|
if (res.confirm) { |
||||
|
this.confirmReceiptApi(); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 确认收货API |
||||
|
confirmReceiptApi() { |
||||
|
uni.showLoading({ |
||||
|
title: '确认中...' |
||||
|
}); |
||||
|
|
||||
|
this.Post( |
||||
|
{ orderId: this.orderId }, |
||||
|
'/framework/haveFeeling/order/confirm', |
||||
|
'DES' |
||||
|
).then((res) => { |
||||
|
uni.hideLoading(); |
||||
|
if (res.code == 200) { |
||||
|
uni.showToast({ |
||||
|
title: '确认收货成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
setTimeout(() => { |
||||
|
uni.navigateBack(); |
||||
|
}, 800); |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: res.msg || '确认收货失败', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 申请售后 |
||||
|
applyAfterSale() { |
||||
|
uni.navigateTo({ |
||||
|
url: `/subPackages/haveFeeling/aftersale?orderId=${this.orderId}` |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.logistics-container { |
||||
|
min-height: 100vh; |
||||
|
background-color: #f5f5f5; |
||||
|
padding-bottom: 100rpx; |
||||
|
} |
||||
|
|
||||
|
// 状态头部 |
||||
|
.status-header { |
||||
|
background-color: #fff; |
||||
|
padding: 40rpx 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.status-info { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.status-icon { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
margin-right: 24rpx; |
||||
|
|
||||
|
image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.status-content { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.status-title { |
||||
|
font-size: 32rpx; |
||||
|
color: #333; |
||||
|
font-weight: 600; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.status-desc { |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
// 通用样式 |
||||
|
.section-title { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
margin-bottom: 24rpx; |
||||
|
} |
||||
|
|
||||
|
// 快递信息 |
||||
|
.express-section { |
||||
|
background-color: #fff; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.express-card { |
||||
|
background-color: #f8f9fa; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.express-item { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 20rpx; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.express-label { |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.express-value { |
||||
|
font-size: 26rpx; |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
// 收货地址 |
||||
|
.address-section { |
||||
|
background-color: #fff; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.address-card { |
||||
|
background-color: #f8f9fa; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.recipient-info { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 20rpx; |
||||
|
margin-bottom: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.recipient-name { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.recipient-phone { |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.address-detail { |
||||
|
font-size: 26rpx; |
||||
|
color: #333; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
// 物流轨迹 |
||||
|
.trace-section { |
||||
|
background-color: #fff; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.trace-list { |
||||
|
.trace-item { |
||||
|
display: flex; |
||||
|
padding: 24rpx 0; |
||||
|
border-left: 2rpx solid #e2e8f0; |
||||
|
padding-left: 40rpx; |
||||
|
position: relative; |
||||
|
margin-bottom: 16rpx; |
||||
|
|
||||
|
&:before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: -8rpx; |
||||
|
top: 30rpx; |
||||
|
width: 14rpx; |
||||
|
height: 14rpx; |
||||
|
border-radius: 50%; |
||||
|
background-color: #e2e8f0; |
||||
|
} |
||||
|
|
||||
|
&.is-current { |
||||
|
border-left-color: #007aff; |
||||
|
|
||||
|
&:before { |
||||
|
background-color: #007aff; |
||||
|
box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.2); |
||||
|
} |
||||
|
|
||||
|
.trace-time, |
||||
|
.trace-status { |
||||
|
color: #007aff; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:last-child { |
||||
|
border-left-color: transparent; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.trace-time { |
||||
|
font-size: 22rpx; |
||||
|
color: #999; |
||||
|
margin-bottom: 8rpx; |
||||
|
min-width: 120rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.trace-content { |
||||
|
flex: 1; |
||||
|
margin-left: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.trace-status { |
||||
|
font-size: 26rpx; |
||||
|
color: #333; |
||||
|
margin-bottom: 6rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.trace-location { |
||||
|
font-size: 22rpx; |
||||
|
color: #666; |
||||
|
margin-bottom: 4rpx; |
||||
|
} |
||||
|
|
||||
|
.trace-remark { |
||||
|
font-size: 22rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
// 空状态 |
||||
|
.empty-trace { |
||||
|
text-align: center; |
||||
|
padding: 80rpx 40rpx; |
||||
|
} |
||||
|
|
||||
|
.empty-image { |
||||
|
width: 200rpx; |
||||
|
height: 200rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
opacity: 0.6; |
||||
|
} |
||||
|
|
||||
|
.empty-text { |
||||
|
font-size: 28rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
// 联系供应商 |
||||
|
.contact-section { |
||||
|
background-color: #fff; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.contact-card { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
background-color: #f8f9fa; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.supplier-info { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.supplier-name { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
font-weight: 600; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.supplier-phone { |
||||
|
font-size: 24rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.contact-btn { |
||||
|
padding: 12rpx 24rpx; |
||||
|
border-radius: 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
background-color: #007aff; |
||||
|
color: #fff; |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
// 订单操作 |
||||
|
.order-actions { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
background-color: #fff; |
||||
|
padding: 20rpx 30rpx; |
||||
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); |
||||
|
border-top: 1rpx solid #eee; |
||||
|
display: flex; |
||||
|
gap: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.action-btn { |
||||
|
flex: 1; |
||||
|
padding: 20rpx 0; |
||||
|
border-radius: 10rpx; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 600; |
||||
|
border: none; |
||||
|
text-align: center; |
||||
|
|
||||
|
&.confirm-btn { |
||||
|
background-color: #48bb78; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
&.secondary-btn { |
||||
|
background-color: #f5f5f5; |
||||
|
color: #666; |
||||
|
border: 1rpx solid #ddd; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue