敢为人鲜小程序前端代码仓库
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.

232 lines
5.6 KiB

1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
  1. <template>
  2. <view class="order-item" @click="clickOrder">
  3. <!-- 订单头部 - 商家信息 -->
  4. <view class="order-header">
  5. <view class="shop-info">
  6. <image class="shop-logo" :src="order.hanHaiMember.headImage" mode="aspectFill"></image>
  7. <text class="shop-name">{{ order.title }}</text>
  8. </view>
  9. </view>
  10. <!-- 订单内容 - 菜品展示 -->
  11. <view class="order-content">
  12. <view class="food-list">
  13. <view class="food-scroll">
  14. <view class="food-item" v-for="(food, index) in order.goodsList" :key="index">
  15. <image class="food-image" :src="food.goods.image" mode="aspectFill"></image>
  16. </view>
  17. </view>
  18. <view class="food-count" v-if="order.foodCount > 4">{{ order.goodsList.length }}</view>
  19. </view>
  20. </view>
  21. <!-- 订单信息 - 下单时间和价格 -->
  22. <view class="order-info">
  23. <view class="order-time">下单时间{{ order.updateTime }}</view>
  24. <view class="order-price">
  25. <text>合计:</text>
  26. <text class="price">{{ order.priceAll }}</text>
  27. </view>
  28. </view>
  29. <!-- 订单操作 -->
  30. <view class="order-actions">
  31. <view
  32. class="order-toast"
  33. v-if="order.status === '2' || order.status === '3'"
  34. :style="{ backgroundColor: order.status === '2' ? '#ECFEF4' : '#FFDBDB', color: order.status === '2' ? '#019245' : '#FF2A2A' }">
  35. <uv-icon name="info-circle" size="34" :color="order.status === '2' ? '#019245' : '#FF2A2A'"></uv-icon>
  36. <text v-show="order.status === '2'">全力奔跑中请耐心等待哦</text>
  37. <text v-show="order.status === '3'">您的餐点已送到取餐点请尽快取餐</text>
  38. </view>
  39. <view class="action-btn cancel" v-show="order.status === '0'" @click.stop="cancelOrder">
  40. 取消订单
  41. </view>
  42. <view class="action-btn confirm" v-show="order.status === '0'" @click.stop="payOrder">
  43. 立即下单
  44. </view>
  45. <view class="action-btn confirm" v-show="order.status === '1' || order.status === '2'"
  46. @click.stop="clickOrder">
  47. 查看订单
  48. </view>
  49. <view class="action-btn confirm" v-show="order.status === '4'" @click.stop="gotoSale">
  50. 订单售后
  51. </view>
  52. <view class="action-btn confirm" v-show="order.status_dictText === '待取餐'" @click.stop="pickOrder">
  53. 取餐完成
  54. </view>
  55. </view>
  56. </view>
  57. </template>
  58. <script>
  59. export default {
  60. name: 'OrderItem',
  61. props: {
  62. // 订单数据对象
  63. order: {
  64. type: Object,
  65. required: true,
  66. default: () => ({
  67. })
  68. }
  69. },
  70. computed: {
  71. fourImage() {
  72. return this.order.foods.slice(0, 4)
  73. }
  74. },
  75. methods: {
  76. // 取消订单
  77. cancelOrder() {
  78. this.$emit('cancel', this.order.id);
  79. },
  80. // 支付订单
  81. payOrder() {
  82. this.$emit('pay', this.order.id);
  83. },
  84. // 点击整个订单项
  85. clickOrder() {
  86. this.$emit('click', this.order);
  87. },
  88. gotoSale() {
  89. this.$utils.navigateTo({
  90. url: '/pages_order/order/afterSale?id=' + this.order.id + '&userId=' + this.order.userId + '&orderId=' + this.order.orderLeaderId
  91. })
  92. },
  93. // 取餐完成
  94. pickOrder() {
  95. this.$emit('pick', this.order)
  96. }
  97. }
  98. }
  99. </script>
  100. <style lang="scss" scoped>
  101. .order-item {
  102. background-color: #ffffff;
  103. margin: 20rpx 0;
  104. border-radius: 16rpx;
  105. padding: 20rpx;
  106. .order-header {
  107. display: flex;
  108. align-items: center;
  109. justify-content: space-between;
  110. padding-bottom: 20rpx;
  111. border-bottom: 1rpx solid #f5f5f5;
  112. .shop-info {
  113. display: flex;
  114. align-items: center;
  115. .shop-logo {
  116. width: 70rpx;
  117. height: 70rpx;
  118. border-radius: 6rpx;
  119. margin-right: 10rpx;
  120. }
  121. .shop-name {
  122. font-size: 28rpx;
  123. }
  124. }
  125. }
  126. .order-content {
  127. padding: 20rpx 0;
  128. .food-list {
  129. white-space: nowrap;
  130. height: 150rpx;
  131. width: 100%;
  132. display: flex;
  133. align-items: center;
  134. }
  135. .food-scroll {
  136. display: inline-flex;
  137. }
  138. .food-item {
  139. height: 140rpx;
  140. width: 130rpx;
  141. margin-right: 10rpx;
  142. display: inline-block;
  143. .food-image {
  144. width: 100%;
  145. height: 100%;
  146. border-radius: 8rpx;
  147. }
  148. }
  149. .food-count {
  150. flex: 1;
  151. font-size: 24rpx;
  152. color: #666;
  153. text-align: center;
  154. margin-top: 10rpx;
  155. }
  156. }
  157. .order-info {
  158. display: flex;
  159. justify-content: space-between;
  160. align-items: center;
  161. padding: 10rpx 0;
  162. border-top: 1rpx solid #f5f5f5;
  163. .order-time {
  164. font-size: 24rpx;
  165. color: #666;
  166. }
  167. .order-price {
  168. font-size: 24rpx;
  169. .price {
  170. color: #f00;
  171. font-weight: 500;
  172. margin-left: 8rpx;
  173. }
  174. }
  175. }
  176. .order-actions {
  177. display: flex;
  178. justify-content: flex-end;
  179. align-items: center;
  180. padding: 20rpx;
  181. gap: 20rpx;
  182. .order-toast {
  183. display: flex;
  184. align-items: center;
  185. // justify-content: flex-start;
  186. flex: 1;
  187. // text-align: left;
  188. gap: 10rpx;
  189. font-size: 24rpx;
  190. background-color: pink;
  191. border-radius: 10rpx;
  192. padding: 10rpx;
  193. }
  194. .action-btn {
  195. padding: 12rpx 30rpx;
  196. border-radius: 30rpx;
  197. font-size: 24rpx;
  198. font-weight: 500;
  199. &.cancel {
  200. background-color: #fff;
  201. color: $uni-color-third;
  202. border: 3rpx solid $uni-color-third;
  203. }
  204. &.confirm {
  205. background-color: $uni-color;
  206. color: #fff;
  207. }
  208. }
  209. }
  210. }
  211. </style>