项目描述
上传时间
浏览人数
所用软件:webstream
开发工具&组件:vue&vant
项目名称cool
接下来之前的部分,现在登录成功,之后我将前往home页面:
代码部分(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();
点开下方索引栏中的排行榜:
排行榜代码部分:
<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.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.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中写出来
代码不足请多包涵,谢谢观看