jsm-mall-h5-front/src/packageMaterial/pages/sale/orderList.vue

<template>
  <zj-page-layout
    :isScroll="true"
    :hasFooter="true"
    :refresherTriggered="refresherTriggered"
    @refresherrefresh="refresherrefresh"
    @scrolltolower="scrolltolower"
  >
    <template slot="header">
      <view class="tab-container">
        <u-tabs
          :scrollable="false"
          :list="tabList"
          :current="tabCurrent"
          @click="changeTab"
          lineColor="#3D8FFD"
          :activeStyle="{
            color: '#3D8FFD'
          }"
          :inactiveStyle="{
            color: '#666666'
          }"
          itemStyle="padding-left: 0; padding-right: 0; height: 88rpx;"
        >
        </u-tabs>
      </view>
      <view class="screen-container">
        <!-- <u-tabs
      		:scrollable="true"
      		:list="salesTypeList"
      		:current="salesTypeCurrent"
      		@click="changeSalesType"
      		lineColor="#3D8FFD"
      		:activeStyle="{
      			color: '#3D8FFD'
      		}"
      		:inactiveStyle="{
      			color: '#666666'
      		}"
      		itemStyle="height: 88rpx;">
      	</u-tabs> -->
        <view></view>
        <view class="date" @tap="isShowDatePicker = true">
          <view class="text">{{ date || '请选择月份' }}</view>
          <u-icon name="arrow-down" size="12"></u-icon>
        </view>
      </view>
    </template>

    <view class="list-container">
      <view class="item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item)">
        <view class="row top">
          <view class="label">制单时间</view>
          <view class="value">{{ item.createTime }}</view>
          <view class="status" v-if="item.refundStatus == 'YES'">已退款</view>
          <view class="status" v-else>{{ item.payStatus | statusFilter }}</view>
        </view>
        <view class="row">
          <view class="label">订单单号</view>
          <view class="value">{{ item.orderId }}</view>
          <view class="tag">{{ item.goodsType == 'M' ? '辅材' : '配件' }}</view>
        </view>
        <view class="row">
          <view class="label">关联工单</view>
          <view class="value">{{ item.workerOrderId }}</view>
        </view>
        <view class="row">
          <view class="label">客户电话</view>
          <view class="value">{{ item.userMobile }}</view>
        </view>
        <!-- <view class="row">
          <view class="label">销售方式</view>
          <view class="value">{{ item.settlementType | salesTypeFilter }}</view>
        </view> -->
        <view class="row">
          <view class="label">产品数量</view>
          <view class="value">{{ item.num }}</view>
        </view>
        <view class="row">
          <view class="label">订单金额</view>
          <view class="value price">{{ item.totalAmount | priceFilter }}元</view>
        </view>
        <view class="btns" v-if="item.payStatus == 'WAIT'" @tap.stop>
          <u-button text="取消订单" @click="cancelOrder(item)"></u-button>
          <u-button
            text="去收款"
            type="primary"
            @click="
              () => {
                $navToPage({
                  url: `/packageMaterial/pages/sale/pay?handleOrderId=${item.orderId}`
                })
              }
            "
          ></u-button>
        </view>
      </view>
    </view>
    <Loading :loadStatus="loadStatus" :dataList="dataList" />

    <u-datetime-picker
      :show="isShowDatePicker"
      v-model="datePickerValue"
      mode="year-month"
      cancelText="重置"
      closeOnClickOverlay
      @cancel="resetDate"
      @close="isShowDatePicker = false"
      @confirm="confirmDate"
    ></u-datetime-picker>

    <template slot="footer">
      <view class="bottom-container" style="box-sizing: border-box; padding: 20rpx">
        <u-button
          text="创建辅材收款"
          type="primary"
          @click="
            () => {
              $navToPage({
                url: `/packageMaterial/pages/sale/index?type=M&oid=${oid}`
              })
            }
          "
        >
        </u-button>
      </view>
    </template>
  </zj-page-layout>
</template>

