猫妈狗爸伴宠师小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

847 lines
30 KiB

3 months ago
3 months ago
3 months ago
3 months ago
  1. <template>
  2. <!-- <div>服务档案</div> -->
  3. <view class="box box-size">
  4. <view style="margin: 32rpx 0;">
  5. <up-steps :current="currentStep" activeColor="#FFA042" inactiveColor="#E5E5E5" class="up-steps-custom">
  6. <up-steps-item title="喂养要求"
  7. :titleStyle="{fontSize: '32rpx', fontWeight: 'bold', color: currentStep === 0 ? '#fff' : '#999999'}"></up-steps-item>
  8. <up-steps-item title="清洁要求"
  9. :titleStyle="{fontSize: '32rpx', fontWeight: 'bold', color: currentStep === 1 ? '#fff' : '#999999'}"></up-steps-item>
  10. <up-steps-item title="附加服务"
  11. :titleStyle="{fontSize: '32rpx', fontWeight: 'bold', color: currentStep === 2 ? '#fff' : '#999999'}"></up-steps-item>
  12. </up-steps>
  13. </view>
  14. <!-- v-if="detail.includeDryFood
  15. || detail.includeWetFood
  16. || detail.includeHomemadeFood
  17. || detail.includeRawMeat
  18. || detail.includeHealthSupplements
  19. || detail.includeSnacks
  20. " -->
  21. <!-- 喂养要求内容 -->
  22. <view v-if="currentStep === 0">
  23. <view class="top box-size" :style="{borderRadius:'16rpx'}">
  24. <view class="form-title">
  25. 本次喂养过程中您需要喂养的食品包括
  26. </view>
  27. <view class=" mt32 ml10">
  28. <view class="color-A55 size-30 fw400">
  29. 干粮(主粮冻干等)
  30. </view>
  31. <view class="size-30 mt32 fw400">
  32. 干粮摆放位置
  33. </view>
  34. <view class="img mt20">
  35. <template v-if="handleImageUrl(detail.dryFoodLocation).length > 0">
  36. <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
  37. @click="previewImage(item)"
  38. v-for="(item, index) in handleImageUrl(detail.dryFoodLocation)" :key="index"></u-image>
  39. </template>
  40. <view v-else class="empty-state">
  41. <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
  42. <text class="empty-text">暂无图片</text>
  43. </view>
  44. </view>
  45. <view class="size-30 mt24 flex-between">
  46. <view :style="{color:'#999999'}">干粮喂养重量</view>
  47. <view class="level">
  48. <view class="input_ mr10">
  49. <input type="text" :value="detail.dryFoodFeedWeight"
  50. :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
  51. </view>
  52. <view>/(单位:)</view>
  53. </view>
  54. </view>
  55. <view class="size-30 mt24 flex-between">
  56. <view :style="{color:'#999999'}">干粮喂养频率</view>
  57. <view class="level">
  58. <view class="input_ mr10">
  59. <input type="text" :value="detail.dryFoodFeedFrequencyDays"
  60. :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
  61. </view>
  62. <view></view>
  63. <view class="input_ mr10">
  64. <input type="text" :value="detail.dryFoodFeedFrequencyTimes"
  65. :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
  66. </view>
  67. <view></view>
  68. </view>
  69. </view>
  70. <view class="size-30 mt24" :style="{color:'#999999'}">
  71. 备注信息
  72. </view>
  73. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  74. <input type="text" disabled :value="detail.dryFoodRemarks || '无'"
  75. :style="{height:'50rpx',fontSize:'30rpx'}">
  76. </view>
  77. </view>
  78. <view class="line" :style="{borderRadius:'1rpx'}"></view>
  79. <view class=" mt32 ml10">
  80. <view class="color-A55 size-30 fw400">
  81. 湿粮(罐头等)
  82. </view>
  83. <view class="size-30 mt32 fw400">
  84. 湿粮摆放位置
  85. </view>
  86. <view class="img mt20">
  87. <template v-if="handleImageUrl(detail.wetFoodLocation).length > 0">
  88. <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
  89. @click="previewImage(item)"
  90. v-for="(item, index) in handleImageUrl(detail.wetFoodLocation)" :key="index"></u-image>
  91. </template>
  92. <view v-else class="empty-state">
  93. <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
  94. <text class="empty-text">暂无图片</text>
  95. </view>
  96. </view>
  97. <view class="size-30 mt24 flex-between">
  98. <view :style="{color:'#999999'}">湿粮喂养重量</view>
  99. <view class="level">
  100. <view class="input_ mr10">
  101. <input type="text" disabled :value="detail.wetFoodFeedWeight"
  102. :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
  103. </view>
  104. <view>/(单位:)</view>
  105. </view>
  106. </view>
  107. <view class="size-30 mt24 flex-between">
  108. <view :style="{color:'#999999'}">湿粮喂养频率</view>
  109. <view class="level">
  110. <view class="input_ mr10">
  111. <input type="text" disabled :value="detail.wetFoodFeedFrequencyDays"
  112. :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
  113. </view>
  114. <view></view>
  115. <view class="input_ mr10">
  116. <input type="text" disabled :value="detail.wetFoodFeedFrequencyTimes"
  117. :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
  118. </view>
  119. <view></view>
  120. </view>
  121. </view>
  122. <view class="size-30 mt24" :style="{color:'#999999'}">
  123. 备注信息
  124. </view>
  125. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  126. <input type="text" :value="detail.wetFoodRemarks || '无'" :style="{height:'50rpx',fontSize:'30rpx'}">
  127. </view>
  128. </view>
  129. <view class="line" :style="{borderRadius:'1rpx'}"></view>
  130. <view class=" mt32 ml10">
  131. <view class="color-A55 size-30 fw400">
  132. 自制食品
  133. </view>
  134. <view class="size-30 mt32 fw400">
  135. 自制食品摆放位置
  136. </view>
  137. <view class="img mt20">
  138. <template v-if="handleImageUrl(detail.homemadeFoodLocation).length > 0">
  139. <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
  140. @click="previewImage(item)"
  141. v-for="(item, index) in handleImageUrl(detail.homemadeFoodLocation)"
  142. :key="index"></u-image>
  143. </template>
  144. <view v-else class="empty-state">
  145. <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
  146. <text class="empty-text">暂无图片</text>
  147. </view>
  148. </view>
  149. <view class="size-30 mt24" :style="{color:'#999999'}">
  150. 自制饭制作和喂食说明
  151. </view>
  152. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  153. <input type="text" :value="detail.homemadeFoodInstructions || '无'"
  154. :style="{height:'50rpx',fontSize:'30rpx'}">
  155. </view>
  156. </view>
  157. <view class="line" :style="{borderRadius:'1rpx'}"></view>
  158. <view class=" mt32 ml10">
  159. <view class="color-A55 size-30 fw400">
  160. 生骨肉
  161. </view>
  162. <view class="size-30 mt32 fw400">
  163. 生骨肉摆放位置
  164. </view>
  165. <view class="img mt20">
  166. <template v-if="handleImageUrl(detail.rawMeatLocation).length > 0">
  167. <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
  168. @click="previewImage(item)"
  169. v-for="(item, index) in handleImageUrl(detail.rawMeatLocation)" :key="index"></u-image>
  170. </template>
  171. <view v-else class="empty-state">
  172. <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
  173. <text class="empty-text">暂无图片</text>
  174. </view>
  175. </view>
  176. <view class="size-30 mt24" :style="{color:'#999999'}">
  177. 生骨肉喂食说明
  178. </view>
  179. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  180. <input type="text" disabled :value="detail.rawMeatFeedingInstructions || '无'"
  181. :style="{height:'50rpx',fontSize:'30rpx'}">
  182. </view>
  183. </view>
  184. <view class="line" :style="{borderRadius:'1rpx'}"></view>
  185. <view class=" mt32 ml10">
  186. <view class="color-A55 size-30 fw400">
  187. 保健品
  188. </view>
  189. <view class="size-30 mt32 fw400">
  190. 保健品摆放位置
  191. </view>
  192. <view class="img mt20">
  193. <template v-if="handleImageUrl(detail.healthSupplementsLocation).length > 0">
  194. <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
  195. @click="previewImage(item)"
  196. v-for="(item, index) in handleImageUrl(detail.healthSupplementsLocation)"
  197. :key="index"></u-image>
  198. </template>
  199. <view v-else class="empty-state">
  200. <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
  201. <text class="empty-text">暂无图片</text>
  202. </view>
  203. </view>
  204. <view class="size-30 mt24" :style="{color:'#999999'}">
  205. 保健品喂养方式
  206. </view>
  207. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  208. <input type="text" disabled :value="detail.healthSupplementsFeedingInstructions || '无'"
  209. :style="{height:'50rpx',fontSize:'30rpx'}">
  210. </view>
  211. </view>
  212. <view class="line" :style="{borderRadius:'1rpx'}"></view>
  213. <view class=" mt32 ml10">
  214. <view class="color-A55 size-30 fw400">
  215. 零食
  216. </view>
  217. <view class="size-30 mt32 fw400">
  218. 零食摆放位置
  219. </view>
  220. <view class="img mt20">
  221. <template v-if="handleImageUrl(detail.snacksLocation).length > 0">
  222. <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
  223. @click="previewImage(item)"
  224. v-for="(item, index) in handleImageUrl(detail.snacksLocation)" :key="index"></u-image>
  225. </template>
  226. <view v-else class="empty-state">
  227. <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
  228. <text class="empty-text">暂无图片</text>
  229. </view>
  230. </view>
  231. <view class="size-30 mt24" :style="{color:'#999999'}">
  232. 零食喂养方式
  233. </view>
  234. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  235. <input type="text" disabled :value="detail.snacksFeedingMethod || '无'"
  236. :style="{height:'50rpx',fontSize:'30rpx'}">
  237. </view>
  238. </view>
  239. <view class="line" :style="{borderRadius:'1rpx'}"></view>
  240. </view>
  241. <view class="top mt24" :style="{borderRadius:'16rpx'}">
  242. <view class="form-title">
  243. 食盆/自动喂食器
  244. </view>
  245. <view class=" mt32 ml10">
  246. <view class="color-A55 size-30 fw400">
  247. 喂食器具摆放位置
  248. </view>
  249. <view class="mt20">
  250. <template v-if="handleImageUrl(detail.feedingTrayAutomaticFeederLocation).length > 0">
  251. <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
  252. @click="previewImage(item)"
  253. v-for="(item, index) in handleImageUrl(detail.feedingTrayAutomaticFeederLocation)"
  254. :key="index"></u-image>
  255. </template>
  256. <view v-else class="empty-state">
  257. <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
  258. <text class="empty-text">暂无图片</text>
  259. </view>
  260. </view>
  261. <view class="size-30 mt24" :style="{color:'#999999'}">
  262. 备注信息
  263. </view>
  264. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  265. <input type="text" disabled :value="detail.feedingTrayAutomaticFeederRemarks || '无'"
  266. :style="{height:'50rpx',fontSize:'30rpx'}">
  267. </view>
  268. </view>
  269. </view>
  270. <view class="top mt24" :style="{borderRadius:'16rpx'}">
  271. <view class="form-title">
  272. 饮用水
  273. </view>
  274. <view class=" mt32 ml10">
  275. <view class="color-A55 size-30 fw400">
  276. 饮用水摆放位置
  277. </view>
  278. <view class="mt20">
  279. <template v-if="handleImageUrl(detail.waterBowlLocation).length > 0">
  280. <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
  281. @click="previewImage(item)"
  282. v-for="(item, index) in handleImageUrl(detail.waterBowlLocation)"
  283. :key="index"></u-image>
  284. </template>
  285. <view v-else class="empty-state">
  286. <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
  287. <text class="empty-text">暂无图片</text>
  288. </view>
  289. </view>
  290. <view class="size-30 mt24" :style="{color:'#999999'}">
  291. 饮用水添加要求
  292. </view>
  293. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  294. <input type="text" disabled :value="detail.waterBowlRemarks || '无'"
  295. :style="{height:'50rpx',fontSize:'30rpx'}">
  296. </view>
  297. </view>
  298. </view>
  299. <view class="top mt24" :style="{borderRadius:'16rpx'}">
  300. <view class="form-title">
  301. 其他补充信息(非必填)
  302. </view>
  303. <view class=" mt32 ml10">
  304. <view class="size-30 mt24" :style="{color:'#999999'}">
  305. 备注信息
  306. </view>
  307. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  308. <input type="text" disabled :value="detail.otherRemark || '无'"
  309. :style="{height:'50rpx',fontSize:'30rpx'}">
  310. </view>
  311. </view>
  312. </view>
  313. </view>
  314. <!-- 清洁要求内容 -->
  315. <view v-if="currentStep === 1">
  316. <view class="top box-size" :style="{borderRadius:'16rpx'}">
  317. <view class="form-title">
  318. 您需要的清洁内容
  319. </view>
  320. <!-- <view class="empty-state-full">
  321. <up-icon name="info-circle" size="60rpx" color="#999999"></up-icon>
  322. <text class="empty-text-full">暂无清洁内容</text>
  323. </view> -->
  324. <view class="mt32 ml10">
  325. <view class="color-A55 size-30 fw400">
  326. 猫砂
  327. </view>
  328. <view class="size-30 mt32 fw400">
  329. 猫砂摆放位置
  330. </view>
  331. <view class="img mt20">
  332. <template v-if="handleImageUrl(detail.litterBoxLocation).length > 0">
  333. <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
  334. @click="previewImage(item)"
  335. v-for="(item, index) in handleImageUrl(detail.litterBoxLocation)"
  336. :key="index"></u-image>
  337. </template>
  338. <view v-else class="empty-state">
  339. <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
  340. <text class="empty-text">暂无图片</text>
  341. </view>
  342. </view>
  343. <view class="size-30 mt24 flex-between">
  344. <view :style="{color:'#999999'}">猫砂更换频率</view>
  345. <view class="level">
  346. <view class="input_ mr10">
  347. <input type="text" disabled :value="detail.litterBoxChangeFrequencyDays"
  348. :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
  349. </view>
  350. <view></view>
  351. <view class="input_ mr10">
  352. <input type="text" disabled :value="detail.litterBoxChangeFrequencyTimes"
  353. :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
  354. </view>
  355. <view></view>
  356. </view>
  357. </view>
  358. <view class="size-30 mt24" :style="{color:'#999999'}">
  359. 备注信息
  360. </view>
  361. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  362. <input type="text" :value="detail.litterBoxRemarks || '无'" :style="{height:'50rpx',fontSize:'30rpx'}">
  363. </view>
  364. </view>
  365. <view class="line" :style="{borderRadius:'1rpx'}"></view>
  366. <view class="mt32 ml10">
  367. <view class="color-A55 size-30 fw400">
  368. 尿垫
  369. </view>
  370. <view class="size-30 mt32 fw400">
  371. 尿垫摆放位置
  372. </view>
  373. <view class="img mt20">
  374. <template v-if="handleImageUrl(detail.peePadLocation).length > 0">
  375. <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
  376. @click="previewImage(item)"
  377. v-for="(item, index) in handleImageUrl(detail.peePadLocation)" :key="index"></u-image>
  378. </template>
  379. <view v-else class="empty-state">
  380. <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
  381. <text class="empty-text">暂无图片</text>
  382. </view>
  383. </view>
  384. <view class="size-30 mt24 flex-between">
  385. <view :style="{color:'#999999'}">更换尿垫</view>
  386. <view class="level">
  387. <!-- <view class="input_ mr10">
  388. <input type="text" :value="detail.peePadLocation"
  389. :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
  390. </view> -->
  391. <view v-if="detail.changePeePad"></view>
  392. <view v-else></view>
  393. </view>
  394. </view>
  395. <view class="size-30 mt24 flex-between">
  396. <view :style="{color:'#999999'}">尿垫更换频率</view>
  397. <view class="level">
  398. <view class="input_ mr10">
  399. <input type="text" :value="detail.peePadFrequencyDays"
  400. :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
  401. </view>
  402. <view></view>
  403. <view class="input_ mr10">
  404. <input type="text" :value="detail.peePadFrequencyTimes"
  405. :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
  406. </view>
  407. <view></view>
  408. </view>
  409. </view>
  410. <view class="size-30 mt24" :style="{color:'#999999'}">
  411. 备注信息
  412. </view>
  413. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  414. <input type="text" disabled :value="detail.peePadRemarks || '无'"
  415. :style="{height:'50rpx',fontSize:'30rpx'}">
  416. </view>
  417. </view>
  418. </view>
  419. </view>
  420. <!-- 附加服务内容 -->
  421. <view v-if="currentStep === 2">
  422. <view class="top box-size" :style="{borderRadius:'16rpx'}">
  423. <view class="form-title">
  424. 您需要的附加服务
  425. </view>
  426. <!-- 陪玩服务 -->
  427. <view class="mt32 ml10">
  428. <view class="color-A55 size-30 fw400">
  429. 陪玩
  430. </view>
  431. <view class="size-30 mt32 fw400">
  432. 陪玩用具摆放位置
  433. </view>
  434. <view class="img mt20">
  435. <template v-if="handleImageUrl(detail.playtimeToolsLocation).length > 0">
  436. <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
  437. @click="previewImage(item)"
  438. v-for="(item, index) in handleImageUrl(detail.playtimeToolsLocation)"
  439. :key="index"></u-image>
  440. </template>
  441. <view v-else class="empty-state">
  442. <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
  443. <text class="empty-text">暂无图片</text>
  444. </view>
  445. </view>
  446. <view class="size-30 mt24" :style="{color:'#999999'}">
  447. 您希望的互动方式和要求
  448. </view>
  449. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  450. <input type="text" :value="detail.playtimeRequirements || '无'"
  451. :style="{height:'50rpx',fontSize:'30rpx'}">
  452. </view>
  453. </view>
  454. <view class="line" :style="{borderRadius:'1rpx'}"></view>
  455. <!-- 活动区吸毛 -->
  456. <view class="mt32 ml10" v-if="detail.furCleaningService">
  457. <view class="color-A55 size-30 fw400">
  458. 活动区吸毛
  459. </view>
  460. <view class="size-30 mt32 fw400">
  461. 吸毛用品摆放位置
  462. </view>
  463. <view class="img mt20">
  464. <template v-if="handleImageUrl(detail.furCleaningToolsLocation).length > 0">
  465. <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
  466. @click="previewImage(item)"
  467. v-for="(item, index) in handleImageUrl(detail.furCleaningToolsLocation)"
  468. :key="index"></u-image>
  469. </template>
  470. <view v-else class="empty-state">
  471. <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
  472. <text class="empty-text">暂无图片</text>
  473. </view>
  474. </view>
  475. <view class="size-30 mt24" :style="{color:'#999999'}">
  476. 请说明吸毛区域及要求
  477. </view>
  478. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  479. <input type="text" :value="detail.furCleaningRequirements || '无'"
  480. :style="{height:'50rpx',fontSize:'30rpx'}">
  481. </view>
  482. </view>
  483. <view class="line" :style="{borderRadius:'1rpx'}"></view>
  484. <!-- 毛发梳理 -->
  485. <view class="mt32 ml10">
  486. <view class="color-A55 size-30 fw400">
  487. 毛发梳理
  488. </view>
  489. <view class="size-30 mt32 fw400">
  490. 毛发梳理用品摆放位置
  491. </view>
  492. <view class="img mt20">
  493. <template v-if="handleImageUrl(detail.groomingToolsLocation).length > 0">
  494. <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
  495. @click="previewImage(item)"
  496. v-for="(item, index) in handleImageUrl(detail.groomingToolsLocation)"
  497. :key="index"></u-image>
  498. </template>
  499. <view v-else class="empty-state">
  500. <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
  501. <text class="empty-text">暂无图片</text>
  502. </view>
  503. </view>
  504. <view class="size-30 mt24" :style="{color:'#999999'}">
  505. 请说明毛发梳理要求(: 天数,次数等)
  506. </view>
  507. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  508. <input type="text" :value="detail.groomingRequirements || '无'"
  509. :style="{height:'50rpx',fontSize:'30rpx'}">
  510. </view>
  511. </view>
  512. <view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.groomingService"></view>
  513. <!-- 食具深度清洁 -->
  514. <view class="mt32 ml10">
  515. <view class="color-A55 size-30 fw400">
  516. 食具深度清洁
  517. </view>
  518. <view class="size-30 mt32 fw400">
  519. 需深度清洁的用具及消毒剂摆放位置
  520. </view>
  521. <view class="img mt20">
  522. <template v-if="handleImageUrl(detail.deepCleaningToolsLocation).length > 0">
  523. <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
  524. @click="previewImage(item)"
  525. v-for="(item, index) in handleImageUrl(detail.deepCleaningToolsLocation)"
  526. :key="index"></u-image>
  527. </template>
  528. <view v-else class="empty-state">
  529. <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
  530. <text class="empty-text">暂无图片</text>
  531. </view>
  532. </view>
  533. <view class="size-30 mt24" :style="{color:'#999999'}">
  534. 请说明食具/饮水机深度清洁要求(如清洁方式消毒剂使用方式频率等)
  535. </view>
  536. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  537. <input type="text" :value="detail.deepCleaningRemarks || '无'"
  538. :style="{height:'50rpx',fontSize:'30rpx'}">
  539. </view>
  540. </view>
  541. <view class="line" :style="{borderRadius:'1rpx'}"></view>
  542. <!-- 喂药上药 -->
  543. <view class="mt32 ml10">
  544. <view class="color-A55 size-30 fw400">
  545. 喂药上药
  546. </view>
  547. <view class="size-30 mt32 fw400">
  548. 药品摆放位置
  549. </view>
  550. <view class="img mt20">
  551. <template v-if="handleImageUrl(detail.walkDogToolsLocation).length">
  552. <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
  553. @click="previewImage(item)"
  554. v-for="(item, index) in handleImageUrl(detail.administerMedicationLocation)"
  555. :key="index"></u-image>
  556. </template>
  557. <view v-else class="empty-state">
  558. <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
  559. <text class="empty-text">暂无图片</text>
  560. </view>
  561. </view>
  562. <view class="size-30 mt24" :style="{color:'#999999'}">
  563. 请说明药品使用方式
  564. </view>
  565. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  566. <input type="text" disabled :value="detail.administerMedicationRemarks || '无'"
  567. :style="{height:'50rpx',fontSize:'30rpx'}">
  568. </view>
  569. </view>
  570. <view class="line" :style="{borderRadius:'1rpx'}"></view>
  571. <!-- 遛狗服务 -->
  572. <view class="mt32 ml10">
  573. <view class="color-A55 size-30 fw400">
  574. 遛狗服务
  575. </view>
  576. <view class="size-30 mt32 fw400">
  577. 遛狗用品摆放位置
  578. </view>
  579. <view class="img mt20">
  580. <template v-if="handleImageUrl(detail.walkDogToolsLocation).length">
  581. <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
  582. @click="previewImage(item)"
  583. v-for="(item, index) in handleImageUrl(detail.walkDogToolsLocation)" :key="index"></u-image>
  584. </template>
  585. <view v-else class="empty-state">
  586. <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
  587. <text class="empty-text">暂无图片</text>
  588. </view>
  589. </view>
  590. <!-- 雨天遛狗 -->
  591. <view>
  592. <view class="size-30 mt32 fw400">
  593. 狗狗雨具位置
  594. </view>
  595. <view class="img mt20">
  596. <template v-if="handleImageUrl(detail.dogRainGearLocation).length">
  597. <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
  598. @click="previewImage(item)"
  599. v-for="(item, index) in handleImageUrl(detail.dogRainGearLocation)"
  600. :key="index"></u-image>
  601. </template>
  602. <view v-else class="empty-state">
  603. <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
  604. <text class="empty-text">暂无图片</text>
  605. </view>
  606. </view>
  607. <view class="size-30 mt24" :style="{color:'#999999'}">
  608. 下雨天遛狗要求
  609. </view>
  610. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  611. <input type="text" :value="detail.walkDogRainRemark || '无'"
  612. :style="{height:'50rpx',fontSize:'30rpx'}">
  613. </view>
  614. </view>
  615. <!-- 遛狗时长 -->
  616. <view>
  617. <view class="size-30 mt24" :style="{color:'#999999'}">
  618. 遛狗时长
  619. </view>
  620. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  621. <input type="text" :value="detail.walkDogDuration || '无'"
  622. :style="{height:'50rpx',fontSize:'30rpx'}">
  623. </view>
  624. </view>
  625. <!-- 狗狗行为 -->
  626. <view>
  627. <view class="size-30 mt24" :style="{color:'#999999'}">
  628. 狗狗行为
  629. </view>
  630. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  631. <input type="text" :value="detail.dogBehavior || '无'" :style="{height:'50rpx',fontSize:'30rpx'}">
  632. </view>
  633. </view>
  634. <!-- 偏好区域 -->
  635. <view>
  636. <view class="size-30 mt24" :style="{color:'#999999'}">
  637. 偏好区域
  638. </view>
  639. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  640. <input type="text" :value="detail.favoriteRegion || '无'"
  641. :style="{height:'50rpx',fontSize:'30rpx'}">
  642. </view>
  643. </view>
  644. <!-- 偏好路线 -->
  645. <view>
  646. <view class="size-30 mt24" :style="{color:'#999999'}">
  647. 偏好路线
  648. </view>
  649. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  650. <input type="text" :value="detail.favoriteRoute || '无'"
  651. :style="{height:'50rpx',fontSize:'30rpx'}">
  652. </view>
  653. </view>
  654. </view>
  655. <!-- 附加服务备注 -->
  656. <view class="mt32 ml10">
  657. <view class="size-30 mt24" :style="{color:'#999999'}">
  658. 附加服务备注
  659. </view>
  660. <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  661. <input type="text" :value="detail.additionalServicesRemarks || '无'"
  662. :style="{height:'50rpx',fontSize:'30rpx'}">
  663. </view>
  664. </view>
  665. </view>
  666. </view>
  667. <!-- 底部按钮 -->
  668. <view class="buttom_ mt60 box-size level" v-if="currentStep > 0">
  669. <view class="buttom_item level size-30" :style="{borderRadius:'41rpx',color:'#fff'}" @click="prevStep">
  670. 上一页
  671. </view>
  672. <view class="buttom_item level size-30" :style="{borderRadius:'41rpx',color:'#fff'}" @click="nextStep">
  673. {{ currentStep === 2 ? '完成' : '下一页' }}
  674. </view>
  675. </view>
  676. <view class="buttom mt60 box-size" v-else>
  677. <view class="buttom-item level size-30" :style="{borderRadius:'41rpx',color:'#fff'}" @click="nextStep">
  678. 下一页
  679. </view>
  680. </view>
  681. </view>
  682. </template>
  683. <script>
  684. import {
  685. getpetList
  686. } from "@/api/pet/index.js"
  687. import {
  688. getDictList
  689. } from "@/api/system/user.js"
  690. import {
  691. getPetCareByPetId
  692. } from "@/api/order/order.js";
  693. export default {
  694. data() {
  695. return {
  696. detail: {},
  697. show: false,
  698. petTypes: [],
  699. petType: '',
  700. orderId: 0,
  701. currentStep: 0, // 当前步骤,0:喂养要求,1:清洁要求,2:附加服务
  702. }
  703. },
  704. onLoad(options) {
  705. this.orderId = options.petId
  706. this.getPetCareByPetId()
  707. // 如果有指定步骤,则切换到对应步骤
  708. if (options.step) {
  709. this.currentStep = parseInt(options.step)
  710. }
  711. },
  712. methods: {
  713. getPetCareByPetId() {
  714. getPetCareByPetId(this.orderId).then(res => {
  715. this.detail = res.data || {}
  716. })
  717. },
  718. handleImageUrl(url) {
  719. if (!url) return []
  720. return url.split(',')
  721. },
  722. previewImage(url) {
  723. uni.previewImage({
  724. urls: [url]
  725. })
  726. },
  727. // 切换到上一步
  728. prevStep() {
  729. if (this.currentStep > 0) {
  730. this.currentStep--;
  731. }
  732. },
  733. // 切换到下一步
  734. nextStep() {
  735. if (this.currentStep < 2) {
  736. this.currentStep++;
  737. } else {
  738. // 如果是最后一步,可以提交表单或返回上一页
  739. uni.navigateBack();
  740. }
  741. },
  742. }
  743. }
  744. </script>
  745. <style scoped lang="scss">
  746. @import"detail.scss";
  747. // @import"steps-custom.scss";
  748. .empty-state {
  749. display: flex;
  750. flex-direction: column;
  751. align-items: center;
  752. justify-content: center;
  753. width: 173rpx;
  754. height: 230rpx;
  755. background-color: #f5f5f5;
  756. border-radius: 8rpx;
  757. }
  758. .empty-text {
  759. margin-top: 10rpx;
  760. font-size: 24rpx;
  761. color: #999999;
  762. }
  763. .empty-state-full {
  764. display: flex;
  765. flex-direction: column;
  766. align-items: center;
  767. justify-content: center;
  768. width: 100%;
  769. height: 200rpx;
  770. background-color: #f9f9f9;
  771. border-radius: 8rpx;
  772. margin-top: 20rpx;
  773. }
  774. .empty-text-full {
  775. margin-top: 20rpx;
  776. font-size: 28rpx;
  777. color: #999999;
  778. }
  779. /* 自定义步骤条样式 */
  780. // :deep(.up-steps-custom) {
  781. // .u-steps-item__wrapper {
  782. // width: 40rpx !important;
  783. // height: 40rpx !important;
  784. // &__circle {
  785. // width: 40rpx !important;
  786. // height: 40rpx !important;
  787. // background: #E5E5E5;
  788. // &__text {
  789. // font-size: 24rpx;
  790. // }
  791. // }
  792. // }
  793. // .u-steps-item__line {
  794. // top: 20rpx !important;
  795. // height: 4rpx !important;
  796. // background: #E5E5E5 !important;
  797. // }
  798. // /* 激活状态样式 */
  799. // .u-steps-item--active {
  800. // .u-steps-item__wrapper__circle {
  801. // background: linear-gradient(90deg, #FFA042, #FFD591) !important;
  802. // }
  803. // }
  804. // /* 已完成步骤前的线条样式 */
  805. // .u-steps-item--process {
  806. // .u-steps-item__line {
  807. // background: linear-gradient(90deg, #FFA042, #FFD591) !important;
  808. // }
  809. // }
  810. // }
  811. </style>