|
@@ -0,0 +1,433 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票开启"></u-navbar>
|
|
|
+ <view class="rolling">
|
|
|
+ <!-- 奖品滚动 -->
|
|
|
+ <view class="rolling-prize">
|
|
|
+ <view ref="rolling" class="rolling-prize-list" :animation="animationData">
|
|
|
+ <view class="rolling-prize-list-item flex" v-for="(item, index) in list" :key="index">
|
|
|
+ <view class="rolling-prize-list-item__items flex">
|
|
|
+ <view class="content flex" v-for="(items, indexs) in item" :key="indexs">
|
|
|
+ <image :src="items.url" mode="aspectFit"></image>
|
|
|
+ <view class="content-title ells">{{ items.title }}</view>
|
|
|
+ <view class="content-price">¥{{ $numberFormat(items.price) }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="rolling-prize-list" :animation="animationData">
|
|
|
+ <view class="rolling-prize-list-item flex" v-for="(item, index) in list" :key="index">
|
|
|
+ <view class="rolling-prize-list-item__items flex">
|
|
|
+ <view class="content flex" v-for="(items, indexs) in item" :key="indexs">
|
|
|
+ <image :src="items.url" mode="aspectFit"></image>
|
|
|
+ <view class="content-title ells">{{ items.title }}</view>
|
|
|
+ <view class="content-price">¥{{ $numberFormat(items.price) }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <view class="rolling-btn flex">
|
|
|
+ <view class="rolling-btn-content flex" :class="{ 'btn-stop': btnIng }" @click="stop">
|
|
|
+ <image src="../../static/ticketBox/ticket_btn_center.png" mode="scaleToFill"></image>
|
|
|
+ <view class="rolling-btn-content-title">停止滚动</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 倒计时 -->
|
|
|
+ <view class="rolling-time flex">
|
|
|
+ <view class="num">{{ num }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import env from '../../config/env.js'
|
|
|
+ import $http from '@/utils/request.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ animationData: {}, // 动画信息
|
|
|
+ num: 8, // 动画倒计时
|
|
|
+ num2: 0, // 动画持续时间
|
|
|
+ time: null, // 定时器
|
|
|
+ list: [
|
|
|
+ [
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ { url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软(Miceosoft)日版Xbox Seies S', price: 2999 },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+
|
|
|
+ btnIng: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ onLoad() {
|
|
|
+ // 创建动画实例
|
|
|
+ this.animation = uni.createAnimation()
|
|
|
+ },
|
|
|
+
|
|
|
+ onUnload() {
|
|
|
+ // 移除动画
|
|
|
+ this.animationData = {}
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ this.running()
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ // 动画开始
|
|
|
+ running() {
|
|
|
+ // #ifdef H5
|
|
|
+ // 获取滚动奖品列表长度
|
|
|
+ this.data = this.$refs.rolling.$el.clientWidth
|
|
|
+ // 调用 step() 来表示一组动画完成
|
|
|
+ this.animation.translateX(-this.data).step({
|
|
|
+ duration: 8000,
|
|
|
+ timingFunction: 'linear'
|
|
|
+ })
|
|
|
+ // export方法导出动画数据
|
|
|
+ this.animationData = this.animation.export()
|
|
|
+ // 倒计时
|
|
|
+ this.time = setInterval(() => {
|
|
|
+ // 开奖倒计时、页面显示
|
|
|
+ this.num--
|
|
|
+ // 记录动画执行时间,停止动画计算移动距离时使用
|
|
|
+ this.num2++
|
|
|
+ if (this.num == 0) {
|
|
|
+ clearInterval(this.time)
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ // 不手动停止动画,自动停止
|
|
|
+ setTimeout(() => {
|
|
|
+ this.stop()
|
|
|
+ }, 8000);
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ // 元素详细信息
|
|
|
+ uni.createSelectorQuery().in(this).select(".rolling-prize-list").boundingClientRect(info => {
|
|
|
+ this.data = info.width
|
|
|
+ // 调用 step() 来表示一组动画完成
|
|
|
+ this.animation.translateX(-this.data).step({
|
|
|
+ duration: 8000,
|
|
|
+ timingFunction: 'linear'
|
|
|
+ })
|
|
|
+ // export方法导出动画数据
|
|
|
+ this.animationData = this.animation.export()
|
|
|
+ // 倒计时
|
|
|
+ this.time = setInterval(() => {
|
|
|
+ // 开奖倒计时、页面显示
|
|
|
+ this.num--
|
|
|
+ // 记录动画执行时间,停止动画计算移动距离时使用
|
|
|
+ this.num2++
|
|
|
+ if (this.num == 0) {
|
|
|
+ clearInterval(this.time)
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ }).exec();
|
|
|
+
|
|
|
+ // 不手动停止动画,自动停止
|
|
|
+ setTimeout(() => {
|
|
|
+ this.num = 0
|
|
|
+ this.stop()
|
|
|
+ }, 8000);
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+
|
|
|
+ // 停止动画
|
|
|
+ stop() {
|
|
|
+ // 获取屏幕距离,用于计算停止动画移动距离计算
|
|
|
+ let screenWidth = null
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: function(res) {
|
|
|
+ screenWidth = res.screenWidth;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.btnIng = true
|
|
|
+ /**
|
|
|
+ * 0秒:下标4
|
|
|
+ * 1秒:下标6
|
|
|
+ * 2秒:下标8
|
|
|
+ * 3秒:下标10
|
|
|
+ * 4秒:下标12
|
|
|
+ * 5秒:下标14
|
|
|
+ * 6秒:下标16
|
|
|
+ * 7秒:下标2
|
|
|
+ * 8秒:下标2
|
|
|
+ * */
|
|
|
+
|
|
|
+ clearInterval(this.time)
|
|
|
+ this.animationData = {}
|
|
|
+ if (this.num2 == 0) {
|
|
|
+ this.list[3][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
|
|
|
+ } else if (this.num2 == 1) {
|
|
|
+ this.list[5][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
|
|
|
+ } else if (this.num2 == 2) {
|
|
|
+ this.list[7][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
|
|
|
+ } else if (this.num2 == 3) {
|
|
|
+ this.list[9][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
|
|
|
+ } else if (this.num2 == 4) {
|
|
|
+ this.list[11][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
|
|
|
+ } else if (this.num2 == 5) {
|
|
|
+ this.list[13][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
|
|
|
+ } else if (this.num2 == 6) {
|
|
|
+ this.list[15][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
|
|
|
+ } else if (this.num2 == 7) {
|
|
|
+ // this.list[1][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
|
|
|
+ this.$set(this.list[1][1], 'url', 'https://cdn.uviewui.com/uview/album/4.jpg')
|
|
|
+ console.log(this.list[1][1]);
|
|
|
+ } else if (this.num2 == 8) {
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ // this.list[1][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
|
|
|
+ this.$set(this.list[1][1], 'url', 'https://cdn.uviewui.com/uview/album/4.jpg')
|
|
|
+ // #endif
|
|
|
+ // #ifdef H5
|
|
|
+ this.$set(this.list[3][1], 'url', 'https://cdn.uviewui.com/uview/album/4.jpg')
|
|
|
+ console.log(this.list[3][1]);
|
|
|
+ // this.list[3][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
|
|
|
+ // #endif
|
|
|
+ }
|
|
|
+ // #ifdef H5
|
|
|
+ /**
|
|
|
+ * 根据动画时间移动到指定位置
|
|
|
+ * this.data / 8 :动画平均移动距离
|
|
|
+ * this.num2 : 动画执行时间
|
|
|
+ * screenWidth * 3 :移动3个屏幕距离
|
|
|
+ */
|
|
|
+ this.animation.translateX(-(this.data / 8 * this.num2 + screenWidth * 3)).step({
|
|
|
+ duration: 4000,
|
|
|
+ timingFunction: 'ease'
|
|
|
+ })
|
|
|
+ this.animationData = this.animation.export()
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ uni.createSelectorQuery().in(this).select(".rolling-prize-list").boundingClientRect(info => {
|
|
|
+ this.data = info.width
|
|
|
+ this.animation.translateX(-(this.data / 8 * this.num2 + screenWidth * 3)).step({
|
|
|
+ duration: 4000,
|
|
|
+ timingFunction: 'ease'
|
|
|
+ })
|
|
|
+ this.animationData = this.animation.export()
|
|
|
+ }).exec();
|
|
|
+ // #endif
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .rolling {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 44px);
|
|
|
+ background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/prize_bkg1.png) center center no-repeat;
|
|
|
+ background-size: 100vw calc(100vh - 44px);
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ // 奖品滚动
|
|
|
+ &-prize {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 30vh;
|
|
|
+ height: 28vh;
|
|
|
+ background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/prize_bkg2.png) center center no-repeat;
|
|
|
+ background-size: 100vw 28vh;
|
|
|
+ margin-bottom: 42rpx;
|
|
|
+
|
|
|
+ &-list {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 76rpx;
|
|
|
+ height: calc(100% - 76rpx);
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ &__items {
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100%;
|
|
|
+ .content {
|
|
|
+ flex-direction: column;
|
|
|
+ width: 30%;
|
|
|
+ height: 85%;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 60%;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 34rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-price {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 26rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // .content:nth-child(2) {
|
|
|
+ // justify-content: flex-start;
|
|
|
+ // color: #333;
|
|
|
+
|
|
|
+ // image {
|
|
|
+ // width: 100%;
|
|
|
+ // height: 60%;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .content-title {
|
|
|
+ // font-weight: bold;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .content-price {
|
|
|
+ // font-weight: bold;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 按钮
|
|
|
+ &-btn {
|
|
|
+ height: 160rpx;
|
|
|
+ margin-bottom: 36rpx;
|
|
|
+
|
|
|
+ &-content {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 486rpx;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ position: absolute;
|
|
|
+ top: 30rpx;
|
|
|
+ font-size: 72rpx;
|
|
|
+ font-family: YouSheBiaoTiHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 72rpx;
|
|
|
+ opacity: 0.99;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-stop {
|
|
|
+ animation: scaleBtn 0.2s linear;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 放大缩小动画
|
|
|
+ @keyframes scaleBtn {
|
|
|
+ from {
|
|
|
+ transform: scale(0.9);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 倒计时
|
|
|
+ &-time {
|
|
|
+ .num {
|
|
|
+ font-size: 110rpx;
|
|
|
+ font-family: YouSheBiaoTiHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 110rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|