<script>
export default {
  filters: {
    statusFilter(val) {
      const MAP = {
        WAIT: '待支付',
        PAID: '已支付',
        CANCEL: '已取消'
      }
      return MAP[val]
    },
    salesTypeFilter(val) {
      const MAP = {
        OWN: '自有出库',
        OUT: '外购销售'
      }
      return MAP[val]
    }
  },

  data() {
    return {
      type: 'M',
      dataList: [],
      pageNum: 1,
      loadStatus: 0,
      refresherTriggered: false,
      tabList: [
        { name: '全部', value: '', badge: { value: 0 } },
        { name: '待支付', value: 'WAIT', badge: { value: 0 } },
        { name: '已支付', value: 'PAID', badge: { value: 0 } },
        { name: '已取消', value: 'CANCEL', badge: { value: 0 } }
      ],
      tabCurrent: 0,
      status: '',
      salesTypeList: [
        { name: '全部', value: '' },
        { name: '自有仓库', value: 'OWN' },
        { name: '外购销售', value: 'OUT' }
      ],
      salesTypeCurrent: 0,
      salesType: '',
      isShowDatePicker: false,
      datePickerValue: Number(new Date()),
      date: '',
      oid: ''
    }
  },

  onLoad({ type, oid, tabCurrent }) {
    if (oid) {
      this.oid = oid
    }
    if (tabCurrent) {
      this.tabCurrent = Number(tabCurrent)
      this.status = this.tabList?.[this.tabCurrent]?.value
    }
    this.type = type
    this.getList()
  },

  methods: {
    getCount() {
      this.$api
        .post('/pay/orderCount', {
          orderId: this.oid,
          goodsType: this.type
        })
        .then(res => {
          if (!res.data) return false
          this.tabList[0].badge.value = res.data.qb || 0
          this.tabList[1].badge.value = res.data.dzf || 0
          this.tabList[2].badge.value = res.data.yzf || 0
          this.tabList[3].badge.value = res.data.yqx || 0
        })
    },

    getList() {
      this.loadStatus = 1
      this.$api
        .post('/pay/orderPage', {
          orderId: this.oid,
          pageNum: this.pageNum,
          pageSize: 10,
          payStatus: this.status,
          yearMonth: this.date,
          goodsType: this.type,
          settlementType: this.salesType
        })
        .then(res => {
          this.getCount()
          this.loadStatus = 0
          let list = res.data.records
          if (list.length < 10) {
            this.loadStatus = 2
          }
          this.dataList = this.dataList.concat(list)
        })
        .catch(() => {
          this.loadStatus = 2
        })
        .finally(res => {
          this.refresherTriggered = false
        })
    },

    changeTab(e) {
      this.tabCurrent = e.index
      this.status = e.value
      this.refreshList()
    },

    changeSalesType(e) {
      this.salesTypeCurrent = e.index
      this.salesType = e.value
      this.refreshList()
    },

    resetDate() {
      this.isShowDatePicker = false
      this.date = ''
      this.refreshList()
    },

    confirmDate(e) {
      this.isShowDatePicker = false
      let time = new Date(e.value)
      let y = time.getFullYear()
      let m = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1
      this.date = `${y}-${m}`
      this.refreshList()
    },

    refreshList() {
      this.dataList = []
      this.pageNum = 1
      this.getList()
    },

    // 滚动到底部
    scrolltolower(e) {
      if (this.loadStatus === 0) {
        this.pageNum++
        this.getList()
      }
    },

    // 触发下拉刷新
    refresherrefresh(e) {
      this.refresherTriggered = true
      this.getCount()
      this.refreshList()
    },

    toDetail(item) {
      this.$navToPage({
        url: `/packageMaterial/pages/sale/orderDetail?id=${item.orderId}`
      })
    },

    // 取消订单
    cancelOrder(item) {
      this.$modal({
        content: '确认取消订单吗？'
      })
        .then(() => {
          this.$api
            .post('/pay/cancel', {
              orderId: item.orderId
            })
            .then(res => {
              this.$successToast()
              this.getCount()
              this.refreshList()
            })
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-container {
  background: #ffffff;
}
.screen-container {
  margin-top: 1px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  ::v-deep .u-tabs {
    flex: 1;
  }
  .date {
    width: 240rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 40rpx;
    padding: 0 12rpx 0 20rpx;
    border: 1px solid #eaeaea;
    border-radius: 8rpx;
    height: 52rpx;
    .text {
      font-size: 28rpx;
    }
  }
}

.list-container {
  padding: 0 20rpx;
  .item {
    @include zj-card;
    margin-top: 20rpx;
    padding: 30rpx;
    .row {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      &:first-child {
        margin-top: 0;
      }
      .label {
        font-size: 28rpx;
        color: $sec-font;
        margin-right: 20rpx;
      }
      .value {
        flex: 1;
        max-width: 400rpx;
        display: inline-block;
        font-size: 28rpx;
        word-wrap: break-word;
        word-break: normal;
        text {
          color: $minor-color;
        }
        &.price {
          color: $theme-color;
        }
      }
      .tag {
        flex: 1;
        text-align: right;
        font-size: 28rpx;
        color: $theme-color;
      }
      &.top {
        .label {
          color: $main-font;
          font-weight: 500;
        }
        .status {
          flex: 1;
          text-align: right;
          font-size: 28rpx;
          color: $warning-color;
        }
        .value {
          font-weight: 500;
          flex: 1;
          max-width: 400rpx;
          min-width: 300rpx;
          display: inline-block;
          word-wrap: break-word;
          word-break: normal;
          font-weight: 500;
        }
      }
    }
    .btns {
      display: flex;
      justify-content: flex-end;
      margin-top: 30rpx;
      ::v-deep .u-button {
        width: 200rpx;
        margin: 0;
        margin-left: 20rpx;
      }
    }
  }
}
</style>