boying/pages/index/index.vue

<template>
	<view class="content">
		<image src="../../static/img/index/index.png" mode="" class="bg"></image>
		<view class="box">
			<view v-for="(item, index) in list" :key="index">
				<view class="discounts">
					<image src="../../static/img/index/youhui1.png" mode="" class="discounts1"></image>
					<view class="money">
						￥
						<text>{{ item.money }}</text>
					</view>
					<view class="baodan" @click="baodan(item.id)"><image src="../../static/img/index/baodan1.png" mode=""></image></view>
				</view>
				<view class="earnings-box">
					<image src="../../static/img/index/vip.png" mode="" class="earnings"></image>
					<view class="text-box">
						<view class="textDetail" v-for="(ls, index) in revenueList">
							<view class="textDetail-title">{{ index < 2 ? index + 1 + '层收益' : index + 1 + '层收益(黑钻VIP会员专属)' }}</view>
							<view class="textDetail-content">{{ ls }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="index1">
			<image src="../../static/img/index/index1.png" mode=""></image>
			<view class="bottom">
				
			</view>
		</view>
		
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { activityList } from '@/api/active.js';
export default {
	components: {},
	computed:{
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
	},
	data() {
		return {
			list: [],
			revenueList: [
				'5人x2000元=1万元',
				'25人x2000元=5万元',
				'125人x2000元=25万元 ',
				'625人x2000元=125万元',
				'3125人x2000元=625万元 ',
				'15625人x2000元=3125万元 ',
				'78125人x2000元=1.5625亿元'
			]
		};
	},
	onShow() {
		this.loadData();
	},
	methods: {
		baodan(id) {
			if(!this.userInfo.bank_card_no && !this.userInfo.bank_of_deposit){
				console.log(this.userInfo,"11111")
				uni.showModal({
				    title: '提示',
				    content: '您当前未填写银行卡信息和所属银行是否前往填写',
				    success: function (res) {
				        if (res.confirm) {
				           uni.navigateTo({
								url:'/pages/set/userinfo'
				           })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}else {
				uni.navigateTo({
					url:'/pages/index/info?id='+ id
				});
			}
		},
		loadData(){
			activityList({}).then(({data}) =>{
				this.list = data.list
			})
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	height: auto;
	min-height: 100%;
}

.content {
	position: relative;
	display: flex;
	flex-direction: column;
	.bg {
		width: 100%;
		height: 1480rpx ;
	}
	.box {
z-index: 100;
	.discounts {
		margin: 0 30rpx;
		display: flex;
		justify-content: center;
		position: relative;
		width: 690rpx;
		height: 890rpx;
		.discounts1 {
			width: 100%;
			height: 100%;
		}

		.money {
			margin: 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
			top: 0;
			margin-top: 250rpx;
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #c63535;
			line-height: 30rpx;
			position: absolute;

			text {
				font-size: 116rpx;
				font-family: Source Han Sans CN;
				font-weight: 800;
				color: #c63535;
				line-height: 115rpx;
			}
		}

		.baodan {
			position: absolute;
			top: 690rpx;
			width: 300rpx;
			height: 80rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.earnings-box {
		position: relative;
		margin: 40rpx 30rpx;
		width: 690rpx;
		height: 1140rpx;
		.earnings {
			width: 100%;
			height: 100%;
		}
		.text-box {
			position: absolute;
			top: 184rpx;
			left: 110rpx;
			.textDetail {
				min-height: 134rpx;
				max-height: 140rpx;
				overflow: hidden;
				padding-bottom: 64rpx;
				.textDetail-title {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #4e2c0e;
					line-height: 30rpx;
					padding-bottom: 10rpx;
				}

				.textDetail-content {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #4e2c0e;
					line-height: 30rpx;
				}
			}
		}
	}
	}

.index1{
	position: absolute;
	bottom: -400rpx;
	width: 100%;
	height: 713rpx;
	image{
		width: 100%;
		height: 100%;
	}
	.bottom{
		width: 100%;
		height: 100rpx;
		position: absolute;
	}
}

}
</style>