Browse Source

add date progress use progress component

charblus 5 years ago
parent
commit
fb6b9e0ed6
5 changed files with 106 additions and 25 deletions
  1. 9 9
      build/webpack.base.conf.js
  2. 15 0
      src/App.vue
  3. 54 0
      src/components/YearProgress.vue
  4. 1 1
      src/main.js
  5. 27 15
      src/pages/me/Me.vue

+ 9 - 9
build/webpack.base.conf.js

@@ -54,15 +54,15 @@ let baseWebpackConfig = {
   },
   module: {
     rules: [
-      // {
-      //   test: /\.(js|vue)$/,
-      //   loader: 'eslint-loader',
-      //   enforce: 'pre',
-      //   include: [resolve('src'), resolve('test')],
-      //   options: {
-      //     formatter: require('eslint-friendly-formatter')
-      //   }
-      // },
+      {
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [resolve('src'), resolve('test')],
+        options: {
+          formatter: require('eslint-friendly-formatter')
+        }
+      },
       {
         test: /\.vue$/,
         loader: 'mpvue-loader',

+ 15 - 0
src/App.vue

@@ -1,9 +1,24 @@
 
 <script>
+import {showSuccess} from '@/util'
 import config from '@/config'
 import qcloud from 'wafer2-client-sdk'
 export default {
   async created () {
+    let user = wx.getStorageSync('userInfo')
+    if (!user) {
+      qcloud.setLoginUrl(config.loginUrl)
+      qcloud.login({
+        success: function (userInfo) {
+          showSuccess('登录成功')
+          wx.setStorageSync('userInfo', userInfo)
+        },
+        fail: function (err) {
+          console.log('登录失败', err)
+        }
+      })
+    }
+
     // const res = await get('/weapp/demo')
     // console.log(123, res)
     // wx.request({

+ 54 - 0
src/components/YearProgress.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="progressbar">
+    
+    <progress :percent="percent" activeColor="#EA5A49" show-info />
+    <p>{{year}}已经过去{{days}}天</p>
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    isLeapYear () {
+      const year = new Date().getFullYear()
+      if (year % 400 === 0) {
+        return true
+      } else if (year % 4 === 0 && year % 100 !== 0) {
+        return true
+      } else {
+        return false
+      }
+    },
+    getDayOfYear () {
+      return this.isLeapYear() ? 366 : 365
+    }
+  },
+  computed: {
+    year () {
+      return new Date().getFullYear()
+    },
+    days () {
+      let start = new Date()
+      start.setMonth(0)
+      start.setDate(1)
+      // start 就是今年第一天
+      // 今年时间戳 - 今年第一天时间戳
+      let offset = new Date().getTime() - start.getTime()
+      return parseInt(offset / 1000 / 60 / 60 / 24) + 1
+    },
+    percent () {
+      return (this.days * 100 / this.getDayOfYear()).toFixed(1)
+    }
+  }
+}
+</script>
+<style lang='scss'>
+.progressbar{
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 40px;
+  width: 100%;
+  progress {
+    margin-bottom: 10px;
+  }
+}
+</style>

+ 1 - 1
src/main.js

@@ -7,7 +7,7 @@ app.$mount()
 
 export default{
   config: {
-    pages: ['^pages/books/main'],
+    pages: ['^pages/me/main'],
     'window': {
       'backgroundTextStyle': 'light',
       'navigationBarBackgroundColor': '#EA5149',

+ 27 - 15
src/pages/me/Me.vue

@@ -1,38 +1,51 @@
 <template>
   <div class="container">
-    <button open-type="getUserInfo" @click="login">用户信息</button>
+    <button  open-type="getUserInfo" @click="login">登录</button>
     <div class="userinfo" >
       <img :src="userInfo.avatarUrl" alt="">
       <p>{{userInfo.nickName}}</p>
     </div>
-
-    <button class='btn'>添加图书</button>
+    <YearProgress></YearProgress>
+    <button @click="scanBook" class='btn'>添加图书</button>
   </div>
 </template>
 
 <script>
-
+import {showSuccess} from '@/util'
 import config from '@/config'
 import qcloud from 'wafer2-client-sdk'
+import YearProgress from '@/components/YearProgress'
 export default {
-    data () {
+  components: {
+    YearProgress
+  },
+  data () {
     return {
+      isLogin: false,
       userInfo: { }
     }
   },
   methods: {
     login () {
-      qcloud.setLoginUrl(config.loginUrl);
+      qcloud.setLoginUrl(config.loginUrl)
       qcloud.login({
-          success: function (userInfo) {
-              console.log('登录成功', userInfo);
-              wx.setStorageSync('userInfo', userInfo)
-          },
-          fail: function (err) {
-              console.log('登录失败', err);
-          }
-      });
+        success: function (userInfo) {
+          console.log('登录成功', userInfo)
+          showSuccess('登录成功')
+          wx.setStorageSync('userInfo', userInfo)
+        },
+        fail: function (err) {
+          console.log('登录失败', err)
+        }
+      })
       this.userInfo = wx.getStorageSync('userInfo')
+    },
+    scanBook () {
+      wx.scanCode({
+        success (res) {
+          console.log(res)
+        }
+      })
     }
   }
 }
@@ -63,7 +76,6 @@ export default {
 //     }
 //   }
 // }
-
 </script>