440 lines
17 KiB
Vue
440 lines
17 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 顶部筛选菜单 -->
|
||
<view class="uni-flex ai-center screen-box menu-list">
|
||
<view class="menu" v-for="(item,index) in menuList" :key="index" @click="handleClick(item)">
|
||
<view class="menu-image round" style="height:75rpx;width:75rpx;padding: 18rpx;"
|
||
:style="activeType==item.id ? 'background:#f0f7fe;' : 'background:#f6f7f8;'">
|
||
<image :src="activeType==item.id? item.active: item.src" mode="aspectFit" style="height:100%;"></image>
|
||
</view>
|
||
<view class="menuName" :style="activeType==item.id ? 'color:#5B96E9' :'color:#808D97'">{{item.name}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 数据卡片列表 -->
|
||
<view v-if="pageList.length>0">
|
||
<list-unit v-for="(item,index) in pageList" :key="index" :item="item" :i="index"
|
||
@goDetail="goDetail"></list-unit>
|
||
</view>
|
||
<!-- 无数据时的页面显示 -->
|
||
<view v-else-if="pageData.isLoading===false">
|
||
<noFound :nodata="pageList.length>0 ? false : true" :text="searchTime[0]+'至'+searchTime[1]+'无数据，'">
|
||
<text name="other">请选择其它日期进行查询。</text>
|
||
</noFound>
|
||
</view>
|
||
<!-- 底部提示 -->
|
||
<view class="load-more" v-if="pageList.length>0">
|
||
<text>{{!pageData.isEnd ? '正在加载,请稍后...':'——— 我是有底线的 ———'}}</text>
|
||
</view>
|
||
<!-- 更多筛选的弹窗 -->
|
||
<UniPop :show="showPop" @hidePopup="closePop" type="bottom" @touchmove.prevent round="true">
|
||
<view class="padding-bottom">
|
||
<!-- 日期选项 -->
|
||
<view class="moduleTitle">{{popData.dateName}}</view>
|
||
<!-- 固定日期选项 -->
|
||
<view class="uni-flex align-center">
|
||
<view v-for="(d,index) in popData.dateList" :key="index" @click="selectDate(index,d.value)" class="tag-item"
|
||
:class="{'actived':dateIndex==index}">{{d.name}}</view>
|
||
</view>
|
||
<!-- 自定义日期选项 -->
|
||
<view class="uni-flex align-center screen-box" style="justify-content: space-between; margin: 0 120rpx;" v-if="popData.dateList[dateIndex].value==0">
|
||
<picker mode="date" @change="bindDateChange($event,0)" :value="searchTime[0]"
|
||
:end="pageData.endDate" start="2019/12/01" class="screen-unit">
|
||
<text>{{searchTime[0]}}</text>
|
||
<!-- <image src="/static/images/tab_down.png" mode="aspectFit"></image> -->
|
||
</picker>
|
||
<text class="mr20">至</text>
|
||
<picker mode="date" @change="bindDateChange($event,1)" :value="searchTime[1]"
|
||
:end="pageData.endDate" start="2019/12/01" class="screen-unit">
|
||
<text>{{searchTime[1]}}</text>
|
||
<!-- <image src="/static/images/tab_down.png" mode="aspectFit"></image> -->
|
||
</picker>
|
||
</view>
|
||
<!-- 其他选项 -->
|
||
<view class="moduleTitle">{{popData.typeName}}</view>
|
||
<view class="uni-flex ai-center menu-list">
|
||
<view class="menu" v-for="(item,index) in popData.selectList" :key="index" @click="bindPartChange(item)">
|
||
<view class="menu-image round" style="height:74rpx;width:74rpx;border-radius:20rpx;line-height:74rpx;"
|
||
:style="'background:' + (popData.colors[index] ? popData.colors[index] : popData.colors[index-popData.colors.length]) + ';'">
|
||
<image :src="activeType==item.id ? item.active: item.src" mode="aspectFit" style="height:100%;"></image>
|
||
</view>
|
||
<view class="menuName" :style="selectTypeIndex==item.typeId ?
|
||
'color:' + (popData.colors[index]? popData.colors[index] :
|
||
popData.colors[index % 7]) : 'color:#120E2B'">{{item.name}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="popbtn" @click="reloadList">确定</view>
|
||
</view>
|
||
</UniPop>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import {mapGetters,mapMutations} from 'vuex'
|
||
//列表卡片组件
|
||
import ListUnit from "./components/listUnit.vue"
|
||
//弹窗组件
|
||
import UniPop from '@/components/uni-popup.vue'
|
||
export default {
|
||
components: {//import引入的组件需要注入到对象中才能使用
|
||
ListUnit,
|
||
UniPop
|
||
},
|
||
data() {//这里存放数据
|
||
const today = this.$util.cutDate(new Date(), 'YYYY/MM/DD')
|
||
const week = this.$util.cutDate(new Date(),'YYYY/MM/DD',-6)
|
||
const month = this.$util.cutDate(new Date(),'YYYY/MM/DD',-30)
|
||
const threeMonth = this.$util.cutDate(new Date(),'YYYY/MM/DD',-90)
|
||
return {
|
||
activeType: -1,//默认选择全部
|
||
selectTypeIndex: -1,//默认选择全部
|
||
dateIndex: 0, //选中的日期标签
|
||
showPop: false,
|
||
searchTime: [week, today],
|
||
pageData: {
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
isEnd: false,
|
||
isLoading: true,
|
||
endDate: today
|
||
},
|
||
menuList: [ //列表头部菜单选项标签
|
||
{
|
||
name: '全部',
|
||
src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yifq.png',
|
||
active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yifqz.png',
|
||
id: -1
|
||
},
|
||
{
|
||
name: '长短款异常',
|
||
src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yifq.png',
|
||
active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yifqz.png',
|
||
id: 0
|
||
},
|
||
{
|
||
name: '结账前稽核',
|
||
src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yifq.png',
|
||
active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yifqz.png',
|
||
id: 2
|
||
},
|
||
{
|
||
name: '更多筛选',
|
||
src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shaix.png',
|
||
active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shaixz.png',
|
||
id: 99
|
||
},
|
||
],
|
||
popData:{
|
||
//更多选项中卡片颜色
|
||
colors: ['#5B96E9', '#F0A038', '#5B96E9', '#57BAAE', '#D9675C', '#5B96E9', '#57BAAE'],
|
||
//更多选项中日期选项名称
|
||
dateName:"日期",
|
||
//更多选项中日期选项数据源
|
||
dateList: [//更多选项中的日期标签
|
||
{
|
||
name: '近七天',
|
||
value: [week,today]
|
||
},
|
||
{
|
||
name: '近一月',
|
||
value: [month,today]
|
||
},
|
||
{
|
||
name: '近三月',
|
||
value: [threeMonth,today]
|
||
},
|
||
{
|
||
name: '自定义',
|
||
value: 0
|
||
},
|
||
],
|
||
typeName:"抹平状态",
|
||
selectList: [//更多选项中的类型标签
|
||
{
|
||
name: '全部',
|
||
src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/qb.png',
|
||
typeId: -1
|
||
},
|
||
{
|
||
name: '长短款相同',
|
||
src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/qb.png',
|
||
typeId: 0
|
||
},
|
||
{
|
||
name: '长短款不相同',
|
||
src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/qb.png',
|
||
typeId: 1
|
||
},
|
||
{
|
||
name: '长短款抹平',
|
||
src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/qb.png',
|
||
typeId: 2
|
||
},
|
||
],
|
||
},
|
||
pageList: []
|
||
}
|
||
},
|
||
computed: {//监听属性 类似于data概念
|
||
...mapGetters({
|
||
reloading: 'shouldReLoadingList'
|
||
})
|
||
},
|
||
methods: {//方法集合
|
||
...mapMutations(['shouldReLoadingList']),
|
||
selectDate(dayIndex, dayValue) {
|
||
this.dateIndex = dayIndex
|
||
if (dayValue !== 0) {
|
||
this.searchTime = this.popData.dateList[this.dateIndex].value
|
||
}
|
||
this.$forceUpdate()
|
||
},
|
||
/**
|
||
* 日期缓存刷新
|
||
* @param {Object} e
|
||
* @param {Object} index
|
||
*/
|
||
bindDateChange(e, index) {
|
||
this.searchTime[index] = e.detail.value
|
||
this.$forceUpdate()
|
||
},
|
||
/**
|
||
* 查询数据稽查数据
|
||
*/
|
||
searchList() {
|
||
uni.showLoading({
|
||
title: '正在加载'
|
||
})
|
||
this.pageData.isLoading = true
|
||
this.pageData.isEnd = false
|
||
this.pageData.pageIndex = 1
|
||
this.getList()
|
||
uni.pageScrollTo({
|
||
scrollTop: 0,
|
||
duration: 300
|
||
})
|
||
},
|
||
/**
|
||
* 调用接口获取
|
||
*
|
||
* Api接口地址：EShangApiMain/Audit/GetABNORMALAUDITList
|
||
*/
|
||
getList() {
|
||
this.$request.$webPostTest("EShangApiMain/Audit/GetABNORMALAUDITList", {
|
||
QueryType: 0,//这里设置查询方式，0：模糊查询；1：精准查询
|
||
SearchParameter: {
|
||
//这里设置查询参数条件
|
||
ABNORMALAUDIT_TYPE: this.activeType === -1 ? null : this.activeType,
|
||
CHECK_STARTDATE_SEARCH: this.searchTime[0],
|
||
CHECK_ENDDATE_SEARCH: this.searchTime[1],
|
||
ERASE_TYPE: this.selectTypeIndex === -1 ? null : this.selectTypeIndex
|
||
},
|
||
pageIndex: this.pageData.pageIndex,
|
||
pageSize: this.pageData.pageSize,
|
||
}).then(res => {
|
||
if (!res.Result_Code || res.Result_Code != 100) {
|
||
this.pageData.isLoading = false
|
||
this.pageList = []
|
||
} else {
|
||
//筛选数据（请根据实际业务修改）
|
||
let list = res.Result_Data.List.filter(p => {
|
||
//if (this.activeType == 1) {
|
||
//return p.CHECKACCOUNT_DESC.length == 0
|
||
//} else if (this.activeType == 2) {
|
||
//return p.CHECKACCOUNT_DESC.length > 0
|
||
//} else {
|
||
return true
|
||
//}
|
||
})
|
||
if (list.length > 0) {
|
||
if (this.pageData.pageIndex == 1) {
|
||
this.pageList = list
|
||
} else {
|
||
this.pageList = [...this.pageList, ...list]
|
||
}
|
||
}
|
||
if (list.length < this.pageData.pageSize) { // 返回条数小于每页条数
|
||
this.pageData.isEnd = true
|
||
}
|
||
this.$forceUpdate()
|
||
}
|
||
uni.hideLoading()
|
||
let _this = this
|
||
setTimeout(function() {
|
||
_this.pageData.isLoading = false
|
||
}, 500)
|
||
})
|
||
},
|
||
/**
|
||
* 加载下一页
|
||
*/
|
||
loadMore() {
|
||
if (!this.pageData.isEnd) {
|
||
this.pageData.pageIndex += 1
|
||
this.getList()
|
||
}
|
||
},
|
||
/**
|
||
* 绑定信息卡片点击跳转页面
|
||
* @param {Object} item
|
||
*/
|
||
goDetail(item) {
|
||
this.$util.toNextRoute('navigateTo', '/pages/autoTest/abnormalaudit/detail?ABNORMALAUDITId=' + item.ABNORMALAUDIT_ID)
|
||
},
|
||
reloadList() {
|
||
this.showPop = false
|
||
this.pageData.pageIndex = 1
|
||
uni.showLoading({
|
||
title: '正在加载'
|
||
})
|
||
this.pageData.isLoading = true
|
||
this.pageData.isEnd = false
|
||
this.pageList = []
|
||
this.getList()
|
||
this.$forceUpdate()
|
||
},
|
||
closePop() {
|
||
this.showPop = false
|
||
},
|
||
handleClick(item) {//顶部菜单标签点击事件
|
||
if (item.id == 99) {//标签 id=99 代表点击了更多筛选
|
||
this.showPop = true
|
||
} else {
|
||
this.activeType = item.id
|
||
this.reloadList()
|
||
}
|
||
},
|
||
bindPartChange(item) {
|
||
this.selectTypeIndex = item.typeId
|
||
},
|
||
},
|
||
onPullDownRefresh() {
|
||
uni.showLoading({
|
||
title: '正在加载'
|
||
})
|
||
this.pageData.pageIndex = 1
|
||
this.pageData.isLoading = true
|
||
this.pageData.isEnd = false
|
||
this.getList()
|
||
setTimeout(function() {
|
||
uni.stopPullDownRefresh()
|
||
}, 1000)
|
||
},
|
||
//页面滑动到底部
|
||
onReachBottom() {
|
||
//加载下一页数据
|
||
this.loadMore()
|
||
},
|
||
//页面打开
|
||
onShow() {
|
||
let _this = this
|
||
if (this.reloading) {
|
||
uni.showLoading({
|
||
title: '正在加载'
|
||
})
|
||
this.pageData.isLoading = true
|
||
this.pageData.pageIndex = 1
|
||
this.pageData.isEnd = false
|
||
this.getList()
|
||
this.shouldReLoadingList(false)
|
||
}
|
||
},
|
||
//页面加载
|
||
onLoad() {
|
||
uni.showLoading({
|
||
title: '正在加载'
|
||
})
|
||
this.pageData.isLoading = true
|
||
this.getList()
|
||
},
|
||
//页面关闭
|
||
onUnload() {
|
||
this.$util.addUserBehavior()
|
||
},
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.menu-list {//顶部菜单样式
|
||
width: 100%;
|
||
background-color: #fff;
|
||
flex-wrap: wrap;
|
||
}
|
||
.moduleTitle {
|
||
text-align: left;
|
||
margin: 16rpx 0 0 24rpx;
|
||
font-weight: 700;
|
||
font-size: 30rpx;
|
||
padding: 24rpx 0 12rpx 0;
|
||
}
|
||
.popbtn {
|
||
width: 639rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
background: #5b96e9;
|
||
border-radius: 8rpx;
|
||
margin: 48rpx auto 24rpx auto;
|
||
}
|
||
.screen-box {
|
||
background-color: #fff;
|
||
padding: 0 0rpx;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 1;
|
||
}
|
||
.screen-box .screen-unit {
|
||
display: flex;
|
||
align-items: center;
|
||
width: auto;
|
||
padding: 0 0rpx;
|
||
line-height: 3;
|
||
}
|
||
.screen-box text {
|
||
line-height: 3;
|
||
}
|
||
.tag-item {
|
||
width: 150rpx;
|
||
height: 66rpx;
|
||
background: #ffffff;
|
||
border: 1rpx solid #efefef;
|
||
border-radius: 8rpx;
|
||
color: #808D97;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
line-height: 64rpx;
|
||
margin: 24rpx 0 24rpx 24rpx;
|
||
}
|
||
.tag-item.actived {
|
||
background: #e8f3fd;
|
||
border: 1rpx solid #e8f3fd;
|
||
color: #4D95F0;
|
||
}
|
||
.padding-bottom {
|
||
padding-bottom: 24rpx;
|
||
}
|
||
.round {
|
||
border-radius: 50%;
|
||
}
|
||
.menu {
|
||
text-align: center;
|
||
min-width: 185rpx;
|
||
padding: 24rpx 0;
|
||
}
|
||
.menuName {
|
||
color: #120E2B;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
margin-top: 16rpx;
|
||
}
|
||
.menu-image {
|
||
padding: 12rpx 8rpx;
|
||
height: 80rpx;
|
||
box-sizing: border-box;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
.menu-image image {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
}
|
||
</style>
|