zsw-jx-store/src/pages/order-manager/main.vue

<template>
  <!-- 联系运营 -->
  <image
    class="icon-phone"
    src="https://image.jxc4.com/image/dd78fd0b128be86e681f376e794f8309.png"
    mode="scaleToFill"
    @tap="getPhone"
    @touchmove.stop.prevent="touchM($event, 1)"
    @touchstart="touchS()"
    @touchend="touchE($event, 1)"
  />

  <!-- 当前门店是否休息 -->
  <view
    v-if="!isStatu"
    class="open-status-msg"
    @touchmove.prevent="touchM($event, 2)"
    @touchstart.prevent="touchS()"
    @touchend.prevent="touchE($event, 2)"
    ><text>本店</text><text>已休息</text></view
  >
  <view
    v-else-if="!isRest"
    class="open-status-msg open-to-booking"
    @touchmove.prevent="touchM($event, 2)"
    @touchstart.prevent="touchS()"
    @touchend.prevent="touchE($event, 2)"
    ><text>接受</text><text>预订单</text></view
  >

  <!-- tab -->
  <view class="jx-tabs-root">
    <jx-tab ref="tabInfo" @jxTab="jxTabClick"></jx-tab>

    <!-- 售后单，已完成 -->
    <template v-if="orderState == 6 || orderState == 7">
      <view class="filter-root">
        <text class="btn" @tap="orderFilterRef.openRef()">更多条件</text>
        <uni-search-bar
          v-model="keyword"
          @confirm="searchStore(keyword)"
          @clear="clearIpt"
          cancelButton="none"
          clearButton="auto"
          @input="changeIpt(keyword)"
          :placeholder="
            orderState == 6 ? '搜索售后单号、订单号、电话' : '搜索订单、电话等'
          "
        />
      </view>
    </template>

    <!-- 待配送筛选 -->
    <template v-if="orderState == 3">
      <view class="filter-order">
        <view :class="{ active: active == 0 }" @tap="distributionStatu(0)"
          >全&emsp;部</view
        >
        <view :class="{ active: active == 1 }" @tap="distributionStatu(1)"
          >未抢单</view
        >
        <view :class="{ active: active == 2 }" @tap="distributionStatu(2)"
          >已抢单</view
        >
      </view>
    </template>
  </view>

  <!-- 列表内容 -->
  <scroll-view
    class="order-item-main"
    scroll-y
    :style="{ height: `calc(100vh - ${scorllHeight})` }"
    refresher-enabled
    :refresher-triggered="triggered"
    @refresherrefresh="refresherrefresh"
    refresher-background="#efefef"
    @scrolltolower="scrolltolower"
  >
    <!-- 待接单 -->
    <template v-if="orderState == 1 && totalCount != 0">
      <pending-order
        v-for="item in orderDataList"
        :key="item.id"
        :item="item"
      />
    </template>

    <!-- 待拣货 -->
    <template v-if="orderState == 2 && totalCount != 0">
      <pending-picking
        v-for="item in orderDataList"
        :key="item.id"
        :item="item"
      />
    </template>

    <!-- 待配送 -->
    <template v-if="orderState == 3 && totalCount != 0">
      <view v-for="item in orderDataList" :key="item.id">
        <pending-distribution
          v-if="
            active === 0 ||
            (active === 1 && item.waybillStatus < 10) ||
            (active === 2 && item.waybillStatus >= 10 && item.lockStatus !== -5)
          "
          :item="item"
          :type="1"
        />
      </view>
      <jx-load-more
        v-show="totalCount >= 2 && active === 0"
        :isLoad="isLoad"
        marginTop="25rpx"
      />
    </template>

    <!-- 配送中 -->
    <template v-if="orderState == 4 && totalCount != 0">
      <pending-distribution
        v-for="item in orderDataList"
        :key="item.id"
        :item="item"
        :type="0"
      />
    </template>

    <!-- 异常单 -->
    <template v-if="orderState == 5 && totalCount != 0">
      <view v-for="item in orderDataList" :key="item.id">
        <abnormal-order
          v-if="
            item.lockStatus === -5 ||
            ((item.status === 17 || item.status === 18) &&
              item.lockStatus !== -5) ||
            (item.status === 22 && item.lockStatus !== -5)
          "
          :item="item"
        />
        <jx-empty title="暂无异常订单" v-else />
      </view>
    </template>

    <!-- 售后单 -->
    <template v-if="orderState == 6 && totalCount != 0">
      <after-sales-order
        v-for="item in orderDataList"
        :key="item.id"
        :item="item"
      ></after-sales-order>
    </template>

    <!-- 已完成 -->
    <template v-if="orderState == 7 && totalCount != 0">
      <completed
        v-for="item in orderDataList"
        :key="item.id"
        :item="item"
      ></completed>
    </template>

    <!-- 加载更多 -->
    <jx-load-more
      v-show="totalCount >= 2 && orderState != 3 && orderState != 5"
      :isLoad="isLoad"
      marginTop="25rpx"
    />

    <!-- 空状态 -->
    <jx-empty title="暂无订单信息" v-show="totalCount == 0" />
  </scroll-view>

  <!-- 切换筛选条件 -->
  <order-filter
    @filter-data="filterData"
    ref="orderFilterRef"
    :orderState="orderState"
    :orderStateInfo="orderStateInfo"
  />

  <!-- 公共组件 -->
  <jx-login-empty title="马上登录，查看订单" />
  <jx-loading />
