首页热门的图片展示样式修改；goods详情中的轮播图高度随滚动top调整
This commit is contained in:
donqi
parent
ff22f5beb5
commit
e7d949770d
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<!-- 强制要求用户授权登录的弹窗 -->
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue