SxhGroup / sxhPersonalCenterZLB

Download as
Browse Code »

Commit f00666386309ccbf778628b83a25456a001a80ff

Authored by 边
1 parent 47fc2d71
Exists in master

fix：提交

Showing 1 changed file with 328 additions and 222 deletions   Show diff stats
src/views/Yanxue/achievementsOne.vue
  Diff comments   View file @f006663
1 <template> 1 <template>
2 - <div class="cardBox">  
3 - <!-- <van-tabs v-model="tabsName"> 2 + <div class="cardBox">
  3 + <!-- <van-tabs v-model="tabsName">
4 <van-tab title="红色教育"></van-tab> 4 <van-tab title="红色教育"></van-tab>
5 <van-tab title="劳动教育"></van-tab> 5 <van-tab title="劳动教育"></van-tab>
6 <van-tab title="课外实践"></van-tab> 6 <van-tab title="课外实践"></van-tab>
7 <van-tab title="研学旅行"></van-tab> 7 <van-tab title="研学旅行"></van-tab>
8 </van-tabs> --> 8 </van-tabs> -->
9 - <van-tabs v-model="sort" @click="tabsClick">  
10 - <van-tab title="发布时间">发布时间</van-tab>  
11 - <van-tab title="点赞量">点赞量</van-tab>  
12 - <van-tab title="阅读量">阅读量</van-tab>  
13 - </van-tabs>  
14 - <div class="contextBox" v-if="newsList.length != 0" @load="getData">  
15 - <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getData">  
16 - <div class="art_card_pic" v-for="(v, i) in newsList" :key="i" @click="toDetails(v)">  
17 - <div class="art_context">  
18 - <div class="art_title">{{ v.titleDesc }}</div>  
19 - <div class="art_bot">  
20 - <!-- <div class="redSticky" v-if="v.readNumber">置顶</div> -->  
21 - <!-- <div class="greyTime">发布于 {{ v.createTime ? Moment(v.createTime).format('YYYY-MM-DD HH:mm:ss') : ''}}</div> -->  
22 - <div class="greyTime">点赞量 {{ v.likeNumber }}</div>  
23 - <div class="greyFont">浏览量 {{ v.readNumber }}</div>  
24 - </div>  
25 - </div>  
26 - <div class="art_pic">  
27 - <img :src="v.imgUrl" />  
28 - </div>  
29 - </div>  
30 - </van-list>  
31 - <!-- <div  
32 - class="art_card_pic"  
33 - v-for="(v, i) in newsList"  
34 - :key="i"  
35 - @click="toDetails(v)" 9 + <van-tabs v-model="sort" @click="tabsClick">
  10 + <van-tab title="发布时间">发布时间</van-tab>
  11 + <van-tab title="点赞量">点赞量</van-tab>
  12 + <van-tab title="阅读量">阅读量</van-tab>
  13 + </van-tabs>
  14 + <div class="contextBox" v-if="newsList.length != 0" @load="getData">
  15 + <van-list
  16 + v-model="loading"
  17 + :finished="finished"
  18 + finished-text="没有更多了"
  19 + @load="getData"
36 > 20 >
37 - <div class="art_context">  
38 - <div class="art_title">{{ v.titleDesc }}</div>  
39 - <div class="art_bot">  
40 - <div class="greyTime">点赞量 {{ v.likeNumber }}</div>  
41 - <div class="greyFont">浏览量 {{ v.readNumber }}</div> 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 + <div
  43 + class="new_card"
  44 + v-for="(v, i) in newsList"
  45 + :key="i"
  46 + @click="toDetails(v)"
  47 + >
  48 + <div class="new_card_pic">
  49 + <img :src="v.imgUrl" />
  50 + </div>
  51 + <div class="new_card_title">{{ v.titleDesc }}</div>
  52 + <div class="new_card_bot">
  53 + <div class="card_bot_L"></div>
  54 + <div class="card_bot_R">
  55 + <div class="greyTime">
  56 + 点赞量 {{ v.likeNumber }}
  57 + </div>
  58 + <div class="greyFont">
  59 + 浏览量 {{ v.readNumber }}
  60 + </div>
  61 + </div>
42 </div> 62 </div>
43 </div> 63 </div>
44 - <div class="art_pic">  
45 - <img :src="v.imgUrl" />  
46 - </div>  
47 - </div> -->  
48 - </div> 64 + </van-list>
  65 + <div class="orgBtn" @click="toChoose" v-if="!schoolId">点击查看更多研学成果</div>
  66 + </div>
49 67
50 - <van-empty description="暂无数据" v-else /> 68 + <van-empty description="暂无数据" v-else />
51 69
52 - <div class="imgPic" @click="toChoose">  
53 - <img src="@/assets/changeSchool.png" />  
54 - </div> 70 + <div class="imgPic" @click="toChoose" v-if="schoolId">
  71 + <img src="@/assets/changeSchool.png" />
  72 + </div>
