Lee
/
com.kailaimei.carbon
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

按钮跟头部拆分为组件

master
Lee 2023-02-03 14:19:23 +08:00
parent 50c15614b6
commit 74fffc5452
9 changed files with 1610 additions and 1579 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
common/style.css
View File

@ -279,33 +279,6 @@ image{
writing-mode: tb-rl;
}
/* 切换按钮 */
.calculator .nav-btns{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: 46px;
position: relative;
z-index: 2;
}
.calculator .nav-btns .btn{
display: flex;
justify-content: center;
align-items: center;
width: 271px;
height: 73px;
background-image: url('/static/icon-tabbar.png');
background-size: cover;
}
.calculator .nav-btns .btn.active{
background-image: url('/static/icon-tabbar-active.png');
}
.calculator .nav-btns .btn image{
height: 27px;
margin-top: 9px;
}
/* 操作说明 */
.calculator .explain{
width: 100%;

57
components/status-nav/status-nav.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<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" @tap="backHome">
<image src="/static/icon-home.png" mode="widthFix"></image>
</view>
</view>
</template>
<script>
export default {
name: "status-nav",
data() {
return {
};
},
methods: {
// 返回主页
backHome(){
plus.runtime.launchApplication({
//打开app
pname: "com.yl.jining", //B款app云打包的包名
});
},
}
}
</script>
<style scoped>
.header{
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
padding-top: 26px;
}
.header .logo{
width: 197px;
padding: 0 0 6px 39px;
}
.header .title{
width: 480px;
}
.header .position{
width: 161px;
padding: 0 60px 6px 25px;
}
.header view image{
width: 100%;
}
</style>

92
components/tabbar/tabbar.vue Normal file
View File

@ -0,0 +1,92 @@
<template>
<view class="nav-btns">
<view class="btn" :class="current==index?'active':''" @tap="toPage(index)" v-for="(item,index) in navList" :key="index">
<image :src="`/static/icon-tabbar-0${index+1}.png`" mode="heightFix"></image>
</view>
</view>
</template>
<script>
export default {
name: "tabbar",
props:{
// 当前选中项
current:{
type:Number,
default:0
}
},
data() {
return {
navList:['/pages/count/count','/pages/assess/assess','/pages/eliminate/eliminate']
};
},
methods: {
//跳转
toPage(index) {
switch (index){
case 0:
uni.reLaunch({
url: this.navList[index]
})
break;
case 1:
if (uni.getStorageSync('subTotal')) {
uni.reLaunch({
url: this.navList[index]
})
} else {
uni.showToast({
title: '请先计算碳足迹',
icon: 'none',
duration: 2000
})
}
break;
case 2:
if (uni.getStorageSync('average')) {
uni.reLaunch({
url: this.navList[index]
})
} else {
uni.showToast({
title: '请先评估碳足迹',
icon: 'none',
duration: 2000
})
}
break;
}
}
}
}
</script>
<style scoped>
/* 切换按钮 */
.calculator .nav-btns{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: 46px;
position: relative;
z-index: 2;
}
.calculator .nav-btns .btn{
display: flex;
justify-content: center;
align-items: center;
width: 271px;
height: 73px;
background-image: url('/static/icon-tabbar.png');
background-size: cover;
}
.calculator .nav-btns .btn.active{
background-image: url('/static/icon-tabbar-active.png');
}
.calculator .nav-btns .btn image{
height: 27px;
margin-top: 9px;
}
</style>

89
pages/assess/assess.vue
View File

@ -1,17 +1,7 @@
<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>
<status-nav></status-nav>
<!-- 评估碳足迹 -->
<view class="calculator-bg">
<view class="bg-img">
@ -116,17 +106,8 @@
</view>
</view>
</view>
<view class="nav-btns">
<view class="btn" @tap="toPage('/pages/count/count')">
<image src="/static/icon-tabbar-01.png" mode="heightFix"></image>
</view>
<view class="btn active" @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>
<!-- 导航 -->
<tabbar :current='1'></tabbar>
</view>
</view>
<!-- 轮播 -->
@ -141,10 +122,14 @@
</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';
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min.js';
export default {
components: {
statusNav,
tabbar,
swiperPull
},
data() {
@ -160,17 +145,16 @@
heightList: [], //柱状高度
}
},
onLoad(op) {
if (op.total) {
this.total = op.total;
this.showTotal = op.total.toString().split('');
onLoad() {
if (uni.getStorageSync('allTotal')) {
this.total = uni.getStorageSync('allTotal');
this.showTotal = this.total.toString().split('');
// 计算平均值
this.averageEv();
}
if (uni.getStorageSync('subTotal')) {
this.subTotal = uni.getStorageSync('subTotal');
}
// 计算柱状高度
let height01 = `${(this.subTotal[0]/this.total*280).toFixed(2)}%`;
let height02 = `${(this.subTotal[1]/this.total*280).toFixed(2)}%`;
@ -187,12 +171,7 @@
});
},
methods: {
init() {
this.$refs.chart.init(echarts, chart => {
chart.setOption(this.pie);
});
},
// 绘制饼图
// 获取饼图数据
pieEv() {
this.pie = {
tooltip: {
@ -237,6 +216,15 @@
}]
}
},
// 绘制饼图
init() {
this.$refs.chart.init(echarts, chart => {
chart.setOption(this.pie);
});
},
// 改变数量
changeNum(type) {
if (type == 'reduce') {
@ -257,41 +245,6 @@
this.average = averageNum.toFixed(2);
uni.setStorageSync('average', this.average);
},
//跳转
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}`
})
} else {
uni.showToast({
title: '请先计算碳足迹',
icon: 'none',
duration: 2000
})
}
}
if (url == '/pages/eliminate/eliminate') {
if (uni.getStorageSync('average')) {
uni.navigateTo({
url: `${url}?total=${this.total}`
})
} else {
uni.showToast({
title: '请先评估碳足迹',
icon: 'none',
duration: 2000
})
}
}
},
}
}
</script>

33
pages/contribution/contribution.vue
View File

@ -1,17 +1,7 @@
<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>
<status-nav></status-nav>
<!-- 计算器 -->
<view class="calculator-bg">
<view class="bg-img">
@ -21,17 +11,8 @@
<view class="iframe-box">
<iframe src="https://www.baidu.com" frameborder="0"></iframe>
</view>
<view class="nav-btns" style="margin-top: 30px;">
<view class="btn" @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 active" @tap="toPage('/pages/eliminate/eliminate')">
<image src="/static/icon-tabbar-03.png" mode="heightFix"></image>
</view>
</view>
<!-- 导航 -->
<tabbar :current='3'></tabbar>
</view>
</view>
<!-- 轮播 -->
@ -46,9 +27,13 @@
</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() {
@ -60,8 +45,8 @@
}
},
onLoad(op) {
if (op.total) {
this.total = op.total;
if (uni.getStorageSync('allTotal')) {
this.total = uni.getStorageSync('allTotal');
}
if (uni.getStorageSync('subTotal')) {
this.subTotal = uni.getStorageSync('subTotal');

71
pages/count/count.vue
View File

@ -1,17 +1,7 @@
<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>
<status-nav></status-nav>
<!-- 计算碳足迹 -->
<view class="calculator-bg">
<view class="bg-img">
@ -91,17 +81,9 @@
</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>
<!-- 导航 -->
<tabbar :current='0'></tabbar>
<!-- 操作说明 -->
<view class="explain">操作说明：点击图标，计算您的碳足迹。</view>
</view>
</view>
@ -117,9 +99,13 @@
</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() {
@ -335,6 +321,9 @@
if (uni.getStorageSync('subTotal')) {
uni.removeStorageSync('subTotal');
}
if (uni.getStorageSync('allTotal')) {
uni.removeStorageSync('allTotal');
}
},
methods: {
// 选择分类
@ -444,42 +433,10 @@
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
})
}
}
}
// 缓存总计数据
uni.setStorageSync('allTotal', this.total.toFixed(2));
},
}
}
</script>

72
pages/eliminate/eliminate.vue
View File

@ -1,17 +1,7 @@
<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>
<status-nav></status-nav>
<!-- 消除碳足迹 -->
<view class="calculator-bg">
<view class="bg-img">
@ -40,17 +30,8 @@
</view>
</view>
</view>
<view class="nav-btns">
<view class="btn" @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 active" @tap="toPage('/pages/eliminate/eliminate')">
<image src="/static/icon-tabbar-03.png" mode="heightFix"></image>
</view>
</view>
<!-- 导航 -->
<tabbar :current='2'></tabbar>
</view>
</view>
<!-- 轮播 -->
@ -65,9 +46,13 @@
</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() {
@ -80,9 +65,9 @@
money: 0, //捐款额
}
},
onLoad(op) {
if (op.total) {
this.total = op.total;
onLoad() {
if (uni.getStorageSync('allTotal')) {
this.total = uni.getStorageSync('allTotal');
}
if (uni.getStorageSync('average')) {
this.average = uni.getStorageSync('average');
@ -92,44 +77,9 @@
// 去捐款
toEliminate() {
uni.navigateTo({
url: `/pages/contribution/contribution?money=${this.money}&total=${this.total}`
url: `/pages/contribution/contribution?money=${this.money}`
})
},
//跳转
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}`
})
} else {
uni.showToast({
title: '请先计算碳足迹',
icon: 'none',
duration: 2000
})
}
}
if (url == '/pages/eliminate/eliminate') {
if (uni.getStorageSync('average')) {
uni.navigateTo({
url: `${url}?total=${this.total}`
})
} else {
uni.showToast({
title: '请先评估碳足迹',
icon: 'none',
duration: 2000
})
}
}
}
}
}
</script>

1090
unpackage/dist/dev/app-plus/app-service.js vendored
View File

File diff suppressed because one or more lines are too long

1658
unpackage/dist/dev/app-plus/app-view.js vendored
View File

File diff suppressed because one or more lines are too long