【项目记录】用vue-h5写可前后端分离和控制计时的物联网移动端app

要是以前学过vue的话用于二次开发还是很方便的~

先上效果：

其中在点击按钮之后可以进入计时，且圆形的进度条将动态变化：

其他功能模块：

使用的组件有：走马灯，底部导航，elementui和iview库，卡片式单元

记录几个页面代码：
底部导航：

<template>
  <div id="foot_menu">
    <tabbar v-model="index">
      <tabbar-item :link="item.link" ref="indexTab" v-for="(item,index) in menuData" v-bind:key="item.link">
        <img slot="icon" :src="item.icon">
        <span slot="label">{{item.name}}</span>
      </tabbar-item>

    </tabbar>
  </div>
</template>

<script>
  import { Tabbar, TabbarItem } from 'vux'

  import * as types from '../../store/types'

  export default {
    components: {
      Tabbar,
      TabbarItem
    },
    data() {
      return {
        menuData: this.getMenuData(),
        index: this.selectIndex()
      }
    },
    methods: {
      getMenuData() {
        if (types.PRODUCT === types.PRODUCT_OFFICIAL_SITE) {
          return types.MENU_DATA_OFFICIAL_SITE
        }
        if (types.PRODUCT === types.PRODUCT_BBS) {
          return types.MENU_DATA_BBS
        }
      },
      selectIndex() {
        const menuData = this.getMenuData()
        for (let i = 0; i < menuData.length; i++) {
          if (this.$route.path.indexOf(menuData[i].link) > -1) {
            return i
          }
        }
        return 0;
      }
    }
  }
</script>

主页：

<template>
  <div>
  <div>
        <x-header title="Intelligent Wash" :left-options="{showBack: false}"></x-header>
       <menuGroup></menuGroup>
     <Card style="width:340px; margin-left:10px">
            <div style="text-align:center">
                <img src="../../../static/m6.png" style="width: 50px;height: 50px;">
                <h3> <strong>为洁净餐具 节约能源而生</strong></h3>
            </div>
        </Card>

    <br><br>
 <el-button type="warning" @click.native="gettime()" style="margin-left: 130px"><i class="el-icon-video-play
">

 </i> 开始洗涤</el-button>
 <div style="font-size: x-large; color: #00FFFF;">
<i class="el-icon-alarm-clock">
      </i>您清洗的总时间（按分钟计）:<div ref="startTimer"></div>
<el-progress type="circle" :percentage="total" status="success" style="margin-left: 100px;"></el-progress>
</div>
</div>


  
    <img src="../../../static/images/wa0.png"  >
    <group-title>{{title}}</group-title>
  
    <footer class="footer_section">
                          <div class="container">
                            <p style="color: #660000;">Copyright © 2021.Intelligent Wash团队rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/"></a></p>
                          </div>
                        </footer>
    <footMenu ></footMenu>

  </div>
</template>
<script src="./index.js"></script>


<style scoped>

  .logo{
    margin-top:0px;
    text-align: center;
    font-size:.8rem;
  }
  .logo>img{
    width:100%;
  }
  .about{
    margin:20px;
    text-align: center;
  }
</style>

主页js代码：

import {XHeader, TransferDom, Panel, Swiper, SwiperItem, GroupTitle} from 'vux'
import footMenu from '../../components/footer/footMenu'
import menuGroup from '../../components/menu/menuGroup'

import api from '../../fetch/api'
import {getApiUrl} from '../../util/tool'

export default {
  components: {
    XHeader,TransferDom, footMenu, Panel, Swiper, SwiperItem, menuGroup, productList, GroupTitle
  },
  data () {
    return {
   
      newsList: [],
      banner: {},
      timer: "",
       hour: 0,
        total:0,
            minutes: 0,
            seconds: 0,
    }
  },
  mounted () {
    this.init()
  },

  methods: {
    init () {

   
               this.banner.list = ['../../../static/images/wa0.png','../../../static/images/wa1.png','../../../static/images/wa2.png']
        this.newsList = res.data.data.newsList
      
    },
    bannerChange (index) {
      this.banner.index = index
    },
    onItemClick (index) {
      this.getTopics(this.tabData[index].key)
    },
    getMethod()
          {
             this.$message({
                      showClose: true,
                      message: '您已经提交成功，我们将及时联系您！',
                      type: 'success'
                    });
    document.getElementById("biao").reset()
          },
           startTimer () {

                  this.seconds += 1;
                  if (this.seconds >= 60) {
                    this.seconds = 0;
                    this.minutes = this.minutes + 1;
                  }

                  if (this.minutes >= 60) {
                    this.minutes = 0;
                    this.hour = this.hour + 1;
                  }
                  this.total = this.minutes + this.hour * 60
                this.thistime = (this.minutes < 10 ? '0' + this.minutes : this.minutes) + ':' + (this.seconds < 10 ? '0' + this.seconds : this.seconds) + '  total:' + this.total
                  this.$refs.startTimer.innerHTML = (this.minutes < 10 ? '0' + this.minutes : this.minutes) + ':' + (this.seconds < 10 ? '0' + this.seconds : this.seconds) + '已清洗:' + this.total +'分钟';

              },
              gettime(){
                  this.timer = setInterval(this.startTimer, 1000);
              }
  }
}

需要其他的代码可以点个关注然后私聊我，我发给你~