筑坐极_Vue项目功能展示1.2

所用软件:webstream

开发工具&组件:vue&vant

项目名称cool

接下来之前的部分,现在登录成功,之后我将前往home页面:

Vue项目功能展示1.2

代码部分(home界面):

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Toast);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Lazyload);
Vue.use(Tab);
Vue.use(Tabs);

export default {
  name: "Home",
  data() {
    return {
      images: [
        hulian1,
        hulian2,
        hulian3,
      ],
      actives: 0,
      arr: [],
      arrs: '',
      particulars: [],//详情
      times:'用剩下的时间是不是该做点什么VvV~*',
    };
  },
  methods: {
    all_Car() {
      var name = this.$getCookie('emp_name');
      if (name) {
        this.$router.push('./all_card');
      } else {
        Toast.fail('您当前未在登录状态')
      }
    },
    datatime() {
      var span = document.querySelector('#span');

      function getTime() {
        var time = new Date();
        var year = time.getFullYear();
        var mon = time.getMonth() + 1;
        var m = (mon < 10) ? '0' + mon : mon;
        var day = time.getDate();
        var d = (day < 10) ? '0' + day : day;
        var hour = time.getHours();
        var h = (hour < 10) ? '0' + hour : hour;
        var min = time.getMinutes();
        var mi = (min < 10) ? '0' + min : min;
        var sec = time.getSeconds();
        var s = (sec < 10) ? '0' + sec : sec;
        return year + '年' + m + '月' + d + '日' + h + '时' + mi + '分' + s + '秒'
      }

      var _this = this;
      setInterval(function () {
        _this.times = getTime();
      }, 1000)
    },
    allcard() {
      var url = 'https://zhuzuoji.com/myapi/moments/findallmoments?key=vv9544';
      this.$axios.get(url).then((result) => {
        this.arr = result.data.moments;
      }).catch((error) => {
        Toast.fail('404')
      })
    },
    all_blog() {
      var Url = 'https://zhuzuoji.com/myapi/blog/findallblog?key=vv9544';
      var _this = this;
      this.$axios.get(Url).then((result) => {
        _this.arrs = result.data.moments;
        for (let i = 0; i < _this.arrs.length; i++) {
          var id = _this.arrs[i].news_id;
          var Url = 'https://zhuzuoji.com/myapi/blog/findblogbyblogid?blog_id=' + id + '&key=vv9544';
          this.$axios.get(Url).then((result) => {
            _this.particulars.push(result.data.moments);
          }).catch((error) => {
            Toast.fail('404')
          })
        }
      }).catch((error) => {
      })
    }
  },
  mounted() {
    this.datatime();
    this.allcard();
    this.all_blog();

点开下方索引栏中的排行榜:

Vue项目功能展示1.2

排行榜代码部分:

<template>
<van-cell-group>
  <div>
    <van-tabs v-model="active">
      <van-tab title="用户积分排行">
        <van-cell center style="margin-bottom:5px ;"
                  v-for="(val, index) in this.rank_data" :key="index"
                  :title="val.emp_name"
                  :label="'No:' + (index+1)"
                  :value="'积分:' +  val.emp_inte"/>
      </van-tab>
      <van-tab title="打卡数量排行">
        <van-cell center style="margin-bottom:5px ;"
                  v-for="(val, index) in this.card_count" :key="index"
                  :title="val.emp_name"
                  :label="'No:' + (index+1)"
                  :value="'打卡数量:' +  val.moments_count"/>
      </van-tab>
      <van-tab title="blog发布数量排行">
        <van-cell center style="margin-bottom:5px ;"
                  v-for="(val, index) in this.Blog_count" :key="index"
                  :title="val.emp_name"
                  :label="'No:' + (index+1)"
                  :value="'blog数量:' +  val.blog_count"/>
      </van-tab>
    </van-tabs>
  </div>
  <van-cell></van-cell>
  <van-cell></van-cell>
  <van-cell></van-cell>
</van-cell-group>
</template>

<script>
  import Vue from 'vue';
  import {Tab, Tabs, Cell, CellGroup, Toast} from 'vant';

  Vue.use(Tab);
  Vue.use(Tabs);
  Vue.use(Cell);
  Vue.use(CellGroup);
  Vue.use(Toast);

  export default {
    name: "Rank",
    data() {
      return {
        active: 0,
        rank_data: '',
        card_count: '',
        Blog_count: ''
      };
    },
    methods: {
      inte_rank() {
        var Url = 'https://zhuzuoji.com/myapi/rank/getRankByInte?key=vv9544';
        var _this = this;
        this.$axios.get(Url).then((result) => {
          _this.rank_data = result.data.rank_data;
        }).catch((error) => {
          Toast.fail('404');
        })
      },
      cardcount() {
        var Url = 'https://zhuzuoji.com/myapi/rank/getRankByMomentsCount?key=vv9544';
        var _this = this;
        this.$axios.get(Url).then((result) => {
          _this.card_count = result.data.rank_data
        }).catch((error) => {
          Toast.fail('404');
        })
      },
      blogcount() {
        var Url = 'https://zhuzuoji.com/myapi/rank/getRankByBlogCount?key=vv9544';
        var _this = this;
        this.$axios.get(Url).then((result) => {
          _this.Blog_count = result.data.rank_data
        }).catch((error) => {
          Toast.fail('404');
        })
      }
    },
    mounted() {
      this.inte_rank();
      this.cardcount();
      this.blogcount()
    }
  }

还记得我的页面中有几个功能吗,其中一个每日打卡功能如下:

Vue项目功能展示1.2

每日打卡代码部分:

Vue.use(NavBar);
Vue.use(Toast);
Vue.use(Uploader);

export default {
  name: "card",
  data() {
    return {values: '', fileList: []}
  },
  methods: {
    onClickLeft() {
      Toast('已返回');
      this.$router.push('./')
    },
    tocard() {
      if (this.fileList.length != 0) {
        var email = this.$getCookie('emp_email'); // 获取邮箱值
        var val = this.values; // 获取输入的文字
        let params = new FormData(); //创建FormData对象
        params.append("email", email);
        params.append("key", "vv9544");
        params.append("content", val);
        params.append("mtspic", this.fileList[0].file);
        var url = 'https://zhuzuoji.com/myapi/moments/addmoments';
        let config = {
          headers: {'content-type': 'multipart/form-data'}
        };
        this.$axios.post(url, params, config).then((result) => {

          Toast.success(result.data.msg + '积分加二');
          this.$setCookie('emp_inte', result.data.new_inte.toString(), 7);
          this.$router.push('./')
        }).catch((error) => {
          Toast.fail('404,请检查网络')
        })
      } else {
        Toast.fail('需要一张图片来进行打卡')
      }
      //js原生文件获取图片对象
      // var fileObj = document.getElementsByName("blobupFile")[0].files[0]; //获取文件对象
      // console.log(params);


    }
  },
}

我的打卡记录功能如下:

Vue项目功能展示1.2

代码部分(打卡记录):

Vue.use(NavBar);
Vue.use(Toast);
Vue.use(Uploader);
Vue.use(VanImage);
export default {
  name: "Look_Card",
  data(){
    return {arr:[]};
  },
  methods: {
    onClickLeft() {
      Toast('已返回');
      this.$router.push('./')
    },
    onClickRight() {
      Toast('按钮');
      // this.Lookcard();
    },
    Lookcard(){
      var email = this.$getCookie('emp_email');
      var params = {key: 'vv9544', email: email};
      var url = 'https://zhuzuoji.com/myapi/moments/findmymoments?key=vv9544&email=' + email;
      this.$axios.get(url).then((result) => {
        this.arr = result.data.moments;
      }).catch((error) => {
        Toast.fail('404');
      })
    }
  },
  mounted() {
    this.Lookcard();
  }

之后的内容我会在1.3中写出来

代码不足请多包涵,谢谢观看

Vue项目功能展示1.2

叶世*

js,web,前端

一周vue实现移动端登录打卡,低仿微信界面

2020.09.06

1091人

叶世*

天津市津南区

Hot:9183

叶世*

当前作品暂无评分

还未获得评语哦~