营地2.0-活动中心、活动详情

src/assets/scss/active/activeList.scss

@@ -125,6 +125,32 @@
           font-size: 16px;
           line-height: 28px;
           margin: 0.4vw 0;
+
+          .sign-box {
+            display: inline-block;
+
+            &::after {
+              content: '|';
+              color: #333333;
+              margin: 0 5px;
+            }
+
+            &:last-child {
+              &::after {
+                content: '';
+                margin: 0;
+              }
+            }
+
+            .sign {
+              display: inline-block;
+              padding: 0 5px 0 0;
+
+              &:last-child {
+                padding-right: 0;
+              }
+            }
+          }
         }
 
         .active-list-item-cont-txt2 {

src/assets/scss/common.scss

 .com-container{
-  width: 81%;
+  width: 80%;
   max-width: 1576px;
   min-width: 1050px;
   padding: 0 50px;

src/main.js

@@ -24,12 +24,15 @@ Vue.prototype.download = download
 Vue.prototype.upload = upload
 
 // 防止重复点击自定义属性
-import preventReClick from './utils/preventRepeatClick.js'
+import preventReClick from './utils/preventRepeatClick.js';
 Vue.use(preventReClick);
 
 //埋点公共方法
-import {commonApi}from './utils/common'
+import {commonApi}from './utils/common';
+import {formatYMD, formatYMDChina}from './store/time';
 Vue.prototype.commonApi = commonApi;
+Vue.prototype.formatYMD = formatYMD;
+Vue.prototype.formatYMDChina = formatYMDChina;
 
 // 禁止浏览器前进后退 另一部本在router的index.js中
 window.addEventListener('popstate', function() {

src/request/base/active.js

@@ -10,7 +10,7 @@ export function LabelType(data) {
   })
 }
 
-// 获取营地列表-搜索模块
+// 获取活动列表-搜索模块
 export function HotList(data) {
   return request({
     method: 'post',
@@ -19,3 +19,11 @@ export function HotList(data) {
   })
 }
 
+// 获取活动详情
+export function GetActiveInfo(id) {
+  return request({
+    method: 'get',
+    url: '/modules-campsite/activityCenter/detail/' + id,
+    data: {}
+  })
+}

src/router/base/active.js

@@ -8,11 +8,11 @@ export default [
     }
   },
   {
-    path: '/active/:type/:id',
+    path: '/active/:id',
     name: 'base-active-info',
     component: () => import(/* webpackChunkName: "login" */ 'v/base/active/ActiveInfo.vue'),
     meta: {
-      title: '活动中心'
+      title: '活动详情'
     }
   },
 ]

src/store/time.js

@@ -35,3 +35,21 @@ export function intervalTime(startTime, endTime) {
   let time = y*365*24*60*60 + m*30*24*60*60 + d*24*60*60 + h*60*60 + mm*60 + ss
   return time;
 }
+
+// 2023-01-01
+export function formatYMD(data) {
+  let time = new Date(data);
+  let y = time.getFullYear();
+  let m = time.getMonth() + 1;
+  let d = time.getDate();
+  return (y + "-" + add0(m) + "-" + add0(d));
+}
+
+// 2023年1月1日
+export function formatYMDChina(data) {
+  let time = new Date(data);
+  let y = time.getFullYear();
+  let m = time.getMonth() + 1;
+  let d = time.getDate();
+  return (y + "年" + m + "月" + d + "日");
+}

src/views/base/active/Active.vue

@@ -80,10 +80,23 @@
               </div>
               <div class="title">{{item.name}}</div>
             </div>
-            <div class="active-list-item-cont-txt1">{{item.schoolName}} | {{item.subjectName}}</div>
-            <div class="active-list-item-cont-txt2">{{item.activityStartTime}} （共{{item.activityTime}}天）</div>
-            <div class="active-list-item-cont-txt3">报名截止时间：{{item.bmEndTime}}</div>
-            <div class="active-list-item-cont-bottom" @click="$router.push('/active/current/'+item.id)">
+            <div class="active-list-item-cont-txt1">
+              <div class="sign-box" v-if="item.schoolName">
+                <div class="sign"
+                     v-for="(item2, index2) in item.schoolName.split(',')"
+                     :key="index2">{{item2}}
+                </div>
+              </div>
+              <div class="sign-box" v-if="item.subjectName">
+                <div class="sign"
+                     v-for="(item2, index2) in item.subjectName.split(',')"
+                     :key="index2">{{item2}}
+                </div>
+              </div>
+            </div>
+            <div class="active-list-item-cont-txt2">{{formatYMD(item.activityStartTime)}} （共{{item.activityTime}}天）</div>
+            <div class="active-list-item-cont-txt3">报名截止时间：{{formatYMDChina(item.bmEndTime)}}</div>
+            <div class="active-list-item-cont-bottom" @click="$router.push('/active/'+item.id)">
               <div>查看详情</div>
               <i class="el-icon-right"></i>
             </div>
@@ -98,7 +111,6 @@
 </template>
 
 <script>
-  import img from "../../../assets/img/recruit.png";
   import {LabelType, HotList} from "r/base/active";
 
   export default {
@@ -218,9 +230,6 @@
           console.log(err)
           this.loading = false;
         })
-        setTimeout(() => {
-          this.loading = false;
-        }, 2000)
       },
       // 获取筛选标签列表
       getLabelType() {

src/views/base/home/Home.vue

@@ -32,10 +32,23 @@
                   </div>
                   <div class="title">{{item.name}}</div>
                 </div>
-                <div class="active-list-item-cont-txt1">{{item.schoolName}} | {{item.subjectName}}</div>
-                <div class="active-list-item-cont-txt2">{{item.activityStartTime}} （共{{item.activityTime}}天）</div>
-                <div class="active-list-item-cont-txt3">报名截止时间：{{item.bmEndTime}}</div>
-                <div class="active-list-item-cont-bottom" @click="$router.push('/active/current/'+item.id)">
+                <div class="active-list-item-cont-txt1">
+                  <div class="sign-box" v-if="item.schoolName">
+                    <div class="sign"
+                         v-for="(item2, index2) in item.schoolName.split(',')"
+                         :key="index2">{{item2}}
+                    </div>
+                  </div>
+                  <div class="sign-box" v-if="item.subjectName">
+                    <div class="sign"
+                         v-for="(item2, index2) in item.subjectName.split(',')"
+                         :key="index2">{{item2}}
+                    </div>
+                  </div>
+                </div>
+                <div class="active-list-item-cont-txt2">{{formatYMD(item.activityStartTime)}} （共{{item.activityTime}}天）</div>
+                <div class="active-list-item-cont-txt3">报名截止时间：{{formatYMDChina(item.bmEndTime)}}</div>
+                <div class="active-list-item-cont-bottom" @click="$router.push('/active/'+item.id)">
                   <div>查看详情</div>
                   <i class="el-icon-right"></i>
                 </div>
@@ -105,7 +118,7 @@
         }],
         activeList: [
           {
-            id: 1,
+            id: 21,
             activityCover: img,
             activityLabel: '线上',
             name: '2023年寒假历史营地',