From e7d949770d4e8f2604f1704a47528af1fa9027b4 Mon Sep 17 00:00:00 2001
From: donqi <ydq0308@qq.com>
Date: Mon, 20 Jun 2022 15:22:34 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E7=83=AD=E9=97=A8=E7=9A=84?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=B1=95=E7=A4=BA=E6=A0=B7=E5=BC=8F=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=EF=BC=9Bgoods=E8=AF=A6=E6=83=85=E4=B8=AD=E7=9A=84?=
 =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E9=AB=98=E5=BA=A6=E9=9A=8F=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8top=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/js/request.js                          |  4 +--
 components/goods-card/vertical-goods-card.vue | 35 +++++++++++++++++--
 pages/index/home.vue                          |  2 +-
 pages/product/product-detail.vue              | 18 ++++++++--
 style/default.css                             |  6 ++++
 5 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/common/js/request.js b/common/js/request.js
index e9c7772..01ab5f6 100644
--- a/common/js/request.js
+++ b/common/js/request.js
@@ -10,9 +10,9 @@ export default {
 					title: '加载中'
 				})
 				// request 触发前拼接 url 
-				args.url = 'https://www.opsoul.com' + args.url;
+				// args.url = 'https://www.opsoul.com' + args.url;
 				// args.url = 'http://192.168.2.42:80' + args.url;
-				// args.url = 'http://127.0.0.1:80' + args.url;
+				args.url = 'http://127.0.0.1:80' + args.url;
 				if (args.data) {
 					args.data.deptId = globalData.deptId;
 					args.data.from = globalData.from;
diff --git a/components/goods-card/vertical-goods-card.vue b/components/goods-card/vertical-goods-card.vue
index 04cf18b..b9838d9 100644
--- a/components/goods-card/vertical-goods-card.vue
+++ b/components/goods-card/vertical-goods-card.vue
@@ -5,9 +5,16 @@
 				<text class="cuIcon-titles text-main-color"></text> {{title}}
 			</view>
 		</view>
-		<view class="cu-card case no-card solid-bottom" v-for="(item, index) in goodsInfos" :key="index" @click="showDetails(item)">
+		<view class="cu-card case no-card solid-bottom bg-white padding-top-xs" v-for="(item, index) in goodsInfos" :key="index" @click="showDetails(item)">
 			<view class="cu-item shadow">
-				<view class="image">
+				<view v-if="multiPicMode" class="flex justify-between align-center multi-pic-container">
+					<view class="left-view"><image class="radius" :src="item.goodsImgsMap[0][0].imgUrl" mode="scaleToFill"></image></view>
+					<view class="flex-column-between align-center right-view">
+						<image class="radius" :src="item.goodsImgsMap[0][1].imgUrl" mode="scaleToFill"></image>
+						<image class="radius" :src="item.goodsImgsMap[0][2].imgUrl" mode="scaleToFill"></image>
+					</view>
+				</view>
+				<view v-else>
 					<image :src="item.goodsImgUrl" mode="aspectFill"></image>
 				</view>
 				<view class="cu-item item-margin-custom">					
@@ -33,6 +40,10 @@
 			goodsInfos: {
 				type: Array,
 				default: []
+			},
+			multiPicMode: {
+				type: Boolean,
+				default: false
 			}
 		},
 		data() {
@@ -49,5 +60,25 @@
 <style scoped>
 	.item-margin-custom {
 		margin: 10rpx 30rpx 30rpx 30rpx;
+	}
+	
+	.multi-pic-container {
+		height: 450rpx;
+		overflow: hidden;
+	}
+	
+	.multi-pic-container > view {
+		width: calc(50% - 5rpx);
+		height: 100%;
+	}
+	
+	.multi-pic-container > .left-view > image {
+		height: 100%;
+		width: 100%;
+	}
+	
+	.multi-pic-container > .right-view > image {
+		height: calc(50% - 5rpx);
+		width: 100%;
 	}
 </style>
diff --git a/pages/index/home.vue b/pages/index/home.vue
index b79403b..d52e7b4 100644
--- a/pages/index/home.vue
+++ b/pages/index/home.vue
@@ -72,7 +72,7 @@
 			<!-- <vertical-goods-card ref="discountGoodsCard" :goodsInfos="discountGoods.goodsInfos"
 				:title="discountGoods.title"></vertical-goods-card> -->
 			<!-- 热门服务 -->
-			<vertical-goods-card :goodsInfos="hotGoods" title="大家都在买">
+			<vertical-goods-card :goodsInfos="hotGoods" :multiPicMode="true" title="大家都在买">
 			</vertical-goods-card>
 		</view>
 		<!-- 强制要求用户授权登录的弹窗 -->
diff --git a/pages/product/product-detail.vue b/pages/product/product-detail.vue
index 36e33c8..8a0d62f 100644
--- a/pages/product/product-detail.vue
+++ b/pages/product/product-detail.vue
@@ -16,7 +16,7 @@
 			</view>
 		</uni-transition>
 		<!-- 轮播图，视频 -->
-		<swiper class="screen-swiper" @change="changeSwiper">
+		<swiper :class="changeSwiperHeight ? 'sm-screen-swiper' : 'sm-screen-swiper lg-screen-swiper'" @change="changeSwiper">
 			<swiper-item v-if="productDetail.goodsVideoUrl">
 				<video id="productVideo" :src="productDetail.goodsVideoUrl" :controls="true" :autoplay="false"
 					:show-center-play-btn="true" :show-fullscreen-btn="false" @click="clickSwiper($event, item, 0)"></video>
@@ -201,7 +201,8 @@
 				isShowAllSpecs: false,
 				reviewers: [],
 				productVideoPlaying: false,
-				showTopNav: false,
+				showTopNav: false,
+				changeSwiperHeight: false,
 				curTopNav: 0,
 				shopInfo: {},
 				ifShowPageMeta: false,
@@ -223,7 +224,8 @@
 			this.productVideoContext = uni.createVideoContext('productVideo');
 		},
 		onPageScroll(e) {
-			this.showTopNav = e.scrollTop > 250 ? true : false
+			this.showTopNav = e.scrollTop > 250 ? true : false;
+			this.changeSwiperHeight = e.scrollTop > 50 ? true: false;
 		},
 		methods: {
 			async loadData(params) {
@@ -339,5 +341,15 @@
 		right: 25rpx;
 		top: 25rpx;
 		z-index: 99;
+	}
+	
+	.sm-screen-swiper {
+		height: 400rpx;
+		transition: all 0.5s ease-in-out;
+	}
+	
+	.lg-screen-swiper {
+		height: 900rpx;
+		transition: all 0.5s ease-in-out;
 	}
 </style>
diff --git a/style/default.css b/style/default.css
index 8956bbd..5a690b8 100644
--- a/style/default.css
+++ b/style/default.css
@@ -94,4 +94,10 @@
 .cu-form-group textarea {
 	margin: 0 0 20rpx 0 !important;
 	padding: 20rpx !important;
+}
+
+.flex-column-start {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
 }
\ No newline at end of file