sulibao-mini/pages/discovery/discovery.vue

<template>
	<view class="discovery tn-safe-area-inset-bottom" style="max-height: 100vh">
	<tn-nav-bar customBack>
		<view slot="back" class='tn-custom-nav-bar__back' >
			 
			<image style="width: 30px;height: 28px;margin-left:4px"  @click="reFetchData()" src="../../static/logo.png"></image>
			 
		</view>
	
		<view slot="default" style="display: flex;">
			<view style="flex:1;">
				<text :style="{fontSize:(wxFontSize)+'px'}">速立保</text>
			</view>
			 
		</view>
	</tn-nav-bar>	
	
	<view :style="{paddingTop: vuex_custom_bar_height + 'px'}" style="background-color: #f7f7f7;">
		<view style="width: 100%;padding-bottom: 0;background-color: #fff;">
			<view style="display: flex;width: 100%;background: linear-gradient(0deg, #fff, #f8f8f">
				 
				<view style="flex:1; margin:16px; text-align: center;border-radius: 47px;" class="bg-slogan">
					 
					<text style="margin-top:12px;color:#fff;font-size:17px;margin: 16px;" :style="{fontSize:(fontSize)+'px'}">生物制药产业一站式产品资源供需平台</text>
				</view>
			</view>
			
			
		</view>
		
		<view style="padding: 16px;color:#333;" :style="{fontSize:(fontSize-1)+'px'}">
			 优质入驻企业
		</view>
		
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"  v-if="!hideComps">
			<swiper-item v-for="(item,index) of companyList" :key="item.id" style="position:relative">
				<text class="tn-icon-close" @click="closeComps" style="position: absolute;right: 0px;color: #fff;background: #00000066;border-top-right-radius: 0;padding: 4px;font-size: 13px;border-bottom-left-radius: 8px;"></text>
				<image :src="item.picUrl?item.picUrl:'../../static/bg.png'" @click="showImgs(index,companyList)"  mode="aspectFill" style="width: 100%;height: 100%;"></image>
			</swiper-item>
		</swiper>
		<view v-if="hideComps" style="height: 200px;display: flex;align-items: center;justify-content: center;color: #2196f36e;">
			<text @click="showComps()">〈恢复展示〉</text>
		</view>
		<view style="padding: 16px;color:#333;"  :style="{fontSize:(fontSize-1)+'px'}">
			 优质供应
		</view>
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"  v-if="!hideProds">
			<swiper-item v-for="(item,index) of prodList" :key="item.id">
				<text class="tn-icon-close" @click="closeProds" style="position: absolute;right: 0px;color: #fff;background: #00000066;border-top-right-radius: 0;padding: 4px;font-size: 13px;border-bottom-left-radius: 8px;"></text>
				<image :src="item.picUrl?item.picUrl:'../../static/bg.png'" @click="showImgs(index,prodList)" style="width: 100%;height: 100%;"  mode="aspectFill"></image>
			</swiper-item>
			 
		</swiper>
		<view v-if="hideProds" style="height: 200px;display: flex;align-items: center;justify-content: center;color: #2196f36e;">
			<text @click="showProds()">〈恢复展示〉</text>
		</view>
		<!-- <image style="width: 180px;height: 150px" src="../../static/logo.png"></image>
		
		
		<view style="margin-top:24px"><text style="font-size:30px;">生物制药产业</text></view>
		<view><text style="font-size:30px">国际产品展示中心</text></view>
		<view style="margin-top:24px"><text style="font-size:20px;">生物制药产业一站式产品资源供需平台</text></view> -->
		 
		<view style="display: flex;margin-top:32px;margin: 24px 16px;">
			<view style="flex: 1;padding: 0 0 0 16px;" class="bg01" @click="showAdd">
				<image src="../../static/tu/needi.png" style="width: 36px;height: 36px; vertical-align: middle;margin-top: -6px;margin-right: 8px;"></image>
				<text style="line-height: 72px;font-size: 18px;" :style="{fontSize:(fontSize+1)+'px'}">我要什么</text>
				
			</view>
			<view style="flex: 1;padding: 0 0 0 16px;" class="bg02" @click="showAdd2">
				<image src="../../static/tu/sharei.png" style="width: 36px;height: 36px; vertical-align: middle;margin-top: -6px;margin-right: 8px;"></image>
				<text style="line-height: 72px;font-size: 18px;" :style="{fontSize:(fontSize+1)+'px'}">我有什么</text>
			</view>
		</view>
		
		<view class='tn-tabbar-height'></view>
		
	</view>
	</view>
