Frontend

client/package.json

@@ -34,43 +34,51 @@
     "@babel/runtime": "^7.7.7",
     "@tarojs/components": "3.6.6",
     "@tarojs/helper": "3.6.6",
-    "@tarojs/plugin-platform-weapp": "3.6.6",
+    "@tarojs/plugin-framework-react": "3.6.6",
     "@tarojs/plugin-platform-alipay": "3.6.6",
-    "@tarojs/plugin-platform-tt": "3.6.6",
-    "@tarojs/plugin-platform-swan": "3.6.6",
+    "@tarojs/plugin-platform-h5": "3.6.6",
     "@tarojs/plugin-platform-jd": "3.6.6",
     "@tarojs/plugin-platform-qq": "3.6.6",
-    "@tarojs/plugin-platform-h5": "3.6.6",
+    "@tarojs/plugin-platform-swan": "3.6.6",
+    "@tarojs/plugin-platform-tt": "3.6.6",
+    "@tarojs/plugin-platform-weapp": "3.6.6",
+    "@tarojs/react": "3.6.6",
+    "@tarojs/redux": "^2.2.10",
     "@tarojs/runtime": "3.6.6",
     "@tarojs/shared": "3.6.6",
     "@tarojs/taro": "3.6.6",
+    "dva": "^2.4.1",
+    "dva-core": "^2.0.4",
+    "dva-immer": "^1.0.1",
+    "dva-loading": "^3.0.24",
     "lodash": "4.17.15",
-    "@tarojs/plugin-framework-react": "3.6.6",
-    "@tarojs/react": "3.6.6",
+    "moment": "^2.29.4",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-redux": "^8.1.0",
+    "redux-logger": "^3.0.6"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@tarojs/cli": "3.6.6",
-    "webpack": "^5.78.0",
     "@tarojs/webpack5-runner": "3.6.5",
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.0",
     "@types/webpack-env": "^1.13.6",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
     "babel-preset-taro": "3.6.6",
     "eslint": "^8.12.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "react-refresh": "^0.11.0",
-    "@types/react": "^18.0.0",
-    "eslint-plugin-react": "^7.8.2",
+    "eslint-config-taro": "3.6.6",
     "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "@typescript-eslint/parser": "^5.20.0",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
-    "typescript": "^4.1.0",
-    "eslint-config-taro": "3.6.6",
-    "stylelint": "9.3.0",
     "postcss": "^8.4.18",
+    "react-refresh": "^0.11.0",
+    "stylelint": "9.3.0",
     "ts-node": "^10.9.1",
-    "@types/node": "^18.15.11"
+    "typescript": "^4.1.0",
+    "webpack": "^5.78.0"
   }
 }

client/src/app.config.ts

@@ -1,12 +1,28 @@
 export default {
   pages: [
-    'pages/index/index'
+    'pages/index/index',
+    'pages/myPage/index'
   ],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',
     navigationBarTitleText: 'WeChat',
     navigationBarTextStyle: 'black'
   },
-  cloud: true
+  tabBar: {
+    color: '#666',
+    selectedColor: '#1684FC',
+    backgroundColor: '#fff',
+    list: [
+      {
+        pagePath: 'pages/index/index',
+        text: '卡包'
+      },
+      {
+        pagePath: 'pages/myPage/index',
+        text: '我的'
+      }
+    ]
+  },
+  cloud: true,
 }

client/src/app.tsx

@@ -0,0 +1,23 @@
+import { FC, ReactNode, useEffect } from 'react'
+import Taro from '@tarojs/taro'
+import './app.less'
+
+const App: FC = ({ children }: { children: ReactNode }) => {
+  useEffect(() => {
+    if (process.env.TARO_ENV === 'weapp') {
+      Taro.cloud.init()
+    }
+    Taro.loadFontFace({
+      global: true,
+      family: 'Alibaba Puhui',
+      source: 'url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi/Alibaba-PuHuiTi-Regular/Alibaba-PuHuiTi-Regular.otf)'
+    })
+  }, [])
+
+  //TODO: User信息放入全局model
+  return (
+      <>{children}</>
+  );
+}
+
+export default App

client/src/dvaCore/index.ts

@@ -0,0 +1,25 @@
+import { create } from 'dva-core'
+import { createLogger } from 'redux-logger'
+import immer from 'dva-immer'
+
+let app
+const createApp = opt => {
+  opt.onAction = [createLogger()]
+  const app = create(opt)
+  app.use(immer())
+  if (!global.registered) opt.models.forEach(model => app.model(model))
+  global.registered = true
+  app.start()
+  const store = app._store
+  app.getStore = () => store
+  const dispatch = store.dispatch
+  app.dispatch = dispatch
+  return app
+}
+
+export default {
+  createApp,
+  getDispatch() {
+    return app.dispatch
+  },
+}

