vue uniapp turntable lottery effect
html code:
<view class="activity-con"> <view class="activity-bacg"> <!-- Enter the carousel content on the homepage --> <view class="activity-bacg-zhuanpan"> <view class="activity-bacg-zhuanpan-bg"> <!-- Turntable outer ring --> <image mode="widthFix" src="../../static/zp-quan.png"></image> <!-- Bisector circle --> <view id="circle0" :class="[isRotate?'rotate':'']" :style="{transform: 'rotate(' + rotate + 'deg)'}"> <!-- The first half of the cycle bisects the circle --> <view id="left"> <view class="circle-left" :id="'rotate-' + i + '-' + (360/count)*i" v-for="(v,i) in count" v-if="(count/2>i)" :style="{ transform: 'rotate(' + (360/count)*i + 'deg)', 'background': (i%2==0?'linear-gradient(#fee59c,#fbefcf)': 'linear-gradient(#ffffff,#fbefcf)')}"> <label>¥123*{<!-- -->{(i + 1)}}</label> </view> </view> <!-- Half of the circle after the loop --> <view id="right"> <view class="circle-right" :id="'rotate-' + i + '-' + (360/count)*(i + 1)" v-for="(v,i) in count" v-if="((count/2)<=i)" :style="{ transform: 'rotate(' + (360/count)*(i + 1) + 'deg)', 'background': (i%2==0?'linear-gradient(#fee59c,# fbefcf)':'linear-gradient(#fbefcf,#ffffff)'), 'z-index':(count-i) }"> <label>¥123*{<!-- -->{(i + 1)}}</label> </view> </view> </view> <!-- Turntable go button --> <view class="activity-bacg-zhuanpan-btn" @click="subActivity"> <image src="../../static/zp-go.png"></image> </view> </view> </view> </view> </view> <!-- The result box that pops up after the lottery results --> <view class="activity-result" v-if="showResult"> <view class="activity-result-con"> <image mode="widthFix" src="../../static/zp-result.png"></image> <view class="activity-result-text"> <view>1230 yuan cash discount coupon</view> <view>A total of 10 coupons with a face value of 123 yuan</view> </view> <view class="activity-result-btn"> <button class="medium" type="round" @click="goIndex">Use now</button> </view> </view> </view>
js code
<script> export default {<!-- --> components: {<!-- --> headers, }, data() {<!-- --> return {<!-- --> count: 10, //How many parts should the circle be divided into? The length can be taken from the data list returned by the interface. index: 2, //The coordinates of the current winning number rotate: '', //The rotation angle of the turntable after winning the prize isRotate: false, num: 3, //The wheel rotates for 3 seconds before locating the winning position showResult: false, } }, methods: {<!-- --> subActivity() {<!-- --> this.isRotate = true this.getDjs(); }, getDjs() {<!-- --> var that = this; if (that.num > 0) {<!-- --> setTimeout(() => {<!-- --> that.num--; that.getDjs(); }, 1000) } else {<!-- --> that.num = 3; that.isRotate = false; // Calculation of rotation and positioning of the first half of the data: 360 degrees - the deg of the current winning result - the extra deg if (that.index < (that.count / 2)) {<!-- --> that.rotate = 360 - ((360 / that.count) * (that.index)) - (360 / that.count / 2); } // Calculation of rotation and positioning of the second half of the data: 360 degrees - the deg of the current winning result + the extra deg if (that.index >= (that.count / 2)) {<!-- --> that.rotate = 360 - ((360 / that.count) * (that.index + 1)) + (360 / that.count / 2); } that.showResult = true; } } } } </script>
<style> .activity-index {<!-- --> width: 100%; margin-top: 80px; } .activity-con {<!-- --> width: 100%; } .activity-bacg {<!-- --> width: 100%; position: relative; } .activity-bacg-img {<!-- --> width: 100%; } .activity-bacg-zhuanpan {<!-- --> width: 260px; position: absolute; top: 32%; left: 50%; transform: translate(-50%, 0); } .activity-bacg-zhuanpan-bg {<!-- --> width: 100%; position: relative; } .activity-bacg-zhuanpan-bg image {<!-- --> width: 100%; } /* Bisector circle */ .circle-left {<!-- --> width: 115px; height: 230px; border-radius: 0px 115px 115px 0px; position: absolute; right: 0; transform-origin: 0 50%; } .circle-left label {<!-- --> display: inline-block; text-indent: 0; margin-top: 36px; font-size: 14px; line-height: 12px; transform: rotate(109deg); color: #FF5722; font-weight: 500; } .circle-right {<!-- --> width: 115px; height: 230px; border-radius: 115px 0px 0px 115px; position: absolute; right: 0; transform-origin: 100% 50%; } .circle-right label {<!-- --> display: inline-block; text-indent: 0; margin-top: 36px; font-size: 14px; line-height: 12px; transform: rotate(66deg); color: #FF5722; font-weight: 500; margin-right: 0px; } #circle0 {<!-- --> width: 230px; height: 230px; border-radius: 115px; background-color: white; position: absolute; transform: rotate(-22.5deg); left: 15px; top: 15px; transform: rotate(36deg); } #left {<!-- --> clip: rect(0px 115px 230px 0px); position: absolute; right: 0px; width: 115px; height: 230px; overflow: hidden; text-indent: -2px; } #right {<!-- --> clip: rect(0px 115px 230px 0px); position: absolute; left: 0px; width: 115px; height: 230px; overflow: hidden; text-align: right; } /* Turntable button */ .activity-bacg-zhuanpan-btn {<!-- --> position: absolute; width: 60px; height: 80px; top: 45%; left: 50%; transform: translate(-50%, -50%); } .activity-bacg-zhuanpan-btn image {<!-- --> width: 100%; height: 100%; } /* Animation */ @keyframes rotation {<!-- --> from {<!-- --> transform: rotate(0deg); } to {<!-- --> transform: rotate(360deg); } } .rotate {<!-- --> animation: rotation .4s infinite linear; } /* Winning results */ .activity-result {<!-- --> position: fixed; width: 100%; height: 100%; background-color: #ffffff7a; top: 0; left: 0; } .activity-result-con {<!-- --> position: absolute; width: 70%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .activity-result-con image {<!-- --> width: 100%; } .activity-result-text {<!-- --> position: absolute; top: 35%; text-align: center; width: 100%; font-size: 12px; color: #666; } .activity-result-text view:first-child {<!-- --> color: #b4350d; font-weight: 600; font-size: 16px; margin-bottom: 10px; } .activity-result-btn {<!-- --> position: absolute; bottom: 50px; width: 100%; text-align: center; } .activity-result-btn button {<!-- --> background-color: #fdcc83; border: 0; color: #8f3c00; } /* cpd sharing form */ .activity-bacg-share {<!-- --> width: 260px; position: absolute; top: 32%; left: 50%; transform: translate(-50%, 0); } .activity-bacg-share-title {<!-- --> margin-bottom: 10px; } </style>