mirror of
https://github.com/Dichgrem/Vue.git
synced 2026-02-05 15:21:55 -05:00
feat:student-vol
This commit is contained in:
dichgrem
165
student-vol/src/views/ActDetails.vue
Normal file
165
student-vol/src/views/ActDetails.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="head">
|
||||
<p class="title">{{ data.title }}</p>
|
||||
<div class="status">
|
||||
<van-tag :color="getActStatusColor(data)" round style="margin-right: 10px">
|
||||
{{ data.canApply ? '进行中' : '已结束' }}
|
||||
</van-tag>
|
||||
<van-tag :color="getActApplyColor(data)" round>
|
||||
{{ applyStatusMap[data.applyStatus] }}
|
||||
</van-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dataItem">
|
||||
<span class="label">活动时间</span>
|
||||
<p>{{ formatDate(data.startTime) }} - {{ formatDate(data.endTime) }}</p>
|
||||
</div>
|
||||
|
||||
<div class="dataItem">
|
||||
<span class="label">活动地点</span>
|
||||
<p>{{ data.palce }}</p>
|
||||
</div>
|
||||
|
||||
<div class="dataItem">
|
||||
<span class="label">活动简介</span>
|
||||
<p>{{ data.content }}</p>
|
||||
</div>
|
||||
|
||||
<div class="dataItem">
|
||||
<span class="label">活动来源</span>
|
||||
<p>{{ data.publisher }}</p>
|
||||
</div>
|
||||
|
||||
<div class="dataItem">
|
||||
<span class="label">服务时长</span>
|
||||
<p>{{ data.hour }}小时</p>
|
||||
</div>
|
||||
|
||||
<div class="dataItem">
|
||||
<span class="label">招募人数</span>
|
||||
<p>{{ data.total }}人</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="fBtn"
|
||||
v-if="[2, 3].indexOf(data.applyStatus) === -1"
|
||||
@click="applyClick"
|
||||
>
|
||||
{{ data.applyStatus === 1 ? '撤销申请' : '立即报名' }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import moment from "moment";
|
||||
import { showSuccessToast, showFailToast } from "vant";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: {},
|
||||
applyStatusMap: ["", "审核中", "审核通过", "审核拒绝"],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
formatDate(value) {
|
||||
return value ? moment(value).format("YYYY-MM-DD HH:mm") : "--";
|
||||
},
|
||||
getActStatusColor(data) {
|
||||
return data.canApply ? "#07C160" : "#ff976a";
|
||||
},
|
||||
getActApplyColor(data) {
|
||||
const list = ["", "#1989fa", "#07c160", "#f6352c"];
|
||||
return list[data.applyStatus];
|
||||
},
|
||||
fetchDetails() {
|
||||
const that = this;
|
||||
const payload = { id: this.$route.query.id };
|
||||
axios
|
||||
.get("/api/actDetails/details", {
|
||||
params: payload,
|
||||
})
|
||||
.then(function (response) {
|
||||
const { error, data = {} } = response.data;
|
||||
if (error === 0) {
|
||||
that.data = data.details || {};
|
||||
}
|
||||
});
|
||||
},
|
||||
applyClick() {
|
||||
const that = this;
|
||||
const payload = {
|
||||
isApplay: this.data.applyStatus !== 1,
|
||||
id: this.$route.query.id,
|
||||
};
|
||||
|
||||
axios.post("/api/actDetails/apply", payload).then(function (response) {
|
||||
const { error, msg } = response.data;
|
||||
if (error === 0) {
|
||||
showSuccessToast("操作成功");
|
||||
that.fetchDetails();
|
||||
} else {
|
||||
showFailToast(msg || "网络错误，请稍后重试");
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchDetails();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.head {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dataItem {
|
||||
background: white;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.dataItem p {
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.fBtn {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
padding: 15px;
|
||||
background: #ff5d23;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
127
student-vol/src/views/HomeView.vue
Normal file
127
student-vol/src/views/HomeView.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="header">
|
||||
<h1>大学生志愿者活动</h1>
|
||||
<User :user="userInfo" />
|
||||
</div>
|
||||
<Navs />
|
||||
<div class="list">
|
||||
<div class="list-header">
|
||||
<span>志愿活动</span>
|
||||
<div class="list-more" @click="goMoreActs">
|
||||
查看更多
|
||||
<img src="../assets/rArrow.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="actList">
|
||||
<ActItem
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
:data="item"
|
||||
@goDetails="goDetails"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import User from "../components/Home/User.vue";
|
||||
import Navs from "../components/Home/Navs.vue";
|
||||
import ActItem from "../components/Home/ActItem.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
User,
|
||||
Navs,
|
||||
ActItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userInfo: {
|
||||
avatar: "",
|
||||
name: "",
|
||||
},
|
||||
list: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
fetchUserInfo() {
|
||||
const that = this;
|
||||
axios.get("/api/userInfo").then(function (response) {
|
||||
const { error, data = {} } = response.data;
|
||||
if (error === 0) {
|
||||
that.userInfo = {
|
||||
avatar: data.avatar,
|
||||
name: data.name,
|
||||
};
|
||||
}
|
||||
});
|
||||
},
|
||||
fetchActList() {
|
||||
const that = this;
|
||||
axios.get("/api/actList").then(function (response) {
|
||||
const { error, data = {} } = response.data;
|
||||
if (error === 0) {
|
||||
that.list = data.list;
|
||||
}
|
||||
});
|
||||
},
|
||||
goDetails(id) {
|
||||
this.$router.push("/actDetails?id=" + id);
|
||||
},
|
||||
goMoreActs() {
|
||||
this.$router.push("/loveActs");
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchUserInfo();
|
||||
this.fetchActList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.list-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.list-more img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
</style>
|
||||
139
student-vol/src/views/LoveActs.vue
Normal file
139
student-vol/src/views/LoveActs.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="searchBox">
|
||||
<div class="search">
|
||||
<span class="search-icon"></span>
|
||||
<input placeholder="请输入地点、活动名称等关键字" v-model="keyword" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
<van-list
|
||||
v-model:loading="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
>
|
||||
<ActItem
|
||||
v-for="item in actList"
|
||||
:key="item.id"
|
||||
:data="item"
|
||||
@goDetails="goDetails"
|
||||
/>
|
||||
</van-list>
|
||||
</div>
|
||||
|
||||
<button class="fBtn" @click="goMyApply">我的报名</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import ActItem from "../components/Home/ActItem.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ActItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
actList: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
currentPage: 1,
|
||||
keyword: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
fetchActList(currentPage = 1) {
|
||||
const that = this;
|
||||
const payload = {
|
||||
currentPage,
|
||||
pageSize: 10,
|
||||
keyword: this.keyword,
|
||||
};
|
||||
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/api/actList", { params: payload })
|
||||
.then(function (response) {
|
||||
const { error, data = {} } = response.data;
|
||||
if (error === 0) {
|
||||
const currentPage = data.current;
|
||||
const list = data.list;
|
||||
|
||||
if (currentPage === 1) {
|
||||
that.actList = list;
|
||||
} else {
|
||||
that.actList.push(...list);
|
||||
}
|
||||
|
||||
that.currentPage = currentPage;
|
||||
that.finished = data.pageCount === currentPage;
|
||||
}
|
||||
})
|
||||
.finally(function () {
|
||||
that.loading = false;
|
||||
});
|
||||
},
|
||||
onLoad() {
|
||||
this.fetchActList(this.currentPage + 1);
|
||||
},
|
||||
goMyApply() {
|
||||
this.$router.push("/myApply");
|
||||
},
|
||||
goDetails(id) {
|
||||
this.$router.push("/actDetails?id=" + id);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
keyword() {
|
||||
this.currentPage = 1;
|
||||
this.fetchActList(1);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchActList(1);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.searchBox {
|
||||
padding: 15px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.search input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.fBtn {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
padding: 12px 24px;
|
||||
background: #ff5d23;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
203
student-vol/src/views/LoveReport.vue
Normal file
203
student-vol/src/views/LoveReport.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="tabs">
|
||||
<div :class="{ tabItem: true, active: curTab === 0 }" @click="tabClick(0)">
|
||||
总积分
|
||||
</div>
|
||||
<div :class="{ tabItem: true, active: curTab === 1 }" @click="tabClick(1)">
|
||||
年度积分
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dataList">
|
||||
<div class="dataItem">
|
||||
<p class="dataItem-score">{{ provinceRank }}</p>
|
||||
<p class="dataItem-label">全省的排名</p>
|
||||
</div>
|
||||
<div class="dataItem">
|
||||
<p class="dataItem-score">{{ totalScore }}</p>
|
||||
<p class="dataItem-label">服务总积分</p>
|
||||
</div>
|
||||
<div class="dataItem">
|
||||
<p class="dataItem-score">{{ grandeRank }}</p>
|
||||
<p class="dataItem-label">本校本年级排名</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rank">
|
||||
<div class="rank-hd">
|
||||
<p class="rank-title">本校本年级服务标兵</p>
|
||||
<p class="rank-range">1200人参与排名</p>
|
||||
</div>
|
||||
<ul class="rank-list">
|
||||
<li v-for="(item, idx) in dataList" :key="item.id">
|
||||
<div class="rank-student">
|
||||
<span class="rank-idx">{{ idx + 1 }}</span>
|
||||
<span class="rank-avatar">
|
||||
<img :src='item.avatar' />
|
||||
</span>
|
||||
<span class="rank-name">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="rank-score">{{ item.score }}分</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
curTab: 0,
|
||||
dataList: [],
|
||||
provinceRank: "",
|
||||
totalScore: "",
|
||||
grandeRank: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
tabClick(value) {
|
||||
this.curTab = Number(value);
|
||||
this.fetchOverview(this.curTab);
|
||||
this.fetchRankList(this.curTab);
|
||||
},
|
||||
fetchOverview(type) {
|
||||
const that = this;
|
||||
axios
|
||||
.get("/api/report/myOverview", {
|
||||
params: { type },
|
||||
})
|
||||
.then(function (response) {
|
||||
const { error, data = {} } = response.data;
|
||||
if (error === 0) {
|
||||
that.provinceRank = data.provinceRank;
|
||||
that.totalScore = data.totalScore;
|
||||
that.grandeRank = data.grandeRank;
|
||||
}
|
||||
});
|
||||
},
|
||||
fetchRankList(type) {
|
||||
const that = this;
|
||||
const payload = {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
type,
|
||||
};
|
||||
axios
|
||||
.get("/api/report/rankList", { params: payload })
|
||||
.then(function (response) {
|
||||
const { error, data = {} } = response.data;
|
||||
if (error === 0) {
|
||||
that.dataList = data.list || [];
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchOverview(this.curTab);
|
||||
this.fetchRankList(this.curTab);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tabs {
|
||||
display: flex;
|
||||
background: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.tabItem {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabItem.active {
|
||||
color: #ff5d23;
|
||||
border-bottom: 2px solid #ff5d23;
|
||||
}
|
||||
|
||||
.dataList {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.dataItem {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dataItem-score {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #ff5d23;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.dataItem-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.rank {
|
||||
background: white;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.rank-hd {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.rank-title {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.rank-range {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.rank-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.rank-list li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.rank-student {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.rank-idx {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rank-avatar img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.rank-score {
|
||||
color: #ff5d23;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
130
student-vol/src/views/MyApply.vue
Normal file
130
student-vol/src/views/MyApply.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<ul class="tabList">
|
||||
<li @click="tabClick(0)">
|
||||
<span :class="curTab === 0 ? 'active' : ''">全部</span>
|
||||
</li>
|
||||
<li @click="tabClick(1)">
|
||||
<span :class="curTab === 1 ? 'active' : ''">审核中</span>
|
||||
</li>
|
||||
<li @click="tabClick(2)">
|
||||
<span :class="curTab === 2 ? 'active' : ''">审核通过</span>
|
||||
</li>
|
||||
<li @click="tabClick(3)">
|
||||
<span :class="curTab === 3 ? 'active' : ''">审核拒绝</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="list">
|
||||
<van-list
|
||||
v-model:loading="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
>
|
||||
<ActItem
|
||||
v-for="item in actList"
|
||||
:key="item.id"
|
||||
:data="item"
|
||||
@goDetails="goDetails"
|
||||
/>
|
||||
</van-list>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import ActItem from "../components/Home/ActItem.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ActItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
curTab: 0,
|
||||
actList: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
currentPage: 1,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
tabClick(value) {
|
||||
this.curTab = value;
|
||||
this.currentPage = 1;
|
||||
this.fetchApplyList(1);
|
||||
},
|
||||
fetchApplyList(currentPage = 1) {
|
||||
const that = this;
|
||||
const payload = {
|
||||
currentPage,
|
||||
pageSize: 10,
|
||||
type: this.curTab,
|
||||
};
|
||||
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/api/myApplyList", { params: payload })
|
||||
.then(function (response) {
|
||||
const { error, data = {} } = response.data;
|
||||
if (error === 0) {
|
||||
const currentPage = data.current;
|
||||
const list = data.list;
|
||||
|
||||
if (currentPage === 1) {
|
||||
that.actList = list;
|
||||
} else {
|
||||
that.actList.push(...list);
|
||||
}
|
||||
|
||||
that.currentPage = currentPage;
|
||||
that.finished = data.pageCount === currentPage;
|
||||
}
|
||||
})
|
||||
.finally(function () {
|
||||
that.loading = false;
|
||||
});
|
||||
},
|
||||
onLoad() {
|
||||
this.fetchApplyList(this.currentPage + 1);
|
||||
},
|
||||
goDetails(id) {
|
||||
this.$router.push("/actDetails?id=" + id);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchApplyList(1);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tabList {
|
||||
display: flex;
|
||||
background: white;
|
||||
list-style: none;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.tabList li {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabList span {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.tabList span.active {
|
||||
color: #ff5d23;
|
||||
border-bottom: 2px solid #ff5d23;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
152
student-vol/src/views/ServiceDetail.vue
Normal file
152
student-vol/src/views/ServiceDetail.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="dataItem">
|
||||
<span class="label">服务时间</span>
|
||||
<span>{{ formatDay(data.actTime) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="dataItem">
|
||||
<span class="label">服务地点</span>
|
||||
<span>{{ data.place }}</span>
|
||||
</div>
|
||||
|
||||
<div class="dataItem">
|
||||
<span class="label">服务内容</span>
|
||||
<span>{{ data.content }}</span>
|
||||
</div>
|
||||
|
||||
<div class="dataItem">
|
||||
<span class="label">服务照片</span>
|
||||
<div>
|
||||
<img
|
||||
class="serviceImg"
|
||||
v-for="(url) in data.imgList"
|
||||
:src="url"
|
||||
:key="url"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dataItem">
|
||||
<span class="label">服务时长</span>
|
||||
<span>{{ data.hour }}小时</span>
|
||||
</div>
|
||||
|
||||
<div class="dataItem">
|
||||
<span class="label">纪实时间</span>
|
||||
<span>{{ formatDate(data.uploadTime) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="dataItem">
|
||||
<span class="label">审核状态</span>
|
||||
<span>
|
||||
<span
|
||||
class="status"
|
||||
:style="{ backgroundColor: bgColorMap[data.status] }"
|
||||
>
|
||||
{{ statusMap[data.status] }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p class="title">{{ titleMap[data.status] }}</p>
|
||||
<p class="score" v-if="data.status === 1">4分</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import moment from "moment";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: {},
|
||||
statusMap: ["审核中", "审核通过", "审核驳回"],
|
||||
bgColorMap: ["#1989fa", "#07c160", "#f6352c"],
|
||||
titleMap: [
|
||||
"正在审核中，请耐心等待",
|
||||
"感谢您的服务，请收下服务积分",
|
||||
"审核被驳回了哟",
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
formatDate(value) {
|
||||
return value ? moment(value).format("YYYY-MM-DD HH:mm") : "--";
|
||||
},
|
||||
formatDay(value) {
|
||||
return value ? moment(value).format("YYYY-MM-DD") : "--";
|
||||
},
|
||||
fetchDetails() {
|
||||
const that = this;
|
||||
const payload = { id: this.$route.query.id };
|
||||
axios
|
||||
.get("/api/service/details", {
|
||||
params: payload,
|
||||
})
|
||||
.then(function (response) {
|
||||
const { error, data = {} } = response.data;
|
||||
if (error === 0) {
|
||||
that.data = data.details || {};
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchDetails();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dataItem {
|
||||
background: white;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.serviceImg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 4px 12px;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.score {
|
||||
font-size: 32px;
|
||||
color: #ff5d23;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
126
student-vol/src/views/ServiceRecords.vue
Normal file
126
student-vol/src/views/ServiceRecords.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="header">
|
||||
<User
|
||||
@updateYear="updateYear"
|
||||
:date="year"
|
||||
:dateList="dateList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="overview">
|
||||
<Overview :year="year.value" />
|
||||
</div>
|
||||
|
||||
<van-list
|
||||
v-model:loading="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
>
|
||||
<RecordItem
|
||||
v-for="item in dataList"
|
||||
:key="item.id"
|
||||
:data="item"
|
||||
@goDetails="goDetails"
|
||||
/>
|
||||
</van-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import User from "../components/ServiceRecords/User.vue";
|
||||
import Overview from "../components/ServiceRecords/Overview.vue";
|
||||
import RecordItem from "../components/ServiceRecords/RecordItem.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
User,
|
||||
Overview,
|
||||
RecordItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
currentPage: 1,
|
||||
year: {},
|
||||
dateList: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
fetchYearList() {
|
||||
const that = this;
|
||||
axios.get("/api/service/yearList").then(function (response) {
|
||||
const { error, data = {} } = response.data;
|
||||
if (error === 0) {
|
||||
const list = data.list || [];
|
||||
that.dateList = list;
|
||||
that.year = list[list.length - 1];
|
||||
}
|
||||
});
|
||||
},
|
||||
fetchServiceRecords(currentPage = 1) {
|
||||
const that = this;
|
||||
const payload = {
|
||||
currentPage,
|
||||
pageSize: 10,
|
||||
year: this.year.value,
|
||||
};
|
||||
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/api/service/list", { params: payload })
|
||||
.then(function (response) {
|
||||
const { error, data = {} } = response.data;
|
||||
if (error === 0) {
|
||||
const currentPage = data.current;
|
||||
const list = data.list;
|
||||
|
||||
if (currentPage === 1) {
|
||||
that.dataList = list;
|
||||
} else {
|
||||
that.dataList.push(...list);
|
||||
}
|
||||
|
||||
that.currentPage = currentPage;
|
||||
that.finished = data.pageCount === currentPage;
|
||||
}
|
||||
})
|
||||
.finally(function () {
|
||||
that.loading = false;
|
||||
});
|
||||
},
|
||||
onLoad() {
|
||||
this.fetchServiceRecords(this.currentPage + 1);
|
||||
},
|
||||
goDetails(id) {
|
||||
this.$router.push("/serviceDetail?id=" + id);
|
||||
},
|
||||
updateYear(yearValue) {
|
||||
this.year = yearValue;
|
||||
this.currentPage = 1;
|
||||
this.fetchServiceRecords(1);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchYearList();
|
||||
},
|
||||
watch: {
|
||||
"year.value"() {
|
||||
if (this.year.value) {
|
||||
this.fetchServiceRecords(1);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
239
student-vol/src/views/UploadService.vue
Normal file
239
student-vol/src/views/UploadService.vue
Normal file
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="frm">
|
||||
<van-field
|
||||
v-model="pushlisher.text"
|
||||
is-link
|
||||
readonly
|
||||
label="活动来源"
|
||||
placeholder="请选择活动来源"
|
||||
@click="fieldCLick(0)"
|
||||
/>
|
||||
|
||||
<van-field
|
||||
v-model="date"
|
||||
is-link
|
||||
readonly
|
||||
label="服务时间"
|
||||
placeholder="请选择日期"
|
||||
@click="fieldCLick(1)"
|
||||
/>
|
||||
|
||||
<van-field
|
||||
v-model="duration.text"
|
||||
is-link
|
||||
readonly
|
||||
label="服务时长"
|
||||
placeholder="请选择时长"
|
||||
@click="fieldCLick(2)"
|
||||
/>
|
||||
|
||||
<van-field
|
||||
v-model="content"
|
||||
label="服务内容"
|
||||
placeholder="请对服务内容进行简要描述"
|
||||
label-align="top"
|
||||
type="textarea"
|
||||
maxlength="100"
|
||||
show-word-limit
|
||||
/>
|
||||
|
||||
<van-uploader
|
||||
v-model="fileList"
|
||||
multiple
|
||||
max-count="2"
|
||||
:upload-text="uploadTxt"
|
||||
image-fit="cover"
|
||||
style="padding: 10px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<van-button
|
||||
type="primary"
|
||||
color="#ff5d23"
|
||||
block
|
||||
@click="submit"
|
||||
>
|
||||
提交
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
<van-popup v-model:show="showPicker" round position="bottom">
|
||||
<van-picker
|
||||
:columns="columns"
|
||||
@cancel="pickerCancel"
|
||||
@confirm="pickerConfirm"
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
<van-popup v-model:show="showDatePicker" round position="bottom">
|
||||
<van-date-picker
|
||||
v-model="currentDate"
|
||||
title="选择日期"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
@cancel="pickerCancel"
|
||||
@confirm="pickerConfirm"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { showToast, showSuccessToast, showFailToast } from "vant";
|
||||
import axios from "axios";
|
||||
|
||||
function dateRange() {
|
||||
const curTimeStamp = new Date();
|
||||
const tYear = curTimeStamp.getFullYear();
|
||||
const tMonth = curTimeStamp.getMonth();
|
||||
const date = curTimeStamp.getDate();
|
||||
return {
|
||||
currentDate: [tYear, tMonth, date],
|
||||
minDate: new Date(tYear - 2, tMonth, date),
|
||||
maxDate: new Date(tYear, tMonth, date),
|
||||
};
|
||||
}
|
||||
|
||||
let pushlisherList = [];
|
||||
let durationList = [];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [],
|
||||
pickerId: null,
|
||||
pushlisher: { value: null, text: "" },
|
||||
duration: { value: null, text: "" },
|
||||
date: null,
|
||||
content: "",
|
||||
fileList: [],
|
||||
currentDate: null,
|
||||
minDate: null,
|
||||
maxDate: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
showPicker() {
|
||||
return this.pickerId === 0 || this.pickerId === 2;
|
||||
},
|
||||
showDatePicker() {
|
||||
return this.pickerId === 1;
|
||||
},
|
||||
uploadTxt() {
|
||||
const length = this.fileList.length;
|
||||
return "添加照片" + length + "/2";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fieldCLick(value) {
|
||||
this.pickerId = value;
|
||||
if (value === 0) {
|
||||
this.columns = pushlisherList;
|
||||
} else if (value === 2) {
|
||||
this.columns = durationList;
|
||||
}
|
||||
},
|
||||
pickerCancel() {
|
||||
this.pickerId = null;
|
||||
},
|
||||
pickerConfirm({ selectedValues, selectedOptions }) {
|
||||
const curPickerId = this.pickerId;
|
||||
this.pickerId = null;
|
||||
|
||||
if (curPickerId === 1) {
|
||||
const data = selectedValues;
|
||||
this.date = data.join(".");
|
||||
return;
|
||||
}
|
||||
|
||||
const data = selectedOptions[0];
|
||||
const payload = {
|
||||
value: data.value,
|
||||
text: data.text,
|
||||
};
|
||||
|
||||
if (curPickerId === 0) {
|
||||
this.pushlisher = payload;
|
||||
return;
|
||||
}
|
||||
|
||||
this.duration = payload;
|
||||
},
|
||||
fetchPublisherlist() {
|
||||
axios.get("/api/act/publisherList").then(function (response) {
|
||||
const { error, data = {} } = response.data;
|
||||
if (error === 0) {
|
||||
pushlisherList = data.list || [];
|
||||
}
|
||||
});
|
||||
},
|
||||
fetchDurations() {
|
||||
axios.get("/api/act/durationsList").then(function (response) {
|
||||
const { error, data = {} } = response.data;
|
||||
if (error === 0) {
|
||||
durationList = data.list || [];
|
||||
}
|
||||
});
|
||||
},
|
||||
submit() {
|
||||
if (!this.pushlisher.text) {
|
||||
showToast("未选择活动来源");
|
||||
return;
|
||||
}
|
||||
if (!this.date) {
|
||||
showToast("未选择服务时间");
|
||||
return;
|
||||
}
|
||||
if (!this.duration.text) {
|
||||
showToast("未选择服务时长");
|
||||
return;
|
||||
}
|
||||
if (!this.content) {
|
||||
showToast("未填写服务内容");
|
||||
return;
|
||||
}
|
||||
if (!this.fileList.length) {
|
||||
showToast("未上传服务照片");
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
pushlisher: this.pushlisher.value,
|
||||
date: +new Date(this.date),
|
||||
duration: this.duration.value,
|
||||
content: this.content,
|
||||
fileList: this.fileList,
|
||||
};
|
||||
|
||||
axios.post("/api/act/uploadService", payload).then(function (response) {
|
||||
const { error, msg } = response.data;
|
||||
if (error === 0) {
|
||||
showSuccessToast("操作成功");
|
||||
} else {
|
||||
showFailToast(msg || "网络错误，请稍后重试");
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const { currentDate, minDate, maxDate } = dateRange();
|
||||
this.currentDate = currentDate;
|
||||
this.minDate = minDate;
|
||||
this.maxDate = maxDate;
|
||||
this.fetchDurations();
|
||||
this.fetchPublisherlist();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.frm {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
202
student-vol/src/views/UserCenter.vue
Normal file
202
student-vol/src/views/UserCenter.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="inner">
|
||||
<h1>个人信息</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<p class="label"><span>*</span>姓名</p>
|
||||
<span class="txt">{{ name }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<p class="label"><span>*</span>编号</p>
|
||||
<span class="txt">{{ code }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<p class="label"><span>*</span>性别</p>
|
||||
<input type="radio" value="0" v-model="gender" />男
|
||||
<input type="radio" value="1" v-model="gender" />女
|
||||
</li>
|
||||
<li>
|
||||
<p class="label"><span>*</span>手机号</p>
|
||||
<input placeholder="请输入手机号" v-model.trim="phoneNum" />
|
||||
</li>
|
||||
<li>
|
||||
<p class="label"><span>*</span>学校</p>
|
||||
<input placeholder="请输入学校名称" v-model.trim="school" />
|
||||
</li>
|
||||
<li>
|
||||
<p class="label"><span>*</span>专业</p>
|
||||
<input placeholder="请输入专业名称" v-model.trim="profession" />
|
||||
</li>
|
||||
<li>
|
||||
<p class="label"><span>*</span>人员属性</p>
|
||||
<div class="userTypeList">
|
||||
<span :class="{ active: userType === 0 }" @click="changeUserType(0)">群众</span>
|
||||
<span :class="{ active: userType === 1 }" @click="changeUserType(1)">团员</span>
|
||||
<span :class="{ active: userType === 2 }" @click="changeUserType(2)">党员</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="subBtn" @click="submitClick">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import { showToast, showSuccessToast, showFailToast } from "vant";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: "",
|
||||
code: null,
|
||||
gender: 0,
|
||||
phoneNum: "",
|
||||
school: "",
|
||||
profession: "",
|
||||
userType: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeUserType(value) {
|
||||
this.userType = value;
|
||||
},
|
||||
fetchUsrInfo() {
|
||||
const that = this;
|
||||
axios.get("/api/userInfo").then(function (response) {
|
||||
const { error, data = {} } = response.data;
|
||||
if (error === 0) {
|
||||
that.name = data.name;
|
||||
that.code = data.code;
|
||||
that.gender = data.gender;
|
||||
that.phoneNum = data.phoneNum;
|
||||
that.school = data.school;
|
||||
that.profession = data.profession;
|
||||
that.userType = data.userType;
|
||||
}
|
||||
});
|
||||
},
|
||||
check() {
|
||||
var phoneNum = this.phoneNum;
|
||||
var school = this.school;
|
||||
var profession = this.profession;
|
||||
|
||||
if (phoneNum === "") {
|
||||
showToast("手机号不可为空");
|
||||
return;
|
||||
}
|
||||
if (school === "") {
|
||||
showToast("学校不可为空");
|
||||
return;
|
||||
}
|
||||
if (profession === "") {
|
||||
showToast("专业不可为空");
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
name: this.name,
|
||||
code: this.code,
|
||||
gender: this.gender,
|
||||
phoneNum,
|
||||
school,
|
||||
profession,
|
||||
userType: this.userType,
|
||||
};
|
||||
return payload;
|
||||
},
|
||||
submitClick() {
|
||||
var payload = this.check();
|
||||
if (!payload) {
|
||||
return;
|
||||
}
|
||||
|
||||
axios.post("/api/userInfo/submit", payload).then(function (response) {
|
||||
const { error, msg } = response.data;
|
||||
if (error === 0) {
|
||||
showSuccessToast("操作成功");
|
||||
} else {
|
||||
showFailToast(msg || "网络错误，请稍后重试");
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchUsrInfo();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.inner {
|
||||
padding: 20px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.label span {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.txt {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
input[type="text"], input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.userTypeList {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.userTypeList span {
|
||||
padding: 8px 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.userTypeList span.active {
|
||||
background: #ff5d23;
|
||||
color: white;
|
||||
border-color: #ff5d23;
|
||||
}
|
||||
|
||||
.subBtn {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
background: #ff5d23;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user