|
|
@@ -1,6 +1,5 @@
|
|
|
<template>
|
|
|
<view class="index-product-wrapper" v-show="!isSortType">
|
|
|
-
|
|
|
<!-- 拼团列表 -->
|
|
|
|
|
|
<view class="list-box animated" v-for="(e, index) in grouponData" :key="index">
|
|
|
@@ -9,15 +8,16 @@
|
|
|
|
|
|
<view class="content">
|
|
|
<view class="home">
|
|
|
- <view class="count">共{{ e.goodsTotal }}个</view>
|
|
|
- <scroll-view scroll-x class="navscroll"> <!-- 设置滚动条方向为横向 -->
|
|
|
- <view
|
|
|
- style="width: 108rpx;height: 108rpx; margin-right: 20rpx; padding: 0; display: inline-block;"
|
|
|
- class="item" v-for="item in e.goodsImage">
|
|
|
- <!-- 通过for循环生成view -->
|
|
|
- <image style="width: 108rpx;height: 108rpx;" :src="item" mode="scaleToFill" />
|
|
|
- </view>
|
|
|
+ <view class="count ">共{{ e.goodsTotal }}个</view>
|
|
|
+ <scroll-view scroll-x class="navscroll" :scroll-into-view="scrollIndex"> <!-- 设置滚动条方向为横向 -->
|
|
|
+ <view :id="'scroll'+index" class="item goods_item_img " v-for="(item,index) in e.goodsImage" :key="index">
|
|
|
+ <!-- 通过for循环生成view -->
|
|
|
+ <image style="width: 108rpx;height: 108rpx;" :src="item" mode="scaleToFill" />
|
|
|
+ </view>
|
|
|
</scroll-view>
|
|
|
+ <view class="" @click="moveImg(e.goodsImage.length)">
|
|
|
+ <image class="nextimg" src="http://www.gzzzyd.com/groupon/home_slices/进入箭头2小@2x.png" mode="scaleToFill" />
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -37,22 +37,23 @@
|
|
|
</view>
|
|
|
|
|
|
<view class="countdown flex-row">
|
|
|
- <view class="countdown-l bord" hover-class="none" hover-stop-propagation="false">
|
|
|
+ <view class="countdown-l " hover-class="none" hover-stop-propagation="false">
|
|
|
<block v-for="(item, index) in e.grouponUsers" :key="index">
|
|
|
<image v-if="index < 3" :class="{'avatar-group_1':index===0 }" referrerpolicy="no-referrer"
|
|
|
:src="item.userAvatar || `/static/images/one.png`" />
|
|
|
+
|
|
|
</block>
|
|
|
<text class="red">{{ e.grouponUserTotal }}人</text>
|
|
|
<text class="yellow" v-if="currentId == 0">正在参团中</text>
|
|
|
<text class="yellow" v-if="currentId == 1">已参团</text>
|
|
|
</view>
|
|
|
- <view class="countdown-r bord" v-if="currentId == 0">
|
|
|
+ <view class="countdown-r " v-if="currentId == 0">
|
|
|
<image src="http://www.gzzzyd.com/groupon/home_slices/倒计时@2x.png" mode="scaleToFill" />
|
|
|
<text class="yellow">截止倒计时</text>
|
|
|
<!-- <text class="red2">02时25分19秒</text> -->
|
|
|
<!-- <uni-countdown :show-day="false" :hour="e.h" :minute="e.m" :second="e.s"></uni-countdown> -->
|
|
|
<u-count-down :time="e.seconds * 1000" format="HH:mm:ss" @change="timechange">
|
|
|
- <text :style="{'color':'#B42A3E'}">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}时{{ timeData.minutes }}分{{ timeData.seconds }}秒</text>
|
|
|
+ <text :style="{'color':'#B42A3E','font-size':'26rpx'}">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}时{{ timeData.minutes }}分{{ timeData.seconds }}秒</text>
|
|
|
</u-count-down>
|
|
|
|
|
|
</view>
|
|
|
@@ -150,6 +151,8 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ index:4,
|
|
|
+ scrollIndex:'scroll4',
|
|
|
timeData:{},
|
|
|
timestamp: 86400,
|
|
|
navigationList2: [],
|
|
|
@@ -176,6 +179,15 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
|
|
|
+ moveImg(length){
|
|
|
+ this.scrollIndex= 'scroll' +this.index
|
|
|
+ if (this.index>length){
|
|
|
+ this.index = 4
|
|
|
+ }else {
|
|
|
+ this.index +=5;
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
timechange(e) {
|
|
|
this.timeData = e
|
|
|
},
|
|
|
@@ -243,22 +255,19 @@ export default {
|
|
|
|
|
|
.content {
|
|
|
width: 100%;
|
|
|
- height: 108rpx;
|
|
|
+ height: 124rpx;
|
|
|
margin-top: 10rpx;
|
|
|
|
|
|
.home {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- left: 0;
|
|
|
+ height: 124rpx;
|
|
|
margin-top: 10rpx;
|
|
|
|
|
|
.count {
|
|
|
text-align: center;
|
|
|
- width: 150rpx !important;
|
|
|
- position: relative;
|
|
|
- height: 108rpx;
|
|
|
+ width: 98rpx !important;
|
|
|
+ height: 124rpx;
|
|
|
line-height: 108rpx;
|
|
|
z-index: 999;
|
|
|
background-size: 100% 100%;
|
|
|
@@ -268,7 +277,8 @@ export default {
|
|
|
|
|
|
.navscroll {
|
|
|
white-space: nowrap;
|
|
|
- width: 580rpx;
|
|
|
+ width: 570rpx;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -551,4 +561,26 @@ export default {
|
|
|
}
|
|
|
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.goods_item_img{
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 108rpx;
|
|
|
+ width: 108rpx;
|
|
|
+ height: 108rpx;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-left: 16rpx;
|
|
|
+}
|
|
|
+.nextimg{
|
|
|
+ width: 34rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ margin-top: 45rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+}
|
|
|
+ .bord{
|
|
|
+ border: 1px solid red;
|
|
|
+ }
|
|
|
</style>
|
zhanghui