perry-mall/components/payment-subgroup/payment.vue

<template>
	<!-- 底部导航 -->
	<view class="display-between-center payment-foot-box">
		<!-- 合计 -->
		<view class="payment-price">合计：￥{{totalPrice}}</view>
		<!-- 立即结算 -->
		<view @tap="immediatePaymentEv" class="payment-settlement">立即支付</view>
	</view>
</template>

<script>
	export default {
		name:"payment",
		props:{
			totalPrice:{
				type:String,
				default: "0.00"
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			immediatePaymentEv(){
				this.$emit('immediatePayment');
			}
		}
	}
</script>

<style>
	.display-between-center {display: flex;justify-content: space-between;align-items: center;}
	.payment-foot-box{position: fixed;bottom: 0;left: 0;right: 0;height: 130rpx;background-color: #efefef;font-size: 30rpx;}
	.payment-price{font-size: 36rpx;color: #f81c1c;font-weight: bold;margin-left: 60rpx;}
	.payment-settlement{width: 242rpx;height: 130rpx;background-color: #f81c1c;color: #FFFFFF;font-size: 36rpx;text-align: center;line-height: 130rpx;}
</style>