城阳工作端uniH5前端代码
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.
 
 

385 lines
12 KiB

<template>
<view>
<van-tabs :active="active" @change="toggleColor" title-active-color="#3974F6" color="#3974F6">
<van-tab title="待我处理" title-class="custom-tab-title">
<view class="content">
<scroll-view class="scroll" :scroll-y="true" :lower-threshold="lowerThreshold" @scrolltolower="onScrollToLower">
<view class="card" :data-item="item" @tap="toDetail" v-for="(item, index) in tableData1" :key="index">
<view class="title">
<view>
<text :class="item.type == 'event' ? 'blue_small' : item.type == 'chengguan' ? 'green_small' : 'red_small'">
{{ item.type == 'event' ? '事件' : item.type == 'chengguan' ? '城管' : '需求' }}
</text>
{{ item.name }} {{ item.mobile }}
</view>
</view>
<view style="margin-top: 10rpx">
<text class="card_content" :maxLines="2" overflow="ellipsis">{{ item.content }}</text>
</view>
<view class="bottom">
<view style="color: #c1c1c1; font-size: 26rpx">{{ item.time }}</view>
<view :style="'color: ' + (item.status == 'processing' ? '#e07f2f' : '#C1C1C1') + ';font-size: 28rpx;'">
{{ item.status == 'processing' ? '处理中' : '已完成' }}
</view>
</view>
</view>
<load-more :loadVisible="loadMoreVisible" :loadType="loadMoreType"></load-more>
<no-data :isShow="nodata" v-if="nodata"></no-data>
</scroll-view>
</view>
</van-tab>
<van-tab title="我上报的">
<view class="content">
<scroll-view class="scroll" :scroll-y="true" :lower-threshold="lowerThreshold" @scrolltolower="onScrollToLower">
<view class="card" :data-item="item" @tap="toDetail" v-for="(item, index) in tableData" :key="index">
<view class="title">
<view>
<text :class="item.type == 'event' ? 'blue_small' : item.type == 'chengguan' ? 'green_small' : 'red_small'">
{{ item.type == 'event' ? '事件' : item.type == 'chengguan' ? '城管' : '需求' }}
</text>
{{ item.name }} {{ item.mobile }}
</view>
</view>
<view style="margin-top: 10rpx">
<text class="card_content" :maxLines="2" overflow="ellipsis">{{ item.content }}</text>
</view>
<view class="bottom">
<view style="color: #c1c1c1; font-size: 26rpx">{{ item.time }}</view>
<view :style="'color: ' + (item.status == 'processing' ? '#e07f2f' : '#C1C1C1') + ';font-size: 28rpx;'">
{{ item.status == 'processing' ? '处理中' : '已完成' }}
</view>
</view>
</view>
<load-more :loadVisible="loadMoreVisible" :loadType="loadMoreType"></load-more>
<no-data :isShow="nodata" v-if="nodata"></no-data>
</scroll-view>
</view>
</van-tab>
</van-tabs>
</view>
</template>
<script>
import loadMore from '../../../../components/loadMore/loadMore';
import noData from '../../../../components/noData/nodata';
import { getMyTroubleshootDemand, getMyWaitTroubleshootDemand } from '../../../../utils/api';
var global = require('../../../../utils/config');
const app = getApp();
export default {
components: {
loadMore,
noData
},
data() {
return {
active: 0,
tableData: [],
tableData1: [],
pageNo: 1,
pageSize: 8,
lowerThreshold: '10',
loadMoreVisible: false,
loadMoreType: 'none',
nodata: false,
checkResultFlag: 0,
satisfactionCategory: '',
inspRecordId: '',
createdBy: ''
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log('onLoad.........');
this.setData({
satisfactionCategory: options.category,
inspRecordId: options.inspRecordId,
createdBy: app.globalData.user.id
});
this.getMyWaitTroubleshootDemandList();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
console.log('onReady.........');
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
this.setData({
pageNo: 1,
tableData: [],
tableData1: []
});
console.log('页面重新onShow。。。。。。。。');
if (this.active == 0) {
this.getMyWaitTroubleshootDemandList();
} else {
this.getMyTroubleshootDemandList();
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {},
methods: {
onScrollToLower(e) {
if (this.loadMoreType === 'more') {
this.setData({
loadMoreVisible: true
});
this.pageNo += 1;
// 待我处理
if (this.checkResultFlag === 0) {
this.getMyWaitTroubleshootDemandList();
}
// 我上报的
if (this.checkResultFlag === 1) {
this.getMyTroubleshootDemandList();
}
}
},
getMyTroubleshootDemandList() {
this.setData({
loadMoreVisible: true,
nodata: false,
loadMoreType: 'more'
});
let parm = {
pageNo: this.pageNo,
pageSize: this.pageSize
};
if (!parm.type) {
delete parm.type;
}
getMyTroubleshootDemand(parm)
.then((res) => {
this.setData({
loadMoreType: res.data.list.length === this.pageSize ? 'more' : 'none',
tableData: this.tableData.concat(res.data.list)
});
if (this.tableData.length == 0) {
this.setData({
loadMoreVisible: false,
nodata: true
});
}
})
.catch((err) => {
console.log(err);
this.setData({
loadMoreVisible: false,
nodata: true
});
});
},
getMyWaitTroubleshootDemandList() {
this.setData({
loadMoreVisible: true,
nodata: false,
loadMoreType: 'more'
});
let parm = {
pageNo: this.pageNo,
pageSize: this.pageSize
};
if (!parm.type) {
delete parm.type;
}
getMyWaitTroubleshootDemand(parm)
.then((res) => {
this.setData({
loadMoreType: res.data.list.length === this.pageSize ? 'more' : 'none',
tableData1: this.tableData.concat(res.data.list)
});
if (this.tableData1.length == 0) {
this.setData({
loadMoreVisible: false,
nodata: true
});
}
})
.catch((err) => {
console.log(err);
this.setData({
loadMoreVisible: false,
nodata: true
});
});
},
handleClickPhone(e) {
uni.makePhoneCall({
phoneNumber: e.currentTarget.dataset.mobile
});
},
toDetail(e) {
console.log(e);
uni.navigateTo({
url: `/subpages/demandCheck/pages/dissatisfied/demandCheck/demandCheck?id=${e.currentTarget.dataset.item.id}&type=${
e.currentTarget.dataset.item.type === 'event' ? 0 : e.currentTarget.dataset.item.type === 'chengguan' ? 2 : 1
}`
});
},
toggleColor(e) {
const let1 = e.detail.index;
this.setData({
tableData: [],
tableData1: [],
checkResultFlag: let1,
pageNo: 1,
pageSize: 20
});
this.getList();
this.setData({
active: let1
});
},
getList() {
this.setData({
loadMoreVisible: true,
nodata: false,
loadMoreType: 'more'
});
// 待我处理
if (this.checkResultFlag === 0) {
this.getMyWaitTroubleshootDemandList();
}
// 我上报的
if (this.checkResultFlag === 1) {
this.getMyTroubleshootDemandList();
}
}
}
};
</script>
<style>
/* subpages/myTroubleshootDemand/pages/index/index.wxss */
page {
width: 100%;
min-height: 100vh;
overflow-y: scroll;
background-color: #f7f7f7;
}
.red,
.blue {
font-size: 28rpx;
color: #fff;
padding: 8rpx 20rpx;
border-radius: 40rpx;
box-sizing: border-box;
margin-right: 16rpx;
}
.red {
background-color: #ff783c;
}
.blue {
background-color: #4f94ff;
}
.blue_small,
.red_small,
.green_small,
.gray_small {
font-size: 26rpx;
width: fit-content;
padding: 8rpx 16rpx;
border-radius: 40rpx;
box-sizing: border-box;
height: 40rpx;
line-height: 20rpx;
margin: 24rpx 0;
}
.blue_small {
background-color: #eef4fd;
color: #5693ee;
}
.red_small {
background-color: #fff1eb;
color: #ff783c;
}
.green_small {
background-color: #eef4fd;
color: #5cc789;
}
.gray_small {
background-color: #a4a8ad;
color: #fdfdfd;
font-size: 25rpx;
}
.content {
width: 100%;
padding: 0 20rpx;
margin-top: 20rpx;
box-sizing: border-box;
}
.content .scroll {
height: calc(100vh - 50rpx);
overflow-y: scroll;
}
.content .card {
width: 100%;
background-color: #fff;
display: flex;
min-height: 180rpx;
flex-direction: column;
border-radius: 20rpx;
padding: 20rpx 30rpx;
box-sizing: border-box;
overflow: hidden;
box-sizing: border-box;
color: #333;
position: relative; /* 为了使用伪元素 */
margin-bottom: 20rpx;
}
.content .card .title {
display: flex;
justify-content: space-between;
}
.card_content {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.content .card .bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 22rpx;
/* border-bottom: 2rpx #EAEAEA solid; */
padding-bottom: 20rpx;
}
</style>