com.kailaimei.carbon/pages/count/count.vue

<template>
	<view class="main">
		<!-- 头部 -->
		<status-nav></status-nav>
		<!-- 计算碳足迹 -->
		<view class="calculator-bg">
			<view class="bg-img">
				<image src="/static/count-bg.png" mode="widthFix"></image>
			</view>
			<view class="calculator">
				<view class="cate">
					<view class="list" v-for="(item,index) in cateList" :key="index">
						<view class="title">
							<text>{{index}}</text>
						</view>
						<view class="item" v-for="(item1,index1) in item" :key="index1" @tap="changeEv(index,index1)">
							{{item1.title}}
						</view>
					</view>
				</view>
				<view class="interface">
					<scroll-view class="result" scroll-y="true">
						<view class="individual" v-if="cateTagList.length>0">
							<view class="list" v-for="(item,index) in cateList" :key="index">
								<view class="item" v-for="(item1,index1) in item" :key="index1"
									v-if="cateTagList.indexOf(item1.tag)!==-1">
									<view>{{item1.title}}</view>
									<view>
										<input type="text" focus="true" v-model="item1.num" placeholder="0"
											@tap="changeFocus(index,index1)">
									</view>
									<view>{{item1.company}}</view>
								</view>
							</view>
						</view>
						<view class="subtotal">
							<view class="item">
								<view>衣<text>排碳</text></view>
								<view>{{subTotal[0]?subTotal[0].toFixed(2):0}}</view>
								<view>kg</view>
							</view>
							<view class="item">
								<view>食<text>排碳</text></view>
								<view>{{subTotal[1]?subTotal[1].toFixed(2):0}}</view>
								<view>kg</view>
							</view>
							<view class="item">
								<view>住<text>排碳</text></view>
								<view>{{subTotal[2]?subTotal[2].toFixed(2):0}}</view>
								<view>kg</view>
							</view>
							<view class="item">
								<view>行<text>排碳</text></view>
								<view>{{subTotal[3]?subTotal[3].toFixed(2):0}}</view>
								<view>kg</view>
							</view>
							<view class="item">
								<view>用<text>排碳</text></view>
								<view>{{subTotal[4]?subTotal[4].toFixed(2):0}}</view>
								<view>kg</view>
							</view>
						</view>
						<view class="total">
							<view class="item">
								<view>合计排碳</view>
								<view>{{total>0?total.toFixed(2):0}}</view>
								<view>kg</view>
							</view>
						</view>
					</scroll-view>
					<view class="interface-btns">
						<view class="num">
							<view class="btn" v-for="(item,index) in numlist" :key="index" @tap="chengeNum(item)">
								{{item}}
							</view>
						</view>
						<view class="operate">
							<view class="btn" v-for="(item,index) in operateList" :key="index" @tap="choseEv(index)">
								{{item}}
							</view>
						</view>
					</view>
				</view>
				<!-- 导航 -->
				<tabbar :current='0'></tabbar>
				<!-- 操作说明 -->
				<view class="explain">操作说明：点击图标，计算您的碳足迹。</view>
			</view>
		</view>
		<!-- 轮播 -->
		<view class="banner">
			<swiper-pull></swiper-pull>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<text>中国绿色碳汇基金会低碳旅游专项基金监制，北京凯来美气候技术咨询有限公司开发。</text>
		</view>
	</view>
</template>

