研报7.0 bug修复

pages-sandTable/sandTable.vue

@@ -1,4 +1,4 @@
-<template >
+<template>
 	<page-meta :page-style="'padding-bottom: 0;'+'overflow:'+((showFilter||show||showPoster)?'hidden':'visible')"/>
 	<view style="background-color: #F6F6F6;">
 		<!-- 没有权限 -->
@@ -29,30 +29,30 @@
 			</view>
 		</block>
 		<!-- 有权限 -->
-		<block v-show="noAuthor ==0 && isFinished">
-			<view style="height: 2rpx;background-color: #F6F6F6;"></view>
-			<van-sticky style="background: #fff;">
-			  <view class="search-wrap">
-				  <van-search
-					  shape="round"
-					  placeholder="沙盘图名称搜索"
-					  clear-trigger="always"
-					  style="flex-grow: 1"
-					  :value="sandTableQuery.keyword"
-					  @change="searchValChange"
-					  @search="onSearch"
-					  @clear="onClearSearch"
-					  placeholderStyle="color: #999999;"
-				  />
-				  <view class="filtration-icon-zone" @click="showFiltration">
-					<image
-					  src="../static/sandTable/sandTable_filtration.png"
-					  mode="widthFix"
-					  class="menu-icon"/>
-					<text>筛选</text>
+		<view v-show="noAuthor ==0 && isFinished" style="padding-top: 156rpx;">
+			<view style="position: fixed;top: 0;width: 100vw;">
+				<view style="height: 2rpx;background-color: #F6F6F6;"></view>
+				  <view class="search-wrap">
+					  <van-search
+						  shape="round"
+						  placeholder="沙盘图名称搜索"
+						  clear-trigger="always"
+						  style="flex-grow: 1"
+						  :value="sandTableQuery.keyword"
+						  @change="searchValChange"
+						  @search="onSearch"
+						  @clear="onClearSearch"
+						  placeholderStyle="color: #999999;"
+					  />
+					  <view class="filtration-icon-zone" @click="showFilter=true">
+						<image
+						  src="../static/sandTable/sandTable_filtration.png"
+						  mode="widthFix"
+						  class="menu-icon"/>
+						<text>筛选</text>
+					  </view>
 				  </view>
-			  </view>
-			</van-sticky>
+			</view>
 			<!-- 无数据 -->
 			<view class="sandTable-noData" v-if="!list">
 				<image :src="globalImgUrls.sandBoxNoAuthor" mode="aspectFit"></image>
@@ -73,39 +73,47 @@
 						</view>
 					</view>
 					<view class="sandTable-item" @click="previewImage(index)">
-						<image :src="item.pic_url"></image>
-						<view class="sandTable-item-origin">
+						<image :src="item.pic_url" mode="aspectFit"></image>
+<!-- 						<view class="sandTable-item-origin">
 							来源：弘则研究
-						</view>
+						</view> -->
 					</view>
 				</view>
+				<view v-if="list.length==total && list.length>0" class="bottom_text">已经到底了</view>
 			</view>
-		</block>
+		</view>
 	</view>
 	<!-- 筛选弹窗 -->
-	<van-popup :show="showFilter" round position="bottom" @close="showFilter = false" z-index="99999">
+	<van-popup :show="showFilter" round position="bottom" @close="showFilter = false" z-index="99999" :safe-area-inset-bottom="true" >
 		<view class="filter-container">
 			<view class="filter-container-header">
 				<text>全部筛选</text>
 				<text style="color: #E3B377;" @click="showFilter=false">取消</text>
 			</view>
