|
|
- <template>
- <view class="order-item" @click="clickOrder">
- <!-- 订单头部 - 商家信息 -->
- <view class="order-header">
- <view class="shop-info">
- <image class="shop-logo" :src="order.hanHaiMember.headImage" mode="aspectFill"></image>
- <text class="shop-name">{{ order.title }}</text>
- </view>
- </view>
-
- <!-- 订单内容 - 菜品展示 -->
- <view class="order-content">
- <view class="food-list">
- <view class="food-scroll">
- <view class="food-item" v-for="(food, index) in order.goodsList" :key="index">
- <image class="food-image" :src="food.goods.image" mode="aspectFill"></image>
- </view>
- </view>
- <view class="food-count" v-if="order.foodCount > 4">共{{ order.goodsList.length }}个</view>
- </view>
- </view>
-
- <!-- 订单信息 - 下单时间和价格 -->
- <view class="order-info">
- <view class="order-time">下单时间:{{ order.updateTime }}</view>
- <view class="order-price">
- <text>合计:</text>
- <text class="price">¥{{ order.priceAll }}</text>
- </view>
- </view>
-
- <!-- 订单操作 -->
- <view class="order-actions">
- <view
- class="order-toast"
- v-if="order.status === '2' || order.status === '3'"
- :style="{ backgroundColor: order.status === '2' ? '#ECFEF4' : '#FFDBDB', color: order.status === '2' ? '#019245' : '#FF2A2A' }">
- <uv-icon name="info-circle" size="34" :color="order.status === '2' ? '#019245' : '#FF2A2A'"></uv-icon>
- <text v-show="order.status === '2'">全力奔跑中,请耐心等待哦!</text>
- <text v-show="order.status === '3'">您的餐点已送到取餐点,请尽快取餐</text>
- </view>
- <view class="action-btn cancel" v-show="order.status === '0'" @click.stop="cancelOrder">
- 取消订单
- </view>
- <view class="action-btn confirm" v-show="order.status === '0'" @click.stop="payOrder">
- 立即下单
- </view>
- <view class="action-btn confirm" v-show="order.status === '1' || order.status === '2'"
- @click.stop="clickOrder">
- 查看订单
- </view>
- <view class="action-btn confirm" v-show="order.status === '4'" @click.stop="gotoSale">
- 订单售后
- </view>
- <view class="action-btn confirm" v-show="order.status_dictText === '待取餐'" @click.stop="pickOrder">
- 取餐完成
- </view>
- </view>
- </view>
- </template>
-
- <script>
- export default {
- name: 'OrderItem',
- props: {
- // 订单数据对象
- order: {
- type: Object,
- required: true,
- default: () => ({
- })
- }
- },
- computed: {
- fourImage() {
- return this.order.foods.slice(0, 4)
- }
- },
- methods: {
- // 取消订单
- cancelOrder() {
- this.$emit('cancel', this.order.id);
- },
- // 支付订单
- payOrder() {
- this.$emit('pay', this.order.id);
- },
- // 点击整个订单项
- clickOrder() {
- this.$emit('click', this.order);
- },
- gotoSale() {
- this.$utils.navigateTo({
- url: '/pages_order/order/afterSale?id=' + this.order.id + '&userId=' + this.order.userId + '&orderId=' + this.order.orderLeaderId
- })
- },
- // 取餐完成
- pickOrder() {
- this.$emit('pick', this.order)
- }
- }
- }
- </script>
-
- <style lang="scss" scoped>
- .order-item {
- background-color: #ffffff;
- margin: 20rpx 0;
- border-radius: 16rpx;
- padding: 20rpx;
-
- .order-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding-bottom: 20rpx;
- border-bottom: 1rpx solid #f5f5f5;
-
- .shop-info {
- display: flex;
- align-items: center;
-
- .shop-logo {
- width: 70rpx;
- height: 70rpx;
- border-radius: 6rpx;
- margin-right: 10rpx;
- }
-
- .shop-name {
- font-size: 28rpx;
- }
- }
- }
-
- .order-content {
- padding: 20rpx 0;
-
- .food-list {
- white-space: nowrap;
- height: 150rpx;
- width: 100%;
- display: flex;
- align-items: center;
- }
-
- .food-scroll {
- display: inline-flex;
- }
-
- .food-item {
- height: 140rpx;
- width: 130rpx;
- margin-right: 10rpx;
- display: inline-block;
-
- .food-image {
- width: 100%;
- height: 100%;
- border-radius: 8rpx;
- }
- }
-
- .food-count {
- flex: 1;
- font-size: 24rpx;
- color: #666;
- text-align: center;
- margin-top: 10rpx;
- }
- }
-
- .order-info {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 10rpx 0;
- border-top: 1rpx solid #f5f5f5;
-
- .order-time {
- font-size: 24rpx;
- color: #666;
- }
-
- .order-price {
- font-size: 24rpx;
-
- .price {
- color: #f00;
- font-weight: 500;
- margin-left: 8rpx;
- }
- }
- }
-
- .order-actions {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- padding: 20rpx;
- gap: 20rpx;
- .order-toast {
- display: flex;
- align-items: center;
- // justify-content: flex-start;
- flex: 1;
- // text-align: left;
- gap: 10rpx;
- font-size: 24rpx;
- background-color: pink;
- border-radius: 10rpx;
- padding: 10rpx;
-
- }
- .action-btn {
- padding: 12rpx 30rpx;
- border-radius: 30rpx;
- font-size: 24rpx;
- font-weight: 500;
- &.cancel {
- background-color: #fff;
- color: $uni-color-third;
- border: 3rpx solid $uni-color-third;
- }
-
- &.confirm {
- background-color: $uni-color;
- color: #fff;
- }
- }
- }
- }
- </style>
|