hongze_yb_xcx/pages-sandTable/sandTable.vue

<template >
	<page-meta :page-style="'padding-bottom: 0;'+'overflow:'+((showFilter||show||showPoster)?'hidden':'visible')"/>
	<view style="background-color: #F6F6F6;">
		<!-- 没有权限 -->
		<block v-if="noAuthor ==1 && isFinished">
			<view class="sandTable-noAuthor">
				<block v-if="!applyer.hasApply">
					<image :src="globalImgUrls.sandBoxNoAuthor" mode="aspectFit"></image>
					<text style="margin-top: 48rpx;">您暂无权限查看沙盘推演</text>
					<text style="margin-top: 20rpx;">若想查看可以申请开通</text>
					<button @click="toApply">立即申请</button>
				</block>
				<block v-else>
					<image class="img-wait" :src="globalImgUrls.chartWait" mode="widthFix" 
					style="width: 186rpx;margin-top: 200rpx;width: 186rpx;margin-bottom: 50rpx;"></image>
					<text style="margin-bottom:15px">您已提交申请</text>
					<text>请等待销售人员与您联系</text>
				</block>
			</view>
		</block>
		<block v-if="noAuthor ==2 && isFinished">
			<view class="sandTable-noAuthor">
				<image :src="globalImgUrls.sandBoxNoAuthor" mode="aspectFit"></image>
				<text style="margin-top: 48rpx;">您暂无权限查看沙盘推演</text>
				<text style="margin: 20rpx 0 6rpx 0;">若想查看请联系对口销售</text>
				<view>
					<text>{{salesData.name}}：</text><text class="sales-mobile" @click="callToSales">{{salesData.phone}}</text>
				</view>
			</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>
			  </view>
			</van-sticky>
			<!-- 无数据 -->
			<view class="sandTable-noData" v-if="!list">
				<image :src="globalImgUrls.sandBoxNoAuthor" mode="aspectFit"></image>
				<text >暂无数据</text>
			</view>
			<view class="sandTable-list" v-else>
				<view class="sandTable-box" v-for="(item,index) in list" :key="item.sandbox_id">
					<view class="sandTable-box-top">
						<view class="sandTable-box-topL">
							<view class="sandTable-tag">
								{{item.chart_permission_name}}
							</view>
							<rich-text :nodes="item.name" class="sandTable-name"></rich-text>
						</view>
						<view class="sandTable-box-topR">
							<image src="../static/sandTable/fullScreen.png" style="margin-right: 50rpx;" @click="previewImage(index)"></image>
							<image src="../static/sandTable/sandTable-share.png" @click="generatePoster('detail',item)"></image>
						</view>
					</view>
					<view class="sandTable-item" @click="previewImage(index)">
						<image :src="item.pic_url"></image>
						<view class="sandTable-item-origin">
							来源：弘则研究
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>
	<!-- 筛选弹窗 -->
	<van-popup :show="showFilter" round position="bottom" @close="showFilter = false" z-index="99999">
		<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>
			<button type="default" @click="classifyFilter">完成</button>
		</view>
	</van-popup>
	<!-- 分享按钮 -->
	<image @click="generatePoster('list')" class="share-icon" src="@/static/share-poster-icon.png" mode="aspectFill" v-if="noAuthor==0&&isFinished"/>
	<!-- 生成海报弹窗  -->
	<div class="share-poster-wrap" @touchmove.prevent>
		<div class="poster-mask" v-if="show||showPoster" @click="showPoster=false" @touchmove.prevent></div>
        <div class="loading-box" v-if="show">
            <img class="load-img" src="../static/loading.png"/>
            <div>海报生成中...</div>
        </div>
		<img v-if="showPoster" class="poster-img" mode="widthFix" :src="posterImg" show-menu-by-longpress />
	</div>

</template>

