draw.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965
  1. <template>
  2. <view class="conbox">
  3. <view class="container">
  4. <!-- 背景 -->
  5. <image src="../../merchant/static/images/darw/bg.png" class="cont" mode=""></image>
  6. <image src="../../merchant/static/images/darw/caidai.png" class="caidai" mode=""></image>
  7. <view class="header">
  8. <view class="header-title">
  9. <view class="left">
  10. 次数: <text style="color: #E4431A;">{{chishu}}</text>
  11. </view>
  12. <view class="right" @click="getmyPrize">
  13. 我的奖品 >
  14. </view>
  15. </view>
  16. </view>
  17. <view class="main">
  18. <view class="canvas-container">
  19. <view :animation="animationData" class="canvas-content" id="zhuanpano" style="">
  20. <!-- <view :animation="animationData" class="canvas-content" id="zhuanpano" :style="[{transform:'rotate('+runDeg+')'}]"> -->
  21. <!-- <canvas class="canvas" canvas-id="canvas"></canvas> -->
  22. <view class="canvas-line">
  23. <view class="canvas-litem" v-for="(item,index1) in awardsList" :key="index1"
  24. :style="[{transform:'rotate('+item.lineTurn+')'}]"></view>
  25. </view>
  26. <view class="canvas-list">
  27. <view class="canvas-item" :style="[{zIndex:index2}]" v-for="(iteml,index2) in awardsList"
  28. :key="index2">
  29. <view class="canvas-item-text" :style="[{transform:'rotate('+iteml.turn+')'}]">
  30. <text class="text-1">{{iteml.award}}</text>
  31. <image class="canvas-item-text-img" src="../../merchant/static/images/darw/xiaolian.png" v-if="iteml.type ==0"></image>
  32. <image v-else class="canvas-item-text-img" src="../../merchant/static/images/darw/youhuiquan.png"></image>
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. <view @tap="playReward" class="canvas-btn" v-bind:class="btnDisabled">开始 </view>
  38. </view>
  39. </view>
  40. <!-- 现金抽奖 -->
  41. <view class="typecheckbox">
  42. <!-- <view :class="mold==1?'left active':'left'" @click="choosetype(1)">
  43. 幸运抽奖
  44. </view>
  45. <view :class="mold==2?'left active':'left' " @click="choosetype(2)">
  46. 现金抽奖
  47. </view> -->
  48. </view>
  49. <!-- 规则 -->
  50. <view class="guize">
  51. <view class="title">
  52. 规则说明
  53. </view>
  54. <view class="g_item">
  55. {{rule}}
  56. </view>
  57. <!-- <view class="g_item">
  58. 2.用户点击大转盘抽奖按钮,有积分和现金两种方式可参与抽奖,没抽一次消耗1次抽奖机会
  59. </view>
  60. <view class="g_item">
  61. 3.用户获得的奖品,可在我的道具里查看
  62. </view> -->
  63. </view>
  64. <!-- 我的奖品 -->
  65. <view class="shadowbox" v-if="r_flg" @click="closeshadow">
  66. <view class="myrewards" @click.stop="openshadow">
  67. <view class="title">
  68. 我的奖品
  69. </view>
  70. <view class="itembox">
  71. <view class="item" v-for="(items,i) in myPrizelist" :key="i">
  72. <text class="left">{{items.title}}</text>
  73. <text class="right">{{items.createtime}}</text>
  74. </view>
  75. </view>
  76. </view>
  77. </view>
  78. </view>
  79. <uni-popup ref="popup" type="top">
  80. <view class="popup-content">
  81. <image class="page-title"
  82. src="../../merchant/static/images/darw/core-wrap1.png" mode=""></image>
  83. <view class="page-title-text">
  84. <view class="page-title-text1 ">
  85. <text style="font-size: 36rpx;">中奖啦!</text>
  86. <view class="text-2 ft26" style="margin-top: 10rpx;">
  87. 获得{{darw_title}}
  88. </view>
  89. </view>
  90. </view>
  91. <view class="page-title-close" @click="close">
  92. <image src="../../static/images/shanchu.png" mode=""></image>
  93. </view>
  94. </view>
  95. </uni-popup>
  96. </view>
  97. </template>
  98. <script>
  99. // #ifdef H5
  100. import getWXSign from "@/static/js/config.js";
  101. // #endif
  102. export default {
  103. data() {
  104. return {
  105. awardsConfig: {
  106. chance: true, //是否有抽奖机会
  107. lists: [], //奖品列表
  108. },
  109. awardsList: {},
  110. animationData: {},
  111. btnDisabled: '',
  112. thanksarr: [], //存储谢谢参与的索引
  113. chishu: 0,
  114. mold: 1,
  115. r_flg: 0,
  116. myPrizelist: [],
  117. card_num: "",
  118. user_token: '',
  119. power_id: '',
  120. rule:"",
  121. content:"",
  122. darw_title:"",super_id:""
  123. }
  124. },
  125. onLoad: function(e) {
  126. // 获取奖品列表
  127. function getUrlParam(paraName) {
  128. let url = window.location.href;
  129. var arrObj = url.split("?");
  130. if (arrObj.length > 1) {
  131. var arr;
  132. for (var i = 0; i < arrObj.length; i++) {
  133. arr = arrObj[i].split("=");
  134. console.log(arr)
  135. if (arr != null && arr[0] == paraName) {
  136. return arr[1];
  137. }
  138. }
  139. return "";
  140. } else {
  141. return "";
  142. }
  143. }
  144. this.card_num = getUrlParam('card_num');
  145. this.http(getUrlParam('card_num'));
  146. },
  147. onReady: function(e) {
  148. },
  149. methods: {
  150. http(card_num) {
  151. this.request({
  152. url: "funeng/scan",
  153. data: {
  154. card_num: card_num,
  155. },
  156. }).then(res => {
  157. if (res.code == '200') {
  158. this.power_id = res.data.id;
  159. this.super_id=res.data.super_id;
  160. this.content = res.data.way_power.replace(/<br\s*\/?\s*>/ig, "\n");
  161. this.http_rule();
  162. if (res.data.type == 7) {
  163. if(res.data.wx_state==1){
  164. uni.setNavigationBarTitle({
  165. title: res.data.wx_title
  166. });
  167. }
  168. this.wxShare(res);
  169. }
  170. if(uni.getStorageSync("user_token")){
  171. this.user_token=uni.getStorageSync("user_token");
  172. this.initdata(this.user_token);
  173. }else{
  174. this.isweb();
  175. }
  176. }
  177. }).catch((res) => {
  178. uni.showToast({
  179. title: res.message,
  180. icon: 'none',
  181. duration:5000,
  182. })
  183. });
  184. },
  185. wxShare(res) {
  186. var imgUrl = res.data.wximg_url ? res.data.wximg_url : getApp().globalData.URL + res.data.wx_img;
  187. let super_id=this.super_id;
  188. getWXSign(super_id).then(r => {
  189. console.log(r, "imgURL")
  190. if (r) {
  191. if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
  192. this.$wx.updateAppMessageShareData({
  193. title: res.data.wx_title ? res.data.wx_title : "", // 分享标题
  194. desc: res.data.wx_desc ? res.data.wx_desc : "", // 分享描述
  195. link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  196. imgUrl: imgUrl, // 分享图标
  197. success: (res) => {
  198. // 设置成功
  199. console.log("设置成功", res)
  200. }
  201. })
  202. this.$wx.updateTimelineShareData({
  203. title: res.data.wx_title, // 分享标题
  204. link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  205. imgUrl: imgUrl, // 分享图标
  206. success: (res) => {
  207. // 设置成功
  208. console.log("设置成功", res)
  209. }
  210. })
  211. } else {
  212. // alert("pc")
  213. this.$wx.onMenuShareTimeline({
  214. title: res.data.wx_title, // 分享标题
  215. desc: res.data.wx_desc, // 分享描述
  216. link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  217. imgUrl: imgUrl, // 分享图标
  218. success: (res) => {
  219. // 设置成功
  220. console.log("设置成功", res)
  221. }
  222. })
  223. this.$wx.onMenuShareAppMessage({
  224. title: res.data.wx_title, // 分享标题
  225. desc: res.data.wx_desc, // 分享描述
  226. link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  227. imgUrl: imgUrl, // 分享图标
  228. success: (res) => {
  229. // 设置成功
  230. console.log("设置成功", res)
  231. }
  232. })
  233. }
  234. }
  235. })
  236. },
  237. http_rule() {
  238. this.request({
  239. url: "game/gameRule",
  240. data: {
  241. power_id: this.power_id,
  242. token:this.user_token,
  243. },
  244. is_agent:'member',
  245. }).then(res => {
  246. if (res.code == '200') {
  247. this.rule = res.data;
  248. }
  249. })
  250. },
  251. // 公众号授权
  252. isweb() {
  253. let id=this.power_id;
  254. function GetRequest() {
  255. var url = location.search; //获取url中"?"符后的字串
  256. var theRequest = new Object();
  257. if (url.indexOf("?") != -1) {
  258. //判断是否有参数
  259. var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
  260. var strs = str.split("&");
  261. console.log(strs)
  262. for (var i = 0; i < strs.length; i++) {
  263. theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
  264. }
  265. }
  266. return theRequest;
  267. }
  268. if (GetRequest().code) {
  269. //发起网络请求
  270. this.request({
  271. url: "wechat/webLogin",
  272. data: {
  273. code: GetRequest().code,
  274. type:3,
  275. },
  276. is_agent:'member',
  277. }).then(res => {
  278. console.log(res, "res")
  279. this.user_token = res.data.token;
  280. uni.setStorageSync("user_token",res.data.token)
  281. this.initdata(res.data.token)
  282. }).catch((res) => {
  283. console.log("message", res)
  284. if (res.message == "获取openid失败") {
  285. return
  286. }
  287. uni.showToast({
  288. title: res.message,
  289. icon: 'none'
  290. })
  291. });
  292. } else {
  293. this.gzhurl(id);
  294. }
  295. },
  296. gzhurl(id) {
  297. this.request({
  298. url: "wechat/getLoginUrl",
  299. data: {
  300. type: 3,
  301. power_id: id,
  302. card_num: this.card_num,
  303. super_id:this.super_id,
  304. },
  305. is_agent:'member',
  306. }).then(res => {
  307. if (res.data.url) {
  308. window.location.href = res.data.url
  309. }
  310. }).catch((res) => {
  311. console.log("message", res)
  312. });
  313. },
  314. // 查看奖品
  315. getmyPrize() {
  316. let user_token=this.user_token,power_id=this.power_id;
  317. uni.navigateTo({
  318. url:`./prize?token=${user_token}&power_id=${power_id}`
  319. })
  320. return;
  321. },
  322. openshadow() {
  323. this.r_flg = 1
  324. },
  325. closeshadow() {
  326. this.r_flg = 0
  327. },
  328. close(){
  329. this.$refs.popup.close();
  330. },
  331. // 初始化抽奖数据
  332. initdata: function(token) {
  333. let that = this;
  334. this.request({
  335. url: "game/prizeList",
  336. data: {
  337. card_num:this.card_num,
  338. token,
  339. },
  340. is_agent:'member',
  341. }).then(res => {
  342. console.log(res, "res")
  343. if (res.code === '200') {
  344. that.awardsConfig = res.data;
  345. that.chishu = res.data.luckdraw;
  346. // 获取奖品的个数
  347. let awarrlength = that.awardsConfig.lists.length
  348. // push 谢谢参与奖项
  349. for (var i = 0; i <= 3 * 2; i++) {
  350. if (i % 3 == 0) {
  351. that.thanksarr.push(i)
  352. that.awardsConfig.lists.splice(i, 0, {
  353. title: '谢谢参与',
  354. type: 0
  355. });
  356. }
  357. }
  358. // 为每一项追加index属性
  359. that.awardsConfig.lists.forEach(function(element, index) {
  360. element.index = index
  361. })
  362. // 画转盘
  363. that.drawAwardRoundel();
  364. }
  365. }).catch((res) => {
  366. if(res.code==1004){
  367. uni.removeStorageSync("user_token")
  368. this.gzhurl(this.power_id);
  369. }else{
  370. uni.showToast({
  371. title: res.message,
  372. icon: 'none'
  373. })
  374. }
  375. });
  376. },
  377. //画抽奖圆盘
  378. drawAwardRoundel: function() {
  379. // 拿到奖品列表
  380. var awards = this.awardsConfig.lists;
  381. var awardsList = [];
  382. // 每份奖品所占角度
  383. var turnNum = 1 / awards.length * 360; // 文字旋转 turn 值
  384. // 奖项列表
  385. for (var i = 0; i < awards.length; i++) {
  386. awardsList.push({
  387. turn: i * turnNum + 'deg', //每个奖品块旋转的角度
  388. lineTurn: i * turnNum + turnNum / 2 + 'deg', //奖品分割线的旋转角度
  389. award: awards[i].title, //奖品的名字,
  390. type: awards[i].type,
  391. id: awards[i].type,
  392. });
  393. }
  394. this.btnDisabled = this.chishu ? '' : 'disabled';
  395. this.awardsList = awardsList;
  396. },
  397. playReward: function() {
  398. var that = this;
  399. if (this.chishu == 0) {
  400. uni.showToast({
  401. title: '抽奖次数已经用完',
  402. icon: 'none'
  403. })
  404. return
  405. }
  406. this.request({
  407. url: "game/getPrize",
  408. data: {
  409. token: this.user_token,
  410. power_id: this.power_id,
  411. },
  412. is_agent:'member',
  413. }).then(res => {
  414. console.log(res, "res")
  415. if (res.code === '200') {
  416. this.playRewards(res.data);
  417. }
  418. }).catch((res) => {
  419. uni.showToast({
  420. title: res.message,
  421. icon: 'none'
  422. })
  423. });
  424. let content = this.content;
  425. if (!document.queryCommandSupported('copy')) {
  426. // 不支持
  427. return false
  428. }
  429. let textarea = document.createElement("textarea")
  430. textarea.value = content
  431. textarea.readOnly = "readOnly"
  432. document.body.appendChild(textarea)
  433. textarea.select() // 选择对象
  434. textarea.setSelectionRange(0, content.length) //核心
  435. let result = document.execCommand("copy") // 执行浏览器复制命令
  436. textarea.remove();
  437. return result
  438. },
  439. copy(e) {
  440. let content = this.content;
  441. if (!document.queryCommandSupported('copy')) {
  442. // 不支持
  443. return false
  444. }
  445. let textarea = document.createElement("textarea")
  446. textarea.value = content
  447. textarea.readOnly = "readOnly"
  448. document.body.appendChild(textarea)
  449. textarea.select() // 选择对象
  450. textarea.setSelectionRange(0, content.length) //核心
  451. let result = document.execCommand("copy") // 执行浏览器复制命令
  452. textarea.remove();
  453. return result
  454. },
  455. //发起抽奖
  456. playRewards: function(data) {
  457. var that = this
  458. // 获取奖品
  459. var awardIndex = 3
  460. that.awardsList.forEach(function(element, index) {
  461. if (element.award == data.title) {
  462. awardIndex = index
  463. }
  464. })
  465. //中奖index
  466. var awardsNum = that.awardsConfig.lists;
  467. // var awardIndex = 1 || Math.round(Math.random() * (awardsNum.length - 1)); //随机数
  468. var runNum = 4; //旋转8周
  469. var duration = 4000; //时长
  470. // 旋转角度
  471. that.runDeg = that.runDeg || 0;
  472. let preDeg = that.runDeg
  473. that.runDeg = that.runDeg + (360 - that.runDeg % 360) + (360 * runNum - awardIndex * (360 / awardsNum.length)) + 1
  474. //创建动画
  475. if (process.env.VUE_APP_PLATFORM == 'h5') {
  476. // document.styleSheets[0]
  477. document.getElementById('zhuanpano').style = 'animation:rotate_before 4s 0ms ease forwards;'
  478. if (document.styleSheets[0].cssRules.length > 0) {
  479. Array.from(document.styleSheets[0].cssRules).forEach(function(element, index) {
  480. if (element.name == 'rotate_before') {
  481. // 删除上次插入的动画
  482. document.styleSheets[0].deleteRule(index)
  483. }
  484. })
  485. }
  486. // console.log(document.styleSheets[0].cssRules)
  487. // console.log("@keyframes rotate_before{from{ transform: rotate("+preDeg+"deg); }to{ transform: rotate("+that.runDeg+"deg);}}")
  488. // 插入定义的动画
  489. document.styleSheets[0].insertRule("@keyframes rotate_before{from{ transform: rotate(" + preDeg +
  490. "deg); }to{ transform: rotate(" + that.runDeg + "deg);}}", 8);
  491. } else {
  492. var animationRun = uni.createAnimation({
  493. duration: duration,
  494. timingFunction: 'ease'
  495. })
  496. animationRun.rotate(that.runDeg).step();
  497. that.animationData = animationRun.export();
  498. }
  499. that.btnDisabled = 'disabled';
  500. // 中奖提示
  501. var awardsConfig = that.awardsConfig;
  502. var awardType = awardsConfig.lists[awardIndex].type;
  503. that.chishu = that.chishu - 1;
  504. if (awardType != 0) {
  505. setTimeout(function() {
  506. this.$refs.popup.open();
  507. this.darw_title=awardsConfig.lists[awardIndex].title;
  508. that.btnDisabled = '';
  509. setTimeout(function() {
  510. document.getElementById('zhuanpano').style = ''
  511. }, 500)
  512. // uni.showModal({
  513. // title: '恭喜',
  514. // showCancel: false,
  515. // success: function() {
  516. // setTimeout(function() {
  517. // document.getElementById('zhuanpano').style = ''
  518. // }, 500)
  519. // }
  520. // });
  521. }.bind(that), duration);
  522. } else {
  523. setTimeout(function() {
  524. that.btnDisabled = '';
  525. uni.showToast({
  526. title: '很遗憾!没中奖',
  527. image: '../../merchant/static/images/darw/yh.png',
  528. duration:3000
  529. })
  530. setTimeout(function() {
  531. document.getElementById('zhuanpano').style = ''
  532. }, 500)
  533. // uni.showModal({
  534. // title: '很遗憾',
  535. // content: '没中奖 ' + (awardsConfig.lists[awardIndex].title),
  536. // showCancel: false,
  537. // success: function() {
  538. // setTimeout(function() {
  539. // document.getElementById('zhuanpano').style = ''
  540. // }, 500)
  541. // }
  542. // });
  543. }.bind(that), duration);
  544. }
  545. },
  546. }
  547. }
  548. </script>
  549. <style scoped>
  550. .popup-content {
  551. width: 100%;
  552. margin-top: 200rpx;
  553. text-align: center;
  554. position: relative;
  555. }
  556. .page-title {
  557. width: 100%;
  558. height:600rpx;
  559. position: absolute;
  560. top: 80rpx;
  561. left: 0px;
  562. z-index: 500;
  563. }
  564. .page-title-close {
  565. width: 100%;
  566. height:100rpx;
  567. position: absolute;
  568. top: 600rpx;
  569. left: 0px;
  570. z-index: 500;
  571. text-align: center;
  572. }
  573. .page-title-close image{
  574. width: 60rpx;
  575. height:60rpx;
  576. }
  577. .page-title-text{
  578. position: absolute;
  579. top: 375rpx;
  580. z-index: 501;
  581. width: 100%;
  582. text-align: center;
  583. color: yellow;
  584. }
  585. .page-title-text1{
  586. width:300rpx;
  587. margin: 0 auto;
  588. }
  589. .text-1{
  590. display: block;
  591. width: 200rpx;
  592. }
  593. .conbox {
  594. width: 750upx;
  595. height: 100vh;
  596. overflow-x: hidden;
  597. overflow-y: scroll;
  598. }
  599. .container,
  600. image.cont {
  601. width: 750upx;
  602. min-height: 100vh;
  603. height: auto;
  604. position: relative;
  605. }
  606. image.cont {
  607. height: 100%;
  608. position: absolute;
  609. z-index: 0;
  610. }
  611. image.caidai {
  612. position: absolute;
  613. top: 0;
  614. left: 0;
  615. width: 750upx;
  616. height: 1024upx;
  617. }
  618. .header {
  619. display: flex;
  620. flex-direction: column;
  621. align-items: center;
  622. justify-content: center;
  623. /* height: 246upx; */
  624. padding-top: 48upx;
  625. padding-bottom: 40upx;
  626. box-sizing: border-box;
  627. position: relative;
  628. z-index: 3;
  629. }
  630. .header-title {
  631. width: 100%;
  632. height: 60upx;
  633. display: flex;
  634. align-items: center;
  635. padding: 0 48upx;
  636. box-sizing: border-box;
  637. justify-content: space-between;
  638. }
  639. .header-title>view {
  640. padding: 8upx 16upx;
  641. border: 1px solid #d89720;
  642. color: #d89720;
  643. font-size: 28upx;
  644. border-radius: 26upx;
  645. }
  646. /* 转盘 */
  647. .canvas-container {
  648. margin: 0 auto;
  649. position: relative;
  650. width: 600upx;
  651. height: 600upx;
  652. background: url(../../merchant/static/images/darw/circle.png) no-repeat;
  653. background-size: cover;
  654. border-radius: 50%;
  655. }
  656. .canvas {
  657. width: 100%;
  658. height: 100%;
  659. display: block !important;
  660. border-radius: 50%;
  661. }
  662. .canvas-content {
  663. position: absolute;
  664. left: 0;
  665. top: 0;
  666. z-index: 1;
  667. display: block;
  668. width: 600upx;
  669. height: 600upx;
  670. border-radius: inherit;
  671. /* background-clip: padding-box; */
  672. /* background-color: #ffcb3f; */
  673. }
  674. .canvas-element {
  675. position: relative;
  676. z-index: 1;
  677. width: inherit;
  678. height: inherit;
  679. border-radius: 50%;
  680. }
  681. .canvas-list {
  682. position: absolute;
  683. left: 0;
  684. top: 0;
  685. width: inherit;
  686. height: inherit;
  687. z-index: 9999;
  688. }
  689. .canvas-item {
  690. position: absolute;
  691. left: 0;
  692. top: 0;
  693. width: 100%;
  694. height: 100%;
  695. color: #e4370e;
  696. /* text-shadow: 0 1upx 1upx rgba(255, 255, 255, 0.6); */
  697. }
  698. .canvas-item-text {
  699. position: relative;
  700. display: block;
  701. padding-top: 46upx;
  702. margin: 0 auto;
  703. text-align: center;
  704. -webkit-transform-origin: 50% 300upx;
  705. transform-origin: 50% 300upx;
  706. display: flex;
  707. flex-direction: column;
  708. align-items: center;
  709. color: #FB778B;
  710. }
  711. .canvas-item-text text {
  712. font-size: 30upx;
  713. }
  714. .canvas-item-text-img {
  715. width: 50upx;
  716. height: 50upx;
  717. margin-top: 56upx;
  718. }
  719. /* 分隔线 */
  720. .canvas-line {
  721. position: absolute;
  722. left: 0;
  723. top: 0;
  724. width: inherit;
  725. height: inherit;
  726. z-index: 99;
  727. }
  728. .canvas-litem {
  729. position: absolute;
  730. left: 300upx;
  731. top: 0;
  732. width: 3upx;
  733. height: 300upx;
  734. background-color: rgba(228, 55, 14, 0.4);
  735. overflow: hidden;
  736. -webkit-transform-origin: 50% 300upx;
  737. transform-origin: 50% 300upx;
  738. }
  739. /**
  740. * 抽奖按钮
  741. */
  742. .canvas-btn {
  743. position: absolute;
  744. left: 260upx;
  745. top: 260upx;
  746. z-index: 4;
  747. width: 80upx;
  748. height: 80upx;
  749. border-radius: 50%;
  750. color: #f4e9cc;
  751. background-color: #e44025;
  752. line-height: 80upx;
  753. text-align: center;
  754. font-size: 26upx;
  755. text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
  756. box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
  757. text-decoration: none;
  758. }
  759. .canvas-btn::after {
  760. position: absolute;
  761. display: block;
  762. content: ' ';
  763. left: 12upx;
  764. top: -44upx;
  765. width: 0;
  766. height: 0;
  767. overflow: hidden;
  768. border-width: 30upx;
  769. border-style: solid;
  770. border-color: transparent;
  771. border-bottom-color: #e44025;
  772. }
  773. .canvas-btn.disabled {
  774. pointer-events: none;
  775. background: #b07a7b;
  776. color: #ccc;
  777. }
  778. .canvas-btn.disabled::after {
  779. border-bottom-color: #b07a7b;
  780. }
  781. .canvas-btn-table {
  782. color: #A83FDB;
  783. width: 120upx;
  784. text-align: center;
  785. position: absolute;
  786. left: 240upx;
  787. top: 360upx;
  788. font-size: 26upx;
  789. background-color: #FFFFFF;
  790. opacity: 0.9;
  791. }
  792. .typecheckbox {
  793. width: 100%;
  794. position: relative;
  795. z-index: 3;
  796. display: flex;
  797. justify-content: space-between;
  798. padding: 20upx;
  799. box-sizing: border-box;
  800. color: #fff;
  801. font-size: 28upx;
  802. top: -120upx;
  803. flex-direction: column;
  804. height: 180upx;
  805. align-items: flex-end;
  806. /* padding-top: 46upx; */
  807. }
  808. .typecheckbox view {
  809. border: 1px solid #FF3637;
  810. background: transparent;
  811. color: #FF3637;
  812. display: flex;
  813. height: 60upx;
  814. width: 140upx;
  815. border-radius: 50upx;
  816. align-items: center;
  817. justify-content: center;
  818. display: flex;
  819. margin-left: 20upx;
  820. }
  821. .typecheckbox view.active {
  822. background: #FF3637;
  823. color: #fff;
  824. }
  825. .guize {
  826. width: 502upx;
  827. min-height: 300upx;
  828. display: flex;
  829. flex-direction: column;
  830. position: relative;
  831. z-index: 3;
  832. background-image: linear-gradient(-180deg, #F48549 0%, #F2642E 100%);
  833. border: 18upx solid #E4431A;
  834. border-radius: 16px;
  835. margin: 0 auto;
  836. margin-top: -104upx;
  837. padding: 48upx;
  838. /* box-sizing: border-box; */
  839. color: #fff;
  840. }
  841. .guize .title {
  842. text-align: center;
  843. margin-bottom: 28upx;
  844. }
  845. .guize .g_item {
  846. font-family: PingFang-SC-Medium;
  847. font-size: 24upx;
  848. color: #FFFFFF;
  849. letter-spacing: 0.5px;
  850. text-align: justify;
  851. line-height: 20px;
  852. word-break: break-all;
  853. }
  854. .shadowbox {
  855. width: 750upx;
  856. height: 100vh;
  857. position: fixed;
  858. top: 0;
  859. left: 0;
  860. z-index: 999;
  861. background: rgba(0, 0, 0, .6);
  862. display: flex;
  863. justify-content: center;
  864. align-items: center;
  865. }
  866. .myrewards {
  867. width: 600upx;
  868. min-height: 80upx;
  869. background: #FFEEDF;
  870. border: 10upx solid #F2692F;
  871. color: #333;
  872. font-size: 24upx;
  873. font-family: PingFang-SC-Medium;
  874. border-radius: 40upx;
  875. padding-bottom: 20upx;
  876. }
  877. .myrewards .title {
  878. font-family: PingFang-SC-Bold;
  879. font-size: 16px;
  880. color: #E4431A;
  881. letter-spacing: 0.57px;
  882. display: flex;
  883. padding-top: 36upx;
  884. justify-content: center;
  885. }
  886. .myrewards .itembox {
  887. max-height: 320upx;
  888. overflow-y: auto;
  889. }
  890. .myrewards .item {
  891. width: 100%;
  892. height: 66upx;
  893. padding: 0 32upx;
  894. box-sizing: border-box;
  895. display: flex;
  896. align-items: center;
  897. justify-content: space-between;
  898. }
  899. </style>