a77/pages/my/synthesis/synthesis.vue

<template>
	<view class="index content">
		<nav-header  :rightIcon="false" :rightText="'合成记录'" :showright="true" @rightClick="href('/pages/collection/compound_history/compound_history')">合成藏品</nav-header>
		<view style="height: 100rpx;"></view>
		<view class="card">
			<view class="item" v-for="item,i in collection_list" :key="i" @click="href('/pages/collection/compound/compound?id=' + item.id)">
				<image :src="item.img"></image>
				<view class="">
					<view class="text_hide" style="max-width: 500rpx;">{{item.title}}</view>
					<view class="">
						<!-- <text>限量</text> -->
						<!-- <text>{{item.num1}}</text> -->
					</view>
					<view style="margin-top: 60rpx;">合成时间：{{item.time1}} </view>
				</view>
				
			</view>
		</view>
		
		<view class="nothing" v-if="collection_list.length <= 0" style="width: 304rpx;margin: 156rpx auto 0;">
			<view class="">
				<image src="/static/shoping/8.png" mode="widthFix" style="width: 304rpx;"></image>
			</view>
			<view class="" style="text-align: center;
			color: #999999;
			font-size: 28rpx;">
		
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	import navHeader from "@/components/my/nav_header.vue"
	export default {
		components:{navHeader},
		data() {
			return {
				collection_list:[],
				page:0
			};
		},
		onLoad() {
			this.getcompound();
		},
		methods:{
			rightClick(){
				
			},
			//获取合成数据
			getcompound() {
				
			// 	uni.showToast({
			// 		title: "加载中",
			// 		icon: "loading"
			// 	})
			
				this.api.compound_list(30, ++this.page).then(res => {
					uni.hideToast()
					res.data.data.forEach(ele => {
						this.collection_list.push({
							title: ele.name,
							id: ele.id,
							img: ele.cover,
							no: "",
							type: 3,
							time1: ele.sell_at,
							time2: ele.collect_time,
							num1: ele.num, //限量数量
							num2: ele.sell_num //剩余数量
			
						})
					})
					console.log(this.collection_list);
				})
			
			},
		}
	}
</script>

<style lang="less">
	
	.card{
		.item{
			margin: 20rpx auto;
			width: 622rpx;
			background: #1D1F1E;
			border-radius: 20rpx;
			display: flex;
			color: #fff;
			padding:24rpx 32rpx;
			
			
			image{
				width: 153rpx;
				height: 153rpx;
				border-radius: 20rpx;
			}
			>view:last-child {
				margin-left: 24rpx;
				>view:nth-child(2),
				>view:nth-child(3) {
					margin-top: 20rpx;
				}
				>view:nth-child(1) {
					font-size: 34rpx;
					font-weight: bold;
				}
				>view:nth-child(2) {
					font-size: 24rpx;
					
					>text:last-child {
						background: rgba(110, 77, 255, 0.0980);
						color: #6E4DFF;
						padding: 5rpx 10rpx;
						border-radius: 6rpx;
						margin-left:10rpx;
					}
					>text:first-child {
						background: #6E4DFF;
						color: #fff;
						padding: 5rpx 10rpx;
						border-radius: 6rpx;
					}
				}
			}
			view:last-child>view:nth-child(3){
				display: flex;
				// align-items: center;
				font-weight: 400;
				color: #fff;
				font-size: 24rpx;
				// padding: 10rpx 0 0 20rpx;
				
				image{
					width: 28rpx;
					height: 28rpx;
					// margin-right: 10rpx;
				}
			}
		}
	}

</style>