</template>

<script lang="ts" setup>
import jxTab from './childPages/jx-tab/jx-tab.vue' // 待拣货
import pendingOrder from './childPages/pending-order/pending-order.vue' // 待拣货
import pendingPicking from './childPages/pending-picking/pending-picking.vue' // 待配送
import pendingDistribution from './childPages/pending-distribution/pending-distribution.vue' // 配送中
import afterSalesOrder from './childPages/after-sales-order/after-sales-order.vue' // 售后单
import completed from './childPages/completed/completed.vue'
import orderFilter from './childPages/order-filter/order-filter.vue'
import abnormalOrder from './childPages/abnormal-order/abnormal-order.vue'
import orderInfoFn from './main'
import { ref } from 'vue'
import { jx_throttles } from '@/utils/tools'
const {
  jxTabClick,                 // 导航栏单击事件
  orderDataList,              // 订单数据
  totalCount,                 // 订单条数
  orderState,                 // 订单列表判断条件
  orderStateInfo,             // 订单列表信息
  tabInfo,                    // 导航栏实例
  searchStore,                // 输入库条件筛选
  keyword,                    // 输入库内容
  changeIpt,                  // 输入款输入变化
  clearIpt,                   // 清空输入框
  scorllHeight,               // 动态计算scorll-view高度
  active,                     // 待配送筛选高亮
  orderFilterRef,             // 筛选条件实例对象
  filterData,                 // 筛选条件数据
  refresherrefresh,           // 下拉刷新
  triggered,                  // 刷新状态
  scrolltolower,              // 页面触底
  isLoad,                     // 触底加载
  distributionStatu,          // 配送筛选
  isRest,                     // 是否显示休息状态
  isStatu,                    // 门店营业状态
} = orderInfoFn()
/**
 * 联系运营页面跳转
 */
function getPhone() {
  uni.navigateTo({ url: '/subPages/orderChild/getPhone/getPhone' })
}

/*************************************************
 * 开始触摸运营
 */
const isAnmarion = ref<string>('0s')
let windowW = 0
let windowH = 0
function touchS() {
  isAnmarion.value = '0s'
  windowW = 0
  windowH = 0
  let sysTem = uni.getSystemInfoSync()
  windowW = sysTem.windowWidth
  windowH = sysTem.windowHeight
}

/*************************************************
 * 移动联系运营
 */
const pageX1 = ref<string>('20rpx')
const pageY1 = ref<string>('450rpx')
const pageX2 = ref<string>('20rpx')
const pageY2 = ref<string>('300rpx')
function touchM(e: AnyObject, type: number) {
  touchMThrottles(e, type)
}
const touchMThrottles = jx_throttles({
  time: 5,
  success(e: AnyObject, type: number) {
    let sysTem = e.changedTouches[0]
    if (type == 1) {
      pageX1.value = sysTem.clientX - 25 + 'px'
      pageY1.value = sysTem.clientY - 25 + 'px'
    }

    if (type == 2) {
      pageX2.value = sysTem.clientX - 25 + 'px'
      pageY2.value = sysTem.clientY - 25 + 'px'
    }
  },
})

