web-africa-h5/pages/order/myorder.vue

<template>
  <view>
    <u-navbar
      placeholder
      :title="$t('ENU_MENU_902')"
      :bgColor="'#FB3024'"
      titleStyle="color:#fff"
      leftIconColor="#fff"
      leftIcon="arrow-left"
      @leftClick="goBack"
    >
      <button class="nav-right-btn" slot="right" @click="openPop()">
        {{ $t("MY_ORD_50") }}
      </button>
    </u-navbar>
    <view class="top-tabbar">
      <view
        :class="state_active == -1 ? 'tab-item active' : 'tab-item'"
        @click="stateFunc(-1)"
        >{{ $t("w_0004") }}</view
      >
      <view
        v-for="(item, index) in orderStatus"
        :key="index"
        :class="state_active == item.value ? 'tab-item active' : 'tab-item'"
        @click="stateFunc(item.value)"
        >{{ $t("ENU_ORDER_S_" + item.value) }}
        <text v-if="item.value == 0">({{ orderCount.waitPayNum }})</text>
        <text v-if="item.value == 1">({{ orderCount.payNum }})</text>
      </view>
    </view>
    <view class="listdata-list">
      <view
        v-for="(item, index) in listData"
        :key="index"
        class="listdata-item"
      >
        <view class="border-b">
          <view class="d-b-c mb16">
            <text class="type-btn">{{ item.orderTypeVal }}</text>
            <view class="f24 gray9 flex-1">
              {{ $t("MY_ORD_1") }}:
              <text selectable>{{ item.orderCode }}</text>
            </view>
            <view class="status-btn">{{ item.orderStatusVal }}</view>
          </view>
          <view class="d-b-c">
            <!-- 单个商品 -->
            <template v-if="item.itemList && item.itemList.length == 1">
              <view>
                <view
                  class="d-s-c flex-1"
                  v-for="(items, indexs) in item.itemList"
                  :key="indexs"
                >
                  <image class="product-img" :src="items.cover" mode=""></image>
                  <view class="text-ellipsis f28 gray3" style="width: 220rpx">{{
                    items.productName
                  }}</view>
                </view>
              </view>
            </template>
            <!-- 多个商品 -->
            <template v-if="item.itemList && item.itemList.length > 1">
              <view class="d-c-c product-list ww100">
                <image
                  class="product-img"
                  :src="pitem.cover"
                  mode=""
                  v-for="(pitem, pindex) in item.itemList"
                  :key="pindex"
                ></image>
              </view>
            </template>
            <view class="d-c d-c-e">
              <view class="price-color f24">
                {{ currencyIcon() }}
                <text class="f32">{{ formatNum(item.orderAmount) }}</text>
              </view>
              <!-- <view class="gray6">x{{ item.itemList?item.itemList.length : '' }}</view> -->
            </view>
          </view>
          <view class="f24 gray9 mb20"
            >{{ $t("MY_ORD_3") }}:{{ item.creationTime }}</view
          >
          <view class="f24 gray9 mb20"
            >{{ $t("MN_F_T_140") }}:{{ item.deliveryWayVal }}</view
          >
        </view>
        <view class="d-e-c pt20">
          <view
            class="order-border-btn"
            v-if="item.orderStatus == 0"
            @click="cancelOrder(item.orderCode)"
            >{{ $t("ENU_APPROVE_B_234") }}</view
          >
          <!-- <view class="order-border-btn">备注</view> -->
          <!-- <view class="order-btn">修改地址</view> -->
          <view
            class="order-btn"
            v-if="item.orderStatus == 0 && item.isShowPayButton == 0"
            @click="
              gotoPage(
                '/pages/order/cashier?orderCode=' +
                  item.orderCode +
                  '&specialArea=' +
                  item.orderType +
                  '&pkSettleCountry=' +
                  item.pkCountry
              )
            "
          >
            {{ $t("w_0312") }}
          </view>
          <!-- <view class="order-btn" v-if="item.orderStatus == 3 || item.orderStatus == 5" @click="gotoPage('pages/order/express/express?orderCode=' + item.orderCode)">
						{{ $t('MY_ORD_19') }}
					</view> -->
          <view
            class="order-btn"
            v-if="item.orderStatus == 1 || item.orderStatus == 3"
            @click="confirmReceipt(item.orderCode)"
            >{{ $t("fn_018") }}</view
          >
          <view class="order-btn" @click="openDetail(item)">{{
            $t("MY_CK_18")
          }}</view>
        </view>
      </view>
    </view>
    <view class="d-c-c p30" v-if="listData.length == 0 && !loading">
      <text class="iconfont icon-wushuju"></text>
      <text class="cont">{{ $t("w_0405") }}</text>
    </view>
    <uni-load-more v-else :loadingType="loadingType"></uni-load-more>
    <!-- 筛选 -->
    <u-popup :show="showPop" mode="right" @close="closePop" @open="openPop">
      <view class="pop-content rightpop">
        <view class="pop-title d-b-c">
          <view class="f28 gray3">{{ $t("MY_ORD_50") }}</view>
          <view class="f28 domation" @click="closePop">{{
            $t("N_I_241")
          }}</view>
        </view>
        <view class="right-item-title">{{ $t("MY_ORD_1") }}</view>
        <view style="padding: 0 24rpx">
          <view class="search-box">
            <u-icon name="search" size="36rpx" color="#999"></u-icon>
            <input
              v-model="form.orderCode"
              class="search-input"
              type="text"
              value=""
              :placeholder="$t('S_C_70') + $t('MY_ORD_1')"
            />
          </view>
        </view>
        <view class="right-item-title">{{ $t("N_I_124") }}</view>
        <view style="padding: 0 24rpx">
          <view class="search-box">
            <u-icon name="search" size="36rpx" color="#999"></u-icon>
            <input
              v-model="form.memberCode"
              class="search-input"
              type="text"
              value=""
              :placeholder="$t('w_0046')"
            />
          </view>
        </view>
        <view class="right-item-title">{{ $t("MY_ORD_2") }}</view>
        <view class="checkbox-list">
          <view
            v-for="(item, index) in orderType"
            :key="index"
            class="checkbox-item"
            :class="{ active: form.orderType == item.value }"
            @click="bindStatus(item)"
          >
            {{ item.label }}
          </view>
        </view>
        <view class="right-item-title">{{ $t("MN_F_T_140") }}</view>
        <view class="checkbox-list">
          <view
            v-for="(item, index) in deliveryList"
            :key="index"
            class="checkbox-item"
            :class="{ active: form.deliveryWay == item.value }"
            @click="bindDeliveryWay(item)"
          >
            {{ item.label }}
          </view>
        </view>
        <view class="right-item-title">{{ $t("w_0352") }}</view>
        <view class="d-c-c">
          <picker
            mode="date"
            :value="date1"
            :start="creationTimeStart"
            :end="creationTimeEnd"
            @change="bindDateChange1"
          >
            <view class="data-input">{{
              form.creationTimeStart || $t("CK_KS_3")
            }}</view>
          </picker>
          <view
            style="
              width: 30rpx;
              height: 1rpx;
              background-color: #333;
              margin: 0 24rpx;
            "
          ></view>
          <picker
            mode="date"
            :value="date2"
            :start="creationTimeStart"
            :end="creationTimeEnd"
            @change="bindDateChange2"
          >
            <view class="data-input">{{
              form.creationTimeEnd || $t("MN_T_7")
            }}</view>
          </picker>
        </view>
        <view class="pop-btns">
          <view class="pop-left-btn" @click="resetSubmit()">{{
            $t("w_0257")
          }}</view>
          <view class="pop-right-btn" @click="searchSubmit()">{{
            $t("w_0035")
          }}</view>
        </view>
      </view>
    </u-popup>
    <Detail
      :detail="detailModel"
      :serchStatus="serchStatus"
      :isPop="isDetail"
      @close="closeDetail"
    ></Detail>
  </view>
