task

api/task.js

@@ -0,0 +1,33 @@
+import { request } from '@/api/config.js'
+
+export function getSignList(data) {
+  return request({
+    url: '/wx/bkm/sign/list',
+    method: 'get',
+    data: data,
+  })
+}
+
+export function signToday(data) {
+  return request({
+    url: '/wx/bkm/sign/today',
+    method: 'get',
+    data: data,
+  })
+}
+
+export function getTaskStat(data) {
+  return request({
+    url: '/wx/bkm/user/task/consumeStat',
+    method: 'get',
+    data: data,
+  })
+}
+
+export function reveiveTaskReward(data) {
+  return request({
+    url: '/wx/bkm/user/task/consumeReward',
+    method: 'post',
+    data: data,
+  })
+}

pages/task/index.vue

@@ -1,17 +1,174 @@
 <template lang="">
-  <div></div>
+  <div
+    style="
+      height: 100vh;
+      background: linear-gradient(216deg, #fe854c 0%, #ff9a5a 100%);
+      box-sizing: border-box;
+      overflow: scroll;
+    "
+  >
+    <div
+      :style="{
+        background: 'url(https://file.rongcyl.cn/festatic/bkm/first2/bg.png)',
+        height: 'calc(100vh - 160rpx)',
+        'background-repeat': 'no-repeat',
+        'background-position': 'center center',
+        'background-size': 'cover',
+        'padding-top': safeAreaTop,
+        'box-sizing': 'border-box',
+        overflow: 'scroll',
+        'padding-bottom': '160rpx',
+      }"
+    >
+      <div class="card rounded-md shadow-sm mx-auto mt-10 py-2">
+        <div class="fs16 bold italic text-gray-900 pl-3 my-2">签到赚积分</div>
+        <div class="flex justify-between text-black px-3">
+          <div v-for="day in weekdays">周{{ day }}</div>
+        </div>
+        <div class="flex justify-between px-3 mt-2">
+          <div
+            style="width: 60rpx; height: 60rpx"
+            :class="{ 'bg-amber-200': i >= todayIndex || day.status, 'bg-gray-200': i < todayIndex }"
+            class="flex justify-center items-center rounded-full"
+            v-for="(day, i) in signList"
+            @click="sign(i)"
+          >
+            <div
+              style="width: 45rpx; height: 45rpx"
+              :class="{ 'bg-amber-300': i >= todayIndex || day.status, 'bg-gray-300': i < todayIndex }"
+              class="flex justify-center items-center rounded-full"
+            >
+              <span
+                class="fs11 bold"
+                :class="{ 'text-red-400': i >= todayIndex || day.status, 'text-gray-400': i < todayIndex }"
+              >
+                +1
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-between px-3 mt-2">
+          <div v-for="day in signList">
+            <span v-if="day.status" class="fs12 text-green-500">已签到</span>
+            <span v-else="day.status" class="fs12 text-grey-500">未签到</span>
+          </div>
+        </div>
+      </div>
+      <div class="card rounded-md shadow-sm mx-auto mt-4 py-2">
+        <div class="fs16 bold italic text-gray-900 pl-3 my-2">消费领优惠券</div>
+        <div class="flex items-center px-3">
+          <img
+            src="https://file.rongcyl.cn/festatic/bkm/task/coupon.png"
+            style="width: 80rpx; height: 80rpx"
+            class=""
+          />
+          <div class="ml-3 flex-1">
+            <div>
+              <span>连续消费满 {{ totalNum }} 天领取</span>
+              <span class="text-rose-500">({{ status == 2 ? 7 : currentNum }}/{{ totalNum }})</span>
+            </div>
+            <div style="color: #ff2c43">
+              <span>￥</span>
+              <span class="bold fs15">{{ couponPrice }}</span>
+            </div>
+          </div>
+          <div></div>
+          <div
+            style="width: 110rpx; height: 44rpx; line-height: 44rpx"
+            class="rounded-sm bg-purple-100 fs14 text-center"
+            @click="reveiveTaskReward"
+          >
+            领取
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
+import { getSignList, signToday, getTaskStat, reveiveTaskReward } from '@/api/task'
 export default {
   data() {
     return {
       safeAreaTop: '0px',
+      signList: [],
+      todayIndex: -1,
+      weekdays: ['一', '二', '三', '四', '五', '六', '日'],
+      currentNum: 0,
+      totalNum: 0,
+      couponPrice: 0,
+      status: 0,
     }
   },
   created() {
     this.getSafeAreaTop()
+    this.getList()
+    this.getTaskStat()
   },
   methods: {
+    reveiveTaskReward() {
+      if (this.status == 2) {
+        wx.showToast({
+          title: '已领取',
+          icon: 'error',
+        })
+        return
+      }
+      if (this.currentNum < this.totalNum) {
+        wx.showToast({
+          title: '未达到领取条件',
+          icon: 'error',
+        })
+        return
+      }
+      reveiveTaskReward().then(rs => {
+        wx.showToast({
+          title: '领取成功',
+          icon: 'sucess',
+        })
+        this.getTaskStat()
+      })
+    },
+    getTaskStat() {
+      getTaskStat().then(rs => {
+        this.currentNum = rs.data.currentNum
+        this.totalNum = rs.data.totalNum
+        this.couponPrice = rs.data.couponPrice
+        this.status = rs.data.status
+        console.log(rs)
+      })
+    },
+    posTodayIndex() {
+      var today = this.getTodayString()
+      for (var i = 0; i < this.signList.length; i++) {
+        if (this.signList[i].date === today) {
+          this.todayIndex = i
+          break
+        }
+      }
+    },
+    getTodayString() {
+      var today = new Date()
+      var year = today.getFullYear()
+      var month = String(today.getMonth() + 1).padStart(2, '0') // Months are 0-based
+      var day = String(today.getDate()).padStart(2, '0')
+      return year + '-' + month + '-' + day
+    },
+    getList() {
+      getSignList().then(rs => {
+        this.signList = rs.data
+        this.posTodayIndex()
+      })
+    },
+    sign(i) {
+      if (i == this.todayIndex) {
+        signToday().then(this.getList)
+        wx.showToast({
+          title: '签到成功',
+          icon: 'sucess',
+        })
+      }
+    },
     getSafeAreaTop() {
       wx.getSystemInfo({
         success: res => {
@@ -22,4 +179,9 @@ export default {
   },
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.card {
+  width: 90%;
+  background-image: linear-gradient(45deg, #f5eeea 0%, #faab86 100%);
+}
+</style>