275 lines
8.0 KiB
Vue
275 lines
8.0 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-tabs
|
||
lineWidth="336rpx"
|
||
:list="tabsList"
|
||
itemStyle="height:80rpx;padding-bottom:10rpx;background-color: #fff;"
|
||
@click="tabsClick"
|
||
></u-tabs>
|
||
<view class="container">
|
||
<u-sticky offset-top="200">
|
||
<u-button type="primary" text="高级搜索" @click="popupOpen" style="height: 30px;"></u-button>
|
||
</u-sticky>
|
||
</view>
|
||
<u-popup :show="popupShow" mode="right" :overlay="true" customStyle='width: 300px;' :safeAreaInsetTop="true" @close="popupClose" @open="popupOpen">
|
||
<view>
|
||
<u-datetime-picker
|
||
:show="addStartPickBarShow"
|
||
v-model="addTimeStart"
|
||
mode="date"
|
||
@close="addPickBarOnClose('start')"
|
||
@cancel="addPickBarOnCancel('start')"
|
||
@confirm="addPickBarOnConfirm"
|
||
></u-datetime-picker>
|
||
<u-button @click="addStartPickBarShow = true">起始时间：{{ addTimeStartStr == '' ? '请选择起始时间...' : addTimeStartStr }}</u-button>
|
||
<u-datetime-picker
|
||
:show="addEndPickBarShow"
|
||
v-model="addTimeEnd"
|
||
mode="date"
|
||
@close="addPickBarOnClose('end')"
|
||
@cancel="addPickBarOnCancel('end')"
|
||
@confirm="addPickBarOnConfirm"
|
||
></u-datetime-picker>
|
||
<u-button @click="addEndPickBarShow = true">结束时间：{{ addTimeEndStr == '' ? '请选择结束时间...' : addTimeEndStr }}</u-button>
|
||
<u-toast ref="uToast"></u-toast>
|
||
<view class="u-page">
|
||
<view class="u-demo-block">
|
||
<view class="u-demo-block__content">
|
||
<u-row customStyle="margin-bottom: 10px">
|
||
<u-col span="6">
|
||
<view class="demo-layout bg-purple-light">
|
||
<u-button @click="resetAdvancedParam">重置</u-button>
|
||
</view>
|
||
</u-col>
|
||
<u-col span="6">
|
||
<view class="demo-layout bg-purple">
|
||
<u-button @click="advancedSearch">搜索</u-button>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</u-popup>
|
||
<view class="message_list">
|
||
<u-list @scrolltolower="scrolltolower" v-if="list.length > 0">
|
||
<u-list-item v-for="(item, index) in list" :key="index">
|
||
<view class="message_item arrow" @click="fnNavigator(item)">
|
||
<view class="message_flex">
|
||
<view>
|
||
<template v-if="item.corppromisType ==='1'"> <!-- 0承诺书1责任状 -->
|
||
<view class="fontstyle">发状人：{{ item.coverpeople }}</view>
|
||
<view class="fontstyle">受状人：{{ item.NAME }}</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="fontstyle">被承诺人：{{ item.coverpeople }}</view>
|
||
<view class="fontstyle">承诺人：{{ item.NAME }}</view>
|
||
</template>
|
||
|
||
<view v-if="item.SIGNTIME != null" class="fontstyle">已签字</view>
|
||
<view v-else class="fontstyle_red">未签字</view>
|
||
<view class="message_time">{{ item.SIGNTIME }}</view>
|
||
</view>
|
||
<view class="font0" v-if="TYPE === '2'">{{ item.ISREAD == '0' ? '待阅' : '已阅' }}</view>
|
||
</view>
|
||
</view>
|
||
</u-list-item>
|
||
</u-list>
|
||
<empty v-else></empty>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {getMyPromiseList, getReceivePromiseList} from "../../../api";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabsList: [
|
||
// {name: '我的承诺', id: '1'},
|
||
{name: '发出承诺', id: '1'},
|
||
{name: '接收承诺', id: '2'}
|
||
],
|
||
TYPE: '1',
|
||
pageSize: 10,
|
||
currentPage: 1,
|
||
totalPage: 0,
|
||
list: [],
|
||
popupShow: false, // 高级搜索弹窗
|
||
addStartPickBarShow: false, // 起始日期选择器
|
||
addEndPickBarShow: false, // 结束日期选择器
|
||
addTimeStart: Number(new Date()), // 承诺书添加时间-起始
|
||
addTimeEnd: Number(new Date()), // 承诺书添加时间-结束
|
||
addTimeStartStr: '', // 承诺书添加时间-起始-字符串
|
||
addTimeEndStr: '', // 承诺书添加时间-结束-字符串
|
||
}
|
||
},
|
||
computed: {
|
||
userInfo() {
|
||
return this.$store.getters.getUserInfo
|
||
}
|
||
},
|
||
onShow(event) {
|
||
this.resetList()
|
||
},
|
||
methods: {
|
||
async fnGetMyPromiseList() {
|
||
let resData = await getMyPromiseList({
|
||
USER_ID: this.userInfo.USER_ID,
|
||
showCount: this.pageSize,
|
||
currentPage: this.currentPage,
|
||
ADDSTART: this.addTimeStartStr,
|
||
ADDEND: this.addTimeEndStr
|
||
})
|
||
this.list = [...this.list, ...resData.varList]
|
||
this.totalPage = resData.page.totalPage
|
||
},
|
||
async fnGetReceivePromiseList() {
|
||
let resData = await getReceivePromiseList({
|
||
USER_ID: this.userInfo.USER_ID,
|
||
showCount: this.pageSize,
|
||
currentPage: this.currentPage,
|
||
ADDSTART: this.addTimeStartStr,
|
||
ADDEND: this.addTimeEndStr
|
||
})
|
||
this.list = [...this.list, ...resData.varList]
|
||
},
|
||
resetList() {
|
||
this.pageSize = 10
|
||
this.currentPage = 1
|
||
this.list = []
|
||
this.getData();
|
||
},
|
||
getData() {
|
||
if (this.TYPE === '1') this.fnGetMyPromiseList()
|
||
if (this.TYPE === '2') this.fnGetReceivePromiseList()
|
||
},
|
||
scrolltolower() {
|
||
this.currentPage++;
|
||
if (this.totalPage >= this.currentPage) this.getData();
|
||
},
|
||
tabsClick(e) {
|
||
this.TYPE = e.id
|
||
this.resetAllAddTime()
|
||
this.resetList()
|
||
},
|
||
fnNavigator(item) {
|
||
uni.$u.route({
|
||
url: 'pages/mine/promise/detail',
|
||
params: {
|
||
PROMISE_ID: item.PROMISE_ID,
|
||
PROMISEPEOPLE_ID: item.PROMISEPEOPLE_ID,
|
||
TYPE: this.TYPE
|
||
}
|
||
})
|
||
},
|
||
// 高级搜索弹窗弹出函数
|
||
popupOpen() {
|
||
this.popupShow = true
|
||
|
||
},
|
||
// 高级搜索弹窗关闭函数
|
||
popupClose() {
|
||
this.popupShow = false
|
||
|
||
},
|
||
// 高级搜索日期选择器关闭回调
|
||
addPickBarOnClose(type) {
|
||
switch (type) {
|
||
case 'start':
|
||
this.addStartPickBarShow = false;
|
||
break;
|
||
case 'end':
|
||
this.addEndPickBarShow = false;
|
||
break;
|
||
default:
|
||
this.$refs.uToast.show({message:'日期选择参数错误',duration:1000})
|
||
}
|
||
},
|
||
// 高级搜索日期选择器取消回调
|
||
addPickBarOnCancel(type) {
|
||
this.addPickBarOnClose(type)
|
||
},
|
||
// 高级搜索日期选择器确认回调
|
||
addPickBarOnConfirm(value) {
|
||
// alert(value.value)
|
||
switch (this.addStartPickBarShow) {
|
||
case true:
|
||
// start type
|
||
this.addTimeStartStr = uni.$u.timeFormat(value.value, 'yyyy-mm-dd')
|
||
this.addPickBarOnClose('start')
|
||
break;
|
||
case false:
|
||
// end type
|
||
this.addTimeEndStr = uni.$u.timeFormat(value.value, 'yyyy-mm-dd')
|
||
this.addPickBarOnClose('end')
|
||
break;
|
||
default:
|
||
this.$refs.uToast.show({message:'日期选择参数错误',duration:1000})
|
||
}
|
||
},
|
||
// 清除高级搜索内的起始日期、结束日期组件绑定的时间属性（时间戳类型）；清除根据时间戳格式化的文本日期
|
||
resetAllAddTime() {
|
||
this.addTimeStart = Number(new Date())
|
||
this.addTimeEnd = Number(new Date())
|
||
this.addTimeStartStr = ''
|
||
this.addTimeEndStr = ''
|
||
},
|
||
// 重置高级搜索条件
|
||
resetAdvancedParam() {
|
||
this.resetAllAddTime()
|
||
this.resetList()
|
||
},
|
||
// 高级搜索
|
||
advancedSearch(){
|
||
const toast = uni.$u.toast
|
||
// 日期合法判定
|
||
if (this.addTimeStartStr > this.addTimeEndStr){
|
||
// 包含两种case：case1 开始时间 > 结束时间；case2 开始时间有值，结束时间为空
|
||
this.$refs.uToast.show({message:'日期不合法',duration:1000})
|
||
return
|
||
}
|
||
if (this.addTimeEndStr != '' && this.addTimeStartStr == ''){
|
||
// 结束时间有值，开始时间为空
|
||
this.$refs.uToast.show({message:'日期不合法',duration:1000})
|
||
return
|
||
}
|
||
this.resetList()
|
||
this.popupClose()
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page {
|
||
background-color: #f7f9ff;
|
||
height: 100vh;
|
||
}
|
||
.wrap {
|
||
padding: 12px;
|
||
}
|
||
|
||
.demo-layout {
|
||
height: 25px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.bg-purple {
|
||
background: #CED7E1;
|
||
}
|
||
|
||
.bg-purple-light {
|
||
background: #e5e9f2;
|
||
}
|
||
|
||
.bg-purple-dark {
|
||
background: #99a9bf;
|
||
}
|
||
</style>
|