client/src/pages/index/index.js

@@ -0,0 +1,192 @@
+import Taro, { Config } from '@tarojs/taro'
+import { View, Text } from '@tarojs/components'
+import './index.less'
+import { Swiper, SwiperItem } from '@tarojs/components'
+import { useState, useEffect, Component } from 'react'
+import moment from 'moment';
+
+const cardType = {
+  guest: '散客',
+  seasonal: '季卡',
+  annual: '年卡',
+  times: '次卡'
+}
+
+function Index({ }) {
+  const [wallet, setWallet] = useState([]);
+  const [id, setId] = useState(null);
+  const [currentCard, setCurrentCard] = useState(0);
+  const [checkInStatus, setCheckInStatus] = useState(false);
+  const [isCheckingIn, setIsCheckingIn] = useState(false);
+
+  useEffect(() => {
+    Taro.getStorage({
+      key: 'id',
+      fail: function () {
+        login();
+      },
+      success: function (res) {
+        setId(res.data);
+        getValidCards(res.data);
+        getCheckInStatus(res.data);
+      },
+    })
+  }, []);
+
+  const login = () => {
+    Taro.cloud
+      .callFunction({
+        name: "login",
+      })
+      .then(res => {
+        if (res.result !== null) {
+          const { id } = res.result;
+          Taro.setStorage({
+            key: "id",
+            data: res.result.id
+          });
+        }
+      })
+  }
+
+  const getValidCards = (userId) => {
+    Taro.cloud
+      .callFunction({
+        name: "card",
+        data: {
+          action: "getValidCards",
+          data: {
+            id: userId
+          }
+        }
+      })
+      .then(res => {
+        if (res.result !== null) {
+          setWallet(res.result);
+        }
+      })
+  }
+
+  const getCheckInStatus = (userId) => {
+    Taro.cloud
+      .callFunction({
+        name: "checkin",
+        data: {
+          action: "getCheckInStatus",
+          data: {
+            id: userId
+          }
+        }
+      })
+      .then(res => {
+        if (res.result !== null) {
+          const { isCheckedIn } = res.result;
+          setCheckInStatus(isCheckedIn);
+        }
+      })
+  }
+
+  const checkIn = () => {
+    if (isCheckingIn) {
+      return;
+    }
+
+    setIsCheckingIn(true);
+    Taro.cloud
+      .callFunction({
+        name: "checkin",
+        data: {
+          action: "checkin",
+          data: {
+            id: id,
+            cardId: wallet[currentCard].id
+          }
+        }
+      })
+      .then(res => {
+        if (res.result !== null) {
+          getValidCards(id);
+          setCheckInStatus(true);
+          Taro.showToast({
+            title: '打卡成功',
+            icon: 'success',
+            duration: 2000
+          })
+        } else {
+          Taro.showToast({
+            title: '打卡失败',
+            icon: 'error',
+            duration: 2000
+          })
+        }
+        setIsCheckingIn(false);
+      })
+  }
+
+  const revoke = () => {
+    Taro.cloud
+      .callFunction({
+        name: "checkin",
+        data: {
+          action: "revokeCheckIn",
+          data: {
+            id: id
+          }
+        }
+      })
+      .then(res => {
+        console.log(res);
+      })
+  }
+
+
+  return (
+    <View className='main'>
+      <Swiper
+        className='swipers'
+        indicatorColor='#DDD'
+        indicatorActiveColor='#333'
+        circular
+        onChange={({ detail: { current } }) => setCurrentCard(current)}
+        indicatorDots>
+        {wallet.map((item) => {
+          return (
+            <View>
+              <SwiperItem>
+                <View className={`swiper ${item.type}`}>
+                  <View className='cardType'>
+                    {cardType[item.type]}
+                  </View>
+                  <View className='cardInfo'>
+                    <View>状态：{item.activation != null ? '已激活' : '未激活'}</View>
+                    <View>有效期至：{item.expiration != null ? moment(item.expiration).format("YYYY-MM-DD") : '-'}</View>
+                    <View>有效次数：{item.balance != null ? item.balance : '#'} 次</View>
+                  </View>
+                </View>
+              </SwiperItem>
+            </View>
+          )
+        })}
+      </Swiper>
+
+      {
+        checkInStatus ? (
+          <View className='checkIn checked'>
+            已打卡
+          </View>
+        ) : (
+          <View className='checkIn unchecked' onClick={checkIn}>
+            打卡
+          </View>
+        )
+      }
+    </View>
+  )
+}
+
+Index.config = {
+  navigationBarTitleText: '卡包',
+  usingComponent: {}
+}
+
+export default Index;