wx-qhb/pageD/orderFormManage/orderFormManage.vue

<template>
  <view class="page">
    <view class="tab-1" slot="center">
      <u--input
        style="background-color: #f4f4f4"
        placeholder="搜索订单号/手机号/商品/姓名"
        shape="circle"
        v-model="keywords"
        prefixIcon="search"
        @change="getGoodsList"
        prefixIconStyle="font-size: 22px;color: #909399"
      ></u--input>
      <view class="top-tab">
        <view
          :class="{ commodity: follow == '' }"
          class="tab"
          @click="tabSwitch('')"
        >
          全部
        </view>
        <view
          :class="{ commodity: follow == 'unreview' }"
          class="tab"
          @click="tabSwitch('unreview')"
        >
          待审核
        </view>
        <view
          :class="{ commodity: follow == 'unfill' }"
          class="tab"
          @click="tabSwitch('unfill')"
        >
          待缴纳保证金
        </view>
        <view
          :class="{ commodity: follow == 'merdelivered' }"
          class="tab"
          @click="tabSwitch('merdelivered')"
        >
          待团长发货
        </view>
        <view
          :class="{ commodity: follow == 'undelivered' }"
          class="tab"
          @click="tabSwitch('undelivered')"
        >
          待总部发货
        </view>
        <view
          :class="{ commodity: follow == 'delivered' }"
          class="tab"
          @click="tabSwitch('delivered')"
        >
          已发货
        </view>
      </view>
    </view>
    <view class="center">
      <view v-for="item in orderList" :key="item.status">
        <DetailCard :itemInfo="item" @toInformation="toInformation" />
      </view>
    </view>
    <Remark :show="remarkShow" @remarkClose="remarkClose" />
  </view>
</template>

<script>
import DetailCard from "./component/detailCard.vue";
import Remark from "../components/remark.vue";
export default {
  components: {
    DetailCard,
    Remark,
  },
  data() {
    return {
      follow: "",
      orderList: [],
      page: 1,
      remarkShow: false,
      keywords: "",
    };
  },
  onShow() {
    this.getGoodsList();
  },
  methods: {
    tabSwitch(num) {
      this.follow = num;
      this.getGoodsList();
    },

    //关闭备注弹框
    remarkClose(value) {
      this.remarkShow = false;
      console.log(this.remarkShow);
      //没有接口，有接口再补充
      if (value) {
      }
    },

    toInformation(item) {
      if (item.status == "unreview") return;
      uni.navigateTo({
        url: `/pageD/orderDetail/orderDetail?orderStatus=${item.id}&status=${item.status}`,
      });
    },
    //获取订单列表
    getGoodsList() {
      uni.$u.http
        .post(`/api/order/merchant_order`, {
          page: this.page,
          limit: 10,
          status: this.follow,
          keywords: this.keywords,
        })
        .then((res) => {
          this.orderList = res.data;
        });
    },
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: "订单管理",
    });
  },
};
</script>

<style scoped lang="scss">
.page {
  .tab-1 {
    padding: 0 24rpx;
    background-color: #fff;

    ::v-deep .u-input {
      background-color: #f4f4f4;
    }

    .top-tab {
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      overflow-y: auto;
      padding-bottom: 10rpx;
      // 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;
      }
    }
  }

  .center {
    padding: 20rpx 24rpx;
  }
}
</style>