472 lines
12 KiB
Vue
472 lines
12 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[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">服务区名称</view>
|
||
<view class="uni-flex align-center screen-box"
|
||
style="justify-content: space-between; margin: 0 120rpx;">
|
||
<picker class="title-clock" mode="selector" @change="pickerChange" :value="pickerIndex"
|
||
range-key="label" :range="severpartList">
|
||
<view class="box-center-title">{{severpartList[pickerIndex].label}}</view>
|
||
</picker>
|
||
</view>
|
||
<!-- 日期选项 -->
|
||
<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,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="popbtn" @click="reloadList">确定</view>
|
||
</view>
|
||
</UniPop>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState,
|
||
mapGetters,
|
||
mapMutations
|
||
} from 'vuex'
|
||
//列表卡片组件
|
||
import ListUnit from "./components/listUnit.vue"
|
||
//弹窗组件
|
||
import UniPop from '@/components/uni-popup.vue'
|
||
|
||
export default {
|
||
components: { //import引入的组件需要注入到对象中才能使用
|
||
ListUnit,
|
||
UniPop
|
||
},
|
||
|
||
data() { //这里存放数据
|
||
let stime = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -6)
|
||
let etime = this.$util.cutDate(new Date(), 'YYYY-MM-DD')
|
||
return {
|
||
activeType: 0, //选中的延期类型
|
||
selectTypeIndex: 0, //选中的稽查类型
|
||
dateIndex: 0, //选中的日期标签
|
||
showPop: false,
|
||
searchTime: [stime, etime],
|
||
pageData: {
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
isEnd: false,
|
||
isLoading: true,
|
||
endDate: etime
|
||
},
|
||
optionData: null,
|
||
severpartList: [],
|
||
pickerIndex: 0,
|
||
menuList: [{ //列表头部菜单选项标签
|
||
name: '全部',
|
||
src: '../../../../../static/images/expense/type/yifq.png',
|
||
active: '../../../../../static/images/expense/type/yifqz.png',
|
||
id: 0
|
||
}, {
|
||
name: '待延期',
|
||
src: '../../../../../static/images/expense/type/shenp.png',
|
||
active: '../../../../../static/images/expense/type/shenpz.png',
|
||
id: 1
|
||
}, {
|
||
name: '已延期',
|
||
src: '../../../../../static/images/expense/type/yichl.png',
|
||
active: '../../../../../static/images/expense/type/yichlz.png',
|
||
id: 2
|
||
}, {
|
||
name: '更多筛选',
|
||
src: '../../../../../static/images/expense/type/shaix.png',
|
||
active: '../../../../../static/images/expense/type/shaixz.png',
|
||
id: 99
|
||
}, ],
|
||
popData: {
|
||
//更多选项中卡片颜色
|
||
colors: ['#5B96E9', '#F0A038', '#5B96E9', '#57BAAE', '#D9675C', '#5B96E9', '#57BAAE'],
|
||
//更多选项中日期选项名称
|
||
dateName: "日期",
|
||
//更多选项中日期选项数据源
|
||
dateList: [ //更多选项中的日期标签
|
||
{
|
||
name: '自定义',
|
||
value: 0
|
||
},
|
||
],
|
||
typeName: "类型",
|
||
selectList: [{ //更多选项中的类型标签
|
||
name: '全部',
|
||
src: '../../../../../static/images/expense/type/qb.png',
|
||
typeId: 0
|
||
}, {
|
||
name: '类型1',
|
||
src: '../../../../../static/images/expense/type/fksp.png',
|
||
typeId: 1
|
||
}, {
|
||
name: '类型2',
|
||
src: '../../../../../static/images/expense/type/fksp.png',
|
||
typeId: 2
|
||
}, {
|
||
name: '类型3',
|
||
src: '../../../../../static/images/expense/type/fksp.png',
|
||
typeId: 3
|
||
}, {
|
||
name: '类型4',
|
||
src: '../../../../../static/images/expense/type/fksp.png',
|
||
typeId: 4
|
||
}],
|
||
},
|
||
pageList: [],
|
||
}
|
||
},
|
||
|
||
computed: { //监听属性 类似于data概念
|
||
...mapGetters({
|
||
reloading: 'shouldReLoadingList'
|
||
}),
|
||
...mapState({
|
||
user: (state) => {
|
||
return state.userData
|
||
},
|
||
}),
|
||
},
|
||
methods: { //方法集合
|
||
...mapMutations(['shouldReLoadingList']),
|
||
selectDate(dayIndex, days) {
|
||
this.dateIndex = dayIndex
|
||
if (days > 0) {
|
||
this.searchTime[0] = this.$util.cutDate(new Date(), 'YYYY-MM-DD', (-1 * days))
|
||
this.searchTime[1] = this.$util.cutDate(new Date(), 'YYYY-MM-DD')
|
||
}
|
||
// this.$forceUpdate()
|
||
},
|
||
|
||
/**
|
||
* 日期缓存刷新
|
||
* @param {Object} e
|
||
* @param {Object} index
|
||
*/
|
||
bindDateChange(e, index) {
|
||
this.searchTime[index] = e.detail.value
|
||
this.$forceUpdate()
|
||
},
|
||
pickerChange(e) {
|
||
this.pickerIndex = e.detail.value
|
||
this.pageData.pageIndex = 1
|
||
// this.getList()
|
||
},
|
||
/**
|
||
* 查询数据稽查数据
|
||
*/
|
||
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/BusinessMan/Getcommodity_tempList
|
||
*/
|
||
getList() {
|
||
this.$request.$webPost("EShangApiMain/BusinessMan/Getcommodity_tempList", {
|
||
QueryType: 0, //这里设置查询方式，0：模糊查询；1：精准查询
|
||
SearchParameter: {
|
||
//这里设置查询参数条件
|
||
SERVERPART_ID: this.optionData && this.optionData.serverpartid ?
|
||
this.optionData.serverpartid : this.severpartList[this.pickerIndex].value,
|
||
STATISTICS_DATE: this.optionData && this.optionData.statisticsdate ?
|
||
this.optionData.statisticsdate : this.searchTime[1],
|
||
COMMODITY_TEMP_STATE: this.activeType && this.activeType.COMMODITY_TEMP_STATE ? this.activeType.COMMODITY_TEMP_STATE : ''
|
||
},
|
||
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.COMMODITY_TEMP_STATE == 1
|
||
} else if (this.activeType == 2) {
|
||
return p.COMMODITY_TEMP_STATE == 2
|
||
} 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/commodity_temp/detail?COMMODITY_TEMP_ID=' + item.COMMODITY_TEMP_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
|
||
},
|
||
//服务区列表
|
||
getSeverpart() {
|
||
const _this = this
|
||
this.$request.$webGet('EShangApiMain/Logging/GetPassportInfoById', {
|
||
UserIdEncrypted: this.user.UserIdEncrypted
|
||
}).then(res => {
|
||
if (!res.Result_Code || res.Result_Code != '100') {
|
||
_this.severpartList = []
|
||
} else {
|
||
this.$request.$webGet('EShangApiMain/BaseInfo/GetServerpartDDL', {
|
||
ServerpartCodes: res.Result_Data.CityAuthority,
|
||
ServerpartType: 1000,
|
||
StatisticsType: '1000,2000'
|
||
}).then(res => {
|
||
_this.severpartList = res.Result_Data.List
|
||
this.getList()
|
||
})
|
||
}
|
||
})
|
||
},
|
||
},
|
||
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(option) {
|
||
uni.showLoading({
|
||
title: '正在加载'
|
||
})
|
||
this.optionData = option
|
||
this.pageData.isLoading = true
|
||
this.getSeverpart()
|
||
},
|
||
//页面关闭
|
||
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>
|