mirror of
https://github.com/Dichgrem/Vue.git
synced 2026-02-05 03:01:57 -05:00
fix:select
This commit is contained in:
@@ -11,8 +11,8 @@
|
|||||||
"publisher": "福州大学至诚学院团委",
|
"publisher": "福州大学至诚学院团委",
|
||||||
"hour": 4,
|
"hour": 4,
|
||||||
"total": 50,
|
"total": 50,
|
||||||
"canApply": true,
|
"canApply": false,
|
||||||
"applyStatus": 0
|
"applyStatus": 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -12,7 +12,7 @@
|
|||||||
"endTime": 1671697800000,
|
"endTime": 1671697800000,
|
||||||
"palce": "福州大学至诚学院",
|
"palce": "福州大学至诚学院",
|
||||||
"isYourSchool": true,
|
"isYourSchool": true,
|
||||||
"canApply": true,
|
"canApply": false,
|
||||||
"actPic": "./imgs/actImg.jpeg"
|
"actPic": "./imgs/actImg.jpeg"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -36,7 +36,7 @@
|
|||||||
"isYourSchool": false,
|
"isYourSchool": false,
|
||||||
"canApply": false,
|
"canApply": false,
|
||||||
"actPic": "./imgs/actImg.jpeg",
|
"actPic": "./imgs/actImg.jpeg",
|
||||||
"applyStatus": 2
|
"applyStatus": 1
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -23,9 +23,18 @@
|
|||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: ["data"],
|
props: ["data", "isMyApply"],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
applyStatusMap: ["", "审核中", "审核通过", "审核拒绝"],
|
||||||
|
bgColorMap: ["", "#1989fa", "#07c160", "#f6352c"],
|
||||||
|
};
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getTagStyle(data) {
|
getTagStyle(data) {
|
||||||
|
if (this.isMyApply && data.applyStatus !== undefined) {
|
||||||
|
return { backgroundColor: this.bgColorMap[data.applyStatus] };
|
||||||
|
}
|
||||||
return { backgroundColor: data.canApply ? "#07c160" : "#999" };
|
return { backgroundColor: data.canApply ? "#07c160" : "#999" };
|
||||||
},
|
},
|
||||||
formatDate(value) {
|
formatDate(value) {
|
||||||
@@ -35,6 +44,9 @@ export default {
|
|||||||
this.$emit("goDetails", id);
|
this.$emit("goDetails", id);
|
||||||
},
|
},
|
||||||
getTagTxt(data) {
|
getTagTxt(data) {
|
||||||
|
if (this.isMyApply && data.applyStatus !== undefined) {
|
||||||
|
return this.applyStatusMap[data.applyStatus];
|
||||||
|
}
|
||||||
return data.canApply ? "进行中" : "已结束";
|
return data.canApply ? "进行中" : "已结束";
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -24,8 +24,6 @@ a:hover {
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
min-width: 320px;
|
min-width: 320px;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
@@ -59,10 +57,13 @@ button:focus-visible {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
max-width: 1280px;
|
max-width: 414px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 2rem;
|
padding: 0;
|
||||||
text-align: center;
|
text-align: left;
|
||||||
|
min-height: 100vh;
|
||||||
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
|
||||||
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
|
|||||||
@@ -109,6 +109,11 @@ export default {
|
|||||||
const { error, msg } = response.data;
|
const { error, msg } = response.data;
|
||||||
if (error === 0) {
|
if (error === 0) {
|
||||||
showSuccessToast("操作成功");
|
showSuccessToast("操作成功");
|
||||||
|
if (payload.isApplay === false) {
|
||||||
|
that.data.applyStatus = 0; // Simulate status change to 'not applied'
|
||||||
|
} else {
|
||||||
|
that.data.applyStatus = 1; // Simulate status change to 'under review'
|
||||||
|
}
|
||||||
that.fetchDetails();
|
that.fetchDetails();
|
||||||
} else {
|
} else {
|
||||||
showFailToast(msg || "网络错误,请稍后重试");
|
showFailToast(msg || "网络错误,请稍后重试");
|
||||||
|
|||||||
@@ -22,7 +22,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="dataItem">
|
<div class="dataItem">
|
||||||
<p class="dataItem-score">{{ totalScore }}</p>
|
<p class="dataItem-score">{{ totalScore }}</p>
|
||||||
<p class="dataItem-label">服务总积分</p>
|
<p class="dataItem-label">{{ scoreLabel }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="dataItem">
|
<div class="dataItem">
|
||||||
<p class="dataItem-score">{{ grandeRank }}</p>
|
<p class="dataItem-score">{{ grandeRank }}</p>
|
||||||
@@ -64,6 +64,11 @@ export default {
|
|||||||
grandeRank: "",
|
grandeRank: "",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
scoreLabel() {
|
||||||
|
return this.curTab === 0 ? '服务总积分' : '服务年度积分';
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
tabClick(value) {
|
tabClick(value) {
|
||||||
this.curTab = Number(value);
|
this.curTab = Number(value);
|
||||||
@@ -171,6 +176,10 @@ export default {
|
|||||||
color: #333; /* ⭐ 内容区统一深色 */
|
color: #333; /* ⭐ 内容区统一深色 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rank-hd {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.rank-title {
|
.rank-title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@@ -182,6 +191,22 @@ export default {
|
|||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rank-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 auto; /* Centering the list */
|
||||||
|
width: 100%;
|
||||||
|
max-width: 300px; /* Constrain width */
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-list li {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
.rank-idx {
|
.rank-idx {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@@ -18,14 +18,14 @@
|
|||||||
<div class="list">
|
<div class="list">
|
||||||
<van-list
|
<van-list
|
||||||
v-model:loading="loading"
|
v-model:loading="loading"
|
||||||
:finished="finished"
|
:finished="true"
|
||||||
finished-text="没有更多了"
|
finished-text="没有更多了"
|
||||||
@load="onLoad"
|
|
||||||
>
|
>
|
||||||
<ActItem
|
<ActItem
|
||||||
v-for="item in actList"
|
v-for="item in actList"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
:data="item"
|
:data="item"
|
||||||
|
:isMyApply="true"
|
||||||
@goDetails="goDetails"
|
@goDetails="goDetails"
|
||||||
/>
|
/>
|
||||||
</van-list>
|
</van-list>
|
||||||
@@ -44,58 +44,42 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
curTab: 0,
|
curTab: 0,
|
||||||
actList: [],
|
allActList: [],
|
||||||
loading: false,
|
loading: false,
|
||||||
finished: false,
|
|
||||||
currentPage: 1,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
actList() {
|
||||||
|
if (this.curTab === 0) {
|
||||||
|
return this.allActList;
|
||||||
|
}
|
||||||
|
return this.allActList.filter(item => item.applyStatus === this.curTab);
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
tabClick(value) {
|
tabClick(value) {
|
||||||
this.curTab = value;
|
this.curTab = value;
|
||||||
this.currentPage = 1;
|
|
||||||
this.fetchApplyList(1);
|
|
||||||
},
|
},
|
||||||
fetchApplyList(currentPage = 1) {
|
fetchApplyList() {
|
||||||
const that = this;
|
|
||||||
const payload = {
|
|
||||||
currentPage,
|
|
||||||
pageSize: 10,
|
|
||||||
type: this.curTab,
|
|
||||||
};
|
|
||||||
|
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
axios
|
axios
|
||||||
.get("/api/myApplyList", { params: payload })
|
.get("/api/myApplyList")
|
||||||
.then(function (response) {
|
.then((response) => {
|
||||||
const { error, data = {} } = response.data;
|
const { error, data = {} } = response.data;
|
||||||
if (error === 0) {
|
if (error === 0) {
|
||||||
const currentPage = data.current;
|
this.allActList = data.list || [];
|
||||||
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 () {
|
.finally(() => {
|
||||||
that.loading = false;
|
this.loading = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onLoad() {
|
|
||||||
this.fetchApplyList(this.currentPage + 1);
|
|
||||||
},
|
|
||||||
goDetails(id) {
|
goDetails(id) {
|
||||||
this.$router.push("/actDetails?id=" + id);
|
this.$router.push("/actDetails?id=" + id);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.fetchApplyList(1);
|
this.fetchApplyList();
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user