Commit fee62f3d07c62c4cd8280837c4e92f058225f5e8

Authored by
1 parent b106b009
Exists in master

fix:成果

src/assets/blue_title.png 0 → 100644

38 KB

src/main.js
1 1 import Vue from 'vue'
2   -import { Popup, Toast, Picker, Tag, Tab, Tabs, Area, Search, Swipe, SwipeItem, Cell, List, Collapse, CollapseItem, Button, Field, Icon, Sticky, DropdownMenu, DropdownItem, Rate, Calendar, Checkbox, Empty, Lazyload, Radio, RadioGroup, CellGroup, Dialog, CheckboxGroup, NavBar, PullRefresh, Cascader } from 'vant';
  2 +import { Popup, Toast, Picker, Tag, Tab, Tabs, Area, Search, Swipe, SwipeItem, Cell, List, Collapse, CollapseItem, Button, Field, Icon, Sticky, DropdownMenu, DropdownItem, Rate, Calendar, Checkbox, Empty, Lazyload, Radio, RadioGroup, CellGroup, Dialog, CheckboxGroup, NavBar, PullRefresh, Cascader , ImagePreview } from 'vant';
3 3 import App from './App.vue'
4 4 import router from './router'
5 5 import store from './store'
... ... @@ -8,9 +8,10 @@ import Moment from 'moment'
8 8 Vue.prototype.Moment = Moment;
9 9  
10 10 // Vue.prototype.yanxueUrl = 'https://yanxue.myjxt.com';
  11 +Vue.prototype.dataUrl = 'http://47.110.50.251:9010'
11 12  
12   -// import yxAxios from '@/https/yxAxios'
13   -// Vue.prototype.yxAxios = yxAxios;
  13 +import yxAxios from '@/https/yxAxios'
  14 +Vue.prototype.yxAxios = yxAxios;
14 15  
15 16 import { mgop } from '@aligov/jssdk-mgop';
16 17 Vue.prototype.mgop = mgop;
... ... @@ -51,6 +52,7 @@ Vue
51 52 .use(PullRefresh)
52 53 .use(RadioGroup)
53 54 .use(Cascader)
  55 + .use(ImagePreview)
54 56 .use(Radio);
55 57 Vue.config.productionTip = false;
56 58 Vue.config.ignoredElements = ['wx-open-launch-app'];
... ...
src/views/Yanxue/achievementsOne.vue
... ... @@ -7,31 +7,29 @@
7 7 <van-tab title="研学旅行"></van-tab>
8 8 </van-tabs> -->
9 9  
10   - <div class="contextBox">
11   - <!-- <div class="art_card" @click="toDetails">
12   - <div class="art_title">庆祝中国共产主义青年团成立100年大会</div>
13   - <div class="art_bot">
14   - <div class="redSticky">置顶</div>
15   - <div class="greyTime">发布于2022.5.10</div>
16   - <div class="greyFont">浏览量 2022</div>
17   - </div>
18   - </div> -->
19   -
20   - <div class="art_card_pic" v-for="(v, i) in newsList" :key="i" @click="toDetails(v.videopic)">
21   - <div class="art_context" >
22   - <div class="art_title">{{ v.titleName }}</div>
  10 + <div class="contextBox" v-if="newsList.length != 0">
  11 + <div
  12 + class="art_card_pic"
  13 + v-for="(v, i) in newsList"
  14 + :key="i"
  15 + @click="toDetails(v)"
  16 + >
  17 + <div class="art_context">
  18 + <div class="art_title">{{ v.titleDesc }}</div>
23 19 <div class="art_bot">
24   - <div class="redSticky" v-if="v.liul > 1000">置顶</div>
25   - <div class="greyTime">发布于2022.7.4</div>
26   - <div class="greyFont">浏览量 {{v.liul}}</div>
  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="greyFont">浏览量 {{ v.readNumber }}</div>
27 23 </div>
28 24 </div>
29 25 <div class="art_pic">
30   - <img :src="v.imgpic" />
  26 + <img :src="v.imgUrl" />
