295 lines
7.9 KiB
Vue
295 lines
7.9 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="c-top">
|
||
<view style="width: 100%; height: 44px;"></view>
|
||
<view class="top-ail">
|
||
<!-- 新增 -->
|
||
<view class="top-two">
|
||
<view class="" @click="getback()">
|
||
<uni-icons type="left" color="#ffffff" size="22"></uni-icons>
|
||
</view>
|
||
<view class="bai-title">当日订单</view>
|
||
<view style="width: 15px; height: 100%;"></view>
|
||
</view>
|
||
<view class="example-body" style="width: 75%;margin-top: 1rem;display: flex;justify-content: space-between">
|
||
<uni-datetime-picker v-model="queryParams.queryTime" type="daterange" @maskClick="maskClick"/>
|
||
<view class="sou" @click="handleSearch">搜索</view>
|
||
<view class="sou" @click="handleReset">重置</view>
|
||
</view>
|
||
<view class="table-container">
|
||
<view class="table-row header-row">
|
||
<view class="table-cell">序号</view>
|
||
<view class="table-cell">车牌号</view>
|
||
<view class="table-cell">检测类型</view>
|
||
<view class="table-cell">检测状态</view>
|
||
<view class="table-cell">检测结果</view>
|
||
<view class="table-cell">是否支付</view>
|
||
<view class="table-cell">支付方式</view>
|
||
</view>
|
||
<view v-for="(item, index) in tableData" :key="index" class="table-row" @click="handleShow(item.id)">
|
||
<view class="table-cell">{{ index + 1 }}</view>
|
||
<view class="table-cell">{{ item.carNum }}</view>
|
||
<view class="table-cell">{{ item.type }}</view>
|
||
<view class="table-cell">{{ item.status }}</view>
|
||
<view class="table-cell">{{ item.result }}</view>
|
||
<view class="table-cell">{{ item.pay }}</view>
|
||
<view class="table-cell">{{ getPayType(item.payType) }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../utils/request';
|
||
import {getDictDataByType} from '../../utils/utils'
|
||
|
||
export default {
|
||
name: "TodayTable",
|
||
data() {
|
||
return {
|
||
platform: process.env.UNI_PLATFORM, // 获取当前平台
|
||
tableData: [],
|
||
queryParams: {
|
||
queryTime: null,
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
},
|
||
loading: false, // 加载更多时的标志位
|
||
payTypes: [],
|
||
pages: 0,
|
||
};
|
||
},
|
||
onReady() {
|
||
this.setLandscape();
|
||
this.getTableData();
|
||
this.getDictData()
|
||
},
|
||
onUnload() {
|
||
this.resetOrientation();
|
||
},
|
||
onReachBottom() { // 当用户滚动到底部时触发
|
||
if (!this.loading && this.queryParams.pageNum < this.pages) {
|
||
this.queryParams.pageNum += 1;
|
||
this.getTableData(true);
|
||
}else {
|
||
uni.showToast({
|
||
title: '没有下一页数据',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
handleShow(id){
|
||
uni.navigateTo({
|
||
url: "/pages/index/orderdetails?inspectionInfoId=" + id
|
||
})
|
||
},
|
||
maskClick(){
|
||
this.handleReset()
|
||
},
|
||
getDictData() {
|
||
if (!this.payTypes || this.payTypes.length === 0) {
|
||
this.payTypes = getDictDataByType("pay_type")
|
||
}
|
||
},
|
||
getPayType(type) {
|
||
if (!this.payTypes || this.payTypes.length === 0){
|
||
this.getDictData()
|
||
}
|
||
if (type){
|
||
const index = this.payTypes.findIndex(item => item.value === type)
|
||
if (index !== -1){
|
||
return this.payTypes[index].label
|
||
}
|
||
}
|
||
},
|
||
handleReset() {
|
||
this.queryParams = {
|
||
queryTime: null,
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
};
|
||
this.tableData = []; // 重置时清空数据
|
||
this.getTableData();
|
||
},
|
||
handleSearch() {
|
||
if (this.queryParams.queryTime) {
|
||
this.queryParams.startTime = this.queryParams.queryTime[0];
|
||
this.queryParams.endTime = this.queryParams.queryTime[1];
|
||
this.getTableData();
|
||
}
|
||
},
|
||
getTableData(isLoadMore = false) {
|
||
this.loading = true; // 开始加载更多
|
||
request({
|
||
url: '/partnerOwn/partner/getOrderByDate',
|
||
method: 'get',
|
||
params: this.queryParams
|
||
}).then(res => {
|
||
this.pages = res.data.pages
|
||
const newData = res.data.records || [];
|
||
if (isLoadMore) {
|
||
this.tableData = this.tableData.concat(newData); // 合并新旧数据
|
||
} else {
|
||
this.tableData = newData; // 初始加载或搜索时替换数据
|
||
}
|
||
this.loading = false; // 完成加载
|
||
}).catch(err => {
|
||
console.error('获取订单数据失败', err);
|
||
this.loading = false; // 出错也停止加载
|
||
});
|
||
},
|
||
getback() {
|
||
uni.navigateBack();
|
||
},
|
||
setLandscape() {
|
||
const platform = this.platform;
|
||
|
||
// 小程序环境下使用 uni.setScreenOrientation
|
||
if (uni.setScreenOrientation) {
|
||
try {
|
||
uni.setScreenOrientation({
|
||
orientation: 'landscape'
|
||
});
|
||
} catch (err) {
|
||
console.error('Setting screen orientation failed', err);
|
||
}
|
||
}
|
||
|
||
// APP-PLUS 环境下使用 plus.screen.lockOrientation
|
||
if (platform === 'app-plus') {
|
||
this.lockOrientationForAppPlus('landscape-primary');
|
||
}
|
||
},
|
||
resetOrientation() {
|
||
const platform = this.platform;
|
||
|
||
// 小程序环境下恢复默认屏幕方向
|
||
if (uni.setScreenOrientation) {
|
||
try {
|
||
uni.setScreenOrientation({
|
||
orientation: 'portrait'
|
||
});
|
||
} catch (err) {
|
||
console.error('Resetting screen orientation failed', err);
|
||
}
|
||
}
|
||
|
||
// APP-PLUS 环境下恢复竖屏
|
||
if (platform === 'app-plus') {
|
||
this.lockOrientationForAppPlus('portrait-primary');
|
||
}
|
||
},
|
||
lockOrientationForAppPlus(orientation) {
|
||
if (typeof plus !== 'undefined' && plus.screen) {
|
||
plus.screen.lockOrientation(orientation);
|
||
} else {
|
||
// 如果 plus.screen 未定义，等待 plusReady 事件
|
||
document.addEventListener('plusready', () => {
|
||
if (plus.screen) {
|
||
plus.screen.lockOrientation(orientation);
|
||
} else {
|
||
console.error('plus.screen is not available');
|
||
}
|
||
}, false);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #F4F4F4;
|
||
}
|
||
|
||
.c-top {
|
||
width: 100%;
|
||
height: 283px;
|
||
background-color: cornflowerblue;
|
||
background: url("../../static/detection/mybj.png") center no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.top-ail {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
}
|
||
|
||
.top-two {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.bai-title {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: white;
|
||
}
|
||
|
||
.table-container {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.table-row {
|
||
display: flex;
|
||
width: 100%;
|
||
border-bottom: 1px solid #ddd;
|
||
}
|
||
|
||
.table-cell {
|
||
flex: 1; /* 确保每个单元格宽度相同 */
|
||
min-width: 0; /* 防止内容过多时破坏布局 */
|
||
padding: 12px;
|
||
text-align: center; /* 内容居中 */
|
||
border-right: 1px solid #ddd;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center; /* 确保即使内容为空也居中 */
|
||
}
|
||
|
||
.header-row .table-cell {
|
||
font-weight: bold;
|
||
background-color: #f8f8f8; /* 表头背景颜色 */
|
||
}
|
||
|
||
.table-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.table-cell:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
/* 可选：为表格添加一些间距和阴影，使其更美观 */
|
||
.table-container {
|
||
margin: 5px 0;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.sou {
|
||
width: 15%;
|
||
color: white;
|
||
margin-left: 1rem;
|
||
background-color: #4575e1;
|
||
border-radius: 5px;
|
||
display: flex; /* 使用Flexbox布局 */
|
||
align-items: center; /* 垂直居中 */
|
||
justify-content: center; /* 水平居中 */
|
||
box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的实际宽度 */
|
||
}
|
||
</style>
|