Augcl
/
pet-admin
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

修改日订单

master
前端-胡立永 1 week ago
parent
601394dff0
commit
8100227e2b
1 changed files with 542 additions and 219 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +542
    -219
      CatmDogd-Mall-Front-test/src/components/CheckinDialog.vue

+ 542
- 219
CatmDogd-Mall-Front-test/src/components/CheckinDialog.vue View File

@ -1,221 +1,232 @@
<template>
<el-dialog title="打卡信息" :visible.sync="visible" width="80%" :before-close="handleClose" class="checkin-dialog">
<div v-loading="loading" class="checkin-content">
<!-- 个人准备 -->
<div class="section">
<div class="section-title">
<span class="title-text">个人准备</span>
</div>
<div>
<el-dialog title="打卡信息" :visible.sync="visible" width="80%" :before-close="handleClose" class="checkin-dialog">
<div v-loading="loading" class="checkin-content">
<!-- 个人准备 -->
<div class="section">
<div class="section-title">
<span class="title-text">个人准备</span>
</div>
<div class="upload-group">
<div class="upload-item">
<div class="upload-label">手套照片</div>
<div class="image-gallery">
<div v-if="checkinData.gloveImages && checkinData.gloveImages.length > 0"
class="image-list">
<div v-for="(image, index) in checkinData.gloveImages" :key="index" class="image-item"
@click="previewImage(image)">
<img :src="image" alt="手套照片" />
<div class="upload-group">
<div class="upload-item">
<div class="upload-label">手套照片</div>
<div class="image-gallery">
<div v-if="checkinData.gloveImages && checkinData.gloveImages.length > 0"
class="image-list">
<div v-for="(image, index) in checkinData.gloveImages" :key="index" class="image-item"
@click="previewImage(image)">
<img :src="image" alt="手套照片" />
</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
</div>
<div class="upload-item">
<div class="upload-label">鞋套照片</div>
<div class="image-gallery">
<div v-if="checkinData.shoeImages && checkinData.shoeImages.length > 0" class="image-list">
<div v-for="(image, index) in checkinData.shoeImages" :key="index" class="image-item"
@click="previewImage(image)">
<img :src="image" alt="鞋套照片" />
<div class="upload-item">
<div class="upload-label">鞋套照片</div>
<div class="image-gallery">
<div v-if="checkinData.shoeImages && checkinData.shoeImages.length > 0" class="image-list">
<div v-for="(image, index) in checkinData.shoeImages" :key="index" class="image-item"
@click="previewImage(image)">
<img :src="image" alt="鞋套照片" />
</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
</div>
</div>
</div>
<!-- 宠物状态记录 -->
<div class="section">
<div class="section-title">
<span class="title-text">宠物状态记录</span>
</div>
<div v-if="checkinData.petList && checkinData.petList.length > 0">
<div v-for="(pet, index) in checkinData.petList" :key="index" class="pet-item">
<div class="upload-label">{{ pet.title }}照片</div>
<div class="image-gallery">
<div v-if="pet.images && pet.images.length > 0" class="image-list">
<div
v-for="(image, imgIndex) in pet.images"
:key="imgIndex"
class="image-item"
@click="previewImage(image)"
>
<img :src="image" alt="宠物状态照片" />
<!-- 宠物状态记录 -->
<div class="section">
<div class="section-title">
<span class="title-text">宠物状态记录</span>
</div>
<div v-if="checkinData.petList && checkinData.petList.length > 0">
<div v-for="(pet, index) in checkinData.petList" :key="index" class="pet-item">
<div class="upload-label">{{ pet.title }}照片</div>
<div class="image-gallery">
<div v-if="pet.images && pet.images.length > 0" class="image-list">
<div
v-for="(image, imgIndex) in pet.images"
:key="imgIndex"
class="image-item"
@click="previewImage(image)"
>
<img :src="image" alt="宠物状态照片" />
</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
</div>
<div v-else class="no-data">暂无宠物数据</div>
</div>
<div v-else class="no-data">暂无宠物数据</div>
</div>
<!-- 基础服务记录 -->
<div class="section">
<div class="section-title">
<span class="title-text">基础服务记录</span>
</div>
<div class="service-item">
<div class="service-label">粮碗前后对比</div>
<div class="compare-container">
<div class="compare-item">
<div class="compare-label">前</div>
<div class="image-gallery">
<div v-if="checkinData.groomingBeforeImages && checkinData.groomingBeforeImages.length > 0"
class="image-list">
<div v-for="(image, index) in checkinData.groomingBeforeImages" :key="index"
class="image-item" @click="previewImage(image)">
<img :src="image" alt="粮碗前照片" />
<!-- 基础服务记录 -->
<div class="section">
<div class="section-title">
<span class="title-text">基础服务记录</span>
</div>
<div class="service-item">
<div class="service-label">粮碗前后对比</div>
<div class="compare-container">
<div class="compare-item">
<div class="compare-label">前</div>
<div class="image-gallery">
<div v-if="checkinData.groomingBeforeImages && checkinData.groomingBeforeImages.length > 0"
class="image-list">
<div v-for="(image, index) in checkinData.groomingBeforeImages" :key="index"
class="image-item" @click="previewImage(image)">
<img :src="image" alt="粮碗前照片" />
</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
</div>
<div class="compare-item">
<div class="compare-label">后</div>
<div class="image-gallery">
<div v-if="checkinData.groomingAfterImages && checkinData.groomingAfterImages.length > 0"
class="image-list">
<div v-for="(image, index) in checkinData.groomingAfterImages" :key="index"
class="image-item" @click="previewImage(image)">
<img :src="image" alt="粮碗后照片" />
<div class="compare-item">
<div class="compare-label">后</div>
<div class="image-gallery">
<div v-if="checkinData.groomingAfterImages && checkinData.groomingAfterImages.length > 0"
class="image-list">
<div v-for="(image, index) in checkinData.groomingAfterImages" :key="index"
class="image-item" @click="previewImage(image)">
<img :src="image" alt="粮碗后照片" />
</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
</div>
</div>
</div>
<div class="service-item">
<div class="service-label">水碗前后对比</div>
<div class="compare-container">
<div class="compare-item">
<div class="compare-label">前</div>
<div class="image-gallery">
<div v-if="checkinData.waterBowlBeforeImages && checkinData.waterBowlBeforeImages.length > 0"
class="image-list">
<div v-for="(image, index) in checkinData.waterBowlBeforeImages" :key="index"
class="image-item" @click="previewImage(image)">
<img :src="image" alt="水碗前照片" />
<div class="service-item">
<div class="service-label">水碗前后对比</div>
<div class="compare-container">
<div class="compare-item">
<div class="compare-label">前</div>
<div class="image-gallery">
<div v-if="checkinData.waterBowlBeforeImages && checkinData.waterBowlBeforeImages.length > 0"
class="image-list">
<div v-for="(image, index) in checkinData.waterBowlBeforeImages" :key="index"
class="image-item" @click="previewImage(image)">
<img :src="image" alt="水碗前照片" />
</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
</div>
<div class="compare-item">
<div class="compare-label">后</div>
<div class="image-gallery">
<div v-if="checkinData.waterBowlAfterImages && checkinData.waterBowlAfterImages.length > 0"
class="image-list">
<div v-for="(image, index) in checkinData.waterBowlAfterImages" :key="index"
class="image-item" @click="previewImage(image)">
<img :src="image" alt="水碗后照片" />
<div class="compare-item">
<div class="compare-label">后</div>
<div class="image-gallery">
<div v-if="checkinData.waterBowlAfterImages && checkinData.waterBowlAfterImages.length > 0"
class="image-list">
<div v-for="(image, index) in checkinData.waterBowlAfterImages" :key="index"
class="image-item" @click="previewImage(image)">
<img :src="image" alt="水碗后照片" />
</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
</div>
</div>
</div>
<div class="service-item">
<div class="service-label">猫砂盆、尿垫前后对比</div>
<div class="compare-container">
<div class="compare-item">
<div class="compare-label">前</div>
<div class="image-gallery">
<div v-if="checkinData.basinBeforeImages && checkinData.basinBeforeImages.length > 0"
class="image-list">
<div v-for="(image, index) in checkinData.basinBeforeImages" :key="index"
class="image-item" @click="previewImage(image)">
<img :src="image" alt="猫砂盆前照片" />
<div class="service-item">
<div class="service-label">猫砂盆、尿垫前后对比</div>
<div class="compare-container">
<div class="compare-item">
<div class="compare-label">前</div>
<div class="image-gallery">
<div v-if="checkinData.basinBeforeImages && checkinData.basinBeforeImages.length > 0"
class="image-list">
<div v-for="(image, index) in checkinData.basinBeforeImages" :key="index"
class="image-item" @click="previewImage(image)">
<img :src="image" alt="猫砂盆前照片" />
</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
</div>
<div class="compare-item">
<div class="compare-label">后</div>
<div class="image-gallery">
<div v-if="checkinData.basinAfterImages && checkinData.basinAfterImages.length > 0"
class="image-list">
<div v-for="(image, index) in checkinData.basinAfterImages" :key="index"
class="image-item" @click="previewImage(image)">
<img :src="image" alt="猫砂盆后照片" />
<div class="compare-item">
<div class="compare-label">后</div>
<div class="image-gallery">
<div v-if="checkinData.basinAfterImages && checkinData.basinAfterImages.length > 0"
class="image-list">
<div v-for="(image, index) in checkinData.basinAfterImages" :key="index"
class="image-item" @click="previewImage(image)">
<img :src="image" alt="猫砂盆后照片" />
</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
</div>
</div>
</div>
</div>
<!-- 定制服务记录 -->
<div class="section" v-if="checkinData.projectList && checkinData.projectList.length > 0">
<div class="section-title">
<span class="title-text">定制服务记录</span>
</div>
<div v-for="(project, index) in checkinData.projectList" :key="index" class="project-item">
<div class="upload-label">{{ project.title }}</div>
<div class="image-gallery">
<div v-if="project.images && project.images.length > 0" class="image-list">
<div
v-for="(image, imgIndex) in project.images"
:key="imgIndex"
class="image-item"
@click="previewImage(image)"
>
<img :src="image" alt="定制服务照片" />
<!-- 定制服务记录 -->
<div class="section" v-if="checkinData.projectList && checkinData.projectList.length > 0">
<div class="section-title">
<span class="title-text">定制服务记录</span>
</div>
<div v-for="(project, index) in checkinData.projectList" :key="index" class="project-item">
<div class="upload-label">{{ project.title }}</div>
<div class="image-gallery">
<div v-if="project.images && project.images.length > 0" class="image-list">
<div
v-for="(image, imgIndex) in project.images"
:key="imgIndex"
class="image-item"
@click="previewImage(image)"
>
<img :src="image" alt="定制服务照片" />
</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
<div v-else class="no-data">暂无图片</div>
</div>
</div>
</div>
<!-- 其他补充信息 -->
<div class="section" v-if="checkinData.notes">
<div class="section-title">
<span class="title-text">其他补充信息</span>
</div>
<div class="notes-content">
{{ checkinData.notes }}
<!-- 其他补充信息 -->
<div class="section" v-if="checkinData.notes">
<div class="section-title">
<span class="title-text">其他补充信息</span>
</div>
<div class="notes-content">
{{ checkinData.notes }}
</div>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">关 闭</el-button>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">关 闭</el-button>
</div>
</el-dialog>
<!-- 图片预览弹窗 -->
<el-dialog title="图片预览" :visible.sync="previewVisible" width="60%" class="image-preview-dialog">
<el-dialog
title="图片预览"
:visible.sync="previewVisible"
width="60%"
class="image-preview-dialog"
:append-to-body="true"
:modal="true"
:close-on-click-modal="true"
:modal-append-to-body="true"
>
<div class="preview-container">
<img :src="previewImageUrl" alt="预览图片" style="max-width: 100%; max-height: 500px;" />
</div>
</el-dialog>
</el-dialog>
</div>
</template>
<script>
@ -380,161 +391,473 @@ export default {
<style lang="scss" scoped>
.checkin-dialog {
::v-deep .el-dialog {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
z-index: 2000;
}
::v-deep .el-dialog__wrapper {
z-index: 2000;
}
::v-deep .el-dialog__header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: white !important;
padding: 20px 24px;
.el-dialog__title {
font-size: 18px;
font-weight: 600;
color: white !important;
}
.el-dialog__close {
color: white !important;
font-size: 20px;
&:hover {
color: rgba(255, 255, 255, 0.8) !important;
}
}
}
::v-deep .el-dialog__body {
padding: 0;
}
.checkin-content {
max-height: 70vh;
overflow-y: auto;
padding: 24px;
// 自定义滚动条
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
&::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
&:hover {
background: #a8a8a8;
}
}
}
.section {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #e4e7ed;
border-radius: 6px;
background-color: #fafafa;
margin-bottom: 32px;
padding: 24px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
border: 1px solid #f0f0f0;
transition: all 0.3s ease;
&:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
&:last-child {
margin-bottom: 0;
}
.section-title {
margin-bottom: 20px;
margin-bottom: 24px;
position: relative;
.title-text {
font-size: 16px;
font-weight: bold;
color: #ff9500;
font-size: 18px;
font-weight: 600;
color: #2c3e50;
position: relative;
padding-left: 16px;
&::before {
content: '';
position: absolute;
left: -10px;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 16px;
background-color: #ff9500;
height: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
}
&::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 2px;
background: linear-gradient(90deg, #667eea 0%, transparent 100%);
border-radius: 1px;
}
}
}
}
.upload-group {
display: flex;
gap: 40px;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px;
}
.upload-item {
flex: 1;
min-width: 300px;
.upload-label {
margin-bottom: 10px;
font-weight: 500;
color: #333;
margin-bottom: 16px;
font-weight: 600;
color: #34495e;
font-size: 15px;
display: flex;
align-items: center;
&::before {
content: '📷';
margin-right: 8px;
font-size: 16px;
}
}
}
.pet-item,
.project-item {
margin-bottom: 20px;
margin-bottom: 24px;
padding: 20px;
background: #fafbfc;
border-radius: 8px;
border: 1px solid #e8eaed;
.upload-label {
margin-bottom: 10px;
font-weight: 500;
color: #333;
margin-bottom: 16px;
font-weight: 600;
color: #34495e;
font-size: 15px;
display: flex;
align-items: center;
&::before {
content: '🐾';
margin-right: 8px;
font-size: 16px;
}
}
}
.project-item {
.upload-label::before {
content: '⭐';
}
}
.notes-content {
padding: 15px;
background-color: #f5f5f5;
border-radius: 8px;
border: 1px solid #e4e7ed;
color: #606266;
padding: 20px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 12px;
border: 1px solid #dee2e6;
color: #495057;
font-size: 14px;
line-height: 1.6;
line-height: 1.8;
white-space: pre-wrap;
word-break: break-word;
position: relative;
&::before {
content: '💭';
position: absolute;
top: 16px;
right: 16px;
font-size: 18px;
opacity: 0.6;
}
}
.service-item {
margin-bottom: 30px;
margin-bottom: 32px;
padding: 20px;
background: #fafbfc;
border-radius: 10px;
border: 1px solid #e8eaed;
.service-label {
margin-bottom: 15px;
font-weight: 500;
color: #333;
margin-bottom: 20px;
font-weight: 600;
color: #34495e;
font-size: 16px;
text-align: center;
position: relative;
&::before {
content: '';
position: absolute;
left: 50%;
bottom: -8px;
transform: translateX(-50%);
width: 40px;
height: 2px;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 1px;
}
}
.compare-container {
display: flex;
gap: 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
@media (max-width: 768px) {
grid-template-columns: 1fr;
gap: 24px;
}
.compare-item {
flex: 1;
.compare-label {
text-align: center;
margin-bottom: 10px;
font-weight: 500;
color: #666;
margin-bottom: 16px;
font-weight: 600;
color: #5a6c7d;
font-size: 14px;
padding: 8px 16px;
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-radius: 20px;
display: inline-block;
width: 100%;
box-sizing: border-box;
&:first-child {
background: linear-gradient(135deg, #fff3e0 0%, #ffcc02 100%);
}
}
}
}
}
.image-gallery {
min-height: 100px;
min-height: 120px;
padding: 16px;
background: white;
border-radius: 8px;
border: 2px dashed #e1e8ed;
transition: all 0.3s ease;
&:hover {
border-color: #667eea;
background: #fafbff;
}
.image-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 16px;
.image-item {
width: 100px;
height: 100px;
border: 1px solid #d9d9d9;
border-radius: 6px;
width: 120px;
height: 120px;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
&:hover {
border-color: #409eff;
transform: scale(1.05);
transform: scale(1.08) rotate(1deg);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
z-index: 10;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
&:hover img {
transform: scale(1.1);
}
}
}
.no-data {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100px;
color: #999;
height: 120px;
color: #8a92a5;
font-size: 14px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
background-color: #fafafa;
font-weight: 500;
&::before {
content: '🖼️';
font-size: 24px;
margin-bottom: 8px;
opacity: 0.6;
}
}
}
}
.dialog-footer {
text-align: right;
padding-top: 20px;
border-top: 1px solid #e4e7ed;
padding: 24px;
background: #fafbfc;
border-top: 1px solid #e8eaed;
.el-button {
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
&:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
}
}
.image-preview-dialog {
::v-deep .el-dialog {
border-radius: 12px;
overflow: hidden;
z-index: 3000 !important;
}
::v-deep .el-dialog__wrapper {
z-index: 3000 !important;
backdrop-filter: blur(3px);
}
::v-deep .v-modal {
z-index: 2999 !important;
background-color: rgba(0, 0, 0, 0.8) !important;
}
::v-deep .el-dialog__header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: white !important;
padding: 20px 24px;
.el-dialog__title {
font-weight: 600;
color: white !important;
font-size: 16px;
}
.el-dialog__close {
color: white !important;
font-size: 18px;
&:hover {
color: rgba(255, 255, 255, 0.8) !important;
}
}
}
::v-deep .el-dialog__body {
padding: 0 !important;
background: #000 !important;
position: relative;
z-index: 3001 !important;
}
.preview-container {
text-align: center;
padding: 20px;
background: #000;
border-radius: 0;
position: relative;
z-index: 3002 !important;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
img {
border-radius: 8px;
box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
max-width: 100%;
max-height: 80vh;
transition: transform 0.3s ease;
position: relative;
z-index: 3003 !important;
object-fit: contain;
cursor: zoom-in;
&:hover {
transform: scale(1.05);
}
}
}
}
// 响应式设计
@media (max-width: 768px) {
.checkin-dialog {
::v-deep .el-dialog {
width: 95% !important;
margin: 0 auto;
}
.upload-group {
grid-template-columns: 1fr;
gap: 24px;
}
.section {
padding: 20px;
margin-bottom: 24px;
}
.image-gallery .image-list {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
.image-item {
width: 100px;
height: 100px;
}
}
}
}
// 深色模式支持（可选）
@media (prefers-color-scheme: dark) {
.checkin-dialog {
.section {
background: #2d3748;
border-color: #4a5568;
color: #e2e8f0;
}
.section-title .title-text {
color: #e2e8f0;
}
.upload-label {
color: #cbd5e0;
}
.notes-content {
background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
color: #e2e8f0;
}
.image-gallery {
background: #2d3748;
border-color: #4a5568;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save