Browse Source
refactor(订单管理): 优化订单管理和服务档案页面
- 重构订单管理页面的样式和布局，增加圆角和溢出隐藏 - 提取服务时间处理逻辑到独立工具文件 utils/serviceTime.js - 优化宠物档案页面的数据展示，使用计算属性动态显示疫苗、驱虫和绝育状态 - 新增时间线服务组件 timelineService.vue，用于展示订单服务时间线 - 修复订单列表和详情页面的数据展示问题，优化用户体验master
13 changed files with 906 additions and 126 deletions
Split View
Diff Options
-
+7 -0api/system/user.js
-
+1 -1manifest.json
-
+80 -0otherPages/myOrdersManage/service/index - 副本.vue
-
+168 -68otherPages/myOrdersManage/service/index.vue
-
+48 -4otherPages/orderTakingManage/pet/detail.vue
-
+9 -8pages/myOrdersManage/components/systemOrder.vue
-
+504 -0pages/myOrdersManage/components/timelineService.vue
-
+2 -0pages/myOrdersManage/index.scss
-
+24 -8pages/myOrdersManage/index.vue
-
+12 -9pages/orderTakingManage/components/list.vue
-
+5 -0pages/orderTakingManage/index.scss
-
+3 -28pages/orderTakingManage/index.vue
-
+43 -0utils/serviceTime.js
+ 7
- 0
api/system/user.js
View File
+ 1
- 1
manifest.json
View File
+ 80
- 0
otherPages/myOrdersManage/service/index - 副本.vue
View File
| @ -0,0 +1,80 @@ | |||
| <template> | |||
| <!-- <div>服务档案</div> --> | |||
| <view class="box box-size"> | |||
| <view class="container box-size level" | |||
| @click="toDetail" :style="{borderRadius:'16rpx'}"> | |||
| <view class="level"> | |||
| <view class="img"> | |||
| <image src="" mode=""></image> | |||
| </view> | |||
| <view class="text"> | |||
| 查看猫猫“小咪”的服务信息 | |||
| </view> | |||
| </view> | |||
| <view class="img_"> | |||
| <image src="/static/images/ydd/right.png" mode=""></image> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script setup> | |||
| function toDetail() { | |||
| uni.navigateTo({ | |||
| url: "/otherPages/myOrdersManage/service/detail" | |||
| }) | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .box { | |||
| width: 100vw; | |||
| height: 100vh; | |||
| padding: 2% 3%; | |||
| } | |||
| .box-size { | |||
| box-sizing: border-box; | |||
| } | |||
| .level { | |||
| display: flex; | |||
| } | |||
| .container { | |||
| width: 710rpx; | |||
| height: 121rpx; | |||
| background-color: #fff; | |||
| padding: 1% 4% 3% 2%; | |||
| justify-content: space-between; | |||
| margin-bottom: 20rpx; | |||
| } | |||
| .img image { | |||
| width: 104rpx; | |||
| height: 104rpx; | |||
| border-radius: 100rpx; | |||
| background-color: red; | |||
| margin-right: 20rpx; | |||
| } | |||
| .text { | |||
| font-size: 30rpx; | |||
| display: grid; | |||
| place-items: center; | |||
| } | |||
| .img_ { | |||
| display: grid; | |||
| place-items: center; | |||
| } | |||
| .img_ image { | |||
| width: 40rpx; | |||
| height: 40rpx; | |||
| /* background-color: red; */ | |||
| } | |||
| </style> | |||
+ 168
- 68
otherPages/myOrdersManage/service/index.vue
View File
| @ -1,80 +1,180 @@ | |||
| <template> | |||
| <!-- <div>服务档案</div> --> | |||
| <view class="box box-size"> | |||
| <view class="container box-size level" | |||
| @click="toDetail" :style="{borderRadius:'16rpx'}"> | |||
| <view class="level"> | |||
| <view class="img"> | |||
| <image src="" mode=""></image> | |||
| <view class="personal-pet"> | |||
| <view v-if="petList.length>0" class="personal-service-list"> | |||
| <view v-for="(item,index) in petList" :key="index"> | |||
| <view class="personal-service-list-item" @click="goServiceInfo(item)"> | |||
| <view style="display: flex;align-items: center;"> | |||
| <u-avatar :src="item.photo?item.photo:defaultPhoto" size="46" shape="circle"></u-avatar> | |||
| <view class="personal-service-tips ellipsis"> | |||
| {{serviceTips(item)}} | |||
| </view> | |||
| </view> | |||
| <view> | |||
| <u-icon slot="right" name="arrow-right" color="#AAA"></u-icon> | |||
| </view> | |||
| </view> | |||
| <view class="text"> | |||
| 查看猫猫“小咪”的服务信息 | |||
| </view> | |||
| </view> | |||
| <view class="img_"> | |||
| <image src="/static/images/ydd/right.png" mode=""></image> | |||
| </view> | |||
| </view> | |||
| <!-- <view v-else class="personal-pet-none"> | |||
| <img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png" alt="pet" | |||
| style="width: 149px;height: 124px;" mode="widthFix"/> | |||
| <view class="personal-pet-none-text">这里还没有您的宠物,请点击添加吧~</view> | |||
| </view> | |||
| <view class="personal-pet-add" v-if="petList.length==0"> | |||
| <button class="personal-pet-add-btn" @click="addPet">添加宠物</button> | |||
| </view> | |||
| <view class=""> | |||
| <u-picker | |||
| :showToolbar='false' | |||
| :show="show" | |||
| :columns="petTypes" | |||
| @change="petTypeChange" | |||
| @cancel="cancel" | |||
| @confirm="confirm" | |||
| ></u-picker> | |||
| </view> --> | |||
| </view> | |||
| </template> | |||
| <script setup> | |||
| function toDetail() { | |||
| uni.navigateTo({ | |||
| url: "/otherPages/myOrdersManage/service/detail" | |||
| }) | |||
| <script> | |||
| import { getpetList } from "@/api/pet/index.js" | |||
| import { getDictList } from "@/api/system/user.js" | |||
| export default{ | |||
| data(){ | |||
| return{ | |||
| petList:[], | |||
| show:false, | |||
| petTypes:[], | |||
| petType:'' | |||
| } | |||
| }, | |||
| onShow() { | |||
| this.getPetList(); | |||
| }, | |||
| methods:{ | |||
| getPetList(){ | |||
| getpetList({owner:this.openIdStr}).then(res=>{ | |||
| if(res&&res.content){ | |||
| this.petList=res.content | |||
| if(this.petList.length==0){ | |||
| this.getPetTypeList() | |||
| } | |||
| } | |||
| }) | |||
| }, | |||
| getPetTypeList(){ | |||
| getDictList('pet_type').then(res=>{ | |||
| if (res.code == 200) { | |||
| let petType = res.data.map(e=>e.dictLabel) | |||
| this.petTypes=[petType] | |||
| console.log(this.petTypes) | |||
| } else { | |||
| this.$modal.showToast('获取pet type失败') | |||
| } | |||
| }) | |||
| }, | |||
| addPet(){ | |||
| this.show = true; | |||
| }, | |||
| cancel() { | |||
| this.show = false | |||
| }, | |||
| petTypeChange(e){ | |||
| console.log(e) | |||
| this.petType=e.value[0] | |||
| }, | |||
| confirm(e) { | |||
| this.show = false | |||
| if(this.petType==='猫猫'){ | |||
| uni.navigateTo({ | |||
| url: `/pages/personalCenter/petInfo?petType=cat&optionType=add` | |||
| }); | |||
| } | |||
| if(this.petType==='狗狗'){ | |||
| uni.navigateTo({ | |||
| url: `/pages/personalCenter/petInfo?petType=dog&optionType=add` | |||
| }); | |||
| } | |||
| if(!this.petType){ | |||
| if(e.value[0]==='猫猫'){ | |||
| uni.navigateTo({ | |||
| url: `/pages/personalCenter/petInfo?petType=cat&optionType=add` | |||
| }); | |||
| } | |||
| if(e.value[0]==='狗狗'){ | |||
| uni.navigateTo({ | |||
| url: `/pages/personalCenter/petInfo?petType=dog&optionType=add` | |||
| }); | |||
| } | |||
| } | |||
| }, | |||
| serviceTips(item){ | |||
| return `查看${item.petType=='dog'?"狗狗":"猫猫"}"${item.name}"的服务信息` | |||
| }, | |||
| goServiceInfo(item){ | |||
| uni.navigateTo({ | |||
| url: `/pages/personalCenter/serviceInfo?petType=${item.petType}&petId=${item.id}` | |||
| }); | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .box { | |||
| width: 100vw; | |||
| height: 100vh; | |||
| padding: 2% 3%; | |||
| } | |||
| .box-size { | |||
| box-sizing: border-box; | |||
| } | |||
| .level { | |||
| display: flex; | |||
| } | |||
| .container { | |||
| width: 710rpx; | |||
| height: 121rpx; | |||
| background-color: #fff; | |||
| padding: 1% 4% 3% 2%; | |||
| justify-content: space-between; | |||
| margin-bottom: 20rpx; | |||
| } | |||
| .img image { | |||
| width: 104rpx; | |||
| height: 104rpx; | |||
| border-radius: 100rpx; | |||
| background-color: red; | |||
| margin-right: 20rpx; | |||
| } | |||
| .text { | |||
| font-size: 30rpx; | |||
| display: grid; | |||
| place-items: center; | |||
| } | |||
| .img_ { | |||
| display: grid; | |||
| place-items: center; | |||
| } | |||
| .img_ image { | |||
| width: 40rpx; | |||
| height: 40rpx; | |||
| /* background-color: red; */ | |||
| <style lang="scss"> | |||
| .personal-pet{ | |||
| position: relative; | |||
| height: 100%; | |||
| padding-bottom: 58px; | |||
| .personal-pet-add{ | |||
| background-color: #FFFFFF; | |||
| padding: 10px 20px 40px; | |||
| width: 100%; | |||
| height: 90px; | |||
| position: fixed; | |||
| bottom: 0; | |||
| z-index: 100; | |||
| display: flex; | |||
| .personal-pet-add-btn{ | |||
| width: 100%; | |||
| border-radius: 6px; | |||
| background: #FFB13F; | |||
| font-size: 16px; | |||
| color: #FFFFFF; | |||
| } | |||
| } | |||
| .personal-service-list{ | |||
| .personal-service-list-item{ | |||
| background-color: #fff; | |||
| margin: 10px 10px 0 10px; | |||
| border-radius: 5px; | |||
| padding: 10px; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| .personal-service-tips{ | |||
| margin-left: 10px; | |||
| color:#333; | |||
| font-size: 14px; | |||
| } | |||
| } | |||
| } | |||
| .personal-pet-none{ | |||
| display:flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| flex-wrap: wrap; | |||
| margin-top: 40%; | |||
| .personal-pet-none-text{ | |||
| color: #666; | |||
| text-align: center; | |||
| font-size: 14px; | |||
| width: 100%; | |||
| margin-top: 10px; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
+ 48
- 4
otherPages/orderTakingManage/pet/detail.vue
View File
+ 9
- 8
pages/myOrdersManage/components/systemOrder.vue
View File
+ 504
- 0
pages/myOrdersManage/components/timelineService.vue
View File
| @ -0,0 +1,504 @@ | |||
| <template> | |||
| <view class="timeline-container"> | |||
| <!-- 日期和状态标签 --> | |||
| <view class="date-header"> | |||
| <view class="date-box"> | |||
| <view class="date-box-color" :style="{'background-color': getTopBgColor()}"></view> | |||
| <view class="date-month-day">{{ formatDate(date).month }}-{{ formatDate(date).day }}</view> | |||
| </view> | |||
| <view class="status-tag" :class="{'status-tag-pending': status === 'pending'}"> | |||
| <image src="/static/images/ydd/icon1.png" mode="aspectFit" class="status-icon"></image> | |||
| {{ status === 'pending' ? '待上门' : '已完成' }}{{ orderCount }}单 | |||
| </view> | |||
| </view> | |||
| <!-- 时间线主体 --> | |||
| <view class="timeline-body"> | |||
| <view class="timeline-line" :class="{'timeline-line-completed': status === 'completed'}"></view> | |||
| <!-- 服务时间点 --> | |||
| <view class="time-point"> | |||
| <view class="time-icon"> | |||
| <image src="/static/images/ydd/icon1.png" mode="aspectFit" class="time-image"></image> | |||
| </view> | |||
| <view class="time-text">{{ timeOfDay }}</view> | |||
| </view> | |||
| <!-- 服务内容卡片 --> | |||
| <view class="service-card"> | |||
| <!-- 服务日期 --> | |||
| <view class="service-section"> | |||
| <view class="section-title"> | |||
| <view class="title-indicator"></view> | |||
| <text>服务日期</text> | |||
| </view> | |||
| <view class="section-content date-content"> | |||
| {{ fullDate }} | |||
| </view> | |||
| </view> | |||
| <!-- 陪伴对象 --> | |||
| <view class="service-section"> | |||
| <view class="section-title"> | |||
| <view class="title-indicator"></view> | |||
| <text>陪伴对象</text> | |||
| <view class="collapse-icon" @click="togglePetList"> | |||
| 收起 <text class="arrow" :class="{'arrow-up': !petListCollapsed}">▼</text> | |||
| </view> | |||
| </view> | |||
| <view class="section-content pet-list" v-if="!petListCollapsed"> | |||
| <view v-for="(pet, index) in pets" :key="index" class="pet-item"> | |||
| <view class="pet-avatar"> | |||
| <image :src="pet.avatar || '/static/images/ydd/dog.png'" mode="aspectFill" class="avatar-image"></image> | |||
| </view> | |||
| <view class="pet-info"> | |||
| <view class="pet-name"> | |||
| {{ pet.name }} | |||
| <text class="pet-gender" :class="{'pet-gender-male': pet.gender === 'male', 'pet-gender-female': pet.gender === 'female'}"> | |||
| {{ pet.gender === 'male' ? '♂' : '♀' }} | |||
| </text> | |||
| </view> | |||
| <view class="pet-description"> | |||
| {{ pet.breed }}{{ pet.bodyType }} | {{ pet.services.join('，') }} | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 上门地址 --> | |||
| <view class="service-section"> | |||
| <view class="section-title"> | |||
| <view class="title-indicator"></view> | |||
| <text>上门地址</text> | |||
| </view> | |||
| <view class="section-content address-content"> | |||
| {{ address }} | |||
| </view> | |||
| </view> | |||
| <!-- 操作按钮 --> | |||
| <view class="action-buttons"> | |||
| <view class="btn btn-clock" @click="handleClock">打卡</view> | |||
| <view class="btn btn-clock" @click="handlePetFile">宠物档案</view> | |||
| <view class="btn btn-clock" @click="handleServiceFile">服务档案</view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script setup> | |||
| import { ref, computed } from 'vue'; | |||
| import { getOrderServiceText, getProductNameText } from '@/utils/serviceTime.js'; | |||
| // 定义组件属性 | |||
| const props = defineProps({ | |||
| date: { | |||
| type: String, | |||
| default: '2024-12-08' | |||
| }, | |||
| timeOfDay: { | |||
| type: String, | |||
| default: '早上' | |||
| }, | |||
| status: { | |||
| type: String, | |||
| default: 'pending' // 'pending' 或 'completed' | |||
| }, | |||
| orderCount: { | |||
| type: Number, | |||
| default: 2 | |||
| }, | |||
| pets: { | |||
| type: Array, | |||
| default: () => [{ | |||
| name: '小汪', | |||
| gender: 'male', | |||
| breed: '中华田园犬', | |||
| bodyType: '(小型犬)', | |||
| services: ['专业喂养', '提前熟悉', '陪玩'], | |||
| avatar: '/static/images/ydd/dog.png' | |||
| }, { | |||
| name: 'Billion', | |||
| gender: 'female', | |||
| breed: '豹猫', | |||
| bodyType: '(小型猫)', | |||
| services: ['上门喂养', '陪玩'], | |||
| avatar: '/static/images/ydd/cat.png' | |||
| }] | |||
| }, | |||
| address: { | |||
| type: String, | |||
| default: '重庆市南岸区长嘉汇18栋9-2' | |||
| } | |||
| }); | |||
| // 宠物列表折叠状态 | |||
| const petListCollapsed = ref(false); | |||
| // 切换宠物列表显示状态 | |||
| const togglePetList = () => { | |||
| petListCollapsed.value = !petListCollapsed.value; | |||
| }; | |||
| // 格式化日期 | |||
| const formatDate = (dateString) => { | |||
| const date = new Date(dateString); | |||
| return { | |||
| day: date.getDate().toString().padStart(2, '0'), | |||
| month: (date.getMonth() + 1).toString().padStart(2, '0') | |||
| }; | |||
| }; | |||
| // 完整日期显示 | |||
| const fullDate = computed(() => { | |||
| const date = new Date(props.date); | |||
| const year = date.getFullYear(); | |||
| const month = (date.getMonth() + 1).toString().padStart(2, '0'); | |||
| const day = date.getDate().toString().padStart(2, '0'); | |||
| return `${year}年${month}月${day}日`; | |||
| }); | |||
| // 按钮事件处理函数 | |||
| const handleClock = (id) => { | |||
| // 打卡功能实现 | |||
| const paths = [`/otherPages/orderTakingManage/detail/index?id=${id}`,'/otherPages/myOrdersManage/clock/index','/otherPages/myOrdersManage/clock/detail'] | |||
| uni.navigateTo({ | |||
| url: paths[props.current] | |||
| }) | |||
| }; | |||
| const handlePetFile = () => { | |||
| // 宠物档案功能实现 | |||
| uni.navigateTo({ | |||
| url: "/otherPages/orderTakingManage/pet/index" | |||
| }) | |||
| }; | |||
| const handleServiceFile = () => { | |||
| uni.navigateTo({ | |||
| url: "/otherPages/myOrdersManage/service/index" | |||
| }) | |||
| }; | |||
| function getTopBgColor(){ | |||
| return '#FFAA48' | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .timeline-container { | |||
| position: relative; | |||
| padding: 20rpx; | |||
| margin-bottom: 30rpx; | |||
| .date-header { | |||
| display: flex; | |||
| align-items: center; | |||
| margin-bottom: 20rpx; | |||
| .date-box { | |||
| width: 80rpx; | |||
| background-color: #ffffff; | |||
| border: 2px solid #333; | |||
| border-radius: 0; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| align-items: center; | |||
| margin-right: 20rpx; | |||
| box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05); | |||
| border-radius: 14rpx; | |||
| .date-box-color{ | |||
| height: 20rpx; | |||
| width: 100%; | |||
| border-top-left-radius: 14rpx; | |||
| border-top-right-radius: 14rpx; | |||
| position: relative; | |||
| &::before{ | |||
| content: ''; | |||
| display: block; | |||
| background-color: #ddd; | |||
| width: 100%; | |||
| height: 26rpx; | |||
| top: 100%; | |||
| left: 0; | |||
| position: absolute; | |||
| } | |||
| } | |||
| .date-month-day { | |||
| position: relative; | |||
| font-size: 26rpx; | |||
| font-weight: bold; | |||
| color: #333; | |||
| height: 50rpx; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| } | |||
| } | |||
| .status-tag { | |||
| background-color: #4CD96422; | |||
| color: #4CD964; | |||
| border: 4rpx solid #4CD964; | |||
| padding: 16rpx 26rpx; | |||
| border-radius: 14rpx; | |||
| font-size: 26rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| position: relative; | |||
| margin-left: 20rpx; | |||
| .status-icon { | |||
| width: 32rpx; | |||
| height: 32rpx; | |||
| margin-right: 8rpx; | |||
| } | |||
| &::after{ | |||
| content: ''; | |||
| display: block; | |||
| position: absolute; | |||
| width: 0; | |||
| height: 0; | |||
| top: 50%; | |||
| transform: translateY(-50%); | |||
| left: -16rpx; | |||
| border-top: 16rpx solid transparent; | |||
| border-bottom: 16rpx solid transparent; | |||
| border-right: 16rpx solid #4CD964; | |||
| } | |||
| &::before{ | |||
| content: ''; | |||
| display: block; | |||
| position: absolute; | |||
| width: 0; | |||
| height: 0; | |||
| top: 50%; | |||
| transform: translateY(-50%); | |||
| left: -12rpx; | |||
| border-top: 12rpx solid transparent; | |||
| border-bottom: 12rpx solid transparent; | |||
| border-right: 12rpx solid #4CD96422; | |||
| z-index: 1; | |||
| } | |||
| } | |||
| .status-tag-pending { | |||
| background-color: #FFAA4822; | |||
| color: #FFAA48; | |||
| border-color: #FFAA48; | |||
| &::after{ | |||
| border-right-color: #FFAA48; | |||
| } | |||
| &::before{ | |||
| border-right-color: #FFAA4822; | |||
| } | |||
| } | |||
| } | |||
| .timeline-body { | |||
| position: relative; | |||
| padding-left: 40rpx; | |||
| .timeline-line { | |||
| position: absolute; | |||
| left: 40rpx; | |||
| top: 0; | |||
| height: 100%; | |||
| width: 2rpx; | |||
| background-color: #FFAA48; | |||
| z-index: 0; | |||
| } | |||
| .timeline-line-completed { | |||
| background-color: #4CD964; | |||
| } | |||
| .time-point { | |||
| display: flex; | |||
| align-items: center; | |||
| margin-bottom: 20rpx; | |||
| position: relative; | |||
| z-index: 1; | |||
| .time-icon { | |||
| width: 60rpx; | |||
| height: 60rpx; | |||
| background-color: #fff; | |||
| border-radius: 50%; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| margin-right: 20rpx; | |||
| position: relative; | |||
| left: -20rpx; | |||
| .time-image { | |||
| width: 40rpx; | |||
| height: 40rpx; | |||
| } | |||
| } | |||
| .time-text { | |||
| font-size: 28rpx; | |||
| color: #333; | |||
| } | |||
| } | |||
| .service-card { | |||
| background-color: #fff; | |||
| border-radius: 12rpx; | |||
| padding: 30rpx; | |||
| box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); | |||
| margin-left: 20rpx; | |||
| .service-section { | |||
| margin-bottom: 30rpx; | |||
| .section-title { | |||
| display: flex; | |||
| align-items: center; | |||
| margin-bottom: 15rpx; | |||
| .title-indicator { | |||
| width: 6rpx; | |||
| height: 30rpx; | |||
| background-color: #FFAA48; | |||
| margin-right: 15rpx; | |||
| } | |||
| text { | |||
| font-size: 28rpx; | |||
| color: #333; | |||
| font-weight: bold; | |||
| } | |||
| .collapse-icon { | |||
| margin-left: auto; | |||
| font-size: 24rpx; | |||
| color: #999; | |||
| .arrow { | |||
| transition: transform 0.3s; | |||
| display: inline-block; | |||
| } | |||
| .arrow-up { | |||
| transform: rotate(180deg); | |||
| } | |||
| } | |||
| } | |||
| .section-content { | |||
| padding: 0 15rpx; | |||
| background-color: #FFF9F0; | |||
| } | |||
| .date-content { | |||
| background-color: #FFF9F0; | |||
| padding: 20rpx; | |||
| border-radius: 8rpx; | |||
| font-size: 28rpx; | |||
| color: #333; | |||
| } | |||
| .pet-list { | |||
| padding: 15rpx; | |||
| .pet-item { | |||
| display: flex; | |||
| margin-bottom: 20rpx; | |||
| &:last-child { | |||
| margin-bottom: 0; | |||
| } | |||
| .pet-avatar { | |||
| width: 80rpx; | |||
| height: 80rpx; | |||
| border-radius: 50%; | |||
| overflow: hidden; | |||
| margin-right: 20rpx; | |||
| .avatar-image { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| } | |||
| .pet-info { | |||
| flex: 1; | |||
| .pet-name { | |||
| font-size: 28rpx; | |||
| color: #333; | |||
| margin-bottom: 8rpx; | |||
| .pet-gender { | |||
| display: inline-block; | |||
| width: 32rpx; | |||
| height: 32rpx; | |||
| line-height: 32rpx; | |||
| text-align: center; | |||
| border-radius: 50%; | |||
| color: #fff; | |||
| font-size: 20rpx; | |||
| margin-left: 10rpx; | |||
| } | |||
| .pet-gender-male { | |||
| background-color: #4A90E2; | |||
| } | |||
| .pet-gender-female { | |||
| background-color: #FF6B9A; | |||
| } | |||
| } | |||
| .pet-description { | |||
| font-size: 24rpx; | |||
| color: #7D8196; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .address-content { | |||
| padding: 20rpx; | |||
| border-radius: 8rpx; | |||
| font-size: 28rpx; | |||
| color: #7D8196; | |||
| } | |||
| } | |||
| .action-buttons { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| .btn { | |||
| width: 30%; | |||
| height: 80rpx; | |||
| line-height: 80rpx; | |||
| text-align: center; | |||
| border-radius: 40rpx; | |||
| font-size: 28rpx; | |||
| } | |||
| .btn-clock { | |||
| background-color: #FFAA48; | |||
| color: #fff; | |||
| } | |||
| .btn-pet-file, .btn-service-file { | |||
| background-color: #F6F7FB; | |||
| color: #333; | |||
| border: 1px solid #E5E6EB; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
+ 2
- 0
pages/myOrdersManage/index.scss
View File
+ 24
- 8
pages/myOrdersManage/index.vue
View File
+ 12
- 9
pages/orderTakingManage/components/list.vue
View File
+ 5
- 0
pages/orderTakingManage/index.scss
View File
+ 3
- 28
pages/orderTakingManage/index.vue
View File
+ 43
- 0
utils/serviceTime.js
View File
| @ -0,0 +1,43 @@ | |||
| import dayjs from "dayjs"; | |||
| export function getOrderServiceText(petId, orderServiceList) { | |||
| let YYYY = undefined | |||
| return orderServiceList | |||
| .filter(service => service.petId == petId) //过滤 | |||
| .map(service => dayjs(service.serviceDate)) //转成时间 | |||
| .sort((a, b) => a.valueOf() - b.valueOf()) //排序 | |||
| .map((service, i) => { | |||
| // if(YYYY && YYYY.format('YYYY-MM') == service.format('YYYY-MM')){ | |||
| // return service.format('DD') | |||
| // } | |||
| // if(YYYY && YYYY.format('YYYY') == service.format('YYYY')){ | |||
| // return service.format('MM-DD') | |||
| // } | |||
| // YYYY = service | |||
| return service.format('MM-DD') | |||
| }) | |||
| } | |||
| export function getProductNameText(petId, productList, orderServiceList) { | |||
| let orderService = orderServiceList.filter(service => service.petId == petId) | |||
| return productList | |||
| .filter(product => orderService.filter(service => service.id == product.orderServiceId).length > 0) | |||
| .map(product => product.productName) | |||
| } | |||
| export default { | |||
| getProductNameText, | |||
| getOrderServiceText, | |||
| } | |||