sulibao-mini/pages/index/index.vue

<template>
	<view style="background-color: #f7f7f7;">
		 <view class="discovery tn-safe-area-inset-bottom"  >
		 <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'}" >
		 	<view style="width: 100%;padding-bottom: 0;background-color: #fff;">
		 		<view style="display: flex;width: 100%;">
		 			 
		 			<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;font-weight: 600;" :style="{fontSize:(fontSize)+'px'}">生物制药产业国际产品供需平台</text>
		 			</view>
		 		</view>
		 		
		 		
		 	</view>
		 	
		 	<view style="padding: 16px;color:#333;font-weight: 600;" :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/tu/needbg.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;font-weight: 600;"  :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/tu/needbg.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;font-weight: 600;" :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;font-weight: 600;" :style="{fontSize:(fontSize+1)+'px'}">我有什么</text>
		 		</view>
		 	</view>
		 	
		 	<view class='tn-tabbar-height'></view>
		 	
		 </view>
		 <view class="edit tnxuanfu" @tap="showLandscape">
		 	<view class="bg0 pa">
		 		<view class="bg1" style="background-size: cover;border-radius: 50%;background-image: url(https://oss.lx-device.com/userFeedback/1741316243096Hwk.gif);">
		 		</view>
		 	</view>
		 	<view class="hx-box pa">
		 		<view class="pr">
		 			<view class="hx-k1 pa0">
		 				<view class="span"></view>
		 			</view>
		 			<view class="hx-k2 pa0">
		 				<view class="span"></view>
		 			</view>
		 			<view class="hx-k3 pa0">
		 				<view class="span"></view>
		 			</view>
		 			<view class="hx-k4 pa0">
		 				<view class="span"></view>
		 			</view>
		 			<view class="hx-k5 pa0">
		 				<view class="span"></view>
		 			</view>
		 			<view class="hx-k6 pa0">
		 				<view class="span"></view>
		 			</view>
		 		</view>
		 	</view>
		 </view>
		 
		 <Auth ref="authRef"></Auth>
		 </view>
		
	</view>
</template>

<script>
	import Auth from '../index/autoLogin.vue'
	import Home from '../home/home.vue'
	import Comm from '../comm/comm.vue'
	import Mine from '../mine/mine.vue'
    import request from '../../utils/request'
	export default {
		components: {
			Auth,
			Home,
			Comm,
			Mine
		},
		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;
			 
		},
		onShow(options){
			if(uni.getStorageSync('nextPage')&&uni.getStorageSync('userNo')){
				let nextPage = uni.getStorageSync('nextPage')
				uni.removeStorageSync('nextPage');
				uni.navigateTo({
					url: nextPage
				}) 
			}else{
				uni.removeStorageSync('nextPage')
			}
			if (wx.canIUse('getUpdateManager')) {
			  const updateManager = wx.getUpdateManager();
			  updateManager && updateManager.onCheckForUpdate((res) => {
				if (res.hasUpdate) {
				  updateManager.onUpdateReady(() => {
					uni.showModal({
					  title: '更新提示',
					  content: '新版本已经准备好，是否重启应用？',
					  success: (res) => {
						if (res.confirm) {
						  uni.clearStorageSync() // 更新完成后刷新storage的数据
						  updateManager.applyUpdate()
						}
					  }
					})
				  })
			
				  updateManager.onUpdateFailed(() => {
					uni.reLaunch({
						url:'/pages/index/index'
					})
				  })
				} else {
				  //没有更新
				}
			  })
			}
			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,
				});
			},
			showLandscape(){
				uni.navigateTo({
					url:'/pages/index/aichat'
				})
			},
			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 lang="scss" scoped>
	.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));
	}
	
	
	/* 悬浮 */
	.tnxuanfu {
		animation: suspension 3s ease-in-out infinite;
	}
	
	@keyframes suspension {
	
		0%,
		100% {
			transform: translateY(-0.8rem);
		}
	
		50% {
			transform: translateY(-0.8rem);
		}
	}
	
	/* 悬浮按钮 */
	.button-shop {
		width: 90rpx;
		height: 90rpx;
		display: flex;
		flex-direction: row;
		position: fixed;
		/* bottom:200rpx;
	    right: 20rpx; */
		left: 5rpx;
		top: 5rpx;
		z-index: 1001;
		border-radius: 100px;
		opacity: 0.9;
	}
	
	
	/* 按钮 */
	.edit {
		bottom: 300rpx;
		right: 75rpx;
		position: fixed;
		z-index: 9999;
	}
	
	
	.pa,
	.pa0 {
		position: absolute
	}
	
	.pa0 {
		left: 0;
		top: 0
	}
	
	
	.bg0 {
		width: 100rpx;
		height: 100rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		font-size: 32px;
		color: #fff;
		text-align: center;
		line-height: 50px;
	}
	
	.bg1 {
		width: 100%;
		height: 100%;
	}
	
	
	
	
	.hx-box {
		top: 50%;
		left: 50%;
		width: 100rpx;
		height: 100rpx;
		transform-style: preserve-3d;
		transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
	}
	
	.hx-box .pr {
		width: 100rpx;
		height: 100rpx;
		transform-style: preserve-3d;
		animation: hxz 20s linear infinite;
	}
	
	@keyframes hxz {
		0% {
			transform: rotateX(0deg);
		}
	
		100% {
			transform: rotateX(-360deg);
		}
	}
	
	
	
	.hx-box .pr .pa0 {
		width: 100rpx;
		height: 100rpx;
		/* border: 4px solid #5ec0ff; */
		border-radius: 1000px;
	}
	
	
	
	@keyframes hx {
		to {
			transform: rotate(360deg);
		}
	}
	
	.hx-k1 {
		transform: rotateX(-60deg) rotateZ(-60deg)
	}
	
	.hx-k2 {
		transform: rotateX(-30deg) rotateZ(-30deg)
	}
	
	.hx-k3 {
		transform: rotateX(0deg) rotateZ(0deg)
	}
	
	.hx-k4 {
		transform: rotateX(30deg) rotateZ(30deg)
	}
	
	.hx-k5 {
		transform: rotateX(60deg) rotateZ(60deg)
	}
	
	.hx-k6 {
		transform: rotateX(90deg) rotateZ(90deg)
	}
	
</style>