123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778 |
- <template>
- <view class="page" style="height:100vh">
- <!-- #ifdef MP-WEIXIN -->
- <image class="turnTable-home" @click="getHome" src="../../static/home.png"></image>
- <!-- #endif -->
- <image class="turnTable-bg" mode="aspectFill" src="https://zxzhdc.zx-xcx.com/dining/turnTable-bg.png"></image>
- <view class="header-t">
- 幸运大转盘
- </view>
- <view class="main flex-y-center">
- <view class="canvas-container flex-center"
- style="background-image: url(https://zxzhdc.zx-xcx.com/dining/canvas-container.png);">
- <view class="canvas-container-home">
- <view :animation="animationData"
- :class="is_anim==1?'animationintel':is_anim==2?'animationintel_amd':''" class="canvas-content"
- id="zhuanpano">
- <view class="canvas-line">
- <view class="canvas-litem" v-for="(item,index1) in awardsList" :key="index1"
- :style="[{transform:'rotate('+item.lineTurn+')'}]"></view>
- </view>
- <view class="canvas-list">
- <view class="canvas-item" :style="[{zIndex:index2}]" v-for="(iteml,index2) in awardsList"
- :key="index2">
- <view class="canvas-item-text" :style="[{transform:'rotate('+iteml.turn+')'}]">
- <text class="text-1">{{iteml.award}}</text>
- <!-- <image class="canvas-item-text-img" src="../../static/xiaolian.png"
- v-if="iteml.type ==0"></image> -->
- <!-- <image v-else class="canvas-item-text-img" src="../../static/youhuiquan.png">
- </image> -->
- </view>
- </view>
- </view>
- </view>
- <view class="canvas-btn flex-center">
- <image src="https://zxzhdc.zx-xcx.com/dining/zheng.png"></image>
- </view>
- </view>
- </view>
- </view>
- <view class="turnTable-btn">
- <view class="turnTable-btn-wd flex-center">
- <image class="turnTable-btn-icon" src="../../static/btn.png"></image>
- <view v-if="!is_tab" class="turnTable-btn-cj flex-center" @click="playReward">
- 立即抽奖
- </view>
- <view v-else class="turnTable-btn-cj flex-center" @click="stopDraw">
- 停止抽奖 <block v-if="is_stop">({{time_out+'s'}})</block>
- </view>
- </view>
- </view>
- <view class="turnTable-tip">
- 注:中奖后请找商家领取礼品哦
- </view>
- <view class='main-content flex-center' v-if="showShareModal">
- <view class="share-modal">
- <view class='modal-box-type1' style="width: 500rpx;" v-if="skip.skip_type==0">
- <view class='modal-text'>{{hear_title}}</view>
- </view>
- <view class='modal-box-type1' v-if="skip.skip_type==1">
- <view class='modal-text'>{{hear_title}}</view>
- <view class='modal-text'> <text>添加微信了解更多优惠</text></view>
- <image class="modal-img" @click="previewImage" :src="URL+skip.group_qrcode"></image>
- <view class="modal-box-tip">
- <!-- #ifdef MP-WEIXIN -->
- 请点击图片,保存图片识别
- <!-- #endif -->
- <!-- #ifdef MP-ALIPAY -->
- 请点击图片,进行截图识别添加
- <!-- #endif -->
- </view>
- </view>
- <view class='modal-box-type2' v-if="skip.skip_type==2"
- style='background-image: url(https://www.zx-app.cn/addons/zjhj_mall/core/web/statics/images/fxhb/share_modal_bg.png)'>
- <view class='modal-text' :style="'margin-bottom:'+(is_hear==2?'80rpx':'32rpx')">{{hear_title}}
- </view>
- <view class='modal-text'> <text>{{is_hear==1?'前往了解更多优惠':''}}</text></view>
- <view @click="goTo" class='flex flex-row flex-x-center hongbao-info-btn'>
- <view class='flex-y-center'>{{is_hear==1?'前往了解':'确定'}}</view>
- </view>
- </view>
- <view @tap='closeShareModal' class='modal-close'>
- <image :src='page_img.close'></image>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import {
- mapState,
- mapMutations,
- mapGetters
- } from 'vuex'
- let hideLoading = true;
- export default {
- data() {
- return {
- URL: getApp().globalData.URL,
- bg_img: 'https://zxzhdc.zx-xcx.com/dining/circle1.png',
- awardsConfig: {
- chance: true, //是否有抽奖机会
- list: [], //奖品列表
- },
- background: "",
- awardsList: {},
- animationData: {},
- lotteryNum: 0,
- is_anim: 0,
- is_tab: false,
- runDeg: 0,
- is_stop: false,
- page_img: {
- wechat: "https://www.zx-app.cn/addons/zjhj_mall/core/web/statics/images/fxhb/wechat.png",
- close: "https://www.zx-app.cn/addons/zjhj_mall/core/web/statics/images/fxhb/close.png"
- },
- showShareModal: false,
- time_out: 5,
- skip: {},
- // store_id: "",
- hear_title: "您已参与过活动,谢谢关注!",
- is_hear: 1
- }
- },
- computed: {
- ...mapState(['setColor', 'store_id', 'userInfo', 'turntable_id']),
- dateRange() {
- const {
- turntable_id,
- store_id,
- userInfo
- } = this;
- return {
- turntable_id,
- store_id,
- userInfo,
- }
- }
- },
-
- onLoad: function(e) {
- console.log(e, "e")
- // 获取奖品列表
- if (this.store_id && this.userInfo.id && this.turntable_id) {
- this.initdata();
- this.copy();
- }
- uni.setNavigationBarColor({
- frontColor: '#ffffff',
- backgroundColor: this.$store.state.color,
- })
- },
- watch: {
-
- setColor(val) {
- uni.setNavigationBarColor({
- frontColor: '#ffffff',
- backgroundColor: this.$store.state.color,
- })
- },
-
- dateRange: {
- handler(val) {
- console.log(val, "val")
- if (val.store_id && val.turntable_id && val.userInfo.id) {
- this.initdata();
- this.copy();
- }
- },
- deep: true,
- },
- },
- methods: {
- /**
- * @param 需结合实体大转盘
- */
- copy() {
- if (getApp().globalData.isApp) {
- this.$http.request('xcx/funeng', {
- store_id: this.store_id,
- }, "", "", hideLoading).then(res => {
- getApp().globalData.isApp = false
- let way_power = res.data.way_power;
- let content = way_power.replace(/<br\s*\/?\s*>/ig, "\n");
- // console.log(content)
- uni.setClipboardData({
- data: content,
- success: function (r) {
- console.log('success',r);
- }
- });
- // // #ifdef MP-WEIXIN
- // wx.showLoading();
- // uni.setClipboardData({
- // data: content,
- // success: (res) => {
- // // console.log('赋能:', res)
- // wx.hideLoading()
- // }
- // });
- // // #endif
- // // #ifdef MP-ALIPAY
- // uni.setClipboard({
- // text: content,
- // success: (res) => {
- // // console.log('赋能:', res)
- // }
- // });
- // // #endif
- })
- }
- },
- // 预览
- previewImage() {
- let URL = this.URL + this.skip.group_qrcode;
- uni.previewImage({
- urls: [URL] // 需要预览的图片http链接列表
- })
- },
- // 跳转其他小程序
- goTo() {
- // #ifdef MP-WEIXIN
- var appId = this.skip.mini_appid,
- path = this.skip.mini_pages;
- // #endif
- // #ifdef MP-ALIPAY
- var appId = this.skip.alipay_appid,
- path = this.skip.alipay_pages;
- // #endif
- uni.navigateToMiniProgram({
- appId: appId,
- path: path,
- extraData: {
- foo: 'bar'
- },
- envVersion: 'release',
- success(res) {
- // 打开成功
- }
- })
- },
- closeShareModal() {
- this.showShareModal = false;
- },
- getHome() {
- uni.reLaunch({
- url: "../index/index"
- })
- },
- // 查看奖品
- getmyPrize() {
- // let user_token=this.user_token,power_id=this.power_id;
- uni.navigateTo({
- url: "../coupon/coupon"
- })
- return;
- },
- close() {
- this.$refs.popup.close();
- },
- // 初始化抽奖数据
- initdata: function(id) {
- this.$http.request('activity/getDialData', {
- id: this.turntable_id,
- user_id: this.userInfo.id,
- }, "", "", hideLoading).then(res => {
- if (res.code == "200") {
- let list = [],
- remark = res.data.remark,
- obj = {};
- this.skip = res.data.skip;
- for (let i in remark) {
- if (remark[i]) {
- list.push({
- name: remark[i],
- idx: i
- })
- }
- }
- obj = {
- list: list,
- lottery_num: res.data.lottery_num,
- }
- this.awardsConfig = obj;
- this.lotteryNum = obj.lottery_num;
- this.awardsConfig.list.forEach(function(element, index) {
- element.index = index
- })
- this.drawAwardRoundel();
- }
- }).catch((res) => {
- console.log(res, "666")
- });
- },
- //画抽奖圆盘
- drawAwardRoundel: function() {
- var awards = this.awardsConfig.list;
- var awardsList = [];
- var turnNum = 1 / awards.length * 360;
- for (var i = 0; i < awards.length; i++) {
- awardsList.push({
- turn: i * turnNum + 'deg', //每个奖品块旋转的角度
- lineTurn: i * turnNum + turnNum / 2 + 'deg', //奖品分割线的旋转角度
- award: awards[i].name, //奖品的名字,
- });
- }
- this.awardsList = awardsList;
- },
- // 启动转盘
- playReward() {
- if (this.lotteryNum <= 0) {
- this.showShareModal = true;
- this.is_hear = 1;
- // skip_type 1:进群码 2:小程序
- return
- }
- this.$http.request('activity/startDial', {
- id: this.turntable_id,
- user_id: this.userInfo.id,
- }, "", "", hideLoading).then(res => {
- if (res.code == '200') {
- this.is_tab = !this.is_tab;
- this.is_anim = 1;
- }
- }).catch((res) => {
- uni.showToast({
- title: res.message,
- icon: "none"
- })
- })
- },
- // 暂停转盘
- stopDraw() {
- if (this.is_stop) {
- return
- }
- let that = this;
- this.$http.request('activity/stopDial', {
- id: this.turntable_id,
- user_id: this.userInfo.id,
- }, "", "", hideLoading).then(res => {
- console.log(res.data)
- if (res.code == '200') {
- // 停止秒数,默认5s
- var _timer = setInterval(() => {
- if (this.time_out <= 0) {
- this.time_out = 6;
- clearInterval(_timer)
- }
- this.time_out--
- }, 1000)
- this.is_stop = true;
- var awardIndex = Number(res.data.num - 1); //中奖奖品
- var awardsNum = this.awardsConfig.list.length; //奖品列表
- var runNum = 1; //旋转周
- var duration = 2000; //时长
- // 旋转角度
- that.runDeg = that.runDeg || 0;
- // let preDeg = that.runDeg;
- // console.log(awardIndex, awardsNum, "awardIndex")
- that.runDeg = that.runDeg + (360 - that.runDeg % 360) + (360 * runNum - awardIndex * (360 /
- awardsNum)) + 1
- var animationRun = uni.createAnimation({
- duration: duration,
- timingFunction: 'ease'
- })
- animationRun.rotate(that.runDeg).step();
- that.animationData = animationRun.export();
- setTimeout(() => {
- this.is_anim = 3;
- this.is_tab = !this.is_tab;
- this.is_stop = false;
- this.lotteryNum = Number(this.lotteryNum) - 1;
- this.showShareModal = true;
- this.hear_title = res.message;
- this.is_hear = 2;
- }, 5000)
- }
- }).catch((res) => {
- uni.showToast({
- title: res.message,
- icon: "none"
- })
- })
- },
- }
- }
- </script>
- <style>
- page {
- width: 100%;
- background: #FFFFFF;
- overflow-x: hidden;
- }
- .page {
- height: 100%;
- /* background: rgb(245,76,102); */
- }
- .turnTable-home {
- position: fixed;
- left: 20rpx;
- top: 100rpx;
- width: 66rpx;
- height: 61rpx;
- z-index: 999;
- }
- .main {
- height: 100%;
- }
- .animationintel {
- animation: spin 1s linear infinite;
- }
- @keyframes spin {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
- }
- .animationintel_amd {}
- .header-t {
- position: absolute;
- width: 100%;
- text-align: center;
- font-size: 100rpx;
- color: #FFFFFF;
- z-index: 4;
- top: 150rpx;
- left: 0;
- font-family: PingFang SC, PingFang SC-Semibold;
- }
- .page {
- height: 100%;
- width: 100%;
- }
- .turnTable-bg {
- height: 100%;
- width: 100%;
- position: absolute;
- }
- .turnTable-btn {
- position: absolute;
- width: 100%;
- bottom: 8%;
- z-index: 99;
- }
- .turnTable-tip {
- position: absolute;
- width: 100%;
- bottom: 4%;
- text-align: center;
- font-size: 26rpx;
- color: #FFFFFF;
- }
- .turnTable-btn-wd {
- position: relative;
- }
- .turnTable-btn-cj {
- width: 100%;
- height: 104rpx;
- position: absolute;
- top: 0;
- left: 0;
- text-align: center;
- color: #BC333B;
- }
- .turnTable-btn-icon {
- width: 514rpx;
- height: 126rpx;
- }
- /* 转盘 */
- .canvas-container {
- width: 750upx;
- height: 750upx;
- background-size: cover;
- border-radius: 50%;
- position: relative;
- }
- .canvas-container-home {
- position: relative;
- width: 600upx;
- height: 600upx;
- }
- .canvas {
- width: 100%;
- height: 100%;
- display: block !important;
- border-radius: 50%;
- }
- .canvas-content {
- position: absolute;
- left: 0;
- top: 0;
- z-index: 1;
- display: block;
- width: 600upx;
- height: 600upx;
- border-radius: inherit;
- }
- .canvas-element {
- position: relative;
- z-index: 1;
- width: inherit;
- height: inherit;
- border-radius: 50%;
- }
- .canvas-list {
- position: absolute;
- left: 0;
- top: 0;
- width: inherit;
- height: inherit;
- z-index: 9999;
- }
- .canvas-item {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- color: #e4370e;
- }
- .canvas-item-text {
- position: relative;
- display: block;
- padding-top: 46upx;
- margin: 0 auto;
- text-align: center;
- -webkit-transform-origin: 50% 300upx;
- transform-origin: 50% 300upx;
- display: flex;
- flex-direction: column;
- align-items: center;
- color: #FB778B;
- }
- .canvas-item-text text {
- font-size: 26rpx;
- }
- .canvas-item-text-img {
- width: 50upx;
- height: 50upx;
- margin-top: 56upx;
- }
- .canvas-line {
- position: absolute;
- left: 0;
- top: 0;
- width: inherit;
- height: inherit;
- z-index: 99;
- }
- .canvas-litem {
- position: absolute;
- left: 300upx;
- top: 0;
- width: 3upx;
- height: 300upx;
- background-color: rgba(228, 55, 14, 0.4);
- overflow: hidden;
- -webkit-transform-origin: 50% 300upx;
- transform-origin: 50% 300upx;
- }
- /**
- * 抽奖按钮
- */
- .canvas-btn {
- position: absolute;
- /* left: 228rpx;
- top: 199rpx;
- z-index: 4;
- width: 150rpx;
- height: 189rpx; */
- left: 163rpx;
- top: 155rpx;
- z-index: 4;
- width: 280rpx;
- height: 280rpx;
- border-radius: 50%;
- background: rgb(253, 92, 66);
- border: 4rpx solid rgb(252, 191, 90);
- color: #f4e9cc;
- line-height: 80rpx;
- text-align: center;
- font-size: 26rpx;
- }
- .canvas-btn image {
- width: 100%;
- height: 80%;
- }
- .canvas-btn::after {
- position: absolute;
- display: block;
- content: ' ';
- left: 100rpx;
- top: -66rpx;
- width: 0;
- height: 0;
- overflow: hidden;
- border-width: 40upx;
- border-style: solid;
- border-color: transparent;
- border-bottom-color: rgb(253, 92, 66);
- }
- /* .canvas-btn.disabled {
- pointer-events: none;
- background: #b07a7b;
- color: #ccc;
- }
- .canvas-btn.disabled::after {
- border-bottom-color: #b07a7b;
- }
- */
- .canvas-btn-table {
- color: #A83FDB;
- width: 120upx;
- text-align: center;
- position: absolute;
- left: 240upx;
- top: 360upx;
- font-size: 26upx;
- background-color: #FFFFFF;
- opacity: 0.9;
- }
- .main-content {
- position: fixed;
- top: 0;
- left: 0;
- background: rgba(0, 0, 0, 0.5);
- z-index: 210;
- width: 100%;
- height: 100%;
- transition: 150ms;
- }
- .share-modal .modal-text {
- text-align: center;
- color: #888;
- margin-bottom: 32rpx;
- padding: 0 50rpx;
- /* margin-bottom: 80rpx; */
- }
- .modal-box-type1 {
- padding: 40rpx 40rpx;
- background-color: #fff;
- border-radius: 16rpx;
- text-align: center;
- width: 85%;
- margin: 0 auto;
- }
- .modal-box-tip {
- font-size: 26rpx;
- color: #999;
- }
- .modal-box-type2 {
- height: 816rpx;
- width: 606rpx;
- background-size: 100% 100%;
- background-color: #fff;
- border-radius: 16rpx;
- padding-top: 464rpx;
- }
- .modal-img {
- width: 350rpx;
- height: 350rpx;
- }
- .share-modal .modal-text text {
- font-size: 36rpx;
- color: #ffc73f;
- font-weight: bold;
- }
- .share-modal .modal-close {
- /* padding: 25rpx;
- position: fixed;
- left: 50%;
- margin-left: -50rpx;
- top: 50%;
- margin-top: 420rpx; */
- text-align: center;
- padding-top: 19rpx;
- }
- .share-modal .modal-close image {
- width: 70rpx;
- height: 70rpx;
- }
- .hongbao-info-btn {
- border-radius: 100px;
- height: 88rpx;
- border-radius: 999rpx;
- text-align: center;
- background: #ff5c5c;
- color: #fff;
- margin: 0 40rpx;
- position: relative;
- }
- .hongbao-info-btn image {
- width: 45rpx;
- height: 45rpx;
- margin-right: 20rpx;
- display: block;
- }
- .hongbao-info-btn .share-btn {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- border-radius: inherit;
- opacity: 0;
- }
- .share-btn {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- border-radius: inherit;
- opacity: 0;
- }
- </style>
|