You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
343 lines
9.0 KiB
343 lines
9.0 KiB
<template>
|
|
<view>
|
|
<view class="search">
|
|
<input placeholder="按工单号" class="input" :value="workOrderNum" />
|
|
<input placeholder="手机号" class="input" :value="mobile" />
|
|
<!-- <van-search input-class="custom-search" shape="round" use-left-icon-slot="false" value="{{ value }}" placeholder="按工单号" /> -->
|
|
<!-- <van-search custom-style="custom-search" shape="round" use-left-icon-slot="false" value="{{ value }}" placeholder="手机号" /> -->
|
|
<view class="filter" @tap="handelShow">
|
|
<text v-if="statusType == ''">办理状态</text>
|
|
<text>{{ statusType }}</text>
|
|
</view>
|
|
<view class="btn">筛选</view>
|
|
</view>
|
|
<view class="section_5">
|
|
<scroll-view :scroll-y="true" scroll-into-view="scrollToHere" style="width: 100%; height: 90vh" :lower-threshold="lowerThreshold" @scrolltolower="onScrollToLower">
|
|
<view class="list_1" v-for="(item, index) in eventList" :key="item.icEventId">
|
|
<view class="section_1-0">
|
|
<view class="flex-x">
|
|
<view class="workorder">工单号：{{ item.workOrderNum }}</view>
|
|
<view
|
|
:class="
|
|
item.operationType === '未联系当事人'
|
|
? 'status-red'
|
|
: item.operationType === '已联系当事人'
|
|
? 'lan'
|
|
: item.operationType === '办理中'
|
|
? ' .status-cycn'
|
|
: item.operationType === '已办结待审核'
|
|
? 'status-orange'
|
|
: item.operationType == '已审核归档'
|
|
? 'status-grey'
|
|
: 'status-grey'
|
|
"
|
|
>
|
|
{{ item.operationType }}
|
|
</view>
|
|
</view>
|
|
<view class="context">
|
|
{{ item.eventContent }}
|
|
</view>
|
|
<view class="flex-x1">
|
|
<view class="phonenName">来电人：{{ item.name }} {{ item.mobile }}</view>
|
|
<view class="btn">办理</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<van-picker class="picker-bottom" show-toolbar v-if="status" :columns="columns" @change="onChange" @cancel="onCancel" @confirm="onConfirm" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// subpages/HotlineCompletion/pages/HotlineCompletion.js
|
|
import { showRecord, icEventList } from '../../../utils/api';
|
|
export default {
|
|
data() {
|
|
return {
|
|
pageSize: 10,
|
|
pageNo: 1,
|
|
eventList: [],
|
|
workOrderNum: '',
|
|
status: false,
|
|
columns: [],
|
|
statusType: '',
|
|
|
|
handleList: [
|
|
{
|
|
value: '8',
|
|
label: '未联系当事人'
|
|
},
|
|
{
|
|
value: '9',
|
|
label: '已联系当事人'
|
|
},
|
|
{
|
|
value: '10',
|
|
label: '办理中'
|
|
},
|
|
{
|
|
value: '11',
|
|
label: '已办结待审核'
|
|
},
|
|
{
|
|
value: '12',
|
|
label: '已审核归档'
|
|
}
|
|
],
|
|
|
|
mobile: '',
|
|
lowerThreshold: ''
|
|
};
|
|
}
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/,
|
|
onLoad(options) {
|
|
this.showRecordData();
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
*/
|
|
onReady() {},
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow() {},
|
|
/**
|
|
* 生命周期函数--监听页面隐藏
|
|
*/
|
|
onHide() {},
|
|
/**
|
|
* 生命周期函数--监听页面卸载
|
|
*/
|
|
onUnload() {},
|
|
/**
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
*/
|
|
onPullDownRefresh() {},
|
|
/**
|
|
* 页面上拉触底事件的处理函数
|
|
*/
|
|
onReachBottom() {},
|
|
/**
|
|
* 用户点击右上角分享
|
|
*/
|
|
onShareAppMessage() {},
|
|
methods: {
|
|
async showRecordData() {
|
|
console.log('sd as');
|
|
let parm = {
|
|
pageSize: this.pageSize,
|
|
pageNo: this.pageNo
|
|
};
|
|
await icEventList(parm).then((res) => {
|
|
this.setData({
|
|
eventList: res.data.list
|
|
});
|
|
console.log(this.eventList);
|
|
});
|
|
},
|
|
|
|
handelShow() {
|
|
this.setData({
|
|
status: true,
|
|
columns: this.handleList.map((item) => item.label) // 映射出显示的选项
|
|
});
|
|
},
|
|
|
|
onChange(event) {
|
|
const { value } = event.detail; // 获取选中的值
|
|
this.setData({
|
|
statusType: value // 更新选中的值
|
|
});
|
|
},
|
|
|
|
// 控制 picker 显示或隐藏
|
|
togglePicker() {
|
|
this.setData({
|
|
status: !this.status
|
|
});
|
|
},
|
|
|
|
onCancel() {
|
|
console.log('54354');
|
|
this.setData({
|
|
status: false // 关闭 picker
|
|
});
|
|
},
|
|
|
|
onConfirm() {
|
|
this.setData({
|
|
status: false // 关闭 picker
|
|
});
|
|
|
|
console.log('确认按钮点击');
|
|
},
|
|
|
|
onScrollToLower() {
|
|
console.log('占位：函数 onScrollToLower 未声明');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
page {
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
background-color: #f7f7f7;
|
|
}
|
|
.search {
|
|
height: 110rpx;
|
|
width: 100%;
|
|
padding: 0 22rpx;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-top: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.btn {
|
|
width: 120rpx;
|
|
height: 66rpx;
|
|
line-height: 66rpx;
|
|
background: #3a80e7;
|
|
border-radius: 33rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
.btn1 {
|
|
width: 120rpx;
|
|
height: 50rpx;
|
|
background: #3a80e7;
|
|
border-radius: 33rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.section_5 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
padding: 20rpx;
|
|
}
|
|
.list_1 {
|
|
width: 700rpx;
|
|
/* height: 603rpx; */
|
|
/* flex-direction: column; */
|
|
display: flex;
|
|
/* width: 100%; */
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.section_1-0 {
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border-radius: 20rpx;
|
|
width: 710rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0rpx 30rpx 0 30rpx;
|
|
}
|
|
.workorder {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #999999;
|
|
}
|
|
.status-red {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #ff3c3c;
|
|
}
|
|
.status-blue {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #04b8ad;
|
|
}
|
|
.status-cycn {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #3974f6;
|
|
}
|
|
|
|
.status-orange {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #ff850d;
|
|
}
|
|
.status-grey {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
}
|
|
.custom-search {
|
|
width: 20rpx;
|
|
}
|
|
.input {
|
|
padding: 0 20rpx;
|
|
width: 120rpx;
|
|
height: 57rpx;
|
|
background: rgba(193, 193, 193, 0.16);
|
|
border-radius: 28rpx;
|
|
border: 1px solid #dbdbdb;
|
|
align-items: center;
|
|
}
|
|
.flex-x {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
padding: 15rpx 0 15rpx 0;
|
|
}
|
|
.flex-x1 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
padding: 0 0 15rpx 0;
|
|
}
|
|
.context {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
.phonenName {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
line-height: 40rpx;
|
|
}
|
|
.filter {
|
|
padding: 0 20rpx;
|
|
width: 120rpx;
|
|
height: 57rpx;
|
|
background: rgba(193, 193, 193, 0.16);
|
|
border-radius: 28rpx;
|
|
border: 1px solid #dbdbdb;
|
|
align-items: center;
|
|
line-height: 57rpx;
|
|
}
|
|
.picker-bottom {
|
|
position: fixed; /* 固定在页面底部 */
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000; /* 确保在最上层显示 */
|
|
}
|
|
</style>
|
|
|