web-africa-h5/components/treeActive/treeActive.vue

<template>
	<view v-if="isPop" class="treeActive">
		<template v-if="isTree">
			<view class="pop-bg" style="z-index: 106;" @click.stop="closeTree('isTree')"></view>
			<view class="pop-content o-h" style="padding: 0;z-index: 107;">
				<view class="pr">
					<view class="d-e-c" @click.stop="closeTree('isTree')"
						style="position: absolute;top: 20rpx;z-index: 2;left: 0;right: 20rpx;">
						<u-icon name="close" size="28rpx" color="#999999"></u-icon>
					</view>
					<view class="tc fb f64 p20"
						style="color: #055316;position: absolute;top: 0;z-index: 1;left: 0;right: 0;">
						{{treeModel.actName}}
					</view>
					<image :src="treeModel.cover" mode="widthFix"></image>
					<view class="d-c-c" style="position: absolute;bottom: 60rpx;z-index: 2;left: 0;right: 20rpx;"
						@click="gotoTree">
						<u-icon name="/static/icon/tree/zhongzhi.png" width="221rpx" height="73rpx"></u-icon>
					</view>
				</view>
			</view>
		</template>
		<template v-if="treePop">
			<view class="pop-bg" style="z-index: 106;" @click.stop="closeTree('treePop')"></view>
			<view class="pop-content" style="z-index: 107;">
				<view class="d-e-c" @click.stop="closeTree('treePop')">
					<u-icon name="close" size="28rpx" color="#999999"></u-icon>
				</view>
				<view>
					<view class="tc p20" style="font-size: 56rpx;">{{$t('w_0283')}}</view>
					<view class="d-c d-b-c mt40">
						<view class="d-c-c mb20" style="width: 60%;">
							<view class="f32">{{$t('MY_TH_2')}}：</view>
							<view class="d-c-c flex-1">
								<view class="d-c-c counter-add reduce" @click="reduceTree()">
									<u-icon name="minus" size="26rpx" color="#666"></u-icon>
								</view>
								<view class="counter-num">{{ treeNum }}</view>
								<view class="d-c-c counter-add" @click="AddTree()">
									<u-icon name="plus" size="26rpx" color="#666"></u-icon>
								</view>
							</view>
						</view>
						<view class="d-c-c" style="width: 60%;">
							<view class="f32 ">{{$t('w_0287')}}：</view>
							<view class="f48 domation flex-1 d-c-c">{{currencyIcon()}}{{treeNum * treeModel.price}}
							</view>
						</view>
					</view>
					<view>
						<button class="small-btn"
							@click="gotoPage('/pages/index/tree-recharge?pkBaseId='+treeModel.pkBaseId+'&pkTreeRule='+treeModel.pkTreeRule+'&shopQuantity='+treeNum)">{{$t('w_0035')}}</button>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isTree: false,
				treePop: false,
				treeNum: 0
			}
		},
		props: ['isPop', 'num', 'treeModel'],
		created() {
			console.log('isPop')
			this.isTree = true;
			this.treeNum = this.num * 1;
			console.log(this.treeNum)
		},
		methods: {
			gotoTree() {
				this.isTree = false;
				this.treeNum = this.num * 1;
				this.treePop = true;
			},
			reduceTree() {
				let self = this;
				if (self.treeNum > 1) {
					self.treeNum --;
				}
			},
			AddTree() {
				let self = this;
				self.treeNum ++;
			},
			closeTree(name) {
				this[name] = false;
				this.$emit('close')
			}
		}

	}
</script>

<style lang="scss">
	.treeActive {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 105;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		.pop-content {
			// position: fixed;
			width: 80%;
			box-sizing: border-box;
			z-index: 102;
			// left: 0;
			// right: 0;
			// top: 10%;
			// margin: auto;
			background-color: #ffffff;
			border-radius: 15rpx;
			padding: 20rpx;
		}

		.counter-add {
			height: 60rpx;
			width: 70rpx;
			flex-shrink: 0;
			font-size: 26rpx;
			background-color: rgb(235, 236, 238);
			color: rgb(50, 50, 51);
			font-weight: bold;
			border-radius: 0 8rpx 8rpx 0;
		}

		.counter-add.reduce {
			border-radius: 8rpx 0 0 8rpx;
		}

		.counter-num {
			height: 60rpx;
			min-width: 70rpx;
			padding: 0 10rpx;
			box-sizing: border-box;
			line-height: 60rpx;
			text-align: center;
			color: rgb(50, 50, 51);
			background-color: rgb(235, 236, 238);
			margin: 0 10rpx;
		}

		.small-btn {
			margin: 0 auto;
			background: #c8161d;
			color: #fff;
			width: 150px;
			height: 30px;
			line-height: 30px;
			border-radius: 20px;
			margin-top: 40px;
			margin-bottom: 20rpx;
		}
	}
</style>