31 27 </div>
32 28 </div>
33 29 </div>
34 30  
  31 + <van-empty description="暂无数据" v-else/>
  32 +
35 33 <div class="imgPic" @click="toChoose">
36 34 <img src="@/assets/changeSchool.png" />
37 35 </div>
... ... @@ -47,154 +45,37 @@ export default {
47 45 data() {
48 46 return {
49 47 tabsName: 1,
50   - list1: [
51   - {
52   - titleName: "假日红色研学——酱文化篇",
53   - liul: 2022,
54   - imgpic:
55   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/300d6414-1639-4bb8-89b1-3a916dab4359.png",
56   - videopic:
57   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/0676ee97-d5bc-4d6a-ae9b-4f942fcdd213.mp4",
58   - },
59   - {
60   - titleName: "假日红色研学——消防篇",
61   - liul: 1120,
62   - imgpic:
63   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/93314705-ca4e-43a0-b2cd-4ccf8aa9d850.png",
64   - videopic:
65   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/f997a748-4575-4759-9834-e6a34612bc14.mp4",
66   - },
67   - {
68   - titleName: "假日红色研学——兰亭篇",
69   - liul: 320,
70   - imgpic:
71   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/dbe041a4-3c60-411f-afa8-557c18210d06.png",
72   - videopic:
73   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/7850890c-f8d1-4e1d-bfc7-3cd5c6f69e81.mp4",
74   - },
75   - {
76   - titleName: "假日红色研学——非遗篇",
77   - liul: 113,
78   - imgpic:
79   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/f058b51e-48ee-4f11-b571-a0c85c3ab9ce.png",
80   - videopic:
81   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/6e8f66b5-d44c-4ca7-aaf9-c82eec23532f.mp4",
82   - },
83   - {
84   - titleName: "假日红色研学——黄酒小镇篇",
85   - liul: 365,
86   - imgpic:
87   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/1b0b852e-97bd-4faf-9034-159bae23bf88.png",
88   - videopic:
89   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/2d1ef3db-4003-4722-a4a2-853d54a284da.mp4",
90   - },
91   - {
92   - titleName: "假日红色研学——景岳堂篇",
93   - liul: 154,
94   - imgpic:
95   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/75b8a162-1b35-4478-b286-d38e59b25c88.png",
96   - videopic:
97   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/9de14f1c-c996-475c-b839-8d438ca4ec2b.mp4",
98   - },
99   - {
100   - titleName: "假日红色研学——鲁迅故里篇",
101   - liul: 702,
102   - imgpic:
103   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/b3cca4ff-6304-4591-8b35-959034316d11.png",
104   - videopic:
105   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/e06b10f0-4596-44d2-a937-5b038ede70da.mp4",
106   - },
107   - {
108   - titleName: "假日红色研学——青藤书屋篇",
109   - liul: 483,
110   - imgpic:
111   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/d014be8f-e30c-4122-ab98-5d7853b8b525.png",
112   - videopic:
113   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/a68075df-4c33-482a-8be3-b921cf3da7a4.mp4",
114   - },
115   - {
116   - titleName: "假日红色研学——棠棣篇",
117   - liul: 78,
118   - imgpic:
119   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/9664fc60-22ec-44ec-80a1-cb8177963436.png",
120   - videopic:
121   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/cb82b2ed-1f80-48e5-9c39-ef2b0a388aa4.mp4",
122   - },
123   - {
124   - titleName: "假日红色研学——周恩来祖居篇",
125   - liul: 35,
126   - imgpic:
127   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/24c53642-5191-453a-949c-3bef03e6ec4e.png",
128   - videopic:
129   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/d623f9a2-4e70-4fe0-ba52-7703af38248a.mp4",
130   - },
131   - {
132   - titleName: "假日红色研学——宝业篇",
133   - liul: 68,
134   - imgpic:
135   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/1819f0fd-a4cf-44ce-b832-545fe0c571f3.png",
136   - videopic:
137   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/a24a2a12-4771-4b84-b1b5-1612bb200da4.mp4",
138   - },
139   - ],
140   - list2: [
141   - {
142   - titleName: "红馆听老兵爷爷讲故事",
143   - liul: 1684,
144   - imgpic:
145   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/c722b105-9e17-4cc9-8cfd-2c98af72f9ec.png",
146   - videopic:
147   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/84a71b3e-3f43-425b-bea3-0a75bbffed1d.mp4",
148   - },
149   - {
150   - titleName: "雏鹰小队红色研学",
151   - liul: 450,
152   - imgpic:
153   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/95cf5713-194f-49ba-8487-7625e2a705fe.png",
154   - videopic:
155   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/43fb6927-e059-4f59-a3c9-0b1b70d2f10a.mp4",
156   - },
157   - {
158   - titleName: "英才素质拓展训练营",
159   - liul: 655,
160   - imgpic:
161   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/59876663-e69f-4f54-abd4-901687192a94.png",
162   - videopic:
163   - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/6ac9d056-8d59-4bbc-ac99-d44f35557c03.mp4",
164   - },
165   - ],
166 48 newsList: [],
167 49 };
168 50 },
169   - computed: {
170   - schoolName() {
171   - return this.$route.query.schoolName;
172   - },
173   - },
174   - watch: {
175   - schoolName: {
176   - handler: function (v, k) {
177   - if (v == "柯桥区中国轻纺城小学") {
178   - this.newsList = JSON.parse(JSON.stringify(this.list2));
179   - } else {
180   - this.newsList = JSON.parse(JSON.stringify(this.list1));
181   - }
182   - },
183   - immediate: true,
184   - },
185   - },
186 51 methods: {
187 52 //详情新闻
188 53 toDetails(v) {
189   - console.log(this.schoolName);
190   - window.open(v);
191   - // this.$router.push({ name: "pageDetails" });
  54 + this.$router.push({ name: "pageDetails" ,query: {schoolId:v.schoolId,dataId: v.id}});
192 55 },
193 56 //选择
194 57 toChoose() {
195 58 this.$router.push({ name: "chooseSchoolOne" });
196 59 },
  60 + getData() {
  61 + this.yxAxios
  62 + .post(`${this.dataUrl}/sys/yx/consultList`, {
  63 + page: 1,
  64 + pageSize: 999,
  65 + schoolId: this.$route.query.schoolId*1
  66 + })
  67 + .then((res) => {
  68 + if (res.data.success) {
  69 + this.newsList = res.data.data.list;
  70 + } else {
  71 + this.$message.warning(res.data.message);
  72 + }
  73 + });
  74 + },
197 75 },
  76 + mounted() {
  77 + this.getData()
  78 + }
198 79 };
199 80 </script>
200 81  
... ...
src/views/Yanxue/chooseSchoolOne.vue
... ... @@ -24,37 +24,43 @@ export default {
24 24 data() {
25 25 return {
26 26 tabsName: 0,
27   - schoolList: [
28   - { schoolName: "柯桥区实验小学" },
29   - { schoolName: "柯桥区中国轻纺城小学" },
30   - ],
  27 + schoolList: [],
31 28 };
32 29 },
33 30 watch: {
34 31 tabsName(val) {
35   - console.log(val);
36 32 this.schoolList = [];
37   - if (val == 0) {
38   - this.getList();
39   - } else if (val == 1) {
40   -
41   - } else if (val == 2) {
42   - }
  33 + this.getList();
43 34 },
44 35 },
45 36 methods: {
46 37 toActive(v) {
47   - this.$router.push({ name: "achievementsOne" ,query: {schoolName: v.schoolName}});
  38 + this.$router.push({
  39 + name: "achievementsOne",
  40 + query: { schoolId: v.id },
  41 + });
48 42 },
49 43 //切换
50 44 tabsChange() {},
51 45 getList() {
52   - this.schoolList = [
53   - { schoolName: "柯桥区实验小学" },
54   - { schoolName: "柯桥区中国轻纺城小学" },
55   - ];
  46 + this.yxAxios
  47 + .post(`${this.dataUrl}/sys/yx/schoolList`, {
  48 + page: 1,
  49 + pageSize: 999,
  50 + schoolType: this.tabsName +1
  51 + })
  52 + .then((res) => {
  53 + if (res.data.success) {
  54 + this.schoolList = res.data.data.list;
  55 + } else {
  56 + this.$message.warning(res.data.message);
  57 + }
  58 + });
56 59 },
57 60 },
  61 + mounted() {
  62 + this.getList();
  63 + },
58 64 };
59 65 </script>
60 66  
... ...
src/views/Yanxue/pageDetails.vue
1 1 <template>
2   - <div>
3   - <!-- <div class="box_pic">
4   - <img src="@/assets/login_bg.png" />
  2 + <div class="box">
  3 + <div class="box_pic" v-if="background">
  4 + <img :src="background" />
