uniapp-qxk/packages/subOrderList/subOrderList.vue

<template>
	<view class="pubuBox">
		<view class="pubuItem">
			<view class="item-masonry" v-for="(item,index) in dataList" :key="index" @click="toSubOrder(item.series_num)">
				<image :src="item.images_url[0]" class="image_23" mode="aspectFill" />
				<text class="text_27 equal-division_1">{{ item.series_num }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { getSubOrderList } from '@/service/order.js';
	import { ratingSearch } from '@/service/grading.js';
	
	export default {
		data(){
			return {
				dataList:[]
			}
		},
		methods:{
			async toSubOrder(value){
				let res = await ratingSearch(value);
				let datas = res.data.datas;
				
				let base_data = encodeURIComponent(JSON.stringify(datas));
				this.$url('/packages/ratingQueryDetail/ratingQueryDetail?data='+ base_data);
			}
		},
		async onLoad(){
			let res = await getSubOrderList({start:-1,is_show:1});
			this.dataList = res.data.datas
			console.log("onLoad getSubOrderList",res)
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
		height: 100%;
	}
	.pubuBox {
		padding: 22rpx;
	}
	.pubuItem {
		column-count: 3;
		column-gap: 20rpx;
	}
	.item-masonry{
		background-color: white;
		box-sizing: border-box;
		border-radius: 15rpx;
		overflow: hidden;
		break-inside: avoid;
		/*避免在元素内部插入分页符*/
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		//justify-self: center;
		align-items: center;
		margin-bottom: 20rpx;
		
	}
	.image_23 {
		margin-top: 10rpx;
		border-radius: 10rpx;
		width: 200rpx;
		height: 240rpx;
	}
	.text_27 {
		color: black;
		margin-top: 10rpx;
	}
	.equal-division_1 {
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		color: rgb(51, 51, 51);
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40rpx;
		white-space: nowrap;
	}
	
</style>