Signed-off-by: liuboyan <632697560@qq.com>

12

config/api.js

@@ -22,4 +22,9 @@ module.exports = {
 	getGoodsByType: WX_API_BASE + '/app/product/homeCategoryProductPage',
 	//  获取商品详情
 	getCommonGoodDetail: WX_API_BASE + '/app/product/user/productDetail',
+	
+	//  添加购物车
+	addCart: WX_API_BASE + '/app/shoppingcart/user/addCart',
+	//  下订单
+	submitOrder: WX_API_BASE + '/app/order/user/submitOrder',
 }

pages.json

@@ -41,6 +41,11 @@
 			"style": {
 				"navigationBarTitleText": "商铺详情"
 			}
+		}, {
+			"path": "orderPay",
+			"style": {
+				"navigationBarTitleText": "填写订单"
+			}
 		}]
 	},{
		"root": "pagesOrder",
		"pages": [{
			"path": "index",
			"style": {
				"navigationBarTitleText": "我的订单"
			}
		}]
	}],
 	"globalStyle": {

pages/shop/index.vue

@@ -152,7 +152,7 @@
 			//  跳转商品详情
 			goToGoodDetails(item) {
 				uni.navigateTo({
-					url: '/pagesGood/goodDetails?goodId=' + item.productId
+					url: '/pagesGood/goodDetails?goodId=' + item.id
 				});
 			}
 		}

pagesGood/goodDetails.vue

@@ -2,8 +2,8 @@
 	<view class="container">
 		<swiper class="swiper" :indicator-dots="true" indicator-color="#9A9A9A" indicator-active-color="#52A63A" :autoplay="true"
 		 :interval="3000" :duration="500">
-			<swiper-item v-for="(item,index) in goodData.imgs" :key="index">{{index}}
-				<!-- <cover-image :src="item.imgPath"></cover-image> -->
+			<swiper-item v-for="(item,index) in goodData.imgs" :key="index">
+				<cover-image :src="item.imgPath"></cover-image>
 			</swiper-item>
 		</swiper>
 		<view class="good-info">
@@ -16,8 +16,67 @@
 			<view class="good-name">{{goodData.productName}}</view>
 			<view class="good-detail">{{goodData.productDescribe}}</view>
 		</view>
