Commit 1399205cf6dfde309cce67823467298556dfa50f

Authored by
1 parent f0066638
Exists in master

feat:研学成果改版

src/assets/Travel/cardBox.png 0 → 100644

172 KB

src/assets/Travel/dz.png 0 → 100644

1015 Bytes

src/assets/Travel/ll.png 0 → 100644

1.13 KB

src/assets/Travel/schoolBox.png 0 → 100644

4.54 KB

src/assets/changeSchool.png

32.2 KB | W: | H:

31.5 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/assets/changeSchool1.png 0 → 100644

32.2 KB

src/router/index.js
... ... @@ -43,6 +43,7 @@ import dayStudy from '@/views/dayStudy/dayStudy.vue' //每日一习主页面
43 43 import studyList from '@/views/dayStudy/studyList.vue' //每日一习主页面
44 44 import ans_question from '@/views/answerRank/ans_question.vue' //答题
45 45 import switchUser from '@/views/answerRank/switchUser.vue' //切换
  46 +import store from '../store'
46 47  
47 48 Vue.use(VueRouter)
48 49 const [routerPush, routerReplace] = [VueRouter.prototype.push, VueRouter.prototype.replace];
... ...
src/store/index.js
... ... @@ -5,8 +5,7 @@ Vue.use(Vuex)
5 5  
6 6 export default new Vuex.Store({
7 7 state: {
8   - schoolName: []
9   -
  8 + schoolName: ''
10 9 },
11 10 mutations: {
12 11 changeSchool(state, params) {
... ...
src/views/Yanxue/achievementsOne.vue
1 1 <template>
2 2 <div class="cardBox">
3   - <!-- <van-tabs v-model="tabsName">
4   - <van-tab title="红色教育"></van-tab>
5   - <van-tab title="劳动教育"></van-tab>
6   - <van-tab title="课外实践"></van-tab>
7   - <van-tab title="研学旅行"></van-tab>
8   - </van-tabs> -->
9 3 <van-tabs v-model="sort" @click="tabsClick">
10 4 <van-tab title="发布时间">发布时间</van-tab>
11 5 <van-tab title="点赞量">点赞量</van-tab>
... ... @@ -15,30 +9,9 @@
15 9 <van-list
16 10 v-model="loading"
17 11 :finished="finished"
18   - finished-text="没有更多了"
  12 + :finished-text="finishedText"
19 13 @load="getData"
20 14 >
21   - <!-- <div
22   - class="art_card_pic"
23   - v-for="(v, i) in newsList"
24   - :key="i"
25   - @click="toDetails(v)"
26   - >
27   - <div class="art_context">
28   - <div class="art_title">{{ v.titleDesc }}</div>
29   - <div class="art_bot">
30   - <div class="greyTime">
31   - 点赞量 {{ v.likeNumber }}
32   - </div>
33   - <div class="greyFont">
34   - 浏览量 {{ v.readNumber }}
35   - </div>
36   - </div>
37   - </div>
38   - <div class="art_pic">
39   - <img :src="v.imgUrl" />
40   - </div>
41   - </div> -->
42 15 <div
43 16 class="new_card"
44 17 v-for="(v, i) in newsList"
... ... @@ -50,24 +23,26 @@
50 23 </div>
51 24 <div class="new_card_title">{{ v.titleDesc }}</div>
52 25 <div class="new_card_bot">
53   - <div class="card_bot_L"></div>
  26 + <div class="card_bot_L">{{ v.schoolName }}</div>
54 27 <div class="card_bot_R">
55 28 <div class="greyTime">
56   - 点赞量 {{ v.likeNumber }}
  29 + <img src="@/assets/Travel/dz.png" /> {{ v.likeNumber }}
57 30 </div>
58 31 <div class="greyFont">
59   - 浏览量 {{ v.readNumber }}
  32 + <img src="@/assets/Travel/ll.png" /> {{ v.readNumber }}
60 33 </div>
61 34 </div>
62 35 </div>
63 36 </div>
64 37 </van-list>
65   - <div class="orgBtn" @click="toChoose" v-if="!schoolId">点击查看更多研学成果</div>
  38 + <div class="orgBtn" @click="toChoose" v-if="!schoolId">
  39 + 点击查看更多研学成果
  40 + </div>
66 41 </div>
67 42  
68 43 <van-empty description="暂无数据" v-else />
69 44  
70   - <div class="imgPic" @click="toChoose" v-if="schoolId">
  45 + <div class="imgPic" @click="toQueryNull" v-if="schoolId">
71 46 <img src="@/assets/changeSchool.png" />
72 47 </div>
73 48  
... ... @@ -81,7 +56,6 @@ export default {
81 56 components: { Tabbar4 },
82 57 data() {
83 58 return {
84   - tabsName: 1,
85 59 newsList: [],
86 60 pageNum: 1,
87 61 pageSize: 10,
... ... @@ -91,9 +65,12 @@ export default {
91 65 };
92 66 },
93 67 computed: {
94   - schoolId() {
95   - return this.$route.query.schoolId ? this.$route.query.schoolId : ''
96   - }
  68 + schoolId() {
  69 + return this.$route.query.schoolId ? this.$route.query.schoolId : "";
  70 + },
  71 + finishedText() {
  72 + return this.$route.query.schoolId ? '没有更多数据了': "";
  73 + }
97 74 },
98 75 methods: {
99 76 //详情新闻
... ... @@ -107,6 +84,11 @@ export default {
107 84 toChoose() {
108 85 this.$router.push({ name: "chooseSchoolOne" });
109 86 },
  87 + //选择
  88 + toQueryNull() {
  89 + this.$router.push({ name: "achievementsOne" });
  90 + location.reload()
  91 + },
110 92 tabsClick() {
111 93 this.newsList = [];
112 94 this.pageNum = 1;
... ... @@ -118,11 +100,11 @@ export default {
118 100 // let schoolId = this.$route.query.schoolId
119 101 // ? this.$route.query.schoolId
120 102 // : "";
121   - let pageSize = this.pageSize
122   - let pageNum = this.pageNum
123   - if(!this.schoolId){
124   - pageSize = 10
125   - pageNum = 1
  103 + let pageSize = this.pageSize;
  104 + let pageNum = this.pageNum;
  105 + if (!this.schoolId) {
  106 + pageSize = 10;
  107 + pageNum = 1;
126 108 }
127 109 this.yxAxios
128 110 .get(
... ... @@ -133,18 +115,17 @@ export default {
133 115 )
134 116 .then((res) => {
135 117 if (res.data.code == 200) {
136   - if(!this.schoolId) {
137   - this.loading = false;
138   - this.newsList = res.data.data.list
139   - this.finished = true;
140   - return
  118 + if (!this.schoolId) {
  119 + this.loading = false;
  120 + this.newsList = res.data.data.list;
  121 + this.finished = true;
  122 + return;
141 123 }
142 124  
143 125 this.newsList = this.newsList.concat(
144 126 res.data.data.list
145 127 );
146 128 this.loading = false;
147   -
148 129  
149 130 if (
150 131 this.pageSize * this.pageNum >=
... ... @@ -174,7 +155,7 @@ export default {
174 155 .cardBox {
175 156 padding: 2vw 0;
176 157 box-sizing: border-box;
177   - background-color: #FEFEFE;
  158 + background-color: #fefefe;
178 159  
179 160 .contextBox {
180 161 margin-top: 20px;
... ... @@ -332,29 +313,53 @@ export default {
332 313 color: #999;
333 314 font-size: 24px;
334 315 margin: 0;
  316 + max-width: 20vw;
  317 + white-space: nowrap; //文本强制不换行;
  318 + text-overflow: ellipsis; //文本溢出显示省略号;
  319 + overflow: hidden; //溢出的部分隐藏;
  320 + -webkit-line-clamp: 2;
  321 + display: flex;
  322 + align-items: center;
  323 +
  324 + img {
  325 + width: 24px;
  326 + margin-right: 7px;
  327 + }
335 328 }
336 329  
337 330 .greyFont {
338 331 color: #999;
339 332 font-size: 24px;
340 333 margin-left: 20px;
  334 + max-width: 20vw;
  335 + white-space: nowrap; //文本强制不换行;
  336 + text-overflow: ellipsis; //文本溢出显示省略号;
  337 + overflow: hidden; //溢出的部分隐藏;
  338 + -webkit-line-clamp: 2;
  339 + display: flex;
  340 + align-items: center;
  341 +
  342 + img {
  343 + width: 25px;
  344 + margin-right: 7px;
  345 + }
341 346 }
342 347 }
343 348 }
344 349 }
345 350 .orgBtn {
346   - width: 80vw;
347   - height: 80px;
348   - margin-left: 10vw;
349   - font-size: 33px;
350   - background-color: #ff4444;
351   - background: linear-gradient(to right,#FF3737,#FF6825);
352   - color: #Fff;
353   - display: flex;
354   - justify-content: center;
355   - align-items: center;
356   - border-radius: 40px;
357   - margin-bottom: 20px;
  351 + width: 80vw;
  352 + height: 80px;
  353 + margin-left: 10vw;
  354 + font-size: 33px;
  355 + background-color: #ff4444;
  356 + background: linear-gradient(to right, #ff3737, #ff6825);
  357 + color: #fff;
  358 + display: flex;
  359 + justify-content: center;
  360 + align-items: center;
  361 + border-radius: 40px;
  362 + margin-bottom: 20px;
358 363 }
359 364 }
360 365 .imgPic {
... ...
src/views/Yanxue/chooseSchoolOne.vue
1 1 <template>
2   - <div class="cardBox">
3   - <van-tabs v-model="tabsName" @change="tabsChange">
  2 + <div class="cardBox">
  3 + <!-- <van-tabs v-model="tabsName" @change="tabsChange">
4 4 <van-tab title="小学"></van-tab>
5 5 <van-tab title="初中"></van-tab>
6 6 <van-tab title="高中"></van-tab>
7   - </van-tabs>
  7 + </van-tabs> -->
  8 + <div class="card">
  9 + <div
  10 + :class="
  11 + [
  12 + 'card_item',
  13 + tabsName == v.value ? 'item_check' : 'item_nocheck',
  14 + ].join(' ')
  15 + "
  16 + v-for="(v, i) in typelist"
  17 + :key="i"
  18 + @click="tabsChange(v)"
  19 + >
  20 + {{ v.label }}
  21 + </div>
  22 + </div>
  23 + <div class="line"></div>
8 24  
9   - <div class="schoolCss">
10   - <div
11   - class="school-one"
12   - v-for="(v, i) in schoolList"
13   - :key="i"
14   - @click="toActive(v)"
15   - >
16   - {{ v.name }}
17   - </div>
  25 + <div :class="[schoolList.length != 0 ? 'schoolCss' : '']">
  26 + <div
  27 + class="school-one"
  28 + v-for="(v, i) in schoolList"
  29 + :key="i"
  30 + @click="toActive(v)"
  31 + >
  32 + {{ v.name }}
  33 + </div>
  34 + </div>
18 35 </div>
19   - </div>
20 36 </template>
21 37  
22 38 <script>
23 39 export default {
24   - data() {
25   - return {
26   - tabsName: 0,
27   - schoolList: [],
28   - };
29   - },
30   - watch: {
31   - tabsName(val) {
32   - this.schoolList = [];
33   - this.getList();
  40 + data() {
  41 + return {
  42 + tabsName: 1,
  43 + schoolList: [],
  44 + typelist: [
  45 + { label: "幼儿园", value: 0 },
  46 + { label: "小学", value: 1 },
  47 + { label: "初中", value: 2 },
  48 + { label: "高中", value: 3 },
  49 + ],
  50 + };
34 51 },
35   - },
36   - methods: {
37   - toActive(v) {
38   - this.$router.push({
39   - name: "achievementsOne",
40   - query: { schoolId: v.num },
41   - });
  52 + watch: {
  53 + tabsName(val) {
  54 + this.schoolList = [];
  55 + this.getList();
  56 + },
42 57 },
43   - //切换
44   - tabsChange() {},
45   - getList() {
46   - this.yxAxios
47   - .get(`${this.kqUrl}/schoolConsult/schoolList?schoolType=`+ (this.tabsName +1))
48   - .then((res) => {
49   - if (res.data.code == 200) {
50   - this.schoolList = res.data.data;
51   - console.log(this.schoolList)
52   - } else {
53   - this.$toast.fail(res.data.message);
54   - }
55   - });
56   - // this.yxAxios
57   - // .post(`${this.dataUrl}/sys/yx/schoolList`, {
58   - // page: 1,
59   - // pageSize: 999,
60   - // schoolType: this.tabsName +1
61   - // })
62   - // .then((res) => {
63   - // if (res.data.success) {
64   - // this.schoolList = res.data.data.list;
65   - // } else {
66   - // this.$toast.fail(res.data.message);
67   - // }
68   - // });
  58 + methods: {
  59 + toActive(v) {
  60 + this.$router.push({
  61 + name: "achievementsOne",
  62 + query: { schoolId: v.num },
  63 + });
  64 + },
  65 + //切换
  66 + tabsChange(v) {
  67 + this.tabsName = v.value;
  68 + },
  69 + getList() {
  70 + this.yxAxios
  71 + .get(
  72 + `${this.kqUrl}/schoolConsult/schoolList?schoolType=` +
  73 + this.tabsName
  74 + )
  75 + .then((res) => {
  76 + if (res.data.code == 200) {
  77 + this.schoolList = res.data.data;
  78 + console.log(this.schoolList);
  79 + } else {
  80 + this.$toast.fail(res.data.message);
  81 + }
  82 + });
  83 + },
  84 + },
  85 + mounted() {
  86 + this.getList();
69 87 },
70   - },
71   - mounted() {
72   - this.getList();
73   - },
74 88 };
75 89 </script>
76 90  
77 91 <style lang="scss" scoped>
78 92 .cardBox {
79   - padding: 2vw 0;
80   - box-sizing: border-box;
  93 + padding: 2vw 0;
  94 + box-sizing: border-box;
  95 + background: url("~@/assets/Travel/cardBox.png");
  96 + min-height: 100vh;
  97 +
  98 + .card {
  99 + display: flex;
  100 + justify-content: space-between;
  101 + padding: 10px 5vw 20px;
  102 + box-sizing: border-box;
  103 +
  104 + .card_item {
  105 + font-size: 4.3vw;
  106 + }
  107 + .item_check {
  108 + font-size: 4.4vw;
  109 + color: #fff;
  110 + }
  111 + .item_nocheck {
  112 + opacity: 0.5;
  113 + color: #fff;
  114 + }
  115 + }
  116 + .line {
  117 + width: 90vw;
  118 + border-bottom: 1px dashed #fff;
  119 + margin: 20px 5vw;
  120 + }
81 121  
82   - .schoolCss {
83   - font-size: 4.5vw;
84   - margin: 5vw;
  122 + .schoolCss {
  123 + font-size: 4.5vw;
  124 + margin: 5vw;
  125 + padding: 0.5vw 4vw;
  126 + box-sizing: border-box;
  127 + border-radius: 20px;
  128 + background-color: #fff;
85 129  
86   - .school-one {
87   - margin: 4vw 0;
88   - letter-spacing: 0.3vw;
89   - color: #666;
90   - font-size: 4.3vw;
  130 + .school-one {
  131 + width: 100%;
  132 + margin: 6vw 0;
  133 + padding: 22px 0 22px 60px;
  134 + box-sizing: border-box;
  135 + letter-spacing: 0.3vw;
  136 + color: #666;
  137 + font-size: 4.3vw;
  138 + background: url("~@/assets/Travel/schoolBox.png");
  139 + -moz-background-size: 100% 100%;
  140 + background-size: 100% 100%;
  141 + }
91 142 }
92   - }
93 143 }
94 144 </style>
95 145 \ No newline at end of file
... ...