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

<template>
  <div class="user-orders-warp">
    <userHeader :title="'订单管理'"></userHeader>
    <div class="user-orders-content">
      <div class="order-tab">
        <el-tabs v-model="activeCurrent">
          <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-for="(o, indexo) in orderList" :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.payAmount.toFixed(2) || '0.00' }}</div>
                </div>
              </div>
            </div>
            <div v-if="o.goodlist && o.goodlist.length > 0" class="order-item-content">
              <div class="content-list">
                <div v-for="(g, indexg) in o.goodlist" :key="indexg" class="good-item">
                  <div class="good-img">
                    <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.title || '--' }}</div>
                    </div>
                  </div>
                  <div class="good-price-num">
                    <div class="good-price-num-pos">
                      <div class="price">{{ g.price }} / {{ g.unit }} * {{ g.num }}</div>
                      <div class="total">
                        <div class="amount">{{ (g.price * g.num + 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.status == 0" class="right-item do-btn">
                    <el-button type="primary" @click="doPay">立即付款</el-button>
                  </div>
                  <div v-if="o.status == 0" class="right-item do-btn">
                    <el-button @click="doPay">取消订单</el-button>
                  </div>
                  <div v-if="o.status != 0" class="right-item">已发货</div>
                  <div v-if="o.status != 0" class="right-item text-link">快递单号</div>
                  <div class="right-item text-link">订单详情</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
import { useRoute, useRouter } from 'vue-router';
import userHeader from './components/userHeader.vue';
const route = useRoute();
const router = useRouter();

let bottomList = reactive([
  { title: '全部', name: 'all' },
  { title: '待付款', name: 'topay' },
  { title: '待发货', name: 'pending' },
  { title: '待收货', name: 'receive' },
  { title: '已发货', name: 'sendout' },
]);

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 = () => {};
</script>
<style lang="scss" scoped>
.user-orders-warp {
  width: 100%;
  .user-orders-content {
    width: 100%;
    background: $color-fff;
    border-radius: 16px;
    padding: 16px;
    margin-top: 16px;
    height: calc(100vh - 136px);
  }
  .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 {
    width: 100%;
    height: calc(100% - 60px);
    overflow-y: auto;
    .order-list {
      width: 100%;
      .order-item {
        width: 100%;
        .order-item-top {
          display: inline-flex;
          width: 100%;
          padding: 16px 0;
          .top-l,
          .top-r {
            display: inline-block;
            vertical-align: middle;
          }
          .top-l {
            display: inline-flex;
            width: 80%;
            gap: 64px;
            justify-content: flex-start;
          }
          .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 {
          background: $color-f5;
          display: inline-flex;
          width: 100%;
          border-radius: 16px;
          .content-list,
          .content-right {
            display: inline-block;
            vertical-align: top;
          }
          .content-list {
            width: calc(100% - 160px);
            .good-item {
              display: inline-flex;
              width: 100%;
              justify-content: flex-start;
              gap: 16px;
              padding-left: 16px;
              margin: 8px 0;
            }
            .good-img,
            .good-info,
            .good-price-num {
              display: inline-block;
              vertical-align: middle;
            }
            .good-img {
              width: 120px;
              height: 120px;
            }
            .good-info {
              width: 200px;
              display: inline-flex;
              flex-direction: column;
              justify-content: center;
              .good-info-pos {
                font-size: 18px;
                color: $color-666;
              }
            }
            .good-price-num {
              width: calc(100% - 340px);
              display: inline-flex;
              justify-content: center;
              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 {
                    color: $color-main;
                    font-weight: 700;
                  }
                  .amount::before {
                    content: '￥';
                  }
                  .carriage {
                    color: $color-666;
                    font-size: 16px;
                  }
                }
              }
            }
          }
          .content-right {
            width: 160px;
            display: inline-flex;
            justify-content: center;
            flex-direction: column;
            text-align: center;
            .content-right-pos {
              .text-normal {
                cursor: pointer;
                font-size: 16px;
              }
              .text-link {
                color: $color-main;
                cursor: pointer;
                font-size: 16px;
              }
            }
            .do-btn {
              margin-top: 8px;
            }
          }
        }
      }
    }
  }
}
</style>