-		<view class="good-info">
-	</view>
+		<view class="good-data">
+			<text class="good-select">选择</text>
+			<text class="good-unit">{{number}}&nbsp;{{goodData.unit}}</text>
+			<text class="iconfont iconfangxiang"></text>
+		</view>
+		<view class="tab-box">
+			<view class="tab-col" :class="tabIndex == 1 ? 'tab-col-active' :''" @click="tabIndex = 1">产品介绍</view>
+			<view class="tab-col" :class="tabIndex == 2 ? 'tab-col-active' :''" @click="tabIndex = 2">用户评价</view>
+		</view>
+		<rich-text :nodes="goodData.sellDesc" v-if="tabIndex == 1"></rich-text>
+		<view class="good-assess" v-else>
+			<view class="assess-row" v-for="(item,index) in assessList" :key="index">
+				<cover-image class="assess-head" :src="item.imgPath"></cover-image>
+				<view class="assess-info">
+					<view class="assess-name">{{item.imgPath}}</view>
+					<view class="assess-date">{{item.imgPath}}</view>
+					<view class="assess-sore-box">
+						<view class="sore-col" v-for="site in item.grade" :key="site"></view>
+					</view>
+					<view class="assess-text">{{item.imgPath}}</view>
+					<view class="assess-img-box">
+						<cover-image class="img-col" v-for="site in item.imgPath" :key="site" :src="site"></cover-image>
+					</view>
+				</view>
+			</view>
+			<view class="assess-more" @click="">显示全部</view>
+		</view>
+		<view class="good-recommend">
+			<view class="recommend-title">为您推荐</view>
+			<scroll-view class="recommend-box" scroll-x="true">
+				<view class="good-col" v-for="(item, index) in goodsList" :key="index">
+					<cover-image class="good-img" :src="item.imgPath"></cover-image>
+					<view class="good-name">{{item.name}}</view>
+					<view class="good-price">￥{{item.price}}</view>
+				</view>
+			</scroll-view>
+		</view>
+		<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="goToShop" @buttonClick="showPopup"
+		 style="width: 100%; position: fixed; bottom: 0px;" />
+		<uni-popup ref="popup" type="bottom">
+			<view class="popup-box">
+				<view class="popup-good-info-box">
+					<cover-image class="popup-good-img" v-if="goodData.imgs.length" :src="goodData.imgs[0].imgPath"></cover-image>
+					<view class="popup-good-data">
+						<view class="popup-good-price"><text style="font-size: 14px;">￥</text>{{goodData.bizPrice}}</view>
+						<view class="popup-good-number">库存{{goodData.stock}}件</view>
+						<view class="popup-good-type">已选</view>
+					</view>
+					<view class="popup-good-close"></view>
+				</view>
+				<view class="popup-good-info">单位</view>
+				<view class="popup-good-unit">{{goodData.unit}}</view>
+				<view class="popup-good-info">数量</view>
+				<view class="popup-good-number-box">
+					<uni-icons type="minus-filled" size="20" color="#A67A54" @click="number>1?number--:''"></uni-icons>
+					<text class="good-select">{{number}}</text>
+					<uni-icons type="plus-filled" size="20" color="#A67A54" @click="number++"></uni-icons>
+				</view>
+				<uni-goods-nav :fill="true" :options="[]" :buttonGroup="buttonGroup" @buttonClick="submitData" style="width: 100%; position: absolute; bottom: 0px;left:0px" />
+			</view>
+		</uni-popup>
 	</view>
 </template>
 
@@ -34,9 +93,30 @@
 					sellCount: '',
 					productName: '',
 					productDescribe: '',
+					unit: '',
+					sellDesc: '',
+					stock: '',
 					imgs: [],
 				},
+				assessList: [],
 				goodsList: [],
+				number: 1,
+				tabIndex: 1,
+				options: [{
+					icon: 'shop',
+					text: '店铺',
+				}],
+				buttonGroup: [{
+						text: '加入购物车',
+						backgroundColor: '#75BD60',
+						color: '#fff'
+					},
+					{
+						text: '立即购买',
+						backgroundColor: '#52A63A',
+						color: '#fff'
+					}
+				]
 			}
 		},
 		onLoad(options) {
@@ -58,7 +138,65 @@
 			}
 		},
 		methods: {
-			getGoodsList() {},
+			//  跳转商铺页
+			goToShop() {
+				uni.navigateTo({
+					url: '/pagesGood/shopDetails?shopId=' + goodData.tenantCode
+				});
+			},
+			//  弹出购物弹窗
+			showPopup() {
+				this.$refs.popup.open()
+			},
+			//  获取为你推荐
+			getGoodsList() {
+
+			},
+			//  提交操作
+			submitData(e) {
+				if (e.index) {
+					//  立即购买
+					uni.setStorage({
+						key: 'orderData',
+						data: {
+							tenantCode: '',
+							supplierName: '',
+							goodsList: [{
+								bizPrice: 0,
+								buyNum: 0,
+								imgUrl: "",
+								originalPrice: 0,
+								productId: 0,
+								productName: "",
+								productType: 0,
+								shoppingcartId: 0,
+								tenantCode: ""
+							}]
+						}
+					});
+					uni.navigateTo({
+						url: '/pagesGood/goodDetails?orderType=1'
+					});
+				} else {
+					//  加入购物车
+					NET.request(API.addCart, {
+						productId: this.goodId,
+						buyNum: this.number
+					}, 'POST').then(res => {
+						if (res.code == 0) {
+							uni.showToast({
+								title: "加入购物车成功",
+								icon: "success"
+							})
+						} else {
+							uni.showToast({
+								title: "加入购物车失败",
+								icon: "none"
+							})
+						}
+					}).catch(res => {})
+				}
+			},
 		},
 	}
 </script>