</template>

<script>
	import request from '../../utils/request'
	export default {
		data() {
			return {
				  indicatorDots: true,
				  autoplay: false,
				  companyList:[],
				  prodList:[],
				  hideComps: false,
				  hideProds: false,
				  fontSize:17
			}
		},
		onReady() {
			const appBaseInfo = wx.getAppBaseInfo();
			this.fontSize = uni.getStorageSync('fontSize')||appBaseInfo.fontSizeSetting||17;
			this.$nextTick(() => {
				this.loadData()
				this.loadData2()
			})
		},
		methods: {
			//关闭banner1
			closeComps(){
				this.hideComps = true;
			},
			//关闭banner2
			closeProds(){
				this.hideProds = true;
			},
			//显示banner2
			showProds(){
				this.hideProds = false;
			},
			//显示banner1
			showComps(){
				this.hideComps = false;
			},
			fetchData(){
				this.loadData()
				this.loadData2()
			},
			loadData() {
				let that = this;
				request.post('/slbTopad/premiumCompanies', {
					 
				}).then(res => {
					if (res&&res.success) {
						let dataList = res.list||[];
						let newList = [];
						for(let i=0;i<dataList.length;i++){
							 if(dataList[i].showFlag=='是'){
								 newList.push(dataList[i]);
							 }
						}
						that.companyList = newList; 
					}  
				})
			},
			loadData2() {
				let that = this;
				request.post('/slbTopad/premiumShareCompanies', {
					 
				}).then(res => {
					if (res&&res.success) {
						 let dataList = res.list||[];
						 let newList = [];
						 for(let i=0;i<dataList.length;i++){
							 if(dataList[i].showFlag=='是'){
								 newList.push(dataList[i]);
							 }
						 }
						 that.prodList = newList;
					}  
				})
			},
			showImgs(index, list){
				let urls = [];
				for(let i=0;i<list.length;i++){
					urls.push(list[i].picUrl);
				}
				
				// 预览图片
				uni.previewImage({
					urls: urls,
					current: index,
				});
			},
			showAdd(){
				if(uni.getStorageSync('userNo')){
					uni.navigateTo({
						url:'/circlePages/circle'
					})
				}else{
					uni.setStorageSync('nextPage','/circlePages/circle');
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
				
			},
			showAdd2(){
				if(uni.getStorageSync('userNo')){
					uni.navigateTo({
						url:'/circlePages/addShare'
					})
				}else{
					uni.setStorageSync('nextPage','/circlePages/addShare');
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
				
			}
		}
	}
</script>

<style>
.swiper-item {
	text-align: center;
}
.swiper{
	height: 200px;
}
.bg01{
	color: #fff;
	background-image: url(./../../static/tu/needbg.png);
	background-size: cover;
	height: 72px;
	border-radius: 20px;
	margin-right: 16px;
}
.bg02{
	color: #fff;
	background-image: url(./../../static/tu/sharebg.png);
	background-size: cover;
	height: 72px;
	border-radius: 20px;
}

.bg-slogan{
    color: #fff;
    background-image: url(./../../static/tu/slogan-min.png);
     
	background-size: cover;
	    line-height: 40px;
	    background-repeat: no-repeat;
}

/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}

</style>