From a73fbb298e5e0b00b3682630b7b906b1436aa113 Mon Sep 17 00:00:00 2001
From: yangdanqi <0027013580@iwhalecloud.com>
Date: Thu, 24 Mar 2022 17:32:26 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=89=E8=B4=AD=E8=AF=A6=E6=83=85=EF=BC=8C?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95=E8=AF=A6=E6=83=85=E6=8F=90=E4=BA=A4=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 data.js                          |  20 ++++++
 pages.json                       |  20 +++++-
 pages/order/order-detail.vue     |  45 +++++++++++++
 pages/product/product-detail.vue |  79 ++++++++++++++--------
 pages/product/product-pick.vue   | 109 +++++++++++++++++++++++++++++++
 style/default.css                |   4 +-
 6 files changed, 245 insertions(+), 32 deletions(-)
 create mode 100644 pages/order/order-detail.vue
 create mode 100644 pages/product/product-pick.vue

diff --git a/data.js b/data.js
index 0209244..948fab4 100644
--- a/data.js
+++ b/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: [{
diff --git a/pages.json b/pages.json
index b3f385e..ceab90f 100644
--- a/pages.json
+++ b/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",
diff --git a/pages/order/order-detail.vue b/pages/order/order-detail.vue
new file mode 100644
index 0000000..9310401
--- /dev/null
+++ b/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>
diff --git a/pages/product/product-detail.vue b/pages/product/product-detail.vue
index b2ef720..5074a7f 100644
--- a/pages/product/product-detail.vue
+++ b/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,
-				curTopNav: 0,
-				shopInfo: {}
+				showTopNav: false,
+				curTopNav: 0,
+				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) {
-				// 修改聚焦时的样式
-				this.curTopNav = index;
-				// 跳转到指定目录
-				uni.pageScrollTo({
-					selector: '#pageAnchor' + index
-				})
+			},
+			clickNav(index) {
+				// 修改聚焦时的样式
+				this.curTopNav = index;
+				// 跳转到指定目录
+				uni.pageScrollTo({
+					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>
diff --git a/pages/product/product-pick.vue b/pages/product/product-pick.vue
new file mode 100644
index 0000000..23c154d
--- /dev/null
+++ b/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>
diff --git a/style/default.css b/style/default.css
index bee73cc..e5674c4 100644
--- a/style/default.css
+++ b/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%;
 }
\ No newline at end of file