选购详情，订单详情提交页

data.js

@@ -249,6 +249,8 @@ const productDetail = {
 		salePrice: 199.00,
 		price: 300,
 		saledCount: 370,
+		maxPieces: 1000,
+		comments: '备注',
 		commission: 12
 	}, {
 		id: 2,
@@ -256,6 +258,8 @@ const productDetail = {
 		salePrice: 240.00,
 		price: 350,
 		saledCount: 400,
+		maxPieces: 1001,
+		comments: '备注',
 		commission: 16
 	}, {
 		id: 3,
@@ -263,6 +267,8 @@ const productDetail = {
 		salePrice: 242.00,
 		price: 352,
 		saledCount: 350,
+		maxPieces: 1002,
+		comments: '备注',
 		commission: 13
 	}, {
 		id: 4,
@@ -270,6 +276,8 @@ const productDetail = {
 		salePrice: 243.00,
 		price: 353,
 		saledCount: 100,
+		maxPieces: 1003,
+		comments: '备注',
 		commission: 14
 	}, {
 		id: 5,
@@ -277,6 +285,8 @@ const productDetail = {
 		salePrice: 244.00,
 		price: 354,
 		saledCount: 109,
+		maxPieces: 1004,
+		comments: '备注',
 		commission: 15
 	}, {
 		id: 6,
@@ -284,6 +294,8 @@ const productDetail = {
 		salePrice: 244.00,
 		price: 354,
 		saledCount: 109,
+		maxPieces: 1005,
+		comments: '备注',
 		commission: 15
 	}, {
 		id: 7,
@@ -291,6 +303,8 @@ const productDetail = {
 		salePrice: 244.00,
 		price: 354,
 		saledCount: 109,
+		maxPieces: 1006,
+		comments: '备注',
 		commission: 15
 	}, {
 		id: 8,
@@ -298,6 +312,8 @@ const productDetail = {
 		salePrice: 244.00,
 		price: 354,
 		saledCount: 109,
+		maxPieces: 1007,
+		comments: '备注',
 		commission: 15
 	}, {
 		id: 9,
@@ -305,6 +321,8 @@ const productDetail = {
 		salePrice: 244.00,
 		price: 354,
 		saledCount: 109,
+		maxPieces: 1008,
+		comments: '备注',
 		commission: 15
 	}, {
 		id: 10,
@@ -312,6 +330,8 @@ const productDetail = {
 		salePrice: 244.00,
 		price: 354,
 		saledCount: 109,
+		maxPieces: 1009,
+		comments: '备注',
 		commission: 15
 	}],
 	reviewers: [{

pages.json

@@ -1,15 +1,29 @@
 {
 	"pages": [{
-			"path": "pages/index/index"
+			"path": "pages/index/index"
+			// "path": "pages/order/order-detail"
 		},
 		{
 			"path": "pages/product/product-detail",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		},
+		{
+			"path": "pages/product/product-pick",
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false
 			}
-
+		}
-		}
+		// ,
+		// {
+		// 	"path": "pages/order/order-detail",
+		// 	"style": {
+		// 		"navigationBarTitleText": "",
+		// 		"enablePullDownRefresh": false
+		// 	}
+		// }
 	],
 	"globalStyle": {
 		"navigationStyle": "custom",

pages/order/order-detail.vue

@@ -0,0 +1,45 @@
+<template>
+	<view>
+		<!-- 顶部操作条 -->
+		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
+			<block slot="backText">返回</block>
+			<block slot="content">订单确认</block>
+		</cu-custom>
+		<!-- 服务地址 -->
+		<view class="padding-lg bg-white">
+			<view class="flex justify-between align-center">
+				<view class="text-lg text-black">
+					<text class="cuIcon-locationfill text-blue light"></text>
+					选择服务地址
+				</view>
+				<view>选择<text class="text-sm text-bold text-gray cuIcon-right"></text></view>
+			</view>
+		</view>
+		<!-- 预约时间 -->
+		<view class="margin-lr-sm margin-top-sm bg-white padding">
+			<view class="flex justify-between align-center">
+				<text class="text-black">预约时间</text>
+				<view class="text-red text-sm">请选择上门时间<text class="text-bold cuIcon-right"></text></view>
+			</view>
+			<view class="text-sm text-gray margin-top-sm"><text class="cuIcon-question">选择的为期望上门时间，稍后工程师将与你确认具体上门时间</text></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				pickedProductList: []
+			}
+		},
+		methods: {
+			name() {
+				
+			}
+		},
+	}
+</script>
+
+<style>
+</style>

pages/product/product-detail.vue

@@ -1,4 +1,5 @@
-<template>
+<template>
+	<page-meta :page-style="'overflow:'+(ifShowPageMeta?'hidden':'visible')"></page-meta>
 	<view>
 		<!-- 顶部操作条 -->
 		<cu-custom :bgColor="'bg-white'" :isBack="true">
@@ -37,7 +38,7 @@
 			<view id="pageAnchor0" class="flex justify-between align-end">
 				<view class="text-df">
 					佣金：<text class="text-price margin-right-sm">{{curProductSpecs.commission}}</text>
-					<text class="cuIcon-share"></text>
+					<!-- <text class="cuIcon-share"></text> -->
 				</view>
 				<!-- <view class="text-df">
 					距结束：<uni-countdown style="float: right;" :day="1" :hour="1" :minute="12" :second="40" background-color="#fff" splitorColor="#fff"></uni-countdown>
@@ -62,7 +63,7 @@
 					<view class="text-sm text-gray margin-top-xs">{{productInfo.desc}}</view>
 				</view>
 				<view class="text-xl text-right padding-lr">
-					<view class="margin-tb-xs"><text class="cuIcon-share"></text></view>
+					<!-- <view class="margin-tb-xs"><text class="cuIcon-share"></text></view> -->
 					<view v-if="productInfo.isGoldServ" class="margin-tb-xs text-orange"><text
 							class="cuIcon-friendfamous"></text></view>
 				</view>
@@ -101,17 +102,17 @@
 				<view class="text-red text-sm">好评率95%<text class="text-bold text-gray cuIcon-right"></text></view>
 			</view>
 			<comments-card :reviewers="reviewers"></comments-card>
-		</view>
-		<!-- 店家链接 -->
-		<view class="margin-lr-sm margin-top-sm padding bg-white">
-			<view class="flex justify-between align-center">
-				<view class="flex justify-start align-center">
-					<view class="cu-avatar" :style="'background-image:url(' + shopInfo.avatarUrl + ');'"></view>
-					<view class="margin-lr-sm text-lg text-black">{{shopInfo.name}}</view>
-				</view>
-				<view class="text-sm">查看<text class="text-bold text-gray cuIcon-right"></text></view>
-			</view>
 		</view>
+		<!-- 店家链接 -->
+		<!-- <view class="margin-lr-sm margin-top-sm padding bg-white">
+			<view class="flex justify-between align-center">
+				<view class="flex justify-start align-center">
+					<view class="cu-avatar" :style="'background-image:url(' + shopInfo.avatarUrl + ');'"></view>
+					<view class="margin-lr-sm text-lg text-black">{{shopInfo.name}}</view>
+				</view>
+				<view class="text-sm">店铺查看<text class="text-bold text-gray cuIcon-right"></text></view>
+			</view>
+		</view> -->
 		<!-- 服务详情 -->
 		<view id="pageAnchor2" class="margin-lr-sm margin-top-sm bg-white margin-bottom-with-bar image">
 			<!-- <image :src="productDetailImgUrl" mode="widthFix"></image> -->
@@ -134,18 +135,26 @@
 				</view>
 				购物车
 			</view>
-			<view class="bg-main-color light submit">加入购物车</view>
+			<view class="bg-main-color light submit" @click="toggleProductPickModal">加入购物车</view>
 			<view class="bg-main-color submit">立即订购</view>
 		</view>
+		<!-- 底部弹窗 -->
+		<uni-popup ref="productPickPopup" type="bottom">
+			<view class="text-bold text-gray text-lg text-center left-top-sm-bar" @click="toggleProductPickModal"><text
+					class="cuIcon-close"></text></view>
+			<product-pick :specsList="specsList"></product-pick>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
 	import commentsCard from '@/components/goods-card/comments-card.vue';
+	import productPick from '@/pages/product/product-pick.vue';
 
 	export default {
 		components: {
-			commentsCard
+			commentsCard,
+			productPick
 		},
 		data() {
 			return {
@@ -158,9 +167,10 @@
 				reviewers: [],
 				productDetailImgUrl: '',
 				productVideoPlaying: false,
-				showTopNav: false,
+				showTopNav: false,
-				curTopNav: 0,
+				curTopNav: 0,
-				shopInfo: {}
+				shopInfo: {},
+				ifShowPageMeta: false
 			}
 		},
 		onLoad() {
@@ -181,7 +191,7 @@
 				this.specsList = productDetail.specsList;
 				this.curProductSpecs = this.specsList[0];
 				this.reviewers = productDetail.reviewers;
-				this.productDetailImgUrl = productDetail.productDetailImgUrl;
+				this.productDetailImgUrl = productDetail.productDetailImgUrl;
 				this.shopInfo = productDetail.shopInfo;
 			},
 			chooseSpecs(item) {
@@ -207,14 +217,22 @@
 					this.productVideoContext.pause();
 					this.productVideoPlaying = false;
 				}
-			},
+			},
-			clickNav(index) {
+			clickNav(index) {
-				// 修改聚焦时的样式
+				// 修改聚焦时的样式
-				this.curTopNav = index;
+				this.curTopNav = index;
-				// 跳转到指定目录
+				// 跳转到指定目录
-				uni.pageScrollTo({
+				uni.pageScrollTo({
-					selector: '#pageAnchor' + index
+					selector: '#pageAnchor' + index
-				})
+				})
+			},
+			toggleProductPickModal() {
+				if (this.ifShowPageMeta) {
+					this.$refs.productPickPopup.close();
+				} else {
+					this.$refs.productPickPopup.open();
+				}
+				this.ifShowPageMeta = !this.ifShowPageMeta;
 			}
 		}
 	}
@@ -229,4 +247,11 @@
 		height: 300rpx;
 		overflow: hidden;
 	}
+
+	.left-top-sm-bar {
+		position: absolute;
+		right: 25rpx;
+		top: 25rpx;
+		z-index: 99;
+	}
 </style>

pages/product/product-pick.vue

@@ -0,0 +1,109 @@
+<template>
+	<view>
+		<view class="padding-tb-lg padding-lr bg-white">
+			<view class="cu-list menu-avatar margin-bottom-sm">
+				<view class="cu-item padding-bottom-sm">
+					<view class="cu-avatar xl" :style="'background-image:url(' + curSpec.picUrl + ');'">
+					</view>
+					<view class="content margin-left">
+						<text class="text-price text-red text-xxl">{{curSpec.salePrice}}</text>
+						<text class="text-gray text-sm flex justify-between">
+							{{curSpec.comments}}
+						</text>
+					</view>
+				</view>
+			</view>
+			<view class="flex justify-between margin-lr-sm margin-tb-sm padding-lr">
+				<view>购买型号</view>
+				<view>购买数量</view>
+			</view>
+			<view class="margin-bottom-lg certern-height-with-scroll">
+				<view class="flex justify-between margin-lr-sm margin-tb-sm" v-for="(item,index) in specsList"
+					:key="item.id">
+					<view class='cu-tag padding' :class="curSpec.id === item.id ? 'line-main-color' : 'line-default'"
+						@click="chooseSpecs(item)">{{item.name}}</view>
+					<uni-number-box :min="0" :max="item.maxPieces" :value="0" @change="changePiecesNum($event, index)">
+					</uni-number-box>
+				</view>
+			</view>
+		</view>
+		<!-- 底部操作条 -->
+		<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
+			<view class="action">
+				<view class="cuIcon-cartfill">
+					<view class="cu-tag badge" v-if="totalPickCount > 0">{{totalPickCount}}</view>
+				</view>
+			</view>
+			<view class="action text-df center-grid">
+				<text class="margin-lr-xs">共计</text>
+				<text class="text-red text-price">{{totalPrice}}</text>
+			</view>
+			<view class="bg-main-color submit">确定</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "product-pick",
+		props: {
+			specsList: {
+				type: Array,
+				default: []
+			}
+		},
+		data() {
+			return {
+				curSpec: {},
+				// specsList: [],
+				totalPrice: 0,
+				pickList: [],
+				totalPickCount: 0
+			}
+		},
+		onReady() {
+			this.loadData();
+		},
+		methods: {
+			loadData() {
+				this.curSpec = this.specsList[0];
+				this.specsList.forEach(function(item) {
+					this.pickList.push({
+						price: item.price,
+						salePrice: item.salePrice,
+						pickCount: 0
+					})
+				}.bind(this));
+			},
+			changePiecesNum(piecesNum, index) {
+				let spec = this.pickList[index];
+				this.totalPrice -= spec.salePrice * (spec.pickCount - piecesNum);
+				this.totalPickCount -= spec.pickCount - piecesNum
+				this.pickList[index].pickCount = piecesNum;
+			},
+			chooseSpecs(item) {
+				this.curSpec = item;
+			}
+		},
+	}
+</script>
+
+<style scoped>
+	.fixed-bottom-bar .cuIcon-cartfill:before {
+		font-size: 64rpx;
+	}
+
+	.fixed-bottom-bar .text-df {
+		font-size: 28rpx !important;
+	}
+
+	.fixed-bottom-bar .center-grid {
+		width: 43% !important;
+		text-align: left;
+	}
+
+	.certern-height-with-scroll {
+		height: 600rpx;
+		overflow: scroll;
+	}
+</style>

style/default.css

@@ -7,11 +7,11 @@
 	width: 100% !important;
 	bottom: 0 !important;
 	margin-bottom: 0 !important;
-	z-index: 210000000;
+	z-index: 98;
 }
 
 .fixed-top-bar {
 	position: fixed !important;
-	z-index: 210000000;
+	z-index: 98;
 	width: 100%;
 }