NFT/pages/user/fulilist.vue

<template>
	<view class="center">
		<view class="box" v-for="(item,index) in list" :key="index" @click="nav(item.id)">
			<view class="shopBox-top">
				<view class="left"><image src="../../static/img/index4.png" mode=""></image></view>
				<view class="between">
					<text  class="one">{{ item.name }}</text>
				</view>
				<view>
					<text class="three">查看详情</text>
				</view>
			</view>
			<view class="shopBox-between">
				<view class="number">
					<text class="number-left">{{ 1 * item.cost }}</text>
					<text class="number-right">{{ item.cost_money_type }}/份</text>
				</view>
				<view class="quotient"><text class="quotient-children">每轮限购1组，每组限购一份</text></view>
			</view>
			<image :src="item.background_image" style="width: 635rpx; height: 170rpx; margin: 40rpx 0;" mode=""></image>
		</view>
	</view>
</template>

<script>
import { lala } from '@/api/product.js';
export default {
	data() {
		return{
			list:[],
		}
	},
	onLoad() {
		this.loadData()
	},
	methods: {
		async loadData(){
			lala({}).then(({data}) =>{
				this.list = data.list.data
			})
		},
		nav(id) {
			uni.navigateTo({
				url: '/pages/user/fuli?id=' + id
			})
		}
	}
}
</script>

<style lang="scss">
.center , page {
	background: #f5f5f5;
}
.box {
	margin: 20rpx auto 0;
	width: 690rpx;
	padding: 20rpx;
	background: #FFFFFF;
	box-shadow: 0px 0px 17rpx 0px rgba(0, 0, 0, 0.05);
	border-radius: 20rpx;
	.shopBox-top {
		margin-top: 26rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		image {
			height: 46rpx;
			width: 48rpx;
		}
		.one {
			margin-left: 10rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #0f253a;
		}
		.three {
			margin-left: 350rpx;
			color: #6D7C88;
		}
	}
	.shopBox-between {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	
		.number {
			.number-left {
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #44969d;
			}
	
			.number-right {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #44969d;
			}
		}
	
		.quotient {
			.quotient-children {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #6d7c88;
			}
		}
	}
	
}
</style>