turntable.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778
  1. <template>
  2. <view class="page" style="height:100vh">
  3. <!-- #ifdef MP-WEIXIN -->
  4. <image class="turnTable-home" @click="getHome" src="../../static/home.png"></image>
  5. <!-- #endif -->
  6. <image class="turnTable-bg" mode="aspectFill" src="https://zxzhdc.zx-xcx.com/dining/turnTable-bg.png"></image>
  7. <view class="header-t">
  8. 幸运大转盘
  9. </view>
  10. <view class="main flex-y-center">
  11. <view class="canvas-container flex-center"
  12. style="background-image: url(https://zxzhdc.zx-xcx.com/dining/canvas-container.png);">
  13. <view class="canvas-container-home">
  14. <view :animation="animationData"
  15. :class="is_anim==1?'animationintel':is_anim==2?'animationintel_amd':''" class="canvas-content"
  16. id="zhuanpano">
  17. <view class="canvas-line">
  18. <view class="canvas-litem" v-for="(item,index1) in awardsList" :key="index1"
  19. :style="[{transform:'rotate('+item.lineTurn+')'}]"></view>
  20. </view>
  21. <view class="canvas-list">
  22. <view class="canvas-item" :style="[{zIndex:index2}]" v-for="(iteml,index2) in awardsList"
  23. :key="index2">
  24. <view class="canvas-item-text" :style="[{transform:'rotate('+iteml.turn+')'}]">
  25. <text class="text-1">{{iteml.award}}</text>
  26. <!-- <image class="canvas-item-text-img" src="../../static/xiaolian.png"
  27. v-if="iteml.type ==0"></image> -->
  28. <!-- <image v-else class="canvas-item-text-img" src="../../static/youhuiquan.png">
  29. </image> -->
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. <view class="canvas-btn flex-center">
  35. <image src="https://zxzhdc.zx-xcx.com/dining/zheng.png"></image>
  36. </view>
  37. </view>
  38. </view>
  39. </view>
  40. <view class="turnTable-btn">
  41. <view class="turnTable-btn-wd flex-center">
  42. <image class="turnTable-btn-icon" src="../../static/btn.png"></image>
  43. <view v-if="!is_tab" class="turnTable-btn-cj flex-center" @click="playReward">
  44. 立即抽奖
  45. </view>
  46. <view v-else class="turnTable-btn-cj flex-center" @click="stopDraw">
  47. 停止抽奖 <block v-if="is_stop">({{time_out+'s'}})</block>
  48. </view>
  49. </view>
  50. </view>
  51. <view class="turnTable-tip">
  52. 注:中奖后请找商家领取礼品哦
  53. </view>
  54. <view class='main-content flex-center' v-if="showShareModal">
  55. <view class="share-modal">
  56. <view class='modal-box-type1' style="width: 500rpx;" v-if="skip.skip_type==0">
  57. <view class='modal-text'>{{hear_title}}</view>
  58. </view>
  59. <view class='modal-box-type1' v-if="skip.skip_type==1">
  60. <view class='modal-text'>{{hear_title}}</view>
  61. <view class='modal-text'> <text>添加微信了解更多优惠</text></view>
  62. <image class="modal-img" @click="previewImage" :src="URL+skip.group_qrcode"></image>
  63. <view class="modal-box-tip">
  64. <!-- #ifdef MP-WEIXIN -->
  65. 请点击图片,保存图片识别
  66. <!-- #endif -->
  67. <!-- #ifdef MP-ALIPAY -->
  68. 请点击图片,进行截图识别添加
  69. <!-- #endif -->
  70. </view>
  71. </view>
  72. <view class='modal-box-type2' v-if="skip.skip_type==2"
  73. style='background-image: url(https://www.zx-app.cn/addons/zjhj_mall/core/web/statics/images/fxhb/share_modal_bg.png)'>
  74. <view class='modal-text' :style="'margin-bottom:'+(is_hear==2?'80rpx':'32rpx')">{{hear_title}}
  75. </view>
  76. <view class='modal-text'> <text>{{is_hear==1?'前往了解更多优惠':''}}</text></view>
  77. <view @click="goTo" class='flex flex-row flex-x-center hongbao-info-btn'>
  78. <view class='flex-y-center'>{{is_hear==1?'前往了解':'确定'}}</view>
  79. </view>
  80. </view>
  81. <view @tap='closeShareModal' class='modal-close'>
  82. <image :src='page_img.close'></image>
  83. </view>
  84. </view>
  85. </view>
  86. </view>
  87. </template>
  88. <script>
  89. import {
  90. mapState,
  91. mapMutations,
  92. mapGetters
  93. } from 'vuex'
  94. let hideLoading = true;
  95. export default {
  96. data() {
  97. return {
  98. URL: getApp().globalData.URL,
  99. bg_img: 'https://zxzhdc.zx-xcx.com/dining/circle1.png',
  100. awardsConfig: {
  101. chance: true, //是否有抽奖机会
  102. list: [], //奖品列表
  103. },
  104. background: "",
  105. awardsList: {},
  106. animationData: {},
  107. lotteryNum: 0,
  108. is_anim: 0,
  109. is_tab: false,
  110. runDeg: 0,
  111. is_stop: false,
  112. page_img: {
  113. wechat: "https://www.zx-app.cn/addons/zjhj_mall/core/web/statics/images/fxhb/wechat.png",
  114. close: "https://www.zx-app.cn/addons/zjhj_mall/core/web/statics/images/fxhb/close.png"
  115. },
  116. showShareModal: false,
  117. time_out: 5,
  118. skip: {},
  119. // store_id: "",
  120. hear_title: "您已参与过活动,谢谢关注!",
  121. is_hear: 1
  122. }
  123. },
  124. computed: {
  125. ...mapState(['setColor', 'store_id', 'userInfo', 'turntable_id']),
  126. dateRange() {
  127. const {
  128. turntable_id,
  129. store_id,
  130. userInfo
  131. } = this;
  132. return {
  133. turntable_id,
  134. store_id,
  135. userInfo,
  136. }
  137. }
  138. },
  139. onLoad: function(e) {
  140. console.log(e, "e")
  141. // 获取奖品列表
  142. if (this.store_id && this.userInfo.id && this.turntable_id) {
  143. this.initdata();
  144. this.copy();
  145. }
  146. uni.setNavigationBarColor({
  147. frontColor: '#ffffff',
  148. backgroundColor: this.$store.state.color,
  149. })
  150. },
  151. watch: {
  152. setColor(val) {
  153. uni.setNavigationBarColor({
  154. frontColor: '#ffffff',
  155. backgroundColor: this.$store.state.color,
  156. })
  157. },
  158. dateRange: {
  159. handler(val) {
  160. console.log(val, "val")
  161. if (val.store_id && val.turntable_id && val.userInfo.id) {
  162. this.initdata();
  163. this.copy();
  164. }
  165. },
  166. deep: true,
  167. },
  168. },
  169. methods: {
  170. /**
  171. * @param 需结合实体大转盘
  172. */
  173. copy() {
  174. if (getApp().globalData.isApp) {
  175. this.$http.request('xcx/funeng', {
  176. store_id: this.store_id,
  177. }, "", "", hideLoading).then(res => {
  178. getApp().globalData.isApp = false
  179. let way_power = res.data.way_power;
  180. let content = way_power.replace(/<br\s*\/?\s*>/ig, "\n");
  181. // console.log(content)
  182. uni.setClipboardData({
  183. data: content,
  184. success: function (r) {
  185. console.log('success',r);
  186. }
  187. });
  188. // // #ifdef MP-WEIXIN
  189. // wx.showLoading();
  190. // uni.setClipboardData({
  191. // data: content,
  192. // success: (res) => {
  193. // // console.log('赋能:', res)
  194. // wx.hideLoading()
  195. // }
  196. // });
  197. // // #endif
  198. // // #ifdef MP-ALIPAY
  199. // uni.setClipboard({
  200. // text: content,
  201. // success: (res) => {
  202. // // console.log('赋能:', res)
  203. // }
  204. // });
  205. // // #endif
  206. })
  207. }
  208. },
  209. // 预览
  210. previewImage() {
  211. let URL = this.URL + this.skip.group_qrcode;
  212. uni.previewImage({
  213. urls: [URL] // 需要预览的图片http链接列表
  214. })
  215. },
  216. // 跳转其他小程序
  217. goTo() {
  218. // #ifdef MP-WEIXIN
  219. var appId = this.skip.mini_appid,
  220. path = this.skip.mini_pages;
  221. // #endif
  222. // #ifdef MP-ALIPAY
  223. var appId = this.skip.alipay_appid,
  224. path = this.skip.alipay_pages;
  225. // #endif
  226. uni.navigateToMiniProgram({
  227. appId: appId,
  228. path: path,
  229. extraData: {
  230. foo: 'bar'
  231. },
  232. envVersion: 'release',
  233. success(res) {
  234. // 打开成功
  235. }
  236. })
  237. },
  238. closeShareModal() {
  239. this.showShareModal = false;
  240. },
  241. getHome() {
  242. uni.reLaunch({
  243. url: "../index/index"
  244. })
  245. },
  246. // 查看奖品
  247. getmyPrize() {
  248. // let user_token=this.user_token,power_id=this.power_id;
  249. uni.navigateTo({
  250. url: "../coupon/coupon"
  251. })
  252. return;
  253. },
  254. close() {
  255. this.$refs.popup.close();
  256. },
  257. // 初始化抽奖数据
  258. initdata: function(id) {
  259. this.$http.request('activity/getDialData', {
  260. id: this.turntable_id,
  261. user_id: this.userInfo.id,
  262. }, "", "", hideLoading).then(res => {
  263. if (res.code == "200") {
  264. let list = [],
  265. remark = res.data.remark,
  266. obj = {};
  267. this.skip = res.data.skip;
  268. for (let i in remark) {
  269. if (remark[i]) {
  270. list.push({
  271. name: remark[i],
  272. idx: i
  273. })
  274. }
  275. }
  276. obj = {
  277. list: list,
  278. lottery_num: res.data.lottery_num,
  279. }
  280. this.awardsConfig = obj;
  281. this.lotteryNum = obj.lottery_num;
  282. this.awardsConfig.list.forEach(function(element, index) {
  283. element.index = index
  284. })
  285. this.drawAwardRoundel();
  286. }
  287. }).catch((res) => {
  288. console.log(res, "666")
  289. });
  290. },
  291. //画抽奖圆盘
  292. drawAwardRoundel: function() {
  293. var awards = this.awardsConfig.list;
  294. var awardsList = [];
  295. var turnNum = 1 / awards.length * 360;
  296. for (var i = 0; i < awards.length; i++) {
  297. awardsList.push({
  298. turn: i * turnNum + 'deg', //每个奖品块旋转的角度
  299. lineTurn: i * turnNum + turnNum / 2 + 'deg', //奖品分割线的旋转角度
  300. award: awards[i].name, //奖品的名字,
  301. });
  302. }
  303. this.awardsList = awardsList;
  304. },
  305. // 启动转盘
  306. playReward() {
  307. if (this.lotteryNum <= 0) {
  308. this.showShareModal = true;
  309. this.is_hear = 1;
  310. // skip_type 1:进群码 2:小程序
  311. return
  312. }
  313. this.$http.request('activity/startDial', {
  314. id: this.turntable_id,
  315. user_id: this.userInfo.id,
  316. }, "", "", hideLoading).then(res => {
  317. if (res.code == '200') {
  318. this.is_tab = !this.is_tab;
  319. this.is_anim = 1;
  320. }
  321. }).catch((res) => {
  322. uni.showToast({
  323. title: res.message,
  324. icon: "none"
  325. })
  326. })
  327. },
  328. // 暂停转盘
  329. stopDraw() {
  330. if (this.is_stop) {
  331. return
  332. }
  333. let that = this;
  334. this.$http.request('activity/stopDial', {
  335. id: this.turntable_id,
  336. user_id: this.userInfo.id,
  337. }, "", "", hideLoading).then(res => {
  338. console.log(res.data)
  339. if (res.code == '200') {
  340. // 停止秒数,默认5s
  341. var _timer = setInterval(() => {
  342. if (this.time_out <= 0) {
  343. this.time_out = 6;
  344. clearInterval(_timer)
  345. }
  346. this.time_out--
  347. }, 1000)
  348. this.is_stop = true;
  349. var awardIndex = Number(res.data.num - 1); //中奖奖品
  350. var awardsNum = this.awardsConfig.list.length; //奖品列表
  351. var runNum = 1; //旋转周
  352. var duration = 2000; //时长
  353. // 旋转角度
  354. that.runDeg = that.runDeg || 0;
  355. // let preDeg = that.runDeg;
  356. // console.log(awardIndex, awardsNum, "awardIndex")
  357. that.runDeg = that.runDeg + (360 - that.runDeg % 360) + (360 * runNum - awardIndex * (360 /
  358. awardsNum)) + 1
  359. var animationRun = uni.createAnimation({
  360. duration: duration,
  361. timingFunction: 'ease'
  362. })
  363. animationRun.rotate(that.runDeg).step();
  364. that.animationData = animationRun.export();
  365. setTimeout(() => {
  366. this.is_anim = 3;
  367. this.is_tab = !this.is_tab;
  368. this.is_stop = false;
  369. this.lotteryNum = Number(this.lotteryNum) - 1;
  370. this.showShareModal = true;
  371. this.hear_title = res.message;
  372. this.is_hear = 2;
  373. }, 5000)
  374. }
  375. }).catch((res) => {
  376. uni.showToast({
  377. title: res.message,
  378. icon: "none"
  379. })
  380. })
  381. },
  382. }
  383. }
  384. </script>
  385. <style>
  386. page {
  387. width: 100%;
  388. background: #FFFFFF;
  389. overflow-x: hidden;
  390. }
  391. .page {
  392. height: 100%;
  393. /* background: rgb(245,76,102); */
  394. }
  395. .turnTable-home {
  396. position: fixed;
  397. left: 20rpx;
  398. top: 100rpx;
  399. width: 66rpx;
  400. height: 61rpx;
  401. z-index: 999;
  402. }
  403. .main {
  404. height: 100%;
  405. }
  406. .animationintel {
  407. animation: spin 1s linear infinite;
  408. }
  409. @keyframes spin {
  410. 0% {
  411. transform: rotate(0deg);
  412. }
  413. 100% {
  414. transform: rotate(360deg);
  415. }
  416. }
  417. .animationintel_amd {}
  418. .header-t {
  419. position: absolute;
  420. width: 100%;
  421. text-align: center;
  422. font-size: 100rpx;
  423. color: #FFFFFF;
  424. z-index: 4;
  425. top: 150rpx;
  426. left: 0;
  427. font-family: PingFang SC, PingFang SC-Semibold;
  428. }
  429. .page {
  430. height: 100%;
  431. width: 100%;
  432. }
  433. .turnTable-bg {
  434. height: 100%;
  435. width: 100%;
  436. position: absolute;
  437. }
  438. .turnTable-btn {
  439. position: absolute;
  440. width: 100%;
  441. bottom: 8%;
  442. z-index: 99;
  443. }
  444. .turnTable-tip {
  445. position: absolute;
  446. width: 100%;
  447. bottom: 4%;
  448. text-align: center;
  449. font-size: 26rpx;
  450. color: #FFFFFF;
  451. }
  452. .turnTable-btn-wd {
  453. position: relative;
  454. }
  455. .turnTable-btn-cj {
  456. width: 100%;
  457. height: 104rpx;
  458. position: absolute;
  459. top: 0;
  460. left: 0;
  461. text-align: center;
  462. color: #BC333B;
  463. }
  464. .turnTable-btn-icon {
  465. width: 514rpx;
  466. height: 126rpx;
  467. }
  468. /* 转盘 */
  469. .canvas-container {
  470. width: 750upx;
  471. height: 750upx;
  472. background-size: cover;
  473. border-radius: 50%;
  474. position: relative;
  475. }
  476. .canvas-container-home {
  477. position: relative;
  478. width: 600upx;
  479. height: 600upx;
  480. }
  481. .canvas {
  482. width: 100%;
  483. height: 100%;
  484. display: block !important;
  485. border-radius: 50%;
  486. }
  487. .canvas-content {
  488. position: absolute;
  489. left: 0;
  490. top: 0;
  491. z-index: 1;
  492. display: block;
  493. width: 600upx;
  494. height: 600upx;
  495. border-radius: inherit;
  496. }
  497. .canvas-element {
  498. position: relative;
  499. z-index: 1;
  500. width: inherit;
  501. height: inherit;
  502. border-radius: 50%;
  503. }
  504. .canvas-list {
  505. position: absolute;
  506. left: 0;
  507. top: 0;
  508. width: inherit;
  509. height: inherit;
  510. z-index: 9999;
  511. }
  512. .canvas-item {
  513. position: absolute;
  514. left: 0;
  515. top: 0;
  516. width: 100%;
  517. height: 100%;
  518. color: #e4370e;
  519. }
  520. .canvas-item-text {
  521. position: relative;
  522. display: block;
  523. padding-top: 46upx;
  524. margin: 0 auto;
  525. text-align: center;
  526. -webkit-transform-origin: 50% 300upx;
  527. transform-origin: 50% 300upx;
  528. display: flex;
  529. flex-direction: column;
  530. align-items: center;
  531. color: #FB778B;
  532. }
  533. .canvas-item-text text {
  534. font-size: 26rpx;
  535. }
  536. .canvas-item-text-img {
  537. width: 50upx;
  538. height: 50upx;
  539. margin-top: 56upx;
  540. }
  541. .canvas-line {
  542. position: absolute;
  543. left: 0;
  544. top: 0;
  545. width: inherit;
  546. height: inherit;
  547. z-index: 99;
  548. }
  549. .canvas-litem {
  550. position: absolute;
  551. left: 300upx;
  552. top: 0;
  553. width: 3upx;
  554. height: 300upx;
  555. background-color: rgba(228, 55, 14, 0.4);
  556. overflow: hidden;
  557. -webkit-transform-origin: 50% 300upx;
  558. transform-origin: 50% 300upx;
  559. }
  560. /**
  561. * 抽奖按钮
  562. */
  563. .canvas-btn {
  564. position: absolute;
  565. /* left: 228rpx;
  566. top: 199rpx;
  567. z-index: 4;
  568. width: 150rpx;
  569. height: 189rpx; */
  570. left: 163rpx;
  571. top: 155rpx;
  572. z-index: 4;
  573. width: 280rpx;
  574. height: 280rpx;
  575. border-radius: 50%;
  576. background: rgb(253, 92, 66);
  577. border: 4rpx solid rgb(252, 191, 90);
  578. color: #f4e9cc;
  579. line-height: 80rpx;
  580. text-align: center;
  581. font-size: 26rpx;
  582. }
  583. .canvas-btn image {
  584. width: 100%;
  585. height: 80%;
  586. }
  587. .canvas-btn::after {
  588. position: absolute;
  589. display: block;
  590. content: ' ';
  591. left: 100rpx;
  592. top: -66rpx;
  593. width: 0;
  594. height: 0;
  595. overflow: hidden;
  596. border-width: 40upx;
  597. border-style: solid;
  598. border-color: transparent;
  599. border-bottom-color: rgb(253, 92, 66);
  600. }
  601. /* .canvas-btn.disabled {
  602. pointer-events: none;
  603. background: #b07a7b;
  604. color: #ccc;
  605. }
  606. .canvas-btn.disabled::after {
  607. border-bottom-color: #b07a7b;
  608. }
  609. */
  610. .canvas-btn-table {
  611. color: #A83FDB;
  612. width: 120upx;
  613. text-align: center;
  614. position: absolute;
  615. left: 240upx;
  616. top: 360upx;
  617. font-size: 26upx;
  618. background-color: #FFFFFF;
  619. opacity: 0.9;
  620. }
  621. .main-content {
  622. position: fixed;
  623. top: 0;
  624. left: 0;
  625. background: rgba(0, 0, 0, 0.5);
  626. z-index: 210;
  627. width: 100%;
  628. height: 100%;
  629. transition: 150ms;
  630. }
  631. .share-modal .modal-text {
  632. text-align: center;
  633. color: #888;
  634. margin-bottom: 32rpx;
  635. padding: 0 50rpx;
  636. /* margin-bottom: 80rpx; */
  637. }
  638. .modal-box-type1 {
  639. padding: 40rpx 40rpx;
  640. background-color: #fff;
  641. border-radius: 16rpx;
  642. text-align: center;
  643. width: 85%;
  644. margin: 0 auto;
  645. }
  646. .modal-box-tip {
  647. font-size: 26rpx;
  648. color: #999;
  649. }
  650. .modal-box-type2 {
  651. height: 816rpx;
  652. width: 606rpx;
  653. background-size: 100% 100%;
  654. background-color: #fff;
  655. border-radius: 16rpx;
  656. padding-top: 464rpx;
  657. }
  658. .modal-img {
  659. width: 350rpx;
  660. height: 350rpx;
  661. }
  662. .share-modal .modal-text text {
  663. font-size: 36rpx;
  664. color: #ffc73f;
  665. font-weight: bold;
  666. }
  667. .share-modal .modal-close {
  668. /* padding: 25rpx;
  669. position: fixed;
  670. left: 50%;
  671. margin-left: -50rpx;
  672. top: 50%;
  673. margin-top: 420rpx; */
  674. text-align: center;
  675. padding-top: 19rpx;
  676. }
  677. .share-modal .modal-close image {
  678. width: 70rpx;
  679. height: 70rpx;
  680. }
  681. .hongbao-info-btn {
  682. border-radius: 100px;
  683. height: 88rpx;
  684. border-radius: 999rpx;
  685. text-align: center;
  686. background: #ff5c5c;
  687. color: #fff;
  688. margin: 0 40rpx;
  689. position: relative;
  690. }
  691. .hongbao-info-btn image {
  692. width: 45rpx;
  693. height: 45rpx;
  694. margin-right: 20rpx;
  695. display: block;
  696. }
  697. .hongbao-info-btn .share-btn {
  698. position: absolute;
  699. left: 0;
  700. top: 0;
  701. width: 100%;
  702. height: 100%;
  703. border-radius: inherit;
  704. opacity: 0;
  705. }
  706. .share-btn {
  707. position: absolute;
  708. left: 0;
  709. top: 0;
  710. width: 100%;
  711. height: 100%;
  712. border-radius: inherit;
  713. opacity: 0;
  714. }
  715. </style>