402 lines
8.9 KiB
Vue
402 lines
8.9 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, computed, ref } from "vue";
|
|
import { onLoad, onShow } from "@dcloudio/uni-app";
|
|
import { getApproveOrderAPI, getMessage, read } from "@/services/approveOrder";
|
|
import { useLoginStore } from "@/stores/modules/login";
|
|
import { formatDate } from "@/utils/index";
|
|
const userStore = useLoginStore();
|
|
const dictInfo = userStore.dictInfo;
|
|
const propertyDictData =
|
|
dictInfo.filter((e) => e.dictType == "heli_project_property") || [];
|
|
// 是否分页结束
|
|
const isFinish = ref(false);
|
|
// 是否触发下拉刷新
|
|
const isTriggered = ref(false);
|
|
// 定义 porps
|
|
const props = defineProps<{
|
|
orderState: number;
|
|
}>();
|
|
|
|
// 是否加载中标记，用于防止滚动触底触发多次请求
|
|
const isLoading = ref(false);
|
|
// 请求参数
|
|
const queryParams: Required<any> = {
|
|
pageNo: 1,
|
|
pageSize: 20,
|
|
status: props.orderState,
|
|
isSnapshot: 0,
|
|
};
|
|
|
|
const dataList = ref([]);
|
|
const getListData = async () => {
|
|
if (isLoading.value) return;
|
|
if (isFinish.value === true) {
|
|
return uni.showToast({ icon: "none", title: "没有更多数据~" });
|
|
}
|
|
isLoading.value = true;
|
|
const data = await getMessage(queryParams);
|
|
isLoading.value = false;
|
|
data.list.forEach((e) => {
|
|
const obj = propertyDictData.find((q) => q.value == e.property) || {};
|
|
e.property = obj?.label;
|
|
e.createTime = formatDate(e.createTime, "YYYY-MM-DD HH:mm:ss");
|
|
// e.projectStartTime = formatDate(e.projectStartTime, 'YYYY-MM-DD')
|
|
// e.projectEndTime = formatDate(e.projectEndTime, 'YYYY-MM-DD')
|
|
});
|
|
dataList.value.push(...data.list);
|
|
// 判断是否还有更多数据
|
|
if (data.list.length < queryParams.pageSize) {
|
|
isFinish.value = true;
|
|
} else {
|
|
queryParams.pageNo++;
|
|
}
|
|
};
|
|
function handlerRead(id: any) {
|
|
isLoading.value = true;
|
|
read(id)
|
|
.then(() => {
|
|
isLoading.value = false;
|
|
onRefresherrefresh();
|
|
})
|
|
.catch((err) => {
|
|
isLoading.value = false;
|
|
});
|
|
}
|
|
onMounted(async () => {
|
|
console.log("props", props);
|
|
await getListData();
|
|
});
|
|
onShow(async () => {
|
|
isLoading.value = false;
|
|
queryParams.pageNo = 1;
|
|
dataList.value = [];
|
|
isFinish.value = false;
|
|
await getListData();
|
|
});
|
|
|
|
const handleDetail = (id) => {
|
|
const url = `/pages/approveOrder/approveOrder-detail?id=${id}`;
|
|
uni.navigateTo({ url });
|
|
};
|
|
|
|
// 自定义下拉刷新被触发
|
|
const onRefresherrefresh = async () => {
|
|
// 开始动画
|
|
isTriggered.value = true;
|
|
// 重置数据
|
|
queryParams.pageNo = 1;
|
|
dataList.value = [];
|
|
isFinish.value = false;
|
|
// 加载数据
|
|
await getListData();
|
|
// 关闭动画
|
|
isTriggered.value = false;
|
|
};
|
|
// const searchVal = ref('')
|
|
// const handleSearch = async () => {
|
|
// let dataListDefault = []
|
|
// const code = searchVal.value
|
|
// if (code) {
|
|
// dataListDefault = dataList.value
|
|
// dataList.value = dataList.value.filter((e) => {
|
|
// return e.code == code
|
|
// })
|
|
// } else {
|
|
// dataList.value = dataListDefault
|
|
// }
|
|
// }
|
|
</script>
|
|
<template>
|
|
<view class="cont">
|
|
<!-- <view class="search" v-if="dataList.length > 5">
|
|
<view class="title"></view>
|
|
<input class="uni-input" v-model="searchVal" @change="handleSearch" placeholder="根据编号搜索" />
|
|
</view> -->
|
|
<scroll-view
|
|
enable-back-to-top
|
|
scroll-y
|
|
class="data-list"
|
|
refresher-enabled
|
|
:refresher-triggered="isTriggered"
|
|
@refresherrefresh="onRefresherrefresh"
|
|
@scrolltolower="getListData"
|
|
>
|
|
<view class="item" v-for="item in dataList" :key="item.id">
|
|
<!-- 方案1: 使用 flex 布局，推荐 -->
|
|
<view
|
|
class="hd"
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<view style="display: flex; flex-direction: column">
|
|
<view class="statusLabel">{{ item.thingname }}</view>
|
|
<view
|
|
class="product-item"
|
|
style="margin: 0; color: #333; font-size: 22rpx"
|
|
>{{ item.createTime }}</view
|
|
>
|
|
</view>
|
|
<view
|
|
class="read-btn"
|
|
v-if="orderState == 0"
|
|
@click="handlerRead(item.id)"
|
|
>已读</view
|
|
>
|
|
</view>
|
|
<view class="md">
|
|
<view class="product-item"
|
|
>客户简称：<span class="item-value">{{ item.attr6 }}</span></view
|
|
>
|
|
<view class="product-item"
|
|
>项目名称：<span class="item-value">{{ item.attr7 }}</span></view
|
|
>
|
|
<view class="product-item"
|
|
>子项目名称：<span class="item-value">{{ item.attr8 }}</span></view
|
|
>
|
|
<view class="product-item"
|
|
>备注内容：<span class="item-value">{{ item.attr9 }}</span></view
|
|
>
|
|
</view>
|
|
</view>
|
|
<!-- 底部提示文字 -->
|
|
<view
|
|
class="loading-text"
|
|
:style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"
|
|
>
|
|
{{ isFinish ? "没有更多数据~" : "正在加载..." }}
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
// 订单列表
|
|
.search {
|
|
padding: 4rpx;
|
|
width: 80%;
|
|
margin: 30rpx auto;
|
|
|
|
.uni-input {
|
|
border: 1px solid #d1d6db;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
padding: 4rpx 10rpx;
|
|
font-size: 32rpx;
|
|
border-radius: 6rpx;
|
|
}
|
|
}
|
|
|
|
.data-list {
|
|
height: 90vh;
|
|
.item {
|
|
position: relative;
|
|
padding: 20rpx 0;
|
|
margin: 20rpx 20rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #fff;
|
|
|
|
.hd {
|
|
padding: 10rpx;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.statusLabel {
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
margin-right: 20rpx;
|
|
}
|
|
.read-btn {
|
|
font-size: 24rpx;
|
|
padding: 6rpx 24rpx;
|
|
border: 1rpx solid #3775f6;
|
|
border-radius: 30rpx;
|
|
color: #3775f6;
|
|
background: #f7f8fa;
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
.md {
|
|
position: relative;
|
|
padding: 10rpx;
|
|
min-height: 100rpx;
|
|
font-size: 28rpx;
|
|
border-top: 2rpx solid #f2f2f2;
|
|
|
|
.product-item {
|
|
margin: 20rpx 0;
|
|
display: flex;
|
|
font-size: 22rpx;
|
|
align-items: center;
|
|
color: #737d88;
|
|
.item-value {
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
padding-bottom: 40rpx;
|
|
}
|
|
}
|
|
|
|
.status {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
margin-bottom: 15rpx;
|
|
|
|
.date {
|
|
color: #666;
|
|
flex: 1;
|
|
}
|
|
|
|
.primary {
|
|
color: #ff9240;
|
|
}
|
|
|
|
.icon-delete {
|
|
line-height: 1;
|
|
margin-left: 10rpx;
|
|
padding-left: 10rpx;
|
|
border-left: 1rpx solid #e3e3e3;
|
|
}
|
|
}
|
|
|
|
.goods {
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
|
|
.cover {
|
|
width: 170rpx;
|
|
height: 170rpx;
|
|
margin-right: 20rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.image {
|
|
width: 170rpx;
|
|
height: 170rpx;
|
|
}
|
|
}
|
|
|
|
.quantity {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
line-height: 1;
|
|
padding: 6rpx 4rpx 6rpx 8rpx;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
border-radius: 10rpx 0 0 0;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.meta {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.name {
|
|
height: 80rpx;
|
|
font-size: 26rpx;
|
|
color: #444;
|
|
}
|
|
|
|
.type {
|
|
line-height: 1.8;
|
|
padding: 0 15rpx;
|
|
margin-top: 10rpx;
|
|
font-size: 24rpx;
|
|
align-self: flex-start;
|
|
border-radius: 4rpx;
|
|
color: #888;
|
|
background-color: #f7f7f8;
|
|
}
|
|
|
|
.more {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 22rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.payment {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
line-height: 1;
|
|
padding: 20rpx 0;
|
|
text-align: right;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
border-bottom: 1rpx solid #eee;
|
|
|
|
.quantity {
|
|
font-size: 24rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.amount {
|
|
color: #444;
|
|
margin-left: 6rpx;
|
|
}
|
|
|
|
.symbol {
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
|
|
.action {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding-top: 20rpx;
|
|
|
|
.button {
|
|
width: 180rpx;
|
|
height: 60rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left: 20rpx;
|
|
border-radius: 60rpx;
|
|
border: 1rpx solid #ccc;
|
|
font-size: 26rpx;
|
|
color: #444;
|
|
}
|
|
|
|
.secondary {
|
|
color: #3775f6;
|
|
border-color: #3775f6;
|
|
}
|
|
|
|
.primary {
|
|
color: #fff;
|
|
background-color: #3775f6;
|
|
border-color: #3775f6;
|
|
}
|
|
}
|
|
|
|
.loading-text {
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
padding: 20rpx 0;
|
|
}
|
|
}
|
|
</style>import type { stringify } from 'querystring';
|