kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

抽奖

Browse Source
This commit is contained in:
liuye
2023-02-03 14:49:43 +08:00
parent dd899524a5
commit 17d4eedf39
2 changed files with 42 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/project/activeAnalysis/AppLuckyDraw/AppLuckyDraw.vue
View File

@@ -31,6 +31,9 @@
<div class="flex-img-item">
<div>抽奖<br/>次数</div>
</div>
<div class="flex-img-item">
<div>抽奖<br/>次数</div>
</div>
</div>
<div class="count-line">
<div class="line-item" v-for="(item, index) in 20" :key="index" :class="activeInfo.clockCount > index ? 'active' : ''"></div>
@@ -39,6 +42,7 @@
<div>1天</div>
<div>5天</div>
<div>10天</div>
<div>15天</div>
<div>20天</div>
</div>
</div>
@@ -55,7 +59,9 @@
</view>
<div :style=" 'transform: rotate(' + index * (360 / activeInfo.prizes.length) + 'deg) ;' " class="cell">
<p>{{ item.name }}</p>
<img :src="item.picture" alt="" class="cell-img" />
<p v-if="item.belongRound > activeInfo.roundNumber">未开启</p>
<img :src="item.picture" alt="" class="cell-img" :class="item.belongRound > activeInfo.roundNumber ? 'clock-active' : ''" />
<img src="https://cdn.cunwuyun.cn/xlgl/lock.png" alt="" class="clock-img" v-if="item.belongRound > activeInfo.roundNumber">
</div>
</view>
</view>
@@ -114,7 +120,7 @@
<img src="./img/title-bg.png" alt="">
<p>助攻小插件</p>
</div>
<img src="./img/qrcode-img.png" alt="" class="qrcode-img">
<img :src="activeInfo.wxQrcode" alt="" class="qrcode-img">
<div class="text-line mar-b0">
<p class="text-center">关注微信插件，以免忘记打卡，仅用于接收提醒，<br/>不计入打卡。</p>
</div>
@@ -143,7 +149,7 @@ export default {
data() {
return {
deg: 0, // 初始化角度
duration: 2000, //动画时长
duration: 4000, //动画时长
awardNumber: 2, // 中奖区域 从1开始
isStart: false, //防止多次触发动画
animationData: {}, //动画对象
@@ -192,6 +198,7 @@ export default {
timingFunction: "linear",
});
this.$u.toast(`恭喜抽中${this.activeInfo.prizes[this.awardNumber].name}!`)
this.getDetail()
this.animationData = this.animation.export();
},
//开始旋转
@@ -286,9 +293,7 @@ export default {
this.wxInvoke(['shareAppMessage', {
title: '幸运抽奖',
desc: '新年伊始，企业微信团队为创建安全和谐的网络办公环境，诚邀大家使用企业微信参与打卡活动！',
// link: `/pages/AppLuckyDraw/AppLuckyDraw?activityId=${this.activityId}&friendId=${this.user.id}`,
link: 'https://www.baidu.com/',
imgUrl: 'https://cdn.cunwuyun.cn/xlgl/lock.png'
link: `./AppLuckyDraw/AppLuckyDraw?activityId=${this.activityId}&friendId=${this.user.id}`,
}]).catch((err) => {
console.log(123, err)
})
@@ -448,18 +453,24 @@ export default {
}
}
.flex-img-item:nth-of-type(1) {
flex: 1;
// flex: 1;
width: 110px;
text-align: left;
}
.flex-img-item:nth-of-type(2) {
flex: 2.5;
flex: 1.5;
text-align: right;
}
.flex-img-item:nth-of-type(3) {
flex: 4;
flex: 3.5;
text-align: right;
}
.flex-img-item:nth-of-type(4) {
flex: 7;
flex: 4.5;
text-align: right;
}
.flex-img-item:nth-of-type(5) {
flex: 3.5;
text-align: right;
}
}
@@ -495,18 +506,23 @@ export default {
color: #E55500;
}
div:nth-of-type(1) {
flex: 1;
// flex: 1;
width: 110px;
text-align: left;
}
div:nth-of-type(2) {
flex: 2.5;
text-align: right;
flex: 1.5;
}
div:nth-of-type(3) {
flex: 4;
flex: 3.5;
text-align: right;
}
div:nth-of-type(4) {
flex: 7;
flex: 4.5;
text-align: right;
}
div:nth-of-type(5) {
flex: 3.5;
text-align: right;
}
}
@@ -556,15 +572,24 @@ export default {
margin: 0 0 0 -60px;
transform-origin: 60px 269px;
font-size: 20px;
padding-top: 40px;
padding-top: 22px;
box-sizing: border-box;
color: #E55500;
}
.cell-img {
width: 80px;
// height: 80px;
margin-top: 10px;
}
.clock-active {
opacity: .3;
}
.clock-img {
width: 80px;
position: absolute;
top: 70px;
left: 50%;
margin-left: -40px;
}
.sector {
width: 538px;
height: 538px;