boying/pages/index/index.vue

<template>
	<view class="content">
		<view class="top"><image src="../../static/img/index/index.png" mode="" class="bg"></image></view>
		<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 * 2 }}</text>
					</view>
					<view class="baodan" @click="baodan(item.id)">查看详情</view>
				</view>
			</view>
		</view>
		<view class="index1">
			<image src="../../static/img/index/index1.png" mode=""></image>
			<!-- <view class="bottom"></view> -->
		</view>
		<u-tabbar :list="tabbar" bg-color='#000' active-color='#FAD6B0' inactive-color='#71614f' change='change'></u-tabbar>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { tabbar } from '@/components/tabbar/tabbar.js'
import { activityList } from '@/api/active.js';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
export default {
	components: {},
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
	},
	data() {
		return {
			list: [],
			revenueList: [],
			tabbar: tabbar,
		};
	},
	onShow() {
		if (this.hasLogin) {
			this.loadData();
		} else {
			uni.showModal({
				title: '登录',
				content: '您未登录，是否马上登陆?',
				success: e => {
					if (e.confirm) {
						saveUrl();
						interceptor();
					}
				},
				fail: e => {
					console.log(e);
				}
			});
		}
	},
	methods: {
		baodan(id) {
			uni.navigateTo({
				url: '/pages/index/infoDetail?id=' + id
			});
		},
		loadData() {
			activityList({}).then(({ data }) => {
				data.list.forEach(e => {
					let money = e.money * 1;
					let money1 = this.unit(e.money * 1 * 5);
					let money2 = this.unit(e.money * 1 * 25);
					let money3 = this.unit(e.money * 1 * 125);
					let money4 = this.unit(e.money * 1 * 625);
					let money5 = this.unit(e.money * 1 * 3125);
					let money6 = this.unit(e.money * 1 * 15625);
					let money7 = this.unit(e.money * 1 * 78125);
					e.revenueList = [];
					e.revenueList[0] = '5人x' + money + '元=' + money1;
					e.revenueList[1] = '25人x' + money + '元=' + money2;
					e.revenueList[2] = '125人x' + money + '元=' + money3;
					e.revenueList[3] = '625人x' + money + '元=' + money4;
					e.revenueList[4] = '3125人x' + money + '元=' + money5;
					e.revenueList[5] = '15625人x' + money + '元=' + money6;
					e.revenueList[6] = '78125人x' + money + '元=' + money7;
				});
				this.list = data.list;
			});
		},
		unit(num) {
			let i = 0;
			if (num / 10000 >= 1) {
				i = num / 10000 + '万元';
				if (num / 100000000 >= 1) {
					i = num / 100000000 + '亿元';
				}
			} else {
				i = num + '元';
			}
			return i;
		},
		change(index){
			console.log(index)
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	height: auto;
}

.content {
	.top {
		position: relative;
		display: flex;
		flex-direction: column;
		z-index: 10;
		.bg {
			width: 100%;
			height: 1480rpx;
		}
	}

	.box {
		.discounts {
			margin: 20rpx 30rpx;
			display: flex;
			justify-content: center;
			position: relative;
			width: 690rpx;
			height: 890rpx;
			z-index: 30;
			.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;
				text-align: center;
				line-height: 80rpx;
				color: #ffffff;
				background: #4e2c0e;
				font-size: 40rpx;
				border-radius: 10rpx;
			}
		}

		.earnings-box {
			z-index: 100;
			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 {
		margin-top: -400rpx;
		width: 100%;
		height: 713rpx;
		image {
			width: 100%;
			height: 100%;
		}
		.bottom {
			width: 100%;
			height: 100rpx;
		}
	}
}
</style>