Browse Source
feat: 新增服务记录功能及相关页面
refactor: 优化订单详情和宠物信息展示逻辑 fix: 修复订单状态判断和按钮显示条件 docs: 添加数据库事务查询SQL文件 style: 统一时间线组件样式和布局 test: 更新测试用例以适应新功能master
11 changed files with 1839 additions and 105 deletions
Unified View
Diff Options
-
+21 -1api/order/order.js
-
+143 -0database_transaction_queries.sql
-
+9 -0pages.json
-
+6 -2pages/companionPetList/companionPetInfo.vue
-
+551 -0pages/personalCenter/a.txt
-
+285 -88pages/personalCenter/orderDetailImage.vue
-
+579 -0pages_order/components/order/timelineService.vue
-
+12 -10pages_order/order/orderDetail.vue
-
+11 -4pages_order/order/orderList.vue
-
+215 -0pages_order/order/serviceRecord.vue
-
+7 -0uni_modules/uni-calendar/components/uni-calendar/uni-calendar-item.vue
+ 21
- 1
api/order/order.js
View File
+ 143
- 0
database_transaction_queries.sql
View File
| @ -0,0 +1,143 @@ | |||||
| -- MySQL 数据库事务状态检查和处理 SQL 语句 | |||||
| -- 1. 查看当前所有连接和进程 | |||||
| SHOW PROCESSLIST; | |||||
| -- 2. 查看当前正在运行的事务 | |||||
| SELECT | |||||
| trx_id, | |||||
| trx_state, | |||||
| trx_started, | |||||
| trx_requested_lock_id, | |||||
| trx_wait_started, | |||||
| trx_weight, | |||||
| trx_mysql_thread_id, | |||||
| trx_query | |||||
| FROM INFORMATION_SCHEMA.INNODB_TRX; | |||||
| -- 3. 查看锁等待情况 | |||||
| SELECT | |||||
| waiting_trx_id, | |||||
| waiting_thread, | |||||
| waiting_query, | |||||
| blocking_trx_id, | |||||
| blocking_thread, | |||||
| blocking_query | |||||
| FROM INFORMATION_SCHEMA.INNODB_LOCK_WAITS; | |||||
| -- 4. 查看当前锁定状态 | |||||
| SELECT | |||||
| lock_id, | |||||
| lock_trx_id, | |||||
| lock_mode, | |||||
| lock_type, | |||||
| lock_table, | |||||
| lock_index, | |||||
| lock_space, | |||||
| lock_page, | |||||
| lock_rec, | |||||
| lock_data | |||||
| FROM INFORMATION_SCHEMA.INNODB_LOCKS; | |||||
| -- 5. 查看详细的锁等待信息（MySQL 8.0+） | |||||
| SELECT | |||||
| OBJECT_SCHEMA, | |||||
| OBJECT_NAME, | |||||
| LOCK_TYPE, | |||||
| LOCK_MODE, | |||||
| LOCK_STATUS, | |||||
| LOCK_DATA, | |||||
| ENGINE_TRANSACTION_ID, | |||||
| THREAD_ID, | |||||
| EVENT_ID | |||||
| FROM performance_schema.data_locks; | |||||
| -- 6. 查看锁等待关系（MySQL 8.0+） | |||||
| SELECT | |||||
| requesting_engine_transaction_id, | |||||
| requesting_thread_id, | |||||
| requesting_event_id, | |||||
| blocking_engine_transaction_id, | |||||
| blocking_thread_id, | |||||
| blocking_event_id | |||||
| FROM performance_schema.data_lock_waits; | |||||
| -- 7. 查看长时间运行的事务（超过30秒） | |||||
| SELECT | |||||
| trx_id, | |||||
| trx_state, | |||||
| trx_started, | |||||
| TIMESTAMPDIFF(SECOND, trx_started, NOW()) as duration_seconds, | |||||
| trx_mysql_thread_id, | |||||
| trx_query | |||||
| FROM INFORMATION_SCHEMA.INNODB_TRX | |||||
| WHERE TIMESTAMPDIFF(SECOND, trx_started, NOW()) > 30; | |||||
| -- 8. 查看阻塞其他事务的连接 | |||||
| SELECT | |||||
| p1.ID as blocking_thread_id, | |||||
| p1.USER as blocking_user, | |||||
| p1.HOST as blocking_host, | |||||
| p1.DB as blocking_db, | |||||
| p1.COMMAND as blocking_command, | |||||
| p1.TIME as blocking_time, | |||||
| p1.STATE as blocking_state, | |||||
| p1.INFO as blocking_query, | |||||
| p2.ID as blocked_thread_id, | |||||
| p2.USER as blocked_user, | |||||
| p2.HOST as blocked_host, | |||||
| p2.DB as blocked_db, | |||||
| p2.COMMAND as blocked_command, | |||||
| p2.TIME as blocked_time, | |||||
| p2.STATE as blocked_state, | |||||
| p2.INFO as blocked_query | |||||
| FROM INFORMATION_SCHEMA.PROCESSLIST p1 | |||||
| JOIN INFORMATION_SCHEMA.INNODB_LOCK_WAITS w ON p1.ID = w.blocking_thread | |||||
| JOIN INFORMATION_SCHEMA.PROCESSLIST p2 ON p2.ID = w.waiting_thread; | |||||
| -- ===== 处理锁定事务的操作 ===== | |||||
| -- 9. 杀死指定的连接（替换 CONNECTION_ID 为实际的连接ID） | |||||
| -- KILL CONNECTION_ID; | |||||
| -- 示例：杀死连接ID为123的连接 | |||||
| -- KILL 123; | |||||
| -- 10. 强制杀死指定连接（即使在事务中） | |||||
| -- KILL CONNECTION CONNECTION_ID; | |||||
| -- 11. 回滚指定事务（需要在对应连接中执行） | |||||
| -- ROLLBACK; | |||||
| -- 12. 设置锁等待超时（秒） | |||||
| SET innodb_lock_wait_timeout = 50; | |||||
| -- 13. 查看当前锁等待超时设置 | |||||
| SHOW VARIABLES LIKE 'innodb_lock_wait_timeout'; | |||||
| -- ===== 预防措施 ===== | |||||
| -- 14. 查看死锁信息 | |||||
| SHOW ENGINE INNODB STATUS; | |||||
| -- 15. 开启死锁检测 | |||||
| SET GLOBAL innodb_deadlock_detect = ON; | |||||
| -- 16. 查看事务隔离级别 | |||||
| SELECT @@tx_isolation; | |||||
| -- 17. 设置事务隔离级别（如果需要） | |||||
| -- SET SESSION TRANSACTION ISOLATION LEVEL READ COMMITTED; | |||||
| -- ===== 使用步骤说明 ===== | |||||
| /* | |||||
| 1. 首先运行查询1-4来了解当前事务状态 | |||||
| 2. 找出长时间运行或阻塞的事务ID和连接ID | |||||
| 3. 使用KILL命令终止问题连接 | |||||
| 4. 确认锁定已解除 | |||||
| 注意： | |||||
| - 在生产环境中谨慎使用KILL命令 | |||||
| - 优先尝试让应用程序正常提交或回滚事务 | |||||
| - 如果必须强制终止，确保了解可能的数据影响 | |||||
| */ | |||||
+ 9
- 0
pages.json
View File
+ 6
- 2
pages/companionPetList/companionPetInfo.vue
View File
+ 551
- 0
pages/personalCenter/a.txt
View File
| @ -0,0 +1,551 @@ | |||||
| <template> | |||||
| <!-- <view>打卡</view> --> | |||||
| <view class="box box-size"> | |||||
| <view class="top box-size" :style="{borderRadius:'16rpx'}"> | |||||
| <view class="form-title"> | |||||
| 个人准备 | |||||
| </view> | |||||
| <view class="mt32 ml10"> | |||||
| <span :style="{fontSize:'30rpx',fontWeight:'400'}">手套照片</span> | |||||
| <span :style="{fontSize:'26rpx',color:'#C7C7C7'}">(至少1张)</span> | |||||
| </view> | |||||
| <view class="level"> | |||||
| <view class="mt20 ml10"> | |||||
| <up-upload :fileList="fileList.glove" @afterRead="afterRead" @delete="deletePic" name="glove" | |||||
| multiple :maxCount="2" width="131rpx" height="131rpx" :disabled="isRead"> | |||||
| <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}"> | |||||
| </image> | |||||
| </up-upload> | |||||
| </view> | |||||
| </view> | |||||
| <view class="mt32 ml10"> | |||||
| <span :style="{fontSize:'30rpx',fontWeight:'400'}">鞋套照片</span> | |||||
| <span :style="{fontSize:'26rpx',color:'#C7C7C7'}">(至少1张)</span> | |||||
| </view> | |||||
| <view class="level"> | |||||
| <view class="mt20 ml10"> | |||||
| <up-upload :fileList="fileList.ShoeCover" @afterRead="afterRead" @delete="deletePic" | |||||
| name="ShoeCover" multiple :maxCount="2" width="131rpx" height="131rpx" :disabled="isRead"> | |||||
| <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}"> | |||||
| </image> | |||||
| </up-upload> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="top mt24 box-size" :style="{borderRadius:'16rpx'}"> | |||||
| <view class="form-title"> | |||||
| 宠物状态记录 | |||||
| </view> | |||||
| <view v-for="(pet, index) in petList" :key="index"> | |||||
| <view class="mt32 ml10"> | |||||
| <span :style="{fontSize:'30rpx',fontWeight:'400'}">{{ pet.title }}照片</span> | |||||
| <span :style="{fontSize:'26rpx',color:'#C7C7C7'}">(至少2张)</span> | |||||
| </view> | |||||
| <view class="level"> | |||||
| <view class="mt20 ml10 mr20"> | |||||
| <up-upload :fileList="fileList['pet' + index]" @afterRead="afterRead" @delete="deletePic" | |||||
| :name="'pet' + index" multiple :maxCount="2" width="131rpx" height="131rpx" :disabled="isRead"> | |||||
| <image src="/static/images/ydd/add_photo.png" mode="" | |||||
| :style="{width:'131rpx',height:'131rpx'}"> | |||||
| </image> | |||||
| </up-upload> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="top mt24 box-size" :style="{borderRadius:'16rpx'}"> | |||||
| <view class="form-title"> | |||||
| 基础服务记录 | |||||
| </view> | |||||
| <view class="mt32 ml10" :style="{fontSize:'30rpx',fontWeight:'400'}">粮碗前后对比 </view> | |||||
| <view class="level"> | |||||
| <view class="mt20 ml10"> | |||||
| <up-upload :fileList="fileList.foodA" @afterRead="afterRead" @delete="deletePic" name="foodA" | |||||
| multiple :maxCount="1" width="131rpx" height="131rpx" :disabled="isRead"> | |||||
| <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}"> | |||||
| </image> | |||||
| </up-upload> | |||||
| <view class="jus-center level" :style="{color:'#999999',fontSize:'22rpx',width:'131rpx'}">前</view> | |||||
| </view> | |||||
| <view class="mt20 ml10 ml28"> | |||||
| <up-upload :fileList="fileList.foodB" @afterRead="afterRead" @delete="deletePic" name="foodB" | |||||
| multiple :maxCount="1" width="131rpx" height="131rpx" :disabled="isRead"> | |||||
| <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}"> | |||||
| </image> | |||||
| </up-upload> | |||||
| <view class="jus-center level" :style="{color:'#999999',fontSize:'22rpx',width:'131rpx'}">后</view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="mt32 ml10" :style="{fontSize:'30rpx',fontWeight:'400'}">水碗前后对比 </view> | |||||
| <view class="level"> | |||||
| <view class="mt20 ml10"> | |||||
| <up-upload :fileList="fileList.waterA" @afterRead="afterRead" @delete="deletePic" name="waterA" | |||||
| multiple :maxCount="1" width="131rpx" height="131rpx" :disabled="isRead"> | |||||
| <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}"> | |||||
| </image> | |||||
| </up-upload> | |||||
| <view class="jus-center level" :style="{color:'#999999',fontSize:'22rpx',width:'131rpx'}">前</view> | |||||
| </view> | |||||
| <view class="mt20 ml10 ml28"> | |||||
| <up-upload :fileList="fileList.waterB" @afterRead="afterRead" @delete="deletePic" name="waterB" | |||||
| multiple :maxCount="1" width="131rpx" height="131rpx" :disabled="isRead"> | |||||
| <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}"> | |||||
| </image> | |||||
| </up-upload> | |||||
| <view class="jus-center level" :style="{color:'#999999',fontSize:'22rpx',width:'131rpx'}">后</view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="mt32 ml10" :style="{fontSize:'30rpx',fontWeight:'400'}">猫砂盆、尿垫前后对比 </view> | |||||
| <view class="level"> | |||||
| <view class="mt20 ml10"> | |||||
| <up-upload :fileList="fileList.urinalA" @afterRead="afterRead" @delete="deletePic" name="urinalA" | |||||
| multiple :maxCount="1" width="131rpx" height="131rpx" :disabled="isRead"> | |||||
| <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}"> | |||||
| </image> | |||||
| </up-upload> | |||||
| <view class="jus-center level" :style="{color:'#999999',fontSize:'22rpx',width:'131rpx'}">前</view> | |||||
| </view> | |||||
| <view class="mt20 ml10 ml28"> | |||||
| <up-upload :fileList="fileList.urinalB" @afterRead="afterRead" @delete="deletePic" name="urinalB" | |||||
| multiple :maxCount="1" width="131rpx" height="131rpx" :disabled="isRead"> | |||||
| <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}"> | |||||
| </image> | |||||
| </up-upload> | |||||
| <view class="jus-center level" :style="{color:'#999999',fontSize:'22rpx',width:'131rpx'}">后</view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="top mt24 box-size" :style="{borderRadius:'16rpx'}"> | |||||
| <view class="form-title"> | |||||
| 定制服务记录 | |||||
| </view> | |||||
| <view v-for="(product, pindex) in projectList" | |||||
| :key="pindex"> | |||||
| <view class="mt32 ml10"> | |||||
| <span :style="{fontSize:'30rpx',fontWeight:'400'}">{{ product.title }}</span> | |||||
| <span :style="{fontSize:'26rpx',color:'#C7C7C7'}">(2-3张)</span> | |||||
| </view> | |||||
| <view class="level"> | |||||
| <view class="mt20 ml10 mr20"> | |||||
| <up-upload :fileList="fileList['project' + pindex]" @afterRead="afterRead" @delete="deletePic" | |||||
| :name="'project' + pindex" | |||||
| multiple :maxCount="3" width="131rpx" height="131rpx" :disabled="isRead"> | |||||
| <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}"> | |||||
| </image> | |||||
| </up-upload> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- <view class="mt32 ml10"> | |||||
| <span :style="{fontSize:'30rpx',fontWeight:'400'}">遛狗</span> | |||||
| <span :style="{fontSize:'26rpx',color:'#C7C7C7'}">(2-3张)</span> | |||||
| </view> | |||||
| <view class="level"> | |||||
| <view class="mt20 ml10 mr20"> | |||||
| <up-upload :fileList="fileList.testa" @afterRead="afterRead" @delete="deletePic" name="testa" | |||||
| multiple :maxCount="3" width="131rpx" height="131rpx" :disabled="isRead"> | |||||
| <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}"> | |||||
| </image> | |||||
| </up-upload> | |||||
| </view> | |||||
| </view> --> | |||||
| <!-- <view class="mt32 ml10"> | |||||
| <span :style="{fontSize:'30rpx',fontWeight:'400'}">陪玩</span> | |||||
| <span :style="{fontSize:'26rpx',color:'#C7C7C7'}">(2-3张)</span> | |||||
| </view> | |||||
| <view class="level"> | |||||
| <view class="mt20 ml10 mr20"> | |||||
| <up-upload :fileList="fileList.testb" @afterRead="afterRead" @delete="deletePic" name="testb" | |||||
| multiple :maxCount="3" width="131rpx" height="131rpx" :disabled="isRead"> | |||||
| <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}"> | |||||
| </image> | |||||
| </up-upload> | |||||
| </view> | |||||
| </view> --> | |||||
| </view> | |||||
| <view class="top mt24 box-size" :style="{borderRadius:'16rpx'}"> | |||||
| <view class="form-title"> | |||||
| 其他补充信息(必填) | |||||
| </view> | |||||
| <view class="mt32 ml10" :style="{color:'#999999',fontSize:'30rpx'}"> | |||||
| 可记录一下今日趣事、宠物状况、提醒事项等，最少30个字 | |||||
| </view> | |||||
| <view class="mt24"> | |||||
| <textarea cols="30" rows="10" | |||||
| placeholder="请输入内容" | |||||
| v-model="form.notes" | |||||
| :style="{color:'#999999',fontSize:'30rpx',backgroundColor:'#F5F5F5',borderRadius:'16rpx',width:'681rpx',height:'180rpx'}" | |||||
| class="pd20 box-size" :disabled="isRead"></textarea> | |||||
| </view> | |||||
| </view> | |||||
| <view class="buttom mt60 box-size" | |||||
| v-if="!isRead" | |||||
| style="display: flex;gap: 20rpx;" | |||||
| > | |||||
| <view class="buttom-item buttom-item-2 level size-30" | |||||
| @click="saveDraft(false)" | |||||
| :style="{borderRadius:'41rpx',color:'#ff842c'}"> | |||||
| 保存草稿 | |||||
| </view> | |||||
| <view class="buttom-item level size-30" | |||||
| @click="submit" | |||||
| :style="{borderRadius:'41rpx',color:'#fff'}"> | |||||
| 确定提交 | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script setup> | |||||
| import { | |||||
| onMounted, | |||||
| reactive, | |||||
| ref, | |||||
| } from "vue"; | |||||
| import { | |||||
| onLoad | |||||
| } from '@dcloudio/uni-app' | |||||
| import { | |||||
| ossUpload | |||||
| } from '@/utils/oss-upload/oss/index.js' | |||||
| import { | |||||
| appletOrderDateFrequencyById, | |||||
| appletOrderDateFrequencyCheck, | |||||
| } from "@/api/order/frequency.js" | |||||
| onLoad((options) => { | |||||
| checkId.value = options.id || null; | |||||
| GetByOrderId() | |||||
| }); | |||||
| const checkId = ref(0) | |||||
| const orderId = ref(0) | |||||
| const itemOrderID = ref(0) | |||||
| const serviceId = ref(0) | |||||
| const isRead = ref(false) | |||||
| const content = ref('') | |||||
| const fileList = reactive({ | |||||
| // glove: [],//手套 | |||||
| // ShoeCover: [],//鞋套 | |||||
| // food: [],//粮碗 | |||||
| // water: [],//水碗 | |||||
| // urinal: [],//猫砂盆、尿盆 | |||||
| }) | |||||
| const form = ref({}) | |||||
| const petList = ref([ | |||||
| // { | |||||
| // title: '小汪' | |||||
| // }, | |||||
| // { | |||||
| // title: '大黄' | |||||
| // }, | |||||
| ]) | |||||
| //附加项目 | |||||
| const projectList = ref([ | |||||
| // { | |||||
| // title: '小汪' | |||||
| // }, | |||||
| // { | |||||
| // title: '大黄' | |||||
| // }, | |||||
| ]) | |||||
| // 删除图片 | |||||
| const deletePic = (event) => { | |||||
| if (fileList[event.name]) { | |||||
| fileList[event.name].splice(event.index, 1); | |||||
| } | |||||
| }; | |||||
| // 新增图片 | |||||
| const afterRead = (event) => { | |||||
| if (!fileList[event.name]) { | |||||
| fileList[event.name] = [] | |||||
| } | |||||
| event.file.forEach(n => { | |||||
| ossUpload(n.url) | |||||
| .then(url => { | |||||
| console.log(url); | |||||
| fileList[event.name].push({ | |||||
| url | |||||
| }) | |||||
| }) | |||||
| }) | |||||
| }; | |||||
| function submit() { | |||||
| // 参数效验 | |||||
| if (!fileList.glove || fileList.glove.length == 0) { | |||||
| return msg('请上传鞋套照片') | |||||
| } | |||||
| if (!fileList.ShoeCover || fileList.ShoeCover.length == 0) { | |||||
| return msg('请上传鞋套照片') | |||||
| } | |||||
| for (let i = 0; i < petList.value.length; i++) { | |||||
| if (!fileList['pet' + i] || fileList['pet' + i].length < 2) { | |||||
| return msg(`请上传${petList.value[i].title}照片`) | |||||
| } | |||||
| } | |||||
| if (!fileList.foodA || fileList.foodA.length < 1 || | |||||
| !fileList.foodB || fileList.foodB.length < 1) { | |||||
| return msg('请上传粮碗前后照片') | |||||
| } | |||||
| if (!fileList.waterA || fileList.waterA.length < 1 || | |||||
| !fileList.waterB || fileList.waterB.length < 1) { | |||||
| return msg('请上传水碗前后照片') | |||||
| } | |||||
| if (!fileList.urinalA || fileList.urinalA.length < 1 || | |||||
| !fileList.urinalB || fileList.urinalB.length < 1) { | |||||
| return msg('请上传猫砂盆、尿盆照片') | |||||
| } | |||||
| for (let i = 0; i < projectList.value.length; i++) { | |||||
| if (!fileList['project' + i] || fileList['project' + i].length < 2) { | |||||
| return msg(`请上传${projectList.value[i].title}照片`) | |||||
| } | |||||
| } | |||||
| if(!form.value.notes){ | |||||
| return msg('请填写补充信息') | |||||
| } | |||||
| if(form.value.notes.length < 30){ | |||||
| return msg('补充信息不少于30字') | |||||
| } | |||||
| saveDraft(true) | |||||
| } | |||||
| function GetByOrderId(){ | |||||
| appletOrderDateFrequencyById(checkId.value) | |||||
| .then(res => { | |||||
| const data = res.data.check; | |||||
| const frequency = res.data.frequency; | |||||
| isRead.value = frequency.status == 2 | |||||
| if(res.code == 200 && data) { | |||||
| form.value = data | |||||
| // 回显手套照片 | |||||
| if(data.glovePhoto) { | |||||
| fileList.glove = data.glovePhoto.split(',').map(url => ({ url })); | |||||
| } | |||||
| // 回显鞋套照片 | |||||
| if(data.shoeCoverPhoto) { | |||||
| fileList.ShoeCover = data.shoeCoverPhoto.split(',').map(url => ({ url })); | |||||
| } | |||||
| // 回显宠物照片 | |||||
| if(data.petPhoto) { | |||||
| const pets = JSON.parse(data.petPhoto); | |||||
| petList.value = pets; | |||||
| pets.forEach((pet, index) => { | |||||
| if(pet.fileList) { | |||||
| fileList['pet' + index] = pet.fileList.split(',').map(url => ({ url })); | |||||
| } | |||||
| }); | |||||
| } | |||||
| // 回显项目照片 | |||||
| if(data.workDogImage) { | |||||
| const pList = JSON.parse(data.workDogImage); | |||||
| projectList.value = pList; | |||||
| pList.forEach((pet, index) => { | |||||
| if(pet.fileList) { | |||||
| fileList['project' + index] = pet.fileList.split(',').map(url => ({ url })); | |||||
| } | |||||
| }); | |||||
| } | |||||
| // 回显粮碗照片 | |||||
| if(data.grainBowlFront) fileList.foodA = data.grainBowlFront.split(',').map(url => ({ url })); | |||||
| if(data.grainBowlAfter) fileList.foodB = data.grainBowlAfter.split(',').map(url => ({ url })); | |||||
| // 回显水碗照片 | |||||
| if(data.waterBowlFront) fileList.waterA = data.waterBowlFront.split(',').map(url => ({ url })); | |||||
| if(data.waterBowlAfter) fileList.waterB = data.waterBowlAfter.split(',').map(url => ({ url })); | |||||
| // 回显猫砂盆/尿垫照片 | |||||
| if(data.basinFront) fileList.urinalA = data.basinFront.split(',').map(url => ({ url })); | |||||
| if(data.basinAfter) fileList.urinalB = data.basinAfter.split(',').map(url => ({ url })); | |||||
| // 回显定制服务照片 | |||||
| // if(data.workDogImage) fileList.testa = data.workDogImage.split(',').map(url => ({ url })); | |||||
| // if(data.workPalyImage) fileList.testb = data.workPalyImage.split(',').map(url => ({ url })); | |||||
| }else{ | |||||
| // getOrderPetByIdFN() | |||||
| let projectNameList = [] | |||||
| frequency.pets.forEach((n, i) => { | |||||
| fileList['pet' + i] = [] | |||||
| n.orderItemList.forEach((item, inde) => { | |||||
| fileList['project' + inde] = [] | |||||
| }) | |||||
| }) | |||||
| frequency.pets.forEach((n, i) => { | |||||
| petList.value.push({ | |||||
| title : n.name, | |||||
| id : n.id, | |||||
| }) | |||||
| n.orderItemList.forEach((item, inde) => { | |||||
| if(!projectNameList.includes(item.productName)){ | |||||
| projectNameList.push(item.productName) | |||||
| projectList.value.push({ | |||||
| title : item.productName, | |||||
| ids : [item.id] | |||||
| }) | |||||
| }else{ | |||||
| projectList.value[projectNameList.indexOf(item.productName)].ids.push(item.id) | |||||
| } | |||||
| }) | |||||
| }) | |||||
| } | |||||
| }) | |||||
| } | |||||
| function getOrderPetByIdFN(){ | |||||
| getOrderPetById(orderId.value) | |||||
| .then(res => { | |||||
| if(res.code == 200){ | |||||
| res.data.forEach((n, i) => { | |||||
| fileList['pet' + i] = [] | |||||
| }) | |||||
| res.data.forEach((n, i) => { | |||||
| petList.value.push({ | |||||
| title : n.name, | |||||
| id : n.id, | |||||
| }) | |||||
| }) | |||||
| } | |||||
| }) | |||||
| } | |||||
| function saveDraft(flag) { | |||||
| // 将所有图片数组转换为逗号分隔的字符串 | |||||
| const params = { | |||||
| // orderId: orderId.value, | |||||
| // itemOrderId : itemOrderID.value, | |||||
| itemDateId : checkId.value, | |||||
| glovePhoto: fileList.glove?.map(item => item.url).join(',') || '', | |||||
| shoeCoverPhoto: fileList.ShoeCover?.map(item => item.url).join(',') || '', | |||||
| // 合并所有宠物照片 | |||||
| petPhoto: JSON.stringify( | |||||
| petList.value.map((pet, index) => { | |||||
| return { | |||||
| id : pet.id, | |||||
| title : pet.title, | |||||
| fileList: fileList['pet' + index]?.map(item => item.url).join(',') || '' | |||||
| }; | |||||
| }) | |||||
| ), | |||||
| workDogImage: JSON.stringify( | |||||
| projectList.value.map((pet, index) => { | |||||
| return { | |||||
| id : pet.id, | |||||
| title : pet.title, | |||||
| fileList: fileList['project' + index]?.map(item => item.url).join(',') || '' | |||||
| }; | |||||
| }) | |||||
| ), | |||||
| // 粮碗照片 | |||||
| grainBowlFront: fileList.foodA?.map(item => item.url).join(',') || '', | |||||
| grainBowlAfter: fileList.foodB?.map(item => item.url).join(',') || '', | |||||
| // 水碗照片 | |||||
| waterBowlFront: fileList.waterA?.map(item => item.url).join(',') || '', | |||||
| waterBowlAfter: fileList.waterB?.map(item => item.url).join(',') || '', | |||||
| // 猫砂盆/尿垫照片 | |||||
| basinFront: fileList.urinalA?.map(item => item.url).join(',') || '', | |||||
| basinAfter: fileList.urinalB?.map(item => item.url).join(',') || '', | |||||
| // 定制服务照片 | |||||
| // workDogImage: fileList.testa?.map(item => item.url).join(',') || '', | |||||
| // workPalyImage: fileList.testb?.map(item => item.url).join(',') || '', | |||||
| // 备注信息 | |||||
| notes: form.value.notes || '', | |||||
| submitFlag : 1,//草稿 | |||||
| } | |||||
| if(form.value.id) { | |||||
| params.id = form.value.id | |||||
| } | |||||
| if(flag) { | |||||
| params.submitFlag = 2 | |||||
| } | |||||
| appletOrderDateFrequencyCheck(params) | |||||
| .then(res => { | |||||
| if(res.code === 200) { | |||||
| uni.showToast({ | |||||
| title: '提交成功', | |||||
| icon: 'success' | |||||
| }) | |||||
| // 如果是确认提交（非草稿），则返回上一页 | |||||
| setTimeout(() => { | |||||
| uni.navigateBack() | |||||
| }, 1500) | |||||
| } else { | |||||
| uni.showToast({ | |||||
| title: res.msg || '提交失败', | |||||
| icon: 'none' | |||||
| }) | |||||
| } | |||||
| }) | |||||
| .catch(err => { | |||||
| uni.showToast({ | |||||
| title: '提交失败', | |||||
| icon: 'none' | |||||
| }) | |||||
| }) | |||||
| } | |||||
| function msg(content) { | |||||
| uni.showToast({ | |||||
| title: content, | |||||
| icon: 'none' | |||||
| }) | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| @import"index.scss" | |||||
| </style> | |||||
+ 285
- 88
pages/personalCenter/orderDetailImage.vue
View File
+ 579
- 0
pages_order/components/order/timelineService.vue
View File
| @ -0,0 +1,579 @@ | |||||
| <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}"> | |||||
| <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 ? '待上门' : '已完成' }} | |||||
| </view> --> | |||||
| </view> | |||||
| <!-- 空状态显示 --> | |||||
| <view v-if="!list || list.length === 0" class="empty-state"> | |||||
| <text class="empty-text">暂无订单数据</text> | |||||
| </view> | |||||
| <!-- 时间线主体 --> | |||||
| <view v-else class="timeline-body" v-for="(item, index) in list" :key="index"> | |||||
| <view class="timeline-line"></view> | |||||
| <!-- <view class="time-point"> | |||||
| <view class="time-icon"> | |||||
| <image src="/static/images/order/address.png" mode="aspectFit" class="time-image"></image> | |||||
| </view> | |||||
| <view class="time-text">{{ item.receiverCity }}</view> | |||||
| <view class="collapse-icon" @click="toggleServiceCard(index)"> | |||||
| {{ serviceCardCollapsed[index] ? '展开' : '收起' }} <text class="arrow" :class="{'arrow-up': !serviceCardCollapsed[index]}">▼</text> | |||||
| </view> | |||||
| </view> --> | |||||
| <!-- 服务内容卡片 --> | |||||
| <view v-if="!serviceCardCollapsed[index]" class="service-card"> | |||||
| <!-- 服务日期 --> | |||||
| <view class="service-section"> | |||||
| <view class="section-title"> | |||||
| <view class="title-indicator"></view> | |||||
| <text>服务日期</text> | |||||
| <text style="margin-left: auto;font-weight: 500;font-size: 24rpx;">订单编号：{{ item.orderId }}</text> | |||||
| </view> | |||||
| <view class="section-content date-content" :class="{bgSuccessQ : item.status == '2'}"> | |||||
| {{ dayjs(item.serviceDate).format('YYYY/MM/DD') }} | |||||
| </view> | |||||
| </view> | |||||
| <!-- 陪伴对象 --> | |||||
| <view class="service-section"> | |||||
| <view class="section-title"> | |||||
| <view class="title-indicator"></view> | |||||
| <text>陪伴对象</text> | |||||
| <view class="collapse-icon" @click="togglePetList(index)"> | |||||
| {{ petListCollapsed[index] ? '展开' : '收起' }} <text class="arrow" :class="{'arrow-up': !petListCollapsed[index]}">▼</text> | |||||
| </view> | |||||
| </view> | |||||
| <view class="section-content pet-list" :class="{bgSuccessQ : item.status == '2'}" v-if="!petListCollapsed[index]"> | |||||
| <view v-for="(pet, i) in item.pets" :key="i" class="pet-item"> | |||||
| <view class="pet-avatar"> | |||||
| <image :src="pet.photo" 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.orderItemList.map(n => n.productName).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" :class="{bgSuccessQ : item.status == '2'}"> | |||||
| {{ item.receiverDetailAddress }} | |||||
| </view> | |||||
| </view> --> | |||||
| <!-- 操作按钮 --> | |||||
| <view class="action-buttons"> | |||||
| <view class="btn btn-clock" | |||||
| v-if="item.status == '2'" | |||||
| :class="{bgSuccess : item.status == '2'}" | |||||
| @click="handleClock(item)">查看记录</view> | |||||
| <view class="btn btn-clock" | |||||
| v-else | |||||
| style="background-color: #aaa;color: #fff;" | |||||
| >暂无记录</view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import dayjs from '@/utils/lib/dayjs.min.js'; | |||||
| export default { | |||||
| name: 'TimelineService', | |||||
| // 定义组件属性 | |||||
| props: { | |||||
| date: { | |||||
| type: String, | |||||
| default: '2024-12-08' | |||||
| }, | |||||
| orderCount: { | |||||
| type: Number, | |||||
| default: 2 | |||||
| }, | |||||
| status: { | |||||
| type: Boolean, | |||||
| default: true | |||||
| }, | |||||
| current: { | |||||
| type: Number, | |||||
| default: 0 | |||||
| }, | |||||
| list: { | |||||
| type: Array, | |||||
| default: () => [] | |||||
| }, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| // 宠物列表折叠状态 - 使用数组来单独控制每个卡片中的宠物列表 | |||||
| petListCollapsed: [], | |||||
| // 服务卡片折叠状态 - 使用数组来单独控制每个卡片 | |||||
| serviceCardCollapsed: [] | |||||
| }; | |||||
| }, | |||||
| //计算属性 | |||||
| computed: { | |||||
| // 判断list中是否所有项的status都等于2 | |||||
| orderCompleted() { | |||||
| if (!this.list || this.list.length === 0) { | |||||
| return false; | |||||
| } | |||||
| return !this.list.every(item => item.status == '2'); | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| dayjs, | |||||
| // 切换宠物列表显示状态 | |||||
| togglePetList(index) { | |||||
| if (this.petListCollapsed[index] === undefined) { | |||||
| this.$set(this.petListCollapsed, index, true); | |||||
| } else { | |||||
| this.$set(this.petListCollapsed, index, !this.petListCollapsed[index]); | |||||
| } | |||||
| }, | |||||
| // 切换服务卡片显示状态 | |||||
| toggleServiceCard(index) { | |||||
| if (this.serviceCardCollapsed[index] === undefined) { | |||||
| this.$set(this.serviceCardCollapsed, index, true); | |||||
| } else { | |||||
| this.$set(this.serviceCardCollapsed, index, !this.serviceCardCollapsed[index]); | |||||
| } | |||||
| }, | |||||
| // 格式化日期 | |||||
| formatDate(dateString) { | |||||
| const date = new Date(dateString); | |||||
| return { | |||||
| day: date.getDate().toString().padStart(2, '0'), | |||||
| month: (date.getMonth() + 1).toString().padStart(2, '0') | |||||
| }; | |||||
| }, | |||||
| // 按钮事件处理函数 | |||||
| handleClock(item) { | |||||
| uni.navigateTo({ | |||||
| url: `/pages/personalCenter/orderDetailImage?id=${item.id}`, | |||||
| }); | |||||
| }, | |||||
| getTopBgColor() { | |||||
| return this.orderCompleted ? '#FFAA48' : '#4CD964'; | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .bgSuccess{ | |||||
| background-color: #4CD964 !important; | |||||
| } | |||||
| .bgSuccessQ{ | |||||
| background-color: #4CD96422 !important; | |||||
| } | |||||
| .timeline-container { | |||||
| position: relative; | |||||
| padding: 20rpx; | |||||
| margin-bottom: 30rpx; | |||||
| .empty-state { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| padding: 80rpx 40rpx; | |||||
| .empty-image { | |||||
| width: 200rpx; | |||||
| height: 200rpx; | |||||
| margin-bottom: 20rpx; | |||||
| } | |||||
| .empty-text { | |||||
| color: #999; | |||||
| font-size: 28rpx; | |||||
| } | |||||
| } | |||||
| .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; | |||||
| padding-bottom: 40rpx; | |||||
| .timeline-line { | |||||
| position: absolute; | |||||
| left: 40rpx; | |||||
| top: 0; | |||||
| height: 100%; | |||||
| width: 0; | |||||
| border-left: 2rpx dashed #707070; | |||||
| border-left-style: dashed; | |||||
| border-image: repeating-linear-gradient(to bottom, #707070 0, #707070 8rpx, transparent 8rpx, transparent 20rpx) 1; | |||||
| z-index: 0; | |||||
| &::after{ | |||||
| content: ''; | |||||
| display: block; | |||||
| position: absolute; | |||||
| width: 8rpx; | |||||
| height: 8rpx; | |||||
| background-color: #000; | |||||
| border: 2rpx solid #707070; | |||||
| border-radius: 50%; | |||||
| left: -7rpx; | |||||
| top: 30rpx; | |||||
| } | |||||
| } | |||||
| .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; | |||||
| margin-left: 20rpx; | |||||
| flex: 1; | |||||
| } | |||||
| .collapse-icon { | |||||
| font-size: 24rpx; | |||||
| color: #999; | |||||
| padding: 0 20rpx; | |||||
| .arrow { | |||||
| transition: transform 0.3s; | |||||
| display: inline-block; | |||||
| } | |||||
| .arrow-up { | |||||
| transform: rotate(180deg); | |||||
| } | |||||
| } | |||||
| } | |||||
| .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; | |||||
| gap: 20rpx; | |||||
| .btn { | |||||
| height: 80rpx; | |||||
| line-height: 80rpx; | |||||
| text-align: center; | |||||
| border-radius: 40rpx; | |||||
| font-size: 28rpx; | |||||
| flex: 1; | |||||
| } | |||||
| .btn-clock { | |||||
| background-color: #FFAA48; | |||||
| color: #fff; | |||||
| } | |||||
| .btn-pet-file, .btn-service-file { | |||||
| background-color: #F6F7FB; | |||||
| color: #333; | |||||
| border: 1px solid #E5E6EB; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
+ 12
- 10
pages_order/order/orderDetail.vue
View File
+ 11
- 4
pages_order/order/orderList.vue
View File
+ 215
- 0
pages_order/order/serviceRecord.vue
View File
| @ -0,0 +1,215 @@ | |||||
| <template> | |||||
| <view class="service-record-page"> | |||||
| <!-- 服务记录列表 --> | |||||
| <view class="record-content"> | |||||
| <view v-if="loading && recordList.length === 0" class="loading-state"> | |||||
| <view class="loading-spinner"></view> | |||||
| <text>正在加载服务记录...</text> | |||||
| </view> | |||||
| <view v-else-if="recordList.length === 0" class="empty-state"> | |||||
| <image src="/static/images/personal/no-data.png" mode="aspectFit" class="empty-image"></image> | |||||
| <text class="empty-text">暂无服务记录</text> | |||||
| </view> | |||||
| <view v-else> | |||||
| <timeline-service | |||||
| v-for="(record, index) in recordList" | |||||
| :key="index" | |||||
| :date="record.date" | |||||
| :list="record.list" | |||||
| :serviceBtn="false" | |||||
| /> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 加载更多 --> | |||||
| <view class="loading-more" v-if="recordList.length > 0 && hasMore && loading"> | |||||
| <view class="loading-spinner"></view> | |||||
| <text>加载中...</text> | |||||
| </view> | |||||
| <!-- 没有更多数据 --> | |||||
| <view class="no-more" v-if="recordList.length > 0 && !hasMore"> | |||||
| <text>没有更多记录了</text> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import { appletOrderDateFrequencyList } from '@/api/order/order.js' | |||||
| import TimelineService from '../components/order/timelineService.vue' | |||||
| export default { | |||||
| components: { | |||||
| TimelineService | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| orderId: '', | |||||
| recordList: [], | |||||
| loading: false, | |||||
| hasMore: true, | |||||
| page: 1, | |||||
| size: 10 | |||||
| } | |||||
| }, | |||||
| onLoad(options) { | |||||
| if (options.orderId) { | |||||
| this.orderId = options.orderId; | |||||
| this.getServiceRecords(); | |||||
| } | |||||
| }, | |||||
| onReachBottom() { | |||||
| this.loadMore(); | |||||
| }, | |||||
| onPullDownRefresh() { | |||||
| this.refresh(); | |||||
| }, | |||||
| methods: { | |||||
| // 获取服务记录 | |||||
| getServiceRecords() { | |||||
| if (this.loading) return; | |||||
| this.loading = true; | |||||
| const params = { | |||||
| orderId: this.orderId, | |||||
| pageNumber: this.page, | |||||
| pageSize: this.size | |||||
| }; | |||||
| appletOrderDateFrequencyList(params).then(res => { | |||||
| if (res && res.data) { | |||||
| const newList = res.data; | |||||
| if (this.page === 1) { | |||||
| this.recordList = newList; | |||||
| } else { | |||||
| this.recordList = [...this.recordList, ...newList]; | |||||
| } | |||||
| this.hasMore = newList.length === this.size; | |||||
| } else { | |||||
| this.hasMore = false; | |||||
| } | |||||
| console.log(this.recordList); | |||||
| this.loading = false; | |||||
| }).catch(err => { | |||||
| console.error('获取服务记录失败:', err); | |||||
| this.loading = false; | |||||
| uni.showToast({ | |||||
| title: '获取服务记录失败', | |||||
| icon: 'none' | |||||
| }); | |||||
| }); | |||||
| }, | |||||
| // 加载更多 | |||||
| loadMore() { | |||||
| if (this.loading || !this.hasMore) return; | |||||
| this.page++; | |||||
| this.getServiceRecords(); | |||||
| }, | |||||
| // 下拉刷新 | |||||
| refresh() { | |||||
| this.page = 1; | |||||
| this.recordList = []; | |||||
| this.hasMore = true; | |||||
| this.getServiceRecords().then(() => { | |||||
| uni.stopPullDownRefresh(); | |||||
| }).catch(() => { | |||||
| uni.stopPullDownRefresh(); | |||||
| }); | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .service-record-page { | |||||
| background-color: #f5f5f5; | |||||
| min-height: 100vh; | |||||
| } | |||||
| .page-header { | |||||
| background: linear-gradient(135deg, #FFAA48 0%, #FF8A00 100%); | |||||
| padding: 40rpx 30rpx 30rpx; | |||||
| color: #FFFFFF; | |||||
| .header-title { | |||||
| font-size: 36rpx; | |||||
| font-weight: bold; | |||||
| display: block; | |||||
| margin-bottom: 10rpx; | |||||
| } | |||||
| .header-subtitle { | |||||
| font-size: 26rpx; | |||||
| opacity: 0.9; | |||||
| } | |||||
| } | |||||
| .record-content { | |||||
| padding: 20rpx; | |||||
| } | |||||
| .loading-state { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| padding: 100rpx 40rpx; | |||||
| color: #999; | |||||
| font-size: 28rpx; | |||||
| } | |||||
| .empty-state { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| padding: 100rpx 40rpx; | |||||
| .empty-image { | |||||
| width: 200rpx; | |||||
| height: 200rpx; | |||||
| margin-bottom: 20rpx; | |||||
| } | |||||
| .empty-text { | |||||
| color: #999; | |||||
| font-size: 28rpx; | |||||
| } | |||||
| } | |||||
| .loading-more, | |||||
| .no-more { | |||||
| text-align: center; | |||||
| padding: 20rpx 0; | |||||
| color: #999; | |||||
| font-size: 24rpx; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| } | |||||
| .loading-spinner { | |||||
| width: 40rpx; | |||||
| height: 40rpx; | |||||
| border: 4rpx solid #f3f3f3; | |||||
| border-top: 4rpx solid #FFAA48; | |||||
| border-radius: 50%; | |||||
| animation: spin 1s linear infinite; | |||||
| margin-bottom: 16rpx; | |||||
| } | |||||
| @keyframes spin { | |||||
| 0% { | |||||
| transform: rotate(0deg); | |||||
| } | |||||
| 100% { | |||||
| transform: rotate(360deg); | |||||
| } | |||||
| } | |||||
| </style> | |||||