商城与首页基础页面

pages/store/buy.vue

@@ -0,0 +1,167 @@
+<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">
+				
+			</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;
+			}
+		}
+	}
+	// 订单信息
+	.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>