xcxFront/pages/entry/index.vue

<template>
	<view class="entry-page" v-if="flag">
		<TnNavbar
		  fixed
		  bg-color="rgba(255, 255, 255, 0.01)"
		  :bottom-shadow="false"
		  :placeholder="false"
		/>
		<view class="banner">
		  <image class="tn-image" :src="banner" mode="aspectFill" />
		  <view class="text">
		  	<view class="title">
				重庆江津工业园区
			</view>
			<view class="desc">
				经济发展速览
			</view>
		  </view>
		</view>
		<!-- 入口 -->
		<view class="entries">
			<view class="title-container">
			  <view class="left">
			    <view class="title">重庆江津工业园区</view>
			    <view class="desc">国家新型工业化产业示范基地、国家级绿色工业园区</view>
			  </view>
			  <view class="right">
				  <tn-button bg-color="#fff" open-type="share">
					  <template #default>
						  <view>
							<view class="icon">
								<TnIcon name="share-square" />
							</view>
							<view class="text">分 享</view>
						  </view>
					  </template>
				  </tn-button>
			  </view>
			</view>
		  <view class="content-wrapper">
		    <view
		      :class="['content-item', 'tn-bg-image', 'tn-shadow-blur','tn-grey-light_bg']"
			  v-for="item in menuData"
			  :key=item.menuId
			  @tap.stop="toPage(item)"
		    >
		      <view class="left">
		        <view class="title">{{ item.title }}</view>
		        <!-- <view class="show-more"> -->
		          <!-- <text>查看详情</text> -->
		          <!-- <TnIcon name="right" /> -->
		        <!-- </view> -->
		      </view>
		      <view :class="['icon',item.background,'tn-flex','tn-flex-center-center']">
		        <TnIcon :name="item.front_icon"/>
		      </view>
		    </view>
		  </view>
		</view>  
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import BaseUrl from '@/config/config';
	import onShare from '@/utils/share';
	import storage from '@/utils/storage';
	
	const { onShareAppMessage,onShareTimeline } = onShare()
	
	const flag = ref(false)
	
	const shareTitle = ref('江津工业园')
	
	const banner = ref('http://cdn.cqtlcm.com/attachment/kxc-xcx/index_top.png')
	
	const menuData = ref()
	
	const getList = () => {
		uni.request({
			url:BaseUrl + '/front/report/top_menu',
			success: (res:any) => {
				if(res.data.code === 0){
					menuData.value = res.data.data
					flag.value = true
				} else {
					uni.showToast({
						icon:'none',
						title:res.data.message
					})
				}
			}
		})
	}
	
	const toPage = (item: any) => {
		let storageUser = storage.get('storageUser');
		let isLogin = storage.get('isLogin')
		if(item.mustLogin === 0){
			if(!isLogin){
			// #ifdef MP
				uni.navigateTo({
					url:'/pages/ucenter/index'
				})
			// #endif
			// #ifdef H5
				uni.navigateTo({
					url:'/pages/login/login'
				})
			// #endif
			}else{
				if(storageUser && storageUser.right === 0){
					uni.showToast({
						icon:'none',
						title:'暂时没有权限访问，请联系管理员'
					})
				}else{
					uni.navigateTo({
						url:item.template + '?id=' + item.menuId
					})
				}
			}
		}else{
			uni.navigateTo({
				url:item.template + '?id=' + item.menuId
			})
		}
	}
	
	onShareAppMessage(() => {
		return {
			title:shareTitle.value,
			path:'/pages/entry/index'
		}
	})
	
	onShareTimeline(() => {
		return {
			title:shareTitle.value,
			path:'/pages/entry/index'
		}
	})

	getList()
</script>

<style lang="scss" scoped>
	.banner{
		position: relative;
		height: 450rpx;
		.text{
			position: absolute;
			top:180rpx;
			font-size: 56rpx;
			color: #FFF;
			width: 100%;
			text-align: center;
			font-weight:bold;
			letter-spacing: 0.1em;
		}
	}
	.title-container {
	  width: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  line-height: 1;
	
	  .left {
	    flex: 1;
	
	    .title {
	      font-size: 40rpx;
	      font-weight: bold;
	    }
	    .desc {
	      margin-top: 24rpx;
		  line-height: 1.5em;
	    }
	  }
	
	  .right {
	    flex-grow: 0;
	    flex-shrink: 0;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    margin-left: 20rpx;
	
	    .icon {
	      font-size: 70rpx;
	    }
	
	    .text {
	      font-size: 26rpx;
	      margin-top: 10rpx;
	    }
	  }
	}
	.entries {
	  margin-top: -40rpx;
	  background-color:#fff;
	  z-index: 99;
	  position: absolute;
	  border-radius: 40rpx 40rpx 0 0;
	  padding: 40rpx;
	  .content-wrapper {
	    margin-top: 40rpx;
	    width: 100%;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;
	
	    .content-item {
	      position: relative;
	      width: calc(100% / 2 - 20rpx);
	      margin-bottom: 40rpx;
	      border-radius: 12rpx;
	      padding: 40rpx 10rpx 40rpx 20rpx;
		  box-shadow: 0 0 1px 0 #e8e8e8;
	      display: flex;
	      justify-content: space-between;
	      line-height: 1;
	      z-index: 2;
	
	      &::after {
	        z-index: 1;
	      }
	
	      .left {
	        z-index: 2;
			display: flex;
			align-items: center;
	        .title {
	          font-size: 38rpx;
	          color: #444;
			  letter-spacing: 4rpx;
			  font-weight: bold;
	        }
	        .show-more {
	          margin-top: 24rpx;
	          font-size: 26rpx;
	          color: #666;
			  letter-spacing: 2rpx;
	          text {
	            margin-right: 8rpx;
	          }
	        }
	      }
	
	      .icon {
			  width: 80rpx;
			  height: 80rpx;
			  z-index: 2;
	          font-size: 60rpx;
	          color: #fff;
			  border-radius: 50%;
	          opacity: 0.7;
	      }
	    }
	  }
	}
</style>