490 lines
12 KiB
Vue
490 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<view class="main">
|
|||
|
|
<!-- 头部 -->
|
|||
|
|
<view class="header">
|
|||
|
|
<view class="logo">
|
|||
|
|
<image src="/static/logo.png" mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="title">
|
|||
|
|
<image src="/static/count-title.png" mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="position">
|
|||
|
|
<image src="/static/icon-home.png" mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 计算碳足迹 -->
|
|||
|
|
<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>
|
|||
|
|
<view class="nav-btns">
|
|||
|
|
<view class="btn active" @tap="toPage('/pages/count/count')">
|
|||
|
|
<image src="/static/icon-tabbar-01.png" mode="heightFix"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn" @tap="toPage('/pages/assess/assess')">
|
|||
|
|
<image src="/static/icon-tabbar-02.png" mode="heightFix"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn" @tap="toPage('/pages/eliminate/eliminate')">
|
|||
|
|
<image src="/static/icon-tabbar-03.png" mode="heightFix"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="explain">操作说明：点击图标，计算您的碳足迹。</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 轮播 -->
|
|||
|
|
<view class="banner">
|
|||
|
|
<swiper-pull></swiper-pull>
|
|||
|
|
</view>
|
|||
|
|
<!-- 底部 -->
|
|||
|
|
<view class="footer">
|
|||
|
|
<text>中国绿色碳汇基金会低碳旅游专项基金监制，北京凯来美气候技术咨询有限公司开发。</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import swiperPull from '@/components/swiper/swiper-pull.vue';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
swiperPull
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
statusHeight: uni.getSystemInfoSync().statusBarHeight, //状态栏高度
|
|||
|
|
cateList: {
|
|||
|
|
'衣': [{
|
|||
|
|
'title': '购买衣服数量',
|
|||
|
|
'company': '件',
|
|||
|
|
'carbon': 6.34,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'a1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '洗衣服使用量',
|
|||
|
|
'company': '千克',
|
|||
|
|
'carbon': 1.786,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'a2'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
'食': [{
|
|||
|
|
'title': '吸烟数量',
|
|||
|
|
'company': '包',
|
|||
|
|
'carbon': 0.021,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'b1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '喝白酒数量',
|
|||
|
|
'company': '千克',
|
|||
|
|
'carbon': 2,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'b2'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '喝啤酒数量',
|
|||
|
|
'company': '瓶',
|
|||
|
|
'carbon': 0.426,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'b3'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '肉类消费',
|
|||
|
|
'company': '千克',
|
|||
|
|
'carbon': 1.4,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'b4'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '粮食消费',
|
|||
|
|
'company': '千克',
|
|||
|
|
'carbon': 0.94,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'b5'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
'住': [{
|
|||
|
|
'title': '用电',
|
|||
|
|
'company': '度',
|
|||
|
|
'carbon': 0.872,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'c1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '煤气',
|
|||
|
|
'company': '立方米',
|
|||
|
|
'carbon': 0.71,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'c2'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '天然气',
|
|||
|
|
'company': '立方米',
|
|||
|
|
'carbon': 2.186,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'c3'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '燃煤',
|
|||
|
|
'company': '千克',
|
|||
|
|
'carbon': 3.5,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'c4'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '集中取暖',
|
|||
|
|
'company': '立方米',
|
|||
|
|
'carbon': 32.6,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'c5'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '装修用木材',
|
|||
|
|
'company': '立方米',
|
|||
|
|
'carbon': 1830,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'c6'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '装修用陶瓷',
|
|||
|
|
'company': '千克',
|
|||
|
|
'carbon': 15.4,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'c7'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '装修用钢材',
|
|||
|
|
'company': '千克',
|
|||
|
|
'carbon': 1.9,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'c8'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '装修用铝材',
|
|||
|
|
'company': '平方米',
|
|||
|
|
'carbon': 24.7,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'c9'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
'行': [{
|
|||
|
|
'title': '飞机',
|
|||
|
|
'company': '公里',
|
|||
|
|
'carbon': 0.119,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'd1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '火车',
|
|||
|
|
'company': '公里',
|
|||
|
|
'carbon': 0.063,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'd2'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '轮船',
|
|||
|
|
'company': '公里',
|
|||
|
|
'carbon': 0.01,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'd3'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '地铁',
|
|||
|
|
'company': '公里',
|
|||
|
|
'carbon': 0.079,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'd4'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '公共汽车',
|
|||
|
|
'company': '公里',
|
|||
|
|
'carbon': 0.018,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'd5'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '低油耗小轿车',
|
|||
|
|
'company': '公里',
|
|||
|
|
'carbon': 0.156,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'd6'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '中油耗小轿车',
|
|||
|
|
'company': '公里',
|
|||
|
|
'carbon': 0.283,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'd7'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '高油耗小轿车',
|
|||
|
|
'company': '公里',
|
|||
|
|
'carbon': 0.334,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'd8'
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
'用': [{
|
|||
|
|
'title': '塑料袋使用量',
|
|||
|
|
'company': '个',
|
|||
|
|
'carbon': 0.021,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'e1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '纸制品',
|
|||
|
|
'company': '千克',
|
|||
|
|
'carbon': 3.5,
|
|||
|
|
'num': '',
|
|||
|
|
'tag': 'e2'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
'title': '一次性筷子',
|
|||
|
|
'company': '双',
|
|||
|
|
'carbon': 0.0228,
|
|||
|
|
'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');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
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);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//跳转
|
|||
|
|
toPage(url) {
|
|||
|
|
if (url == '/pages/count/count') {
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url: url
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (url == '/pages/assess/assess') {
|
|||
|
|
if (uni.getStorageSync('subTotal')) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `${url}?total=${this.total.toFixed(2)}`
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请先计算碳足迹',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (url == '/pages/eliminate/eliminate') {
|
|||
|
|
if (uni.getStorageSync('average')) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `${url}?total=${this.total.toFixed(2)}`
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请先评估碳足迹',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
|
|||
|
|
</style>
|