success.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <template>
  2. <view class="success-container">
  3. <view class="success-card">
  4. <icon type="success" size="80" color="#C1001C" class="success-icon"></icon>
  5. <text class="status-title">提交成功</text>
  6. <text class="status-desc">您的订单已提交,正在等待业务员审核</text>
  7. <view class="btn-group">
  8. <!-- 再来一单:主按钮 -->
  9. <button class="primary-btn" @click="handleReorder">再来一单</button>
  10. <!-- 查看订单:次按钮 -->
  11. <button class="outline-btn" @click="viewOrder">查看订单</button>
  12. <!-- 返回下单页面:文字/轻量化链接风格按钮 -->
  13. <button class="text-btn" @click="handleReorder">返回下单页面</button>
  14. </view>
  15. </view>
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. methods: {
  21. // 将再来一单和返回页面功能合并:通过 reLaunch 自动重置数据
  22. handleReorder() {
  23. // reLaunch 会重新加载页面,彻底清空原有表单数据
  24. uni.reLaunch({
  25. url: '/pages/order/order'
  26. });
  27. },
  28. viewOrder() {
  29. // 跳转到订单管理或个人中心(视项目实际路径而定)
  30. uni.switchTab({
  31. url: '/pages/index/index'
  32. });
  33. }
  34. }
  35. }
  36. </script>
  37. <style scoped>
  38. .success-container {
  39. width: 100%;
  40. min-height: 100vh;
  41. background: #f7f8fa;
  42. display: flex;
  43. flex-direction: column;
  44. align-items: center;
  45. padding-top: 15vh;
  46. }
  47. .success-card {
  48. width: 90%;
  49. background: #fff;
  50. border-radius: 32rpx;
  51. padding: 80rpx 40rpx;
  52. display: flex;
  53. flex-direction: column;
  54. align-items: center;
  55. box-shadow: 0 4rpx 30rpx rgba(0,0,0,0.03);
  56. }
  57. .success-icon {
  58. margin-bottom: 40rpx;
  59. }
  60. .status-title {
  61. font-size: 40rpx;
  62. font-weight: bold;
  63. color: #333;
  64. margin-bottom: 16rpx;
  65. }
  66. .status-desc {
  67. font-size: 28rpx;
  68. color: #999;
  69. margin-bottom: 80rpx;
  70. }
  71. .btn-group {
  72. width: 100%;
  73. display: flex;
  74. flex-direction: column;
  75. gap: 24rpx;
  76. }
  77. .primary-btn {
  78. width: 100%;
  79. height: 96rpx;
  80. background: #C1001C;
  81. color: #fff;
  82. border-radius: 48rpx;
  83. font-size: 32rpx;
  84. font-weight: bold;
  85. display: flex;
  86. align-items: center;
  87. justify-content: center;
  88. border: none;
  89. box-shadow: 0 10rpx 20rpx rgba(193, 0, 28, 0.15);
  90. }
  91. .outline-btn {
  92. width: 100%;
  93. height: 96rpx;
  94. background: #fff;
  95. color: #C1001C;
  96. border-radius: 48rpx;
  97. font-size: 32rpx;
  98. font-weight: bold;
  99. display: flex;
  100. align-items: center;
  101. justify-content: center;
  102. border: 2rpx solid #C1001C;
  103. }
  104. .text-btn {
  105. margin-top: 20rpx;
  106. background: transparent;
  107. color: #666;
  108. font-size: 28rpx;
  109. border: none;
  110. text-decoration: underline; /* 增加下划线提示可点击 */
  111. }
  112. .text-btn:active {
  113. color: #333;
  114. opacity: 0.8;
  115. }
  116. </style>