index.vue 2.7 KB

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