-			<view class="cunstom_dropdown_menu_container">
-				<view class="cunstom_dropdown_menu" v-for="item in classfyList" :key="item.id"
-				:style="item.id==selectedFirstId||'height:38rpx'">
-					<view class="cunstom_dropdown_menu_firstT" @click="selectFisrtClassify(item)">
-						<text>{{item.classify_name}}</text>
-						<image src="../static/arrow-right.png" style="width:14rpx ;height: 22rpx;" 
-						:class="{'selected_first': selectedFirstId==item.id}"></image>
-					</view>
-					<view class="cunstom_dropdown_item_box">
-						<view :class="['cunstom_dropdown_item',{'selected_second': selectedSecondId==it.chart_permission_id}]" 
-						v-for="it in item.list" :key='it.chart_permission_id' @click="selectedSecondId=it.chart_permission_id">
-							<text>{{it.chart_permission_name}}</text>
-						</view>
-					</view>
-				</view>
+			<view class="list-box">
+				<van-collapse accordion @change="selectFisrtClassify" :value="selectedFirstId" :border="false">
+					<van-collapse-item
+						:title="item.classify_name" 
+						:name='item.id' 
+						:border="false"
+						v-for="item in classfyList"
+						:key="item.id"
+					>
+						<van-row gutter="5">
+							<van-col 
+								:span="_item.chart_permission_name.length>7?16:8" 
+								v-for="_item in item.list" 
+								:key="_item.chart_permission_id"
+							>
+								<text 
+									:class="['list-item',_item.chart_permission_id==selectedSecondId&&'list-item-active']" 
+									@click="handleSelectPerItem(_item)"
+								>{{_item.chart_permission_name}}</text>
+							</van-col>
+						</van-row>
+					</van-collapse-item>
+				</van-collapse>
 			</view>
-			<button type="default" @click="classifyFilter">完成</button>
 		</view>
 	</van-popup>
 	<!-- 分享按钮 -->
@@ -144,13 +152,12 @@
 				classfyList:[],
 				selectedFirstId:0,
 				selectedSecondId:0,
-				// 确认选中的分类Id
-				confirmFirstId:0, 
-				confirmSecondId:0,
 				// 是否显示过全部加载弹窗
 				haveShowToast:false,
 				showPoster:false,
 				show:false,
+				// 是否跳转到申请结果页面
+				haveGoToResult:false,
 				// 是否请求完成
 				isFinished:false,
 				posterImg:'',
@@ -175,21 +182,26 @@
 		onLoad(options) {
 			// 有sandbox_id 说明是单个分享进来的
 			if(options.sandbox_id){
-				this.confirmFirstId = options.firstClassifyId || 0
-				this.confirmSecondId = options.chart_permission_id || 0
+				this.selectedFirstId = options.firstClassifyId || 0
+				this.selectedSecondId = options.chart_permission_id || 0
 				this.getSandBoxDetail(options.sandbox_id)
 			}else{
 				this.sandTableQuery.keyword = options.keyword || ""
-				this.confirmFirstId = options.firstClassifyId || 0
-				this.sandTableQuery.chart_permission_id = this.confirmSecondId = options.chart_permission_id || 0
+				this.selectedFirstId = options.firstClassifyId || 0
+				this.sandTableQuery.chart_permission_id = this.selectedSecondId = options.chart_permission_id || 0
 				this.sandTableQuery.is_high_light = options.is_high_light || false
 				this.getSandBoxList()
 			}
 			this.getClassifyList()
 		},
