feat: 移动端首页完成

jydocs-mobile/src/components/Search.vue

@@ -0,0 +1,63 @@
+<template>
+  <van-sticky :offset-top="Offset">
+    <van-search class="my-search" left-icon="diy-search" v-model.trim="input" placeholder="搜索文档" />
+  </van-sticky>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator'
+import { Icon, Search, Sticky } from 'vant'
+
+// @ is an alias to /src
+  @Component({
+    name: 'Search',
+    components: {
+      [Search.name]: Search,
+      [Sticky.name]: Sticky,
+      [Icon.name]: Icon
+    }
+  })
+export default class Empty extends Vue {
+    @Prop({ default: 'empty-image' }) state?: string | undefined;
+    input = ''
+
+    get Offset () {
+      const tempN = document.querySelector('.j-header.jy-app-header') as HTMLDivElement
+      if (tempN) {
+        return tempN.offsetHeight
+      } else {
+        return 0
+      }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.my-search {
+  &::v-deep.van-search {
+    padding: 7px 16px;
+    .van-search__content {
+      border-radius: 8px;
+      background: #F5F6F7;
+      border: 1px solid rgba(0, 0, 0, 0.05);
+    }
+    .van-cell {
+      align-items: center;
+      height: 38px;
+    }
+    .van-field__left-icon {
+      height: 20px;
+      margin-right: 8px;
+    }
+    .van-field__control {
+      color: #171826;
+      font-family: PingFang SC;
+      font-size: 14px;
+      letter-spacing: 0px;
+      text-align: left;
+    }
+  }
+
+  @include diy-icon('search', 20, 20)
+}
+</style>

jydocs-mobile/src/views/Home.vue

@@ -1,100 +1,202 @@
 <template>
-  <div class="users-page">
-    剑鱼文库首页
-    <!-- <div class="balance">
-      <div class="cumulative-sales balance-div">
-        <div class="sales-num balance-num">
-          <span class="money">￥</span>
-          <span class="money-num">{{ pageData.dis_sales | moneyLocal }}</span>
-        </div>
-        <span class="sales-text balance-text">累计销售</span>
+  <div class="pages--home">
+    <search></search>
+    <div class="new-group base-group">
+      <div class="title-group flex-r-c center left">
+        <span></span>
+        <h5>最新文档</h5>
       </div>
-      <div class="accumulated-commission balance-div">
-        <div class="commission-num balance-num">
-          <span class="money">￥</span>
-          <span class="money-num">{{ pageData.dis_commission | moneyLocal }}</span>
+      <div class="list-group flex-c-c">
+        <div class="list-item flex-r-c" v-for="item in pageData.new" :key="item.id" @click="goContent(item)">
+          <div class="flex flex-r-c center left">
+            <van-icon :name="'diy-' + item.type" />
+            <div class="flex">
+              <div class="van-ellipsis">{{item.title}}</div>
+            </div>
+          </div>
+          <div class="right-info flex-r-c center right">
+            <van-icon name="diy-iconJianYu" />
+            <span>{{item.money}}</span>
+          </div>
         </div>
-        <span class="commission-text balance-text">累计佣金</span>
       </div>
     </div>
-    <div class="commission">
-      <div style="display:flex;align-items:center;height:60px">
-        <span class="withdrawal"></span>
-        <div class="van-content">
-          <div class="van-left">
-            <div class="com-text">
-              <span class="wable">可提现佣金</span>
-              <span class="settlement">每月20号结算上月佣金</span>
+    <div class="hot-group base-group">
+      <div class="title-group flex-r-c center left">
+        <span></span>
+        <h5>热门下载</h5>
+      </div>
+      <div class="list-group flex-c-c">
+        <div class="list-item flex-r-c" v-for="item in pageData.new" :key="item.id" @click="goContent(item)">
+          <div class="flex flex-r-c center left">
+            <van-icon :name="'diy-' + item.type" />
+            <div class="flex">
+              <div class="van-ellipsis">{{item.title}}</div>
             </div>
           </div>
-          <div class="van-right">
-            <span class="money">￥</span>
-            <span class="com-money">{{ pageData.money | moneyLocal }}</span>
-            <a class="tixian" @click="goWithDraw" href="javascript:;">提现</a>
+          <div class="right-info flex-r-c center right">
+            <van-icon name="diy-iconJianYu" />
+            <span>{{item.money}}</span>
           </div>
         </div>
       </div>
-      <div style="display:flex;align-items:center;height:60px">
-        <span class="estimate"></span>
-        <div class="van-content">
-          <div class="van-left">
-            <div class="com-text">
-              <span class="wable">预估佣金</span>
-              <span class="settlement" v-if="pageData.partner_status !== 1">认证后预估佣金才能提现</span>
+    </div>
+    <div class="keep-group base-group">
+      <div class="title-group flex-r-c center left">
+        <span></span>
+        <h5>精选推荐</h5>
+      </div>
+      <div class="list-group flex-c-c">
+        <div class="list-item flex-r-c" v-for="item in pageData.new" :key="item.id" @click="goContent(item)">
+          <div class="flex flex-r-c center left">
+            <van-icon :name="'diy-' + item.type" />
+            <div class="flex">
+              <div class="van-ellipsis">{{item.title}}</div>
             </div>
           </div>
-          <div class="van-right">
-            <template>
-              <span class="estimate-money">￥</span>
-              <span class="estimate-money-num">{{ pageData.sum_commission | moneyLocal }}</span>
-            </template>
-            <div @click="goAuth" class="auth" href="javascript:;" v-if="canNeedAuth" :class="{stop: !canInAuth}">去认证</div>
+          <div class="right-info flex-r-c center right">
+            <van-icon name="diy-iconJianYu" />
+            <span>{{item.money}}</span>
           </div>
         </div>
       </div>
     </div>
-    <div class="options">
-      <router-link :to="item.to" class="option" v-for="(item, i) in navItem" :key="i" :class="item.className">
-        <span class="oicon"></span>
-        <div class="share-right">
-          <span class="share-text">{{item.name}}</span>
-          <van-icon name="arrow" />
-        </div>
-      </router-link>
-    </div> -->
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import Search from '@/components/Search.vue'
 // import { Cell, CellGroup, Icon, Dialog, Toast } from 'vant'
+import { Icon } from 'vant'
 // import { mapActions } from 'vuex'
-// import { MixinTop } from '@/utils/mixin-top'
-
-@Component({
-  name: 'users',
-  // mixins: [MixinTop],
-  components: {
-    // [Cell.name]: Cell,
-    // [CellGroup.name]: CellGroup,
-    // [Icon.name]: Icon
-  },
-  methods: {
-    // ...mapActions({
-    //   ajaxData: 'main/getHome'
-    // })
-  }
-})
+  // import { MixinTop } from '@/utils/mixin-top'
+  @Component({
+    name: 'home',
+    // mixins: [MixinTop],
+    components: {
+      // [Cell.name]: Cell,
+      // [CellGroup.name]: CellGroup,
+      [Icon.name]: Icon,
+      Search
+    },
+    methods: {
+      // ...mapActions({
+      //   ajaxData: 'main/getHome'
+      // })
+    }
+  })
 
 export default class extends Vue {
-  // protected ajaxData: any
-  pageData: any = {}
+    // protected ajaxData: any
+    pageData: any = {}
 
-  created () {
-    console.log('111')
-  }
+    created () {
+      console.log('111')
+      this.pageData = {
+        new: [
+          {
+            type: 'pdf',
+            id: '1',
+            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
+            money: 200000
+          },
+          {
+            type: 'excel',
+            id: '2',
+            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
+            money: 200
+          },
+          {
+            type: 'word',
+            id: '3',
+            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
+            money: 200
+          },
+          {
+            type: 'ppt',
+            id: '4',
+            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
+            money: 200
+          },
+          {
+            type: 'other',
+            id: '5',
+            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
+            money: 200
+          }
+        ]
+      }
+    }
+
+    goContent (item: any) {
+      console.log(item)
+    }
 }
 </script>
-<style lang="scss">
+<style scoped lang="scss">
+.pages--home {
+  background: #F5F6F7;
+  padding-bottom: 40px;
+  box-sizing: border-box;
+
+  @include diy-icon('iconJianYu', 24);
+
+  @include diy-icon('pdf', 24);
+  @include diy-icon('word', 24);
+  @include diy-icon('excel', 24);
+  @include diy-icon('ppt', 24);
+
+  .base-group {
+    padding: 4px 19px 4px 16px;
+    box-sizing: border-box;
 
+    &.new-group {
+      margin-top: $topSearchHeight;
+    }
+
+    .list-group {
+      border-radius: 8px;
+      background: #FFFFFF;
+      padding: 8px 0;
+      box-sizing: border-box;
+      .list-item {
+        padding: 6px 12px;
+        box-sizing: border-box;
+        i {
+          flex-shrink: 0;
+          margin-right: 4px;
+        }
+        .flex {
+          min-width: 0;
+        }
+        .right-info {
+          margin-left: 4px;
+          flex-shrink: 0;
+        }
+      }
+    }
+
+    .title-group {
+      padding: 16px 0 6px 0;
+      margin-bottom: 4px;
+      box-sizing: border-box;
+      color: #171826;
+      font-family: PingFang SC;
+      font-size: 18px;
+      line-height: 26px;
+      letter-spacing: 0px;
+      text-align: left;
+
+      span {
+        display: inline-block;
+        width: 3px;
+        height: 16px;
+        border-radius: 11px;
+        background: #2ABED1;
+        margin-right: 8px;
+      }
+    }
+  }
+}
 </style>