</template>

<script>
import uniLoadMore from "@/components/uni-load-more.vue";
import Detail from "./detail.vue";
export default {
  components: {
    uniLoadMore,
    Detail,
  },
  data() {
    const currentDate = this.getDate({
      format: true,
    });
    return {
      /*最后一页码数*/
      last_page: 0,
      /*当前页面*/
      page: 1,
      /*每页条数*/
      list_rows: 10,
      /*有没有等多*/
      no_more: false,
      /*是否正在加载*/
      loading: true,
      listData: [],
      showPop: false,
      date1: "",
      date2: "",
      searchtype: 0,
      serchStatus: -1,
      form: {
        orderCode: "",
        memberCode: "",
        pageNum: 1,
        pageSize: 10,
        orderType: "",
        deliveryWay: "",
        orderStatus: "",
        creationTimeStart: "",
        creationTimeEnd: "",
      },
      total: 0,
      orderCount: {
        waitPayNum: 0,
        payNum: 0,
      },
      /*状态选中*/
      state_active: -1,
      orderType: [],
      deliveryList: [],
      isDetail: false,
      detailModel: null,
      orderStatus: [],
    };
  },
  onLoad(e) {
    this.form.orderStatus = e.dataType >= 0 ? e.dataType : -1;
    this.state_active = e.dataType >= 0 ? e.dataType : -1;
  },
  onShow() {
    this.getOrderStatus();
    this.getOrderTypeData();
    this.getDeliveryList();
    this.getOrderNumData();
    /*获取数据*/
    this.listData = [];
    this.form.pageNum = 1;
    this.getData();
  },
  onReachBottom() {
    let self = this;
    if (self.form.pageNum * self.form.pageSize < self.total) {
      self.form.pageNum++;
      self.getData();
    }
    self.no_more = true;
  },
  computed: {
    /*加载中状态*/
    loadingType() {
      if (this.loading) {
        return 1;
      } else {
        if (this.listData.length != 0 && this.no_more) {
          return 2;
        } else {
          return 0;
        }
      }
    },
    creationTimeStart() {
      return this.getDate("start");
    },
    creationTimeEnd() {
      return this.getDate("end");
    },
  },
  methods: {
    getOrderStatus() {
      let self = this;
      self._get("system/pub/enums/order-status-api", {}, (res) => {
        self.orderStatus = res.data;
      });
    },
    confirmReceipt(id) {
      let self = this;
      uni.showModal({
        title: "提示",
        content: this.$t("fn_048"),
        success(o) {
          if (o.confirm) {
            self._put("sale/api/my-order/confirm", id, (res) => {
              /*获取数据*/
              self.listData = [];
              self.form.pageNum = 1;
              self.getData();
              self.getOrderNumData();
              uni.showToast({
                title: res.msg,
                icon: "none",
              });
            });
          }
        },
      });
    },
    goBack() {
      uni.reLaunch({
        url: "/pages/user/index/index",
      });
    },
    closeDetail() {
      this.isDetail = false;
      this.detailModel = null;
    },
    openDetail(e) {
      this.detailModel = e;
      this.isDetail = true;
    },
    /*取消订单*/
    cancelOrder(e) {
      let self = this;
      let order_id = e;
      uni.showModal({
        title: self.$t("w_0034"),
        content: self.$t("MY_ORD_52"),
        success: function (o) {
          if (o.confirm) {
            uni.showLoading({
              title: self.$t("MN_F_6"),
            });
            self._delete("sale/api/my-order/cancel/" + e, {}, function (res) {
              /*获取数据*/
              self.listData = [];
              self.form.pageNum = 1;
              self.getData();
              self.getOrderNumData();
              uni.showToast({
                title: self.$t("MY_ORD_53"),
                duration: 2000,
                icon: "success",
              });
            });
          }
        },
      });
    },
    /*状态切换*/
    stateFunc(e) {
      let self = this;
      if (self.state_active != e) {
        /*获取数据*/
        self.listData = [];
        self.form.pageNum = 1;
        self.loading = true;
        self.state_active = e;
        if (e == -1) {
          self.form.orderStatus = "";
        } else {
          self.form.orderStatus = e;
        }
        self.getData();
      }
    },
    getOrderNumData() {
      let self = this;
      self.loading = true;
      self._get(
        "sale/api/my-order/num",
        {},
        function (res) {
          self.orderCount = res.data;
        },
        {},
        () => {
          self.loading = false;
        }
      );
    },
    getDeliveryList() {
      let self = this;
      self.loading = true;
      self._get(
        "system/pub/enums/delivery-list",
        {},
        function (res) {
          self.deliveryList = res.data;
        },
        {},
        () => {
          self.loading = false;
        }
      );
    },
    getOrderTypeData() {
      let self = this;
      self.loading = true;
      self._get(
        "sale/api/my-order/order-type",
        {},
        function (res) {
          self.orderType = res.data;
        },
        {},
        () => {
          self.loading = false;
        }
      );
    },
    closePop() {
      this.showPop = false;
    },
    openPop() {
      this.showPop = true;
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
    bindDateChange1: function (e) {
      this.form.creationTimeStart = e.detail.value;
    },
    bindDateChange2: function (e) {
      this.form.creationTimeEnd = e.detail.value;
    },
    getData() {
      // return;
      let self = this;
      self.loading = true;
      var formdata = self.form;
      if (formdata.orderStatus == -1) {
        formdata.orderStatus = "";
      }

      self._get("sale/api/my-order/list", formdata, function (res) {
        self.loading = false;
        self.listData = self.listData.concat(res.rows);

        self.total = res.total;
        if (self.total < self.form.pageNum * self.form.pageSize) {
          self.no_more = true;
        }
      });
    },
    searchName: function () {
      /*获取数据*/
      this.listData = [];
      this.form.pageNum = 1;
      this.getData();
    },
    bindStatus: function (e) {
      console.log(e);
      this.form.orderType = e.value;
      // console.log(e);
    },
    bindDeliveryWay: function (e) {
      console.log(e);
      this.form.deliveryWay = e.value;
      // console.log(e);
    },
    resetSubmit: function () {
      this.form.orderCode = "";
      this.form.memberCode = "";
      this.form.orderType = "";
      this.form.deliveryWay = "";
      this.form.orderStatus = "";
      this.form.creationTimeStart = "";
      this.form.creationTimeEnd = "";
      this.searchSubmit();
    },
    searchSubmit: function () {
      this.showPop = false;
      /*获取数据*/
      this.listData = [];
      this.form.pageNum = 1;
      this.getData();
    },
  },
};
</script>

<style lang="scss">
.top-box {
  width: 750rpx;
  padding: 0 30rpx 0 23rpx;
  box-sizing: border-box;
  height: 102rpx;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 24rpx;
}

.search-box {
  flex: 1;
  height: 65rpx;
  background: #f5f6f8;
  border-radius: 33rpx;
  padding: 0 52rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;

  .search-input {
    font-size: 26rpx;
    color: #333;
    margin-left: 14rpx;
    flex: 1;
  }
}

.top-tabbar {
  height: 94rpx;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.tab-item {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #666;
}

.tab-item.active {
  font-size: 28rpx;
  color: #333;
}

.tab-item.active::after {
  width: 52rpx;
  height: 6rpx;
  background: #fb3024;
  border-radius: 3rpx;
  bottom: 0;
}

.listdata-item {
  // height: 370rpx;
  padding: 27rpx 23rpx 22rpx 25rpx;
  background: #ffffff;
  margin-bottom: 22rpx;
}

.type-btn {
  line-height: 30rpx;
  height: 30rpx;
  background: #3d3d3d;
  border-radius: 15rpx;
  padding: 0 23rpx;
  font-size: 20rpx;
  color: #ffffff;
  margin-right: 6rpx;
}

.status-btn {
  font-size: 24rpx;
  color: #333333;
  margin-left: 20rpx;
}

.product-img {
  width: 124rpx;
  height: 124rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
  display: block;
  border: 15rpx;
  margin-bottom: 24rpx;
}

.product-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-right: 20rpx;
}

.order-border-btn {
  box-sizing: border-box;
  padding: 0 26rpx;
  min-width: 146rpx;
  height: 52rpx;
  line-height: 52rpx;
  text-align: center;
  border-radius: 26rpx;
  font-size: 24rpx;
  color: #999;
  border: 1rpx solid #eee;
  margin-left: 18rpx;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.order-btn {
  box-sizing: border-box;
  padding: 0 26rpx;
  min-width: 146rpx;
  height: 52rpx;
  line-height: 52rpx;
  text-align: center;
  border-radius: 26rpx;
  font-size: 24rpx;
  color: #fff;
  border: 1rpx solid #eee;
  margin-left: 18rpx;
  background: #fb3024;
  border: 1rpx solid #fb3024;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-right-btn {
  background: none;
  color: #fff;
  font-size: 28rpx;
}
.rightpop.pop-content {
  padding-top: 0;
}
</style>