55 73
56 - <tabbar4 active="fruit"></tabbar4>  
57 - </div> 74 + <tabbar4 active="fruit"></tabbar4>
  75 + </div>
58 </template> 76 </template>
59 77
60 <script> 78 <script>
61 -import Tabbar4 from '@/component/Tabbar4' 79 +import Tabbar4 from "@/component/Tabbar4";
62 export default { 80 export default {
63 - components: { Tabbar4 },  
64 - data() {  
65 - return {  
66 - tabsName: 1,  
67 - newsList: [],  
68 - pageNum: 1,  
69 - pageSize: 10,  
70 - finished: false,  
71 - loading: false,  
72 - sort: 0,  
73 - }  
74 - },  
75 - methods: {  
76 - //详情新闻  
77 - toDetails(v) {  
78 - this.$router.push({  
79 - name: 'pageDetails',  
80 - query: { schoolId: v.schoolId, dataId: v.id },  
81 - })  
82 - },  
83 - //选择  
84 - toChoose() {  
85 - this.$router.push({ name: 'chooseSchoolOne' }) 81 + components: { Tabbar4 },
  82 + data() {
  83 + return {
  84 + tabsName: 1,
  85 + newsList: [],
  86 + pageNum: 1,
  87 + pageSize: 10,
  88 + finished: false,
  89 + loading: false,
  90 + sort: 0,
  91 + };
86 }, 92 },
87 - tabsClick() {  
88 - this.newsList = []  
89 - this.pageNum = 1  
90 - this.pageSize = 10  
91 - this.getData() 93 + computed: {
  94 + schoolId() {
  95 + return this.$route.query.schoolId ? this.$route.query.schoolId : ''
  96 + }
92 }, 97 },
93 - getData() {  
94 - this.loading = true  
95 - let schoolId = this.$route.query.schoolId ? this.$route.query.schoolId : ''  
96 -  
97 - this.yxAxios  
98 - .get(  
99 - `${this.kqUrl}/schoolConsult/consultList?pageNum=${this.pageNum}&pageSize=${this.pageSize}&schoolId=` +  
100 - schoolId +  
101 - `&sort=` +  
102 - this.sort  
103 - )  
104 - .then((res) => {  
105 - if (res.data.code == 200) {  
106 - this.newsList = this.newsList.concat(res.data.data.list)  
107 - this.loading = false  
108 - if (this.pageSize * this.pageNum >= res.data.data.total) {  
109 - this.finished = true  
110 - } else {  
111 - this.pageNum++ 98 + methods: {
  99 + //详情新闻
  100 + toDetails(v) {
  101 + this.$router.push({
  102 + name: "pageDetails",
  103 + query: { schoolId: v.schoolId, dataId: v.id },
  104 + });
  105 + },
  106 + //选择
  107 + toChoose() {
  108 + this.$router.push({ name: "chooseSchoolOne" });
  109 + },
  110 + tabsClick() {
  111 + this.newsList = [];
  112 + this.pageNum = 1;
  113 + this.pageSize = 10;
  114 + this.getData();
  115 + },
  116 + getData() {
  117 + this.loading = true;
  118 + // let schoolId = this.$route.query.schoolId
  119 + // ? this.$route.query.schoolId
  120 + // : "";
  121 + let pageSize = this.pageSize
  122 + let pageNum = this.pageNum
  123 + if(!this.schoolId){
  124 + pageSize = 10
  125 + pageNum = 1
112 } 126 }
113 - } else {  
114 - this.$toast.fail(res.data.message)  
115 - }  
116 - })  
117 - // this.yxAxios  
118 - // .post(`${this.dataUrl}/sys/yx/consultList`, {  
119 - // page: 1,  
120 - // pageSize: 999,  
121 - // schoolId: this.$route.query.schoolId*1  
122 - // })  
123 - // .then((res) => {  
124 - // if (res.data.success) {  
125 - // this.newsList = res.data.data.list;  
126 - // } else {  
127 - // this.$toast.fail(res.data.message);  
128 - // }  
129 - // }); 127 + this.yxAxios
  128 + .get(
  129 + `${this.kqUrl}/schoolConsult/consultList?pageNum=${pageNum}&pageSize=${pageSize}&schoolId=` +
  130 + this.schoolId +
  131 + `&sort=` +
  132 + this.sort
  133 + )
  134 + .then((res) => {
  135 + 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
  141 + }
  142 +
  143 + this.newsList = this.newsList.concat(
  144 + res.data.data.list
  145 + );
  146 + this.loading = false;
  147 +
  148 +
  149 + if (
  150 + this.pageSize * this.pageNum >=
  151 + res.data.data.total
  152 + ) {
  153 + this.finished = true;
  154 + } else {
  155 + this.pageNum++;
  156 + }
  157 + } else {
  158 + this.$toast.fail(res.data.message);
  159 + }
  160 + });
  161 + },
130 }, 162 },
131 - },  
132 - mounted() {  
133 - this.getData()  
134 - this.$zwlogPvGlobal({ loadTime: new Date() })  
135 - this.$nextTick(() => {  
136 - this.$zwlogPvGlobal({ responseTime: new Date() })  
137 - })  
138 - },  
139 -} 163 + mounted() {
  164 + this.getData();
  165 + this.$zwlogPvGlobal({ loadTime: new Date() });
  166 + this.$nextTick(() => {
  167 + this.$zwlogPvGlobal({ responseTime: new Date() });
  168 + });
  169 + },
  170 +};
