BCMM/pages/leaks/index.vue

<template>
	<view class="content">
		<view class="bannerimg">
			<image src="../../static/img/banner.png" class="imgBanner"></image>
		</view>
		<view class="wrap leakagebox">
			<view class="mallList flex-start" v-if="listAll.length>0">
				<view class="listli rows" v-for="(item,index) in listAll" :key="index">
					<view class="title flex-start flsb ">
						<view class="titfl flex">
							<image src="../../static/img/img06.png" class="listimg"></image>
							{{item.name}}
						</view>
					</view>
					<view class="rowsfl">
						<view class="times flex-start">
							<image src="../../static/img/img15.png" class="iconimg"></image>
							價值:
							<span>{{item.money}}USDT</span>
						</view>
						<view class="times flex-start">
							<image src="../../static/img/img28.png" class="iconimg"></image>
							收益:
							<span>{{item.up_ratio}}</span>
						</view>
					</view>
					<view class="rowsfr" @click="orderopen(item.id)">立即撿漏</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" line :loadmoreText="$t('base.加载更多')" :loadingText="$t('base.正在加载')"
			:nomoreText="$t('base.没有更多了')" />
		<taber></taber>
	</view>
</template>

<script>
	import {
		leak_list,
		order,
	} from '@/api/index.js';
	import taber from "@/components/footer/footer.vue";
	export default {
		components: {
			taber
		},
		data() {
			return {
				navIndex: 0,
				type: '1',
				listAll: [],
				status: 'loadmore', //'上拉加載更多','加載中','沒有更多'
			}
		},
		// onLoad() {
		// 	this.getList()
		// },
		onShow() {
			this.getList();
		},
		//监听该页面用户下拉刷新事件
		onPullDownRefresh() {
			this.getList();
			this.status='loadmore';
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			getList() {
				uni.showLoading({
					mask: true
				});
				this.status = "loading"
				leak_list().then(res => {
					uni.hideLoading()
					this.listAll = res.data.map((re)=>{
						re.money = +re.money;
						return re
					});
					this.status='nomore'
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: err,
						icon: 'none',
					})
				})
			},
			orderopen(id) {
				order({id}).then(res => {
					this.listAll=[];
					this.status='loadmore'
					this.getList();
					uni.showToast({
						title: res.msg
					});
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none',
					})
				})
			},
		},

	}
</script>

<style scoped lang="scss">
	.content{
		padding-bottom: 30rpx;
	}
	.bannerimg {
		width: 100%;
		height: 353rpx;

		.imgBanner {
			width: 100%;
			height: 353rpx;
		}
	}

	.leakagebox {
		position: relative;
		padding: 0 30rpx;
	}

	.mallList {
		flex-wrap: wrap;

		.listli {
			width: 330rpx;
			padding: 30rpx 24rpx;
			// border-radius: 8rpx;
			// background-color: #fff;
			// box-shadow: 0px 1px 5px 0px #C9D9F199;
			margin-bottom: 30rpx;
			margin-right: 28rpx;

		}

		.listli:nth-child(2n) {
			margin-right: 0;
		}

		.rows {
			background-color: #fff;
			border-radius: 20rpx;
			//padding: 32rpx 0;


			.title {
				margin-bottom: 20rpx;

				.titfl {
					color: #333333;
					font-size: 32rpx;
					font-weight: 700;

					.typeTips {
						width: 20rpx;
						height: 20rpx;
						border-radius: 50rpx;
						margin-left: 20rpx;
					}

					.red {
						background-color: red;
					}

					.green {
						background-color: #14C670;
					}
				}

				.price {
					color: #F5A94F;
				}

			}

			.listimg {
				width: 48rpx;
				height: 48rpx;
				margin-right: 10rpx;
			}

			.iconimg {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}

			.rowsfl {
				font-size: 28rpx;

				.times {
					
					margin-bottom: 24rpx;
					color: #828282;

					span {
						color: #333333;
					}
				}
			}

			.rowsfr {
				background: linear-gradient(90.89deg, #38F957 49.57%, #1DEEE1 99.24%);
				width: 80%;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx;
				color: #040616;
				font-size: 28rpx;
				border-radius: 8rpx;
				margin: 0 auto;
			}
		}
	}
</style>