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 1 <template>
2   - <div class="cardBox">
3   - <!-- <van-tabs v-model="tabsName">
  2 + <div class="cardBox">
  3 + <!-- <van-tabs v-model="tabsName">
4 4 <van-tab title="红色教育"></van-tab>
5 5 <van-tab title="劳动教育"></van-tab>
6 6 <van-tab title="课外实践"></van-tab>
7 7 <van-tab title="研学旅行"></van-tab>
8 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 62 </div>
43 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 76 </template>
59 77  
60 78 <script>
61   -import Tabbar4 from '@/component/Tabbar4'
  79 +import Tabbar4 from "@/component/Tabbar4";
62 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 171 </script>
141 172  
142 173 <style lang="scss" scoped>
143 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 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 373 </style>
... ...