/*************************************************
 * 触摸运营结束
 */
function touchE(e: AnyObject, type: number) {
  isAnmarion.value = '0.5s'
  let sysTem = e.target
  if (type == 1) {
    if (sysTem.offsetLeft <= 0 || sysTem.offsetLeft <= windowW / 2 - 25) {
      pageX1.value = '10px'
    }
    if (sysTem.offsetLeft >= windowW || sysTem.offsetLeft >= windowW / 2 - 25) {
      pageX1.value = windowW - 60 + 'px'
    }
    if (sysTem.offsetTop <= 50) {
      pageY1.value = '50px'
    }
    if (sysTem.offsetTop >= windowH - 100) {
      pageY1.value = windowH - 60 + 'px'
    }
  }

  if (type == 2) {
    let pageX = parseInt(pageX2.value)
    let pageY = parseInt(pageY2.value)
    if (pageX <= 0 || pageX <= windowW / 2 - 25) {
      pageX2.value = '10px'
    }
    if (pageX >= windowW || pageX >= windowW / 2 - 25) {
      pageX2.value = windowW - 60 + 'px'
    }
    if (pageY <= 50) {
      pageY2.value = '50px'
    }
    if (pageY >= windowH - 100) {
      pageY2.value = windowH - 60 + 'px'
    }
  }
}
</script>

<style lang="scss" scoped>
.open-status-msg {
  position: absolute;
  z-index: 99999999999;
  left: v-bind(pageX2);
  top: v-bind(pageY2);
  width: 50px;
  height: 50px;
  font-size: 10px;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  background: rgba(116, 116, 116, 0.75);
  text-shadow: 1rpx 1rpx 2rpx #eb6100;
  transition: all v-bind(isAnmarion);

  text {
    display: inline-block;
  }
}

.open-to-booking {
  text-shadow: 2rpx 2rpx 2rpx $jx-warring;
}

.icon-phone {
  position: absolute;
  z-index: 99999999999;
  left: v-bind(pageX1);
  top: v-bind(pageY1);
  width: 50px;
  height: 50px;
  transition: all v-bind(isAnmarion);
}
.filter-root {
  box-sizing: border-box;
  height: 90rpx;
  padding: 15rpx;
  background-color: #fff;
  display: flex;
  align-items: center;

  .btn {
    padding: 8rpx 0;
    width: 160rpx;
    text-align: center;
    background-color: $jx-primary;
    color: #fff;
    font-size: 28rpx;
    border-radius: 100rpx;
    margin-right: 15rpx;
  }

  :deep(.uni-searchbar) {
    padding: 0 !important;
    width: 545rpx !important;

    .uni-searchbar__box {
      border-radius: 100rpx !important;
      height: auto !important;
    }
  }
}
</style>
<style lang="scss">
page {
  position: relative;
  background-color: #efefef;
  width: 100%;
  height: 100%;
}

.self-order {
  width: 100%;
  text-align: center;
  color: #ff0000;
  font-weight: bold;
  padding-bottom: 20rpx;
  font-size: 28rpx;
}

.btn-picked {
  background: $jx-primary;
  color: white;
  border-radius: 10rpx;
  font-size: 36rpx;
  font-weight: 400;
  height: 94rpx;
  line-height: 94rpx;
  text-align: center;
  margin: 0rpx 20rpx;
  margin-top: 15rpx;
}

.jx-tabs-root {
  position: sticky;
  top: 0;
  box-shadow: 0 5rpx 7rpx #ececec;
}

.filter-order {
  height: 90rpx;
  box-sizing: border-box;
  padding: 15rpx;
  display: flex;
  justify-content: space-between;
  background-color: #fff;

  view {
    box-sizing: border-box;
    width: 230rpx;
    padding: 10rpx 20rpx;
    border: 1rpx solid #999999;
    color: #999999;
    border-radius: 10rpx;
    text-align: center;
  }

  .active {
    background-color: #82c86f;
    border: 1rpx solid #82c86f;
    color: #fff;
  }
}
.order-item-main {
  box-sizing: border-box;
}
</style>