hly
/
pet-front-order
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.
2 Commits
1 Branch
32 MiB
Tree: c68077f701
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'c68077f701'
${ noResults }
pet-front-order/pages/personalCenter/orderDetail.vue

331 lines
8.4 KiB
Raw Normal View History

feat: 新增任务中心、订单详情、个人信息页面及功能 - 新增任务中心页面，支持任务列表展示、任务接受、任务提交等功能 - 新增订单详情页面，展示订单详细信息及服务记录 - 新增个人信息页面，支持用户头像、昵称等信息修改 - 新增配置信息初始化功能，优化全局配置管理 - 新增新用户优惠券弹窗，提升用户体验
6 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <template>
  2. 	<view class="order-detail-container">
  3. 		<!-- 日期信息 -->
  4. 		<view class="order-date">
  5. 			<view class="order-date-icon">
  6. 				<u-icon name="calendar" color="#FFAA48" size="20"></u-icon>
  7. 			</view>
  8. 			<view class="order-date-text">{{ orderDate }}</view>
  9. 		</view>
  10. 		
  11. 		<!-- 个人信息区域 -->
  12. 		<view class="order-section">
  13. 			<view class="order-section-title">个人信息</view>
  14. 			<view class="order-section-content">
  15. 				<view class="order-image-item">
  16. 					<view class="order-image-label">手套照片 (共2张)</view>
  17. 					<view class="order-image-container">
  18. 						<image class="order-image" src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/gloves.jpg" mode="aspectFill"></image>
  19. 					</view>
  20. 				</view>
  21. 				<view class="order-image-item">
  22. 					<view class="order-image-label">鞋套照片 (共2张)</view>
  23. 					<view class="order-image-container">
  24. 						<image class="order-image" src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/shoes.jpg" mode="aspectFill"></image>
  25. 					</view>
  26. 				</view>
  27. 			</view>
  28. 		</view>
  29. 		
  30. 		<!-- 宠物状况记录 -->
  31. 		<view class="order-section">
  32. 			<view class="order-section-title">宠物状况记录</view>
  33. 			<view class="order-section-content">
  34. 				<view class="pet-record" v-for="(pet, index) in pets" :key="index">
  35. 					<view class="pet-name">{{ pet.name }} (共{{ pet.photoCount }}张)</view>
  36. 					<view class="pet-images">
  37. 						<view class="pet-image-container" v-for="(photo, photoIndex) in pet.photos" :key="photoIndex">
  38. 							<image class="pet-image" :src="photo" mode="aspectFill"></image>
  39. 						</view>
  40. 					</view>
  41. 				</view>
  42. 			</view>
  43. 		</view>
  44. 		
  45. 		<!-- 基础服务记录 -->
  46. 		<view class="order-section">
  47. 			<view class="order-section-title">基础服务记录</view>
  48. 			<view class="order-section-content">
  49. 				<view class="service-record" v-for="(service, index) in services" :key="index">
  50. 					<view class="service-name">{{ service.name }}</view>
  51. 					<view class="service-comparison">
  52. 						<view class="service-before-after">
  53. 							<view class="service-image-container">
  54. 								<image class="service-image" :src="service.beforeImage" mode="aspectFill"></image>
  55. 								<view class="service-image-label">前</view>
  56. 							</view>
  57. 							<view class="service-image-container">
  58. 								<image class="service-image" :src="service.afterImage" mode="aspectFill"></image>
  59. 								<view class="service-image-label">后</view>
  60. 							</view>
  61. 						</view>
  62. 					</view>
  63. 				</view>
  64. 			</view>
  65. 		</view>
  66. 		
  67. 		<!-- 定制服务记录 -->
  68. 		<view class="order-section">
  69. 			<view class="order-section-title">定制服务记录</view>
  70. 			<view class="order-section-content">
  71. 				<view class="custom-service">
  72. 					<view class="custom-service-item">
  73. 						<view class="custom-service-name">遛狗 (5-30分钟)</view>
  74. 						<view class="custom-service-images">
  75. 							<image class="custom-service-image" src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/dog1.jpg" mode="aspectFill"></image>
  76. 							<image class="custom-service-image" src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/dog2.jpg" mode="aspectFill"></image>
  77. 							<image class="custom-service-image" src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/dog3.jpg" mode="aspectFill"></image>
  78. 						</view>
  79. 					</view>
  80. 					<view class="custom-service-item">
  81. 						<view class="custom-service-name">梳毛 (5-30分钟)</view>
  82. 						<view class="custom-service-images">
  83. 							<image class="custom-service-image" src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/cat1.jpg" mode="aspectFill"></image>
  84. 							<image class="custom-service-image" src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/cat2.jpg" mode="aspectFill"></image>
  85. 						</view>
  86. 					</view>
  87. 				</view>
  88. 			</view>
  89. 		</view>
  90. 	</view>
  91. </template>
  92. 

  93. <script>
  94. 	export default {
  95. 		data() {
  96. 			return {
  97. 				orderId: null,
  98. 				orderDate: '2024年12月08日',
  99. 				pets: [
  100. 					{
  101. 						name: '小汪',
  102. 						photoCount: 2,
  103. 						photos: [
  104. 							'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/dog1.jpg',
  105. 							'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/dog2.jpg'
  106. 						]
  107. 					},
  108. 					{
  109. 						name: 'Billion',
  110. 						photoCount: 2,
  111. 						photos: [
  112. 							'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/cat1.jpg',
  113. 							'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/cat2.jpg'
  114. 						]
  115. 					}
  116. 				],
  117. 				services: [
  118. 					{
  119. 						name: '猫粮前后对比',
  120. 						beforeImage: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/food_before.jpg',
  121. 						afterImage: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/food_after.jpg'
  122. 					},
  123. 					{
  124. 						name: '水碗前后对比',
  125. 						beforeImage: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/water_before.jpg',
  126. 						afterImage: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/water_after.jpg'
  127. 					},
  128. 					{
  129. 						name: '猫砂盆 厚度前后对比',
  130. 						beforeImage: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/litter_before.jpg',
  131. 						afterImage: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/litter_after.jpg'
  132. 					}
  133. 				]
  134. 			}
  135. 		},
  136. 		onLoad(options) {
  137. 			if (options.orderId) {
  138. 				this.orderId = options.orderId;
  139. 				// 这里可以根据orderId加载订单详情数据

  140. 				this.loadOrderDetail();
  141. 			}
  142. 		},
  143. 		methods: {
  144. 			loadOrderDetail() {
  145. 				// 这里可以调用API获取订单详情

  146. 				// 示例代码，实际项目中需要替换为真实API调用

  147. 				/*
  148. 				getOrderDetail(this.orderId).then(res => {
  149. 					if (res && res.code === 200) {
  150. 						this.orderDate = res.data.orderDate;
  151. 						this.pets = res.data.pets;
  152. 						this.services = res.data.services;
  153. 					}
  154. 				});
  155. 				*/
  156. 			}
  157. 		}
  158. 	}
  159. </script>
  160. 

  161. <style lang="scss">
  162. .order-detail-container {
  163. 	padding: 15px;
  164. 	background-color: #f5f5f7;
  165. 	min-height: 100vh;
  166. }
  167. 

  168. .order-date {
  169. 	display: flex;
  170. 	align-items: center;
  171. 	padding: 10px 15px;
  172. 	background-color: #fff;
  173. 	border-radius: 8px;
  174. 	margin-bottom: 15px;
  175. 	
  176. 	.order-date-icon {
  177. 		margin-right: 10px;
  178. 	}
  179. 	
  180. 	.order-date-text {
  181. 		color: #333;
  182. 		font-size: 16px;
  183. 		font-weight: 500;
  184. 	}
  185. }
  186. 

  187. .order-section {
  188. 	background-color: #fff;
  189. 	border-radius: 8px;
  190. 	margin-bottom: 15px;
  191. 	overflow: hidden;
  192. 	
  193. 	.order-section-title {
  194. 		padding: 12px 15px;
  195. 		border-bottom: 1px solid #f0f0f0;
  196. 		color: #333;
  197. 		font-size: 16px;
  198. 		font-weight: 500;
  199. 		position: relative;
  200. 		
  201. 		&::before {
  202. 			content: '';
  203. 			position: absolute;
  204. 			left: 0;
  205. 			top: 12px;
  206. 			height: 16px;
  207. 			width: 4px;
  208. 			background-color: #ffaa48;
  209. 			border-radius: 0 2px 2px 0;
  210. 		}
  211. 	}
  212. 	
  213. 	.order-section-content {
  214. 		padding: 15px;
  215. 	}
  216. }
  217. 

  218. .order-image-item {
  219. 	margin-bottom: 15px;
  220. 	
  221. 	.order-image-label {
  222. 		color: #666;
  223. 		font-size: 14px;
  224. 		margin-bottom: 8px;
  225. 	}
  226. 	
  227. 	.order-image-container {
  228. 		display: flex;
  229. 		flex-wrap: wrap;
  230. 		gap: 10px;
  231. 		
  232. 		.order-image {
  233. 			width: 100px;
  234. 			height: 100px;
  235. 			border-radius: 4px;
  236. 			object-fit: cover;
  237. 		}
  238. 	}
  239. }
  240. 

  241. .pet-record {
  242. 	margin-bottom: 20px;
  243. 	
  244. 	.pet-name {
  245. 		color: #333;
  246. 		font-size: 15px;
  247. 		font-weight: 500;
  248. 		margin-bottom: 10px;
  249. 	}
  250. 	
  251. 	.pet-images {
  252. 		display: flex;
  253. 		flex-wrap: wrap;
  254. 		gap: 10px;
  255. 		
  256. 		.pet-image-container {
  257. 			.pet-image {
  258. 				width: 100px;
  259. 				height: 100px;
  260. 				border-radius: 4px;
  261. 				object-fit: cover;
  262. 			}
  263. 		}
  264. 	}
  265. }
  266. 

  267. .service-record {
  268. 	margin-bottom: 20px;
  269. 	
  270. 	.service-name {
  271. 		color: #333;
  272. 		font-size: 15px;
  273. 		font-weight: 500;
  274. 		margin-bottom: 10px;
  275. 	}
  276. 	
  277. 	.service-comparison {
  278. 		.service-before-after {
  279. 			display: flex;
  280. 			gap: 15px;
  281. 			
  282. 			.service-image-container {
  283. 				position: relative;
  284. 				
  285. 				.service-image {
  286. 					width: 120px;
  287. 					height: 120px;
  288. 					border-radius: 4px;
  289. 					object-fit: cover;
  290. 				}
  291. 				
  292. 				.service-image-label {
  293. 					position: absolute;
  294. 					bottom: 0;
  295. 					left: 0;
  296. 					background-color: rgba(0,0,0,0.5);
  297. 					color: #fff;
  298. 					padding: 2px 8px;
  299. 					font-size: 12px;
  300. 					border-radius: 0 0 0 4px;
  301. 				}
  302. 			}
  303. 		}
  304. 	}
  305. }
  306. 

  307. .custom-service {
  308. 	.custom-service-item {
  309. 		margin-bottom: 15px;
  310. 		
  311. 		.custom-service-name {
  312. 			color: #333;
  313. 			font-size: 15px;
  314. 			font-weight: 500;
  315. 			margin-bottom: 10px;
  316. 		}
  317. 		
  318. 		.custom-service-images {
  319. 			display: flex;
  320. 			flex-wrap: wrap;
  321. 			gap: 10px;
  322. 			
  323. 			.custom-service-image {
  324. 				width: 100px;
  325. 				height: 100px;
  326. 				border-radius: 4px;
  327. 				object-fit: cover;
  328. 			}
  329. 		}
  330. 	}
  331. }
  332. </style>