diff --git a/pages.json b/pages.json
index a61eba3..b0d4fb2 100644
--- a/pages.json
+++ b/pages.json
@@ -823,6 +823,13 @@
 				"navigationBarTitleText": "发表",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/order/confirm/confirm",
+			"style" : {
+				"navigationBarTitleText": "确认订单",
+				"navigationStyle": "custom"
+			}
 		}
     ],
 	"globalStyle": {
diff --git a/pages/order/confirm/confirm.vue b/pages/order/confirm/confirm.vue
new file mode 100644
index 0000000..3e31c7a
--- /dev/null
+++ b/pages/order/confirm/confirm.vue
@@ -0,0 +1,213 @@
+<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>
diff --git a/pages/shop/goodsdetail.vue b/pages/shop/goodsdetail.vue
index ac65363..997a8b2 100644
--- a/pages/shop/goodsdetail.vue
+++ b/pages/shop/goodsdetail.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<lf-nav :spreadOut="false" :showIcon="true" bgColor="transparent!important"></lf-nav>
+		<lf-nav title="商品详情" titleColor="#fff" :spreadOut="false" :showIcon="true" bgColor="transparent"></lf-nav>
 		<skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true">
 			<block>
 				<!-- 商品图片轮播 -->
@@ -129,13 +129,58 @@
 						</button>
 					</view>
 					<view class="lf-flex">
-						<button class="btn1" @click="toAddOrder">加入购物车</button>
-						<button class="btn lf-m-l-15" @click="toAddOrder">立即购买</button>
+						<button class="btn1" @click="shoot(1)">加入购物车</button>
+						<button class="btn lf-m-l-15" @click="shoot(2)">立即购买</button>
 					</view>
 				</view>
+				<!-- 加入购物车、立即购买模态框选规格 -->
+				<u-popup v-model="show_popup" mode="bottom">
+					<view class="popup-content">
+						<!-- 商品信息及关闭按钮 -->
+						<view class="popup-head">
+							<view class="lf-flex">
+								<image class="goods-img" src="https://picsum.photos/200"></image>
+								<view class="goods-info">
+									<view class="price">¥5.8</view>
+									<view class="goods-name">桃子</view>
+								</view>
+							</view>
+							<view @click="show_popup = false">
+								<text class="lf-iconfont icon-cuo lf-font-50"></text>
+							</view>
+						</view>
+						<!-- 规格 -->
+						<view class="spec-title">重量</view>
+						<view class="lf-flex-wrap">
+							<view :class="{
+								'spec-item': true,
+								'spec-active': spec_current == index}" 
+								@click="activeSpec(index)"
+								v-for="(item, index) in 5" 
+								:key="index">{{ item +'0克' }}
+							</view>
+						</view>
+						<!-- 数量 -->
+						<view class="lf-row-between lf-m-t-40">
+							<view class="lf-font-28 lf-color-555">数量</view>
+							<view class="lf-flex">
+								<view class="num-btn">
+									<text class="lf-iconfont icon-xiangyou lf-font-24"></text>
+								</view>
+								<view>
+									<input class="input" value="1" />
+								</view>
+								<view class="num-btn lf-text-right">
+									<text class="lf-iconfont icon-xiangyou lf-font-24"></text>
+								</view>
+							</view>
+						</view>
+						<!-- 操作按钮 -->
+						<button class="comfirm-btn" @click="confirm">{{ click_type == 1 ? '加入购物车' : '立即购买' }}</button>
+					</view>
+				</u-popup>
 				<!-- 回到顶部 -->
-				<!-- <u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}" :icon-style="{color: '#ffffff'}"></u-back-top> -->
-				<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
+				<u-back-top :scroll-top="pageScrollTop"></u-back-top>
 			</block>
 		</skeleton>
 	</view>
@@ -154,7 +199,10 @@
 					'https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png',
 					'https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png',
 					'https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png'
-				]
+				],
+				show_popup: false, // 是否显示选规格模态框
+				spec_current: null, // 规格下标
+				click_type: null // 当前点击的是加入购物车[1]还是立即购买[2]
 			}
 		},
 		onLoad(options){
@@ -171,6 +219,23 @@
 			}
 		},
 		methods: {
+			shoot(type){
+				// TODO 判断type做不同的逻辑
+				this.click_type = type;
+				this.show_popup = true;
+			},
+			activeSpec(index){
+				if(this.spec_current == index){
+					this.spec_current = null;
+				}else{
+					this.spec_current = index;
+				}
+			},
+			confirm(){
+				if(this.click_type == 2){
+					this.$url('/pages/order/confirm/confirm');
+				}
+			},
 			shareGraphic(){
 				this.getCreateShareImg();
 			},
@@ -571,4 +636,88 @@
 			border-radius: 42rpx;
 		}
 	}
+	
+	.popup-content{
+		height: max-content;
+		width: 750rpx;
+		background: #FFFFFF;
+		border-radius: 20rpx 20rpx 0rpx 0rpx !important;
+		padding: 40rpx 32rpx;
+		.popup-head{
+			display: flex;
+			justify-content: space-between;
+			.goods-img{
+				width: 150rpx;
+				height: 150rpx;
+				border-radius: 2rpx;
+				margin-right: 20rpx;
+			}
+			.goods-info{
+				width: 400rpx;
+				height: 150rpx;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-around;
+				.price{
+					font-size: 48rpx;
+					font-weight: bold;
+					color: #F63434;
+					line-height: 1;
+				}
+				.goods-name{
+					font-size: 32rpx;
+					color: #222222;
+					line-height: 1.4;
+				}
+			}
+		}
+		.spec-title{
+			font-size: 28rpx;
+			color: #555555;
+			margin-top: 40rpx;
+			margin-bottom: 20rpx;
+		}
+		.spec-item{
+			width: 142rpx;
+			height: 64rpx;
+			border-radius: 33rpx;
+			border: 2rpx solid #555555;
+			font-size: 28rpx;
+			color: #555555;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin-right: 20rpx;
+			&:nth-child(4n){
+				margin-right: 0rpx;
+			}
+			&:nth-child(n+5){
+				margin-top: 20rpx;
+			}
+		}
+		.spec-active{
+			border: none;
+			background-color: #15716E;
+			color: #FFFFFF;
+		}
+		.input{
+			width: 40rpx;
+			height: 45rpx;
+			border-radius: 2rpx;
+			background-color: #F3F8F7;
+			text-align: center;
+		}
+		.num-btn{
+			width: 36rpx;
+		}
+		.comfirm-btn{
+			width: 550rpx;
+			height: 100rpx;
+			background: #15716E;
+			border-radius: 50rpx;
+			color: #FFFFFF;
+			line-height: 100rpx;
+			margin-top: 62rpx;
+		}
+	}
 </style>
\ No newline at end of file