内容库

config/http.js

@@ -5,8 +5,8 @@ module.exports = {
     dev: {
         // 单引号不能少
         HTTP: '"/mock"',
-        MOCK: false,
-        PROXY: true
+        MOCK: true,
+        PROXY: false
     },
     // 生产环境
     prod: {

mock/kjy/mp/content/activityList.json

+{
+  "success":true,
+  "code":"000000",
+  "desc":"OK",
+  "timestamp":1550730785646,
+  "data":[
+      {
+          "scId":null,
+          "id":14,
+          "title":"只有程序员",
+          "type":null,
+          "mainImgUrl":"http://yun.duiba.com.cn/babi/img/rnpt9w38iz.jpg?x-oss-process=image/format,webp",
+          "readNum":27,
+          "sharedNum":null,
+          "releaseTime":null,
+          "source":"java那些事",
+          "sourceUrl":"https://mp.weixin.qq.com/s/TgscPDZ8DtV0Aw9sdgFfpA",
+          "showCard":null,
+          "text":null,
+          "head":null,
+          "myself":null,
+          "subscribe":0,
+          "notLogin":1,
+          "status":2
+      },
+      {
+          "scId":null,
+          "id":12,
+          "title":"冬至送酿酒",
+          "type":null,
+          "mainImgUrl":"http://yun.duiba.com.cn/babi/img/rnpt9w38iz.jpg?x-oss-process=image/format,webp",
+          "readNum":27,
+          "sharedNum":null,
+          "releaseTime":null,
+          "source":"java那些事",
+          "sourceUrl":"https://mp.weixin.qq.com/s/TgscPDZ8DtV0Aw9sdgFfpA",
+          "showCard":null,
+          "text":null,
+          "head":null,
+          "myself":null,
+          "subscribe":0,
+          "notLogin":1,
+          "status":2
+      },
+      {
+          "scId":null,
+          "id":19,
+          "title":"只有程",
+          "type":null,
+          "mainImgUrl":"http://yun.duiba.com.cn/babi/img/rnpt9w38iz.jpg?x-oss-process=image/format,webp",
+          "readNum":27,
+          "sharedNum":null,
+          "releaseTime":null,
+          "source":"java那些事",
+          "sourceUrl":"https://mp.weixin.qq.com/s/TgscPDZ8DtV0Aw9sdgFfpA",
+          "showCard":null,
+          "text":null,
+          "head":null,
+          "myself":null,
+          "subscribe":0,
+          "notLogin":1,
+          "status":2
+      }
+  ]
+}
\ No newline at end of file

mock/kjy/mp/content/list.json

+{
+  "success": true,
+  "code": "000000",
+  "desc": "OK",
+  "timestamp": 1550730785646,
+  "data": [
+      {
+          "scId": null,
+          "id": 15,
+          "title": "只有程序员才能读懂的西游记",
+          "type": null,
+          "mainImgUrl": "https://mmbiz.qpic.cn/mmbiz_jpg/jNmCBexQlC4PCBC5I1fJl6gQyoCdhnBtYrTOzc8KC4DP1MRGXxtmZISBO5VkABfpTZVNYkAEiajNRkzSN486AYQ/640?wx_fmt=jpeg",
+          "readNum": 27,
+          "sharedNum": null,
+          "releaseTime": null,
+          "source": "java那些事",
+          "sourceUrl": "https://mp.weixin.qq.com/s/TgscPDZ8DtV0Aw9sdgFfpA",
+          "showCard": null,
+          "text": null,
+          "head": null,
+          "myself": null,
+          "subscribe": 0,
+          "notLogin": 1
+      },
+      {
+          "scId": null,
+          "id": 19,
+          "title": "只有程序员才能读懂的西游记",
+          "type": null,
+          "mainImgUrl": "https://mmbiz.qpic.cn/mmbiz_jpg/jNmCBexQlC4PCBC5I1fJl6gQyoCdhnBtYrTOzc8KC4DP1MRGXxtmZISBO5VkABfpTZVNYkAEiajNRkzSN486AYQ/640?wx_fmt=jpeg",
+          "readNum": 27,
+          "sharedNum": null,
+          "releaseTime": null,
+          "source": "java那些事",
+          "sourceUrl": "https://mp.weixin.qq.com/s/TgscPDZ8DtV0Aw9sdgFfpA",
+          "showCard": null,
+          "text": null,
+          "head": null,
+          "myself": null,
+          "subscribe": 0,
+          "notLogin": 1
+      },
+      {
+          "scId": null,
+          "id": 13,
+          "title": "只有程序员才能读懂的西游记",
+          "type": null,
+          "mainImgUrl": "https://mmbiz.qpic.cn/mmbiz_jpg/jNmCBexQlC4PCBC5I1fJl6gQyoCdhnBtYrTOzc8KC4DP1MRGXxtmZISBO5VkABfpTZVNYkAEiajNRkzSN486AYQ/640?wx_fmt=jpeg",
+          "readNum": 27,
+          "sharedNum": null,
+          "releaseTime": null,
+          "source": "java那些事",
+          "sourceUrl": "https://mp.weixin.qq.com/s/TgscPDZ8DtV0Aw9sdgFfpA",
+          "showCard": null,
+          "text": null,
+          "head": null,
+          "myself": null,
+          "subscribe": 0,
+          "notLogin": 1
+      },
+      {
+          "scId": null,
+          "id": 14,
+          "title": "只有程序员才能读懂的西游记",
+          "type": null,
+          "mainImgUrl": "https://mmbiz.qpic.cn/mmbiz_jpg/jNmCBexQlC4PCBC5I1fJl6gQyoCdhnBtYrTOzc8KC4DP1MRGXxtmZISBO5VkABfpTZVNYkAEiajNRkzSN486AYQ/640?wx_fmt=jpeg",
+          "readNum": 27,
+          "sharedNum": null,
+          "releaseTime": null,
+          "source": "java那些事",
+          "sourceUrl": "https://mp.weixin.qq.com/s/TgscPDZ8DtV0Aw9sdgFfpA",
+          "showCard": null,
+          "text": null,
+          "head": null,
+          "myself": null,
+          "subscribe": 0,
+          "notLogin": 1
+      }     
+  ]
+}
\ No newline at end of file

src/pages/kejiji/webview/content/flex.less

+.duiui-flex() {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  word-break: break-all;
+}
+
+.duiui-flex__item(@values: 1) {
+  -webkit-box-flex: @values;
+  -moz-box-flex: @values;
+  -webkit-flex: @values;
+  -ms-flex: @values;
+  flex: @values;
+  display: block;
+  min-height: 0;
+  min-width: 0;
+  
+}
+.duiui-flex {
+  .duiui-flex();
+  .duiui-flex__item {
+    .duiui-flex__item(1);
+  }
+  &.duiui-flex--aligncenter {
+    align-items: center;
+  }
+  &.duiui-flex--spacebetween {
+    justify-content: space-between;
+  }
+  &.duiui-flex--column{
+    flex-direction: column
+  }
+}
\ No newline at end of file

src/pages/kejiji/webview/content/page/home.vue

 <template>
   <div class="page">
-    <div class="tip">{{tip}}</div>
-    <div class="title">今日早报</div>
-    <div class="home" @click="showToday">
-      <div class="bar">
-        <img class="pic" :src="src">
+    <!-- <div class="tip">{{tip}}</div> -->
+    <section class="today-news">
+      <div class="title">今日早报</div>
+      <div class="home" @click="showToday">
+        <div class="bar">
+          <img class="pic" :src="src">
+        </div>
+        <div class="tip1">{{title}}</div>
+        <div class="tip2">{{subTitle1}}</div>
+        <div class="tip2">{{subTitle2}}</div>
       </div>
-      <div class="tip1">{{title}}</div>
-      <div class="tip2">{{subTitle1}}</div>
-      <div class="tip2">{{subTitle2}}</div>
-    </div>
+    </section>
+
+    <section class="activity">
+      <div class="title">精彩活动</div>
+      <div class="activity__wrap duiui-flex duiui-flex--spacebetween">
+        <div class="activity-process duiui-flex duiui-flex--spacebetween">
+          <div class="activity__item " v-for="(item1, index) in activitLyist.activity_inprogress" :key="item1.id">
+              <div class="title__block">
+                <span v-if="index === 0"> 正在进行</span>
+              </div>
+              <div class="activity__img">
+                <img :src="item1.mainImgUrl" alt="">
+              </div>
+              <p>{{item1.title}}</p>
+          </div>          
+        </div>
+        <div class="activity-soon duiui-flex duiui-flex--spacebetween">
+          <div class="activity__item " v-for="item2 in activitLyist.activity_soon" :key="item2.id">
+              <div class="title__block">
+                <span v-if="index === 0"> 即将开始</span>
+              </div>              
+              <div class="activity__img">
+                <img :src="item2.mainImgUrl" alt="">
+              </div>
+              <p>{{item2.title}}</p>
+          </div>          
+        </div>
+      </div>
+    </section>
+    <section class="container article-container">
+      <div class="header duiui-flex duiui-flex--spacebetween">
+        <h3>必转内容</h3>
+        <a href="/pages/content/articleList/main" class="see-more__link" hover-class="none"><span class="more">查看更多</span></a>
+      </div>  
+      <div class="article__list">
+        <div v-for="item in list" class="content__wrap duiui-flex" :key="item.id">
+          <div class="content-info duiui-flex__item" @click="goArticleDetail(item.id)">
+            <p class="content-info__title">{{item.title}}</p>
+            <div class="share-info duiui-flex">
+              <div class="read-times">阅读{{item.readNum}}</div>
+              <span class="dui-tag dui-tag--solid" type="solid">同行分享{{item.sharedNum}}次</span>
+            </div>
+          </div>
+          <div class="content-avator">
+            <img :src="item.mainImgUrl" alt="">
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -21,7 +71,9 @@ import { shareConfig, updateLink } from "@js/share";
 const SCID = getUrlParameter('scid');
 const API = {
   getInitDaily: '/kjy/mp/content/getInitDaily',
-  getScId: '/kjy/mp/seller/getScId'
+  getScId: '/kjy/mp/seller/getScId',
+  getarticleList: '/kjy/mp/content/list',
+  activityList: '/kjy/mp/content/activityList'
 }
 const inMiniprogram = getUrlParameter("mini") == 1;
 export default {
@@ -29,12 +81,13 @@ export default {
     return {
       tip: "home",
       title: '',
-      list: [1, 2, 3, 4],
+      list: [],
       scid: 0,
       src: "//yun.dui88.com/h5/miniprogram/kejiji/web/rili.png",
       title: "",
       subTitle1: "",
-      subTitle2: ""
+      subTitle2: "",
+      activitLyist: []
     };
   },
   methods: {
@@ -109,6 +162,42 @@ export default {
         }
       }
     },
+    async getArticleList(type) {
+      let res = await get(API.getarticleList, {pageNo: this.pageNo, pageSize: 4});
+      if (res.success) {
+        if (type) {
+          this.list = this.list.concat(res.data);
+        } else {
+          this.list = res.data;
+        }        
+      } else {
+
+      }
+    },
+    async getActivityList() {
+      let res = await get(API.activityList, {});
+      if (res.success) {
+        let activity_inprogress = res.data.filter(it => it.status == 2);
+        let activity_soon = res.data.filter(it => it.status == 1);
+        this.activitLyist = {activity_inprogress, activity_soon}
+      }
+    },
+    async goArticleDetail(id) {
+      console.log(id);
+      let params = {
+        contentId: id
+      };
+      let res = await get(API.getScId, params);
+      if (res.success) {
+        let id = res.data;
+        let url = formatUrl('/pages/article/main', {
+          scid: id
+        });
+        wx.miniProgram.navigateTo({
+          url: url
+        });
+      }
+    },
     getH5Authorize(){
       let url = '/kjy/authorize/wxh5base?uri=/kjy/mp/content?mini=1';
       window.location.href = url;
@@ -119,10 +208,13 @@ export default {
   },
   created() {
     this.initData();
+    this.getArticleList();
+    this.getActivityList();
   }
 };
 </script>
 <style lang="less" scoped>
+@import '../flex.less';
 .page {
   background: rgb(250, 250, 250);
   font-size: 12px;
@@ -183,4 +275,122 @@ export default {
   margin: 0 auto;
   font-size: 24px;
 }
+.article-container{
+  padding: 0 40px;
+  .content__wrap{
+    padding: 40px 0;
+    border-top: 1px solid  #EDEDED;
+    .content-info{
+      .content-info__title{
+        font-size: 28px;
+        color: #333333;
+        font-weight: bold;
+        letter-spacing: 0.15px;
+        line-height: 44px;
+        overflow : hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        display: -webkit-box;
+        width: 100%;
+        margin: 0
+      }
+      .share-info{
+        margin-top: 22px;
+        font-size: 24px;
+        color: #999999;
+        align-items: flex-end
+      }
+      .read-times{
+        margin-right: 26px;
+      }
+    }
+  }
+  .content-avator{
+    width: 140px;
+    height: 140px;
+    border-radius: 20px;
+    overflow: hidden;
+    margin-left: 10px;
+    img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+.dui-tag{
+    color: #333;
+    padding: 2px 16px 2px 16px;
+    font-size: 22px;
+    text-align: center;
+    border-radius: 40px;
+    display: inline-block;
+  }
+  .dui-tag--solid{
+      background: #E9ECFF;
+      color: #4863FF;
+      letter-spacing: 0.12px;
+}
+  .header{
+      margin-bottom: 24px;
+      align-items: flex-end;
+      h3{
+        font-size: 40px;
+        color: #333333;
+        letter-spacing: 0.44px;
+        margin: 0;
+        font-weight: normal;
+      }
+      a{
+        text-decoration: none;
+      }
+      span{
+        font-size: 24px;
+        color: #999999;
+        
+      }
+    }
+    .activity{
+      margin-bottom: 50px;
+      .activity__img{
+        width: 170px;
+        height: 210px;
+        border-radius: 10px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .activity__wrap{
+        margin: 0 auto;
+        width: 670px;
+        background: #FFFFFF;
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: 0.02rem 0.02rem 0.08rem #f0f0f0;
+        padding: 0 10px;
+        box-sizing: border-box;
+        .activity__item{
+          padding: 24px;
+        }
+        p{
+          text-align: center
+        }
+        .activity-process{
+          width: 100%;
+          .title__block{
+            height: 40px;
+            margin-bottom: 14px;
+          }
+        }
+        .activity-soon{
+          width: 100%;
+          .title__block{
+            height: 40px;
+            margin-bottom: 14px;
+          }
+        }
+      }
+    }
 </style>
\ No newline at end of file