<script>
	import {apiSandTableList,apiSandTableDetail} from "../api/sandTable.js"
	import {apiReportIndexPageAuthList} from "../api/report.js"
	import {apiGetPoster} from "../api/common.js"
	import {apiApplyPermission} from "../api/user.js"
	export default {
		data() {
			return {
				sandTableQuery:{
					page_size: 20,
					curr_page: 1,
					keyword:'' ,
					chart_permission_id: 0,
					is_high_light:false // 是否高亮
				},
				total:0,
				isRequseting:false,
				showFilter:false,
				list:[],
				classfyList:[],
				selectedFirstId:0,
				selectedSecondId:0,
				// 确认选中的分类Id
				confirmFirstId:0, 
				confirmSecondId:0,
				// 是否显示过全部加载弹窗
				haveShowToast:false,
				showPoster:false,
				show:false,
				// 是否请求完成
				isFinished:false,
				posterImg:'',
				// 没有权限  1:立即申请 2:联系销售
				noAuthor:0,
				// 销售信息
				salesData:{
					phone:'',
					name:''
				},
				// 申请权限时的用户信息
				applyer:{
					name:'',
					company:'',
					// 是否已经申请
					hasApply:false,
					// 状态
					status:''
				}
			}
		},
		onLoad(options) {
			// 有sandbox_id 说明是单个分享进来的
			if(options.sandbox_id){
				this.confirmFirstId = options.firstClassifyId || 0
				this.confirmSecondId = 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.sandTableQuery.is_high_light = options.is_high_light || false
				this.getSandBoxList()
			}
			this.getClassifyList()
		},
		onShow() {
			// 预览图片结束时，会触发onShow，切回竖屏
			uni.setPageOrientation({orientation : "portrait"})
		},
		// 小程序自带分享
		onShareAppMessage() {
			let {keyword,chart_permission_id,is_high_light} = this.sandTableQuery
		    return {
		        title:'沙盘推演',
				path:`/pages-sandTable/sandTable?keyword=${keyword}&chart_permission_id=${chart_permission_id}`+
				`&is_high_light=${is_high_light}&firstClassifyId=${this.confirmFirstId}`
		    }
		},
		onPullDownRefresh() {
			this.sandTableQuery.curr_page=1
			this.sandTableQuery.chart_permission_id=0
			this.sandTableQuery.keyword=''
			this.is_high_light=false
			this.haveShowToast=false
			this.getSandBoxList('stopPullDown')
			this.getClassifyList()
		},
		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'
				})
				return
			}
			this.sandTableQuery.curr_page++
			this.getSandBoxList()
		},
		methods: {
			// 获取沙盘图数据
			getSandBoxList(option){
				this.isRequseting=true
				apiSandTableList(this.sandTableQuery).then(({data:{list,paging,type,name,mobile,customer_info},code})=>{
					if(option == 'stopPullDown'){
						uni.stopPullDownRefresh()
					}
					// 403 没有权限
					if(code==403){
						this.applyer.name = customer_info.name
						this.applyer.company = customer_info.company_name
						this.applyer.hasApply = customer_info.has_apply
						this.applyer.status = customer_info.status
						if(type == 'apply'){
							// 申请
							this.noAuthor =1
						}else{
							// 联系销售
							this.noAuthor =2
							this.salesData.name=name
							this.salesData.phone=mobile
						}
						return 
					}
					if(this.sandTableQuery.curr_page==1){
						this.list = list
						this.total = paging.totals
					}else{
						this.list = [...this.list,...list]
					}
					this.noAuthor=0
				})
				.finally(res=>{
					this.isRequseting=false
					this.isFinished=true
					this.showFilter=false
				})
			},
			getSandBoxDetail(sandbox_id){
				this.isRequseting=true
				apiSandTableDetail({sandbox_id}).then(({data,code})=>{
					if(code==403){
						this.applyer.name = data.customer_info.name
						this.applyer.company = data.customer_info.company_name
						this.applyer.hasApply = data.customer_info.has_apply
						this.applyer.status = data.customer_info.status
						if(data.type == 'apply'){
							// 申请
							this.noAuthor =1
						}else{
							// 联系销售
							this.noAuthor =2
							this.salesData.name=data.name
							this.salesData.phone=data.mobile
						}
						return 
					}
					this.list= [data]
					this.noAuthor=0
				})
				.finally(res=>{
					this.isRequseting=false
					this.isFinished=true
					this.showFilter=false
				})
			},
			// 获取分类数据
			getClassifyList(){
				apiReportIndexPageAuthList().then(({data:{permission_list}})=>{
					// 过滤掉'更多报告' 和 没有权限的分类
					this.classfyList = permission_list.filter(item => item.sort!=100000)
					this.classfyList.forEach(item=>{
						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
					}
				})
			},
			// 权限申请
			toApply(type=''){
				if(type=='auto'){
					apiApplyPermission({
						company_name:this.applyer.company,
						real_name:this.applyer.name,
						source:7,
						from_page:'沙盘推演',
					}).then(res=>{
						console.log('自动申请成功');
					})
				}else{
					if(this.applyer.status==='流失'){
						apiApplyPermission({
							company_name:this.applyer.company,
							real_name:this.applyer.name,
							source:7,
							from_page:'沙盘推演',
						}).then(res=>{
							uni.navigateTo({url:'/pages-applyPermission/applyResult'})
						})
					}else{
						uni.navigateTo({ url: '/pages-applyPermission/applyPermission?source=7&from_page=沙盘推演' })
					}
				}
			},
			// 联系销售申请权限
			callToSales(){
				if(!this.applyer.hasApply){
				    this.toApply('auto')
				}
				uni.makePhoneCall({
				    phoneNumber: this.salesData.phone,
				    success: (result) => {},
				    fail: (error) => {}
				})
			},
			// 搜索内容变化
			searchValChange(e){
			  this.sandTableQuery.keyword=e.detail
			  // this.sandTableQuery.is_high_light = true
			  // this.getSandBoxList()
			},
			// 清除搜索内容
			onClearSearch(){
				this.sandTableQuery={
					page_size: 20,
					curr_page: 1,
					keyword:'' ,
					chart_permission_id: 0,
					is_high_light:false
				}
				this.haveShowToast=false
				this.getSandBoxList()
			},
			// 确认搜索
			onSearch(){
			  this.sandTableQuery.chart_permission_id=0
			  this.sandTableQuery.is_high_light = true
			  this.haveShowToast=false
			  this.getSandBoxList()
			},
			// 打开筛选
			showFiltration(){
				// 选中上次确认筛选的选项
				this.selectedFirstId = this.confirmFirstId
				this.selectedSecondId = this.confirmSecondId
				this.showFilter = true
			},
			// 分类筛选
			classifyFilter(){
				this.confirmFirstId = this.selectedFirstId
				this.confirmSecondId = this.selectedSecondId
				this.sandTableQuery.chart_permission_id = this.selectedSecondId
				this.sandTableQuery.curr_page=1
				uni.pageScrollTo({
					scrollTop:0,
					duration:300
				})
				this.haveShowToast=false
				this.getSandBoxList()
			},
			// 选中一级分类
			selectFisrtClassify(item){
				this.selectedFirstId=(this.selectedFirstId == item.id?0:item.id)
				// 选中个第一分类的第一个二级分类
				this.selectedSecondId = item.list[0].chart_permission_id
			},
			// 预览图片
			previewImage(index){
				// 先切换横屏才预览图片 ，预览图片开启之后 切换不了横屏
				uni.setPageOrientation({orientation : "landscape"}).finally(()=>{
					// 在回调函数中 用setTimeout将预览图片的任务 再往后排 不然可能会切换失败
					setTimeout(()=>{
						uni.previewImage({
							urls:this.list.map(item=> item.pic_url),
							current:index,
							showmenu:false
						})
					},10)
				})
			},
			// 生成海报
			generatePoster(type,item=''){
				this.handleCreatePoster(type,item)
			},
			async handleCreatePoster(type,item){
			    this.show=true
				let code_scene = '',source='',parsJson={}
				if(type == 'detail'){
					// 分享单个
					let {chart_permission_id} = item
					let first_permission_id = 0
					// 通过分享的沙盘图的二级分类Id，找到对应的一级Id
					U:for (let item of this.classfyList) {
						for (let it of item.list) {
							if(it.chart_permission_id == chart_permission_id){
								first_permission_id = item.id
								break U
							}
						}
					}
					code_scene=`{sandbox_id:${item.sandbox_id},chart_permission_id:${chart_permission_id},firstClassifyId:${first_permission_id}}`
					source = 'sandbox_detail'
					parsJson = {title_1:item.name,img_1:item.pic_url}
				}else{
					// 分享列表
					let {keyword,chart_permission_id,is_high_light} = this.sandTableQuery
					let firstImageUrl,secondImageUrl;
					if(!this.list || !this.list[0]){
						// 分享的列表页一条数据也没有 使用两个默认的沙盘图地址
						firstImageUrl = this.globalImgUrls.sandBoxShareDefault1
						secondImageUrl = this.globalImgUrls.sandBoxShareDefault2
					}else if(!this.list[1]){
						// 分享的列表页只有一条数据 第二个图片使用默认的沙盘图地址
						firstImageUrl = this.list[0].pic_url
						secondImageUrl = this.globalImgUrls.sandBoxShareDefault1
					}else{
						// 列表页有数据
						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}}}`
					source = 'sandbox_list'
					parsJson = {title_1:'沙盘推演',img_1:firstImageUrl,img_2:secondImageUrl}
				}
			    const res=await apiGetPoster({
			        code_page:'pages-sandTable/sandTable',
			        code_scene,
			        source,
			        pars:JSON.stringify(parsJson),
					version:'7.0'
			    })
			    if(res.code==200){
			        this.posterImg=res.data
			        this.show=false
			        this.showPoster=true
			    }else{
			        this.show=false 
			    }
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 0;
		// 无权限
		.sandTable-noAuthor{
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 100vh;
			image{
				margin-top: 180rpx;
			}
			text{
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
			}
			.sales-mobile{
				color: #E3B377;
			}
			button{
				background: #E6B77D;
				border-radius: 4px;
				width: 634rpx;
				height: 80rpx;
				margin-top: 108rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
		// 搜索区域
		.search-wrap{
			display: flex;
			background-color: white;
			padding: 20rpx 34rpx 20rpx 10rpx;
			height: 156rpx;
			align-items: center;
			.filtration-icon-zone{
				display: flex;
				align-items: center;
				image{
					width: 52rpx;
					height: 52rpx;
				}
				text{
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 32rpx;
					color: #E3B377;
				}
			}
		}
		// 列表区域 无数据
		.sandTable-noData{
			display: flex;
			flex-direction: column;
			align-items: center;
			height: calc(100vh - 158rpx);
			image{
				margin-top: 180rpx;
			}
			text{
				margin-top: 48rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
			}
		}
		// 列表区域
		.sandTable-box{
			padding: 24rpx 34rpx 40rpx 34rpx;
			background-color: white;
			margin-top: 10rpx;
			.sandTable-box-top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 32rpx;
				.sandTable-box-topL{
					display: flex;
					align-items: center;
					.sandTable-tag{
						margin-right: 20rpx;
						padding: 4rpx 22rpx;
						background: #333333;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #E4B478;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.sandTable-name{
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						max-width: 390rpx;
					}
				}
				.sandTable-box-topR{
					display: flex;
					align-items: center;
					image{
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
			.sandTable-item{
				border: 2rpx solid #C4C4C4;
				image{
					width: 100%;
					height: 480rpx;
				}
				.sandTable-item-origin{
					text-align: right;
					padding:0 24rpx 20rpx 0 ;
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
		}
		// 过滤弹窗
		.filter-container{
			height: 700rpx;
			width: 100vw;
			position: relative;
			.filter-container-header{
				padding: 54rpx 34rpx 20rpx 34rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text{
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					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;
						}
					}
				}
			}
			button{
				position: absolute;
				bottom: 0;
				height: 80rpx;
				width: 100vw;
				border-radius: 0;
				background-color: #E6B77D;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		// 分享海报
		.share-poster-wrap{
		    .poster-mask{
		        position: fixed;
		        left: 0;
		        top: 0;
		        right: 0;
		        bottom: 0;
		        background: rgba(0, 0, 0, 0.4);
		        z-index: 998;
		    }
		    .loading-box{
		        background-color: #fff;
		        position: fixed;
		        left: 50%;
		        top: 50%;
		        z-index: 999;
		        transform: translate(-50%,-50%);
		        width: 417rpx;
		        height: 261rpx;
		        text-align: center;
		        padding-top: 80rpx;
		        font-size: 32rpx;
		        font-weight: bold;
		        .load-img{
		            width: 91rpx;
		            height: 91rpx;
		            animation: circle 1s linear infinite;
		        }
		        @keyframes circle {
		            0%{
		                transform: rotateZ(0);
		            }
		            100%{
		                transform: rotateZ(360deg);
		            }
		        }
		    }
		    .poster-img{
		        width: 90vw;
		        display: block;
		        position: fixed;
		        left: 50%;
		        top: 50%;
		        z-index: 999;
		        transform: translate(-50%,-50%);
		        border-radius: 16rpx;
		    }
		}
		// 分享图标
		.share-icon{
			position: fixed;
			bottom: 100rpx;
			right: 34rpx;
			z-index: 50;
			width: 76rpx;
			height: 76rpx;
		}
	
	}

</style>
<style scoped>
 /deep/ .van-search__content{background-color:#F6F6F6;
border: 2px solid #E5E5E5;box-sizing: border-box;}
</style>