静态页面

src/pages.js

@@ -132,6 +132,15 @@ const Activity = [
       eventType: 'activity',
     }
   },
+  {
+    name: '活动-活动签到',
+    page: 'pages/HuoDong/HuoDongSign/index',
+    auth: ['avatar', 'phone'],
+    track: {
+      event: 'detail',
+      eventType: 'activity',
+    }
+  },
   {
     name: '活动-资讯详情',
     page: 'pages/HuoDong/ZiXunDetail/index',

src/pages/HuoDong/HuoDongDetail/index.jsx

@@ -91,31 +91,35 @@ export default function HuoDongDetail () {
   const ToJoin = () => { // 去报名
     if (DataLock || ActivityDetail === null || !JoinBtnStatus) return
     setDataLock(true)
-    const { personId, phone, nickname, orgId } = user
-    const { dynamicId } = ActivityDetail
-    if (!phone) { // 未授权手机号，唤起授权手机号弹窗
-      setShowGetUserPhoneLayer(true)
-      setDataLock(false)
-      return false
-    }
-    let Data = {
-      phone,
-      personId,
-      dynamicId,
-      name: nickname,
-      orgId,
-      attendNum: 1,
-      sharePerson: null,
-      sharePersonName: null,
-      sharePersonType: null
+    if (JoinBtnText === '去签到') {
+      Taro.navigateTo({ url: `/pages/HuoDong/HuoDongSign/index?id=${ActivityDetail.dynamicId}` })
+    } else {
+      const { personId, phone, nickname, orgId } = user
+      const { dynamicId } = ActivityDetail
+      if (!phone) { // 未授权手机号，唤起授权手机号弹窗
+        setShowGetUserPhoneLayer(true)
+        setDataLock(false)
+        return false
+      }
+      let Data = {
+        phone,
+        personId,
+        dynamicId,
+        name: nickname,
+        orgId,
+        attendNum: 1,
+        sharePerson: null,
+        sharePersonName: null,
+        sharePersonType: null
+      }
+      request({ ...apis.JoinActivity, data: { ...Data } }).then(() => {
+        setHasJoin(true)
+        setDataLock(false)
+      }).catch((res) => {
+        Taro.showToast({ title: res, icon: 'none' })
+        setDataLock(false)
+      })
     }
-    request({ ...apis.JoinActivity, data: { ...Data } }).then(() => {
-      setHasJoin(true)
-      setDataLock(false)
-    }).catch((res) => {
-      Taro.showToast({ title: res, icon: 'none' })
-      setDataLock(false)
-    })
   }
 
   const showError = err => {

src/pages/HuoDong/HuoDongSign/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '活动签到'
+}

src/pages/HuoDong/HuoDongSign/index.css

@@ -0,0 +1,77 @@
+.HuoDongSign {
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+}
+.HuoDongSign > image {
+  width: 100%;
+  height: auto;
+  display: block;
+  position: relative;
+  z-index: 1;
+}
+.HuoDongSign > .SignBtn {
+  width: 188px;
+  height: 188px;
+  position: absolute;
+  overflow: visible;
+  z-index: 2;
+  left: 50%;
+  bottom: 300px;
+  margin-left: -94px;
+}
+.HuoDongSign > .SignBtn::after {
+  content: '';
+  display: block;
+  width: 226px;
+  height: 226px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 100%;
+  z-index: 2;
+}
+.HuoDongSign > .SignBtn::before {
+  content: '';
+  display: block;
+  width: 264px;
+  height: 264px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 100%;
+  z-index: 1;
+}
+.HuoDongSign > .SignBtn.active::after {
+  background: rgba(243, 88, 68, 0.3);
+}
+.HuoDongSign > .SignBtn.active::before {
+  background: rgba(243, 88, 68, 0.3);
+}
+.HuoDongSign > .SignBtn.active > view {
+  background: #f35844;
+}
+.HuoDongSign > .SignBtn.active > view > text {
+  color: #fff;
+}
+.HuoDongSign > .SignBtn > view {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 3;
+  border-radius: 100%;
+  background: #ffffff;
+}
+.HuoDongSign > .SignBtn > view > text {
+  font-size: 44px;
+  color: #999;
+  width: 100%;
+  white-space: nowrap;
+  text-align: center;
+}

src/pages/HuoDong/HuoDongSign/index.jsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+import Taro, { Current } from '@tarojs/taro'
+import request, { apis } from '@/utils/request'
+import Page from '@/layouts'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function HuoDongDetail () {
+
+  const [DataLock, setDataLock] = useState(false)
+  const [HasSign, setHasSign] = useState(false)
+  const [CurrnetId] = useState(Current.router.params.id) // 当前活动id
+
+  const ToSign = () => {
+    if (!DataLock) {
+      setDataLock(true)
+      request({ ...apis.activitySign, args: { id: CurrnetId } }).then(() => {
+        Taro.showToast({ title: '签到成功', icon: 'none' })
+        setDataLock(false)
+        setHasSign(true)
+      }).catch((res) => {
+        Taro.showToast({ title: res, icon: 'none' })
+        setDataLock(false)
+      })
+    }
+  }
+
+  return (
+    <Page>
+      <view className='HuoDongSign'>
+        <image mode='widthFix' src={null}></image>
+        <view className={HasSign ? 'SignBtn' : 'SignBtn active'}>
+          <view>
+            <text className='centerLabel' onClick={ToSign}>{HasSign ? '已签到' : '签到'}</text>
+          </view>
+        </view>
+      </view>
+    </Page>
+  )
+}

src/pages/HuoDong/HuoDongSign/index.less

@@ -0,0 +1,89 @@
+.HuoDongSign {
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+
+  >image {
+    width: 100%;
+    height: auto;
+    display: block;
+    position: relative;
+    z-index: 1;
+  }
+
+  >.SignBtn {
+    width: 188px;
+    height: 188px;
+    position: absolute;
+    overflow: visible;
+    z-index: 2;
+    left: 50%;
+    bottom: 300px;
+    margin-left: -94px;
+
+    &::after {
+      content: '';
+      display: block;
+      width: 226px;
+      height: 226px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      -webkit-transform: translate(-50%, -50%);
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 100%;
+      z-index: 2;
+    }
+
+    &::before {
+      content: '';
+      display: block;
+      width: 264px;
+      height: 264px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      -webkit-transform: translate(-50%, -50%);
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 100%;
+      z-index: 1;
+    }
+
+    &.active {
+
+      &::after {
+        background: rgba(243, 88, 68, 0.3);
+      }
+
+      &::before {
+        background: rgba(243, 88, 68, 0.3);
+      }
+
+      >view {
+        background: rgba(243, 88, 68, 1);
+        >text {
+          color: #fff;
+        }
+      }
+    }
+
+    >view {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      z-index: 3;
+      border-radius: 100%;
+      background: rgba(255, 255, 255, 1);
+
+      >text {
+        font-size: 44px;
+        color: #999;
+        width: 100%;
+        white-space: nowrap;
+        text-align: center;
+      }
+    }
+  }
+}

src/utils/api.js

@@ -1,6 +1,10 @@
 const prefix = `${HOST}/api/wx`
 
 const $api = {
+  activitySign: { // 活动签到
+    method: 'put',
+    url: `${prefix}/buildingDynamicCheckin/:id`
+  },
   getIndexAdv: { // 获取首页广告
     method: 'get',
     url: `${prefix}/extendContent`