Merge branch 'feature/mobile'

jydocs-mobile/src/components/Search.vue

@@ -1,6 +1,7 @@
 <template>
-  <van-sticky :offset-top="Offset">
-    <van-search class="my-search" left-icon="diy-search" v-model.trim="input" placeholder="搜索文档" />
+  <van-sticky class="van-fade-an" :offset-top="Offset">
+      <div class="click-pop" v-if="type === 'click'"  @click="onClick"></div>
+      <van-search @input="$emit('input', $event)" @search="onSearch" class="my-search" left-icon="diy-search" v-model.trim="input" placeholder="搜索文档" />
   </van-sticky>
 </template>
 
@@ -18,13 +19,23 @@ import { Icon, Search, Sticky } from 'vant'
     }
   })
 export default class Empty extends Vue {
-    @Prop({ default: 'empty-image' }) state?: string | undefined;
+    @Prop({ default: 'input' }) type?: string | undefined;
     input = ''
 
+    onSearch () {
+      this.$emit('submit', this.input)
+    }
+
+    onClick () {
+      if (this.type === 'click') {
+        this.$emit('click')
+      }
+    }
+
     get Offset () {
       const tempN = document.querySelector('.j-header.jy-app-header') as HTMLDivElement
       if (tempN) {
-        return tempN.offsetHeight
+        return tempN.offsetHeight - 1
       } else {
         return 0
       }
@@ -33,6 +44,24 @@ export default class Empty extends Vue {
 </script>
 
 <style scoped lang="scss">
+@keyframes show {
+  to {
+    opacity: 1;
+  }
+}
+.van-fade-an {
+  opacity: 0;
+  animation: show 1s 300ms ease forwards;
+  z-index: 666;
+  position: relative;
+}
+.click-pop {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 99;
+  opacity: 0;
+}
 .my-search {
   &::v-deep.van-search {
     padding: 7px 16px;

jydocs-mobile/src/router/modules/main.ts

@@ -1,4 +1,12 @@
 export default [
+  {
+    path: '/search',
+    name: 'search',
+    component: () => import(/* webpackChunkName: "test" */ '@/views/Search.vue'),
+    meta: {
+      title: '剑鱼文库'
+    }
+  },
   {
     path: '/purchasesuccess',
     name: 'purchasesuccess',

jydocs-mobile/src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pages--home">
-    <search></search>
+    <search type="click" @click="goSearch"></search>
     <div class="new-group base-group">
       <div class="title-group flex-r-c center left">
         <span></span>
@@ -46,17 +46,24 @@
         <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">
+      <div class="list-group card-group flex-c-c">
+        <div class="card-item flex-r-c"  v-for="item in pageData.new" :key="item.id" @click="goContent(item)">
+          <div class="mini-img-group">
+            <img :src="item.img" alt="">
             <van-icon :name="'diy-' + item.type" />
+          </div>
+          <div class="flex-c-c">
             <div class="flex">
-              <div class="van-ellipsis">{{item.title}}</div>
+              <div class="title-text van-multi-ellipsis--l2">{{item.title}}</div>
+            </div>
+            <div class="flex-c-c info-text">
+              <span>贡献者: dshasjhd</span>
+              <span>贡献者: dshasjhd | dshasjhd | 200k</span>
+            </div>
+            <div class="money-group flex-r-c center left">
+              <van-icon class="s20" name="diy-iconJianYu" />
+              <span class="red-text">{{item.money}}</span>
             </div>
-          </div>
-          <div class="right-info flex-r-c center right">
-            <van-icon name="diy-iconJianYu" />
-            <span>{{item.money}}</span>
           </div>
         </div>
       </div>
@@ -96,6 +103,7 @@ export default class extends Vue {
       this.pageData = {
         new: [
           {
+            img: require('@/assets/images/bgApp.png'),
             type: 'pdf',
             id: '1',
             title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
@@ -103,24 +111,28 @@ export default class extends Vue {
           },
           {
             type: 'excel',
+            img: require('@/assets/images/bgApp.png'),
             id: '2',
             title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
             money: 200
           },
           {
             type: 'word',
+            img: require('@/assets/images/bgApp.png'),
             id: '3',
             title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
             money: 200
           },
           {
             type: 'ppt',
+            img: require('@/assets/images/bgApp.png'),
             id: '4',
             title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
             money: 200
           },
           {
             type: 'other',
+            img: require('@/assets/images/bgApp.png'),
             id: '5',
             title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
             money: 200
@@ -129,6 +141,12 @@ export default class extends Vue {
       }
     }
 
+    goSearch () {
+      this.$router.push({
+        name: 'search'
+      })
+    }
+
     goContent (item: any) {
       console.log(item)
     }
@@ -140,7 +158,12 @@ export default class extends Vue {
   padding-bottom: 40px;
   box-sizing: border-box;
 
-  @include diy-icon('iconJianYu', 24);
+  @include diy-icon('iconJianYu', 16, 16);
+
+  .van-icon-diy-iconJianYu.s20 {
+    width: 20px;
+    height: 20px;
+  }
 
   @include diy-icon('pdf', 24);
   @include diy-icon('word', 24);
@@ -158,8 +181,11 @@ export default class extends Vue {
     .list-group {
       border-radius: 8px;
       background: #FFFFFF;
-      padding: 8px 0;
       box-sizing: border-box;
+      padding: 8px 0;
+      &.card-group {
+        padding-left: 12px;
+      }
       .list-item {
         padding: 6px 12px;
         box-sizing: border-box;
@@ -175,6 +201,62 @@ export default class extends Vue {
           flex-shrink: 0;
         }
       }
+      .card-item {
+        padding: 8px 16px 12px 0;
+        box-sizing: border-box;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        &:nth-last-child(1) {
+          border-bottom-color: transparent;
+          padding-bottom: 8px;
+        }
+        .money-group {
+          margin-top: 8px;
+        }
+        .mini-img-group {
+          flex-shrink: 0;
+          position: relative;
+          border-radius: 4px;
+          border: 1px solid rgba(0, 0, 0, 0.1);
+          width: 100px;
+          height: 124px;
+          margin-right: 12px;
+          overflow: hidden;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+          i {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+          }
+        }
+        .info-text {
+          color: #9B9CA3;
+          font-family: PingFang SC;
+          font-size: 12px;
+          line-height: 18px;
+          letter-spacing: 0px;
+          text-align: left;
+        }
+        .red-text {
+          color: #FB483D;
+          font-family: PingFang SC;
+          font-size: 14px;
+          line-height: 20px;
+          letter-spacing: 0px;
+          text-align: left;
+        }
+        .title-text {
+          color: #171826;
+          font-family: PingFang SC;
+          font-weight: bold;
+          font-size: 14px;
+          line-height: 20px;
+          letter-spacing: 0px;
+          text-align: left;
+        }
+      }
     }
 
     .title-group {

jydocs-mobile/src/views/Search.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="pages--search" :data-top="Offset">
+    <search ref="getH" id="mySearch" key="search-page" @input="goSearchInput" @submit="goSearch"></search>
+    <van-sticky :offset-top="Offset">
+      <van-tabs v-model="active"
+          title-active-color="#2ABED1"
+          title-inactive-color="#5F5E64"
+          color="#2ABED1"
+        >
+        <van-tab :title="item.label" :name="item.type" v-for="item in tabs" :key="item.type"></van-tab>
+      </van-tabs>
+    </van-sticky>
+    <h1>4544454545454</h1>
+    <h1>4544454545454</h1>
+    <h1>4544454545454</h1>
+    <h1>4544454545454</h1>
+    <h1>4544454545454</h1>
+    <h1>4544454545454</h1>
+    <h1>4544454545454</h1>
+    <h1>4544454545454</h1>
+    <h1>4544454545454</h1>
+    <h1>4544454545454</h1>
+    <h1>4544454545454</h1>
+    <h1>4544454545454</h1>
+    <h1>4544454545454</h1>
+    <h1>4544454545454</h1>
+    <h1>4544454545454</h1>
+    <h1>4544454545454</h1>
+    <h1>4544454545454</h1>
+    <h1>4544454545454</h1>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import Search from '@/components/Search.vue'
+import { Tabs, Tab, Icon, Sticky, Toast } from 'vant'
+// import { mapActions } from 'vuex'
+  // import { MixinTop } from '@/utils/mixin-top'
+  @Component({
+    name: 'home',
+    // mixins: [MixinTop],
+    components: {
+      [Tab.name]: Tab,
+      [Tabs.name]: Tabs,
+      [Sticky.name]: Sticky,
+      [Icon.name]: Icon,
+      Search
+    },
+    methods: {
+      // ...mapActions({
+      //   ajaxData: 'main/getHome'
+      // })
+    }
+  })
+
+export default class extends Vue {
+    // protected ajaxData: any
+    pageData: any = {}
+    searchTop = 54
+    active = 'all1'
+    searchInput = ''
+    tabs = [
+      {
+        type: 'all1',
+        label: '全部'
+      },
+      {
+        type: 'all2',
+        label: '招标'
+      },
+      {
+        type: 'all3',
+        label: '法律法规'
+      },
+      {
+        type: 'all4',
+        label: '行业报告'
+      }
+    ]
+
+    created () {
+      this.pageData = {
+        new: [
+          {
+            img: require('@/assets/images/bgApp.png'),
+            type: 'pdf',
+            id: '1',
+            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
+            money: 200000
+          },
+          {
+            type: 'excel',
+            img: require('@/assets/images/bgApp.png'),
+            id: '2',
+            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
+            money: 200
+          },
+          {
+            type: 'word',
+            img: require('@/assets/images/bgApp.png'),
+            id: '3',
+            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
+            money: 200
+          },
+          {
+            type: 'ppt',
+            img: require('@/assets/images/bgApp.png'),
+            id: '4',
+            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
+            money: 200
+          },
+          {
+            type: 'other',
+            img: require('@/assets/images/bgApp.png'),
+            id: '5',
+            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
+            money: 200
+          }
+        ]
+      }
+    }
+
+    mounted () {
+      this.onFocus()
+      const tempI = (this.$refs.getH as Vue).$el as HTMLDivElement
+      this.searchTop = tempI.offsetHeight
+    }
+
+    get Offset () {
+      const tempN = document.querySelector('.j-header.jy-app-header') as HTMLDivElement
+      if (tempN) {
+        return tempN.offsetHeight - 1 + this.searchTop
+      } else {
+        return 0
+      }
+    }
+
+    onFocus () {
+      const tempN = document.querySelector('#mySearch input') as HTMLInputElement
+      if (tempN) {
+        this.$nextTick(() => {
+          tempN.focus()
+          setTimeout(() => {
+            tempN.focus()
+          }, 200)
+        })
+      }
+    }
+
+    goSearch (search: any) {
+      console.log(search)
+    }
+
+    goSearchInput (search: string) {
+      this.searchInput = search
+    }
+
+    goContent (item: any) {
+      console.log(item)
+    }
+}
+</script>
+<style scoped lang="scss">
+.pages--search {
+  background: #F5F6F7;
+  padding-bottom: 40px;
+  box-sizing: border-box;
+}
+</style>