@@ -66,6 +204,7 @@
 <style lang="less" scoped>
 	.container {
 		background-color: #f7f7f7;
+		padding-bottom: 50px;
 
 		.swiper {
 			height: 375px;
@@ -101,6 +240,7 @@
 					font-size: 12px;
 					text-decoration: line-through;
 					color: #A67A54;
+					margin-left: 6px;
 				}
 
 				.seller-count {
@@ -115,16 +255,300 @@
 				font-size: 16px;
 				color: #343434;
 				font-family: PingFang SC;
-				margin: 10px 0;
+				margin: 12px 0 8px 0;
 			}
 
 			.good-detail {
 				line-height: 14px;
 				font-size: 12px;
-				
-color: #666666;
+				color: #666666;
 				font-family: PingFang SC;
 			}
 		}
+
+		.good-data {
+			height: 46px;
+			margin: 10px 0;
+			box-sizing: border-box;
+			background-color: #FFFFFF;
+			padding: 14px 16px;
+			font-family: PingFang SC;
+			font-size: 12px;
+			line-height: 14px;
+
+			.good-select {
+				color: #666666;
+				margin-right: 12px;
+			}
+
+			.good-unit {
+				color: #343434;
+			}
+
+			.iconfont {
+				float: right;
+				font-size: 16px;
+				color: #999999;
+			}
+		}
+
+		.tab-box {
+			height: 50px;
+			background-color: #FFFFFF;
+			box-sizing: border-box;
+			padding: 0 16px;
+			display: flex;
+			justify-content: space-around;
+
+			.tab-col {
+				height: 49px;
+				font-size: 13px;
+				font-family: PingFang SC;
+				color: #666666;
+				line-height: 50px;
+			}
+
+			.tab-col-active {
+				font-size: 15px;
+				color: #343434;
+				border-bottom: 1px solid #10C06E;
+			}
+		}
+
+		.good-assess {
+			width: 100%;
+			box-sizing: border-box;
+			background-color: #FFFFFF;
+			padding: 12px 16px 18px 16px;
+
+			.assess-row {
+				border-bottom: 1px solid #F6F6F6;
+				padding-bottom: 18px;
+				display: flex;
+
+				.assess-head {
+					width: 50px;
+					height: 50px;
+				}
+
+				.assess-info {
+					width: calc(100% - 62px);
+					margin-left: 12px;
+
+					.assess-name {
+						height: 18px;
+						float: left;
+						line-height: 18px;
+						font-size: 15px;
+						font-family: PingFang SC;
+						font-weight: bold;
+						color: #343434;
+					}
+
+					.assess-date {
+						height: 18px;
+						float: right;
+						line-height: 18px;
+						font-size: 12px;
+						font-family: PingFang SC;
+						font-weight: bold;
+						color: #666666;
+					}
+
+					.assess-sore-box {
+						height: 16px;
+						margin-top: 6px;
+
+						.sore-col {
+							margin-right: 4px;
+						}
+					}
+
+					.assess-text {
+						font-size: 12px;
+						font-family: PingFang SC;
+						font-weight: bold;
+						color: #666666;
+						line-height: 16px;
+						margin: 8px 0 10px 0;
+					}
+
+					.assess-img-box {
+						display: flex;
+
+						.img-col {
+							height: 60px;
+							width: 60px;
+							object-fit: cover;
+							margin-right: 10px;
+						}
+					}
+				}
+			}
+
+			.assess-row:last-child {
+				border-bottom: none;
+			}
+
+			.assess-more {
+				width: 220px;
+				height: 32px;
+				position: relative;
+				left: 50%;
+				transform: translateX(-50%);
+				border: 1px solid #52A63A;
+				border-radius: 16px;
+				text-align: center;
+				font-size: 12px;
+				font-family: PingFang SC;
+				color: #53A63A;
+				line-height: 32px;
+			}
+		}
+
+		.good-recommend {
+			height: 184px;
+			background-color: #FFFFFF;
+			margin: 10px 0;
+
+			.recommend-title {
+				height: 32px;
+				padding-left: 16px;
+				font-size: 14px;
+				font-family: PingFang SC;
+				color: #343434;
+				line-height: 32px;
+			}
+
+			.recommend-box {
+				width: calc(100% - 32px);
+
+				.good-col {
+					width: 108px;
+					height: 140px;
+					margin-right: 12px;
+
+					.good-img {
+						width: 108px;
+						height: 108px;
+						object-fit: cover;
+					}
+
+					.good-name {
+						font-size: 10px;
+						font-family: PingFang SC;
+						color: #343434;
+						line-height: 14px;
+						margin: 4px 0;
+					}
+
+					.good-price {
+						font-size: 14px;
+						font-family: PingFang SC;
+						color: #6CA63A;
+						line-height: 16px;
+					}
+				}
+			}
+		}
+
+		.popup-box {
+			width: 100vw;
+			height: 400px;
+			background-color: #FFFFFF;
+			border-radius: 15px 15px 0px 0px;
+			box-sizing: border-box;
+			padding: 16px 16px 0 16px;
+
+			.popup-good-info-box {
+				height: 90px;
+				margin-bottom: 4px;
+				display: flex;
+
+				.popup-good-img {
+					width: 90px;
+					height: 90px;
+					object-fit: cover;
+					border-radius: 5px;
+					overflow: hidden;
+				}
+
+				.popup-good-data {
+					width: calc(100% - 136px);
+					height: 90px;
+					margin-left: 22px;
+
+					.popup-good-price {
+						margin-top: 10px;
+						height: 20px;
+						line-height: 20px;
+						font-size: 20px;
+						font-family: PingFang SC;
+						color: #52A63A;
+					}
+
+					.popup-good-number {
+						height: 16px;
+						font-size: 13px;
+						font-family: PingFang SC;
+						color: #9A9A9A;
+						line-height: 16px;
+						margin: 12px 0 10px 0;
+					}
+
+					.popup-good-type {
+						height: 16px;
+						font-size: 13px;
+						font-family: PingFang SC;
+						color: #343434;
+						line-height: 16px;
+					}
+				}
+
+				.popup-good-close {
+					width: 24px;
+					height: 24px;
+				}
+			}
+
+			.popup-good-info {
+				height: 33px;
+				box-sizing: border-box;
+				padding-top: 16px;
+				margin-top: 16px;
+				border-top: 1px solid #ECECEC;
+				font-size: 14px;
+				font-family: PingFang SC;
+				color: #9A9A9A;
+				line-height: 16px;
+			}
+
+			.popup-good-unit {
+				height: 28px;
+				display: inline-block;
+				padding: 0 22px;
+				margin-top: 14px;
+				background: #52A63A;
+				border-radius: 14px;
+				font-size: 14px;
+				font-family: PingFang SC;
+				color: #FFFFFF;
+				line-height: 28px;
+			}
+
+			.popup-good-number-box {
+				height: 20px;
+				float: right;
+				margin-top: -20px;
+
+				.good-select {
+					font-size: 16px;
+					font-family: PingFang SC;
+					color: #343434;
+					margin: 0 12px;
+					line-height: 20px;
+				}
+			}
+		}
 	}
 </style>

pagesGood/goodList.vue

@@ -119,7 +119,7 @@
 			//  跳转商品详情
 			goToGoodDetails(item) {
 				uni.navigateTo({
-					url: '/pagesGood/goodDetails?goodId=' + item.productId
+					url: '/pagesGood/goodDetails?goodId=' + item.id
 				});
 			}
 		},

pagesGood/orderPay.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>