<script>
	import statusNav from '@/components/status-nav/status-nav.vue';
	import tabbar from '@/components/tabbar/tabbar.vue';
	import swiperPull from '@/components/swiper/swiper-pull.vue';
	export default {
		components: {
			statusNav,
			tabbar,
			swiperPull
		},
		data() {
			return {
				statusHeight: uni.getSystemInfoSync().statusBarHeight, //状态栏高度
				cateList: {
					'衣': [{
							'title': '购买衣服数量',
							'company': '件',
							'carbon': 7.01,
							'num': '',
							'tag': 'a1'
						},
						{
							'title': '洗衣服使用量',
							'company': '千克',
							'carbon': 1.46,
							'num': '',
							'tag': 'a2'
						}
					],
					'食': [{
							'title': '吸烟数量',
							'company': '包',
							'carbon': 0.00591,
							'num': '',
							'tag': 'b1'
						},
						{
							'title': '喝白酒数量',
							'company': '升',
							'carbon': 4.5,
							'num': '',
							'tag': 'b2'
						},
						{
							'title': '喝红酒数量',
							'company': '升',
							'carbon': 1.75,
							'num': '',
							'tag': 'b3'
						},
						{
							'title': '喝啤酒数量',
							'company': '瓶',
							'carbon': 0.43,
							'num': '',
							'tag': 'b4'
						},
						{
							'title': '肉类消费',
							'company': '千克',
							'carbon': 8.823,
							'num': '',
							'tag': 'b5'
						},
						{
							'title': '粮食消费',
							'company': '千克',
							'carbon': 0.918,
							'num': '',
							'tag': 'b6'
						}
					],
					'住': [{
							'title': '用电',
							'company': '度',
							'carbon': 0.581,
							'num': '',
							'tag': 'c1'
						},
						{
							'title': '煤气',
							'company': '立方米',
							'carbon': 2.826,
							'num': '',
							'tag': 'c2'
						},
						{
							'title': '天然气',
							'company': '立方米',
							'carbon': 2.826,
							'num': '',
							'tag': 'c3'
						},
						{
							'title': '燃煤',
							'company': '千克',
							'carbon': 3.0978,
							'num': '',
							'tag': 'c4'
						},
						{
							'title': '集中取暖',
							'company': '立方米',
							'carbon': 46.57,
							'num': '',
							'tag': 'c5'
						},
						{
							'title': '装修用木材',
							'company': '千克',
							'carbon': 0.31,
							'num': '',
							'tag': 'c6'
						},
						{
							'title': '装修用陶瓷',
							'company': '千克',
							'carbon': 0.74,
							'num': '',
							'tag': 'c7'
						},
						{
							'title': '装修用钢材',
							'company': '千克',
							'carbon': 2.3,
							'num': '',
							'tag': 'c8'
						},
						{
							'title': '装修用铝材',
							'company': '千克',
							'carbon': 15.8,
							'num': '',
							'tag': 'c9'
						}
					],
					'行': [{
							'title': '飞机',
							'company': '千米',
							'carbon': 0.088,
							'num': '',
							'tag': 'd1'
						},
						{
							'title': '火车',
							'company': '千米',
							'carbon': 0.0262,
							'num': '',
							'tag': 'd2'
						},
						{
							'title': '轮船',
							'company': '千米',
							'carbon': 0.128,
							'num': '',
							'tag': 'd3'
						},
						{
							'title': '地铁',
							'company': '千米',
							'carbon': 0.0153,
							'num': '',
							'tag': 'd4'
						},
						{
							'title': '公共汽车',
							'company': '千米',
							'carbon': 0.03344,
							'num': '',
							'tag': 'd5'
						},
						{
							'title': '低油耗小轿车',
							'company': '千米',
							'carbon': 0.16,
							'num': '',
							'tag': 'd6'
						},
						{
							'title': '中油耗小轿车',
							'company': '千米',
							'carbon': 0.24,
							'num': '',
							'tag': 'd7'
						},
						{
							'title': '高油耗小轿车',
							'company': '千米',
							'carbon': 0.33,
							'num': '',
							'tag': 'd8'
						},
					],
					'用': [{
							'title': '塑料袋使用量',
							'company': '个',
							'carbon': 0.0821,
							'num': '',
							'tag': 'e1'
						},
						{
							'title': '纸制品',
							'company': '千克',
							'carbon': 1.4,
							'num': '',
							'tag': 'e2'
						},
						{
							'title': '一次性筷子',
							'company': '双',
							'carbon': 0.023,
							'num': '',
							'tag': 'e3'
						}
					]
				},
				numlist: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '00', '.'],
				operateList: ['CE', '计算'],
				cateTagList: [], //分类标题
				subTotal: [0, 0, 0, 0, 0], //小计
				total: 0, //总计

				focusIndex: '', //选中一级分类
				focusIndex1: 0, //选中二级分类
			}
		},
		onLoad() {
			if (uni.getStorageSync('subTotal')) {
				uni.removeStorageSync('subTotal');
			}
			if (uni.getStorageSync('allTotal')) {
				uni.removeStorageSync('allTotal');
			}
			if (uni.getStorageSync('average')) {
				uni.removeStorageSync('average');
			}
		},
		methods: {
			// 选择分类
			changeEv(index, index1) {
				this.cateTagList.push(this.cateList[index][index1].tag);
				this.focusIndex = index;
				this.focusIndex1 = index1;
			},

			// 获取光标
			changeFocus(index, index1) {
				this.focusIndex = index;
				this.focusIndex1 = index1;
			},

			// 计算器按钮
			chengeNum(num) {
				if (this.cateTagList.length > 0) {
					let curNum = this.cateList[this.focusIndex][this.focusIndex1].num;
					if (curNum.indexOf('.') == -1 && curNum !== '') {
						this.cateList[this.focusIndex][this.focusIndex1].num = curNum + num;
					} else {
						if (num !== '.') {
							this.cateList[this.focusIndex][this.focusIndex1].num = curNum + num;
						}
					}
				}
			},

			// 计算 || 清除
			choseEv(index) {
				if (this.cateTagList.length > 0) {
					if (index == 0) {
						this.cateList[this.focusIndex][this.focusIndex1].num = '';
						// 计算
						this.calculationEv();
					} else {
						// 计算
						this.calculationEv();
					}
				}
			},

			// 计算
			calculationEv() {
				// 小计
				let subTotalArr1 = this.cateList['衣'].filter(item => {
					return item.num !== ''
				});
				let subTotalNum1 = 0;
				subTotalArr1.forEach(item => {
					subTotalNum1 += item.num * item.carbon * 1;
				})
				this.subTotal[0] = parseFloat(subTotalNum1);

				let subTotalArr2 = this.cateList['食'].filter(item => {
					return item.num !== ''
				});
				let subTotalNum2 = 0;
				subTotalArr2.forEach(item => {
					subTotalNum2 += item.num * item.carbon * 1;
				})
				this.subTotal[1] = parseFloat(subTotalNum2);

				let subTotalArr3 = this.cateList['住'].filter(item => {
					return item.num !== ''
				});
				let subTotalNum3 = 0;
				subTotalArr3.forEach(item => {
					subTotalNum3 += item.num * item.carbon * 1;
				})
				this.subTotal[2] = parseFloat(subTotalNum3);

				let subTotalArr4 = this.cateList['行'].filter(item => {
					return item.num !== ''
				});
				let subTotalNum4 = 0;
				subTotalArr4.forEach(item => {
					subTotalNum4 += item.num * item.carbon * 1;
				})
				this.subTotal[3] = parseFloat(subTotalNum4);

				let subTotalArr5 = this.cateList['用'].filter(item => {
					return item.num !== ''
				});
				let subTotalNum5 = 0;
				subTotalArr5.forEach(item => {
					subTotalNum5 += item.num * item.carbon * 1;
				})
				this.subTotal[4] = parseFloat(subTotalNum5);

				// 总计
				let totalArr = this.subTotal.filter(item => {
					return item !== 0
				});
				let totalNum = 0;
				totalArr.forEach(item => {
					totalNum += item * 1;
				})
				this.total = parseFloat(totalNum);

				// 缓存小计数据
				let cacheTotal = [];
				cacheTotal[0] = this.subTotal[0].toFixed(2);
				cacheTotal[1] = this.subTotal[1].toFixed(2);
				cacheTotal[2] = this.subTotal[2].toFixed(2);
				cacheTotal[3] = this.subTotal[3].toFixed(2);
				cacheTotal[4] = this.subTotal[4].toFixed(2);
				uni.setStorageSync('subTotal', cacheTotal);
				
				// 缓存总计数据
				uni.setStorageSync('allTotal', this.total.toFixed(2));
			},
		}
	}
</script>

<style>

</style>