Web_TracerMethodology/pages/reports/reports.vue

<template>
	<view class="pageContainer">
		<scroll-view scroll-y="true" class="scroll-Y">
			<view class="list" v-for="(item,index) in list" @click="viewHandle(item)">
				<view class="name">{{item.name}}</view>
				<image class="arrowIcon" src="../../static/list-open.png" ></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	
	import { networkType } from '../../utils/requestUrl.js';
	export default {
		data() {
			return {
				list: [{
						name: '报表一',
						url: ''
					},
					{
						name: '报表一',
						url: ''
					}
				]
			};
		},
		onLoad() {
			   this.getList(`${networkType}`);
		},
		methods:{
			/**
			 * @param {
				   url:string;
				   name:string;
			 } reportDetail
			 */
			 viewHandle(reportDetail){
				   uni.navigateTo({
				   	  url: '/pages/reportPage/reportPage?url='+reportDetail.url
				   });
			 },
			 /**
			  * @param {string} networkType  网络环境（0. 内网，1.外网）
			  */
			 getList(networkType){
				 this.$store.dispatch({
				 	type: 'reports/commActions',
				 	payload: {
				 		key: 'getReportList',
						data:{
							networkType:networkType
						}
				 	}
				 }).then(res=>{
					   this.list = res.map(t=>({
						     name:t.name,
							 url:t.url
					   }))
				 })
			 }
		}
	}
</script>

<style lang="less" scoped>
	.pageContainer {
		display: flex;
		width: 100%;
		height: 100vh;
		.scroll-Y {
			.list {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content:space-between;
				width: 100%;
				height: 100rpx;
				padding: 30rpx 30rpx;
				border-bottom: 1rpx solid #CCCCCC;
				background-color: #FFFFFF;
				.name {
					font-size:27rpx;
				}
				.arrowIcon {
					display:none;
					width:25rpx;
					height: 18rpx;
					transform:rotate(-90deg);
				}
				
				&:last-child {
					border-bottom: 0;
				}
				
			}
		}
	}
</style>