cosmetics_shop_wxapp/indexPages/pay/index.vue

<template>
	<view class="pay">
		<!-- header -->
		<cu-custom isBack bgColor="bg-gradual-blue"><view slot="content">确认订单</view></cu-custom>
		<view @click="addressListFunc" class="padding bg-white flex align-center">
			<view style="flex: auto;">
				<view class="margin-bottom-sm  flex align-center">
					<text class="cu-tag text-white round sm margin-right-xs" style="background-color:#ee0a24;">默认</text>
					河南省郑州市中原区石佛镇
				</view>
				<view class="margin-bottom-sm text-bold text-black text-lg">详细地址</view>
				<view class=" text-black text-lg">张三 1886458562</view>
			</view>
			<text style="min-width: 40upx;" class="cuIcon-right lg text-gray text-center"></text>
		</view>
		<view class="padding bg-white margin-tb-sm">
			<view class="padding-bottom-sm flex justify-between">
				<view class="text-black text-bold">商品清单</view>
				<view @click="show = true" class="text-gray flex align-center">
					共n件
					<text class="cuIcon-right lg "></text>
				</view>
			</view>
			<scroll-view style="width: 100%;flex-wrap: nowrap;height: 180upx;" class="flex  " enable-flex scroll-x="true">
				<image
					@click="show = true"
					class="margin-right"
					v-for="(item, index) in 5"
					:key="index"
					style="min-width: 180upx; width: 180upx;height: 180upx;"
					src="https://gd-hbimg.huaban.com/1f50f2135ba51e4b9aa20caef41860b15005c9386f0b-LxqWsh_fw658/format/webp"
					mode="aspectFit"
				></image>
			</scroll-view>
		</view>
		<!-- footer -->
		<view class="footer">
			<view class="footer-content flex padding justify-between align-center bg-white">
				<view class="flex align-end">
					<view class="margin-right-xs text-black">实付款</view>
					<view style="transform: translateY(10upx);" class="text-price text-red"><cu-price value="500" size="52" /></view>
				</view>
				<button class="bg-red  cu-btn round ">提交订单</button>
			</view>
		</view>
		<!-- 工具 -->
		<cu-modalC :show.sync="show" custom="2">
			<view class="padding text-center text-lg text-black text-bold border">
				商品清单1
				<text class="text-sm" style="color:#999">（共n件）</text>
			</view>
			<cu-scrollView height="50vh">
				<view class="flex padding">
					<image
						class="radius margin-right-sm"
						style="width: 160upx;height: 160upx;min-width: 160upx;"
						lazy-load="true"
						src="https://gd-hbimg.huaban.com/1f50f2135ba51e4b9aa20caef41860b15005c9386f0b-LxqWsh_fw658/format/webp"
						mode="aspectFit"
					></image>
					<view style="flex:auto" class="content margin-right-sm">
						<view class="text-black cut">商品名称</view>
						<view class="text-grey margin-top-xs">尺码 大小</view>
					</view>
				</view>
			</cu-scrollView>
		</cu-modalC>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false
		};
	},
	methods:{
		addressListFunc(){
			uni.navigateTo({
				url:"/loginPages/addressList/index"
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.pay {
	.border {
		position: relative;
		&::after {
			content: '';
			border-top: 1upx solid #ccc;
			position: absolute;
			left: 0;
			bottom: 0;
			transform: scale(1, 0.5);
			width: 100%;
		}
	}
	.footer {
		height: calc(120rpx + env(safe-area-inset-bottom));
		.footer-content {
			width: 100vw;
			padding-bottom: calc(30upx + env(safe-area-inset-bottom)) !important;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 999;
		}
	}
}
</style>