eggs.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654
  1. <template>
  2. <view class="page">
  3. <view class="pages">
  4. <image class="page-bg" src="../../merchant/static/images/darw/FoIzpLTMwSQZDcJYrL_FD_07iBte.png" mode=""></image>
  5. <image class="page-title animate_top_down" src="../../merchant/static/images/darw/FrKRY-mHF7fQmkO3lUQjWRCDlCRI.png" mode=""></image>
  6. <image class="page-round" src="../../merchant/static/images/darw/Fv1xujnIn1r7XecrvEc-Mp9dqM4C.png" mode=""></image>
  7. <image class="page-bage" src="../../merchant/static/images/darw/bage.png" mode=""></image>
  8. <image class="page-tai" src="../../merchant/static/images/darw/FrnXmarfaxXY9i3FCkZGuQJyR6Rj.png" mode=""></image>
  9. <!-- <image src="../../merchant/static/images/darw/musicIocn.png" id="music" class="music" /> -->
  10. <image @click="getmyPrize" class="page-my" src="../../merchant/static/images/darw/FltcHBBH8X84Uzs5llLo_pGBnuvv.png" />
  11. </view>
  12. <view class="header">
  13. <view class="header-title">
  14. <view class="left">
  15. 次数:<text style="color: #E4431A;">{{chishu<=0?0:chishu}}</text>
  16. </view>
  17. <view class="right" @click="bindrule">
  18. 规则 >
  19. </view>
  20. </view>
  21. </view>
  22. <view class="egg-content">
  23. <view class="egg-content-pr">
  24. <view class="egg-content-home">
  25. <image v-for="(item,index) of list" :style="'width:'+eggWidth+'px'" :key='index' @click="onHiting(index)"
  26. class="egg"
  27. :src="item.type==2?eggIcon2:eggIcon" mode=""></image>
  28. </view>
  29. </view>
  30. <view class="hammer" v-show="isplay" :style="'top:'+hammerPosY+'px'+';'+'left:'+hammerPosX+'px'">
  31. <image src="../../merchant/static/images/darw/hammer.png"> </image>
  32. </view>
  33. <!-- <view class="hammers" v-if="!isplay" :class="hammerMace ? 'mace' : ''">
  34. <image src="../../merchant/static/images/darw/img-6.png"> </image>
  35. </view> -->
  36. </view>
  37. <uni-popup ref="popup" type="top">
  38. <view class="popup-content">
  39. <image class="page-title" style="height: 500rpx;" src="../../merchant/static/images/darw/core-wrap.png" mode=""></image>
  40. </view>
  41. </uni-popup>
  42. </view>
  43. </template>
  44. <script>
  45. // #ifdef H5
  46. import getWXSign from "@/static/js/config.js";
  47. // #endif
  48. export default {
  49. data() {
  50. return {
  51. list: [{
  52. type: 1
  53. }, {
  54. type: 1
  55. }, {
  56. type: 1
  57. }, ],
  58. hammerMace: false,
  59. hammerPosX: 0,
  60. hammerPosY: 0,
  61. smashingDuration: 1500, // 砸金蛋持续时间,单位 ms
  62. eggCol: 3, // 金蛋列数
  63. eggWidth: 100, // 金蛋大小,单位 rpx
  64. isplay: false,
  65. eggIcon: "../../merchant/static/images/darw/egg_1.png",
  66. eggIcon2: "../../merchant/static/images/darw/egg_2.png",
  67. card_num: "",
  68. chishu: 0,
  69. is_draw: false,
  70. is_hit:true,
  71. content:"",super_id:"",
  72. }
  73. },
  74. onLoad: function(e) {
  75. // 获取奖品列表
  76. function getUrlParam(paraName) {
  77. let url = window.location.href;
  78. var arrObj = url.split("?");
  79. if (arrObj.length > 1) {
  80. var arr;
  81. for (var i = 0; i < arrObj.length; i++) {
  82. arr = arrObj[i].split("=");
  83. console.log(arr)
  84. if (arr != null && arr[0] == paraName) {
  85. return arr[1];
  86. }
  87. }
  88. return "";
  89. } else {
  90. return "";
  91. }
  92. }
  93. this.run();
  94. this.card_num = getUrlParam('card_num');
  95. this.http(getUrlParam('card_num'));
  96. },
  97. onReady() {
  98. const query = wx.createSelectorQuery()
  99. query.select('.egg-content-home').boundingClientRect((res) => {
  100. this.offTop = res.top;
  101. }).exec()
  102. },
  103. methods: {
  104. http(card_num) {
  105. this.request({
  106. url: "funeng/scan",
  107. data: {
  108. card_num: card_num,
  109. },
  110. }).then(res => {
  111. if (res.code == '200') {
  112. this.super_id=res.data.super_id;
  113. this.power_id = res.data.id;
  114. this.content = res.data.way_power.replace(/<br\s*\/?\s*>/ig, "\n");
  115. this.http_rule();
  116. if (res.data.type == 7) {
  117. if(res.data.wx_state==1){
  118. uni.setNavigationBarTitle({
  119. title: res.data.wx_title
  120. });
  121. }
  122. this.wxShare(res);
  123. }
  124. if (uni.getStorageSync("user_token")) {
  125. this.user_token = uni.getStorageSync("user_token");
  126. this.initdata(this.user_token);
  127. } else {
  128. this.isweb(res.data.id);
  129. }
  130. }
  131. }).catch((res) => {
  132. uni.showToast({
  133. title: res.message,
  134. icon: 'none',
  135. duration:5000,
  136. })
  137. });
  138. },
  139. wxShare(res) {
  140. var imgUrl = res.data.wximg_url ? res.data.wximg_url : getApp().globalData.URL + res.data.wx_img;
  141. let super_id=this.super_id;
  142. getWXSign(super_id).then(r => {
  143. console.log(r, "imgURL")
  144. if (r) {
  145. if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
  146. this.$wx.updateAppMessageShareData({
  147. title: res.data.wx_title ? res.data.wx_title : "", // 分享标题
  148. desc: res.data.wx_desc ? res.data.wx_desc : "", // 分享描述
  149. link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  150. imgUrl: imgUrl, // 分享图标
  151. success: (res) => {
  152. // 设置成功
  153. console.log("设置成功", res)
  154. }
  155. })
  156. this.$wx.updateTimelineShareData({
  157. title: res.data.wx_title, // 分享标题
  158. link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  159. imgUrl: imgUrl, // 分享图标
  160. success: (res) => {
  161. // 设置成功
  162. console.log("设置成功", res)
  163. }
  164. })
  165. } else {
  166. // alert("pc")
  167. this.$wx.onMenuShareTimeline({
  168. title: res.data.wx_title, // 分享标题
  169. desc: res.data.wx_desc, // 分享描述
  170. link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  171. imgUrl: imgUrl, // 分享图标
  172. success: (res) => {
  173. // 设置成功
  174. console.log("设置成功", res)
  175. }
  176. })
  177. this.$wx.onMenuShareAppMessage({
  178. title: res.data.wx_title, // 分享标题
  179. desc: res.data.wx_desc, // 分享描述
  180. link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  181. imgUrl: imgUrl, // 分享图标
  182. success: (res) => {
  183. // 设置成功
  184. console.log("设置成功", res)
  185. }
  186. })
  187. }
  188. }
  189. })
  190. },
  191. http_rule() {
  192. this.request({
  193. url: "game/gameRule",
  194. data: {
  195. power_id: this.power_id,
  196. },
  197. is_agent:'member',
  198. }).then(res => {
  199. if (res.code == '200') {
  200. this.rule = res.data;
  201. }
  202. })
  203. },
  204. bindrule(e) {
  205. uni.showModal({
  206. title: '规则说明',
  207. content: this.rule||'',
  208. showCancel: false,
  209. success: function() {
  210. // 置空style 否则动画不生效
  211. }
  212. });
  213. },
  214. // 公众号授权
  215. isweb(id) {
  216. function GetRequest() {
  217. var url = location.search; //获取url中"?"符后的字串
  218. var theRequest = new Object();
  219. if (url.indexOf("?") != -1) {
  220. //判断是否有参数
  221. var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
  222. var strs = str.split("&");
  223. console.log(strs)
  224. for (var i = 0; i < strs.length; i++) {
  225. theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
  226. }
  227. }
  228. return theRequest;
  229. }
  230. if (GetRequest().code) {
  231. //发起网络请求
  232. this.request({
  233. url: "wechat/webLogin",
  234. data: {
  235. code: GetRequest().code,
  236. type:3,
  237. },
  238. is_agent:'member',
  239. }).then(res => {
  240. console.log(res, "res")
  241. this.user_token = res.data.token;
  242. uni.setStorageSync("user_token", res.data.token)
  243. this.initdata(res.data.token)
  244. }).catch((res) => {
  245. console.log("message", res)
  246. if (res.message == "获取openid失败") {
  247. return
  248. }
  249. uni.showToast({
  250. title: res.message,
  251. icon: 'none'
  252. })
  253. });
  254. } else {
  255. this.gzhurl(id);
  256. }
  257. },
  258. gzhurl(id) {
  259. this.request({
  260. url: "wechat/getLoginUrl",
  261. data: {
  262. type: 3,
  263. power_id: id,
  264. card_num: this.card_num,
  265. super_id:this.super_id,
  266. },
  267. is_agent:'member',
  268. }).then(res => {
  269. if (res.data.url) {
  270. window.location.href = res.data.url
  271. }
  272. }).catch((res) => {
  273. console.log("message", res)
  274. });
  275. },
  276. // 查看奖品
  277. // 初始化抽奖数据
  278. initdata: function(token) {
  279. let that = this;
  280. this.request({
  281. url: "game/prizeList",
  282. data: {
  283. card_num:this.card_num,
  284. token,
  285. },
  286. is_agent:'member',
  287. }).then(res => {
  288. console.log(res, "res")
  289. if (res.code === '200') {
  290. that.chishu = res.data.luckdraw;
  291. }
  292. }).catch((res) => {
  293. if(res.code==1004){
  294. uni.removeStorageSync("user_token")
  295. this.gzhurl(this.power_id);
  296. }else{
  297. uni.showToast({
  298. title: res.message,
  299. icon: 'none'
  300. })
  301. }
  302. });
  303. },
  304. getmyPrize() {
  305. let user_token = this.user_token,
  306. power_id = this.power_id;
  307. uni.navigateTo({
  308. url: `./prize?token=${user_token}&power_id=${power_id}`
  309. })
  310. return;
  311. },
  312. onHiting: function onHiting(index) {
  313. if (this.chishu <= 0) {
  314. uni.showToast({
  315. title: '次数已经用完',
  316. icon: 'none'
  317. })
  318. return
  319. }
  320. if(!this.is_hit){
  321. return
  322. }
  323. this.is_hit=false;
  324. this.chishu = this.chishu - 1;
  325. setTimeout(() => {
  326. this.isplay = false;
  327. this.list[index].type = 2;
  328. this.playReward();
  329. }, 1000)
  330. this.isplay = true;
  331. var x = ((wx.getSystemInfoSync().windowWidth - this.eggWidth * 3) / 2) + (this.eggWidth * index) - 50;
  332. this.hammerPosX = x;
  333. this.hammerPosY = this.offTop - 80 - 45;
  334. this.copy();
  335. },
  336. copy(e) {
  337. let content = this.content;
  338. if (!document.queryCommandSupported('copy')) {
  339. // 不支持
  340. return false
  341. }
  342. let textarea = document.createElement("textarea")
  343. textarea.value = content
  344. textarea.readOnly = "readOnly"
  345. document.body.appendChild(textarea)
  346. textarea.select() // 选择对象
  347. textarea.setSelectionRange(0, content.length) //核心
  348. let result = document.execCommand("copy") // 执行浏览器复制命令
  349. textarea.remove();
  350. return result
  351. },
  352. run: function run() {
  353. if (!this.hammerTimer) {
  354. this.hammerTimer = this.maceAnim(400);
  355. }
  356. },
  357. maceAnim: function maceAnim(ts) {
  358. var _this2 = this;
  359. return setInterval(function() {
  360. _this2.hammerMace = !_this2.hammerMace;
  361. }, ts);
  362. },
  363. playReward: function() {
  364. var that = this
  365. this.request({
  366. // url: "Youxifuneng/getPrize",
  367. // data: {
  368. // token: this.user_token,
  369. // power_id: this.power_id,
  370. // },
  371. url: "game/getPrize",
  372. data: {
  373. token: this.user_token,
  374. power_id: this.power_id,
  375. },
  376. is_agent:'member',
  377. showLoading:true,
  378. }).then(res => {
  379. console.log(res, "res")
  380. if (res.code === '200') {
  381. if ("谢谢参与" != res.data.title) {
  382. this.$refs.popup.open();
  383. this.is_draw = true;
  384. }else{
  385. uni.showToast({
  386. title:"很遗憾,没中奖!",
  387. image: '../../merchant/static/images/darw/yh.png',
  388. })
  389. }
  390. setTimeout(()=>{
  391. this.list=[
  392. {
  393. type: 1
  394. }, {
  395. type: 1
  396. }, {
  397. type: 1
  398. }, ];
  399. this.is_hit=true;
  400. },2e3)
  401. }
  402. }).catch((res) => {
  403. uni.showToast({
  404. title: res.message,
  405. icon: 'none'
  406. })
  407. });
  408. },
  409. }
  410. }
  411. </script>
  412. <style lang="scss">
  413. page {
  414. width: 100%;
  415. height: 100%;
  416. }
  417. .popup-content {
  418. width: 100%;
  419. margin-top: 200rpx;
  420. text-align: center;
  421. }
  422. .header {
  423. display: flex;
  424. flex-direction: column;
  425. align-items: center;
  426. justify-content: center;
  427. /* height: 246upx; */
  428. padding-top: 48upx;
  429. padding-bottom: 40upx;
  430. box-sizing: border-box;
  431. position: relative;
  432. z-index: 3;
  433. }
  434. .header-title {
  435. width: 100%;
  436. height: 60upx;
  437. display: flex;
  438. align-items: center;
  439. padding: 0 48upx;
  440. box-sizing: border-box;
  441. justify-content: space-between;
  442. }
  443. .header-title>view {
  444. padding: 8upx 16upx;
  445. border: 1px solid #d89720;
  446. color: #d89720;
  447. font-size: 28upx;
  448. border-radius: 26upx;
  449. }
  450. .page {
  451. width: 100%;
  452. height: 100%;
  453. overflow: hidden;
  454. }
  455. .pages {
  456. width: 100%;
  457. height: 100%;
  458. position: absolute;
  459. top: 0;
  460. overflow: hidden;
  461. .music {
  462. position: fixed;
  463. z-index: 99;
  464. top: 8%;
  465. left: 5%;
  466. width: 80rpx;
  467. height: 80rpx;
  468. -webkit-animation: music 2s linear infinite;
  469. }
  470. @-webkit-keyframes music {
  471. 0% {
  472. transform: rotate(0deg);
  473. -webkit-transform: rotate(0deg);
  474. }
  475. to {
  476. transform: rotate(-360deg);
  477. -webkit-transform: rotate(-360deg);
  478. }
  479. }
  480. .page-bg {
  481. width: 100%;
  482. height: 215%;
  483. }
  484. .page-title {
  485. width: 100%;
  486. height: 213px;
  487. position: absolute;
  488. top: 80rpx;
  489. left: 0px;
  490. }
  491. .page-round {
  492. width: 100%;
  493. height: 213px;
  494. position: absolute;
  495. top: 180rpx;
  496. left: 0px;
  497. }
  498. .page-bage {
  499. width: 100%;
  500. height: 377px;
  501. position: absolute;
  502. top: 148px;
  503. left: 0px;
  504. -webkit-animation: a_t_d .5s ease-in-out 1;
  505. -webkit-animation-iteration-count: 1;
  506. -webkit-animation-timing-function: ease-in-out;
  507. -webkit-animation-delay: 0s
  508. }
  509. .page-my {
  510. width: 60px;
  511. height: 60px;
  512. position: absolute;
  513. bottom: 249px;
  514. right: 7px;
  515. z-index: 999;
  516. }
  517. .animate_top_down {
  518. -webkit-animation: a_t_d .5s ease-in-out 1;
  519. -webkit-animation-iteration-count: 1;
  520. -webkit-animation-timing-function: ease-in-out;
  521. -webkit-animation-delay: 0s
  522. }
  523. @-webkit-keyframes a_t_d {
  524. 0% {
  525. transform: translateY(-200px)
  526. }
  527. to {
  528. transform: translateY(0px)
  529. }
  530. }
  531. .page-tai {
  532. position: absolute;
  533. bottom: -81px;
  534. left: 0;
  535. width: 100%;
  536. height: 500px;
  537. }
  538. }
  539. .egg-content {
  540. position: relative;
  541. top: 0;
  542. width: 100%;
  543. height: 100%;
  544. overflow: hidden;
  545. .hammers {
  546. -webkit-transform-origin: right bottom;
  547. transform-origin: right bottom;
  548. -webkit-transform: rotate(15deg);
  549. transform: rotate(15deg);
  550. position: absolute;
  551. top: 20px;
  552. right: 0;
  553. image {
  554. width: 80px;
  555. height: 80px;
  556. }
  557. }
  558. .mace {
  559. -webkit-transform: rotate(0deg);
  560. transform: rotate(0deg);
  561. }
  562. .hammer {
  563. position: absolute;
  564. z-index: 10;
  565. width: 6.5rem;
  566. display: block;
  567. max-width: none;
  568. -webkit-animation: hammer 0.5s alternate;
  569. animation: hammer 0.5s alternate;
  570. transform-origin: bottom left;
  571. -webkit-transform-origin: bottom left;
  572. image {
  573. width: 100px;
  574. height: 80px;
  575. }
  576. }
  577. @keyframes hammer {
  578. 50% {
  579. transform: rotate(15deg);
  580. }
  581. }
  582. @-webkit-keyframes hammer {
  583. 50% {
  584. -webkit-transform: rotate(15deg);
  585. }
  586. }
  587. .egg-content-pr {
  588. position: absolute;
  589. bottom: -22px;
  590. width: 100%;
  591. .egg-content-home {
  592. position: relative;
  593. bottom: 125px;
  594. width: 100%;
  595. text-align: center;
  596. .egg {
  597. width: 200rpx;
  598. height: 240rpx;
  599. }
  600. }
  601. }
  602. }
  603. </style>