uniapp-ZHSQ/packages/myOrders/index/index.vue

<template>
  <view class="container">
    <view class="tabs">
      <view
        v-for="(item, index) in categoryList"
        :key="index"
        :class="['tabItem', selectedTab === index ? 'active2' : '']"
        @click="selectTab(index, item)"
      >
        {{ item.category_name }}
      </view>
    </view>

    <view class="content">
      <view v-if="selectedTab === 6">
        <awaitRated />
      </view>
      <view v-if="selectedTab === 7">
        <rated />
      </view>
      <view v-else>
        <view v-for="(item, index) in orderData" :key="index">
          <view class="contentList">
            <!-- 订单头部信息 -->
            <view class="order-header" @click="toDetails(item.order_status)">
              <text>提交订单：{{ item.order_time }}</text>
              <view
                v-if="item.order_status == 6 || item.order_status == 5"
                class="status3"
                >{{ getOrderStatus(item.order_status) }}</view
              >
              <view v-else-if="item.order_status == 7" class="status2">
                <img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/refund.png" />
                {{ getOrderStatus(item.order_status) }}
              </view>
              <view v-else class="order_status">{{
                getOrderStatus(item.order_status)
              }}</view>
            </view>

            <!-- 商品列表 -->
            <view class="goods-list" @click="toDetails(item.order_status)">
              <view
                v-for="(goods, goodsIndex) in item.commodity_order_item_list
                  .commodity_pic"
                :key="goodsIndex"
                class="goods-item"
              >
                <image :src="goods.image" class="goods-img"></image>
              </view>
            </view>

            <!-- 订单底部信息 -->
            <view class="order-footer">
              <view
                class="order-footer-text"
                @click="toDetails(item.order_status)"
                >共{{ item.total_count }}件商品，共计
                <text> {{ item.total_amount }}</text>
              </view>
              <view>
                <view class="btn-group" v-if="item.order_status === 1">
                  <button class="cancel-btn" @click="cancelOrder">
                    取消订单
                  </button>
                  <button class="yfd-btn" @click="cancelOrder">运费单</button>
                  <button class="pay-btn" @click="goToPay">立即支付</button>
                </view>
                <view class="btn-group" v-if="item.order_status === 3">
                  <button class="yfd-btn" @click="cancelOrder">运费单</button>
                </view>
                <view class="btn-group" v-if="item.order_status === 6">
                  <button class="yfd-btn" @click="cancelOrder">运费单</button>
                  <button class="pay-btn" @click="cancelOrder">再来一单</button>
                </view>
                <view class="btn-group" v-if="item.order_status === 4">
                  <button class="cancel-btn" @click="checkLogistics">
                    查看物流
                  </button>
                  <button class="yfd-btn" @click="cancelOrder">运费单</button>
                  <button class="pay-btn" @click="cancelOrder">再来一单</button>
                </view>
                <view class="btn-group" v-if="item.order_status === 5">
                  <button class="cancel-btn" @click="orderEvaluate">
                    服务评价
                  </button>
                  <button class="yfd-btn" @click="cancelOrder">运费单</button>
                  <button class="pay-btn" @click="cancelOrder">再来一单</button>
                </view>
                <view class="btn-group" v-if="item.order_status === 7">
                  <button class="pay-btn" @click="cancelOrder">再来一单</button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { picUrl, NavgateTo, request } from "../../../utils";
import { apiArr } from "../../../api/order";
import Rated from "./rated.vue";
import AwaitRated from "./awaitRated.vue";

export default {
  components: {
    Rated,
    AwaitRated,
  },
  data() {
    return {
      categoryList: [
        { category_name: "全部" },
        { category_name: "待付款" },
        { category_name: "已取消" },
        { category_name: "待发货" },
        { category_name: "配送中" },
        { category_name: "已完成" },
        { category_name: "待评价" },
        { category_name: "已评价" },
        { category_name: "售后" },
      ],
      selectedTab: 0,
      orderData: [],
    };
  },
  methods: {
    selectTab(index, item) {
      this.selectedTab = index;
      if (index !== 6) {
        this.getOrderList();
      }
    },
    cancelOrder() {
      // 取消订单逻辑
      uni.showModal({
        title: "提示",
        content: "确定要取消订单吗？",
        success: (res) => {
          if (res.confirm) {
            // 调用取消订单API
          }
        },
      });
    },
    goToPay() {
    },
    toDetails(order_status) {
      NavgateTo(
        `/packages/myOrders/orderDetails/index?order_status=${order_status}`
      );
    },

    checkLogistics() {
      NavgateTo(`/packages/myOrders/logistics/index`);
    },

    orderEvaluate() {
      NavgateTo(`/packages/myOrders/orderEvaluate/index`);
    },

    getOrderStatus(order_status) {
      switch (order_status) {
        case 1:
          return "待付款";
        case 2:
          return "支付中";
        case 3:
          return "待发货";
        case 4:
          return "配送中";
        case 5:
          return "已完成";
        case 6:
          return "已取消";
        case 7:
          return "退款中";
        case 8:
          return "已退款";
      }
    },

    getOrderList() {
      request(apiArr.orderList, "POST", {
        user_id: uni.getStorageSync("userId"),
      }).then((res) => {
        const orderList = res.order_list || [];
        let filteredData = orderList;

        if (this.selectedTab !== 0) {
          const statusMap = {
            1: 1, // 待付款
            2: 3, // 待发货
            3: 4, // 配送中
            4: 5, // 已完成
          };
          const targetStatus = statusMap[this.selectedTab];
          if (targetStatus) {
            filteredData = orderList.filter(
              (item) => item.order_status === targetStatus
            );
          }
        }
        this.orderData = filteredData;
      });
    },
  },

  onLoad(options) {
    this.getOrderList();
  },
};
</script>
<style>
@import url("./index.css");
</style>