style

config/dev.js

@@ -3,6 +3,8 @@ module.exports = {
     NODE_ENV: '"development"'
   },
   defineConstants: {
+    HOST: '"http://192.168.89.25:8080"',
+
   },
   mini: {},
   h5: {}

config/prod.js

@@ -3,6 +3,8 @@ module.exports = {
     NODE_ENV: '"production"'
   },
   defineConstants: {
+    HOST: '"http://192.168.89.25:8080"',
+
   },
   mini: {},
   h5: {

package.json

@@ -41,6 +41,7 @@
     "@tarojs/react": "3.2.13",
     "@tarojs/runtime": "3.2.13",
     "@tarojs/taro": "3.2.13",
+    "@zjxpcyc/react-tiny-store": "^1.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

src/app.config.js

@@ -1,7 +1,8 @@
 export default {
   pages: [
     'pages/index/index',
-    'pages/topList/index'
+    'pages/topList/index',
+    'pages/topListCopy/index'
   ],
   window: {
     backgroundTextStyle: 'light',

src/app.js

@@ -1,19 +1,47 @@
 import { Component } from 'react'
+import Taro from '@tarojs/taro'
+import { userLogin } from './services/user'
+import store, { StoreRoot } from './store'
+
 import './app.less'
 
 class App extends Component {
 
-  componentDidMount () {}
 
-  componentDidShow () {}
 
-  componentDidHide () {}
+  componentDidMount() {
+    const { signIn } = store.getModel('useFoo').getState()
+
+    Taro.login({
+      success: (res) => {
+        const { code } = res;
+        signIn({ code })
+      }
+    }).catch(e => {
+      Taro.showToast({
+        title: '网络异常, 请退出重试',
+        icon: 'none',
+      })
+    })
+
+
+
+
+  }
+
+  componentDidShow() { }
+
+  componentDidHide() { }
 
-  componentDidCatchError () {}
+  componentDidCatchError() { }
 
   // this.props.children 是将要会渲染的页面
-  render () {
-    return this.props.children
+  render() {
+    return (
+      <StoreRoot>
+        {this.props.children}
+      </StoreRoot>
+    )
   }
 }
 

src/components/CanvasParty/index.jsx

@@ -0,0 +1,198 @@
+import { View, Text, Image, Canvas } from '@tarojs/components'
+import React, { useMemo, useState, useEffect } from 'react'
+import Taro from '@tarojs/taro'
+
+
+
+export default (props) => {
+
+
+
+  // let cvs =this.sharedCanvas.getContext('2d')
+
+  useEffect(() => {
+    Taro.nextTick(() => {
+      setTimeout(() => {
+
+        Taro.createSelectorQuery()
+          .select('#CanvasAnotherClass')
+          .fields({ node: true, size: true })
+          .exec((res) => {
+            const canvas = res[0].node
+
+            const context = canvas.getContext('2d')
+
+
+            const width = canvas.width = window.innerWidth;
+            const height = canvas.height = window.innerHeight;
+
+
+            // création d'un tableau
+            let particle = [];
+            const particleCount = 0;
+            const gravity = 0.3;
+            const colors = [
+              '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
+              '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
+              '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
+              '#FF5722', '#795548', '#000000'
+            ];
+
+
+
+            for (var i = 0; i < 300; i++) {
+
+              particle.push({
+                x: width / 2,
+                y: height / 2,
+                boxW: randomRange(5, 20),
+                boxH: randomRange(5, 20),
+                size: randomRange(2, 8),
+
+                spikeran: randomRange(3, 5),
+
+                velX: randomRange(-8, 8),
+                velY: randomRange(-50, -10),
+
+                angle: convertToRadians(randomRange(0, 360)),
+                color: colors[Math.floor(Math.random() * colors.length)],
+                anglespin: randomRange(-0.2, 0.2),
+
+                draw: function () {
+
+
+                  context.save();
+                  context.translate(this.x, this.y);
+                  context.rotate(this.angle);
+                  context.fillStyle = this.color;
+                  context.beginPath();
+                  // drawStar(0, 0, 5, this.boxW, this.boxH);
+                  context.fillRect(this.boxW / 2 * -1, this.boxH / 2 * -1, this.boxW, this.boxH);
+                  context.fill();
+                  context.closePath();
+                  context.restore();
+                  this.angle += this.anglespin;
+                  this.velY *= 0.999;
+                  this.velY += 0.3;
+
+                  this.x += this.velX;
+                  this.y += this.velY;
+                  if (this.y < 0) {
+                    this.velY *= -0.2;
+                    this.velX *= 0.9;
+                  };
+                  if (this.y > height) {
+                    this.anglespin = 0;
+                    this.y = height;
+                    this.velY *= -0.2;
+                    this.velX *= 0.9;
+                  };
+                  if (this.x > width || this.x < 0) {
+
+                    this.velX *= -0.5;
+                  };
+
+                },
+
+
+              });
+
+            }
+            const r1 = {
+              x: width / 2 - 150,
+              y: height / 2 - 150,
+
+              velX: 0,
+              velY: -10,
+              alphatop: 0
+            };
+
+
+            function drawScreen() {
+              const size = 50;
+              const pFontName = "Lucida Sans Unicode";
+              context.font = size + "pt " + pFontName;
+              // context.fillText("Confetti party !!!", width / 2, 150);
+              if (r1.alphatop < 1) {
+                r1.alphatop += 0.01;
+              } else {
+                r1.alphatop = 1;
+              }
+              context.globalAlpha = r1.alphatop;
+              context.textAlign = 'center';
+
+
+
+              if (r1.alphatop === 1) {
+                r1.velY *= 0.999;
+                r1.velY += 0.3;
+
+                r1.x += r1.velX;
+                r1.y += r1.velY;
+                setTimeout(() => {
+                  particle = []
+
+                }, 2700);
+
+              }
+
+              if (r1.y + r1.height > height) {
+                r1.anglespin = 0;
+                r1.y = height - r1.height;
+                r1.velY *= -0.8;
+                r1.velX *= 0.9;
+
+              };
+
+              context.globalAlpha = 1;
+              for (var i = 0; i < particle.length; i++) {
+                particle[i].draw();
+
+
+              }
+
+            }
+
+            function update() {
+
+
+              context.clearRect(0, 0, width, height);
+
+              drawScreen();
+
+              requestAnimationFrame(update);
+            }
+
+            update();
+
+
+            function randomRange(min, max) {
+              return min + Math.random() * (max - min);
+            }
+
+
+
+            function convertToRadians(degree) {
+              return degree * (Math.PI / 180);
+
+            }
+
+
+
+
+          })
+      }, 1000);
+
+
+
+    })
+
+  }, [])
+
+
+  return (
+
+    <Canvas id='CanvasAnotherClass' type='2d'></Canvas>
+
+  )
+}

src/pages/index/components/TopBar/index.jsx

@@ -1,6 +1,7 @@
-import { View } from '@tarojs/components'
+import { View, Image } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import React from 'react'
+import Top10 from '@/components/assets/Top10.png'
 // import { Tab, Tabs } from '@antmjs/vantui';
 
 import './style.less'
@@ -9,13 +10,16 @@ export default (props) => {
 
   const showTopList = () => {
     console.log('----------------------')
-    Taro.navigateTo({ url: '/pages/topList/index' })
+    // Taro.navigateTo({ url: '/pages/topList/index' })
+    Taro.navigateTo({ url: '/pages/topListCopy/index' })
   }
 
   return (
     <View className='top-list'>
+      <Image src={Top10} className='top-list-image' />
+
       <View className='top-list-item' onClick={showTopList}>高分榜</View>
-      <View className='top-list-item'>低分榜</View>
+
     </View>
   )
 }

src/pages/index/components/TopBar/style.less

@@ -6,17 +6,23 @@
   border: 2px solid rgba(255, 255, 255, 0.4);
   color: #fff;
   font-size: 1em;
-  float: right;
-  margin-top: 5vh;
-  margin-right: 5vw;
+  float: left;
+  margin-top: 10vh;
+  margin-left: 4vw;
+  align-items: center;
+  &-image {
+    width: 48px;
+    height: 48px;
+    margin-left: 20px;
+  }
 
   &-item {
     display: inline-block;
     flex: 1;
-    padding: .5em 1em;
+    padding: 0.5em 0.7em;
 
     & + & {
       border-left: 2px solid rgba(255, 255, 255, 0.4);
     }
   }
-}
+}

src/pages/index/hooks/useCountDown.js

@@ -15,7 +15,7 @@ export default function useCountDown() {
 
   const start = useCallback((startNum) => {
     numRef.current = startNum
-    setVal(startNum)
+    setVal(3)
   }, [])
 
   return [val, countDown, start]

src/pages/index/hooks/useShake.js

@@ -15,7 +15,7 @@ export default function useShake() {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const handleShake = useCallback(throttle((val) => {
     setTimes(val)
-  }, 1000, { trailing: true, immediate: true }), [])
+  }, 1300, { trailing: true, immediate: true }), [])
 
   const start = useCallback(() => {
     isReadyRef.current = true
@@ -24,7 +24,7 @@ export default function useShake() {
   }, [])
 
   const handleEndRef = useRef()
-  const onEnd = useCallback(callback => handleEndRef.current = callback, []) 
+  const onEnd = useCallback(callback => handleEndRef.current = callback, [])
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -44,8 +44,8 @@ export default function useShake() {
     }, 1000)
 
     return () => clearInterval(interval)
-  },[])
-  
+  }, [])
+
   useDidShow(() => {
     Taro.startAccelerometer()
 

src/pages/index/index.config.js

@@ -1,3 +1,5 @@
 export default {
-  navigationBarTitleText: '首页'
+  navigationBarTitleText: '首页',
+  navigationStyle: 'custom'
+
 }

src/pages/index/index.jsx

@@ -1,21 +1,30 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react';
+import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components'
 import Counter from '@/components/Counter'
 import { Button } from '@antmjs/vantui';
 import useInterval from '@/hooks/useInterval';
+import { score } from '../../services/user';
+
 import TopBar from './components/TopBar'
 import useCountDown from './hooks/useCountDown';
 import useShake from './hooks/useShake';
+import { useModel } from '../../store'
+
 import './index.less'
 
 const IndexPage = (props) => {
   const modRef = useRef('ready')
+
   const [num, setNum] = useState(0)
   const [btnDisable, setBtnDisable] = useState(false)
+  const { getAvatar, sessionKey, person } = useModel('useFoo')
+  const [buttonTitle, setbuttonTitle] = useState(true)
+  console.log("🚀 ~ file: index.jsx ~ line 23 ~ IndexPage ~ person", person)
 
   // 定时器
-  const [add2TickerList] = useInterval(1000)
+  const [add2TickerList] = useInterval(1400)
 
   // 倒计时
   const [count, countFn, startCount] = useCountDown();
@@ -23,17 +32,75 @@ const IndexPage = (props) => {
 
   // 摇一摇
   const [times, startShake, onShakeEnd] = useShake()
+
   onShakeEnd(() => {
     // 摇一摇结束
-    modRef.current = 'ready'
-    setBtnDisable(false)
+
+    Taro.showToast({
+      title: '游戏结束',
+      icon: 'none',
+      duration: 2000
+
+
+    }).then(e => {
+      score({ personId: person?.personId, createDate: person?.createDate, score: times }).then(e => {
+        modRef.current = 'ready'
+        setBtnDisable(false)
+        console.log(" 摇一摇结束")
+        setbuttonTitle(false)
+
+
+      })
+
+    })
+
     // do something
   })
 
+
+
   const handleStart = () => {
-    modRef.current = 'countdown'
-    startCount(3)
-    setBtnDisable(true)
+
+    if (!person?.avatar) {
+      Taro.getUserProfile({
+        lang: 'zh_CN',
+        desc: "获取你的昵称、头像、地区及性别",
+        success: (res) => {
+          const data = {
+            encryptedData: res.encryptedData,
+            iv: res.iv,
+            rawData: res.rawData,
+            sessionKey: sessionKey,
+            signature: res.signature
+          }
+          getAvatar(data)
+          Taro.showToast({
+            title: '授权头像成功',
+            icon: 'success',
+            duration: 2000
+          })
+
+
+        },
+        fail: () => {
+          //拒绝授权
+          console.error("拒绝了请求");
+          return;
+        }
+      })
+    } else {
+
+      modRef.current = 'countdown'
+      startCount(3)
+      setBtnDisable(true)
+    }
+
+
+
+
+
+
+
   }
 
   useEffect(() => {
@@ -64,8 +131,8 @@ const IndexPage = (props) => {
           color='linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36))'
           onClick={handleStart}
           disabled={btnDisable}
-        >开 始</Button>
-      </View>      
+        >{buttonTitle ? '开始游戏' : '继续游戏'}</Button>
+      </View>
     </View>
   )
 }

src/pages/topListCopy/components/Topic1/index.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+import { Image } from '@antmjs/vantui'
+import Crown from '@/components/assets/Crown.png'
+import numFormat from '@/utils/numFormat'
+
+import './style.less'
+
+export default (props) => {
+  const { list } = props
+  console.log("🚀 ~ file: index.jsx ~ line 11 ~ list", list)
+
+
+  return (
+
+    <View className='section_3'>
+      <View className='Top-Rank-one'>
+        <View className='Top-name'>排名</View>
+        <View className='Top-Number' >1</View>
+      </View>
+      <View className='section_1'>
+        <Image className='section_img' src={Crown} />
+        <image className='section2_img' src={list[0]?.avatar} />
+
+        <View className='user-name'>{list[0]?.nickName} </View>
+      </View>
+      <View className='Shaking-box'>
+        <View className='Shaking-name'>次数</View>
+        <View className='Shaking-Number'>{numFormat(list[0]?.score)}</View>
+      </View>
+    </View>
+  )
+}

src/pages/topListCopy/components/Topic1/style.less

@@ -0,0 +1,95 @@
+@font-face {
+  font-family: "Cunia";
+  src: url("../../../../components/familys/Cunia-Bold.woff2") format("woff2"),
+    url("../../../../components/familys/Cunia-Bold.woff") format("woff");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+.section_3 {
+  display: flex;
+  text-align: center;
+  background-color: #fff;
+  // background-color: #ffda4d;//金色
+  // background-color: #ff5085;//粉色
+  background-image: linear-gradient(to right, #ff3974, #ff5085);
+  border-radius: 0.47rem;
+  width: 92%;
+  margin: 0 auto;
+  top: 1em;
+
+  box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+
+  .Top-Rank-one {
+    width: 30%;
+    margin-top: 2em;
+
+    .Top-name {
+      color: rgb(241, 241, 241);
+      font-size: 30px;
+    }
+    .Top-Number {
+      margin-top: 0.6em;
+      font-family: "Cunia";
+      color: white;
+      font-weight: 800;
+      font-size: 40px;
+    }
+  }
+
+  .section_1 {
+    width: auto;
+    margin-top: 1.3em;
+
+    // .img-box {
+    //   width: 100%;
+    //   height: auto;
+
+    .section_img {
+      width: 2.5em;
+      height: 2.5em;
+      position: absolute;
+      transform: rotate(50deg);
+      left: 53.4vw;
+      top: 20vw;
+    }
+
+    .section2_img {
+      margin: auto;
+      width: 4.5em;
+      height: 4.5em;
+      border: 3px solid white;
+      border-radius: 50%;
+    }
+    // }
+
+    .user-name {
+      padding-bottom: 0.8em;
+      margin: auto;
+      width: 100%;
+      margin-top: 1.2em;
+      color: white;
+      font-size: 1.4em;
+      font-weight: 700;
+    }
+  }
+
+  .Shaking-box {
+    width: 30%;
+    margin-top: 2em;
+
+    .Shaking-name {
+      color: rgb(241, 241, 241);
+      font-size: 30px;
+      font-family: "Cunia";
+    }
+    .Shaking-Number {
+      font-family: "Cunia";
+      margin-top: 0.6em;
+      color: white;
+      // font-weight: 800;
+      font-size: 40px;
+    }
+  }
+}

src/pages/topListCopy/components/TopicItem/index.jsx

@@ -0,0 +1,30 @@
+import React, { useMemo } from 'react'
+import { View } from '@tarojs/components'
+import { Image } from '@antmjs/vantui'
+import './style.less'
+
+export default (props) => {
+  const { info, num } = props
+  const { avatar, nickname, score } = info || {}
+
+  const size = 64
+
+  const avatarStyle = useMemo(() => {
+    return {
+      width: `${size}px`
+    }
+  }, [size])
+
+  return (
+    <View className='topic-item flex-box'>
+      <View className='topic-item-num flex-box-item-fixed'>{num}</View>
+      <View className='flex-box topic-item-border flex-box-item'>
+        <View className='flex-box-item-fixed topic-item-avatar' style={avatarStyle}>
+          <Image src={avatar} width={size} height={size} round></Image>
+        </View>
+        <View className='flex-box-item topic-item-nickname'>{nickname}</View>
+        <View className='flex-box-item topic-item-score'>{score}</View>
+      </View>
+    </View>
+  )
+}

src/pages/topListCopy/components/TopicItem/style.less

@@ -0,0 +1,46 @@
+@import '../../../../theme.less';
+
+@numWidth : 80rpx;
+@tpHeight : 120rpx;
+
+.topic-item {
+  position: relative;
+  width: 100%;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  height: @tpHeight;
+  color: @primary-color;
+  background: #fff;
+
+  &-num {
+    width: @numWidth;
+    text-align: center;
+    line-height: @tpHeight;
+    font-size: 1.2em;
+    font-weight: bold;
+  }
+
+  &-avatar {
+    display: flex;
+    align-items: center;
+  }
+
+  &-nickname {
+    font-size: 1em;
+    line-height: @tpHeight;
+  }
+
+  &-score {
+    text-align: right;
+    font-size: 1.2em;
+    font-weight: bold;
+    line-height: @tpHeight;
+    padding-right: 2em;
+  }
+
+  & + & {
+    .topic-item-border {
+      border-top: 1rpx solid #ccc;
+    }
+  }
+}

src/pages/topListCopy/index.config.js

@@ -0,0 +1,6 @@
+export default {
+  navigationBarTitleText: '排行榜',
+  disableScroll: true,
+
+  navigationStyle: 'custom'
+}

src/pages/topListCopy/index.jsx

@@ -0,0 +1,101 @@
+import { View, Text, Image, Canvas } from '@tarojs/components'
+import React, { useMemo, useState, useEffect } from 'react'
+import Taro from '@tarojs/taro'
+import CanvasPart from '@/components/CanvasParty'
+import numFormat from '@/utils/numFormat'
+
+import Topic1 from './components/Topic1'
+import TopicItem from './components/TopicItem'
+import { scoreTop } from '../../services/user'
+
+import './style.less'
+
+
+export default (props) => {
+
+  const [list, setList] = useState([])
+  const menuBtnBounding = useMemo(() => Taro.getMenuButtonBoundingClientRect(), [])
+  const style = useMemo(() => {
+    const top = menuBtnBounding.height + menuBtnBounding.top
+
+    return {
+      paddingTop: `${top}px`
+    }
+  }, [menuBtnBounding.height, menuBtnBounding.top])
+
+  // const [first, leftData] = useMemo(() => {
+  //   const [f, ...l] = list || []
+  //   return [f, l]
+  // }, [list])
+
+
+  useEffect(() => {
+    scoreTop().then(e => {
+      setList(e)
+    })
+
+  }, [])
+
+
+
+  return (
+    <View className='page-wrapper page-topListCopy' style={style}>
+
+      <Topic1 list={list} />
+      <View className='TopConten-box'>
+        <View className='title-name'>排名</View>
+        <View className='title-name'>用户</View>
+        <View className='title-name'>昵称</View>
+        <View className='title-name'>次数</View>
+      </View>
+      {/* #B99764  铜牌
+      #C9C9CF */}
+
+      <scroll-view scrollY style={{ height: '100%', marginTop: '1em' }}>
+
+
+
+        {
+          list.map((item, index) => {
+            console.log("🚀 ~ file: index.jsx ~ line 60 ~ list.map ~ index", index)
+
+            const styles = {
+              backgroundColor: '#C9C9CF',
+              animationDelay: `${100 * index + 80}ms`
+            }
+            if (index >= 1) {
+              return (
+
+                <View key={index} className='UserContent-box' style={styles}>
+                  <View className='topsum'>{index + 1}</View>
+                  <Image style={{
+                    width: '47px',
+                    height: '47px',
+                    borderRadius: '50%',
+                    position: 'absolute',
+                    left: '8.3em'
+
+                  }} src={item.avatar}
+                  />
+                  <View className='topNumber-name'>
+                    {item.nickName}
+                  </View>
+                  <View className='topNumber-text'>
+                    {numFormat(item.score)}
+
+                  </View>
+                </View>
+              )
+            }
+
+
+          })
+        }
+      </scroll-view>
+
+
+
+
+    </View>
+  )
+}

src/pages/topListCopy/style.less

@@ -0,0 +1,92 @@
+@font-face {
+  font-family: "Cunia";
+  src: url("../../components/familys/Cunia-Bold.woff2") format("woff2"),
+    url("../../components/familys/Cunia-Bold.woff") format("woff");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+.page-topListCopy {
+  background-color: white;
+
+  .TopConten-box {
+    display: flex;
+    align-items: center;
+    width: 92%;
+    height: 6%;
+    background-color: rgba(85, 123, 226, 1);
+    border-radius: 10px;
+    margin: 5em auto 0;
+
+    .title-name {
+      color: white;
+      font-size: 30px;
+      flex: 4;
+      text-align: center;
+    }
+  }
+  .UserContent-box {
+    animation: TopConten-box 1.3s 1 cubic-bezier(0.215, 0.61, 0.355, 1);
+    align-items: center;
+    display: flex;
+    width: 92%;
+    height: 115.47px;
+    background-color: rgba(255, 255, 255, 1);
+    border-radius: 14px;
+    box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+    margin: 0.8em auto 0;
+    flex: 4;
+
+    .topsum {
+      font-family: "Cunia";
+      font-size: 30px;
+      position: absolute;
+      left: 3.5em;
+    }
+    .topNumber-name {
+      font-family: "Cunia";
+      font-size: 30px;
+      position: absolute;
+      left: 13em;
+      width: 180px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+    .topNumber-text {
+      font-family: "Cunia";
+      font-size: 30px;
+      position: absolute;
+      left: 20em;
+    }
+  }
+}
+
+@keyframes TopConten-box {
+  0% {
+    opacity: 0;
+    transform: translate3d(-3000px, 0, 0);
+  }
+  60% {
+    opacity: 1;
+    transform: translate3d(25px, 0, 0);
+  }
+  75% {
+    transform: translate3d(-10px, 0, 0);
+  }
+  90% {
+    transform: translate3d(5px, 0, 0);
+  }
+  100% {
+    transform: none;
+  }
+}
+canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 20px;
+  top: -10;
+  z-index: 0;
+}

src/services/user.js

@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+/**
+ * 登录
+ * @param {*} id 
+ * @returns 
+ * loginParam
+ */
+export const userLogin = (code) => request(`/ma/login?code=${code}`, { method: 'post' })
+
+
+/**
+ * 授权头像
+ * @param {*} data 
+ * @returns 
+ */
+export const authAvatar = (data) => request('/ma/auth-user', { data, method: 'put' })
+
+/**
+ * 摇一摇结束
+ * @param {*} data 
+ * @returns 
+ */
+export const score = (data) => request('/ma/score', { data, method: 'post' })
+
+
+
+/**
+ * 摇一摇结束
+ * @param {*} data 
+ * @returns 
+ */
+export const scoreTop = () => request('/score/top',)
+

src/store/index.js

@@ -0,0 +1,20 @@
+import { createStoreRoot, createModelHook, createStore } from '@zjxpcyc/react-tiny-store'
+
+import useBar from './models/useBar'
+import useFoo from './models/useFoo'
+
+const store = createStore()
+const models = {
+  useBar,
+  useFoo,
+}
+const StoreRoot = createStoreRoot(store, models)
+const useModel = createModelHook(store)
+
+
+export default store
+export {
+  StoreRoot,
+  useModel,
+
+}

src/store/models/useBar.js

@@ -0,0 +1,10 @@
+import { useState } from "react";
+
+export default function useSystem() {
+  const [messageTpls, setMessageTpls] = useState([])
+
+  return {
+    messageTpls,
+    setMessageTpls,
+  }
+}

src/store/models/useFoo.js

@@ -0,0 +1,45 @@
+import { useState } from "react"
+import Taro, { stopDeviceMotionListening } from '@tarojs/taro'
+import { userLogin, authAvatar } from '../../services/user'
+
+
+
+
+export default function useUser() {
+  const [user, setUser] = useState({})
+  const [person, setPerson] = useState()
+  const [sessionKey, setSessionKey] = useState()
+
+
+
+  const signIn = (params) => {
+    userLogin(params.code).then((res) => {
+      const { person: taPerson, skey, token } = res;
+      setPerson(taPerson);
+      setSessionKey(skey);
+
+      Taro.setStorage({ key: 'token', data: token })
+    })
+  }
+
+  const signOut = () => {
+    // xxx
+  }
+
+  const getAvatar = (data) => {
+    return authAvatar(data).then((res) => {
+      setPerson(res);
+    })
+  }
+
+  return {
+    user,
+    person,
+    sessionKey,
+
+    signIn,
+    signOut,
+    getAvatar,
+
+  }
+}

src/utils/index.js

@@ -1,35 +1,57 @@
 
 export function throttle(fn, delay, options = {}) {
-  let timer = null;
-  let last = 0;
-
-  return function() {
-      const context = this;
-      const args = arguments;
-
-      const now = +new Date();
-      
-      if (last === 0 && options.immediate === false) {
-          last = now;
-      }
-
-      const offset = now - last;
-
-      if (offset > delay) {
-          if (timer) {
-              clearTimeout(timer);
-              timer = null;
-          }
-
-          last = now;
-          fn.apply(context, args);
-      }
-      else if (!timer && options.trailing !== false) {
-          timer = setTimeout(() => {
-              last = options.immediate === false ? 0 : +new Date();;
-              timer = null;
-              fn.apply(context, args);
-          }, delay - offset);
-      }
-  };
+    let timer = null;
+    let last = 0;
+
+    return function () {
+        const context = this;
+        const args = arguments;
+
+        const now = +new Date();
+
+        if (last === 0 && options.immediate === false) {
+            last = now;
+        }
+
+        const offset = now - last;
+
+        if (offset > delay) {
+            if (timer) {
+                clearTimeout(timer);
+                timer = null;
+            }
+
+            last = now;
+            fn.apply(context, args);
+        }
+        else if (!timer && options.trailing !== false) {
+            timer = setTimeout(() => {
+                last = options.immediate === false ? 0 : +new Date();;
+                timer = null;
+                fn.apply(context, args);
+            }, delay - offset);
+        }
+    };
+}
+
+
+
+/**
+ * object 转 queryStr
+ * @param {*} params 
+ * @returns 
+ */
+export function getQueryString(params) {
+    if (!params) return;
+
+    const keys = Object.keys(params)
+    const arr = keys.map((key) => {
+        const val = params[key]
+        if (val === null || val === undefined) return false;
+
+        return `${key}=${encodeURIComponent(val)}`
+    })
+
+    return arr.filter(Boolean).join('&')
 }
+

src/utils/numFormat.js

@@ -0,0 +1,20 @@
+//大于1k会自动转换为1k digits是小数点保留位数
+
+export default function numFormat(num, digits) {
+  var si = [
+    { value: 1, symbol: "" },
+    { value: 1E3, symbol: "k" },
+    { value: 1E4, symbol: "W" }
+  ];
+  var rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
+  var i;
+  for (i = si.length - 1; i > 0; i--) {
+    if (num >= si[i].value) {
+      break;
+    }
+  }
+  return (num / si[i].value).toFixed(digits).replace(rx, "$1") + si[i].symbol;
+
+
+
+}

src/utils/request.js

@@ -0,0 +1,53 @@
+import Taro from "@tarojs/taro";
+import { getQueryString } from ".";
+
+
+
+export default (url, options) => {
+  const { params, header, ...leftOptions } = options || {}
+
+
+  const queryStr = getQueryString(params)
+
+  const urlWithParams = queryStr ? `${url}?${queryStr}` : url;
+  const nwUrl = `${HOST}/api${urlWithParams}`
+
+  const authToken = Taro.getStorageSync('token')
+  const tokenHeader = authToken ? { 'X-Authorization-JWT': authToken } : {}
+  const nwHeader = {
+    ...(header || {}),
+    ...tokenHeader,
+  }
+
+
+
+
+  return new Promise((resolve, reject) => {
+    Taro.request({
+      ...leftOptions,
+      url: nwUrl,
+      header: nwHeader,
+      success: (res) => {
+        const { code, message, data, token } = res.data
+        if (token || data?.token) {
+          Taro.setStorage({ key: 'token', data: token || data?.token })
+        }
+        if (code === 1000) {
+          resolve(data)
+        } else {
+          console.error(res)
+
+
+          reject(message?.indexOf('java') > -1 ? '系统内部错误' : message)
+        }
+      },
+
+      fail: (err) => {
+        const message = err.message || err.errMsg || err
+
+        reject(message)
+      }
+    })
+  })
+
+}

yarn.lock

@@ -1827,6 +1827,13 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
+"@zjxpcyc/react-tiny-store@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/@zjxpcyc/react-tiny-store/download/@zjxpcyc/react-tiny-store-1.0.0.tgz#316a2a0336273c1c014bf2f55a513583770c7181"
+  integrity sha1-MWoqAzYnPBwBS/L1WlE1g3cMcYE=
+  dependencies:
+    fast-deep-equal "^3.1.3"
+
 abab@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
@@ -4629,10 +4636,10 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.1.tgz#8d172c064867f235c0c84a596806d279bf4bcc07"
   integrity sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==
 
-fast-deep-equal@^3.1.1:
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
-  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+  resolved "https://registry.nlark.com/fast-deep-equal/download/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU=
 
 fast-glob@^2.0.2:
   version "2.2.7"