jurong_circle_front_app/pages/home/pay.vue

<template>
	<view class="pay-container">
		<scroll-view scroll-y="true" style="height: 100%;">
			<view class="scroll-container">
				<view class="box-bg">
					<view class="address">
						<view class="text">
							<image style="width: 40rpx;height: 40rpx;" src="/static/icon/Map pin2.png" mode=""></image>
							<view class="u-m-l-10">张三 | </view>
							<view class="u-m-l-10">浙江省 宁波市 海曙区</view>
						</view>
						<view class="right-icon">
							<image style="width: 100%;height: 100%;" src="/static/icon/Chevron right Menu.png" mode="">
							</image>
						</view>
					</view>
					<view class="count-select u-p-l-10 u-p-r-10" v-for="item in dataInfo.items">
						<view class="pre-view">
							<u-image :src="getImageUrl(item.image_url)" height="100%" width="100%">
								<template v-slot:error>
									<view style="font-size: 24rpx;">暂无图片</view>
								</template>
							</u-image>
						</view>
						<view class="text">
							{{item.product_name}}
							融豆：{{item.rongdou_price}}
							积分：{{item.points_price}}
							数量X{{item.quantity}}
						</view>
					</view>
				</view>
				<view class="box-bg description u-m-t-20">
					<view class="item">
						<view class="title">
							订单编号
						</view>
						<view class="value">
							{{dataInfo.order_no}}
						</view>
					</view>
					<view class="item">
						<view class="title">
							创建时间
						</view>
						<view class="value">
							{{dataInfo.created_at}}
						</view>
					</view>
				</view>

				<view class="box-bg pay-method u-m-t-20">
					<view class="title">
						支付方式
					</view>
					<view class="item">
						<view class="title">
							融豆
						</view>
						<view class="value">
							<u-checkbox v-model="checked" shape="circle" active-color="#305def"></u-checkbox>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="box-bottom">
			<view class="text">
				实际支付：1231
			</view>
			<view class="btn">
				<u-button>确认支付</u-button>
			</view>
		</view>

		<u-toast ref="msgRef" />
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		mallAPI
	} from '../../api/mall';
	import {
		getImageUrl
	} from '../../util/common.js'

	const checked = ref(false)

	const dataInfo = ref({})

	const loadData = () => {
		mallAPI.getOrder(preOrderId.value).then(res => {
			dataInfo.value = res.data
		})
	}

	const preOrderId = ref()

	onLoad((val) => {
		preOrderId.value = val.preOrderId
	})

	onMounted(() => {
		loadData()
	})
</script>

<style lang="scss" scoped>
	.pay-container {
		width: 100%;
		height: 100%;
		background: var(--Color, #E4ECFF);

		.scroll-container {

			.box-bg {
				background: #F5F8FF;
			}

			.address {
				display: flex;
				align-items: center;
				padding: 20rpx 10rpx;
				justify-content: space-between;

				.text {
					display: flex;
					align-items: center;
				}

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


			.count-select {
				display: flex;
				margin-top: 10rpx;

				.pre-view {
					width: 160rpx;
					height: 160rpx;
				}

				.text {
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}

				.icon {
					height: 30rpx;
					width: 30rpx;
				}
			}

			.description {
				padding: 30rpx 40rpx;

				.item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;
				}
			}

			.pay-method {
				padding: 30rpx 40rpx;


				.title {
					font-weight: 400;
					font-style: Regular;
					font-size: 28rpx;
					leading-trim: NONE;
					line-height: 48rpx;
				}

				.item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;
				}
			}
		}


		.box-bottom {
			width: 100%;
			padding: 20rpx 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			bottom: 0;
			background: #F5F8FF;


			.text {}

			.btn {}
		}
	}
</style>