首页热门的图片展示样式修改；goods详情中的轮播图高度随滚动top调整

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;

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() {
@@ -50,4 +61,24 @@
 	.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>

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>
 		<!-- 强制要求用户授权登录的弹窗 -->

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>
@@ -202,6 +202,7 @@
 				reviewers: [],
 				productVideoPlaying: 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) {
@@ -340,4 +342,14 @@
 		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>

style/default.css

@@ -95,3 +95,9 @@
 	margin: 0 0 20rpx 0 !important;
 	padding: 20rpx !important;
 }
+
+.flex-column-start {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+}