xcxFront/pages/report/template/index.vue

<template>
	<view class="economic-summary-page">
		<TnNavbar
		    fixed
		    bg-color="rgba(255, 255, 255, 0.01)"
		    :bottom-shadow="false"
		    :placeholder="false"
		/>
		
		<view class="economic-summary"
		  	:style="{'background':'url('+ menuData.pic +') no-repeat','backgroundPosition':'center center','backgroundSize':'100% 100%'}"
		  >
		      <view class="summary-content">
		        <view class="summary-info">
		          <view class="title">{{ menuData.title }}</view>
		          <view class="desc">{{ menuData.description }}</view>
		        </view>
		      </view>
		</view>
		
		<view class="economic-container tn-p-xl"  v-if="flag">
			<view class="title-container">
			  <view class="left">
			    <view class="title">重庆江津工业园区</view>
			    <view class="desc">国家新型工业化产业示范基地、国家级绿色工业园区</view>
			  </view>
			  <view class="right tn-border-left tn-blue-light_border tn-pl-xs">
			    <tn-button bg-color="#fafaff" 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="field-list tn-flex tn-flex-wrap tn-flex-center-between tn-mt-xl">
				<view
				  class="content-item tn-p tn-radius tn-shadow-md tn-mb tn-blue-light_shdow"
				  v-for="item in fieldList"
				  :key=item.menuId
				  @tap.stop="toPage(item)"
				  style="background-color: #F8F8F8"
				>
					<view class="icon-wrap tn-mb tn-flex tn-flex-center-center">
						<view :class="['icon','tn-flex','tn-flex-center-center',item.background]">
						  <TnIcon :name="item.front_icon"/>
						</view>
					</view>
					
				    <view class="text tn-text-center tn-text-2xl">
				      <view class="title">{{ item.title }}</view>
				    </view>
				</view>
			</view>
		</view>
	</view>	
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import request from '@/utils/request';
	import { onLoad } from "@dcloudio/uni-app";
	import onShare from '@/utils/share';
	
	const { onShareAppMessage,onShareTimeline } = onShare()
	
	const shareTitle = ref('经济运行概况')
	
	const shareParam = ref()
	
	const flag = ref(false)
	
	const menuId = ref();
	
	const fieldList = ref([])
	
	const menuData = reactive({
		pic:'',
		title:'',
		color:'',
		description:''
	})
	
	const getMenuData = (id:number) => {
		request({
			url:'/front/report/menu',
			method:'GET',
			data:{ menuId:id }
		}).then((res:any)=>{
			if(res.data.code === 0){
				Object.assign(menuData,res.data.data)
				shareParam.value = res.data.data.menuId
			}else{
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
			}
		})
	}

	const getSubMenu = (id:number) => {
		request({
			url:'/front/report/sub_menu',
			method:'GET',
			data:{ menuId:id }
		}).then((res:any)=>{
			if(res.data.code === 0){
				fieldList.value = res.data.data
			}else{
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
			}
			flag.value = true
		})
	}
	
	const toPage = (item:any) => {
		uni.navigateTo({
			url:item.template + '?id=' + item.menuId
		})
	}
	
	onShareAppMessage(() => {
		return {
			title:shareTitle.value,
			path:'/pages/report/template/index?id=' + shareParam.value
		}
	})
	
	onShareTimeline(() => {
		return {
			title:shareTitle.value,
			path:'/pages/report/template/index?id=' + shareParam.value
		}
	})
	
	onLoad((option)=>{
		getMenuData(option.id)
		getSubMenu(option.id)
		menuId.value = option.id
	})

</script>

<style lang="scss" scoped>
	.economic-summary-page{
		.economic-summary {
		  position: relative;
		  width: 100%;
		  height: 450rpx;
		  z-index: 2;
		
		  &::before {
		    content: '';
		    position: absolute;
		    left: 0;
		    top: 0;
		    width: 100%;
		    height: 100%;
		    background: linear-gradient(
		      0deg,
		      rgba(0, 0, 0, 0.4) 0%,
		      rgba(0, 0, 0, 0) 100%
		    );
		    z-index: 1;
		  }
			
		  .summary-content {
		    position: absolute;
		    left: 0;
		    bottom: 80rpx;
		    width: 100%;
		    padding: 0rpx 30rpx;
		    z-index: 2;
		
		    display: flex;
		    align-items: center;
		
		    .summary-info {
		      flex: 1;
		      color: #fff;
		
		      .title {
		        font-size: 52rpx;
		        font-weight: bold;
		        letter-spacing: 8rpx;
		        text-shadow: 4rpx 4rpx 10rpx #585858;
		      }
		      .desc {
		        font-size: 34rpx;
		        margin-top: 20rpx;
				letter-spacing: 4rpx;
		        text-shadow: 4rpx 4rpx 10rpx #585858;
		      }
		    }
		  }
		}
		.economic-container{
			position: relative;
			top: -40rpx;
			z-index: 99;
			background-color: #fafaff;
			border-radius: 40rpx 40rpx 0 0;
			.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;
			    }
			  }
			}
			.field-list{
				width: 100%;			
				.content-item {
				  width: calc(100% / 2 - 18rpx);
				  line-height: 1;
				  z-index: 2;
								
				  .text {
				    z-index: 2;
				    .title {
				      color: #444;
					  letter-spacing:4rpx;
					  font-weight: bold;
				    }
				  }
					.icon-wrap{
						.icon {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							z-index: 2;
							font-size: 70rpx;
							color: #fff;
							opacity: 0.7;
						}
					}			
				  
				}
			}
		}
	}	
</style>