226 lines
6.1 KiB
Vue
226 lines
6.1 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 calculator-other" style="padding-top: 0;">
|
||
<view class="contribution">
|
||
<view class="hot">
|
||
<image src="/static/contribution.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="tit">
|
||
<image src="/static/icon-title-04.png" mode="heightFix"></image>
|
||
</view>
|
||
<view class="tips">购买碳汇，履行义务；足不出户，低碳植树。中国绿色碳汇基金会助你实现低碳生活！</view>
|
||
<view class="form-bg">
|
||
<view class="form">
|
||
<view class="item">
|
||
<view class="left">
|
||
<text>购</text>
|
||
<text>买</text>
|
||
<text>者</text>
|
||
</view>
|
||
<view class="colon">:</view>
|
||
<view class="right">
|
||
<input class="input" type="text">
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="left">
|
||
<text>所</text>
|
||
<text>在</text>
|
||
<text>地</text>
|
||
</view>
|
||
<view class="colon">:</view>
|
||
<view class="right">
|
||
<picker mode="multiSelector" @change="changeAddress">
|
||
<view class="addr-input">
|
||
<view class="input-box">
|
||
<input class="input-flex clips1" type="text" v-model="addrObj.province"
|
||
disabled="true">
|
||
<view class="arrow"></view>
|
||
</view>
|
||
<view class="input-box">
|
||
<input class="input-flex clips1" type="text" v-model="addrObj.city"
|
||
disabled="true">
|
||
<view class="arrow"></view>
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="left">
|
||
<text>联</text>
|
||
<text>系</text>
|
||
<text>方</text>
|
||
<text>式</text>
|
||
</view>
|
||
<view class="colon">:</view>
|
||
<view class="right">
|
||
<input class="input" type="text">
|
||
<text>(手机或邮件)</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="left">
|
||
<text>金</text>
|
||
<text>额</text>
|
||
</view>
|
||
<view class="colon">:</view>
|
||
<view class="right">
|
||
<input class="input" type="text">
|
||
<text>元</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="left">
|
||
<text>获</text>
|
||
<text>得</text>
|
||
<text>碳</text>
|
||
<text>汇</text>
|
||
</view>
|
||
<view class="colon">:</view>
|
||
<view class="right">
|
||
<input class="input" type="text">
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="left">
|
||
<text>付</text>
|
||
<text>款</text>
|
||
<text>方</text>
|
||
<text>式</text>
|
||
</view>
|
||
<view class="colon">:</view>
|
||
<view class="right">
|
||
<picker @change="changePay" :value="payIndex" :range="payList">
|
||
<view class="input-box">
|
||
<input class="input-flex clips1" type="text" v-model="payList[payIndex]"
|
||
disabled="true" style="letter-spacing: 0;text-indent: 0;">
|
||
<view class="arrow"></view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="submit-btn">提交并打开支付宝收银台页面</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="nav-btns nav-btns-other">
|
||
<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>
|
||
</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, //状态栏高度
|
||
member: 0, //家庭成员
|
||
total: 0, //总计
|
||
subTotal: [], //小计
|
||
addrObj: {
|
||
province: '不限',
|
||
city: '不限'
|
||
},
|
||
payList: ['支付宝网上捐赠', '微信网上捐赠'], //支付方式
|
||
payIndex: 0, //当前选择
|
||
}
|
||
},
|
||
onLoad(op) {
|
||
if (op.total) {
|
||
this.total = op.total;
|
||
}
|
||
if (uni.getStorageSync('subTotal')) {
|
||
this.subTotal = uni.getStorageSync('subTotal');
|
||
}
|
||
},
|
||
methods: {
|
||
// 选择省市
|
||
changeAddress(e) {
|
||
this.addrObj.province = e.detail.value[0];
|
||
this.addrObj.city = e.detail.value[1];
|
||
},
|
||
changePay(e) {
|
||
this.payIndex = e.detail.value
|
||
},
|
||
//跳转
|
||
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>
|
||
|
||
<style>
|
||
|
||
</style>
|