zsw-farm-bxg/pages/shop/Evaluations/index.vue

<template>
	<view>
		<view class="header">
			<cu-custom :isBack="true" :isCenter="true">
				<block slot="backText">
					<view class="backImg">
						<image src="@/static/images/back-btn.png" mode=""></image>
					</view>
				</block>
				<block slot="content">
					<image class="tab-title" src="../../../static/images/yanjie-logo.png" mode=""></image>
				</block>
			</cu-custom>
		</view>
		
		<view class="title-box">
			<view class="en-title">SELECTION EVALUATION</view>
			<view class="title">甄选评测</view>
		</view>
		
		<view class="list-box">
			<view class="item" v-for="(item,index) in evaluations" :key="index" @click="goDetail(item)">
				<image :src="item.homeImage" mode="aspectFill"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { getEvaluation } from '@/api/store'
	export default {
		data() {
			return {
				evaluations: [],
			};
		},
		onLoad() {
			this.getData();
		},
		methods: {
			getData() {
				uni.showLoading({
				  title: "加载中",
				});
				getEvaluation().then(res => {
					this.evaluations = res.data;
					uni.hideLoading();
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/shop/Evaluations/EvaluationDetail/index?id=' + item.id
				})
				// this.$yrouter.push({
				// 	path: '/pages/shop/Evaluations/EvaluationDetail/index',
				// 	query: {
				// 		id: item.id
				// 	},
				// })
			}
		}
	}
</script>

<style lang="less" scoped>
	.header {
		.tab-title {
			width: 184rpx;
			height: 46rpx;
		}
		.backImg {
			width: 88rpx;
			height: 62rpx;
			padding-left: 26rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.title-box {
		padding: 22rpx 32rpx 24rpx;
		font-family: PingFang SC;
		font-weight: 600;
		.en-title {
			font-size: 20rpx;
			font-family: Futura;
			color: #999999;
			line-height: 22rpx;
		}
		.title {
			font-size: 50rpx;
			color: #3A3A3C;
			line-height: 68rpx;
		}
	}
	
	.list-box {
		padding: 0rpx 32rpx 20rpx;
		.item {
			width: 686rpx;
			height: 230rpx;
			background: #F5F6F8;
			box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
		}
	}

</style>