-		onShow() {
+		onShow(options) {
 			// 预览图片结束时，会触发onShow，切回竖屏
 			uni.setPageOrientation({orientation : "portrait"})
+			if(this.haveGoToResult){
+				//从申请结果页面回来 
+				this.getSandBoxList()
+				this.haveGoToResult=false
+			}
 		},
 		// 小程序自带分享
 		onShareAppMessage() {
@@ -197,12 +209,12 @@
 		    return {
 		        title:'沙盘推演',
 				path:`/pages-sandTable/sandTable?keyword=${keyword}&chart_permission_id=${chart_permission_id}`+
-				`&is_high_light=${is_high_light}&firstClassifyId=${this.confirmFirstId}`
+				`&is_high_light=${is_high_light}&firstClassifyId=${this.selectedFirstId}`
 		    }
 		},
 		onPullDownRefresh() {
 			this.sandTableQuery.curr_page=1
-			this.sandTableQuery.chart_permission_id=0
+			this.sandTableQuery.chart_permission_id = this.selectedSecondId = this.selectedFirstId=0
 			this.sandTableQuery.keyword=''
 			this.is_high_light=false
 			this.haveShowToast=false
@@ -212,13 +224,13 @@
 		onReachBottom() {
 			if(this.isRequseting) return 
 			if(this.list.length>=this.total && this.total!=0){
-				if(this.haveShowToast) return
-				// 只显示一次
-				this.haveShowToast = true
-				uni.showToast({
-					title:"没有了~",
-					icon:'none'
-				})
+				// if(this.haveShowToast) return
+				// // 只显示一次
+				// this.haveShowToast = true
+				// uni.showToast({
+				// 	title:"没有了~",
+				// 	icon:'none'
+				// })
 				return
 			}
 			this.sandTableQuery.curr_page++
@@ -300,12 +312,6 @@
 						item.list=item.list.filter(it=>it.auth_ok)
 					})
 					this.classfyList=this.classfyList.filter(item=>item.list.length!=0)
-					if(this.classfyList.length==0) return
-					if(this.confirmSecondId == 0){
-						// 不是通过分享进来的页面，或者分享过来的参数没有分类Id
-						this.selectedFirstId = this.confirmFirstId = this.classfyList[0].id
-						this.selectedSecondId = this.confirmSecondId = this.classfyList[0].list[0].chart_permission_id
-					}
 				})
 			},
 			// 权限申请
@@ -327,6 +333,7 @@
 							source:7,
 							from_page:'沙盘推演',
 						}).then(res=>{
+							this.haveGoToResult=true
 							uni.navigateTo({url:'/pages-applyPermission/applyResult'})
 						})
 					}else{
@@ -360,42 +367,35 @@
 					chart_permission_id: 0,
 					is_high_light:false
 				}
+				this.selectedFirstId = this.selectedSecondId = 0
 				this.haveShowToast=false
 				this.getSandBoxList()
 			},
 			// 确认搜索
 			onSearch(){
-			  this.sandTableQuery.chart_permission_id=0
+			  this.sandTableQuery.chart_permission_id= this.selectedFirstId = this.selectedSecondId = 0
 			  this.sandTableQuery.is_high_light = true
 			  this.haveShowToast=false
 			  this.getSandBoxList()
 			},
-			// 打开筛选
-			showFiltration(){
-				// 选中上次确认筛选的选项
-				this.selectedFirstId = this.confirmFirstId
-				this.selectedSecondId = this.confirmSecondId
-				this.showFilter = true
+			// 选中一级分类
+			selectFisrtClassify(e){
+				this.selectedFirstId = e.detail
 			},
-			// 分类筛选
-			classifyFilter(){
-				this.confirmFirstId = this.selectedFirstId
-				this.confirmSecondId = this.selectedSecondId
-				this.sandTableQuery.chart_permission_id = this.selectedSecondId
+			handleSelectPerItem(item){
+				if(this.selectedSecondId==item.chart_permission_id){
+				    this.sandTableQuery.chart_permission_id=this.selectedSecondId=0
+				}else{
+				    this.sandTableQuery.chart_permission_id=this.selectedSecondId=item.chart_permission_id
+				}
 				this.sandTableQuery.curr_page=1
 				uni.pageScrollTo({
 					scrollTop:0,
 					duration:300
 				})
-				this.haveShowToast=false
+				this.showFilter=false
 				this.getSandBoxList()
 			},
-			// 选中一级分类
-			selectFisrtClassify(item){
-				this.selectedFirstId=(this.selectedFirstId == item.id?0:item.id)
-				// 选中个第一分类的第一个二级分类
-				this.selectedSecondId = item.list[0].chart_permission_id
-			},
 			// 预览图片
 			previewImage(index){
 				// 先切换横屏才预览图片 ，预览图片开启之后 切换不了横屏
@@ -450,7 +450,7 @@
 						firstImageUrl = this.list[0].pic_url
 						secondImageUrl = this.list[1].pic_url
 					}
-					code_scene=`{keyword:${keyword},chart_permission_id:${chart_permission_id},is_high_light:${is_high_light},firstClassifyId:${this.confirmFirstId}}}`
+					code_scene=`{keyword:${keyword},chart_permission_id:${chart_permission_id},is_high_light:${is_high_light},firstClassifyId:${this.selectedFirstId}}}`
 					source = 'sandbox_list'
 					parsJson = {title_1:'沙盘推演',img_1:firstImageUrl,img_2:secondImageUrl}
 				}
@@ -608,6 +608,13 @@
 				}
 			}
 		}
