qa-regulatory-gwj-app/pages/mine/promise/promise.vue

<template>
  <view class="page">
    <u-tabs
        lineWidth="336upx"
        :list="tabsList"
        itemStyle="height:80upx;padding-bottom:10upx;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>