提交
This commit is contained in:
zpc
parent
2a7af5e872
commit
6059a4a665
|
|
@ -10,8 +10,6 @@
|
||||||
<view style="height: 232rpx;">
|
<view style="height: 232rpx;">
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
<view class="relative"
|
<view class="relative"
|
||||||
style="width: 686rpx; height: 152rpx; background-color: #FFFFFF; border-radius: 16rpx; margin: 0 auto;">
|
style="width: 686rpx; height: 152rpx; background-color: #FFFFFF; border-radius: 16rpx; margin: 0 auto;">
|
||||||
|
|
||||||
|
|
@ -48,83 +46,133 @@
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 赏品预览 -->
|
<!-- 赏品预览 -->
|
||||||
<scroll-view v-if="currentTab == 0" scroll-y="true" class="" style="width: 100%; height: 900rpx;">
|
<view v-if="currentTab == 0" scroll-y="true" class="" style="width: 100%; height: 900rpx;">
|
||||||
<view style="height: 60rpx;"></view>
|
<view style="height:30rpx;"></view>
|
||||||
<view class="" style="width: 544rpx; height: 500rpx; background-color: #999999; margin: 0 auto 0;">
|
<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>
|
||||||
|
<scroll-view scroll-y="true" style="width: 100%; height:400rpx;">
|
||||||
<view class="grid-container">
|
<view class="grid-container">
|
||||||
<view class="grid-item column align-center" v-for="(item, index) in goodsList" :key="index"
|
<view @click=" currentItemId=item.index" class="grid-item column align-center" v-for="(item, index) in goodsList"
|
||||||
style="">
|
:key="index" style="">
|
||||||
<image style="width: 112rpx; height: 112rpx;border-radius:25rpx;" :src="item.imgUrl"></image>
|
<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>
|
<text style="color: #999999; font-size: 16rpx; margin-top: 16rpx;">{{ item.title }}</text>
|
||||||
|
|
||||||
</view>
|
</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>
|
</view>
|
||||||
<text style="color: #8A8A8A; font-size: 20rpx; font-weight: 400; margin-top: 12rpx;">距离开奖时间：{{ remainingTime
|
</scroll-view>
|
||||||
}}</text>
|
|
||||||
|
|
||||||
</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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
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,
|
currentTab: 0,
|
||||||
bonusData: {
|
bonusData: {
|
||||||
title: "新人消费满5元福利屋",
|
title: "新人消费满5元福利屋",
|
||||||
|
|
@ -237,6 +285,7 @@ export default {
|
||||||
await this.load(options.goods_id)
|
await this.load(options.goods_id)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
async load(goods_id) {
|
async load(goods_id) {
|
||||||
const res = await this.req({
|
const res = await this.req({
|
||||||
url: "goods_fuliwu_detail",
|
url: "goods_fuliwu_detail",
|
||||||
|
|
@ -271,7 +320,8 @@ export default {
|
||||||
realPrice: item.price,
|
realPrice: item.price,
|
||||||
sortIndex: item.sort,
|
sortIndex: item.sort,
|
||||||
type: item.shang_title,
|
type: item.shang_title,
|
||||||
typeColor: item.shang_color
|
typeColor: item.shang_color,
|
||||||
|
imgurl_detail: item.imgurl_detail
|
||||||
});
|
});
|
||||||
index++;
|
index++;
|
||||||
}
|
}
|
||||||
|
|
@ -507,8 +557,10 @@ export default {
|
||||||
grid-template-columns: repeat(4, 124rpx);
|
grid-template-columns: repeat(4, 124rpx);
|
||||||
gap: 24rpx;
|
gap: 24rpx;
|
||||||
width: 580rpx;
|
width: 580rpx;
|
||||||
margin: 28rpx auto 0;
|
margin: 10rpx auto 0;
|
||||||
padding-bottom: 20rpx;
|
padding-bottom: 20rpx;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-item {
|
.grid-item {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user