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.
352 lines
8.5 KiB
352 lines
8.5 KiB
<template>
|
|
<view class="order-detail-container">
|
|
<!-- 日期信息 -->
|
|
<view class="order-date">
|
|
<view class="order-date-icon">
|
|
<u-icon name="calendar" color="#FFAA48" size="22"></u-icon>
|
|
</view>
|
|
<view class="order-date-text">{{ orderDate }}</view>
|
|
</view>
|
|
|
|
<!-- 个人信息区域 -->
|
|
<view class="order-section">
|
|
<view class="order-section-title">个人信息</view>
|
|
<view class="order-section-content">
|
|
<view class="order-image-item">
|
|
<view class="order-image-label">手套照片 (共2张)</view>
|
|
<view class="order-image-container">
|
|
<image class="order-image" src="/static/images/personal/used.png" mode="aspectFill" @click="previewImage('/static/images/personal/used.png')"></image>
|
|
</view>
|
|
</view>
|
|
<view class="order-image-item">
|
|
<view class="order-image-label">鞋套照片 (共2张)</view>
|
|
<view class="order-image-container">
|
|
<image class="order-image" src="/static/images/personal/invalid.png" mode="aspectFill" @click="previewImage('/static/images/personal/invalid.png')"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 宠物状况记录 -->
|
|
<view class="order-section">
|
|
<view class="order-section-title">宠物状况记录</view>
|
|
<view class="order-section-content">
|
|
<view class="pet-record" v-for="(pet, index) in pets" :key="index">
|
|
<view class="pet-name">{{ pet.name }} (共{{ pet.photoCount }}张)</view>
|
|
<view class="pet-images">
|
|
<view class="pet-image-container" v-for="(photo, photoIndex) in pet.photos" :key="photoIndex">
|
|
<image class="pet-image" :src="photo" mode="aspectFill" @click="previewImage(photo)"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 基础服务记录 -->
|
|
<view class="order-section">
|
|
<view class="order-section-title">基础服务记录</view>
|
|
<view class="order-section-content">
|
|
<view class="service-record" v-for="(service, index) in services" :key="index">
|
|
<view class="service-name">{{ service.name }}</view>
|
|
<view class="service-comparison">
|
|
<view class="service-before-after">
|
|
<view class="service-image-container">
|
|
<image class="service-image" :src="service.beforeImage" mode="aspectFill" @click="previewImage(service.beforeImage)"></image>
|
|
<view class="service-image-label">前</view>
|
|
</view>
|
|
<view class="service-image-container">
|
|
<image class="service-image" :src="service.afterImage" mode="aspectFill" @click="previewImage(service.afterImage)"></image>
|
|
<view class="service-image-label">后</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 定制服务记录 -->
|
|
<view class="order-section">
|
|
<view class="order-section-title">定制服务记录</view>
|
|
<view class="order-section-content">
|
|
<view class="custom-service">
|
|
<view class="custom-service-item">
|
|
<view class="custom-service-name">遛狗 (5-30分钟)</view>
|
|
<view class="custom-service-images">
|
|
<image class="custom-service-image" src="/static/images/tabBar/dog.png" mode="aspectFill" @click="previewImage('/static/images/tabBar/dog.png')"></image>
|
|
<image class="custom-service-image" src="/static/images/tabBar/dog_.png" mode="aspectFill" @click="previewImage('/static/images/tabBar/dog_.png')"></image>
|
|
<image class="custom-service-image" src="/static/images/tabBar/home.png" mode="aspectFill" @click="previewImage('/static/images/tabBar/home.png')"></image>
|
|
</view>
|
|
</view>
|
|
<view class="custom-service-item">
|
|
<view class="custom-service-name">梳毛 (5-30分钟)</view>
|
|
<view class="custom-service-images">
|
|
<image class="custom-service-image" src="/static/images/tabBar/cat.png" mode="aspectFill" @click="previewImage('/static/images/tabBar/cat.png')"></image>
|
|
<image class="custom-service-image" src="/static/images/tabBar/cat_.png" mode="aspectFill" @click="previewImage('/static/images/tabBar/cat_.png')"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
orderId: null,
|
|
orderDate: '2024年12月08日',
|
|
pets: [
|
|
{
|
|
name: '小汪',
|
|
photoCount: 2,
|
|
photos: [
|
|
'/static/images/tabBar/dog.png',
|
|
'/static/images/tabBar/dog_.png'
|
|
]
|
|
},
|
|
{
|
|
name: 'Billion',
|
|
photoCount: 2,
|
|
photos: [
|
|
'/static/images/tabBar/cat.png',
|
|
'/static/images/tabBar/cat_.png'
|
|
]
|
|
}
|
|
],
|
|
services: [
|
|
{
|
|
name: '猫粮前后对比',
|
|
beforeImage: '/static/images/personal/invalid.png',
|
|
afterImage: '/static/images/personal/used.png'
|
|
},
|
|
{
|
|
name: '水碗前后对比',
|
|
beforeImage: '/static/images/personal/invalid.png',
|
|
afterImage: '/static/images/personal/used.png'
|
|
},
|
|
{
|
|
name: '猫砂盆 厚度前后对比',
|
|
beforeImage: '/static/images/personal/invalid.png',
|
|
afterImage: '/static/images/personal/used.png'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.orderId) {
|
|
this.orderId = options.orderId;
|
|
// 这里可以根据orderId加载订单详情数据
|
|
this.loadOrderDetail();
|
|
}
|
|
},
|
|
methods: {
|
|
loadOrderDetail() {
|
|
// 这里可以调用API获取订单详情
|
|
// 示例代码，实际项目中需要替换为真实API调用
|
|
/*
|
|
getOrderDetail(this.orderId).then(res => {
|
|
if (res && res.code === 200) {
|
|
this.orderDate = res.data.orderDate;
|
|
this.pets = res.data.pets;
|
|
this.services = res.data.services;
|
|
}
|
|
});
|
|
*/
|
|
},
|
|
// 图片预览功能
|
|
previewImage(urls, current) {
|
|
// 调用uni-app的图片预览API
|
|
uni.previewImage({
|
|
urls,
|
|
current,
|
|
indicator: 'number',
|
|
loop: true
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.order-detail-container {
|
|
padding: 15px;
|
|
background-color: #f5f5f7;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.order-date {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12px 16px;
|
|
background-color: #FFF9EF;
|
|
border-radius: 10px;
|
|
margin-bottom: 15px;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
|
|
|
|
.order-date-icon {
|
|
margin-right: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
background-color: rgba(255, 170, 72, 0.1);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.order-date-text {
|
|
color: #A94F20;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
}
|
|
|
|
.order-section {
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
margin-bottom: 15px;
|
|
overflow: hidden;
|
|
|
|
.order-section-title {
|
|
padding: 12px 15px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
color: #333;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 12px;
|
|
height: 16px;
|
|
width: 4px;
|
|
background-color: #ffaa48;
|
|
border-radius: 0 2px 2px 0;
|
|
}
|
|
}
|
|
|
|
.order-section-content {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
|
|
.order-image-item {
|
|
margin-bottom: 15px;
|
|
|
|
.order-image-label {
|
|
color: #666;
|
|
font-size: 14px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.order-image-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
|
|
.order-image {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 4px;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pet-record {
|
|
margin-bottom: 20px;
|
|
|
|
.pet-name {
|
|
color: #333;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.pet-images {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
|
|
.pet-image-container {
|
|
.pet-image {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 4px;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.service-record {
|
|
margin-bottom: 20px;
|
|
|
|
.service-name {
|
|
color: #333;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.service-comparison {
|
|
.service-before-after {
|
|
display: flex;
|
|
gap: 15px;
|
|
|
|
.service-image-container {
|
|
position: relative;
|
|
|
|
.service-image {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 4px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.service-image-label {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: rgba(0,0,0,0.5);
|
|
color: #fff;
|
|
padding: 2px 8px;
|
|
font-size: 12px;
|
|
border-radius: 0 0 0 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-service {
|
|
.custom-service-item {
|
|
margin-bottom: 15px;
|
|
|
|
.custom-service-name {
|
|
color: #333;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.custom-service-images {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
|
|
.custom-service-image {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 4px;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|