Augcl
/
pet-front
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
猫妈狗爸伴宠师小程序前端代码
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.
99 Commits
2 Branches
11 MiB
Tree: 8dd2ee59f5
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '8dd2ee59f5'
${ noResults }
pet-front/otherPages/myOrdersManage/service/additionalService.vue

370 lines
13 KiB
Raw Normal View History

feat(订单管理): 新增宠物服务时间弹窗并优化订单管理功能 - 新增宠物服务时间弹窗组件 `petServicePopup.vue`，用于展示订单中的宠物服务时间列表 - 修改 `systemOrder.vue`，将打卡按钮点击事件改为显示服务时间弹窗 - 优化 `timelineService.vue`，支持循环渲染多个服务时间点 - 新增 `additionalService.vue`，用于处理附加服务逻辑 - 更新 `detail.vue`，增加附加服务展示和步骤切换功能 - 添加 `testData.json`，提供订单管理模块的测试数据
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <template>
  2. 	<view class="box box-size">
  3. 		<view style="margin: 32rpx 0;">
  4. 			<up-steps :current="currentStep" activeColor="#FFA042" inactiveColor="#999999" class="up-steps-custom">
  5. 				<up-steps-item title="喂养要求" :titleStyle="{fontSize: '32rpx', fontWeight: 'bold', color: currentStep === 0 ? '#FFA042' : '#999999'}"></up-steps-item>
  6. 				<up-steps-item title="清洁要求" :titleStyle="{fontSize: '32rpx', fontWeight: 'bold', color: currentStep === 1 ? '#FFA042' : '#999999'}"></up-steps-item>
  7. 				<up-steps-item title="附加服务" :titleStyle="{fontSize: '32rpx', fontWeight: 'bold', color: currentStep === 2 ? '#FFA042' : '#999999'}"></up-steps-item>
  8. 			</up-steps>
  9. 		</view>
  10. 

  11. 		<view class="top box-size" :style="{borderRadius:'16rpx'}">
  12. 			<view class="form-title">
  13. 				您需要的附加服务
  14. 			</view>
  15. 			
  16. 			<!-- 陪玩服务 -->
  17. 			<view class="mt32 ml10" v-if="form.playtimeService">
  18. 				<view class="color-A55 size-30 fw400">
  19. 					陪玩
  20. 				</view>
  21. 				<view class="size-30 mt32 fw400">
  22. 					陪玩用具摆放位置
  23. 				</view>
  24. 				<view class="img mt20">
  25. 					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(form.playtimeToolsLocation)" :key="index"></u-image>
  26. 					<view class="upload-btn" @click="uploadImage('playtimeToolsLocation')">
  27. 						<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
  28. 					</view>
  29. 				</view>
  30. 				<view class="size-30 mt24" :style="{color:'#999999'}">
  31. 					您希望的互动方式和要求
  32. 				</view>
  33. 				<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  34. 					<input type="text" v-model="form.playtimeRequirements" :style="{height:'50rpx',fontSize:'30rpx'}">
  35. 				</view>
  36. 			</view>
  37. 			<view class="line" :style="{borderRadius:'1rpx'}" v-if="form.playtimeService"></view>
  38. 			
  39. 			<!-- 活动区吸毛 -->
  40. 			<view class="mt32 ml10" v-if="form.furCleaningService">
  41. 				<view class="color-A55 size-30 fw400">
  42. 					活动区吸毛
  43. 				</view>
  44. 				<view class="size-30 mt32 fw400">
  45. 					吸毛用品摆放位置
  46. 				</view>
  47. 				<view class="img mt20">
  48. 					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(form.furCleaningToolsLocation)" :key="index"></u-image>
  49. 					<view class="upload-btn" @click="uploadImage('furCleaningToolsLocation')">
  50. 						<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
  51. 					</view>
  52. 				</view>
  53. 				<view class="size-30 mt24" :style="{color:'#999999'}">
  54. 					请说明吸毛区域及要求
  55. 				</view>
  56. 				<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  57. 					<input type="text" v-model="form.furCleaningRequirements" :style="{height:'50rpx',fontSize:'30rpx'}">
  58. 				</view>
  59. 			</view>
  60. 			<view class="line" :style="{borderRadius:'1rpx'}" v-if="form.furCleaningService"></view>
  61. 			
  62. 			<!-- 毛发梳理 -->
  63. 			<view class="mt32 ml10" v-if="form.groomingService">
  64. 				<view class="color-A55 size-30 fw400">
  65. 					毛发梳理
  66. 				</view>
  67. 				<view class="size-30 mt32 fw400">
  68. 					毛发梳理用品摆放位置
  69. 				</view>
  70. 				<view class="img mt20">
  71. 					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(form.groomingToolsLocation)" :key="index"></u-image>
  72. 					<view class="upload-btn" @click="uploadImage('groomingToolsLocation')">
  73. 						<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
  74. 					</view>
  75. 				</view>
  76. 				<view class="size-30 mt24" :style="{color:'#999999'}">
  77. 					请说明毛发梳理要求(如: 天数,次数等)
  78. 				</view>
  79. 				<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  80. 					<input type="text" v-model="form.groomingRequirements" :style="{height:'50rpx',fontSize:'30rpx'}">
  81. 				</view>
  82. 			</view>
  83. 			<view class="line" :style="{borderRadius:'1rpx'}" v-if="form.groomingService"></view>
  84. 			
  85. 			<!-- 食具深度清洁 -->
  86. 			<view class="mt32 ml10" v-if="form.deepCleaningService">
  87. 				<view class="color-A55 size-30 fw400">
  88. 					食具深度清洁
  89. 				</view>
  90. 				<view class="size-30 mt32 fw400">
  91. 					需深度清洁的用具及消毒剂摆放位置
  92. 				</view>
  93. 				<view class="img mt20">
  94. 					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(form.deepCleaningToolsLocation)" :key="index"></u-image>
  95. 					<view class="upload-btn" @click="uploadImage('deepCleaningToolsLocation')">
  96. 						<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
  97. 					</view>
  98. 				</view>
  99. 				<view class="size-30 mt24" :style="{color:'#999999'}">
  100. 					请说明食具/饮水机深度清洁要求(如清洁方式、消毒剂使用方式、频率等)
  101. 				</view>
  102. 				<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  103. 					<input type="text" v-model="form.deepCleaningRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
  104. 				</view>
  105. 			</view>
  106. 			<view class="line" :style="{borderRadius:'1rpx'}" v-if="form.deepCleaningService"></view>
  107. 			
  108. 			<!-- 喂药上药 -->
  109. 			<view class="mt32 ml10" v-if="form.administerMedication">
  110. 				<view class="color-A55 size-30 fw400">
  111. 					喂药上药
  112. 				</view>
  113. 				<view class="size-30 mt32 fw400">
  114. 					药品摆放位置
  115. 				</view>
  116. 				<view class="img mt20">
  117. 					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(form.administerMedicationLocation)" :key="index"></u-image>
  118. 					<view class="upload-btn" @click="uploadImage('administerMedicationLocation')">
  119. 						<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
  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" v-model="form.administerMedicationRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
  127. 				</view>
  128. 			</view>
  129. 			
  130. 			<!-- 遛狗服务 -->
  131. 			<view class="mt32 ml10" v-if="form.walkDog">
  132. 				<view class="color-A55 size-30 fw400">
  133. 					遛狗服务
  134. 				</view>
  135. 				<view class="size-30 mt32 fw400">
  136. 					遛狗用品摆放位置
  137. 				</view>
  138. 				<view class="img mt20">
  139. 					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(form.walkDogToolsLocation)" :key="index"></u-image>
  140. 					<view class="upload-btn" @click="uploadImage('walkDogToolsLocation')">
  141. 						<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
  142. 					</view>
  143. 				</view>
  144. 				
  145. 				<!-- 雨天遛狗 -->
  146. 				<view v-if="form.walkDogRainyDay">
  147. 					<view class="size-30 mt32 fw400">
  148. 						狗狗雨具位置
  149. 					</view>
  150. 					<view class="img mt20">
  151. 						<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(form.dogRainGearLocation)" :key="index"></u-image>
  152. 						<view class="upload-btn" @click="uploadImage('dogRainGearLocation')">
  153. 							<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
  154. 						</view>
  155. 					</view>
  156. 					<view class="size-30 mt24" :style="{color:'#999999'}">
  157. 						下雨天遛狗要求
  158. 					</view>
  159. 					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  160. 						<input type="text" v-model="form.walkDogRainRemark" :style="{height:'50rpx',fontSize:'30rpx'}">
  161. 					</view>
  162. 				</view>
  163. 				
  164. 				<!-- 遛狗时长 -->
  165. 				<view v-if="form.isWalkDogDuration">
  166. 					<view class="size-30 mt24" :style="{color:'#999999'}">
  167. 						遛狗时长
  168. 					</view>
  169. 					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  170. 						<input type="text" v-model="form.walkDogDuration" :style="{height:'50rpx',fontSize:'30rpx'}">
  171. 					</view>
  172. 				</view>
  173. 				
  174. 				<!-- 狗狗行为 -->
  175. 				<view v-if="form.isDogBehavior">
  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" v-model="form.dogBehavior" :style="{height:'50rpx',fontSize:'30rpx'}">
  181. 					</view>
  182. 				</view>
  183. 				
  184. 				<!-- 偏好区域 -->
  185. 				<view v-if="form.isFavoriteRegion">
  186. 					<view class="size-30 mt24" :style="{color:'#999999'}">
  187. 						偏好区域
  188. 					</view>
  189. 					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  190. 						<input type="text" v-model="form.favoriteRegion" :style="{height:'50rpx',fontSize:'30rpx'}">
  191. 					</view>
  192. 				</view>
  193. 				
  194. 				<!-- 偏好路线 -->
  195. 				<view v-if="form.isFavoriteRoute">
  196. 					<view class="size-30 mt24" :style="{color:'#999999'}">
  197. 						偏好路线
  198. 					</view>
  199. 					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  200. 						<input type="text" v-model="form.favoriteRoute" :style="{height:'50rpx',fontSize:'30rpx'}">
  201. 					</view>
  202. 				</view>
  203. 			</view>
  204. 			
  205. 			<!-- 附加服务备注 -->
  206. 			<view class="mt32 ml10" v-if="form.additionalService">
  207. 				<view class="size-30 mt24" :style="{color:'#999999'}">
  208. 					附加服务备注
  209. 				</view>
  210. 				<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
  211. 					<input type="text" v-model="form.additionalServicesRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
  212. 				</view>
  213. 			</view>
  214. 		</view>
  215. 		
  216. 		<view class="buttom_ mt60 box-size level">
  217. 			<view class="buttom_item level size-30" :style="{borderRadius:'41rpx',color:'#fff'}" @click="prevStep">
  218. 				上一页
  219. 			</view>
  220. 			<view class="buttom_item level size-30" :style="{borderRadius:'41rpx',color:'#fff'}" @click="nextStep">
  221. 				完成
  222. 			</view>
  223. 		</view>
  224. 	</view>
  225. </template>
  226. 

  227. <script>
  228. 	import { getPetCareByPetId, savePetCare } from "@/api/order/order.js";
  229. 	
  230. 	export default {
  231. 		data() {
  232. 			return {
  233. 				form: {
  234. 					// 附加服务相关字段

  235. 					additionalService: false,
  236. 					playtimeService: false,
  237. 					playtimeToolsLocation: '',
  238. 					playtimeRequirements: '',
  239. 					furCleaningService: false,
  240. 					furCleaningToolsLocation: '',
  241. 					furCleaningRequirements: '',
  242. 					groomingService: false,
  243. 					groomingToolsLocation: '',
  244. 					groomingRequirements: '',
  245. 					deepCleaningService: false,
  246. 					deepCleaningToolsLocation: '',
  247. 					deepCleaningRemarks: '',
  248. 					administerMedication: false,
  249. 					administerMedicationLocation: '',
  250. 					administerMedicationRemarks: '',
  251. 					additionalServicesPlacement: '',
  252. 					additionalServicesPlacementRemark: '',
  253. 					additionalServicesRemarks: '',
  254. 					// 遛狗相关字段

  255. 					walkDog: false,
  256. 					walkDogToolsLocation: '',
  257. 					walkDogRainyDay: false,
  258. 					dogRainGearLocation: '',
  259. 					walkDogRainRemark: '',
  260. 					isWalkDogDuration: false,
  261. 					walkDogDuration: '',
  262. 					isDogBehavior: false,
  263. 					dogBehavior: '',
  264. 					isFavoriteRegion: false,
  265. 					favoriteRegion: '',
  266. 					isFavoriteRoute: false,
  267. 					favoriteRoute: ''
  268. 				},
  269. 				currentStep: 2, // 当前步骤，固定为附加服务页面

  270. 				petId: 0,
  271. 				imageField: '' // 当前操作的图片字段

  272. 			}
  273. 		},
  274. 		onLoad(options) {
  275. 			this.petId = options.petId;
  276. 			if (this.petId) {
  277. 				this.getPetCareData();
  278. 			}
  279. 		},
  280. 		methods: {
  281. 			// 获取宠物服务档案数据

  282. 			getPetCareData() {
  283. 				getPetCareByPetId(this.petId).then(res => {
  284. 					if (res.data) {
  285. 						this.form = { ...this.form, ...res.data };
  286. 					}
  287. 				}).catch(err => {
  288. 					console.error('获取宠物服务档案失败', err);
  289. 				});
  290. 			},
  291. 			// 处理图片URL

  292. 			handleImageUrl(url) {
  293. 				if (!url) return [];
  294. 				return url.split(',');
  295. 			},
  296. 			// 预览图片

  297. 			previewImage(url) {
  298. 				uni.previewImage({
  299. 					urls: [url]
  300. 				});
  301. 			},
  302. 			// 上传图片

  303. 			uploadImage(field) {
  304. 				this.imageField = field;
  305. 				uni.chooseImage({
  306. 					count: 1,
  307. 					sizeType: ['original', 'compressed'],
  308. 					sourceType: ['album', 'camera'],
  309. 					success: (res) => {
  310. 						const tempFilePaths = res.tempFilePaths;
  311. 						// 这里应该有上传图片到服务器的逻辑

  312. 						// 模拟上传成功后设置图片URL

  313. 						this.form[this.imageField] = tempFilePaths[0];
  314. 					}
  315. 				});
  316. 			},
  317. 			// 上一步

  318. 			prevStep() {
  319. 				uni.navigateBack();
  320. 			},
  321. 			// 下一步/完成

  322. 			nextStep() {
  323. 				// 保存数据

  324. 				this.saveData();
  325. 			},
  326. 			// 保存数据

  327. 			saveData() {
  328. 				// 这里应该有保存数据到服务器的逻辑

  329. 				// 模拟保存成功后返回上一页

  330. 				uni.showToast({
  331. 					title: '保存成功',
  332. 					icon: 'success',
  333. 					duration: 2000,
  334. 					success: () => {
  335. 						setTimeout(() => {
  336. 							uni.navigateBack({
  337. 								delta: 2 // 返回上两级页面

  338. 							});
  339. 						}, 2000);
  340. 					}
  341. 				});
  342. 			}
  343. 		}
  344. 	}
  345. </script>
  346. 

  347. <style scoped lang="scss">
  348. 	@import "detail.scss";
  349. 	@import "steps-custom.scss";
  350. 	
  351. 	.upload-btn {
  352. 		width: 173rpx;
  353. 		height: 230rpx;
  354. 		background-color: #f5f5f5;
  355. 		display: flex;
  356. 		align-items: center;
  357. 		justify-content: center;
  358. 		margin-right: 10rpx;
  359. 	}
  360. 	
  361. 	.form-title {
  362. 		font-size: 32rpx;
  363. 		font-weight: bold;
  364. 		color: #333;
  365. 		padding: 30rpx 0 10rpx 0;
  366. 	}
  367. 	
  368. 	.fw400 {
  369. 		font-weight: 400;
  370. 	}
  371. </style>