140 </script> 171 </script>
141 172
142 <style lang="scss" scoped> 173 <style lang="scss" scoped>
143 .cardBox { 174 .cardBox {
144 - padding: 2vw 0;  
145 - box-sizing: border-box; 175 + padding: 2vw 0;
  176 + box-sizing: border-box;
  177 + background-color: #FEFEFE;
146 178
147 - .contextBox {  
148 - margin-top: 20px;  
149 - margin-bottom: 140px;  
150 - .art_card {  
151 - padding: 28px;  
152 - box-sizing: border-box; 179 + .contextBox {
  180 + margin-top: 20px;
  181 + margin-bottom: 140px;
  182 + .art_card {
  183 + padding: 28px;
  184 + box-sizing: border-box;
153 185
154 - .art_title {  
155 - width: 100%;  
156 - font-size: 34px;  
157 - font-weight: bold;  
158 - display: -webkit-box;  
159 - -webkit-box-orient: vertical;  
160 - -webkit-line-clamp: 1; //限制行数  
161 - overflow: hidden; //超出部分隐藏  
162 - text-overflow: ellipsis; //用一个省略号代替超出的内容  
163 - } 186 + .art_title {
  187 + width: 100%;
  188 + font-size: 34px;
  189 + font-weight: bold;
  190 + display: -webkit-box;
  191 + -webkit-box-orient: vertical;
  192 + -webkit-line-clamp: 1; //限制行数
  193 + overflow: hidden; //超出部分隐藏
  194 + text-overflow: ellipsis; //用一个省略号代替超出的内容
  195 + }
164 196
165 - .art_bot {  
166 - padding-top: 22px;  
167 - box-sizing: border-box;  
168 - display: flex;  
169 - align-items: center; 197 + .art_bot {
  198 + padding-top: 22px;
  199 + box-sizing: border-box;
  200 + display: flex;
  201 + align-items: center;
170 202
171 - .redSticky {  
172 - color: #ff4444;  
173 - font-size: 24px;  
174 - padding: 2px;  
175 - box-sizing: border-box;  
176 - border: 1px solid #ff4444;  
177 - } 203 + .redSticky {
  204 + color: #ff4444;
  205 + font-size: 24px;
  206 + padding: 2px;
  207 + box-sizing: border-box;
  208 + border: 1px solid #ff4444;
  209 + }
178 210
179 - .greyTime {  
180 - color: #999;  
181 - font-size: 24px;  
182 - margin: 0 20px;  
183 - } 211 + .greyTime {
  212 + color: #999;
  213 + font-size: 24px;
  214 + margin: 0 20px;
  215 + }
184 216
185 - .greyFont {  
186 - color: #999;  
187 - font-size: 24px; 217 + .greyFont {
  218 + color: #999;
  219 + font-size: 24px;
  220 + }
  221 + }
188 } 222 }
189 - }  
190 - }  
191 - .art_card_pic {  
192 - padding: 28px;  
193 - box-sizing: border-box;  
194 - display: flex;  
195 - justify-content: space-between; 223 + // .art_card_pic {
  224 + // padding: 28px;
  225 + // box-sizing: border-box;
  226 + // display: flex;
  227 + // justify-content: space-between;
196 228
197 - .art_context {  
198 - height: 180px;  
199 - display: flex;  
200 - align-content: space-between;  
201 - flex-wrap: wrap; 229 + // .art_context {
  230 + // height: 180px;
  231 + // display: flex;
  232 + // align-content: space-between;
  233 + // flex-wrap: wrap;
202 234
203 - .art_title {  
204 - width: 100%;  
205 - font-size: 34px;  
206 - font-weight: bold;  
207 - display: -webkit-box;  
208 - -webkit-box-orient: vertical;  
209 - -webkit-line-clamp: 2; //限制行数  
210 - overflow: hidden; //超出部分隐藏  
211 - text-overflow: ellipsis; //用一个省略号代替超出的内容  
212 - } 235 + // .art_title {
  236 + // width: 100%;
  237 + // font-size: 34px;
  238 + // font-weight: bold;
  239 + // display: -webkit-box;
  240 + // -webkit-box-orient: vertical;
  241 + // -webkit-line-clamp: 2; //限制行数
  242 + // overflow: hidden; //超出部分隐藏
  243 + // text-overflow: ellipsis; //用一个省略号代替超出的内容
  244 + // }
213 245
214 - .art_bot {  
215 - padding-top: 22px;  
216 - box-sizing: border-box;  
217 - display: flex;  
218 - align-items: center; 246 + // .art_bot {
  247 + // padding-top: 22px;
  248 + // box-sizing: border-box;
  249 + // display: flex;
  250 + // align-items: center;
219 251
220 - .redSticky {  
221 - color: #ff4444;  
222 - font-size: 24px;  
223 - padding: 2px; 252 + // .redSticky {
  253 + // color: #ff4444;
  254 + // font-size: 24px;
  255 + // padding: 2px;
  256 + // box-sizing: border-box;
  257 + // border: 1px solid #ff4444;
  258 + // }
  259 +
  260 + // .greyTime {
  261 + // color: #999;
  262 + // font-size: 24px;
  263 + // margin: 0;
  264 + // }
  265 +
  266 + // .greyFont {
  267 + // color: #999;
  268 + // font-size: 24px;
  269 + // margin-left: 20px;
  270 + // }
  271 + // }
  272 + // }
  273 + // .art_pic {
  274 + // width: 180px;
  275 + // height: 180px;
  276 + // flex-shrink: 0;
  277 + // background-color: #ff4444;
  278 +
  279 + // img {
  280 + // width: 100%;
  281 + // height: 100%;
  282 + // }
  283 + // }
  284 + // }
  285 + .new_card {
  286 + margin: 28px;
224 box-sizing: border-box; 287 box-sizing: border-box;
225 - border: 1px solid #ff4444;  
226 - } 288 + height: 545px;
  289 + // margin-bottom: 30px;
  290 + box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
  291 + border-radius: 25px;
227 292
228 - .greyTime {  
229 - color: #999;  
230 - font-size: 24px;  
231 - margin: 0;  
232 - } 293 + .new_card_pic {
  294 + width: 100%;
  295 + height: 380px;
  296 + border-radius: 25px 25px 0 0;
  297 + overflow: hidden;
233 298
234 - .greyFont {  
235 - color: #999;  
236 - font-size: 24px;  
237 - margin-left: 20px;  
238 - }  
239 - }  
240 - }  
241 - .art_pic {  
242 - width: 180px;  
243 - height: 180px;  
244 - flex-shrink: 0;  
245 - background-color: #ff4444; 299 + img {
  300 + width: 100%;
  301 + height: 100%;
  302 + }
  303 + }
  304 + .new_card_title {
  305 + width: 100%;
  306 + padding: 0 10px;
  307 + box-sizing: border-box;
  308 + font-size: 34px;
  309 + font-weight: bold;
  310 + margin-top: 20px;
  311 + display: -webkit-box;
  312 + -webkit-box-orient: vertical;
  313 + -webkit-line-clamp: 1; //限制行数
  314 + overflow: hidden; //超出部分隐藏
  315 + text-overflow: ellipsis; //用一个省略号代替超出的内容
  316 + }
  317 + .new_card_bot {
  318 + padding: 22px 10px 0 10px;
  319 + box-sizing: border-box;
  320 + display: flex;
  321 + align-items: center;
  322 + justify-content: space-between;
246 323
247 - img {  
248 - width: 100%;  
249 - height: 100%; 324 + .card_bot_L {
  325 + color: #999;
  326 + font-size: 24px;
  327 + }
  328 + .card_bot_R {
  329 + display: flex;
  330 +
  331 + .greyTime {
  332 + color: #999;
  333 + font-size: 24px;
  334 + margin: 0;
  335 + }
  336 +
  337 + .greyFont {
  338 + color: #999;
  339 + font-size: 24px;
  340 + margin-left: 20px;
  341 + }
  342 + }
  343 + }
  344 + }
  345 + .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;
250 } 358 }
251 - }  
252 } 359 }
253 - }  
254 - .imgPic {  
255 - position: fixed;  
256 - right: 2vw;  
257 - bottom: 40vw;  
258 - width: 26vw;  
259 - height: 26vw; 360 + .imgPic {
  361 + position: fixed;
  362 + right: 2vw;
  363 + bottom: 40vw;
  364 + width: 26vw;
  365 + height: 26vw;
260 366
261 - img {  
262 - width: 100%;  
263 - height: 100%; 367 + img {
  368 + width: 100%;
  369 + height: 100%;
  370 + }
264 } 371 }
265 - }  
266 } 372 }
267 </style> 373 </style>