454 lines
11 KiB
Vue
454 lines
11 KiB
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');
|
||
}
|
||
},
|
||
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>
|