boying/pages/index/infoDetail.vue

<template>
	<view class="center">
		<view class="box">
			<view class="discounts">
				<view class="title">援助:</view>
				<view class="money">
					￥
					<text>{{ item.money * 2 || 0}}</text>
				</view>
			</view>
			<view class="main-box">
				<view class="main-title">
					<view class="main-title-image"><image class="image" src="../../static/icon/title.png" mode=""></image></view>
					<view class="main-title-font">{{item.name}}</view>
				</view>
				<view class="main">
					<view class="main-item"  v-for="(ls, index) in revenueList">
						<view class="main-image"><image :src="image[index]" mode=""></image></view>
						<view class="main-font">
							<view class="textDetail-title">{{ index < 2 ? index + 1 + '度受益' : index + 1 + '度收益(黑钻VIP义工专属)' }}</view>
							<view class="textDetail-content">{{ ls }}</view>
						</view>
					</view>
				</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 class="zhushi">
				<text v-if="status == '1'">说明：当前等级援助者，升级成援助组长需要援助{{ item.v2_limit * 1 }},当前援助金额{{ item.income }}</text>
				<text v-if="status == '2'">说明：当前等级援助组长已是最高收益</text>
			</view> -->
		</view>

		<view class="baodan"  @click="baodan(id)" v-if="status == '0'">我要援助</view>
		<view class="baodan1"  @click="baodan(id)" v-if="status == '1'&&item.income*1<item.v2_limit*1 && item.v2_layer != 0" >立即升级</view>
		<view class="baodan"  @click="baodan(id)" v-if="status == '1'&&item.income*1>=item.v2_limit*1 && item.v2_layer != 0">立即升级</view>
		<view class="baodan" v-if="status == '2'||(status == '1' && item.v2_layer == 0)" style="background: #020202;">已完成</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { activitys } from '@/api/active.js';
export default {
	data() {
		return {
			id: '',
			revenueList: [],
			item: '',
			status: '',
			image:['../../static/icon/1.png','../../static/icon/2.png','../../static/icon/3.png','../../static/icon/4.png','../../static/icon/5.png','../../static/icon/6.png','../../static/icon/7.png']
		};
	},
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
	},
	onLoad(option) {
		this.id = option.id;
		this.loadData();
	},
	methods: {
		loadData() {
			const obj = this;
			activitys({}, this.id).then(e => {
				console.log(e);
				obj.item = e.data;

				if (e.data.my_join) {
					obj.status = e.data.my_join.status;
				} else {
					obj.status = '0';
					obj.isU = false;
				}
				let i = e.data.v1_layer + e.data.v2_layer
				if (e.data.v2_layer&&(obj.status == '0'||(obj.status == '1'&&e.data.income*1<e.data.v2_limit*1))){
					i = e.data.v1_layer
				}
				
				
				let money = e.data.money * 1;
				let money1 = e.data.money * 1;
				let people = 1
				for (let j=0;j < i; j++){
					people = people * 5;
					money = money * 1 * 5;
					obj.revenueList[j] = people +'人x' + money1 + '元=' + this.unit(money);
					
				}
			});
		},
		unit(num) {
			let i = 0;
			if (num / 10000 >= 1) {
				i = num / 10000 + '万元';
				if (num / 100000000 >= 1) {
					i = num / 100000000 + '亿元';
				}
			} else {
				i = num + '元';
			}
			return i;
		},
		baodan(id) {
			if ((!this.userInfo.bank_card_no && !this.userInfo.bank_of_deposit) && this.userInfo.ali == null && this.userInfo.wechat == null) {
				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 {
				if (this.status == '1' && this.item.income < this.item.v2_limit * 1) {
					this.$api.msg('当前援助金额不足以升级');
					return;
				}
				uni.navigateTo({
					url: '/pages/index/info?id=' + id
				});
			}
		}
	}
};
</script>

<style lang="scss">
.center {
	padding-bottom: 50rpx;
}
.box {
	.discounts {
		margin: 0 30rpx;
		position: relative;
		padding: 20rpx;
		background-color: #1f2020;
		border-radius: 10rpx;
		.title {
			width: 100%;
			text-align: left;
			color: #e6c3a1;
		}
		.money {
			margin-top: 30rpx;
			padding-bottom: 30rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #c63535;
			width: 100%;
			text-align: center;
			text {
				font-size: 116rpx;
				font-family: Source Han Sans CN;
				font-weight: 800;
				color: #c63535;
				line-height: 115rpx;
			}
		}
	}

	
	.zhushi {
		color: #e6c3a1;
		padding: 20rpx 40rpx;
	}
}
.baodan {
	width: 452rpx;
	height: 80rpx;
	margin: 50rpx auto 0;
	text-align: center;
	line-height: 80rpx;
	color: #ffffff;
	background: #4e2c0e;
	font-size: 40rpx;
	border-radius: 10rpx;
}
.baodan1 {
	width: 452rpx;
	height: 80rpx;
	margin: 50rpx auto 0;
	text-align: center;
	line-height: 80rpx;
	color: #ffffff;
	background: #9f9f9f;
	font-size: 40rpx;
	border-radius: 10rpx;
}
.main-box {
	margin: 80rpx 30rpx 0;
	position: relative;
	padding: 20rpx;
	background-color: #1f2020;
	border-radius: 10rpx;
	.main-title {
		width: 320rpx;
		height: 80rpx;
		margin: -60rpx auto 0;
		border-radius: 50rpx;
		position: relative;
		.main-title-image {
			position: absolute;
			left: 0;
			top: 0;
			width: 320rpx;
			height: 80rpx;
			.image {
				width: 100%;
				height: 100%;
				border-radius: 50rpx;
			}
		}

		.main-title-font {
			position: relative;
			z-index: 100;
			text-align: center;
			line-height: 80rpx;
			font-size: 46rpx;
			font-weight: bold;
			color: #54300f;
		}
	}
	.main {
		padding: 40rpx 0;
		.main-item {
			margin-top: 20rpx;
			width: 100%;
			padding: 14rpx;
			background: #e6c3a1;
			position: relative;
			border-radius: 20rpx;
			.main-image {
				position: absolute;
				top: -2rpx;
				left: -2rpx;
				width: 110rpx;
				height: 110rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.main-font {
				font-size: 28rpx;
				padding-left: 80rpx;
			}
		}
	}
}
</style>