cqcarbonwxapp/pages/use/assignment/assignment.vue

<template>
	<view class="pages">
		<view class="custom-nav">
			<view class="custom-nav-left" @click="$api.goback"><text class="iconfont icon-jiantou"></text></view>
			<view class="custom-nav-center">碳履约</view>
		</view>
		<view class="top-img">
			<!-- <image :src="$getimg + 'use-bg.png'" class="img" mode="widthFix"></image> -->
			<image :src="$getimg + 'lvyue.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-zhonghe.png'" class="img" mode="widthFix"></image>
				</view>
				<view class="aside-tool-text">购买碳汇</view>
			</view>
		</view>
		<view class="wrap40 content">
			<view class="target">
				<view class="year">2020年度</view>
				<view class="carbon">
					<view class="carbon-item">
						<view class="num">9990</view>
						<view class="text">碳汇量(kg)</view>
					</view>
					<view class="carbon-item">
						<view class="num">9990</view>
						<view class="text">核定减排量(kg)</view>
					</view>
				</view>
			</view>
			<!-- target end -->
			<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 -->
				<view class="status-wrap" v-if="applyStatus == '0'">
					<view class="main-til">
						<image :src="$getimg + 'icon-goumai.png'" class="main-til-icon" mode="widthFix"></image>
						<view class="main-til-text">非碳汇冲抵期</view>
					</view>
					<view class="explain">说明：冲抵减排量约需要1000kg碳汇量，您可以在平台进行认购</view>
					<view class="status-btn">
						<view class="status-btn-big">碳汇冲抵申请</view>
						<view class="status-btn-small">提交碳汇冲抵申请，审核后将冲抵减排量</view>
					</view>
				</view>
				<!-- status 0 -->
				<view class="status-wrap active" v-if="applyStatus == '1'">
					<view class="main-til">
						<image :src="$getimg + 'icon-goumai.png'" class="main-til-icon" mode="widthFix"></image>
						<view class="main-til-text">碳汇冲抵期</view>
					</view>
					<view class="explain">说明：您的碳汇量可以冲抵1000kg减排量，请于2020年10月1日内提交申请</view>
					<view class="status-btn active">
						<view class="status-btn-big">碳汇冲抵申请</view>
						<view class="status-btn-small">提交碳汇冲抵申请，审核后将冲抵减排量</view>
					</view>
				</view>
				<!-- status 1 -->
				<view class="status-wrap finish" v-if="applyStatus == '2'">
					<view class="main-til">
						<image :src="$getimg + 'icon-goumai.png'" class="main-til-icon" mode="widthFix"></image>
						<view class="main-til-text">碳汇冲抵期</view>
					</view>
					<view class="explain">说明：您的碳汇量可以冲抵1000kg减排量，请于2020年10月1日内提交申请</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:2,
				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("./assignment.css");
</style>