5 5 </div>
6   - <div class="article">
7   - <div class="article_title">庆祝中国共产主义青年团成立100年大会</div>
8   - <div class="article_time">发布于 2022.5.10 浏览量 2022</div>
9   - <div class="article_con">共青团员们,青年朋友们,同志们:</div>
10   - </div> -->
11   - <div class="videoCss">
12   - <video :src="videopic"></video>
  6 +
  7 + <div class="contextCss">
  8 + <div class="modelBox" v-for="(v, i) in modelList" :key="i">
  9 + <div class="titleCss">{{ v.name }}</div>
  10 + <!--相册-->
  11 + <div v-if="v.type == 1" class="typeOne">
  12 + <div
  13 + class="pic"
  14 + v-for="(x, y) in v.imgList"
  15 + :key="y"
  16 + @click="openImg(x, y, v)"
  17 + >
  18 + <img :src="x.response" />
  19 + </div>
  20 + </div>
  21 + <!--视频-->
  22 + <div v-if="v.type == 2" class="typeTwo">
  23 + <div class="videoTwo" v-for="(x, y) in v.videoList" :key="y">
  24 + <video controls>
  25 + <source :src="x" type="video/mp4" />
  26 + </video>
  27 + </div>
  28 + </div>
  29 + <!--图文-->
  30 + <div v-if="v.type == 3" class="typeThree">
  31 + <div class="contextThree" v-html="v.context"></div>
  32 + </div>
  33 + </div>
