'!'
This commit is contained in:
439
src/pages/order-manager/main.vue
Normal file
439
src/pages/order-manager/main.vue
Normal file
@@ -0,0 +1,439 @@
|
||||
<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)"
|
||||
>全 部</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>
|
||||
Reference in New Issue
Block a user