hookehuyr

feat(订单): 添加订单评价功能及支付组件集成

- 新增订单评价弹窗组件,支持评分和评价内容输入
- 实现评价提交逻辑,包含表单验证和状态管理
- 集成支付组件,优化支付流程
- 添加评价样式和响应式布局
- 完善订单列表交互,区分已评价和未评价状态
...@@ -23,6 +23,7 @@ declare module 'vue' { ...@@ -23,6 +23,7 @@ declare module 'vue' {
23 NutPopup: typeof import('@nutui/nutui-taro')['Popup'] 23 NutPopup: typeof import('@nutui/nutui-taro')['Popup']
24 NutRadio: typeof import('@nutui/nutui-taro')['Radio'] 24 NutRadio: typeof import('@nutui/nutui-taro')['Radio']
25 NutRadioGroup: typeof import('@nutui/nutui-taro')['RadioGroup'] 25 NutRadioGroup: typeof import('@nutui/nutui-taro')['RadioGroup']
26 + NutRate: typeof import('@nutui/nutui-taro')['Rate']
26 NutRow: typeof import('@nutui/nutui-taro')['Row'] 27 NutRow: typeof import('@nutui/nutui-taro')['Row']
27 NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar'] 28 NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar']
28 NutSticky: typeof import('@nutui/nutui-taro')['Sticky'] 29 NutSticky: typeof import('@nutui/nutui-taro')['Sticky']
......
...@@ -247,6 +247,141 @@ ...@@ -247,6 +247,141 @@
247 color: #9ca3af; 247 color: #9ca3af;
248 } 248 }
249 249
250 +// 评价弹窗样式
251 +.rate-popup {
252 + padding: 40rpx;
253 + height: 100%;
254 + display: flex;
255 + flex-direction: column;
256 +
257 + .rate-header {
258 + text-align: center;
259 + margin-bottom: 40rpx;
260 +
261 + .rate-title {
262 + font-size: 36rpx;
263 + font-weight: 600;
264 + color: #333;
265 + }
266 + }
267 +
268 + .rate-content {
269 + flex: 1;
270 +
271 + .product-info {
272 + display: flex;
273 + padding: 30rpx;
274 + background: #f8f9fa;
275 + border-radius: 16rpx;
276 + margin-bottom: 40rpx;
277 +
278 + .product-image {
279 + width: 120rpx;
280 + height: 120rpx;
281 + border-radius: 12rpx;
282 + margin-right: 24rpx;
283 + }
284 +
285 + .product-details {
286 + flex: 1;
287 + display: flex;
288 + flex-direction: column;
289 + justify-content: space-between;
290 +
291 + .product-name {
292 + font-size: 32rpx;
293 + font-weight: 600;
294 + color: #333;
295 + margin-bottom: 8rpx;
296 + }
297 +
298 + .product-specs {
299 + font-size: 26rpx;
300 + color: #666;
301 + margin-bottom: 8rpx;
302 + }
303 +
304 + .product-price {
305 + font-size: 32rpx;
306 + font-weight: 600;
307 + color: #ff6b35;
308 + }
309 + }
310 + }
311 +
312 + .rate-score-section {
313 + margin-bottom: 40rpx;
314 +
315 + .score-label {
316 + display: block;
317 + font-size: 30rpx;
318 + color: #333;
319 + margin-bottom: 20rpx;
320 + font-weight: 500;
321 + }
322 +
323 + .rate-stars {
324 + margin-bottom: 16rpx;
325 + }
326 +
327 + .score-text {
328 + font-size: 26rpx;
329 + color: #666;
330 + margin-left: 16rpx;
331 + }
332 + }
333 +
334 + .rate-input-section {
335 + .input-label {
336 + display: block;
337 + font-size: 30rpx;
338 + color: #333;
339 + margin-bottom: 20rpx;
340 + font-weight: 500;
341 + }
342 +
343 + .rate-textarea {
344 + width: 100%;
345 + min-height: 200rpx;
346 + border: 2rpx solid #e5e5e5;
347 + border-radius: 12rpx;
348 + padding: 20rpx;
349 + font-size: 28rpx;
350 + line-height: 1.5;
351 +
352 + &:focus {
353 + border-color: #ff6b35;
354 + }
355 +
356 + &.readonly {
357 + background-color: #f8f9fa;
358 + border-color: #e9ecef;
359 + color: #666;
360 + }
361 + }
362 +
363 + .review-date {
364 + display: block;
365 + font-size: 24rpx;
366 + color: #999;
367 + margin-top: 16rpx;
368 + text-align: right;
369 + }
370 + }
371 + }
372 +
373 + .rate-footer {
374 + padding-top: 40rpx;
375 +
376 + .nut-button {
377 + height: 88rpx;
378 + border-radius: 44rpx;
379 + font-size: 32rpx;
380 + font-weight: 600;
381 + }
382 + }
383 +}
384 +
250 /* 响应式适配 */ 385 /* 响应式适配 */
251 @media (max-width: 750px) { 386 @media (max-width: 750px) {
252 .header { 387 .header {
...@@ -305,3 +440,30 @@ ...@@ -305,3 +440,30 @@
305 gap: 16rpx; 440 gap: 16rpx;
306 } 441 }
307 } 442 }
443 +
444 +
445 + /* 加载指示器 */
446 + .loading-container {
447 + display: flex;
448 + align-items: center;
449 + justify-content: center;
450 + padding: 40rpx;
451 + gap: 16rpx;
452 + }
453 +
454 + .loading-text {
455 + font-size: 28rpx;
456 + color: #9ca3af;
457 + }
458 +
459 + :deep(.nut-textarea) {
460 + border: 1rpx solid #e5e7eb;
461 + border-radius: 16rpx;
462 + padding: 24rpx;
463 +}
464 +
465 +:deep(.nut-textarea__textarea) {
466 + font-size: 28rpx;
467 + color: #374151;
468 + line-height: 1.5;
469 +}
......
This diff is collapsed. Click to expand it.