ZhHealth/pages/store/buy.vue

<template>
	<view class="content">
		<!-- address -->
		<view class="block address">
			<uni-icons class="address-icon location" type="location-filled" size="24" color="#34CE98"></uni-icons>
			<uni-icons class="address-icon arrows" type="right" size="20" color="#999"></uni-icons>
			<view class="user"><text>唐明阳</text>18245180131</view>
			<view class="city">黑龙江省哈尔滨市南岗区汉水路265号</view>
		</view>
		<!-- 订单产品 -->
		<view class="block goods-box">
			<view class="goods-item">
				<image class="order-cover" src="https://yanxuan-item.nosdn.127.net/6d48e6ea51a06b1356ccda21497fdb14.png" mode="aspectFill"></image>
				<view class="order-title">茅台王子酒 金王子 53度 500毫升</view>
				<view class="order-count">
					<view class="order-price"><text>￥</text>275.00</view>
					<view class="order-sum">共1件</view>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="block info-box">
			<view class="info-item">
				<view class="label">配送方式</view>
				<view class="nowrap">快递</view>
			</view>
			<view class="info-item">
				<view class="label">优惠金额</view>
				<view class="nowrap">无优惠</view>
			</view>
		</view>
		<!-- footer -->
		<view class="order-footer">
		    <view class="total">总计：<text>￥1399.00</text></view>
		    <button class="btn">确认订单</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsInfo			: {},
				expressPickerValue  : 0,
				addressId           : '',
				paramsId            : '',
				goodsNumber         : ''
			};
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background: $window-color;
		min-height: 100vh;
		overflow: hidden;
		padding-bottom: $padding + 80;
		box-sizing: border-box;
	}
	.block{
		background: white;
		margin: $margin;
		border-radius: $radius;
	}
	// 地址管理
	.address{
		position: relative;
		padding: $padding 80rpx $padding 90rpx;
		font-size: $title-size-lg;
		.user{
			font-size: $title-size;
			line-height: 40rpx;
			color: $text-gray;
			text{
				color: black;
				max-width: 200rpx;
				display: inline-block;
				margin-right: $margin/2;
			}
		}
		.city{
			padding-top: $padding/2;
			font-size: $title-size-sm;
			color: $text-gray;
			line-height: 36rpx;
		}
		.address-icon{
			position: absolute;
			top: 50%;
			&.location{
				margin-top: -26rpx;
				left: $margin - 10;
			}
			&.arrows{
				margin-top: -20rpx;
				right: $margin - 10;
			}
		}
	}
	// 订单列表
	.goods-item{
		display: flex;
		align-items: center;
		padding: $padding;
		.order-cover{
			vertical-align: top;
			width: 128rpx;
			height: 128rpx;
		}
		.order-title{
			@extend .ellipsis;
			text-align: left;
			flex: 1;
			padding-left: $margin;
			font-size: 28rpx;
			line-height: 40rpx;
		}
		.order-count{
			text-align: right;
			padding-left: $margin;
			line-height: 40rpx;
			.order-price{
				font-size: 30rpx;
				font-weight: bold;
				color: $text-price;
				&>text{
					font-size: 24rpx;
				}
			}
			.order-sum{
				font-size: 26rpx;
				color: #777;
			}
		}
	}
	// 订单信息
	.info-box{
		.info-item{
			position: relative;
			padding: $padding $padding $padding 200rpx;
			font-size: $title-size-m;
			min-height: 40rpx;
			text-align: right;
			.label{
				position: absolute;
				left: $margin;
				top: $margin;
				color: $text-gray;
			}
			&::after{
				position: absolute;
				left: $margin;
				right: $margin;
				content: " ";
				height: 1rpx;
				bottom: 0;
				background: $border-color;
			}
			&:last-child::after{
				display: none;
			}
		}
	}
	// footer
	.order-footer{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: $padding;
		background: white;
		border-radius: $radius $radius 0 0;
		box-shadow: 0 0 10rpx 10rpx rgba($color: #000000, $alpha: .02);
		z-index: 99;
		display: flex;
		.total{
			line-height: 80rpx;
			font-size: $title-size-lg;
			font-weight: bold;
			width: calc(100% - 300rpx - #{$margin});
			color: $text-gray;
			font-weight: normal;
			@extend .nowrap;
			text{
				color: $text-price;
				font-size: $title-size-lg;
				font-weight: bold;
			}
		}
		.btn{
			margin-left: $margin;
			width: 300rpx;
			height: 80rpx;
			padding: 0;
			line-height: 80rpx;
			font-size: $title-size-lg;
			border-radius: 40rpx;
			background: $main-color;
			color: white;
			font-weight: bold;
			&::after{
				display: none;
			}
		}
	}
</style>