liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat：抽奖2.0（查漏补缺）

Browse Source
This commit is contained in:
LinCyJang
2026-04-30 02:04:25 +08:00
parent 6cb403c5d5
commit c3c0483625
10 changed files with 515 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg-video/views/county-lottery.vue
+69 -29
View File
@@ -45,24 +45,29 @@
</view>
<view class="pool-wrap">
<view class="pool-header">
<view class="pool-title">奖品池 <text class="sub">/ prize pool</text></view>
<view class="pool-header" style="background: linear-gradient(to bottom, #fff 50%, #CB302C 50%);">
<view class="pool-title-wrap">
<view class="pool-title">奖品池 <text class="sub">/ prize pool</text></view>
</view>
<view class="pool-desc">实付满{{ buyThresholdText }}元即可获得抽奖码，定时统一开奖</view>
</view>
<view class="pool-body">
<swiper
class="pool-swiper"
:autoplay="prizeList.length > 3"
:circular="prizeList.length > 3"
:autoplay="prizeList.length > 1"
:circular="prizeList.length > 1"
:interval="3000"
:duration="500"
:display-multiple-items="prizeList.length >= 3 ? 3 : prizeList.length"
previous-margin="220rpx"
next-margin="220rpx"
@change="onSwiperChange"
v-if="prizeList.length"
>
<swiper-item v-for="(prize, gIndex) in prizeList" :key="gIndex">
<view class="pool-list-group">
<view
class="pool-item"
:class="{ 'is-active': currentSwiperIndex === gIndex }"
style="margin: 0 auto;"
>
<view class="item-inner">
@@ -82,8 +87,9 @@
<view class="goods-section">
<view class="goods-header-box">
<view class="goods-title-pill">
<text class="dot">·</text> 活动商品 <text class="dot">·</text>
<view class="triangle"></view>
<view style="background: #ffb611;
padding: 8rpx 40rpx;
border-radius: 40rpx;"><text class="dot">·</text> 活动商品 <text class="dot">·</text></view>
</view>
<view class="goods-sub">—— 购买即得抽奖码 ——</view>
</view>
@@ -147,7 +153,8 @@ export default {
day: '--',
time: '--:--:--'
},
countdownTimer: null
countdownTimer: null,
currentSwiperIndex: 0
}
},
computed: {
@@ -300,6 +307,9 @@ export default {
url: '/pages/home/index'
})
},
onSwiperChange(e) {
this.currentSwiperIndex = e.detail.current
},
goGoodsDetail(item) {
if (!item.id) return
uni.navigateTo({ url: `/pages/shop/GoodsCon/index?id=${item.id}&from=countyLottery&activityId=${this.activityId}` })
@@ -488,12 +498,24 @@ export default {
width: 44rpx;
padding: 24rpx 0;
text-align: center;
border-radius: 24rpx 0 0 24rpx;
border-radius: 24rpx 24rpx 0 24rpx;
z-index: 10;
writing-mode: vertical-rl;
letter-spacing: 6rpx;
font-weight: bold;
box-shadow: -2rpx 2rpx 8rpx rgba(0, 0, 0, 0.1);
line-height: 44rpx;
&::after{
content: '';
position: absolute;
bottom: -14rpx;
right: 0; /* 修改为对齐右侧，以匹配侧边栏的布局 */
width: 0;
height: 0;
border-width: 14rpx 0 0 14rpx; /* 将三角形反转：顶部和左侧保留宽度，形成一个斜边向右下的直角三角形 */
border-style: solid;
border-color: #fff transparent transparent transparent; /* 顶部为白色 */
}
}
.side-entry.rules {
@@ -508,7 +530,7 @@ export default {
margin: 0 24rpx;
background: #fff;
border-radius: 40rpx;
padding: 10rpx 10rpx 10rpx 30rpx;
padding: 0rpx 0rpx 0rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
@@ -538,7 +560,7 @@ export default {
background: #3b7cf6;
color: #fff;
font-size: 24rpx;
padding: 8rpx 20rpx;
padding: 16rpx 20rpx;
border-radius: 30rpx;
display: flex;
align-items: center;
@@ -555,25 +577,30 @@ export default {
.pool-wrap {
margin: 24rpx;
background: #cb302c;
border-radius: 24rpx;
border-radius: 40rpx;
overflow: hidden;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
.pool-header {
display: flex;
align-items: stretch;
.pool-title-wrap{
background: #CB302C;
border-top-right-radius: 40rpx;
position: relative;
}
.pool-title {
background: #ffb611;
color: #333;
font-weight: bold;
font-size: 34rpx;
padding: 10rpx 24rpx;
padding: 10rpx 14rpx;
border-radius: 40rpx;
margin: 20rpx 30rpx 20rpx 20rpx;
margin: 10rpx;
display: flex;
align-items: baseline;
position: relative;
.sub {
font-size: 20rpx;
font-weight: bold;
@@ -598,20 +625,30 @@ export default {
}
.pool-swiper {
height: 250rpx;
height: 310rpx; /* 增加高度防止放大后被裁剪，并留出阴影和标签的空间 */
width: 100%;
}
.pool-list-group {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
height: 100%;
padding: 0;
}
.pool-item {
width: 220rpx;
margin-right: 32rpx;
width: 220rpx; /* 恢复正常大小 */
margin: 0 auto;
position: relative;
flex-shrink: 0;
transform: scale(0.85); /* 默认两侧缩小 */
transition: transform 0.3s ease;
&.is-active {
transform: scale(1.1); /* 当前项放大 */
z-index: 10;
}
.item-inner {
background: #fff;
@@ -684,34 +721,37 @@ export default {
.goods-title-pill {
position: absolute;
top: -24rpx;
top: -34rpx;
left: 50%;
transform: translateX(-50%);
background: #ffb611;
color: #333;
font-size: 32rpx;
font-weight: bold;
padding: 8rpx 40rpx;
border-radius: 40rpx;
border: 6rpx solid #fff;
display: flex;
align-items: center;
white-space: nowrap;
box-shadow: 0 -6rpx 0 #CB302C;
.dot {
margin: 0 8rpx;
}
.triangle {
&::after {
content: '';
position: absolute;
bottom: -16rpx;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 12rpx solid transparent;
border-right: 12rpx solid transparent;
border-top: 12rpx solid #ffb611;
transform: translateX(-50%) rotate(-45deg);
width: 30rpx;
height: 30rpx;
border: 6rpx solid #fff;
background: #ffb611;
/* 为了不让这个三角形的边框跑到上方的背景前，可以设置层级或者利用边框隐藏等，目前看原来的效果是直接叠加在底下的。
由于要模拟原本的 .triangle 元素层级，我们用 z-index: -1 把它垫在 pill 下面即可 */
z-index: -1;
}
}