提交
This commit is contained in:
zpc
parent
2a7af5e872
commit
6059a4a665
|
|
@ -10,8 +10,6 @@
|
|||
<view style="height: 232rpx;">
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="relative"
|
||||
style="width: 686rpx; height: 152rpx; background-color: #FFFFFF; border-radius: 16rpx; margin: 0 auto;">
|
||||
|
||||
|
|
@ -48,83 +46,133 @@
|
|||
</view>
|
||||
|
||||
<!-- 赏品预览 -->
|
||||
<scroll-view v-if="currentTab == 0" scroll-y="true" class="" style="width: 100%; height: 900rpx;">
|
||||
<view style="height: 60rpx;"></view>
|
||||
<view class="" style="width: 544rpx; height: 500rpx; background-color: #999999; margin: 0 auto 0;">
|
||||
<view v-if="currentTab == 0" scroll-y="true" class="" style="width: 100%; height: 900rpx;">
|
||||
<view style="height:30rpx;"></view>
|
||||
<view class="" style="width: 544rpx; height: 500rpx; margin: 0 auto 0;">
|
||||
<!-- <special-banner :banner-list="bannerList" :swiper-config="swiperConfig"></special-banner> -->
|
||||
<swiper class="swiper-box" :current="currentItemId" :style="{ height: '500rpx' }" :autoplay="false"
|
||||
:indicator-dots="false" :circular="true" :interval="3000">
|
||||
<swiper-item v-for="(item, index) in goodsList" :key="index" :item-id="item.index">
|
||||
<view style="display: flex; justify-content: center; align-items: center; height: 80%;">
|
||||
<view
|
||||
style="background-image: url('https://mh.shhuanmeng.com/flw_bj.png');background-size: 100% 100%; width: 280rpx; height:352rpx; display: flex; justify-content: center; align-items: center;z-index: 2;">
|
||||
<image :src="item.imgurl_detail" style="width: 280rpx; height:352rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
style="background-image: url('https://mh.shhuanmeng.com/flw_dibu.png');background-size: 100% 100%;width: 100%; height: 122rpx;position: relative;top:-15%;z-index: 1;">
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<view class="grid-container">
|
||||
<view class="grid-item column align-center" v-for="(item, index) in goodsList" :key="index"
|
||||
style="">
|
||||
<image style="width: 112rpx; height: 112rpx;border-radius:25rpx;" :src="item.imgUrl"></image>
|
||||
<scroll-view scroll-y="true" style="width: 100%; height:400rpx;">
|
||||
<view class="grid-container">
|
||||
<view @click=" currentItemId=item.index" class="grid-item column align-center" v-for="(item, index) in goodsList"
|
||||
:key="index" style="">
|
||||
<image style="width: 112rpx; height: 112rpx;border-radius:25rpx;" :src="item.imgUrl">
|
||||
</image>
|
||||
<text style="color: #999999; font-size: 16rpx; margin-top: 16rpx;">{{ item.title }}</text>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
<scroll-view v-if="currentTab == 1" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
|
||||
<view class="row align-center" v-for="(item, index) in participantList" :key="index"
|
||||
style="height: 76rpx; margin-bottom: 24rpx;">
|
||||
|
||||
<view class="center" style="width: 30rpx;">
|
||||
<text style="color: #999999; font-size: 20rpx;">{{ index + 1 }}</text>
|
||||
</view>
|
||||
|
||||
|
||||
<image :src="item.avatar"
|
||||
style="width: 76rpx; height: 76rpx; background-color: #D8D8D8; border-radius: 50%; margin-left: 24rpx;"
|
||||
mode=""></image>
|
||||
|
||||
<view class="column" style="margin-left: 16rpx;">
|
||||
<text style="color: #333333; font-size: 20rpx;">{{ item.name }}</text>
|
||||
<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{ item.time }}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view v-if="currentTab == 2" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
|
||||
<view class="row align-center relative" v-for="(item, index) in awardRecordList" :key="index"
|
||||
style="height: 76rpx; margin-bottom: 24rpx;">
|
||||
|
||||
<view class="center" style="width: 30rpx;">
|
||||
<text style="color: #999999; font-size: 20rpx;">{{ index + 1 }}</text>
|
||||
</view>
|
||||
<image :src="item.avatar"
|
||||
style="width: 76rpx; height: 76rpx; background-color: #D8D8D8; border-radius: 50%; margin-left: 24rpx;"
|
||||
mode=""></image>
|
||||
<view class="column" style="margin-left: 16rpx;">
|
||||
<text style="color: #333333; font-size: 20rpx;">{{ item.name }}</text>
|
||||
<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{ item.time }}</text>
|
||||
</view>
|
||||
<view class="row center" style="position: absolute; right: 56rpx;">
|
||||
<image v-if="index == 0" :src="$img1('checkin/Jackpot.png')"
|
||||
style="width: 46rpx; height: 26rpx;" mode=""></image>
|
||||
<text style="color: #999999; font-size: 20rpx; margin-left: 16rpx;">晶体*1500</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="column align-center"
|
||||
style="width: 100%; height: 198rpx; background-color: #fff; margin-top: 8rpx;">
|
||||
|
||||
<view class="center"
|
||||
style="width: 340rpx; height: 84rpx; background-color: #D8FD24; border-radius: 16rpx; margin-top: 32rpx;">
|
||||
<text style="color: #333333; font-size: 32rpx; font-weight: 600;">马上参与</text>
|
||||
</view>
|
||||
<text style="color: #8A8A8A; font-size: 20rpx; font-weight: 400; margin-top: 12rpx;">距离开奖时间：{{ remainingTime
|
||||
}}</text>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<scroll-view v-if="currentTab == 1" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
|
||||
<view class="row align-center" v-for="(item, index) in participantList" :key="index"
|
||||
style="height: 76rpx; margin-bottom: 24rpx;">
|
||||
|
||||
<view class="center" style="width: 30rpx;">
|
||||
<text style="color: #999999; font-size: 20rpx;">{{ index + 1 }}</text>
|
||||
</view>
|
||||
|
||||
|
||||
<image :src="item.avatar"
|
||||
style="width: 76rpx; height: 76rpx; background-color: #D8D8D8; border-radius: 50%; margin-left: 24rpx;"
|
||||
mode=""></image>
|
||||
|
||||
<view class="column" style="margin-left: 16rpx;">
|
||||
<text style="color: #333333; font-size: 20rpx;">{{ item.name }}</text>
|
||||
<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{ item.time }}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view v-if="currentTab == 2" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
|
||||
<view class="row align-center relative" v-for="(item, index) in awardRecordList" :key="index"
|
||||
style="height: 76rpx; margin-bottom: 24rpx;">
|
||||
|
||||
<view class="center" style="width: 30rpx;">
|
||||
<text style="color: #999999; font-size: 20rpx;">{{ index + 1 }}</text>
|
||||
</view>
|
||||
<image :src="item.avatar"
|
||||
style="width: 76rpx; height: 76rpx; background-color: #D8D8D8; border-radius: 50%; margin-left: 24rpx;"
|
||||
mode=""></image>
|
||||
<view class="column" style="margin-left: 16rpx;">
|
||||
<text style="color: #333333; font-size: 20rpx;">{{ item.name }}</text>
|
||||
<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{ item.time }}</text>
|
||||
</view>
|
||||
<view class="row center" style="position: absolute; right: 56rpx;">
|
||||
<image v-if="index == 0" :src="$img1('checkin/Jackpot.png')" style="width: 46rpx; height: 26rpx;"
|
||||
mode=""></image>
|
||||
<text style="color: #999999; font-size: 20rpx; margin-left: 16rpx;">晶体*1500</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="column align-center" style="width: 100%; height: 198rpx; background-color: #fff; margin-top: 8rpx;">
|
||||
|
||||
<view class="center"
|
||||
style="width: 340rpx; height: 84rpx; background-color: #D8FD24; border-radius: 16rpx; margin-top: 32rpx;">
|
||||
<text style="color: #333333; font-size: 32rpx; font-weight: 600;">马上参与</text>
|
||||
</view>
|
||||
<text style="color: #8A8A8A; font-size: 20rpx; font-weight: 400; margin-top: 12rpx;">距离开奖时间：{{ remainingTime
|
||||
}}</text>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentItemId: 0,
|
||||
bannerList: [{
|
||||
picture: 'https://mh.shhuanmeng.com/topic/20250402/e02ce743c5545f53e905a276f2c36249.png',
|
||||
title: '七夕将至：时光足够久，韧性也能炖出味',
|
||||
description: '一万年太久，就现在，给你爱',
|
||||
path: ''
|
||||
}, {
|
||||
picture: 'https://mh.shhuanmeng.com/topic/20250402/e02ce743c5545f53e905a276f2c36249.png',
|
||||
title: '新菜上架：无边海洋，找到顺眼的那尾鱼',
|
||||
description: '花中樱，鱼乃鲷花中樱，鱼乃鲷',
|
||||
path: ''
|
||||
}, {
|
||||
picture: 'https://mh.shhuanmeng.com/topic/20250402/e02ce743c5545f53e905a276f2c36249.png',
|
||||
title: '在湘西的烟火气里，发现苗族少女的神明',
|
||||
description: '取材自湘西苗族传统的烟熏文化',
|
||||
path: ''
|
||||
}, {
|
||||
picture: 'https://mh.shhuanmeng.com/topic/20250402/e02ce743c5545f53e905a276f2c36249.png',
|
||||
title: '福利降临，陪伴独自行走的丰盛旅程',
|
||||
description: '在自己的小世界里，日日好日，夜夜好清宵',
|
||||
path: ''
|
||||
}],
|
||||
swiperConfig: {
|
||||
indicatorDots: true,
|
||||
indicatorColor: 'rgba(255, 255, 255, .4)',
|
||||
indicatorActiveColor: 'rgba(255, 255, 255, 1)',
|
||||
autoplay: false,
|
||||
interval: 3000,
|
||||
duration: 300,
|
||||
circular: true,
|
||||
previousMargin: '150rpx',
|
||||
nextMargin: '150rpx'
|
||||
},
|
||||
currentTab: 0,
|
||||
bonusData: {
|
||||
title: "新人消费满5元福利屋",
|
||||
|
|
@ -237,6 +285,7 @@ export default {
|
|||
await this.load(options.goods_id)
|
||||
},
|
||||
methods: {
|
||||
|
||||
async load(goods_id) {
|
||||
const res = await this.req({
|
||||
url: "goods_fuliwu_detail",
|
||||
|
|
@ -271,7 +320,8 @@ export default {
|
|||
realPrice: item.price,
|
||||
sortIndex: item.sort,
|
||||
type: item.shang_title,
|
||||
typeColor: item.shang_color
|
||||
typeColor: item.shang_color,
|
||||
imgurl_detail: item.imgurl_detail
|
||||
});
|
||||
index++;
|
||||
}
|
||||
|
|
@ -507,8 +557,10 @@ export default {
|
|||
grid-template-columns: repeat(4, 124rpx);
|
||||
gap: 24rpx;
|
||||
width: 580rpx;
|
||||
margin: 28rpx auto 0;
|
||||
margin: 10rpx auto 0;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user