daimp-front/sub-operation-service/src/views/userCenter/userOrders.vue

<template>
  <div>
    <common current-name="supplier">
      <template #main>
        <div class="user-orders-warp">
          <userHeader :title="'订单管理'"></userHeader>
          <div class="user-orders-content">
            <div class="order-tab">
              <el-tabs v-model="activeCurrent" @tab-change="handleClick">
                <el-tab-pane v-for="(t, indext) in bottomList" :key="indext" :label="t.title" :name="t.name"> </el-tab-pane>
              </el-tabs>
            </div>

            <div class="order-list-warp">
              <div class="order-list">
                <div v-show="!show" class="empty">
                  <img style="width: 300px; height: 300px" src="../../assets/images/empty.png" alt="" />
                </div>
                <div v-for="(o, indexo) in store.data.records" v-show="show" :key="indexo" class="order-item">
                  <div class="order-item-top">
                    <div class="top-l">
                      <div class="top-item">
                        <div class="label">订单编号：</div>
                        <div class="val">{{ o.orderNo || '--' }}</div>
                      </div>
                      <div class="top-item">
                        <div class="label">下单时间：</div>
                        <div class="val">{{ o.createTime || '--' }}</div>
                      </div>
                    </div>
                    <div class="top-r">
                      <div class="top-item">
                        <div class="label">订单金额：</div>
                        <div class="val amount">{{ o.totalAmount.toFixed(2) || '0.00' }}</div>
                      </div>
                    </div>
                  </div>
                  <div v-if="o.orderItemInfos && o.orderItemInfos.length > 0" class="order-item-content">
                    <div class="content-list">
                      <div v-for="(g, indexg) in o.orderItemInfos" :key="indexg" class="good-item">
                        <div class="good-img">
                          <img class="good-img" :src="g.productImage" alt="" />
                          <!-- <costomImg
                            :url="'images/ecommerce/' + 'pic.png'"
                            :preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')?.href ?? '']"
                            :is-view="false"
                          ></costomImg> -->
                        </div>
                        <div class="good-info">
                          <div class="good-info-pos">
                            <div class="txt-ellipsis clamp2">{{ g.productName || '--' }}</div>
                            <div v-if="o.refundAuditResult == '拒绝退款' && o.orderStatus == '10'" style="color: red; font-size: 15px">
                              已拒绝退款：{{ o.refundFailReason }}
                            </div>
                          </div>
                        </div>
                        <div class="good-price-num">
                          <div class="good-price-num-pos">
                            <div class="price">￥{{ g.unitPrice }} / {{ g.unit }} * {{ g.quantity }}</div>
                            <div class="total">
                              <div class="amount">{{ (g.unitPrice * g.quantity).toFixed(2) }}</div>
                              <!-- <div class="amount">{{ (g.unitPrice * g.quantity + g.carriage).toFixed(2) }}</div> -->
                              <!-- <div class="carriage">( 含运费{{ g.carriage.toFixed(2) }})</div> -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="content-right">
                      <div class="content-right-pos">
                        <div v-if="o.orderStatus == '1'" class="right-item do-btn">
                          <el-button type="primary" @click="doPay(o.id)">立即付款</el-button>
                        </div>
                        <div v-if="o.orderStatus == '4' || o.orderStatus == '5'" class="right-item do-btn">
                          <el-button type="primary" @click="sureToReceives(o.id)">确认收货</el-button>
                        </div>
                        <div v-if="o.orderStatus == '1'" class="right-item do-btn">
                          <el-button @click="doCancel(o.id)">取消订单</el-button>
                        </div>

                        <div
                          v-if="o.orderStatus == '2' || o.orderStatus == '3' || o.orderStatus == '4' || o.orderStatus == '5'"
                          class="right-item do-btn"
                        >
                          <el-button type="danger" @click="doPay(o.id)">退货/退款</el-button>
                        </div>

                        <!-- <div v-if="o.orderStatus == '5'" class="right-item">已发货</div> -->
                        <!-- <div v-if="o.orderStatus == '5'" class="right-item text-link">快递单号</div> -->
                        <el-button type="primary" class="right-item do-btn" @click="goInfo(o.id)">订单详情</el-button>
                        <div class="right-item text-link">
                          {{
                            o.orderStatus == '7'
                              ? '已取消'
                              : o.orderStatus == '8'
                                ? '已完成'
                                : o.orderStatus == '4'
                                  ? '已发货'
                                  : o.orderStatus == '5'
                                    ? '待收货'
                                    : o.orderStatus == '6'
                                      ? '已收货'
                                      : o.orderStatus == '10'
                                        ? '退款中'
                                        : o.orderStatus == '11'
                                          ? '已退款'
                                          : ''
                          }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="pager">
                <div style="margin-bottom: 3px">共{{ total }}条</div>
                <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="total" @change="pagerChange" />
              </div>
            </div>
          </div>
        </div>
      </template>
    </common>
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus';
import common from './components/common.vue';
import { ref, reactive, onMounted } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
import { useRoute, useRouter } from 'vue-router';
import userHeader from './components/userHeader.vue';
import { cancelOrder, sureToReceive } from '../../apis/user';
import { useGetUserOrder } from '../../store/modules/userOrder';
let store = useGetUserOrder();
const route = useRoute();
const router = useRouter();
let page = reactive({
  current: 1,
  size: 20,
});
let total = ref(0);
let show = ref(false);
let handleClick = (value) => {
  activeCurrent.value = value;
  page.orderStatus = value;
  if (value == 5) {
    page.orderStatus = value + ',4';
  }
  store.getData(page).then((res) => {
    total.value = res.total;
    if (res.records.length > 0) {
      show.value = true;
    } else {
      show.value = false;
    }
    console.log(show.value);
  });
};

const pagerChange = (value) => {
  console.log(page);
  page.current = value;
  store.getData(page).then((res) => {
    if (res.records.length > 0) {
      show.value = true;
    } else {
      show.value = false;
    }
    console.log(show.value);
  });
};

const goInfo = (id) => {
  router.push({
    path: '/sub-operation-service/orderDetails',
    query: { id: id, page: JSON.stringify(page) },
  });
};

let bottomList = reactive([
  { title: '全部', name: 'all' },
  { title: '待付款', name: '1' },
  { title: '待发货', name: '3' },
  // { title: '已发货', name: '6' },
  { title: '待收货', name: '4' },
  { title: '已收货', name: '6' },
  { title: '退款中', name: '10' },
  { title: '已退款', name: '11' },
]);

onMounted(() => {
  page.orderStatus = 'all';
  store.getData(page).then((res) => {
    total.value = res.total;
    if (res.records.length > 0) {
      show.value = true;
    } else {
      show.value = false;
    }
  });
});

const sureToReceives = (id) => {
  sureToReceive({ orderId: id }).then((res) => {
    ElMessage({
      message: '确认收货成功',
      type: 'success',
      plain: true,
    });
    store.getData(page);
  });
};

let activeCurrent = ref('all');

let orderList = reactive([
  {
    id: '1',
    orderNo: 'YH8888888888',
    createTime: '2025.01.01 10:00:00',
    payAmount: 81,
    status: 0,
    goodlist: [
      { id: '001', title: '耿马镇 原生态 有机 西红柿', price: 4.9, unit: '份', num: 10, carriage: 6 },
      { id: '002', title: '耿马镇 原生态 有机 西蓝花', price: 2.6, unit: '份', num: 10, carriage: 0 },
    ],
  },
  {
    id: '2',
    orderNo: 'YH8888888889',
    createTime: '2025.02.01 10:00:00',
    payAmount: 110,
    status: 1,
    goodlist: [
      { id: '001', title: '耿马镇 原生态 有机 西红柿', price: 4.8, unit: '份', num: 10, carriage: 6 },
      { id: '002', title: '耿马镇 原生态 有机 西蓝花', price: 2.5, unit: '份', num: 10, carriage: 6 },
      { id: '002', title: '耿马镇 原生态 有机 茄子', price: 2.5, unit: '份', num: 10, carriage: 0 },
    ],
  },
  {
    id: '3',
    orderNo: 'YH8888888899',
    createTime: '2025.02.01 10:00:00',
    payAmount: 85,
    status: 2,
    goodlist: [
      { id: '001', title: '勐简镇 原生态 有机 西红柿', price: 4.8, unit: '份', num: 10, carriage: 6 },
      { id: '002', title: '勐简镇 原生态 有机 西蓝花', price: 2.5, unit: '份', num: 10, carriage: 6 },
    ],
  },
]);

const doPay = (id) => {
  router.push({
    path: '/sub-operation-service/orderDetails',
    query: { id: id, page: JSON.stringify(page) },
  });
};

const doCancel = (id) => {
  cancelOrder({ id: id }).then((res) => {
    ElMessage({
      message: '取消订单成功',
      type: 'success',
      plain: true,
    });
    store.getData(page);
  });
};
</script>
<style lang="scss" scoped>
.pager {
  align-items: center;
  display: flex;
  position: fixed;
  bottom: 42px;
  color: #999999;
  font-size: 12px;
}
.user-orders-warp {
  width: 100%;
  .user-orders-content {
    margin-top: 16px;
    padding: 16px 16px 30px 16px;
    width: 100%;
    height: calc(100vh - 136px);
    border-radius: 16px;
    background: $color-fff;
  }
  .order-tab {
    width: 100%;
    ::v-deep() {
      .el-tabs__nav-wrap::after {
        background: transparent !important;
      }
      .el-tabs__item {
        font-size: 20px !important;
      }
      .el-tabs__active-bar {
        height: 5px !important;
        border-radius: 4px;
      }
      .el-descriptions__label,
      .el-descriptions__content {
        font-size: 16px !important;
      }
      .cell-item {
        display: inline-flex;
      }
      .el-descriptions__label {
        color: $color-999;
      }
      .el-descriptions__content {
        color: $color-333;
      }
    }
  }
  .order-list-warp {
    position: relative;
    overflow-y: auto;
    width: 100%;
    height: calc(100% - 60px);
    .order-list {
      width: 100%;
      .empty {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 500px;
      }
      .order-item {
        width: 100%;
        .order-item-top {
          display: inline-flex;
          padding: 16px 0;
          width: 100%;
          .top-l,
          .top-r {
            display: inline-block;
            vertical-align: middle;
          }
          .top-l {
            display: inline-flex;
            justify-content: flex-start;
            width: 80%;
            gap: 64px;
          }
          .top-r {
            text-align: right;
          }
          .top-item {
            display: inline-flex;
            justify-content: flex-start;
            .label,
            .val {
              font-size: 18px;
            }
            .label {
              padding-right: 8px;
            }
            .amount::before {
              content: '￥';
            }
          }
        }
        .order-item-content {
          display: inline-flex;
          width: 100%;
          border-radius: 16px;
          background: $color-f5;
          .content-list,
          .content-right {
            display: inline-block;
            vertical-align: top;
          }
          .content-list {
            width: calc(100% - 160px);
            .good-item {
              display: inline-flex;
              justify-content: flex-start;
              margin: 8px 0;
              padding-left: 16px;
              width: 100%;
              gap: 16px;
            }
            .good-img,
            .good-info,
            .good-price-num {
              display: inline-block;
              vertical-align: middle;
            }
            .good-img {
              width: 120px;
              height: 120px;
            }
            .good-info {
              display: inline-flex;
              justify-content: center;
              width: 200px;
              flex-direction: column;
              .good-info-pos {
                font-size: 18px;
                color: $color-666;
              }
            }
            .good-price-num {
              display: inline-flex;
              justify-content: center;
              width: calc(100% - 340px);
              flex-direction: column;
              .good-price-num-pos {
                display: inline-flex;
                justify-content: space-around;
                gap: 16px;
                .price,
                .total {
                  font-size: 20px;
                }
                .price {
                  font-weight: 400;
                }
                .total {
                  text-align: center;
                  .amount {
                    font-weight: 700;
                    color: $color-main;
                  }
                  .amount::before {
                    content: '￥';
                  }
                  .carriage {
                    font-size: 16px;
                    color: $color-666;
                  }
                }
              }
            }
          }
          .content-right {
            display: inline-flex;
            justify-content: center;
            width: 160px;
            text-align: center;
            flex-direction: column;
            .content-right-pos {
              .text-normal {
                cursor: pointer;
                font-size: 16px;
              }
              .text-link {
                font-size: 16px;
                color: $color-main;
                cursor: pointer;
              }
            }
            .do-btn {
              margin-top: 8px;
            }
          }
        }
      }
    }
  }
}
</style>