sign.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532
  1. <!-- 页面 -->
  2. <template>
  3. <s-layout title="签到有礼">
  4. <view v-if="state.loading"></view>
  5. <view class="sign-wrap" v-else-if="state.data && !state.loading">
  6. <!-- 签到日历 -->
  7. <view class="content-box calendar">
  8. <view class="sign-everyday ss-flex ss-col-center ss-row-between ss-p-x-30">
  9. <text class="sign-everyday-title">签到日历</text>
  10. <view class="sign-num-box">
  11. 已连续签到
  12. <text class="sign-num">{{ state.continue_days }}</text>
  13. </view>
  14. </view>
  15. <!-- 切换年月 -->
  16. <view class="bar ss-flex ss-col-center ss-row-center">
  17. <view class="previous" @tap="handleCalendar(0)"><text class="cicon-back"></text></view>
  18. <view class="date ss-m-x-20">{{ state.cur_year || '--' }} 年 {{ state.cur_month || '--' }} 月</view>
  19. <view class="next" @tap="handleCalendar(1)"><text class="cicon-forward"></text></view>
  20. </view>
  21. <!-- 显示星期 -->
  22. <view class="week ss-flex">
  23. <view class="week-item ss-flex ss-row-center" v-for="(item, index) in state.weeks_ch" :key="index">
  24. {{ item.title }}
  25. </view>
  26. </view>
  27. <!-- 日历表 -->
  28. <view class="myDateTable">
  29. <view v-for="(item, j) in state.data.days" :key="j"
  30. class="dateCell ss-flex ss-row-center ss-col-center">
  31. <!-- 空格 -->
  32. <view class="ss-flex ss-row-center ss-col-center">
  33. <text :decode="true">&nbsp;&nbsp;</text>
  34. </view>
  35. <view>
  36. <!-- 已签到日期 -->
  37. <view v-if="item.is_sign" class="is-sign ss-flex ss-row-center">
  38. <view class="is-sign-num">{{ item.day < 10 ? '0' + item.day : item.day }}</view>
  39. <image class="is-sign-image"
  40. :src="sheep.$url.static('/static/img/shop/app/correct.png')">
  41. </image>
  42. </view>
  43. <!-- 未签到日期 -->
  44. <view class="is-sign ss-flex ss-row-center" v-if="item.is_replenish == 1"
  45. @tap="onShowRetroactive(item.date)">
  46. <view class="cell-num">{{ item.day < 10 ? '0' + item.day : item.day }}</view>
  47. <text class="cicon-title"></text>
  48. </view>
  49. <view class="is-sign ss-flex ss-row-center" v-if="item.is_replenish == 0 && !item.is_sign">
  50. <view class="cell-num">{{ item.day < 10 ? '0' + item.day : item.day }}</view>
  51. </view>
  52. </view>
  53. </view>
  54. <!-- 签到按钮 -->
  55. <view class="ss-flex ss-col-center ss-row-center sign-box ss-m-y-40">
  56. <button class="ss-reset-button sign-btn" v-if="state.isSign === 0" @tap="onSign">签到</button>
  57. <button class="ss-reset-button already-btn" v-if="state.isSign === 1" disabled>已签到</button>
  58. </view>
  59. </view>
  60. </view>
  61. <view class="bg-white ss-m-t-16 ss-p-t-30 ss-p-b-60 ss-p-x-40">
  62. <view class="activity-title ss-m-b-30">签到说明</view>
  63. <view class="activity-des">
  64. 1、每日签到固定 {{ state.data.rules.everyday }} 积分
  65. <text v-if="state.data.rules.is_inc == '1'">
  66. ,次日递增奖励 {{ state.data.rules.inc_num }} 积分,直到
  67. {{ state.data.rules.until_day }} 天之后不再增加
  68. </text>
  69. </view>
  70. <view class="activity-des" v-if="state.data.rules.discounts?.length > 0">
  71. 2、<text class="" v-for="i in state.data.rules.discounts" :key="i">
  72. 连续签到 {{ i.full }} 天,奖励 {{ i.value }} 积分;
  73. </text>
  74. </view>
  75. <view class="activity-des" v-if="state.data.rules.is_replenish == '1'">
  76. {{ state.data.rules.discounts?.length > 0 ? '3' : '2' }}、用户在
  77. {{ state.data.rules.replenish_limit }} 天内,可补签
  78. {{ state.data.rules.replenish_days }} 天,每次补签消耗
  79. {{ state.data.rules.replenish_num }}积分
  80. </view>
  81. </view>
  82. </view>
  83. <s-empty v-else-if="!state.data && !state.loading" icon="/static/data-empty.png" text="签到活动还未开始">
  84. </s-empty>
  85. <su-popup :show="state.showModel" type="center" round="10" :isMaskClick="false">
  86. <view class="model-box ss-flex-col">
  87. <view class="ss-m-t-56 ss-flex-col ss-col-center">
  88. <text class="cicon-check-round"></text>
  89. <view class="score-title">{{ state.signin.score }}积分</view>
  90. <view class="model-title ss-flex ss-col-center ss-m-t-22 ss-m-b-30">
  91. 已连续打卡{{ state.continue_days }}天
  92. </view>
  93. </view>
  94. <view class="model-bg ss-flex-col ss-col-center ss-row-right">
  95. <view class="title ss-m-b-64">签到成功</view>
  96. <view class="ss-m-b-40">
  97. <button class="ss-reset-button confirm-btn" @tap="onConfirm">确认</button>
  98. </view>
  99. </view>
  100. </view>
  101. </su-popup>
  102. <su-popup :show="state.showRetroactive" type="center" round="10" :isMaskClick="false">
  103. <view class="model-box ss-flex-col">
  104. <view class="ss-m-t-56 ss-flex-col ss-col-center">
  105. <text class="cicon-check-round"></text>
  106. <view class="score-title">消耗{{ state.data?.rules.replenish_num }}积分</view>
  107. <view class="model-title ss-flex ss-col-center ss-m-t-22 ss-m-b-30">
  108. 已连续打卡{{ state.continue_days }}天
  109. </view>
  110. </view>
  111. <view class="model-bg ss-flex-col ss-col-center ss-row-right">
  112. <view class="title ss-m-b-64">确认补签</view>
  113. <view class="ss-m-b-40 ss-flex">
  114. <button class="ss-reset-button cancel-btn" @tap="state.showRetroactive = false">取消</button>
  115. <button class="ss-reset-button confirm-btn" @tap="onRetroactive">确认</button>
  116. </view>
  117. </view>
  118. </view>
  119. </su-popup>
  120. </s-layout>
  121. </template>
  122. <script setup>
  123. import sheep from '@/sheep';
  124. import {
  125. onLoad,
  126. onReady
  127. } from '@dcloudio/uni-app';
  128. import {
  129. computed,
  130. reactive
  131. } from 'vue';
  132. const headerBg = sheep.$url.css('/static/img/shop/app/sign.png');
  133. const state = reactive({
  134. data: {
  135. days: [], //日历
  136. rules: {}, //规则
  137. },
  138. cur_year: 0, //当前选的年
  139. cur_month: 0, //当前选的月
  140. cur_day: 0, //当前选择的天
  141. weeks_ch: [{
  142. title: '日',
  143. value: '0',
  144. },
  145. {
  146. title: '一',
  147. value: '1',
  148. },
  149. {
  150. title: '二',
  151. value: '2',
  152. },
  153. {
  154. title: '三',
  155. value: '3',
  156. },
  157. {
  158. title: '四',
  159. value: '4',
  160. },
  161. {
  162. title: '五',
  163. value: '5',
  164. },
  165. {
  166. title: '六',
  167. value: '6',
  168. },
  169. ], //星期
  170. showModel: false, //签到弹框
  171. continue_days: 0, //连续签到天数
  172. signin: {}, // 签到
  173. showRetroactive: false, //补签弹框
  174. date: '', //补签选中日期
  175. isSign: 0, //今天是否签到
  176. loading: true,
  177. });
  178. async function onSign() {
  179. // 换签到接口
  180. const {
  181. code: error,
  182. data
  183. } = await sheep.$api.activity.signAdd();
  184. if (error === 0) {
  185. state.showModel = true;
  186. state.signin = data;
  187. // getData();
  188. }
  189. }
  190. function onShowRetroactive(e) {
  191. state.showRetroactive = true;
  192. state.date = e;
  193. }
  194. //签到确认刷新页面
  195. function onConfirm() {
  196. state.showModel = false;
  197. getData();
  198. }
  199. //补签
  200. async function onRetroactive() {
  201. const {
  202. error,
  203. data
  204. } = await sheep.$api.activity.replenish({
  205. date: state.date,
  206. });
  207. if (error === 0) {
  208. state.showRetroactive = false;
  209. getData();
  210. }
  211. }
  212. async function getData(mouth) {
  213. const {
  214. error,
  215. data
  216. } = await sheep.$api.activity.signList(mouth);
  217. // 替换数据
  218. const ren = await sheep.$api.activity.getSummary();
  219. if (error === 0) {
  220. state.data = data;
  221. } else {
  222. state.data = null;
  223. }
  224. state.loading = false;
  225. if (state.data) {
  226. state.data.days.forEach((i, index) => {
  227. if (index < i.week) {
  228. index++;
  229. var obj = {
  230. day: null,
  231. is_sign: false,
  232. };
  233. state.data.days.unshift(obj);
  234. }
  235. if (index == 1) {
  236. let arr = i.date.split('-');
  237. state.cur_year = arr[0];
  238. state.cur_month = arr[1];
  239. }
  240. });
  241. if (state.data.days[0].day == null) {
  242. state.data.days.forEach((i, index) => {
  243. if (i.current == 'today') {
  244. state.isSign = i.is_sign;
  245. }
  246. });
  247. }
  248. state.isSign = ren.data.todaySignIn ? 1 : 0;
  249. state.continue_days = ren.data.continuousDay;
  250. }
  251. }
  252. onReady(() => {
  253. getData();
  254. });
  255. // 切换控制年月,上一个月,下一个月
  256. const handleCalendar = (type) => {
  257. const cur_year = parseInt(state.cur_year);
  258. const cur_month = parseInt(state.cur_month);
  259. var newMonth;
  260. var newYear = cur_year;
  261. if (type === 0) {
  262. //上个月
  263. newMonth = cur_month - 1;
  264. if (newMonth < 1) {
  265. newYear = cur_year - 1;
  266. newMonth = 12;
  267. } else if (newMonth < 10) {
  268. newMonth = '0' + newMonth;
  269. }
  270. } else {
  271. newMonth = cur_month + 1;
  272. if (newMonth > 12) {
  273. newYear = cur_year + 1;
  274. newMonth = 1;
  275. } else if (newMonth < 10) {
  276. newMonth = '0' + newMonth;
  277. }
  278. }
  279. getData({
  280. month: newYear + '-' + newMonth,
  281. });
  282. };
  283. </script>
  284. <style lang="scss" scoped>
  285. .header-box {
  286. border-top: 2rpx solid rgba(#dfdfdf, 0.5);
  287. }
  288. // 日历
  289. .calendar {
  290. background: #fff;
  291. .sign-everyday {
  292. height: 100rpx;
  293. background: rgba(255, 255, 255, 1);
  294. border: 2rpx solid rgba(223, 223, 223, 0.4);
  295. .sign-everyday-title {
  296. font-size: 32rpx;
  297. color: rgba(51, 51, 51, 1);
  298. font-weight: 500;
  299. }
  300. .sign-num-box {
  301. font-size: 26rpx;
  302. font-weight: 500;
  303. color: rgba(153, 153, 153, 1);
  304. .sign-num {
  305. font-size: 30rpx;
  306. font-weight: 600;
  307. color: #ff6000;
  308. padding: 0 10rpx;
  309. font-family: OPPOSANS;
  310. }
  311. }
  312. }
  313. // 年月日
  314. .bar {
  315. height: 100rpx;
  316. .date {
  317. font-size: 30rpx;
  318. font-family: OPPOSANS;
  319. font-weight: 500;
  320. color: #333333;
  321. line-height: normal;
  322. }
  323. }
  324. .cicon-back {
  325. margin-top: 6rpx;
  326. font-size: 30rpx;
  327. color: #c4c4c4;
  328. line-height: normal;
  329. }
  330. .cicon-forward {
  331. margin-top: 6rpx;
  332. font-size: 30rpx;
  333. color: #c4c4c4;
  334. line-height: normal;
  335. }
  336. // 星期
  337. .week {
  338. .week-item {
  339. font-size: 24rpx;
  340. font-weight: 500;
  341. color: rgba(153, 153, 153, 1);
  342. flex: 1;
  343. }
  344. }
  345. // 日历表
  346. .myDateTable {
  347. display: flex;
  348. flex-wrap: wrap;
  349. .dateCell {
  350. width: calc(750rpx / 7);
  351. height: 80rpx;
  352. font-size: 26rpx;
  353. font-weight: 400;
  354. color: rgba(51, 51, 51, 1);
  355. }
  356. }
  357. }
  358. .is-sign {
  359. width: 48rpx;
  360. height: 48rpx;
  361. position: relative;
  362. .is-sign-num {
  363. font-size: 24rpx;
  364. font-family: OPPOSANS;
  365. font-weight: 500;
  366. line-height: normal;
  367. }
  368. .is-sign-image {
  369. position: absolute;
  370. left: 0;
  371. top: 0;
  372. width: 48rpx;
  373. height: 48rpx;
  374. }
  375. }
  376. .cell-num {
  377. font-size: 24rpx;
  378. font-family: OPPOSANS;
  379. font-weight: 500;
  380. color: #333333;
  381. line-height: normal;
  382. }
  383. .cicon-title {
  384. position: absolute;
  385. right: -10rpx;
  386. top: -6rpx;
  387. font-size: 20rpx;
  388. color: red;
  389. }
  390. // 签到按钮
  391. .sign-box {
  392. height: 140rpx;
  393. width: 100%;
  394. .sign-btn {
  395. width: 710rpx;
  396. height: 80rpx;
  397. border-radius: 35rpx;
  398. font-size: 30rpx;
  399. font-weight: 500;
  400. box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
  401. background: linear-gradient(90deg, #ff6000, #fe832a);
  402. color: #fff;
  403. }
  404. .already-btn {
  405. width: 710rpx;
  406. height: 80rpx;
  407. border-radius: 35rpx;
  408. font-size: 30rpx;
  409. font-weight: 500;
  410. }
  411. }
  412. .model-box {
  413. width: 520rpx;
  414. // height: 590rpx;
  415. background: linear-gradient(177deg, #ff6000 0%, #fe832a 100%);
  416. // background: linear-gradient(177deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
  417. border-radius: 10rpx;
  418. .cicon-check-round {
  419. font-size: 70rpx;
  420. color: #fff;
  421. }
  422. .score-title {
  423. font-size: 34rpx;
  424. font-family: OPPOSANS;
  425. font-weight: 500;
  426. color: #fcff00;
  427. }
  428. .model-title {
  429. font-size: 28rpx;
  430. font-weight: 500;
  431. color: #ffffff;
  432. }
  433. .model-bg {
  434. width: 520rpx;
  435. height: 344rpx;
  436. background-size: 100% 100%;
  437. background-image: v-bind(headerBg);
  438. background-repeat: no-repeat;
  439. border-radius: 0 0 10rpx 10rpx;
  440. .title {
  441. font-size: 34rpx;
  442. font-weight: bold;
  443. // color: var(--ui-BG-Main);
  444. color: #ff6000;
  445. }
  446. .subtitle {
  447. font-size: 26rpx;
  448. font-weight: 500;
  449. color: #999999;
  450. }
  451. .cancel-btn {
  452. width: 220rpx;
  453. height: 70rpx;
  454. border: 2rpx solid #ff6000;
  455. border-radius: 35rpx;
  456. font-size: 28rpx;
  457. font-weight: 500;
  458. color: #ff6000;
  459. line-height: normal;
  460. margin-right: 10rpx;
  461. }
  462. .confirm-btn {
  463. width: 220rpx;
  464. height: 70rpx;
  465. background: linear-gradient(90deg, #ff6000, #fe832a);
  466. box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
  467. border-radius: 35rpx;
  468. font-size: 28rpx;
  469. font-weight: 500;
  470. color: #ffffff;
  471. line-height: normal;
  472. }
  473. }
  474. }
  475. //签到说明
  476. .activity-title {
  477. font-size: 32rpx;
  478. font-weight: 500;
  479. color: #333333;
  480. line-height: normal;
  481. }
  482. .activity-des {
  483. font-size: 26rpx;
  484. font-weight: 500;
  485. color: #666666;
  486. line-height: 40rpx;
  487. }
  488. </style>