sign_in.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <!-- +---------------------------------------------------------------------- -->
  2. <!-- | CRMEB [ CRMEB赋能开发者,助力企业发展 ] -->
  3. <!-- +---------------------------------------------------------------------- -->
  4. <!-- | Copyright (c) 2016~2022 https://www.crmeb.com All rights reserved. -->
  5. <!-- +---------------------------------------------------------------------- -->
  6. <!-- | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权 -->
  7. <!-- +---------------------------------------------------------------------- -->
  8. <!-- | Author: CRMEB Team <admin@crmeb.com> -->
  9. <!-- +---------------------------------------------------------------------- -->
  10. {extend name="public/container"}
  11. {block name="title"}签到{/block}
  12. {block name="head_top"}
  13. <style>
  14. body {
  15. background-color: #f5f5f5;
  16. }
  17. </style>
  18. {/block}
  19. {block name="content"}
  20. <div v-cloak id="app">
  21. <div class="sign-in">
  22. <div class="header">
  23. <div class="cont">
  24. <div class="image" @click="myUser">
  25. <img :src="userInfo.avatar" class="img">
  26. </div>
  27. <div class="text" @click="myUser">
  28. <div class="name" v-html="userInfo.nickname"></div>
  29. <div class="info">{$gold_name}: {{ userInfo.gold_num }}</div>
  30. </div>
  31. <a class="btn" :href="$h.U({c: 'my', a: 'sign_in_list'})">明细</a>
  32. </div>
  33. </div>
  34. <div class="main">
  35. <div class="head">
  36. <div class="list">
  37. <div class="item">
  38. <div class="image">
  39. <img :src="isSign ? '{__WAP_PATH}zsff/images/stars2.png' : '{__WAP_PATH}zsff/images/stars1.png'"
  40. class="star">
  41. </div>
  42. <div class="day">每日签到获得{$gold_coin}{$gold_name}</div>
  43. </div>
  44. </div>
  45. <button class="btn" v-if="isSign" type="button" @click="show_sign_image">已签到</button>
  46. <button class="btn" v-else type="button" @click="sign">立即签到</button>
  47. </div>
  48. <div class="foot">
  49. <img src="{__WAP_PATH}zsff/images/lock.png" class="lock">
  50. <div class="panel">
  51. <div class="name">已累计签到</div>
  52. <div class="count">
  53. <div class="cont">
  54. <div class="wrap">
  55. <div v-for="(item, index) in updateTotal" :key="index" class="item">{{ item }}</div>
  56. </div>
  57. <div class="unit">天</div>
  58. </div>
  59. </div>
  60. </div>
  61. <div v-if="records.length" class="record">
  62. <div v-for="(item, index) in records" :key="index" class="item">
  63. <div class="text">
  64. <div class="name">签到</div>
  65. <div class="time">{{ item.add_time }}</div>
  66. </div>
  67. <div class="num">+{{ item.number }}</div>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72. </div>
  73. <quick-menu></quick-menu>
  74. </div>
  75. <script>
  76. var signed="{$signed}",signCount={$signCount},sign_image = '{$sign_image}';
  77. require(['vue', 'helper', 'store', 'moment', 'qrcode', 'quick', 'layer'], function (Vue, $h, app, moment) {
  78. new Vue({
  79. el: '#app',
  80. data: {
  81. userInfo: {},
  82. total: signCount,
  83. isSign: signed ? true : false,
  84. records: [],
  85. poster: '',
  86. sign_talk: '',
  87. url: ''
  88. },
  89. computed: {
  90. updateTotal: function () {
  91. let str = '0000',
  92. total = this.total,
  93. len = 0;
  94. if (!total) {
  95. return str;
  96. }
  97. if (typeof total === 'number') {
  98. total = total.toString();
  99. }
  100. len = total.length;
  101. if (len >= 4) {
  102. return total;
  103. }
  104. str += total;
  105. str = str.substring(len);
  106. return str;
  107. }
  108. },
  109. created: function () {
  110. this.getUserInfo();
  111. this.getUserSign();
  112. },
  113. methods: {
  114. sign: function () {
  115. var that = this;
  116. app.baseGet($h.U({ c: 'auth_api', a: 'user_sign' }), function (res) {
  117. that.isSign = true;
  118. that.userInfo.gold_num++;
  119. that.total = that.total + 1;
  120. that.getUserSign();
  121. that.getPoster();
  122. return $h.pushMsg(res.data.msg);
  123. }, function (res) {
  124. that.isSign = false;
  125. });
  126. },
  127. show_sign_image: function () {
  128. this.getPoster();
  129. },
  130. getUserSign: function () {
  131. app.baseGet($h.U({ c: 'auth_api', a: 'getUserList' }), function (res) {
  132. this.records = res.data.data;
  133. }.bind(this));
  134. },
  135. myUser: function () {
  136. window.location.href = $h.U({
  137. c: 'my',
  138. a: 'index'
  139. });
  140. },
  141. getUserInfo: function () {
  142. var that = this;
  143. app.baseGet($h.U({ c: 'auth_api', a: 'userInfo' }), function (res) {
  144. that.userInfo = res.data.data;
  145. });
  146. },
  147. // 获取海报信息
  148. getPoster: function () {
  149. var vm = this;
  150. $h.loadFFF();
  151. app.baseGet($h.U({
  152. c: 'auth_api',
  153. a: 'get_user_sign_poster'
  154. }), function (res) {
  155. $h.loadClear();
  156. var data = res.data.data;
  157. vm.poster = data.poster;
  158. vm.sign_talk = data.sign_talk;
  159. vm.url = data.url;
  160. vm.createPoster();
  161. }, function () {
  162. $h.loadClear();
  163. });
  164. },
  165. // 创建海报
  166. createPoster: function () {
  167. var vm = this,
  168. loadIndex = layer.load(1);
  169. Promise.all([
  170. new Promise(function (resolve, reject) {
  171. var image = new Image();
  172. image.crossOrigin = 'anonymous';
  173. image.src = vm.poster + '?t=' + new Date().getTime();
  174. image.onload = function () {
  175. resolve(image);
  176. };
  177. image.onerror = function () {
  178. reject('image-error');
  179. };
  180. }),
  181. new Promise(function (resolve, reject) {
  182. try {
  183. resolve(new QRCode(document.createElement('canvas'), vm.url));
  184. } catch (error) {
  185. reject(error);
  186. }
  187. })
  188. ]).then(function (data) {
  189. var canvas = document.createElement('canvas'),
  190. context = canvas.getContext('2d'),
  191. monthArr = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'],
  192. weekdayArr = ['日', '一', '二', '三', '四', '五', '六'];
  193. canvas.width = 600;
  194. canvas.height = 800;
  195. context.fillStyle = '#FFFFFF';
  196. context.fillRect(0, 0, canvas.width, canvas.height);
  197. context.drawImage(data[0], 30, 30, 540, 540);
  198. context.drawImage(data[1]._el.firstElementChild, 50, 620, 130, 130);
  199. context.font = '22px sans-serif';
  200. context.fillStyle = '#282828';
  201. var index = 0,
  202. length = vm.sign_talk.length,
  203. start = 0,
  204. line = 0;
  205. for (; index < length; index++) {
  206. if (context.measureText(vm.sign_talk.slice(start, index)).width > 350) {
  207. context.fillText(vm.sign_talk.slice(start, index), 210, 33 * line + 610);
  208. start = index;
  209. line++;
  210. }
  211. }
  212. if (start < length - 1) {
  213. context.fillText(vm.sign_talk.slice(start), 210, 33 * line + 610);
  214. }
  215. context.font = '64px sans-serif';
  216. context.fillStyle = '#FF0000';
  217. context.fillText(moment().date(), 326, 753);
  218. context.font = '24px sans-serif';
  219. context.fillStyle = '#333333';
  220. context.fillText(monthArr[moment().month()] + '月', 410, 713);
  221. context.strokeRect(405, 732, 58, 26);
  222. context.font = '16px sans-serif';
  223. context.fillText('星期'+ weekdayArr[moment().month()], 410, 753);
  224. layer.photos({
  225. photos: {
  226. data: [
  227. {
  228. src: canvas.toDataURL()
  229. }
  230. ]
  231. },
  232. anim: 5
  233. });
  234. layer.close(loadIndex);
  235. }).catch(function (error) {
  236. layer.close(loadIndex);
  237. });
  238. }
  239. }
  240. });
  241. });
  242. </script>
  243. {/block}