cqcarbonwxapp/pages/use/companyUse/companyUse.vue

<template>
	<view class="pages">
		<view class="top-img">
			<!-- <image :src="$getimg + 'use-bg.png'" class="img" mode="widthFix"></image> -->
			<image :src="$getimg + 'zhonghe-bg.jpg'" class="img" mode="widthFix"></image>
		</view>
		<view class="aside-tool">
			<view class="aside-tool-item">
				<view class="aside-tool-icon green">
					<image :src="$getimg + 'icon-zhonghe.png'" class="img" mode="widthFix"></image>
				</view>
				<view class="aside-tool-text">关于碳中和</view>
			</view>
			<view class="aside-tool-item"  @click="randomPop">
				<view class="aside-tool-icon yellow">
					<image :src="$getimg + 'icon-tanpuhui.png'" class="img" mode="widthFix"></image>
				</view>
				<view class="aside-tool-text">购买碳汇</view>
			</view>
		</view>
		<view class="wrap40 content">
			
			
			<view class="content-down">
				<view class="step-wrap">
				<!-- <view class="step-wrap" v-if="applyStatus == 0||applyStatus == 1||applyStatus == 2||applyStatus == 3"> -->
					<view class="step-item" :class="applyStatus == 0?'active':''"></view>
					<view class="step-item" :class="applyStatus == 1?'active':''"></view>
					<view class="step-item" :class="applyStatus == 2?'active':''"></view>
				</view>
				<view class="step-text">
					<view class="step-text-item">
						<view class="step-text-item-cn">未达碳汇量</view>
						<view class="step-text-item-en">Step 1</view>
					</view>
					<view class="step-text-item">
						<view class="step-text-item-cn">实现碳中和</view>
						<view class="step-text-item-en">Step 2</view>
					</view>
					<view class="step-text-item">
						<view class="step-text-item-cn">获得证书</view>
						<view class="step-text-item-en">Step 3</view>
					</view>
				</view>
				<!-- step end -->
				<!-- status 0 -->
				<view class="status-wrap finish" v-if="applyStatus == '0'">
					<view class="main-til">
						<image :src="$getimg + 'icon-tanpuhui.png'" class="main-til-icon" mode="widthFix"></image>
						<view class="main-til-text">未达碳汇量</view>
					</view>
					<view class="explain">说明：实现企业碳中和约需要240000kg碳汇量，您可以在平台进行认购</view>
					<view class="status-btn">
						<view class="status-btn-big">实现碳中和</view>
						<view class="status-btn-small">实现碳中和后将获得碳汇核证签发证书</view>
					</view>
				</view>
				<view class="status-wrap" v-if="applyStatus == '1'">
					<view class="main-til">
						<image :src="$getimg + 'icon-tanpuhui.png'" class="main-til-icon" mode="widthFix"></image>
						<view class="main-til-text">实现碳中和</view>
					</view>
					<view class="explain">说明：可以用碳汇量中和您现在的碳排放量，中和后将可以获得证书</view>
					<view class="status-btn">
						<view class="status-btn-big">实现碳中和</view>
						<view class="status-btn-small">实现碳中和后将获得碳汇核证签发证书</view>
					</view>
				</view>
				<!-- status 1 -->
				<view class="status-wrap active" v-if="applyStatus == '2'">
					<view class="main-til">
						<image :src="$getimg + 'icon-tanpuhui.png'" class="main-til-icon" mode="widthFix"></image>
						<view class="main-til-text">获得证书</view>
					</view>
					<view class="explain">说明：本年度已完成企业碳中和，中和碳汇量为240000kg</view>
					<view class="status-btn" @click="$api.href('./assignmentDetail/assignmentDetail')">
						<view class="status-btn-big">查看签发证书</view>
						<view class="status-btn-small">点击查看碳汇核证签发证书</view>
					</view>
				</view>				
				<!-- status 2 -->
			</view>
		</view>
		
		<quick-buy class="quickbuy" ref="quickBuy" @closeModal="closeModal" :visible="modal.visibleModal" v-if="modal.visibleModal"></quick-buy>
	</view>
</template>

<script>
	import quickBuy from 'pages/index/modal/quickBuy';
	export default {
		components:{
			quickBuy,
		},
		data() {
			return {
				$getimg:this.$getimg,
				modal: {
					visibleModal: false
				},
				token:'',
				applyStatus:0,
				params:{
					
				}
				
			}
		},
		onShow() {
			
		},
		onLoad() {

		},
		methods: {
			//开启多株购碳
			randomPop() {
				this.modal.visibleModal = true;
				this.$nextTick(res => {
					// console.log('this.$refs',this.$refs.quickBuy)
					this.$refs.quickBuy.openPop();
				});
			},
			closeModal() {
				this.modal.visibleModal = false;
			},

		}
	}
</script>

<style>
	@import url("../useCommon.css");
	@import url("./companyUse.css");
</style>