+		.bottom_text{
+			display: flex;
+			justify-content: center;
+			height: 60rpx;
+			color: gray;
+			font-size: 32rpx;
+		}
 		// 过滤弹窗
 		.filter-container{
 			height: 700rpx;
@@ -625,61 +632,22 @@
 					color: #000000;
 				}
 			}
-			.cunstom_dropdown_menu_container{
-				overflow-y: auto;
-				height: 424rpx;
-				margin: 40rpx 0;
-				padding: 0 34rpx;
-				.cunstom_dropdown_menu{
-					margin-bottom: 40rpx;
-					overflow: hidden;
-					.cunstom_dropdown_menu_firstT{
-						display: flex;
-						align-items: center;
-						text{
-							margin-right: 14rpx;
-							font-size: 28rpx;
-							font-family: PingFang SC-Medium, PingFang SC;
-							font-weight: 500;
-							color: #333333;
-						}
-						image{
-							transform: rotate(0);
-							transition: all linear 0.1s;
-						}
-						.selected_first{
-							transform: rotate(90deg);
-						}
-					}
-					.cunstom_dropdown_item_box{
-						display: flex;
-						align-items: center;
-						justify-content: space-between;
-						margin-top: 30rpx;
-						flex-wrap: wrap;
-						.cunstom_dropdown_item{
-							min-width: 216rpx;
-							min-height: 76rpx;
-							padding: 10rpx;
-							background: #F6F6F6;
-							border-radius: 8rpx 8rpx 8rpx 8rpx;
-							display: flex;
-							align-items: center;
-							justify-content: center;
-							margin-bottom: 18rpx;
-							text{
-								font-size: 28rpx;
-								font-family: PingFang SC-Regular, PingFang SC;
-								font-weight: 400;
-								color: #000000;
-								word-break: break-all;
-							}
-						}
-						.selected_second{
-							background-color: #FAEEDE;
-						}
-					}
-				}
+			.list-box{
+			    min-height: 30vh;
+			    max-height: 60vh;
+			    .list-item{
+			        display: block;
+			        margin: 10rpx;
+			        height: 76rpx;
+			        line-height: 76rpx;
+			        color: #000;
+			        background: #F6F6F6;
+			        border-radius: 4px 4px 4px 4px;
+			        text-align: center;
+			    }
+			    .list-item-active{
+			        background-color: #FAEEDE;
+			    }
 			}
 			button{
 				position: absolute;
@@ -760,3 +728,21 @@
  /deep/ .van-search__content{background-color:#F6F6F6;
 border: 2px solid #E5E5E5;box-sizing: border-box;}
 </style>
+<style lang='scss'>
+.filter-container{
+    .list-box{
+        .van-cell__title, .van-cell__value{
+            flex: none !important;
+        }
+        .van-cell:after{
+            border: none !important;
+        }
+        .van-cell__title{
+            font-size: 14px;
+        }
+        .van-hairline--top:after{
+            border-top-width: 0 !important;
+        }
+    }
+}
+</style>