406 lines
15 KiB
Vue
406 lines
15 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="pop">
|
||
<p class="title">服务区名称</p>
|
||
<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>
|
||
<p class="title" style="margin-top: 20px">日期</p>
|
||
<view class="selectTime">
|
||
<picker class="time" mode="date" @change="handlechangeTime($event,0)">
|
||
<text>{{'请选择开始时间'}}</text>
|
||
</picker>
|
||
-
|
||
<picker class="time" style="text-align: right" mode="date" @change="handlechangeTime($event,1)">
|
||
<text>{{'请选择结束时间'}}</text>
|
||
</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: {ListUnit,UniPop},
|
||
data() {
|
||
let stime = ''
|
||
let etime = ''
|
||
return {
|
||
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: 0
|
||
}, {
|
||
name: '待切换',
|
||
src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shenp.png',
|
||
active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shenpz.png',
|
||
id: 1
|
||
}, {
|
||
name: '已切换',
|
||
src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yichl.png',
|
||
active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yichlz.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
|
||
} ],
|
||
activeType: 0, // 选中的延期类型
|
||
showPop: false,
|
||
pageList:[],
|
||
severpartList:[],// 服务区列表
|
||
pickerIndex: 0,
|
||
searchTime: [stime, etime],
|
||
pageData: {
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
isEnd: false,
|
||
isLoading: true,
|
||
endDate: etime
|
||
},
|
||
pushInto:false,// 是否为推送进来
|
||
TotalCount: '',
|
||
}
|
||
},
|
||
computed: { //监听属性 类似于data概念
|
||
...mapGetters({
|
||
reloading: 'shouldReLoadingList'
|
||
}),
|
||
...mapState({
|
||
user: (state) => {
|
||
return state.userData
|
||
},
|
||
}),
|
||
},
|
||
onLoad(query){
|
||
if(query){
|
||
this.pushInto = true
|
||
}
|
||
this.getSeverpart()
|
||
},
|
||
onShow(){
|
||
this.pageData.pageIndex = 1
|
||
this.handleGetList()
|
||
this.pageData.isEnd = false
|
||
},
|
||
onReachBottom () {
|
||
if (!this.pageData.isEnd){
|
||
this.pageData.pageIndex+=1
|
||
this.handleGetList()
|
||
}
|
||
},
|
||
//页面关闭
|
||
onUnload() {
|
||
this.$util.addUserBehavior()
|
||
},
|
||
methods:{
|
||
...mapMutations(['shouldReLoadingList']),
|
||
// 拿到列表数据
|
||
handleGetList(){
|
||
let data = {}
|
||
if (this.pushInto){
|
||
data = {
|
||
searchModel:{
|
||
QueryType: 0 , //这里设置查询方式，0：模糊查询；1：精准查询
|
||
SearchParameter:{
|
||
PROJECTWARNING_ID :'',// 预警表内码
|
||
BUSINESSPROJECTSPLIT_ID:'',// 经营项目应收拆分表内码
|
||
BUSINESSPROJECT_NAME:'',// 经营项目名称
|
||
SHOPROYALTY_ID:'',// 门店提成营收内码
|
||
SERVERPART_ID:'',// 服务区内码
|
||
SERVERPART_IDS:this.severpartList[this.pickerIndex].value,// 服务区内码(查询条件)
|
||
// SERVERPART_IDS:'',// 服务区内码(查询条件)
|
||
SERVERPART_NAME:'',// 服务区名称
|
||
SERVERPARTSHOP_NAME:'',// 门店名称
|
||
BUSINESS_TYPE:'',// 经营模式
|
||
STARTDATE: '',// 开始时间
|
||
ENDDATE: '',// 结束时间
|
||
MINTURNOVER:'',// 保底租金
|
||
ROYALTY_PRICE:'',// 业主分润
|
||
ROYALTY_RATE:'',// 切换前比例
|
||
ROYALTY_CRATE:'',// 切换后比例
|
||
EXPIREDAYS:'',// 预估到期天数
|
||
WARNING_DATE:'',// 提醒日期
|
||
WARNING_DATE_Start:this.searchTime[0],// 提醒日期(查询条件)
|
||
WARNING_DATE_End:this.searchTime[1],// 提醒日期(查询条件)
|
||
PROJECTWARNING_STATE:'',// 审批状态
|
||
PROJECTWARNING_STATES:this.activeType===1?'1000,2000':this.activeType===2?'9000':'',// 审批状态(查询条件)
|
||
RECORD_DATE:'',// 记录时间
|
||
PROJECTWARNING_DESC:'',// 备注说明
|
||
REVENUE_AMOUNT:'',// 营收金额
|
||
SUBROYALTY_PRICE:'',// 商家分润
|
||
TICKET_FEE:'',// 手续费
|
||
BUSINESSDAYS:'',// 营业天数
|
||
REVENUEDAILY_AMOUNT:'',// 当日营业额
|
||
},
|
||
keyWord:{
|
||
Key:'',// 字段
|
||
Value:'',// 值
|
||
},
|
||
PageIndex: this.pageData.pageIndex,// 查询页码数
|
||
PageSize: this.pageData.pageSize,// 页显示数量
|
||
SortStr:'DealMark,PROJECTWARNING_STATE,EXPIREDAYS,WARNING_DATE desc',// 排序条件
|
||
}
|
||
}
|
||
}else{
|
||
|
||
}
|
||
this.$request.$webPost("EShangApiMain/BusinessProject/GetPROJECTWARNINGList", data.searchModel).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 (p.SWITCH_DATE){
|
||
const date = new Date(p.SWITCH_DATE)
|
||
const y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
let d = date.getDate()
|
||
if (m<10){
|
||
m = '0'+m
|
||
}
|
||
if (d<10){
|
||
d = '0'+d
|
||
}
|
||
p.CHANG_DATE = `${y}-${m}-${d}`
|
||
}
|
||
if (this.activeType === 1) {
|
||
return p.PROJECTWARNING_STATE === 1000 || p.PROJECTWARNING_STATE === 2000
|
||
} else if (this.activeType === 2) {
|
||
return p.PROJECTWARNING_STATE === 9000
|
||
} else {
|
||
return true
|
||
}
|
||
|
||
})
|
||
console.log('list',list)
|
||
if (list.length > 0) {
|
||
this.TotalCount = res.Result_Data.TotalCount
|
||
if (this.pageData.pageIndex === 1) {
|
||
this.pageList = list
|
||
if (list.length<this.TotalCount){
|
||
|
||
}else{
|
||
this.pageData.isEnd = true
|
||
}
|
||
} else {
|
||
if (this.pageList.length<this.TotalCount){
|
||
this.pageList = this.pageList.concat(list)
|
||
}else{
|
||
this.pageData.isEnd = true
|
||
}
|
||
}
|
||
}else{
|
||
this.pageData.isEnd = true
|
||
}
|
||
this.$forceUpdate()
|
||
}
|
||
uni.hideLoading()
|
||
let _this = this
|
||
setTimeout(function() {
|
||
_this.pageData.isLoading = false
|
||
}, 500)
|
||
})
|
||
},
|
||
//服务区列表
|
||
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.severpartList.unshift({label:'全部服务区',value:''})
|
||
this.handleGetList()
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 选择开始时间
|
||
handlechangeTime(e, index){
|
||
if (index===1){
|
||
let startTime = new Date(this.searchTime[0]).getTime()
|
||
let endTime = new Date(e.detail.value).getTime()
|
||
if (startTime>endTime){
|
||
uni.showToast({
|
||
title: '结束时间不能小于开始时间',
|
||
icon: 'none',
|
||
})
|
||
}else{
|
||
this.searchTime[index] = e.detail.value
|
||
this.$forceUpdate()
|
||
}
|
||
}else{
|
||
this.searchTime[index] = e.detail.value
|
||
this.$forceUpdate()
|
||
}
|
||
},
|
||
pickerChange(e) {
|
||
this.pickerIndex = e.detail.value
|
||
this.pageData.pageIndex = 1
|
||
},
|
||
reloadList() {
|
||
let startTime = new Date(this.searchTime[0]).getTime()
|
||
let endTime = new Date(this.searchTime[1]).getTime()
|
||
if (startTime>=endTime){
|
||
uni.showToast({
|
||
title: '结束时间不能小于等于开始时间',
|
||
icon: 'none',
|
||
})
|
||
}else{
|
||
this.showPop = false
|
||
this.pageData.pageIndex = 1
|
||
uni.showLoading({
|
||
title: '正在加载'
|
||
})
|
||
this.pageData.isLoading = true
|
||
this.pageData.isEnd = false
|
||
this.pageList = []
|
||
this.handleGetList()
|
||
this.$forceUpdate()
|
||
}
|
||
},
|
||
handleClick(item) { //顶部菜单标签点击事件
|
||
if (item.id === 99) { //标签 id=99 代表点击了更多筛选
|
||
this.showPop = true
|
||
} else {
|
||
this.activeType = item.id
|
||
this.reloadList()
|
||
}
|
||
},
|
||
goDetail(item){
|
||
this.$util.toNextRoute('navigateTo', `/pages/projectWarning/detail?id=${item.PROJECTWARNING_ID}&type=no`)
|
||
},
|
||
closePop(){
|
||
this.showPop = false
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.menu-list {
|
||
//顶部菜单样式
|
||
width: 100%;
|
||
background-color: #fff;
|
||
flex-wrap: wrap;
|
||
}
|
||
.menu {
|
||
text-align: center;
|
||
min-width: 185rpx;
|
||
padding: 24rpx 0;
|
||
}
|
||
|
||
.round {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.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%;
|
||
}
|
||
|
||
|
||
.screen-box {
|
||
background-color: #fff;
|
||
padding: 0 0rpx;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 1;
|
||
}
|
||
.pop{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 16px;
|
||
text-align: left;
|
||
}
|
||
.pop .title{
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
.pop .title-clock{
|
||
display: inline-block;
|
||
}
|
||
.pop .selectTime{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.pop .selectTime .time{
|
||
width: 45%;
|
||
}
|
||
.pop .popbtn {
|
||
width: 639rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
background: #5b96e9;
|
||
border-radius: 8rpx;
|
||
margin: 48rpx auto 24rpx auto;
|
||
text-align: center;
|
||
}
|
||
</style>
|