boying/pages/index/infoDetail.vue

<template>
	<view class="center">
		<view class="box">
			<view class="discounts">
				<view class="title">{{ $t('hea.yz') }}:</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" v-if="item.v2_layer == 0">{{ item.name }}</view>
					<view class="main-title-font" v-else-if="(status == '1' && item.income * 1 >= item.v2_limit * 1 && item.v2_layer != 0) || status == '2'">黑钻VIP义工受益</view>
					<view class="main-title-font" v-else>VIP义工受益</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 + $t('hea.dsy') : index + 1 + $t('hea.dsy') + '(' + $t('hea.vipzs') + ')' }}</view>
							<view class="textDetail-content">{{ ls }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="baodan" @click="baodan(id)" v-if="status == '0'">{{ $t('hea.wyyz') }}</view>
		<view class="baodan1" @click="baodan(id)" v-if="status == '1' && item.income * 1 < item.v2_limit * 1 && item.v2_layer != 0">{{ $t('hea.lksj') }}</view>
		<view class="baodan" @click="baodan(id)" v-if="status == '1' && item.income * 1 >= item.v2_limit * 1 && item.v2_layer != 0">{{ $t('hea.ljsj') }}</view>
		<view class="baodan" v-if="status == '2' || (status == '1' && item.v2_layer == 0)" style="background: #020202;">{{ $t('hea.ywc') }}</view>
		<uni-popup ref="popup" type="center">
			<view class="popup-box">
				<view class="img"><image src="../../static/img/tishi.png" mode=""></image></view>
				<view class="mian">
					<view class="font" v-if="item.v2_layer == 0">
						{{ $t('hea.nsfsjqrndbfcj') }}
						<br />
						{{ $t('hea.rndbfytrmycj') }}
						<br />
						{{ $t('hea.dndkzcqrjh') }}
						<br />
					</view>
					<view class="font" v-else>
						{{ $t('hea.nsfsjqrndbf') }}
						<br />
						{{ $t('hea.rndbfytrmy') }}
						<br />
						{{ $t('hea.dndkzcqrjh') }}
						<br />
					</view>
					<view class="comfirm-box">
						<view class="cancel" @click="cancel">{{ $t('foo.qx') }}</view>
						<view class="comfirm" @click="confirm">{{ countDown == 0 ? $t('hea.zcqd') : countDown }}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { mapState, mapMutations } from 'vuex';
import { activitys } from '@/api/active.js';
export default {
	data() {
		return {
			id: '',
			revenueList: [],
			item: '',
			status: '',
			show1: false,
			time: '', //保存倒计时对象
			countDown: 0, //倒计时
			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'
			] //七层的图片
		};
	},
	watch: {
		// 监听倒计时
		countDown(i) {
			if (i == 0) {
				clearInterval(this.time);
			}
		}
	},
	components: {
		uniPopup
	},
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
	},
	onLoad(option) {
		uni.setNavigationBarTitle({
			title: this.$t('foo.xq')
		});
		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;
		},
		// 弹窗 - 取消
		cancel() {
			this.countDown = 0;
			this.$refs.popup.close();
		},
		confirm() {
			if (this.countDown != 0) {
				return;
			}
			this.$refs.popup.close();
			uni.navigateTo({
				url: '/pages/index/info?id=' + this.id
			});
		},
		baodan(id) {
			const obj = this;
			console.log(this.userInfo.nickname, '11111');
			let a =/[0-9]{3}[*]{4}[0-9]{4}/;
			
			if (a.test(this.userInfo.nickname)){
				uni.showModal({
					title: this.$t('foo.ts'),
					content: this.$t('foo.ndqwtxzsxm'),
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/set/userinfo'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}else {
				if (!this.userInfo.bank_card_no && !this.userInfo.bank_of_deposit && this.userInfo.bank_card_no == '' && this.userInfo.bank_of_deposit == '') {
					uni.showModal({
						title: this.$t('foo.ts'),
						content: this.$t('foo.ndqwtxskxx'),
						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('当前援助额度不足以升级黑钻VIP义工');
						return;
					}
					if (this.status == '0') {
						// 判断是否在倒计时
						if (obj.countDown > 0) {
							return false;
						} else {
							obj.countDown = 15;
							obj.time = setInterval(() => {
								obj.countDown--;
							}, 1000);
							//调用验证码接口
							this.$refs.popup.open();
						}
					} else {
						uni.navigateTo({
							url: '/pages/index/info?id=' + id
						});
					}
			}
				// 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: 400rpx;
		height: 80rpx;
		margin: -60rpx auto 0;
		border-radius: 50rpx;
		position: relative;
		.main-title-image {
			position: absolute;
			left: 0;
			top: 0;
			width: 400rpx;
			height: 80rpx;
			.image {
				width: 100%;
				height: 100%;
				border-radius: 50rpx;
			}
		}

		.main-title-font {
			position: relative;
			z-index: 10;
			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;
			}
		}
	}
}
.popup-box {
	width: 650rpx;
	padding-bottom: 40rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	position: relative;
	.img {
		position: relative;
		top: -56rpx;
		left: 0;
		width: 650rpx;
		height: 132rpx;
		display: flex;
		justify-content: center;
		image {
			border-radius: 20rpx 20rpx 0 0;
			width: 450rpx;
			height: 132rpx;
		}
	}

	.mian {
		margin-top: -44rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		// padding: 32rpx 32rpx;
		background-color: #ffffff;
		border-radius: 0 0 20rpx 20rpx;
		text-align: center;
		padding: 30rpx;
		.font {
			text-align: left;
			line-height: 54rpx;
			color: #7e7457;
			font-size: 30rpx;
		}

		.comfirm-box {
			margin-top: 52rpx;
			display: flex;
			// margin-bottom: 32rpx;

			// justify-content: space-around;
			.cancel {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 250rpx;
				height: 80rpx;
				border: 1px solid #dcc786;
				border-radius: 10rpx;
				font-size: 32rpx;
				color: #605128;
			}

			.comfirm {
				margin-left: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 250rpx;
				height: 80rpx;
				background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
				border-radius: 10rpx;
				font-size: 32rpx;
				color: #605128;
			}
		}
	}
}
</style>