wx-qhb/pageD/paymentOrder/paymentOrder.vue

<template>
	<view class="page">
		<view class="_top">
			<view class="title">
				待支付订单
			</view>
			<view class="price">
				<text class="_text-1">￥</text>
				1235.2
			</view>
			<view class="_weight">
				<text>实际重量</text>
				<text>168kg</text>
			</view>
			<view class="type-num">
				<text>包裹类型</text>
				<text>日用品</text>
			</view>
			<view class="type-num">
				<text>包裹数量</text>
				<text>5</text>
			</view>
		</view>
		<view class="pay" @click="switchType('balance')">
			<view style="display: flex;">
				<image class="balance-icon" src="../../static/mine/341.png" mode=""></image>
				<view class="">
					<view style="font-size: 26rpx; color: #333333;">余额支付</view>
					<view style="color: #f83224;font-size: 24rpx;margin-top: 10rpx;">当前余额：2546.2</view>
				</view>
			</view>
			<image v-if="payType == 'balance'" class="select" src="../../static/mine/342.png" mode=""></image>
			<image v-else class="select" src="../../static/mine/345.png" mode=""></image>
		</view>
		<view class="pay" @click="switchType('wx')">
			<view style="display: flex;">
				<image class="balance-icon" src="../../static/mine/343.png" mode=""></image>
				<view class="">
					<view style="font-size: 26rpx; color: #333333;">微信支付</view>
					<view style="color: #797979;font-size: 24rpx;margin-top: 10rpx;">适用微信支付</view>
				</view>
			</view>
			<image v-if="payType == 'wx'" class="select" src="../../static/mine/342.png" mode=""></image>
			<image v-else class="select" src="../../static/mine/345.png" mode=""></image>
		</view>
		<view class="pay" @click="switchType('service')">
			<view style="display: flex;">
				<image class="balance-icon" src="../../static/mine/344.png" mode=""></image>
				<view class="">
					<view style="font-size: 26rpx; color: #333333;">客服支付</view>
					<view style="color: #797979;font-size: 24rpx;margin-top: 10rpx;">联系微信支付</view>
				</view>
			</view>
			<image v-if="payType == 'service'" class="select" src="../../static/mine/342.png" mode=""></image>
			<image v-else class="select" src="../../static/mine/345.png" mode=""></image>
		</view>

		<view class="footer">
			<view class="_view">
				<text class="_text-1">共一件</text>
				<text class="_text-2">{{"&nbsp;"+"合计"}}</text>
				<view class="price">
					<text style="font-size: 20rpx;">￥</text>
					<text>133</text>.
					<text style="font-size: 20rpx;">22</text>
				</view>
			</view>
			<button class="btn-2" @click="toPay">立即支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payType: "balance"
			};
		},
		methods: {
			switchType(str) {
				this.payType = str
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title: "支付订单"
			})
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 20rpx 24rpx;
		position: relative;

		._top {
			padding: 48rpx 24rpx 36rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.title {
				text-align: center;
				color: rgba(34, 34, 34, .7);
				font-size: 28rpx;
			}

			.price {
				font-size: 64rpx;
				font-weight: 500;
				text-align: center;
				margin-top: 20rpx;

				._text-1 {
					font-size: 28rpx;
				}
			}

			._weight {
				display: flex;
				justify-content: space-between;
				margin-top: 46rpx;
				font-size: 28rpx;
				color: rgba(34, 34, 34, 1);
			}

			.type-num {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				color: rgba(34, 34, 34, .7);
				margin-top: 32rpx;
			}
		}

		.pay {
			display: flex;
			align-items: center;
			background-color: #fff;
			margin-top: 20rpx;
			height: 140rpx;
			border-radius: 16rpx;
			padding: 0 24rpx;
			justify-content: space-between;

			.balance-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			.select {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.footer {
			display: flex;
			justify-content: flex-end;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 146rpx;
			padding-top: 20rpx;
			._view{
				display: flex;
				align-items: flex-end;
				height: 76rpx;
				._text-1{
					font-size: 24rpx;
					color: rgba(51, 51, 51, .8);
					display: inline-block;
					padding-bottom: 10rpx;
				}
				._text-2{
					font-size: 24rpx;
					display: inline-block;
					padding-bottom: 10rpx;
				}
				.price{
					color: #f83224;
					font-weight: 600;
					font-size: 48rpx;
				}
			}
			.btn-2 {
				height: 76rpx;
				padding: 0;
				margin: 0;
				font-size: 28rpx;
				color: #fff;
				min-width: 188rpx;
				background-color: #f83224;
				border-radius: 38rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
			}
		}
	}
</style>