wx-qhb/pageC/orderForm/orderForm.vue

<template>
  <view>
    <u-navbar @leftClick="rightClick" bgColor="#f4f4f4" :autoBack="true">
      <view class="tab" slot="center">
        <view style="width: 600rpx">
          <input type="text" placeholder="搜索我的订单" class="inp" />
        </view>
      </view>
    </u-navbar>
    <view class="content">
      <view class="top-tab">
        <view
          :class="{ commodity: follow == '' }"
          class="tab"
          @click="tabSwitch('')"
        >
          全部
        </view>
        <view
          :class="{ commodity: follow == 'unpaid' }"
          class="tab"
          @click="tabSwitch('unpaid')"
        >
          待付款
        </view>
        <view
          :class="{ commodity: follow == 'unreview' }"
          class="tab"
          @click="tabSwitch('unreview')"
        >
          拼团中
        </view>
        <view
          :class="{ commodity: follow == 'undelivered' }"
          class="tab"
          @click="tabSwitch('undelivered')"
        >
          待发货
        </view>
        <view
          :class="{ commodity: follow == 'delivered' }"
          class="tab"
          @click="tabSwitch('delivered')"
        >
          待收货
        </view>
        <view
          :class="{ commodity: follow == 'finished' }"
          class="tab"
          @click="tabSwitch('finished')"
        >
          已完成
        </view>
        <view
          :class="{ commodity: follow == 'refund' }"
          class="tab"
          @click="tabSwitch('refund')"
        >
          退款/售后
        </view>
      </view>
      <view v-for="(item, index) in orderList" :key="index">
        <view v-if="follow != 'refund'">
          <OrderInofrmation
            :itemInfo="item"
            @toDetail="toDetail"
            @cancellationOrder="cancellationOrder"
            @confirm="confirm"
            @toPay="toPay"
            @toEvaluate="toEvaluate"
          />
        </view>
        <view v-else>
          <RefundCard
            :itemInfo="item"
            :refundDetail="refundDetail"
            @toRefundDetail="toRefundDetail"
          />
        </view>
      </view>
    </view>
    <AgreePopup :agreeShow="agreeShow" @close="close" :title="title" />
  </view>
</template>

<script>
import OrderInofrmation from "./component/orderInofrmation.vue";
import RefundCard from "./component/refundCard.vue";
import AgreePopup from "../mineComponent/agreePopup.vue";
export default {
  components: {
    OrderInofrmation,
    RefundCard,
    AgreePopup,
  },
  data() {
    return {
      orderList: [],
      follow: "",
      refundDetail: {
        status: 1,
      },
      page: 1,
      total: 0,
      status: "",
      agreeShow: false,
      title: "",
      cancellation: {},
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  onLoad(option) {
    this.follow = option.followId;
  },
  methods: {
    rightClick() {
      console.log(111);
    },
    //切换搜索订单状态
    tabSwitch(num) {
      this.page = 1;
      this.follow = num;
      this.getOrderList(1);
    },
    //跳转订单详情
    toDetail(value) {
      uni.navigateTo({
        url: `/pageC/orderFormDetail/orderFormDetail?orderId=${value.order.id}`,
      });
    },

    //跳转评价
    toEvaluate(value) {
      uni.navigateTo({
        url: `/pageD/evaluate/evaluate?orderId=${value.order.id}`,
      });
    },
    //确认收货
    confirm(value) {
      this.agreeShow = true;
      this.title = "是否确认收货";
      this.cancellation = value;
    },

    //跳转支付
    toPay(value) {
      uni.navigateTo({
        url: `/pageA/payorder?sum=${value.order.amount}&orderid=${value.order.id}`,
      });
    },

    //关闭确认弹窗
    close(value) {
      this.agreeShow = false;
      if (value) {
        if (this.title == "是否确认取消订单") {
          uni.$u.http
            .post(`/api/order/cancel/${this.cancellation.order.id}`)
            .then((res) => {
              uni.showToast({
                title: "订单已取消",
                icon: "none",
              });
              this.getOrderList(1);
            });
        } else if (this.title == "是否确认收货") {
          uni.$u.http
            .post(`/api/order/receive/${this.cancellation.order.id}`)
            .then((res) => {
              uni.showToast({
                title: "订单已收货",
                icon: "none",
              });
              this.getOrderList(1);
            });
        }
      }
    },

    //取消订单
    cancellationOrder(item) {
      this.agreeShow = true;
      this.cancellation = item;
      this.title = "是否确认取消订单";
      // uni.$u.http.post(`/api/order/cancel/${item.order.id}`).then((res) => {
      //   console.log(res);
      // });
    },

    //售后订单详情
    toRefundDetail(value) {
      uni.navigateTo({
        url: `/pageC/refundDetail/refundDetail?orderId=${value.refund.id}`,
      });
    },

    getOrderList(value) {
      uni.$u.http
        .get(
          `/api/order/order_list?status=${this.follow}&page=${this.page}&limit=10`
        )
        .then((res) => {
          //确定是触底还是点击tab栏
          if (value) {
            this.orderList = res.data;
          } else {
            if (this.orderList.length == 0) {
              this.orderList = res.data;
            } else {
              this.orderList = this.orderList.concat(res.data);
            }
          }
          this.total = res.total;
        });
    },
  },
  onReachBottom() {
    //商品总数量小于当前获取到的商品数量
    if (this.total > this.orderList.length) {
      this.page++;
      this.getOrderList(0);
    }
  },
  mounted() {
    this.getOrderList(0);
  },
};
</script>

<style lang="scss" scoped>
.inp {
  background-color: #fff;
  border-radius: 40rpx;
  width: 402rpx;
  padding: 0 20rpx;
  height: 68rpx;
}

.content {
  padding: 0 24rpx 50rpx;
}

.top-tab {
  margin-top: 180rpx;
  display: flex;
  justify-content: space-between;
  overflow-y: auto;
  // flex-shrink: 1;
  width: 100vw;

  .tab {
    margin-right: 40rpx;
    font-size: 26rpx;
    color: rgba(34, 34, 34, 0.8);
    flex-shrink: 0;
    height: 44rpx;
    display: flex;
    align-items: flex-end;
  }

  .commodity {
    position: relative;
    font-weight: 600;
    font-size: 32rpx;
  }

  .commodity::before {
    content: "";
    display: block;
    height: 8rpx;
    width: 100%;
    background: linear-gradient(to right, #f83224, #fff);
    position: absolute;
    bottom: 5rpx;
    opacity: 0.8;
  }
}
</style>