sulibao-mini/pages/discovery/discovery.vue

<template>
	<view class="discovery tn-safe-area-inset-bottom" style="max-height: 100vh">
		
	
	<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view style="width: 100%;padding-bottom: 0;">
			<view style="display: flex;width: 100%;background: linear-gradient(0deg, #fff, #f8f8f">
				<view style="margin:16px">
					<image style="width: 56px; height: 50px; margin-right: 12px;" :mode="fit"
						src="../../static/logo.png"></image>
				</view>
				<view style="margin:16px 0;margin-left: -8px;">
					<view style="font-weight: bold;font-size: 22px;" :style="{fontSize:(fontSize+4)+'px'}">速立保</view>
					<text style="margin-top:12px;color:#888;font-size:15px" :style="{fontSize:(fontSize-3)+'px'}">生物制药产业一站式产品资源供需平台</text>
				</view>
			</view>
			
			
		</view>
		
		<view style="padding: 0px 0 4px 16px;font-weight: bold;" :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: red;background: #00000066;border-top-right-radius: 0;padding: 0px 2px 2px 6px;font-size: 13px;
    border-bottom-left-radius: 30px;"></text>
				<!-- <view style="position: absolute;bottom: 28px;right: 16px;color: #ffffff75;" class="swiper-item uni-bg-red">{{item.company}}</view> -->
				<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 0 4px 16px;font-weight: bold;"  :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: red;background: #00000066;border-top-right-radius: 0;padding: 0px 2px 2px 6px;font-size: 13px;border-bottom-left-radius: 30px;"></text>
				<!-- <view style="position: absolute;bottom: 28px;right: 16px;color: #ffffff75;" class="swiper-item uni-bg-red">{{item.company}}</view> -->
				<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;">
			<view style="flex: 1;padding: 0 0 0 16px;" class="bg01" @click="showAdd">
				<text style="font-size: 32px;margin-right: 10px;vertical-align: sub;" class="tn-icon-email-fill" ></text>
				<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">
				<text style="font-size: 32px;margin-right: 10px;vertical-align: sub;" class="tn-icon-paperbag-fill" ></text>
				<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/bg01.png);
	background-size: cover;
	height: 72px;
	border-radius: 20px;
	margin-right: 16px;
}
.bg02{
	color: #fff;
	background-image: url(./../../static/bg02.png);
	background-size: cover;
	height: 72px;
	border-radius: 20px;
}

/* 底部安全边距 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>