discounts-minapp/trip/expense/index.vue

<template>
	<view class="expense">
		<view class="block">
			<view class="item title" v-for="(item, i) in priceItems" :key="i"
				:class="i == priceItems.length - 1 ? 'border' : ''">
				<view class="label">
					{{ item.title }}
				</view>
				<view class="value">
					{{ item.value }}元
				</view>
			</view>
			<view class="total">
				预估金额 <text class="num">{{ getPrice }}</text> 元
			</view>
			<view class="notice">
				预付费用是根据实时交通情况、预估行驶里程、时间等因素计算
				得出，存在波动，仅供参考。（行程调整、路线修改、高速费等
				将影响最终价格）
			</view>
		</view>
		<view class="block">
			<view class="item title" @click="go('/trip/expense/rules')">
				<view class="label">
					计费规则
				</view>
				<image class="jiantou" src="../../static/jiantou-icon.png" mode=""></image>
			</view>

			<view class="item title" @click="go('/trip/expense/question')">
				<view class="label">
					常见问题
				</view>
				<image class="jiantou" src="../../static/jiantou-icon.png" mode=""></image>
			</view>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			priceItems: []
		}
	},
	methods: {
		go(path) {
			uni.navigateTo({
				url: path
			});
		}
	},
	onLoad({ priceItems }) {
		if (priceItems) {
			this.priceItems = JSON.parse(priceItems)
		}
	},
	computed:{
		getPrice(){
			return this.priceItems.reduce((total, item) => total + item.value, 0);
		}
	}
}
</script>

<style lang="scss" scoped>
.expense {
	background: #f5f5f5;
	height: 100vh;
	padding-top: 20rpx;

	.block {
		margin-bottom: 20rpx;
		background: #fff;
		padding: 28rpx 34rpx;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #AAAAAA;
		font-size: 28rpx;
		line-height: 70rpx;
		position: relative;

		.jiantou {
			position: absolute;
			top: 50%;
			right: 0%;
			transform: translateY(-50%);
			width: 20rpx;
			height: 20rpx;
		}
	}

	.item.title {
		color: #222222;
	}

	.item.border {
		border-bottom: 2rpx solid #F0F0F0;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}

	.total {
		text-align: right;
		color: #222222;
		font-size: 28rpx;
		margin: 28rpx 0;

		.num {
			font-weight: bold;
			font-size: 36rpx;
		}
	}

	.notice {
		color: #AAAAAA;
		font-size: 24rpx;
	}

}
</style>