396 lines
11 KiB
Vue
396 lines
11 KiB
Vue
|
<!-- 首页搜索页 -->
|
|||
|
|
<template>
|
|||
|
|
<!-- 搜索nav -->
|
|||
|
|
<SearchPage
|
|||
|
|
ref="search"
|
|||
|
|
@handleSearch="handleSearch"
|
|||
|
|
@handleBlur="handleBlur"
|
|||
|
|
@clearSearchData="clearSearchData"
|
|||
|
|
@goBack="goBack"
|
|||
|
|
:isShowCancel="isShowCancel"
|
|||
|
|
></SearchPage>
|
|||
|
|
<!-- end -->
|
|||
|
|
<view class="searchTop">
|
|||
|
|
<view class="pageBox">
|
|||
|
|
<!-- 最近查找 -->
|
|||
|
|
<view class="recentBox" v-if="!isClear">
|
|||
|
|
<view class="tit">
|
|||
|
|
<text>最近查找</text>
|
|||
|
|
<icon @click="handleClear"></icon>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="recentList">
|
|||
|
|
<view
|
|||
|
|
class="item"
|
|||
|
|
v-for="(item, index) in listDataes.value"
|
|||
|
|
:key="index"
|
|||
|
|
@click="handleTransportOrderId(item)"
|
|||
|
|
>{{ item }}</view
|
|||
|
|
>
|
|||
|
|
<view class="iconUp" v-if="!showDisplay">
|
|||
|
|
<view
|
|||
|
|
@click="showDisplay = !showDisplay"
|
|||
|
|
v-if="itemDataRecent.length > 10"
|
|||
|
|
><image
|
|||
|
|
class="icon_img"
|
|||
|
|
src="../../static/open.png"
|
|||
|
|
mode=""
|
|||
|
|
></image
|
|||
|
|
></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- end -->
|
|||
|
|
<!-- 搜索列表 -->
|
|||
|
|
<scroll-view scroll-y="true" class="swiperH" v-if="itemData.length > 0">
|
|||
|
|
<view class="serachList">
|
|||
|
|
<view class="">
|
|||
|
|
<view class="tabList">
|
|||
|
|
<view
|
|||
|
|
class="boxBg"
|
|||
|
|
v-for="(item, index) in itemData"
|
|||
|
|
:key="index"
|
|||
|
|
@click.stop="handleDetails($event, item)"
|
|||
|
|
>
|
|||
|
|
<!-- 待取件 -->
|
|||
|
|
<StayPicup
|
|||
|
|
:item="item"
|
|||
|
|
@handleDetails="handleDetails"
|
|||
|
|
></StayPicup>
|
|||
|
|
<!-- end -->
|
|||
|
|
<!-- 已取件 -->
|
|||
|
|
<AlreadyPicUp
|
|||
|
|
:item="item"
|
|||
|
|
@handleDetails="handleDetails"
|
|||
|
|
></AlreadyPicUp>
|
|||
|
|
<!-- end -->
|
|||
|
|
<!-- 取件取消 -->
|
|||
|
|
<Canceled :item="item"></Canceled>
|
|||
|
|
<!-- end -->
|
|||
|
|
<!-- 已签收 -->
|
|||
|
|
<SignFor :item="item" @handleDetails="handleDetails"></SignFor>
|
|||
|
|
<!-- end -->
|
|||
|
|
<!-- 已经完成到付未付款 -->
|
|||
|
|
<Accomplish
|
|||
|
|
:item="item"
|
|||
|
|
@handleDetails="handleDetails"
|
|||
|
|
></Accomplish>
|
|||
|
|
<!-- end -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<ReachBottom ref="loadMore"></ReachBottom>
|
|||
|
|
</scroll-view>
|
|||
|
|
<!-- end -->
|
|||
|
|
<!-- 无数据 -->
|
|||
|
|
<view v-if="itemData.length === 0 && isClear"
|
|||
|
|
><EmptyPage :emptyData="emptyData"></EmptyPage
|
|||
|
|
></view>
|
|||
|
|
<!-- end -->
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 提示窗示例 -->
|
|||
|
|
<UniPopup
|
|||
|
|
ref="popups"
|
|||
|
|
:tipInfo="tipInfo"
|
|||
|
|
@handleClick="clearData"
|
|||
|
|
></UniPopup>
|
|||
|
|
<!-- end -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, reactive, onMounted, computed, onUnmounted } from "vue";
|
|||
|
|
import { onReachBottom } from "@dcloudio/uni-app";
|
|||
|
|
import { useStore } from "vuex";
|
|||
|
|
// 接口
|
|||
|
|
import {
|
|||
|
|
getSearch,
|
|||
|
|
getRecentSearch,
|
|||
|
|
setMarkRecent,
|
|||
|
|
clearRecentSearch,
|
|||
|
|
} from "@/pages/api/index.js";
|
|||
|
|
// 导入组件
|
|||
|
|
// 搜索组件
|
|||
|
|
import SearchPage from "@/components/uni-search/index.vue";
|
|||
|
|
// 暂无搜索内容
|
|||
|
|
import EmptyPage from "@/components/uni-empty-page/index.vue";
|
|||
|
|
// 弹层
|
|||
|
|
import UniPopup from "@/components/uni-popup/index.vue";
|
|||
|
|
// 下拉提示
|
|||
|
|
import ReachBottom from "@/components/reach-bottom/index.vue";
|
|||
|
|
//
|
|||
|
|
// 待取件
|
|||
|
|
import StayPicUp from "./components/StayPicUp.vue";
|
|||
|
|
// 已取件
|
|||
|
|
import AlreadyPicUp from "./components/AlreadyPicUp.vue";
|
|||
|
|
//已取消
|
|||
|
|
import Canceled from "./components/Canceled.vue";
|
|||
|
|
// 已签收
|
|||
|
|
import SignFor from "./components/SignFor.vue";
|
|||
|
|
// 完成未付款
|
|||
|
|
import Accomplish from "./components/Accomplish.vue";
|
|||
|
|
// ------定义变量------
|
|||
|
|
const store = useStore(); //vuex获取、储存数据
|
|||
|
|
const users = store.state.user;
|
|||
|
|
const search = ref(); //定义搜索框的ref
|
|||
|
|
let showDisplay = ref(false); //最近查找更多触发，触发之后按钮隐藏
|
|||
|
|
let isClear = ref(false); //触发清除按钮
|
|||
|
|
const tipInfo = ref("确定要全部清空吗？");
|
|||
|
|
let popups = ref();
|
|||
|
|
let isShowCancel = ref(true);
|
|||
|
|
const loadMore = ref(); //定义子组件的ref,可以调取子组件的值
|
|||
|
|
let reload = ref(false);
|
|||
|
|
let pages = ref(0); //总页数
|
|||
|
|
let pageNum = ref(1); //存放当前页
|
|||
|
|
const itemData = ref([]); //数据
|
|||
|
|
const itemDataRecent = reactive([]); //近期数据
|
|||
|
|
const emptyData = ref("没有找到相关内容");
|
|||
|
|
let keyword = ref(""); //当前的搜索对象
|
|||
|
|
let isInput = ref(false); //是否触发了输入框
|
|||
|
|
let page = reactive({
|
|||
|
|
latitude:
|
|||
|
|
users.loacation.latitude !== undefined
|
|||
|
|
? users.loacation.latitude
|
|||
|
|
: 40.062595,
|
|||
|
|
longitude:
|
|||
|
|
users.loacation.longitude !== undefined
|
|||
|
|
? users.loacation.longitude
|
|||
|
|
: 116.372809,
|
|||
|
|
page: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
});
|
|||
|
|
// 计算数据
|
|||
|
|
const listDataes = computed(() => {
|
|||
|
|
let testList = [];
|
|||
|
|
if (showDisplay.value === false) {
|
|||
|
|
if (itemDataRecent.length > 10) {
|
|||
|
|
for (var i = 0; i < 10; i++) {
|
|||
|
|
testList.push(itemDataRecent[i]);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
testList = itemDataRecent;
|
|||
|
|
}
|
|||
|
|
return testList;
|
|||
|
|
} else {
|
|||
|
|
return itemDataRecent;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 上下拉取
|
|||
|
|
onReachBottom(() => {
|
|||
|
|
isInput.value = true;
|
|||
|
|
if (pageNum.value >= Number(pages.value)) {
|
|||
|
|
loadMore.value.status = "noMore";
|
|||
|
|
return false;
|
|||
|
|
} else {
|
|||
|
|
loadMore.value.status = "loading";
|
|||
|
|
let times = setTimeout(() => {
|
|||
|
|
pageNum.value++;
|
|||
|
|
getList();
|
|||
|
|
}, 1000); //这里延时一秒在加载方法有个loading效果
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 离开此页面
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
itemData.value = [];
|
|||
|
|
isInput.value = false;
|
|||
|
|
});
|
|||
|
|
// ------生命周期------
|
|||
|
|
onMounted(() => {
|
|||
|
|
init();
|
|||
|
|
if (users.searchText !== "") {
|
|||
|
|
keyword.value = users.searchText;
|
|||
|
|
search.value.searchVal = users.searchText;
|
|||
|
|
getList();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 获取初始值
|
|||
|
|
const init = () => {
|
|||
|
|
getRecent(); //近期搜索数据
|
|||
|
|
};
|
|||
|
|
// ------定义方法------
|
|||
|
|
// 获取数据
|
|||
|
|
const getList = async () => {
|
|||
|
|
reload.value = true;
|
|||
|
|
page = {
|
|||
|
|
...page,
|
|||
|
|
page: pageNum.value,
|
|||
|
|
keyword: keyword.value,
|
|||
|
|
};
|
|||
|
|
// 后端接口调用
|
|||
|
|
await getSearch(page).then((res) => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
if (res.data) {
|
|||
|
|
reload.value = false;
|
|||
|
|
if (!isInput.value) {
|
|||
|
|
itemData.value = res.data.items;
|
|||
|
|
} else {
|
|||
|
|
itemData.value = itemData.value.concat(res.data.items);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
pages.value = res.data.pages;
|
|||
|
|
if (Number(res.data.pages) === pageNum.value) {
|
|||
|
|
loadMore.value.status = "noMore";
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
itemData.value = [];
|
|||
|
|
}
|
|||
|
|
// 有搜索数据的时候隐藏最近查询标题和清除按钮
|
|||
|
|
if (itemData.value.length > 0) {
|
|||
|
|
isClear.value = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
// 显示最近查找
|
|||
|
|
const getRecent = async () => {
|
|||
|
|
await getRecentSearch().then((res) => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
itemDataRecent.value = res.data;
|
|||
|
|
// 没数据的时候隐藏最近查询标题和清除按钮
|
|||
|
|
if (itemDataRecent.value.length === 0) {
|
|||
|
|
isClear.value = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
// 搜索框搜索
|
|||
|
|
const handleSearch = (val) => {
|
|||
|
|
if (val.value.trim().length > 0) {
|
|||
|
|
isInput.value = false;
|
|||
|
|
keyword = val;
|
|||
|
|
getList();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// input焦点
|
|||
|
|
const handleBlur = () => {
|
|||
|
|
isInput.value = true;
|
|||
|
|
};
|
|||
|
|
// 清除最近查找
|
|||
|
|
const handleClear = () => {
|
|||
|
|
popups.value.dialogOpen();
|
|||
|
|
};
|
|||
|
|
// 点击关闭按钮之后页面为显示最近查找页
|
|||
|
|
const clearSearchData = () => {
|
|||
|
|
itemData.value = []; //清空搜索列表
|
|||
|
|
// 设置搜索的内容，从详情页返回搜索页的时候显示默认搜索的内容
|
|||
|
|
isClear.value = false;
|
|||
|
|
store.commit("user/setSearchText", "");
|
|||
|
|
getRecent();
|
|||
|
|
};
|
|||
|
|
// 清空
|
|||
|
|
const clearData = async (val) => {
|
|||
|
|
isClear.value = val;
|
|||
|
|
await clearRecentSearch().then(() => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "清除成功",
|
|||
|
|
icon: "none",
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
// 标记为最近查找
|
|||
|
|
const setRecent = async (id) => {
|
|||
|
|
await setMarkRecent(id);
|
|||
|
|
itemData.value = []; //清空搜索列表
|
|||
|
|
};
|
|||
|
|
// 取件详情页
|
|||
|
|
const handleDetails = (e, item) => {
|
|||
|
|
// 阻止事件冒泡
|
|||
|
|
e.stopPropagation();
|
|||
|
|
// 把任务id用vuex的方法存储，方便其他页面调用
|
|||
|
|
store.commit("user/setTaskId", item.id);
|
|||
|
|
// // 由于取件详情地址和派件详情地址样式一致，所以用类型 1取件，2派件区分开
|
|||
|
|
// store.commit('user/setTaskType', 1);
|
|||
|
|
// 设置是否由搜索页进的详情页，方便详情页返回
|
|||
|
|
store.commit("user/setIsSearch", true);
|
|||
|
|
// 设置搜索的内容，从详情页返回搜索页的时候显示默认搜索的内容
|
|||
|
|
store.commit("user/setSearchText", search.value.searchVal);
|
|||
|
|
|
|||
|
|
// 如果有运单号标记为最近查询记录
|
|||
|
|
if (item.transportOrderId) {
|
|||
|
|
setRecent(item.transportOrderId);
|
|||
|
|
}
|
|||
|
|
// 取件
|
|||
|
|
if (item.taskType === 1) {
|
|||
|
|
// 待取件
|
|||
|
|
if (item.status === 1) {
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: "/pages/details/index",
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
} else if (item.status === 2) {
|
|||
|
|
// 如果是已取件
|
|||
|
|
// 未付款的状态进入二维码付款页面
|
|||
|
|
if (item.paymentStatus === 1 && item.paymentMethod === 1) {
|
|||
|
|
store.commit("user/setDetailType", 2);
|
|||
|
|
store.commit("user/setTaskStatus", 3);
|
|||
|
|
store.commit("user/setPayData", {});
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: "/pages/pay/scanPay",
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
} else {
|
|||
|
|
// 已取件
|
|||
|
|
store.commit("user/setTaskStatus", 2);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 取消的订单
|
|||
|
|
store.commit("user/setTaskStatus", 3);
|
|||
|
|
}
|
|||
|
|
// 如果是已付款或者是到付,取消的订单,进入运单详情页
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: "/pages/details/waybill",
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 派件
|
|||
|
|
// 待派件
|
|||
|
|
if (item.status === 1) {
|
|||
|
|
store.commit("user/setTaskStatus", 4);
|
|||
|
|
} else if (item.status === 2) {
|
|||
|
|
// 如果是已取件
|
|||
|
|
// 未付款的状态进入二维码付款页面
|
|||
|
|
if (item.paymentStatus === 1 && item.paymentMethod === 2) {
|
|||
|
|
store.commit("user/setPayData", {});
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: "/pages/pay/scanPay",
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
} else {
|
|||
|
|
store.commit("user/setTaskStatus", 5);
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: "/pages/details/waybill",
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 如果是去派件\已付款或者是寄付,进入运单详情页
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: "/pages/details/waybill",
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// 根据最近查找的运单id搜索
|
|||
|
|
const handleTransportOrderId = (val) => {
|
|||
|
|
// 给搜索对象赋值
|
|||
|
|
keyword.value = val;
|
|||
|
|
// 把值赋给子组件的搜索框
|
|||
|
|
search.value.searchVal = val;
|
|||
|
|
getList();
|
|||
|
|
};
|
|||
|
|
// 回首页
|
|||
|
|
const goBack = () => {
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: "/pages/index/index",
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style src="./../../styles/expressage.scss" lang="scss" scoped></style>
|
|||
|
|
<style src="./index.scss" lang="scss" scoped></style>
|
|||
|
|
<style lang="scss">
|
|||
|
|
body {
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
</style>
|