新增碳履约界面

common/css/common.css

@@ -51,13 +51,42 @@
 .full-search{padding-left: 16rpx;margin-bottom: 24rpx;}
 
 /* 侧边工具 */
-.aside-tool{position: fixed;top: 128rpx;right: 14rpx;}
+.aside-tool{position: fixed;top: 170rpx;right: 14rpx;}
 .aside-tool-item{margin-bottom: 35rpx;text-align: center;}
 .aside-tool-icon{width: 80rpx;height: 80rpx;margin: 0 auto;position: relative;overflow: hidden;top: 10rpx;display: flex;align-items: center;justify-content: center;border: 4rpx solid #fff;border-radius: 50%;}
-.aside-tool-icon .img{width: 100%;height: 100%;}
+.aside-tool-icon.green{background-color: #26D18B;}
+.aside-tool-icon.yellow{background-color: #FFDA00;}
+.aside-tool-icon .img{width: 48rpx;height: 48rpx;}
 .aside-tool-text{position: relative;width: 144rpx;height: 40rpx;line-height: 40rpx;background-color: #fff;border-radius: 20rpx;font-size: 24rpx;color: #0A6F44;}
 
-
+.step-wrap{padding: 43rpx 86rpx 12rpx 74rpx;margin-bottom: 12rpx;display: flex;}
+.step-item{position: relative;flex: 1;height: 2rpx}
+.step-item::before{content: '';width: 16rpx;height: 16rpx;background-color: #E5E5E5;border-radius: 50%;position: absolute;left: 0;top: -8rpx;}
+.step-item.active::before{background-color: #26D18B;}
+.step-item::after{content: '';position: absolute;height: 1px;left: 22rpx;right: 6rpx;background-color: #E5E5E5;top: 0;}
+.step-wrap .step-item:last-of-type{flex: unset;width: 0;}
+.step-wrap .step-item:last-of-type::after{height: 0;}
+.step-text{margin:0 -30rpx 49rpx;display: flex;justify-content: space-between;}
+.step-text-item{flex: 1;text-align: center;}
+.step-text-item-cn{font-size: 28rpx;color: #333;line-height: 40rpx;}
+.step-text-item-en{font-size: 24rpx;color: #999;line-height: 33rpx;}
+
+.main-til{display: flex;margin-bottom: 24rpx;align-items: center;}
+.main-til-icon{width: 36rpx;height: 36rpx;margin-right: 20rpx;}
+.main-til-text{font-size: 32rpx;color: #333;font-weight: 500;}
+
+.timeline{margin-left: 56rpx;margin-bottom: 24rpx;}
+.timeline-item-content{transform: translateY(-30rpx);}
+.timeline-item{position: relative;padding: 0 0 118rpx 60rpx;font-weight: 400;border-left: 2rpx solid #E5E5E5;}
+.timeline .timeline-item:first-of-type{padding-top: 0;}
+.timeline .timeline-item:first-of-type .timeline-item-content{transform: translateY(0);}
+.timeline .timeline-item:last-of-type{padding-bottom: 0;border: 0;}
+.timeline-item-til{margin-bottom: 4rpx;font-size: 34rpx;color: #333;line-height: 48rpx;}
+.timeline-item.active {border-color: #26D18B;}
+.timeline-item.active .timeline-item-til{color: #26D18B;}
+.timeline-item-con{font-size: 30rpx;color: #999;line-height: 42rpx;}
+.timeline-item::before{content: '';width: 16rpx;height: 16rpx;border-radius: 50%;background: #E5E5E5;position: absolute;left: -8rpx;top: 0;}
+.timeline-item.active::before{width: 40rpx;height: 40rpx;left: -20rpx;background: url('http://fqn.hongweisoft.com/cqcarbon/wxapp/icon-zhonghe.png');background-size: 100%;}
 
 
 

pages.json

@@ -68,6 +68,12 @@
 				"navigationStyle":"custom"
 			}
 		},
+		{
+			"path": "pages/use/assignment/assignmentDetail/assignmentDetail",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		},
 		{
 			"path": "pages/usercenter/usercenter",
 			"style": {

pages/index/modal/quickBuy.vue

@@ -100,7 +100,7 @@
 			...mapMutations(['addCart']),
 			getHelpPeople:debounce(function(num){
 				if(this.productType=='self'){
-					console.log('this.prohelpPeople',this.prohelpPeople);
+					console.log('this.prohelpPeople',JSON.parse(JSON.stringify(this.prohelpPeople)));
 					this.helpPeople = this.prohelpPeople;
 					this.helpPeople[0].carbonSkin = this.shoppingNum;
 					return ;
@@ -114,7 +114,7 @@
 				},
 				}).then(res =>{
 					// this.loading = false
-					console.log('getHelpPeople',res);
+					console.log('getHelpPeople',JSON.parse(JSON.stringify(res)));
 					this.helpPeople = res.data.retBody;
 				})
 			},200),

pages/offlineBuy/offlineBuy.css

@@ -1,7 +1,7 @@
 page{background-color: #F5F5F5;}
 .offline-content{min-height: 500rpx;box-sizing: border-box;padding: 32rpx 24rpx;margin: 32rpx 40rpx;background-color: #fff;box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.04);border-radius: 16rpx;}
 
-.step-wrap{padding: 43rpx 86rpx 12rpx 74rpx;margin-bottom: 12rpx;display: flex;}
+/* .step-wrap{padding: 43rpx 86rpx 12rpx 74rpx;margin-bottom: 12rpx;display: flex;}
 .step-item{position: relative;flex: 1;height: 2rpx}
 .step-item::before{content: '';width: 16rpx;height: 16rpx;background-color: #E5E5E5;border-radius: 50%;position: absolute;left: 0;top: -8rpx;}
 .step-item.active::before{background-color: #26D18B;}
@@ -11,7 +11,7 @@ page{background-color: #F5F5F5;}
 .step-text{margin:0 -30rpx 49rpx;display: flex;justify-content: space-between;}
 .step-text-item{flex: 1;text-align: center;}
 .step-text-item-cn{font-size: 28rpx;color: #333;line-height: 40rpx;}
-.step-text-item-en{font-size: 24rpx;color: #999;line-height: 33rpx;}
+.step-text-item-en{font-size: 24rpx;color: #999;line-height: 33rpx;} */
 
 .til{display: flex;align-items: center;font-size: 32rpx;color: #333;line-height: 45rpx;letter-spacing: 2rpx;margin-bottom: 28rpx;}
 .til-img{width: 36rpx;height: 36rpx;margin-right: 10rpx;}

pages/use/assignment/assignment.css

@@ -1,19 +1,26 @@
 page{background-color: #4EBC6B;}
-.top-img .img{height: 1130rpx;}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+/* .top-img{height: 1130rpx;} */
+.target{background-color: #fff;border-radius: 16rpx;padding: 24rpx;text-align: center;margin-bottom: 8rpx;}
+.target .year{margin-bottom: 16rpx;font-size: 28rpx;color: #333;line-height: 40rpx;letter-spacing: 1rpx;font-weight: 500;}
+.carbon{display: flex;justify-content: space-between;}
+.carbon .carbon-item{flex: 1;position: relative;}
+.carbon .carbon-item + .carbon-item::before{content: '';width: 1px;height: 60rpx;background-color: #979797;position: absolute;left: 0;top: 29rpx;}
+.carbon-item .num{font-size: 56rpx;color: #26D18B;line-height: 74rpx;letter-spacing: 3rpx;}
+.carbon-item .text{font-size: 28rpx;color: #999;line-height: 40rpx;}
+
+.content-down{background-color: #fff;border-radius: 16rpx;padding: 24rpx;}
+.step-text{margin-bottom: 51rpx;}
+.content-down .step-text-item-cn{font-size: 24rpx;}
+.content-down .step-text-item-cn.active{font-size: 28rpx;}
+
+.explain{font-size: 24rpx;color: #333;margin-bottom: 32rpx;line-height: 33rpx;letter-spacing: 1rpx;}
+.status-btn{padding: 24rpx;background:#F2F2F2;border-radius: 8rpx;text-align: center;color: #999;font-weight: 400;}
+.active .status-btn{background: linear-gradient(-45deg, #FD4B35 0%, #FF945B 100%);color: #fff;}
+.finish .status-btn{background: linear-gradient(90deg, #FFF900 0%, #FFD200 100%);color: #333;}
+.active .status-btn .status-btn-small,
+.finish .status-btn .status-btn-small{opacity: 0.5;}
+.status-btn-big{font-size: 34rpx;line-height: 48rpx;}
+.status-btn-small{font-size: 24rpx;line-height: 33rpx;}
 
 
 

pages/use/assignment/assignment.vue

@@ -1,31 +1,117 @@
 <template>
 	<view class="pages">
 		<view class="top-img">
-			<image :src="$getimg + 'use-bg.png'" class="img" mode="widthFix"></image>			
+			<!-- <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">
+				<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">
-				<view class="aside-tool-icon">
+			<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-tanpuhui.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-tanpuhui.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-tanpuhui.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:{
 					
 				}
@@ -38,6 +124,17 @@
 
 		},
 		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;
+			},
 
 		}
 	}

pages/use/assignment/assignmentDetail/assignmentDetail.css

@@ -0,0 +1,43 @@
+.status{text-align: right;margin-bottom: 24rpx;color: #26D18B;line-height: 42rpxp;font-size: 400;}
+.summary{margin-bottom: 24rpx;}
+.summary-item{display: flex;align-items: center;justify-content: space-between;margin-bottom: 24rpx;color: #333;font-size: 30rpx;}
+.summary-item-til{color: #999;font-size: 30rpx;}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

pages/use/assignment/assignmentDetail/assignmentDetail.vue

@@ -0,0 +1,70 @@
+<template>
+	<view class="pages wrap">
+		<view class="status">完成</view>
+		<view class="timeline">
+			<view class="timeline-item" :class="{active:status=='0' }">
+				<view class="timeline-item-content">
+					<view class="timeline-item-til">提交成功</view>
+					<view class="timeline-item-con">非碳汇冲抵期碳汇冲抵申请</view>					
+				</view>				
+			</view>
+			<view class="timeline-item" :class="{active:status=='1' }">
+				<view class="timeline-item-content">
+					<view class="timeline-item-til">后台审核</view>
+					<view class="timeline-item-con">审核后将冲抵排量</view>					
+				</view>				
+			</view>
+			<view class="timeline-item" :class="{active:status=='2' }">
+				<view class="timeline-item-content">
+					<view class="timeline-item-til">履约完成</view>
+					<view class="timeline-item-con">完成履约，获得履约报告</view>					
+				</view>				
+			</view>
+		</view>
+		<!-- timeline end -->
+		<view class="summary">
+			<view class="summary-item">
+				<view class="summary-item-til">年度</view>
+				<view class="summary-item-con">2020年度</view>
+			</view>
+			<view class="summary-item">
+				<view class="summary-item-til">步骤</view>
+				<view class="summary-item-con">非碳汇冲抵期</view>
+			</view>
+			<view class="summary-item">
+				<view class="summary-item-til">状态</view>
+				<view class="summary-item-con">提交成功</view>
+			</view>
+			<view class="summary-item">
+				<view class="summary-item-til">备注说明</view>
+				<view class="summary-item-con"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				status:0,
+				params:{
+					token:'',
+				}
+				
+			}
+		},
+		onShow() {
+		},
+		onLoad() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+	@import url("./assignmentDetail.css");
+</style>