ec.uniapp-master/pages/order/confirm/confirm.vue

<template>
	<view>
		<lf-nav title="确认订单" :showIcon="true"></lf-nav>
		<view class="card head">
			<view class="lf-font-32 lf-color-222">选择收货方式</view>
			<view class="capsule">
				<view class="item" :class="{'capsule-active': mode == 1}" @click="mode = 1">邮寄</view>
				<view class="item" :class="{'capsule-active': mode == 2}" @click="mode = 2">自提</view>
			</view>
		</view>
		<view class="card address" v-if="mode == 1">
			<view>
				<text class="lf-font-28 lf-color-primary lf-m-r-10">更换收获地址</text>
				<text class="lf-iconfont icon-xiangyou lf-font-24 lf-color-777"></text>
			</view>
			<view class="lf-m-t-20">
				<text class="lf-font-28 lf-color-222 lf-font-bold">王小二</text>
				<text class="lf-font-28 lf-color-777 lf-m-l-20">18284385380</text>
			</view>
			<view class="lf-font-28 lf-color-333 lf-m-t-10">
				<text>广西壮族自治区-南宁市-青秀区-民族大道民族大道民族大道民族大道民族大道民族大道15号</text>
			</view>
		</view>
		<view class="card goods">
			<view>
				<text class="lf-iconfont icon-Group- lf-font-30"></text>
				<text class="shop-name">精品超市</text>
				<text class="lf-iconfont icon-xiangyou lf-font-24"></text>
			</view>
			<view class="lf-flex lf-m-t-20">
				<image class="goods-img"></image>
				<view class="info">
					<view class="lf-font-26 lf-color-333 lf-line-1">爱他美较大婴儿配方奶粉较大配方奶粉较2段 </view>
					<view class="lf-font-24 lf-color-777">500g</view>
					<view class="lf-row-between" style="line-height: 1;">
						<text class="price">¥385</text>
						<text class="lf-font-28 lf-color-777">x 2</text>
					</view>
				</view>
			</view>
			<view class="tips">支付成功后15天内柜台提货</view>
			<view class="lf-flex lf-m-t-20">
				<view class="lf-font-28 lf-color-777">留言</view>
				<input v-model="value" class="input" placeholder="有什么要求，请备注留言" />
			</view>
		</view>
		<view class="card lf-m-t-20">
			<view class="lf-row-between">
				<view class="lf-font-28 lf-color-777">优惠券</view>
				<view>
					<text class="lf-font-26 lf-color-999 lf-m-r-10">暂无优惠券</text>
					<text class="lf-iconfont icon-xiangyou lf-font-24"></text>
				</view>
			</view>
			<view class="lf-row-between lf-m-t-20">
				<view class="lf-font-28 lf-color-777">商品金额</view>
				<view class="lf-font-26 lf-color-222">¥385</view>
			</view>
			<view class="lf-row-between lf-m-t-20" v-if="mode == 1">
				<view class="lf-font-28 lf-color-777">运费</view>
				<view class="lf-font-26" style="color: #F63434;">¥0</view>
			</view>
			<view class="lf-row-between lf-m-t-20">
				<view class="lf-font-28 lf-color-777">优惠</view>
				<view class="lf-font-26" style="color: #F63434;">¥0</view>
			</view>
		</view>
		<view class="spread-out"></view>
		<view class="fixed-bottom">
			<view class="fixed-content">
				<view class="lf-font-24 lf-color-777">共1件</view>
				<view class="lf-flex">
					<view class="lf-font-32 lf-color-primary" style="max-width: 400rpx;">合计 ¥385</view>
					<view class="confirm-btn" hover-class="lf-opacity">提交订单</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				mode: 1, // 1邮寄，2自提
				value: '' // 备注
			}
		},
		onLoad(){
			
		},
		methods: {
			
		}
	}
</script>

<style>
	page{
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped="scoped">
	.card{
		height: max-content;
		width: 750rpx;
		padding: 30rpx 32rpx;
		background-color: #FFFFFF;
	}
	.head{
		.capsule{
			width: 614rpx;
			height: 100rpx;
			margin: 30rpx auto 0;
			border-radius: 100px;
			border: 2rpx solid #15716E;
			display: flex;
			overflow: hidden;
			.item{
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: bold;
				color: #15716E;
			}
			.capsule-active{
				background-color: #15716E;
				color: #FFFFFF;
			}
		}
	}
	.address{
		margin-top: 20rpx;
	}
	.goods{
		margin-top: 20rpx;
		.shop-name{
			font-size: 28rpx;
			color: #222222;
			font-weight: bold;
			margin: 0 15rpx;
		}
		.goods-img{
			width: 130rpx;
			height: 130rpx;
			border-radius: 4rpx;
			margin-right: 15rpx;
			background-color: #EEEEEE;
		}
		.info{
			width: 540rpx;
			height: 130rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.price{
				font-size: 32rpx;
				color: #F63434;
				font-weight: bold;
			}
		}
		.tips{
			font-size: 22rpx;
			margin-top: 30rpx;
			color: #15716E;
		}
		.input{
			margin-left: 30rpx;
			font-size: 28rpx;
			width: 596rpx;
		}
	}
	
	.spread-out{
		height: 138rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
	}
	.fixed-bottom{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: max-content;
		background-color: #FFFFFF;
		border-top: 1rpx solid #e5e5e5;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.fixed-content{
			width: 100%;
			height: 118rpx;
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.confirm-btn{
				width: 167rpx;
				height: 80rpx;
				background: #15716E;
				border-radius: 40rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 30rpx;
				font-size: 26rpx;
			}
		}
	}
</style>