clockin.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498
  1. <template>
  2. <view>
  3. <view class="main_view">
  4. <view class="status_bar" :style="status_bar_style"><!-- 这里是状态栏 --></view>
  5. <view class="info_box">
  6. <view class="left_box">
  7. <view class="score_info">
  8. <view class="score_title">当前积分</view>
  9. <view class="score_current">{{ scoreInfo.score }} </view>
  10. </view>
  11. <view class="wait_info">
  12. <view class="wait_title">待入账积分</view>
  13. <view class="wait_score">{{ scoreInfo.wait_score ? scoreInfo.wait_score : 0 }}</view>
  14. </view>
  15. </view>
  16. <view class="right_box">
  17. <navigator url="/pages/score/lottery" class="lottery_enter">
  18. <image class="lottery_img" src="https://mall.findit.ltd/uploads/images/default/lottery_record.png" mode=""></image>
  19. <view class="lottery_text">点我抽奖</view>
  20. </navigator>
  21. </view>
  22. </view>
  23. <view class="clockin_box" v-if="clockinList.length > 0">
  24. <view class="box_title">
  25. <view class="left_icon" v-if="this.listKey > 0" @click="leftClockin()"><uni-icons type="left" size="20"></uni-icons></view>
  26. {{ isMark.finish_day ? "已连续签到 " + isMark.finish_day + " 天" : "连续签到奖励更丰厚" }}
  27. <view class="right_icon" v-if="this.listKey < this.listLength - 1" @click="rightClockin()"> <uni-icons type="right" size="20"></uni-icons></view>
  28. </view>
  29. <view class="clockin_list">
  30. <view class="clockin_item" :class="item.is_finish ? 'acitve' : ''" v-for="(item, index) in clockinList[listKey]" :key="index">
  31. <view class="give_coupon" v-if="item['coupon_id']">券</view>
  32. <view class="what_day">{{ item.what_day }}</view>
  33. <view class="score_one">
  34. <image class="score_icon" src="../../static/icon/score.png" mode=""></image>
  35. </view>
  36. <!-- <view class="score_tow" v-if="index == 2 || index == 4">
  37. <image class="score_icon" src="../../static/icon/score.png" mode=""></image>
  38. <image class="score_icon" src="../../static/icon/score.png" mode=""></image>
  39. </view>-->
  40. <view class="give_score">+{{ item.reward }}</view>
  41. </view>
  42. </view>
  43. <button class="clockin_btn" :class="isMark.is_clockin ? 'active' : ''" @click="toClockin()">{{ isMark.is_clockin ? "已签到" : "签到" }}</button>
  44. <navigator url="/pages/score/record" class="score_record">积分记录 &gt;</navigator>
  45. </view>
  46. <view class="clockin_box" v-else>
  47. <view class="box_title"> 暂无签到活动 </view>
  48. <navigator url="/pages/score/record" class="score_record">积分记录 &gt;</navigator>
  49. </view>
  50. </view>
  51. </view>
  52. </template>
  53. <script>
  54. export default {
  55. data() {
  56. return {
  57. status_bar_style: {},
  58. clockinList: [],
  59. isMark: {
  60. finish_day: 0,
  61. is_clockin: 0,
  62. },
  63. scoreInfo: {
  64. score: 0,
  65. use_score: 0,
  66. wait_score: 0,
  67. },
  68. isReqing: false,
  69. listKey: 0,
  70. listLength: 0,
  71. active_id: 0,
  72. };
  73. },
  74. onLoad() {
  75. // #ifdef MP-WEIXIN
  76. let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  77. this.status_bar_style = {
  78. height: menuButtonInfo.height + "px",
  79. "padding-top": menuButtonInfo.top + "px",
  80. };
  81. // #endif
  82. // #ifdef MP-WEIXIN
  83. //分享按钮
  84. uni.showShareMenu({
  85. withShareTicket: true,
  86. menus: ["shareAppMessage", "shareTimeline"],
  87. });
  88. // #endif
  89. },
  90. onShareAppMessage(obj) {
  91. // 获取分享信息
  92. let shareList = getApp().globalData.shareList;
  93. // 获取分享信息
  94. let shareObj = {
  95. title: "学生征订",
  96. path: "/pages/score/clockin",
  97. imageUrl: "",
  98. };
  99. // 循环列表
  100. for (let i in shareList) {
  101. if (shareList[i].pages == "pages/score/clockin") {
  102. shareObj.path = shareList[i].path ? shareList[i].path : shareObj.path;
  103. shareObj.title = shareList[i].title ? shareList[i].title : shareObj.title;
  104. shareObj.imageUrl = shareList[i].image_url ? shareList[i].image_url : shareObj.imageUrl;
  105. }
  106. }
  107. // 返回分享信息
  108. return shareObj;
  109. },
  110. onShow() {
  111. // 登录提示
  112. if (!this.$checkAccess.alterLogin()) return;
  113. // 请求打卡列表
  114. this.getClockinList();
  115. // 请求中,不允许刷新
  116. if (this.isReqing) return;
  117. // 设置请求中
  118. this.isReqing = true;
  119. // 请求列表
  120. this.$http.request("/api/custom_score/get_info", this.requestParam).then((re) => {
  121. // 设置非请求中
  122. this.isReqing = false;
  123. // 成功结果
  124. if (re.code == "success") {
  125. this.scoreInfo = re.data;
  126. }
  127. });
  128. },
  129. methods: {
  130. toClockin() {
  131. // 如果已经打卡
  132. if (this.isMark.is_clockin) return;
  133. // 登录提示
  134. if (!this.$checkAccess.alterLogin()) return;
  135. if (this.active_id === 0) {
  136. uni.showToast({
  137. title: "暂无活动",
  138. icon: "none",
  139. });
  140. }
  141. // 请求中,不允许刷新
  142. if (this.isReqing) return;
  143. // 设置请求中
  144. this.isReqing = true;
  145. // 请求列表
  146. this.$http
  147. .request(
  148. "api/score_clockin/finish",
  149. {
  150. active_id: this.active_id,
  151. },
  152. "post"
  153. )
  154. .then((re) => {
  155. // 设置非请求中
  156. this.isReqing = false;
  157. // 成功结果
  158. if (re.code == "success") {
  159. // 赋值
  160. this.isMark = re.data;
  161. // 积分更新
  162. this.scoreInfo.score = re.data.reward + this.scoreInfo.score;
  163. // 更新打卡
  164. for (let i in this.clockinList[this.listKey]) {
  165. // 如果小于等于连续打卡天数,设置为打卡
  166. if (this.clockinList[this.listKey][i].what_day <= this.isMark.finish_day) this.clockinList[this.listKey][i].is_finish = 1;
  167. }
  168. } else {
  169. uni.showToast({
  170. title: "打卡失败",
  171. icon: "none",
  172. });
  173. }
  174. });
  175. },
  176. getClockinList() {
  177. // 请求列表
  178. this.$http.request("api/score_clockin/get_list", this.requestParam).then((re) => {
  179. // 成功结果
  180. if (re.code == "success") {
  181. // 赋值
  182. this.clockinList = re.data.list;
  183. this.listLength = this.clockinList.length;
  184. this.active_id = re.data.active_id;
  185. // 赋值
  186. this.isMark = re.data.is_mark;
  187. }
  188. });
  189. },
  190. leftClockin() {
  191. if (this.listKey > 0) {
  192. this.listKey = this.listKey - 1;
  193. }
  194. },
  195. rightClockin() {
  196. this.listKey = this.listKey + 1;
  197. },
  198. },
  199. };
  200. </script>
  201. <style lang="less">
  202. page {
  203. background-color: #ffffff;
  204. }
  205. .main_view {
  206. display: block;
  207. height: 1000rpx;
  208. background: linear-gradient(to bottom, #fc335f 0%, #fb7224 50%, #ffffff 100%);
  209. .status_bar {
  210. width: 100%;
  211. height: 64rpx;
  212. display: block;
  213. padding-top: var(--status-bar-height);
  214. }
  215. .info_box {
  216. display: block;
  217. overflow: hidden;
  218. .left_box {
  219. float: left;
  220. width: 450rpx;
  221. .score_info {
  222. color: #ffffff;
  223. overflow: hidden;
  224. padding: 0rpx 35rpx;
  225. .score_title {
  226. width: 240rpx;
  227. height: 60rpx;
  228. display: block;
  229. font-size: 26rpx;
  230. line-height: 60rpx;
  231. }
  232. .score_current {
  233. width: 240rpx;
  234. height: 80rpx;
  235. display: block;
  236. font-size: 66rpx;
  237. line-height: 80rpx;
  238. }
  239. }
  240. .wait_info {
  241. color: #ffffff;
  242. display: block;
  243. overflow: hidden;
  244. padding: 0rpx 35rpx;
  245. margin-top: 20rpx;
  246. .wait_title {
  247. width: 240rpx;
  248. height: 40rpx;
  249. display: block;
  250. font-size: 24rpx;
  251. line-height: 40rpx;
  252. }
  253. .wait_score {
  254. width: 240rpx;
  255. height: 60rpx;
  256. display: block;
  257. font-size: 36rpx;
  258. line-height: 60rpx;
  259. }
  260. }
  261. }
  262. .right_box {
  263. float: right;
  264. overflow: hidden;
  265. margin-top: 60rpx;
  266. margin-right: 35rpx;
  267. .lottery_enter {
  268. display: block;
  269. overflow: hidden;
  270. text-align: center;
  271. .lottery_img {
  272. width: 150rpx;
  273. height: 150rpx;
  274. display: block;
  275. margin: 0 auto;
  276. }
  277. .lottery_text {
  278. color: #ffffff;
  279. height: 60rpx;
  280. font-size: 28rpx;
  281. line-height: 60rpx;
  282. }
  283. }
  284. }
  285. }
  286. .clockin_box {
  287. z-index: 9;
  288. display: block;
  289. width: 700rpx;
  290. margin: 0rpx auto;
  291. position: relative;
  292. border-radius: 40rpx;
  293. background-color: #ffffff;
  294. box-shadow: 5rpx 5rpx 2rpx 0rpx #dddddd;
  295. .box_title {
  296. height: 80rpx;
  297. color: #999999;
  298. text-align: center;
  299. line-height: 80rpx;
  300. .left_icon {
  301. float: left;
  302. padding-left: 20rpx;
  303. }
  304. .right_icon {
  305. float: right;
  306. padding-right: 20rpx;
  307. }
  308. }
  309. .clockin_list {
  310. display: block;
  311. overflow: hidden;
  312. width: 100%;
  313. padding-top: 25rpx;
  314. .clockin_item {
  315. float: left;
  316. position: relative;
  317. width: 70rpx;
  318. height: 165rpx;
  319. text-align: center;
  320. margin-left: 25rpx;
  321. border-radius: 20rpx;
  322. margin-bottom: 20rpx;
  323. background-color: #f8f8f8;
  324. .what_day {
  325. display: block;
  326. height: 40rpx;
  327. font-size: 24rpx;
  328. line-height: 60rpx;
  329. }
  330. .score_one {
  331. display: block;
  332. height: 60rpx;
  333. margin: 10rpx auto;
  334. position: relative;
  335. .score_icon {
  336. display: block;
  337. width: 60rpx;
  338. height: 60rpx;
  339. margin: 0rpx auto;
  340. }
  341. }
  342. .score_tow {
  343. display: block;
  344. height: 80rpx;
  345. margin: 10rpx auto;
  346. position: relative;
  347. .score_icon {
  348. display: block;
  349. width: 80rpx;
  350. height: 80rpx;
  351. margin: 0rpx auto;
  352. }
  353. .score_icon:nth-child(1) {
  354. top: 0rpx;
  355. left: 10rpx;
  356. width: 80rpx;
  357. height: 80rpx;
  358. position: absolute;
  359. }
  360. .score_icon:nth-child(2) {
  361. top: 0rpx;
  362. left: 55rpx;
  363. width: 80rpx;
  364. height: 80rpx;
  365. position: absolute;
  366. }
  367. }
  368. .score_the {
  369. width: 200rpx;
  370. display: block;
  371. height: 100rpx;
  372. margin: 10rpx auto;
  373. position: relative;
  374. .score_icon {
  375. display: block;
  376. width: 80rpx;
  377. height: 80rpx;
  378. margin: 0rpx auto;
  379. }
  380. .score_icon:nth-child(1) {
  381. top: 15rpx;
  382. left: 20rpx;
  383. width: 80rpx;
  384. height: 80rpx;
  385. position: absolute;
  386. }
  387. .score_icon:nth-child(2) {
  388. top: 15rpx;
  389. left: 95rpx;
  390. width: 80rpx;
  391. height: 80rpx;
  392. position: absolute;
  393. }
  394. .score_icon:nth-child(3) {
  395. top: 0rpx;
  396. left: 60rpx;
  397. width: 80rpx;
  398. height: 80rpx;
  399. position: absolute;
  400. }
  401. }
  402. .give_score {
  403. display: block;
  404. height: 30rpx;
  405. font-size: 24rpx;
  406. line-height: 40rpx;
  407. }
  408. .give_coupon {
  409. position: absolute;
  410. font-size: 20rpx;
  411. padding: 2px 5px;
  412. background-color: #f00;
  413. color: #fff;
  414. border-radius: 6px;
  415. display: inline-block;
  416. text-align: center;
  417. right: -15rpx;
  418. top: -15rpx;
  419. }
  420. }
  421. /*.clockin_item:nth-child(7){
  422. width: 315rpx;
  423. }*/
  424. .clockin_item.acitve {
  425. color: #ffffff;
  426. background-color: #e03519;
  427. }
  428. }
  429. .clockin_btn {
  430. width: 660rpx;
  431. color: #ffffff;
  432. font-size: 30rpx;
  433. margin-top: 20rpx;
  434. padding: 0rpx 0rpx;
  435. border-radius: 60rpx;
  436. background-color: #e03519;
  437. border: 0rpx solid transparent;
  438. }
  439. .clockin_btn.active {
  440. color: #ffffff;
  441. background-color: #aaaaaa;
  442. }
  443. .clockin_btn::after {
  444. border: 0rpx solid transparent;
  445. }
  446. .score_record {
  447. height: 60rpx;
  448. display: block;
  449. color: #999999;
  450. font-size: 24rpx;
  451. margin-top: 20rpx;
  452. text-align: center;
  453. line-height: 80rpx;
  454. }
  455. }
  456. }
  457. </style>