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

refactor: 优化订单管理页面代码结构及输入类型 

- 修改输入框类型为数字输入
- 移除冗余代码块
- 优化条件渲染逻辑
- 统一空状态显示
master
前端-胡立永 6 months ago
parent
cb5b9d7ea1
commit
80efec5914
6 changed files with 777 additions and 14 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +754
    -0
      otherPages/myOrdersManage/service/detail - 副本.vue
  2. +5
    -5
      otherPages/myOrdersManage/service/detail.vue
  3. +1
    -1
      otherPages/myOrdersManage/withdrawal/index.vue
  4. +2
    -1
      otherPages/workbenchManage/myUser/index.vue
  5. +13
    -3
      pages/myOrdersManage/components/timelineService.vue
  6. +2
    -4
      pages/orderTakingManage/components/list.vue

+ 754
- 0
otherPages/myOrdersManage/service/detail - 副本.vue View File

@ -0,0 +1,754 @@
<template>
<!-- <div>服务档案</div> -->
<view class="box box-size">
<view style="margin: 32rpx 0;">
<up-steps :current="currentStep" activeColor="#FFA042" inactiveColor="#E5E5E5" class="up-steps-custom">
<up-steps-item title="喂养要求" :titleStyle="{fontSize: '32rpx', fontWeight: 'bold', color: currentStep === 0 ? '#FFA042' : '#999999'}"></up-steps-item>
<up-steps-item title="清洁要求" :titleStyle="{fontSize: '32rpx', fontWeight: 'bold', color: currentStep === 1 ? '#FFA042' : '#999999'}"></up-steps-item>
<up-steps-item title="附加服务" :titleStyle="{fontSize: '32rpx', fontWeight: 'bold', color: currentStep === 2 ? '#FFA042' : '#999999'}"></up-steps-item>
</up-steps>
</view>
<!-- v-if="detail.includeDryFood
|| detail.includeWetFood
|| detail.includeHomemadeFood
|| detail.includeRawMeat
|| detail.includeHealthSupplements
|| detail.includeSnacks
" -->
<!-- 喂养要求内容 -->
<view v-if="currentStep === 0">
<view class="top box-size" :style="{borderRadius:'16rpx'}">
<view class="form-title">
本次喂养过程中，您需要喂养的食品包括
</view>
<view v-if="!detail.includeDryFood && !detail.includeWetFood && !detail.includeHomemadeFood && !detail.includeRawMeat && !detail.includeHealthSupplements && !detail.includeSnacks" class="empty-state-full">
<up-icon name="info-circle" size="60rpx" color="#999999"></up-icon>
<text class="empty-text-full">暂无喂养食品</text>
</view>
<view class=" mt32 ml10" v-if="detail.includeDryFood">
<view class="color-A55 size-30 fw400">
干粮(主粮、冻干等)
</view>
<view class="size-30 mt32 fw400">
干粮摆放位置
</view>
<view class="img mt20">
<template v-if="handleImageUrl(detail.dryFoodLocation).length > 0">
<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.dryFoodLocation)" :key="index"></u-image>
</template>
<view v-else class="empty-state">
<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
<text class="empty-text">暂无图片</text>
</view>
</view>
<view class="size-30 mt24 flex-between">
<view :style="{color:'#999999'}">干粮喂养重量</view>
<view class="level">
<view class="input_ mr10">
<input type="text" v-model="detail.dryFoodFeedWeight" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
</view>
<view>/次(单位:克)</view>
</view>
</view>
<view class="size-30 mt24 flex-between">
<view :style="{color:'#999999'}">干粮喂养频率</view>
<view class="level">
<view class="input_ mr10">
<input type="text" v-model="detail.dryFoodFeedFrequencyDays" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
</view>
<view>天</view>
<view class="input_ mr10">
<input type="text" v-model="detail.dryFoodFeedFrequencyTimes" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
</view>
<view>次</view>
</view>
</view>
<view class="size-30 mt24" :style="{color:'#999999'}">
备注信息
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" disabled v-model="detail.dryFoodRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeDryFood"></view>
<view class=" mt32 ml10" v-if="detail.includeWetFood">
<view class="color-A55 size-30 fw400">
湿粮(罐头等)
</view>
<view class="size-30 mt32 fw400">
湿粮摆放位置
</view>
<view class="img mt20">
<template v-if="handleImageUrl(detail.wetFoodLocation).length > 0">
<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.wetFoodLocation)" :key="index"></u-image>
</template>
<view v-else class="empty-state">
<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
<text class="empty-text">暂无图片</text>
</view>
</view>
<view class="size-30 mt24 flex-between">
<view :style="{color:'#999999'}">湿粮喂养重量</view>
<view class="level">
<view class="input_ mr10">
<input type="text" disabled v-model="detail.wetFoodFeedWeight" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
</view>
<view>/次(单位:罐)</view>
</view>
</view>
<view class="size-30 mt24 flex-between">
<view :style="{color:'#999999'}">湿粮喂养频率</view>
<view class="level">
<view class="input_ mr10">
<input type="text" disabled v-model="detail.wetFoodFeedFrequencyDays" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
</view>
<view>天</view>
<view class="input_ mr10">
<input type="text" disabled v-model="detail.wetFoodFeedFrequencyTimes" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
</view>
<view>次</view>
</view>
</view>
<view class="size-30 mt24" :style="{color:'#999999'}">
备注信息
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" v-model="detail.wetFoodRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeWetFood"></view>
<view class=" mt32 ml10" v-if="detail.includeHomemadeFood">
<view class="color-A55 size-30 fw400">
自制食品
</view>
<view class="size-30 mt32 fw400">
自制食品摆放位置
</view>
<view class="img mt20">
<template v-if="handleImageUrl(detail.homemadeFoodLocation).length > 0">
<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.homemadeFoodLocation)" :key="index"></u-image>
</template>
<view v-else class="empty-state">
<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
<text class="empty-text">暂无图片</text>
</view>
</view>
<view class="size-30 mt24" :style="{color:'#999999'}">
自制饭制作和喂食说明
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" v-model="detail.homemadeFoodInstructions" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeHomemadeFood"></view>
<view class=" mt32 ml10" v-if="detail.includeRawMeat">
<view class="color-A55 size-30 fw400">
生骨肉
</view>
<view class="size-30 mt32 fw400">
生骨肉摆放位置
</view>
<view class="img mt20">
<template v-if="handleImageUrl(detail.rawMeatLocation).length > 0">
<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.rawMeatLocation)" :key="index"></u-image>
</template>
<view v-else class="empty-state">
<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
<text class="empty-text">暂无图片</text>
</view>
</view>
<view class="size-30 mt24" :style="{color:'#999999'}">
生骨肉喂食说明
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" disabled v-model="detail.rawMeatFeedingInstructions" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeRawMeat"></view>
<view class=" mt32 ml10" v-if="detail.includeHealthSupplements">
<view class="color-A55 size-30 fw400">
保健品
</view>
<view class="size-30 mt32 fw400">
保健品摆放位置
</view>
<view class="img mt20">
<template v-if="handleImageUrl(detail.healthSupplementsLocation).length > 0">
<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.healthSupplementsLocation)" :key="index"></u-image>
</template>
<view v-else class="empty-state">
<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
<text class="empty-text">暂无图片</text>
</view>
</view>
<view class="size-30 mt24" :style="{color:'#999999'}">
保健品喂养方式
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" disabled v-model="detail.healthSupplementsFeedingInstructions" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeHealthSupplements"></view>
<view class=" mt32 ml10" v-if="detail.includeSnacks">
<view class="color-A55 size-30 fw400">
零食
</view>
<view class="size-30 mt32 fw400">
零食摆放位置
</view>
<view class="img mt20">
<template v-if="handleImageUrl(detail.snacksLocation).length > 0">
<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.snacksLocation)" :key="index"></u-image>
</template>
<view v-else class="empty-state">
<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
<text class="empty-text">暂无图片</text>
</view>
</view>
<view class="size-30 mt24" :style="{color:'#999999'}">
零食喂养方式
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" disabled v-model="detail.snacksFeedingMethod" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeSnacks"></view>
</view>
<view class="top mt24" :style="{borderRadius:'16rpx'}">
<view class="form-title">
食盆/自动喂食器
</view>
<view class=" mt32 ml10">
<view class="color-A55 size-30 fw400">
喂食器具摆放位置
</view>
<view class="mt20">
<template v-if="handleImageUrl(detail.feedingTrayAutomaticFeederLocation).length > 0">
<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.feedingTrayAutomaticFeederLocation)" :key="index"></u-image>
</template>
<view v-else class="empty-state">
<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
<text class="empty-text">暂无图片</text>
</view>
</view>
<view class="size-30 mt24" :style="{color:'#999999'}">
备注信息
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" disabled v-model="detail.feedingTrayAutomaticFeederRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
</view>
<view class="top mt24" :style="{borderRadius:'16rpx'}">
<view class="form-title">
饮用水
</view>
<view class=" mt32 ml10">
<view class="color-A55 size-30 fw400">
饮用水摆放位置
</view>
<view class="mt20">
<template v-if="handleImageUrl(detail.waterBowlLocation).length > 0">
<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.waterBowlLocation)" :key="index"></u-image>
</template>
<view v-else class="empty-state">
<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
<text class="empty-text">暂无图片</text>
</view>
</view>
<view class="size-30 mt24" :style="{color:'#999999'}">
饮用水添加要求
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" disabled v-model="detail.waterBowlRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
</view>
<view class="top mt24" :style="{borderRadius:'16rpx'}">
<view class="form-title">
其他补充信息(非必填)
</view>
<view class=" mt32 ml10">
<view class="size-30 mt24" :style="{color:'#999999'}">
备注信息
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" disabled v-model="detail.otherRemark" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
</view>
</view>
<!-- 清洁要求内容 -->
<view v-if="currentStep === 1">
<view class="top box-size" :style="{borderRadius:'16rpx'}">
<view class="form-title">
您需要的清洁内容
</view>
<view v-if="!detail.includeCatLitter && !detail.includeUrinePad" class="empty-state-full">
<up-icon name="info-circle" size="60rpx" color="#999999"></up-icon>
<text class="empty-text-full">暂无清洁内容</text>
</view>
<view class="mt32 ml10" v-if="detail.includeCatLitter">
<view class="color-A55 size-30 fw400">
猫砂
</view>
<view class="size-30 mt32 fw400">
猫砂摆放位置
</view>
<view class="img mt20">
<template v-if="handleImageUrl(detail.catLitterLocation).length > 0">
<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.catLitterLocation)" :key="index"></u-image>
</template>
<view v-else class="empty-state">
<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
<text class="empty-text">暂无图片</text>
</view>
</view>
<view class="size-30 mt24 flex-between">
<view :style="{color:'#999999'}">猫砂更换频率</view>
<view class="level">
<view class="input_ mr10">
<input type="text" disabled v-model="detail.catLitterChangeFrequencyDays" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
</view>
<view>天</view>
<view class="input_ mr10">
<input type="text" disabled v-model="detail.catLitterChangeFrequencyTimes" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
</view>
<view>次</view>
</view>
</view>
<view class="size-30 mt24" :style="{color:'#999999'}">
备注信息
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" v-model="detail.catLitterRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeCatLitter"></view>
<view class="mt32 ml10" v-if="detail.includeUrinePad">
<view class="color-A55 size-30 fw400">
尿垫
</view>
<view class="size-30 mt32 fw400">
尿垫摆放位置
</view>
<view class="img mt20">
<template v-if="handleImageUrl(detail.urinePadLocation).length > 0">
<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.urinePadLocation)" :key="index"></u-image>
</template>
<view v-else class="empty-state">
<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
<text class="empty-text">暂无图片</text>
</view>
</view>
<view class="size-30 mt24 flex-between">
<view :style="{color:'#999999'}">更换尿垫</view>
<view class="level">
<view class="input_ mr10">
<input type="text" v-model="detail.urinePadChangeFrequency" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
</view>
<view>是</view>
</view>
</view>
<view class="size-30 mt24 flex-between">
<view :style="{color:'#999999'}">尿垫更换频率</view>
<view class="level">
<view class="input_ mr10">
<input type="text" v-model="detail.urinePadChangeFrequencyDays" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
</view>
<view>天</view>
<view class="input_ mr10">
<input type="text" v-model="detail.urinePadChangeFrequencyTimes" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
</view>
<view>次</view>
</view>
</view>
<view class="size-30 mt24" :style="{color:'#999999'}">
备注信息
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" disabled v-model="detail.urinePadRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
</view>
</view>
<!-- 附加服务内容 -->
<view v-if="currentStep === 2">
<view class="top box-size" :style="{borderRadius:'16rpx'}">
<view class="form-title">
您需要的附加服务
</view>
<view v-if="!detail.additionalService || (!detail.playtimeService && !detail.furCleaningService && !detail.groomingService && !detail.deepCleaningService)" class="empty-state-full">
<up-icon name="info-circle" size="60rpx" color="#999999"></up-icon>
<text class="empty-text-full">暂无附加服务</text>
</view>
<!-- 陪玩服务 -->
<view class="mt32 ml10" v-if="detail.playtimeService">
<view class="color-A55 size-30 fw400">
陪玩
</view>
<view class="size-30 mt32 fw400">
陪玩用具摆放位置
</view>
<view class="img mt20">
<template v-if="handleImageUrl(detail.playtimeToolsLocation).length > 0">
<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.playtimeToolsLocation)" :key="index"></u-image>
</template>
<view v-else class="empty-state">
<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
<text class="empty-text">暂无图片</text>
</view>
</view>
<view class="size-30 mt24" :style="{color:'#999999'}">
您希望的互动方式和要求
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" v-model="detail.playtimeRequirements" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.playtimeService"></view>
<!-- 活动区吸毛 -->
<view class="mt32 ml10" v-if="detail.furCleaningService">
<view class="color-A55 size-30 fw400">
活动区吸毛
</view>
<view class="size-30 mt32 fw400">
吸毛用品摆放位置
</view>
<view class="img mt20">
<template v-if="handleImageUrl(detail.furCleaningToolsLocation).length > 0">
<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.furCleaningToolsLocation)" :key="index"></u-image>
</template>
<view v-else class="empty-state">
<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
<text class="empty-text">暂无图片</text>
</view>
</view>
<view class="size-30 mt24" :style="{color:'#999999'}">
请说明吸毛区域及要求
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" v-model="detail.furCleaningRequirements" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.furCleaningService"></view>
<!-- 毛发梳理 -->
<view class="mt32 ml10" v-if="detail.groomingService">
<view class="color-A55 size-30 fw400">
毛发梳理
</view>
<view class="size-30 mt32 fw400">
毛发梳理用品摆放位置
</view>
<view class="img mt20">
<template v-if="handleImageUrl(detail.groomingToolsLocation).length > 0">
<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.groomingToolsLocation)" :key="index"></u-image>
</template>
<view v-else class="empty-state">
<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
<text class="empty-text">暂无图片</text>
</view>
</view>
<view class="size-30 mt24" :style="{color:'#999999'}">
请说明毛发梳理要求(如: 天数,次数等)
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" v-model="detail.groomingRequirements" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.groomingService"></view>
<!-- 食具深度清洁 -->
<view class="mt32 ml10" v-if="detail.deepCleaningService">
<view class="color-A55 size-30 fw400">
食具深度清洁
</view>
<view class="size-30 mt32 fw400">
需深度清洁的用具及消毒剂摆放位置
</view>
<view class="img mt20">
<template v-if="handleImageUrl(detail.deepCleaningToolsLocation).length > 0">
<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.deepCleaningToolsLocation)" :key="index"></u-image>
</template>
<view v-else class="empty-state">
<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
<text class="empty-text">暂无图片</text>
</view>
</view>
<view class="size-30 mt24" :style="{color:'#999999'}">
请说明食具/饮水机深度清洁要求(如清洁方式、消毒剂使用方式、频率等)
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" v-model="detail.deepCleaningRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.deepCleaningService"></view>
<!-- 喂药上药 -->
<view class="mt32 ml10" v-if="detail.administerMedication">
<view class="color-A55 size-30 fw400">
喂药上药
</view>
<view class="size-30 mt32 fw400">
药品摆放位置
</view>
<view class="img mt20">
<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.administerMedicationLocation)" :key="index"></u-image>
</view>
<view class="size-30 mt24" :style="{color:'#999999'}">
请说明药品使用方式
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" disabled v-model="detail.administerMedicationRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.administerMedication"></view>
<!-- 遛狗服务 -->
<view class="mt32 ml10" v-if="detail.walkDog">
<view class="color-A55 size-30 fw400">
遛狗服务
</view>
<view class="size-30 mt32 fw400">
遛狗用品摆放位置
</view>
<view class="img mt20">
<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.walkDogToolsLocation)" :key="index"></u-image>
</view>
<!-- 雨天遛狗 -->
<view v-if="detail.walkDogRainyDay">
<view class="size-30 mt32 fw400">
狗狗雨具位置
</view>
<view class="img mt20">
<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.dogRainGearLocation)" :key="index"></u-image>
</view>
<view class="size-30 mt24" :style="{color:'#999999'}">
下雨天遛狗要求
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" v-model="detail.walkDogRainRemark" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
<!-- 遛狗时长 -->
<view v-if="detail.isWalkDogDuration">
<view class="size-30 mt24" :style="{color:'#999999'}">
遛狗时长
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" v-model="detail.walkDogDuration" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
<!-- 狗狗行为 -->
<view v-if="detail.isDogBehavior">
<view class="size-30 mt24" :style="{color:'#999999'}">
狗狗行为
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" v-model="detail.dogBehavior" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
<!-- 偏好区域 -->
<view v-if="detail.isFavoriteRegion">
<view class="size-30 mt24" :style="{color:'#999999'}">
偏好区域
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" v-model="detail.favoriteRegion" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
<!-- 偏好路线 -->
<view v-if="detail.isFavoriteRoute">
<view class="size-30 mt24" :style="{color:'#999999'}">
偏好路线
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" v-model="detail.favoriteRoute" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
</view>
<!-- 附加服务备注 -->
<view class="mt32 ml10">
<view class="size-30 mt24" :style="{color:'#999999'}">
附加服务备注
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" v-model="detail.additionalServicesRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
</view>
</view>
<!-- 底部按钮 -->
<view class="buttom_ mt60 box-size level" v-if="currentStep > 0">
<view class="buttom_item level size-30" :style="{borderRadius:'41rpx',color:'#fff'}" @click="prevStep">
上一页
</view>
<view class="buttom_item level size-30" :style="{borderRadius:'41rpx',color:'#fff'}" @click="nextStep">
{{ currentStep === 2 ? '完成' : '下一页' }}
</view>
</view>
<view class="buttom mt60 box-size" v-else>
<view class="buttom-item level size-30" :style="{borderRadius:'41rpx',color:'#fff'}" @click="nextStep">
下一页
</view>
</view>
</view>
</template>
<script>
import {
getpetList
} from "@/api/pet/index.js"
import {
getDictList
} from "@/api/system/user.js"
import {
getPetCareByPetId
} from "@/api/order/order.js";
export default {
data() {
return {
detail: {},
show: false,
petTypes: [],
petType: '',
orderId: 0,
currentStep: 0, // 当前步骤，0:喂养要求，1:清洁要求，2:附加服务
}
},
onLoad(options) {
this.orderId = options.petId
this.getPetCareByPetId()
// 如果有指定步骤，则切换到对应步骤
if (options.step) {
this.currentStep = parseInt(options.step)
}
},
methods: {
getPetCareByPetId() {
getPetCareByPetId(this.orderId).then(res => {
this.detail = res.data || {}
})
},
handleImageUrl(url) {
if (!url) return []
return url.split(',')
},
previewImage(url) {
uni.previewImage({
urls: [url]
})
},
// 切换到上一步
prevStep() {
if (this.currentStep > 0) {
this.currentStep--;
}
},
// 切换到下一步
nextStep() {
if (this.currentStep < 2) {
this.currentStep++;
} else {
// 如果是最后一步，可以提交表单或返回上一页
uni.navigateBack();
}
},
}
}
</script>
<style scoped lang="scss">
@import"detail.scss";
@import"steps-custom.scss";
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 173rpx;
height: 230rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
}
.empty-text {
margin-top: 10rpx;
font-size: 24rpx;
color: #999999;
}
.empty-state-full {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 200rpx;
background-color: #f9f9f9;
border-radius: 8rpx;
margin-top: 20rpx;
}
.empty-text-full {
margin-top: 20rpx;
font-size: 28rpx;
color: #999999;
}
/* 自定义步骤条样式 */
:deep(.up-steps-custom) {
.u-steps-item__wrapper {
width: 40rpx !important;
height: 40rpx !important;
&__circle {
width: 40rpx !important;
height: 40rpx !important;
background: #E5E5E5;
&__text {
font-size: 24rpx;
}
}
}
.u-steps-item__line {
top: 20rpx !important;
height: 4rpx !important;
background: #E5E5E5 !important;
}
/* 激活状态样式 */
.u-steps-item--active {
.u-steps-item__wrapper__circle {
background: linear-gradient(90deg, #FFA042, #FFD591) !important;
}
}
/* 已完成步骤前的线条样式 */
.u-steps-item--process {
.u-steps-item__line {
background: linear-gradient(90deg, #FFA042, #FFD591) !important;
}
}
}
</style>

+ 5
- 5
otherPages/myOrdersManage/service/detail.vue View File

@ -24,11 +24,11 @@
<view class="form-title">
本次喂养过程中，您需要喂养的食品包括
</view>
<view v-if="!detail.includeDryFood && !detail.includeWetFood && !detail.includeHomemadeFood && !detail.includeRawMeat && !detail.includeHealthSupplements && !detail.includeSnacks" class="empty-state-full">
<view class="empty-state-full">
<up-icon name="info-circle" size="60rpx" color="#999999"></up-icon>
<text class="empty-text-full">暂无喂养食品</text>
</view>
<view class=" mt32 ml10" v-if="detail.includeDryFood">
<view class=" mt32 ml10">
<view class="color-A55 size-30 fw400">
干粮(主粮、冻干等)
</view>
@ -70,11 +70,11 @@
备注信息
</view>
<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
<input type="text" disabled v-model="detail.dryFoodRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
<input type="text" disabled :value="detail.dryFoodRemarks || '无'" :style="{height:'50rpx',fontSize:'30rpx'}">
</view>
</view>
<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeDryFood"></view>
<view class=" mt32 ml10" v-if="detail.includeWetFood">
<view class="line" :style="{borderRadius:'1rpx'}"></view>
<view class=" mt32 ml10">
<view class="color-A55 size-30 fw400">
湿粮(罐头等)
</view>


+ 1
- 1
otherPages/myOrdersManage/withdrawal/index.vue View File

@ -8,7 +8,7 @@
<view class="level">
<view class="money level">
<text>¥</text>
<input v-model="form.amount" type="text" />
<input v-model="form.amount" type="digit" />
</view>
<!-- <DForm :list="state. " @submit="handleSubmit" /> -->
</view>


+ 2
- 1
otherPages/workbenchManage/myUser/index.vue View File

@ -75,7 +75,8 @@ import {
import {
binBaseInfo,
bindCode
bindCode,
computed,
} from "@/api/home.js"


+ 13
- 3
pages/myOrdersManage/components/timelineService.vue View File

@ -7,14 +7,24 @@
<view class="date-month-day">{{ formatDate(date).month }}-{{ formatDate(date).day }}</view>
</view>
<view class="status-tag" :class="{'status-tag-pending': status}">
<image src="/static/images/ydd/icon1.png" mode="aspectFit" class="status-icon"></image>
<image src="/static/images/ydd/icon1.png"
mode="aspectFit"
v-if="status"
class="status-icon"></image>
<image src="/static/images/order/success.png"
mode="aspectFit"
v-else
class="status-icon"></image>
{{ status ? '待上门' : '已完成' }}{{ orderCount }}单
</view>
</view>
<!-- 空状态显示 -->
<view v-if="!processedList || processedList.length === 0" class="empty-state">
<text class="empty-text">暂无订单数据</text>
<text class="empty-text">暂无订单数据</text>
</view>
<!-- 时间线主体 -->
@ -86,7 +96,7 @@
<!-- 操作按钮 -->
<view class="action-buttons">
<view class="btn btn-clock" :class="{bgSuccess : item.status}" @click="handleClock(item)">打卡</view>
<view class="btn btn-clock" :class="{bgSuccess : item.status}" @click="handleClock(item)">{{ item.status ? '打卡记录' : '打卡' }}</view>
<view class="btn btn-clock" :class="{bgSuccess : item.status}" @click="handlePetFile(item)">宠物档案</view>
<view class="btn btn-clock" :class="{bgSuccess : item.status}" @click="handleServiceFile(item)">服务档案</view>
</view>


+ 2
- 4
pages/orderTakingManage/components/list.vue View File

@ -48,12 +48,10 @@
<up-button @click="toOrderDetail(item.id)" type="primary" text="查看详情后接单" shape="circle"
color="#FFAA48"></up-button>
</view>
<view class="flex flex-between" v-if="item.status == 2">
<!-- <up-button @click="unableToAcceptOrder(item.id)" text="无法接单" shape="circle" plain
class="mr20"></up-button> -->
<!-- <view class="flex flex-between" v-if="item.status == 2">
<up-button @click="toOrderDetail(item.id)" type="primary" text="查看派单详情" shape="circle"
color="#FFAA48"></up-button>
</view>
</view> -->
</view>
</view>
</up-list-item>


Write Preview
Loading…
Cancel
Save