guosen-ldt-client/components/pay-confirm.vue

<template>
	<view style="background-color: #F1F1F1;min-height: 100vh">
		<view class="center info" style="padding-bottom: 50rpx;">
			<image :src="info.shop.cover" mode=""></image>
			<text class="text-lg" style="color: #1C1C1C;font-size: 30rpx;">{{info.shop.name}}</text>
		</view>

		<view class="card" style="background-color: #FFFFFF;">
			<view class="flex flex-direction margin-bottom-40">
				<text class="text-lg text-bold">支付确认</text>
				<text class=" text-sm margin-top-10" style="color: #999999;">您本次交易可使用积分抵扣，具体如下：</text>
			</view>
			<view class="item">
				<view class="left">商品价格</view>
				<view class="right price">{{info.bills.cost}}</view>
			</view>
			<view class="item">
				<view class="left">商家活动抵扣</view>
				<view class="right" style="color: #EE9230;"><text class="price reduce">{{info.bills.discount || 0}}</text></view>
			</view>
			<view class="item">
				<view class="left">渠道积分抵扣</view>
				<view class="right" style="color: #EE9230;"><text class="price reduce">{{info.bills.pointNum}}</text></view>
			</view>
			<view class="item">
				<view class="left">积分余额抵扣</view>
				<view class="right" style="color: #EE9230;"><text class="price reduce">{{info.bills.balanceNum}}</text></view>
			</view>
			<view class="item">
				<view class="left">积分交易手续费</view>
				<view class="right"><text class="price">{{info.bills.pointFee}}</text></view>
			</view>
			<view class="item u-border-top" style="margin-top: 10rpx;padding-top: 40rpx;padding-bottom: 0;">
				<view class="left" style="font-size: 30rpx;">您仍需支付</view>
				<view class="right text-bold" style="font-size: 40rpx;"><text class="price">{{info.bills.price}}</text></view>
			</view>
		</view>

		<view class="center flex-direction" style="margin-top: 150rpx;">
			<text class="text-gray text-sm margin-bottom-20">感谢使用联兑通，越用越优惠</text>
			<view @click="confirm" class="cu-btn  flex  text-lg btn-bg-color round" style="padding: 42rpx 0;width: 90%;">
				确认支付
			</view>
			<text @click="cancel" class="text-base payConfirm" style="margin-top: 50rpx;font-size: 28rpx;text-decoration: underline;">暂不支付</text>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			info:Object
		},
		data() {
			return {
			
			}
		},
		methods: {
			confirm(){
				this.$emit('confirm')
			},
			cancel(){
				this.$emit('cancel')
			}
		}
	}
</script>

<style lang="scss">
	.info {
		display: flex;
		justify-content: center;
		align-content: center;
		padding: 60rpx;
		flex-direction: column;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}
	}

	.card {
		margin: 0 40rpx;
		border-radius: 20rpx;
		padding: 40rpx;
		background-color: #FFFFFF;

		.item {
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;

			.left {
				color: #353535;
				font-weight: 300;
			}

			.right {
				font-size: 30rpx;
				color: #353535;
			}
		}
	}

	.price::after {
		content: '元';
		margin-left: 6rpx;
		font-size: 0.8em;
	}

	.reduce::before {
		content: '-';
		margin-right: 10rpx;
	}
</style>