feat(订单): 添加订单评价功能及支付组件集成
- 新增订单评价弹窗组件,支持评分和评价内容输入 - 实现评价提交逻辑,包含表单验证和状态管理 - 集成支付组件,优化支付流程 - 添加评价样式和响应式布局 - 完善订单列表交互,区分已评价和未评价状态
Showing
3 changed files
with
164 additions
and
1 deletions
| ... | @@ -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 { |
| ... | @@ -304,4 +439,31 @@ | ... | @@ -304,4 +439,31 @@ |
| 304 | .order-actions { | 439 | .order-actions { |
| 305 | gap: 16rpx; | 440 | gap: 16rpx; |
| 306 | } | 441 | } |
| 307 | -} | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 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.
-
Please register or login to post a comment