xcx

src/pages/page2.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="projectIndex">
+    <img src="../assets/images/bg.jpg" class="centerLabel cover bg" alt>
+    <div class="content flex-h">
+      <div class="flex-item">
+        <div>
+          <ul class="centerLabel userList">
+            <li v-for="(item, index) in userList" :key="index" :class="{'active': item.show}">
+              <span>{{`${item.firstName}${item.gender - 0 === 1 ? '先生' : '女士'}`}}</span>
+              <span>欢迎光临 ！</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+import 'swiper/dist/css/swiper.css'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import solarLunar from 'solarLunar'
+const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
+
+const { mapState: mapPageState, mapActions: mapPageActions } = createNamespacedHelpers('page')
+
+const { mapState: mapNewsState, mapActions: mapNewsActions } = createNamespacedHelpers('news')
+export default {
+  name: 'projectIndex',
+  data () {
+    return {
+      userList: [{
+        firstName: '111',
+        gender: '1',
+        show: false
+      }, {
+        firstName: '111',
+        gender: '1',
+        show: false
+      }, {
+        firstName: '111',
+        gender: '1',
+        show: false
+      }],
+      currentWeek: '周',
+      currentTime: '00:00:00',
+      currentDate: 'xx年xx月xx日',
+      currentChineseDate: 'xx月xx日',
+      showSlide: true,
+      currentTimeTamp: Date.now(),
+      ChineseDate: null,
+      activeIndex: 0,
+      timer: null,
+      timeNum: 0,
+      swiperOption: {
+        loop: true,
+        speed: 1000,
+        autoplay: {
+          delay: 6000,
+          disableOnInteraction: false
+        }
+      },
+      num: 1
+    }
+  },
+  computed: {
+    ...mapUserState({
+      weatherInfo: x => x.weatherInfo // 天气信息
+    }),
+    ...mapPageState({
+      pages: x => x.pages
+    }),
+    ...mapNewsState({
+      news: x => x.news
+    }),
+    showNew () {
+      return ((this.news.data || {}).records || []).filter(x => x.status === 1)[0] || {}
+    },
+    showPage () {
+      return ((this.pages.data || {}).records || []).filter(x => x.status === 1)[0] || {}
+    },
+    mySwiper () {
+      return this.$refs.mySwiper.swiper
+    },
+    isDay () {
+      return new Date(this.currentTimeTamp).getHours() <= 17 && new Date(this.currentTimeTamp).getHours() >= 6
+    },
+    weatherDetail () {
+      return this.weatherInfo.forecasts[0].casts[0]
+    },
+    tempRange () {
+      if (!this.weatherDetail) return ''
+      let min, max
+
+      // 这么复杂是为了避免 eslint 错误
+      const f = () => this.weatherDetail.daytemp > this.weatherDetail.nighttemp
+        ? ((min = this.weatherDetail.nighttemp) | (max = this.weatherDetail.daytemp))
+        : ((max = this.weatherDetail.nighttemp) | (min = this.weatherDetail.daytemp))
+      f()
+
+      return `${min}℃ ~ ${max}℃`
+    }
+  },
+  components: {
+    swiper,
+    swiperSlide
+  },
+  created () {
+    this.init()
+    window.setInterval(() => {
+      this.init()
+    }, 1000)
+    this.getInitData()
+    window.setInterval(() => {
+      this.getInitData()
+    }, 1000 * 60 * 60)
+    this.getPersonList()
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    ...mapUserActions([
+      'getWeatherInfo',
+      'getPerson'
+    ]),
+    ...mapPageActions([
+      'getPagesList'
+    ]),
+    ...mapNewsActions([
+      'getNewsList'
+    ]),
+    returnUserList (item) { // 返回用户信息
+      this.showSlide = false
+      window.clearInterval(this.timer)
+      this.timeNum = 0
+      window.setTimeout(() => {
+        item.show = true
+      }, 100)
+      if (this.userList.length > 2) {
+        this.userList.splice(0, 1)
+        this.userList.push(item)
+      } else {
+        this.userList.push(item)
+      }
+      this.timer = window.setInterval(() => {
+        if (this.timeNum - 0 >= 5000) {
+          this.timeNum = 0
+          window.clearInterval(this.timer)
+          this.showSlide = true
+          this.userList = []
+        } else {
+          this.timeNum += 100
+        }
+      }, 100)
+    },
+    init () { // 初始化
+      this.getDate()
+      if (!new Date().getMinutes()) { // 整点更新时间
+        this.currentTimeTamp = Date.now()
+      }
+    },
+    getInitData () {
+      this.getPagesList({
+        pageNum: 1,
+        pageSize: 100
+      })
+      this.getNewsList({
+        pageNum: 1,
+        pageSize: 100
+      })
+      this.getWeatherInfo()
+    },
+    getPersonList () {
+      this.getPerson().then(res => {
+        console.log(res)
+        if (res) {
+          this.returnUserList({
+            firstName: '111',
+            gender: '1',
+            show: false
+          })
+        }
+        this.getPersonList()
+      })
+    },
+    FormatDate (timestamp, fmt) {
+      if (timestamp === '0001-01-01T00:00:00Z') {
+        return ''
+      }
+      if (!fmt) {
+        fmt = 'yyyy-MM-dd hh:mm'
+      }
+
+      let date = new Date(timestamp)
+      var o = {
+        'M+': date.getMonth() + 1,
+        'd+': date.getDate(),
+        'h+': date.getHours(),
+        'm+': date.getMinutes(),
+        's+': date.getSeconds(),
+        'q+': Math.floor((date.getMonth() + 3) / 3),
+        'S': date.getMilliseconds()
+      }
+      if (/(y+)/.test(fmt)) {
+        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+      }
+      for (var k in o) {
+        if (new RegExp('(' + k + ')').test(fmt)) {
+          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
+        }
+      }
+      return fmt
+    },
+    getDate () { // 获取当前时间
+      let currentTime = Date.now()
+      let weekday = ['日', '一', '二', '三', '四', '五', '六']
+      let ChineseDate = solarLunar.lunar2solar(new Date(currentTime).getFullYear(), new Date(currentTime).getMonth(), new Date(currentTime).getDate())
+      this.currentWeek = `星期${weekday[new Date(currentTime).getDay()]}`
+      this.currentTime = `${new Date(currentTime).getHours().toString().padStart(2, '0')} : ${new Date(currentTime).getMinutes().toString().padStart(2, '0')} : ${new Date(currentTime).getSeconds().toString().padStart(2, '0')}`
+      this.currentDate = `${new Date(currentTime).getFullYear()}年${(new Date(currentTime).getMonth() + 1).toString().padStart(2, '0')}月${new Date(currentTime).getDate().toString().padStart(2, '0')}日`
+      this.currentChineseDate = `${ChineseDate.monthCn}${ChineseDate.dayCn}`
+    },
+    weatherIcon (target) { // 返回天气图标
+      switch (target) {
+        case '晴':
+          return require('../assets/images/icon-6.png')
+        case '少云':
+        case '晴间多云':
+        case '多云':
+          return require('../assets/images/icon-4.png')
+        case '阴':
+        case '平静':
+          return require('../assets/images/icon-9.png')
+        case '有风':
+        case '微风':
+        case '和风':
+        case '清风':
+        case '强风/劲风':
+        case '疾风':
+        case '大风':
+        case '烈风':
+        case '风暴':
+        case '狂爆风':
+        case '飓风':
+        case '热带风暴':
+        case '浮尘':
+        case '扬沙':
+          return require('../assets/images/icon-1.png')
+        case '阵雨':
+        case '大雨':
+        case '中雨-大雨':
+        case '大雨-暴雨':
+        case '暴雨-大暴雨':
+        case '大暴雨-特大暴雨':
+        case '暴雨':
+        case '大暴雨':
+        case '特大暴雨':
+        case '强阵雨':
+        case '极端降雨':
+        case '雷阵雨':
+        case '雷阵雨并伴有冰雹':
+          return require('../assets/images/icon-5.png')
+        case '毛毛雨/细雨':
+        case '小雨':
+        case '雨':
+        case '中雨':
+        case '小雨-中雨':
+          return require('../assets/images/icon-3.png')
+        case '雨夹雪':
+        case '阵雨夹雪':
+        case '雨雪天气':
+        case '冻雨':
+          return require('../assets/images/icon-10.png')
+        case '阵雪':
+        case '小雪':
+        case '中雪':
+        case '大雪':
+        case '暴雪':
+        case '小雪-中雪':
+        case '中雪-大雪':
+        case '大雪-暴雪':
+        case '雪':
+          return require('../assets/images/icon-2.png')
+        case '沙尘暴':
+        case '强沙尘暴':
+        case '龙卷风':
+        case '雾':
+        case '浓雾':
+        case '强浓雾':
+        case '轻雾':
+        case '大雾':
+        case '特强浓雾':
+        case '霾':
+        case '中度霾':
+        case '重度霾':
+        case '严重霾':
+        default:
+          return require('../assets/images/icon-1.png')
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.projectIndex {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .bg {
+    z-index: 1;
+  }
+  > div {
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    position: relative;
+    overflow: hidden;
+    > .flex-item {
+      position: relative;
+      > div {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+        border-radius: 6px;
+        .userList {
+          width: calc(100% - 80px);
+          overflow: hidden;
+          transition: all 0.3s linear;
+          -webkit-transition: all 0.3s linear;
+          text-align: center;
+          font-size: 0;
+          > li {
+            width: 0;
+            display: inline-block;
+            margin-left: 40px;
+            position: relative;
+            overflow: hidden;
+            background: rgba(255, 255, 255, 0.15);
+            padding: 9vh 0;
+            transition: all 0.3s linear;
+            -webkit-transition: all 0.3s linear;
+            &:first-child {
+              margin-left: 0;
+            }
+            &.active {
+              width: calc((100% - 80PX) / 3);
+            }
+            span {
+              width: 100%;
+              display: block;
+              color: #fff;
+              text-align: center;
+              line-height: 1.45;
+              font-size: 2.3vw;
+              &:first-child {
+                font-size: 2.8vw;
+                line-height: 1.3;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/router/index.js

@@ -2,6 +2,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import index from '../pages/index'
+import page2 from '../pages/page2'
 
 Vue.use(Router)
 
@@ -11,6 +12,11 @@ let router = new Router({
     name: 'index',
     component: index,
     children: []
+  }, {
+    path: '/page2',
+    name: 'page2',
+    component: page2,
+    children: []
   }]
 })