13 34 </div>
14 35 </div>
15 36 </template>
16 37  
17 38 <script>
  39 +import { ImagePreview } from "vant";
18 40 export default {
19 41 data() {
20   - return { arr: 0 };
21   - },
22   - computed: {
23   - videopic() {
24   - return sessionStorage.getItem("videopic");
25   - },
  42 + return { arr: 0, modelList: [] ,background: ''};
26 43 },
27 44 methods: {
28 45 //获取数据
29   - getTable() {},
  46 + getTable() {
  47 + this.yxAxios
  48 + .post(`${this.dataUrl}/sys/yx/getConsultDetail`, {
  49 + id: this.$route.query.dataId,
  50 + })
  51 + .then((res) => {
  52 + if (res.data.success) {
  53 + if (!res.data.data.background) {
  54 + this.background = res.data.data.imgUrl;
  55 + }else {
  56 + this.background = res.data.data.background;
  57 + }
  58 + let arr = JSON.parse(res.data.data.modelList);
  59 + this.modelList = arr;
  60 + } else {
  61 + this.$message.warning(res.data.message);
  62 + }
  63 + });
  64 + },
  65 + //打开图片
  66 + openImg(x, y, v) {
  67 + let imgList = v.imgList.map((v) => v.response);
  68 +
  69 + ImagePreview({
  70 + images: imgList,
  71 + startPosition: y,
  72 + });
  73 + },
  74 + //添加浏览量
  75 + addReadNum() {
  76 + this.yxAxios
  77 + .post(`${this.dataUrl}/sys/yx/updateRead`, {
  78 + id: this.$route.query.dataId,
  79 + })
  80 + .then((res) => {
  81 + if(res.data.success) {
  82 + console.log('阅读量成功')
  83 + }else {
  84 + console.log('阅读量失败')
  85 + }
  86 + })
  87 + }
30 88 },
31 89 mounted() {
32 90 this.getTable();
  91 + this.addReadNum();
33 92 },
34 93 };
35 94 </script>
36 95  
37 96 <style lang="scss" scoped>
38   -.box_pic {
39   - width: 100%;
40   - height: 364px;
41   - background-color: #999;
  97 +.box {
  98 + background-color: #f5f6fa;
  99 + min-height: 100vh;
42 100  
43   - img {
  101 + .box_pic {
44 102 width: 100%;
45   - height: 100%;
46   - }
47   -}
48   -.article {
49   - padding: 48px 30px;
50   -
51   - .article_title {
52   - color: #333;
53   - font-size: 44px;
54   - font-weight: bold;
55   - display: -webkit-box;
56   - -webkit-box-orient: vertical;
57   - -webkit-line-clamp: 2; //限制行数
58   - overflow: hidden; //超出部分隐藏
59   - text-overflow: ellipsis; //用一个省略号代替超出的内容
60   - }
61   - .article_time {
62   - margin: 22px 0 44px;
63   - color: #999;
64   - font-size: 24px;
65   - }
66   - .article_con {
67   - font-size: 32px;
  103 + height: 364px;
  104 + background-color: #999;
  105 +
  106 + img {
  107 + width: 100%;
  108 + height: 100%;
  109 + }
68 110 }
69   -}
70   -.videoCss {
71   - width: 100vw;
72 111  
73   - video {
74   - width: 100%;
  112 + .contextCss {
  113 + width: 90vw;
  114 + position: absolute;
  115 + top: 300px;
  116 + left: 5vw;
  117 + border-radius: 5vw;
  118 + background-color: #fff;
  119 + padding: 3vw;
  120 + box-sizing: border-box;
  121 + box-shadow: 1px 1px 1px 1px rgb(221, 220, 220);
  122 +
  123 + .modelBox {
  124 + margin: 3vw;
  125 + display: flex;
  126 + justify-content: center;
  127 + flex-wrap: wrap;
  128 +
  129 + .titleCss {
  130 + width: 60vw;
  131 + padding: 3.5vw;
  132 + box-sizing: border-box;
  133 + font-size: 4.6vw;
  134 + font-weight: bold;
  135 + background-image: url("../../assets/blue_title.png");
  136 + -moz-background-size: 100% 100%;
  137 + background-size: 100% 100%;
  138 + text-align: center;
  139 + margin-bottom: 5vw;
  140 + }
  141 +
  142 + .typeOne {
  143 + margin: 5vw;
  144 +
  145 + .pic {
  146 + width: 70vw;
  147 + height: 45vw;
  148 + margin-bottom: 5vw;
  149 +
  150 + img {
  151 + width: 100%;
  152 + height: 100%;
  153 + }
  154 + }
  155 + }
  156 + .typeTwo {
  157 + margin: 5vw;
  158 +
  159 + .videoTwo {
  160 + width: 70vw;
  161 + height: 45vw;
  162 + margin-bottom: 5vw;
  163 +
  164 + video {
  165 + width: 100%;
  166 + height: 100%;
  167 + }
  168 + }
  169 + }
  170 + .typeThree {
  171 + margin: 5vw;
  172 +
  173 + .contextThree {
  174 + width: 70vw;
  175 + margin-bottom: 5vw;
  176 + font-size: 4.5vw;
  177 + overflow: auto;
  178 +
  179 + ::v-deep img {
  180 + max-width: 60vw !important;
  181 + height: 50vw;
  182 + }
  183 + }
  184 + }
  185 + }
75 186 }
76 187 }
77 188 </style>
78 189 \ No newline at end of file
... ...