创建供应商模块

components/supplier/crumbs.vue

@@ -1,26 +1,31 @@
 <template>
-  <div class="menu-com row">
-    <div class="menu-title col-md-12">
-      <a href="/">首页 ></a>
-      <a href="/supplier">供应商资源 ></a>
-      <span>供应商物料</span>
+  <div class="crumbs">
+    <div class="container">
+      <div class="menu-com row">
+        <div class="menu-title col-md-12" v-html="crumbs_info"></div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
   export default {
-    name: 'Crumbs'
+    name: 'Crumbs',
+    props: ['crumbs_info']
   }
 </script>
 
 <style scoped type="text/scss" lang="scss">
+  .crumbs{
+    background: #ecf1f1;
+  }
   .menu-com{
     margin: 0;
     .menu-title{
       line-height: 40px;
       font-size: 14px;
       padding-left: 0;
+      margin:0;
       a{
         color: #5078cb;
         font-size: 14px;

components/supplier/details.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="details_info">
+    <div class="container">
+      <div class="top">
+        <div class="img">
+          <img src="/images/store/common/default.png">
+        </div>
+        <div class="right">
+          <h4>32222222222222222222</h4>
+          <ul class="list-unstyled">
+            <li class="item">
+              <span>类目(名称)</span>
+              <p v-text="spliceString(test, 400)">3errrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr2</p>
+            </li>
+            <li class="item">
+              <span>品牌</span>
+              <p>32</p>
+            </li>
+            <li class="item">
+              <span>单位</span>
+              <p>32</p>
+            </li>
+            <li class="item">
+              <span>规格</span>
+              <p>32</p>
+            </li>
+            <li class="item">
+              <span>种类</span>
+              <p>32</p>
+            </li>
+          </ul>
+          <a @click="dialogVisible = true">立即询价</a>
+        </div>
+      </div>
+      <div class="info">
+        <table>
+          <thead>
+          <tr>
+            <th colspan="4">
+              <p>产品参数 <span>（仅供参考，以实际产品为准）</span></p>
+            </th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td width="297">工作温度范围: </td>
+            <td width="297"></td>
+            <td width="297">最大输入电压：</td>
+            <td width="297"></td>
+          </tr>
+          <tr>
+            <td>输出电压-Vout: </td>
+            <td></td>
+            <td>负载调节：</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>输出类型: </td>
+            <td></td>
+            <td>安装方式：</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>工作温度范围: </td>
+            <td></td>
+            <td>最大输入电压：</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>输出电压-Vout: </td>
+            <td></td>
+            <td>负载调节：</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>输出类型: </td>
+            <td></td>
+            <td>安装方式：</td>
+            <td></td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <el-dialog
+      title="我要询价"
+      :visible.sync="dialogVisible "
+      width="35%"
+      :before-close="handleClose">
+      <div class="form_dialog">
+        <span>这是一段信息</span>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible  = false">询价提交</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import {cutOutString} from '~utils/baseUtils.js'
+  export default {
+    name: 'DetailsView',
+    data () {
+      return {
+        dialogVisible: false,
+        searchCode: '',
+        test: '322222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222'
+      }
+    },
+    methods: {
+      spliceString (str, length) {
+        return cutOutString(str, length)
+      },
+      handleClose (done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done()
+          })
+          .catch(_ => {})
+      }
+    }
+  }
+</script>
+
+<style scoped type="text/scss" lang="scss">
+.details_info{
+  background: #ecf1f1;
+  .top{
+    margin-bottom:20px;
+    .img{
+      float:left;
+      width:350px;
+      height:350px;
+      vertical-align: top;
+      padding:36px;
+      border:1px solid #bababa;
+      img{
+        width:100%;
+        height:100%;
+      }
+    }
+    .right{
+      position:relative;
+      height:350px;
+      margin-left:370px;
+      h4{
+        width:800px;
+        font-size: 25px;
+        line-height: 25px;
+        font-weight: bold;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space:nowrap;
+        border-bottom:1px solid #3c7cf5;
+        margin:0;
+        padding-bottom:20px;
+      }
+      a{
+        display:inline-block;
+        position:absolute;
+        bottom:0;
+        left: 0;
+        background: #3c7cf5;
+        color:#fff;
+        font-size: 14px;
+        line-height: 30px;
+        height:30px;
+        padding:0 10px;
+      }
+      ul{
+        padding-top:35px;
+        li{
+          margin-bottom:25px;
+          span{
+            display:inline-block;
+            width:70px;
+            float:left;
+            color:#3c7cf5;
+            vertical-align: top;
+            text-align: right;
+          }
+          p{
+            width:365px;
+            font-size: 14px;
+            color:#333;
+            margin:0;
+            margin-left:90px;
+            word-wrap: break-word;
+            word-break: normal;
+          }
+        }
+      }
+    }
+  }
+  .info{
+    padding-bottom:90px;
+    table{
+      thead{
+        tr{
+          line-height: 34px;
+          th{
+            font-weight: bold;
+            color:#fff;
+            background: #3c7cf5;
+            padding-left:15px;
+            p{
+              font-size: 16px;
+              margin:0;
+              span{
+                font-size: 12px;
+              }
+            }
+          }
+        }
+      }
+      tbody{
+        tr{
+          line-height: 34px;
+          &:nth-child(odd){
+            background: #fff;
+          }
+          &:nth-child(even){
+            background: #f5f6f8;
+          }
+          td{
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

components/supplier/dialog.vue

@@ -0,0 +1,52 @@
+<template>
+  <el-dialog
+    title="提示"
+    :visible.sync="crumbs_info"
+    width="30%"
+    :before-close="handleClose">
+    <span>这是一段信息</span>
+    <span slot="footer" class="dialog-footer">
+    <el-button @click="crumbs_info = false">取 消</el-button>
+    <el-button type="primary" @click="crumbs_info = false">确 定</el-button>
+  </span>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    name: 'DialogView',
+    data () {
+      return {
+        crumbs_info: true
+      }
+    },
+    methods: {
+      handleClose (done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done()
+          })
+          .catch(_ => {})
+      }
+    }
+  }
+</script>
+
+<style scoped type="text/scss" lang="scss">
+  .crumbs{
+    background: #ecf1f1;
+  }
+  .menu-com{
+    margin: 0;
+    .menu-title{
+      line-height: 40px;
+      font-size: 14px;
+      padding-left: 0;
+      margin:0;
+      a{
+        color: #5078cb;
+        font-size: 14px;
+      }
+    }
+  }
+</style>

components/supplier/index.js

@@ -1,5 +1,7 @@
 import MerchantView from './merchant'
 import Resource from './resource'
 import Crumbs from './crumbs'
+import DetailsView from './details'
+import Dialog from './dialog'
 
-export { MerchantView, Resource, Crumbs }
+export { MerchantView, Resource, Crumbs, DetailsView, Dialog }

components/supplier/merchant.vue

@@ -75,7 +75,7 @@
 
 <style scoped type="text/scss" lang="scss">
 .merchant{
-  background: url(/images/supplier/banner.jpg)no-repeat;
+  background: #ecf1f1 url(/images/supplier/banner.jpg)no-repeat;
   border-top:3px solid #000;
   padding-bottom:25px;
   margin-top:-1.5em;
@@ -204,6 +204,7 @@
             top:99%;
             opacity:1;
             z-index:100;
+            min-height:125px;
           }
         }
         .popups{
@@ -212,7 +213,7 @@
           left:0;
           background: #6c6c6c;
           width:267px;
-          min-height:110px;
+          height:110px;
           padding:25px 15px 15px 10px;
           transition: all .3s ease;
           opacity: 0;

components/supplier/resource.vue

@@ -1,13 +1,280 @@
 <template>
-
+<div class="resource_info">
+  <div class="container">
+    <div class="user_info">
+      <div class="user_title">
+        <div class="user_name">
+          <span>深圳优软科技有限公司 &nbsp;<i class="fa fa-angle-down"></i></span>
+          <a href="/">进入店铺</a>
+        </div>
+        <div class="user_mes">
+          <div class="mes-list">
+            <ul>
+              <li><span>企业执照号：</span><span>1</span></li>
+              <li><span>地址：</span><span>1</span></li>
+              <li><span>邮箱：</span><span>1</span></li>
+              <li><span>电话：</span><span>1</span></li>
+              <li><span>行业：</span><span>1</span></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="search">
+        <div class="input-group">
+          <input type="search" class="form-control" placeholder="请输入要查找的内容"
+                 v-model="searchCode" @search="goodsSearch(searchCode)"/>
+          <span class="input-group-btn">
+            <button type="button" class="btn" id="search_btn" @click="goodsSearch(searchCode)">
+              搜索 <i class="fa fa-search"></i>
+            </button>
+        </span>
+        </div>
+      </div>
+    </div>
+    <div class="info_list">
+      <table>
+        <thead>
+        <tr>
+          <th width="66">序号</th>
+          <th width="336">原厂型号 / 品牌</th>
+          <th width="336">类目（名称） / 单位</th>
+          <th width="336">规格</th>
+          <th width="116">操作</th>
+        </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>12</td>
+            <td>
+              <div class="item">
+                <span class="fl">原厂型号</span>
+                <p>12322222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p>
+              </div>
+              <div class="item">
+                <span class="fl">品牌</span>
+                <p>21322222222222222222222222222222222222222222222222222222222222322222222222222222222222222222222222222222222222222222222222222222222222222</p>
+              </div>
+            </td>
+            <td><div class="item">
+              <span class="fl">类目（名称）</span>
+              <p>1</p>
+            </div>
+              <div class="item">
+                <span class="fl">单位</span>
+                <p>1</p>
+              </div>
+            </td>
+            <td>
+              <div class="item">
+                <span class="fl">规格</span>
+                <p>1</p>
+              </div>
+            </td>
+            <td><a href="/">立即询价</a></td>
+          </tr>
+          <tr>
+            <td>212</td>
+            <td>212</td>
+            <td>212</td>
+            <td>212</td>
+            <td>212</td>
+          </tr>
+        </tbody>
+      </table>
+      <div style="float: right;background: #ecf1f1;">
+        <page :total="pageParams.total" :page-size="pageParams.count"
+              :current="pageParams.page" v-on:childEvent="handleCurrentChange">
+        </page>
+      </div>
+    </div>
+  </div>
+</div>
 </template>
 
 <script>
+  import Page from '~/components/common/page/pageComponent.vue'
   export default {
-    name: 'ResourceView'
+    name: 'ResourceView',
+    data () {
+      return {
+        searchCode: '',
+        pageParams: {
+          total: 100,
+          count: 10,
+          page: 1
+        }
+      }
+    },
+    components: {
+      Page
+    },
+    methods: {
+      handleCurrentChange (type) {
+        console.log(type)
+      },
+      goodsSearch (type) {
+        console.log(type)
+      }
+    }
   }
 </script>
 
 <style scoped type="text/scss" lang="scss">
-
+.resource_info{
+  background: #ecf1f1;
+  .user_info{
+    .user_title{
+      display:inline-block;
+      position:relative;
+      padding-bottom:13px;
+      margin-right:330px;
+      &:hover{
+        .user_mes{
+          display:block;
+        }
+      }
+      .user_name{
+        span{
+          font-size: 20px;
+          color:#666;
+          font-weight: bold;
+          margin-right:10px;
+        }
+        a{
+          display:inline-block;
+          padding:0 10px;
+          border-radius:3px;
+          font-size: 12px;
+          height:24px;
+          line-height: 24px;
+          color:#fff;
+          background: #ffa200;
+        }
+      }
+      .user_mes{
+        display:none;
+        position:absolute;
+        top:100%;
+        left:0;
+        z-index: 200;
+        height:10px;
+        &:before{
+          content: '';
+          display:block;
+          position:absolute;
+          bottom:5px;
+          left:20px;
+          z-index: 100;
+          border: 5px solid rgba(0,0,0,.7);
+          -webkit-transform: rotate(45deg);
+          -moz-transform: rotate(45deg);
+          -o-transform:rotate(45deg);
+          -ms-transform: rotate(45deg);
+          transform:rotate(45deg);
+        }
+        .mes-list{
+          padding:5px 10px;
+          background: rgba(0,0,0,.7);
+          color:#fff;
+        }
+      }
+    }
+    .search{
+      width:310px;
+      margin:0;
+      float:right;
+      .btn{
+        background: #3c7cf5;
+        color:#fff;
+      }
+    }
+  }
+  .info_list{
+    padding-bottom:200px;
+    table {
+      table-layout: fixed;
+      thead{
+        tr{
+          line-height: 32px;
+          vertical-align: middle;
+          th{
+            font-size: 14px;
+            color:#fff;
+            text-align: center;
+            background: #3975f4;
+          }
+        }
+      }
+      tbody{
+        tr{
+          border:1px solid #dadada;
+          &:nth-child(odd){
+            background: #fff;
+          }
+          &:nth-child(even){
+            background: #f8f8f8;
+          }
+          &:hover{
+            cursor:pointer;
+            background: #f8fafe;
+            td{
+              &:first-child{
+                border-left:1px solid #3975f4;
+              }
+              &:last-child{
+                border-right:1px solid #3975f4;
+              }
+              border-top:1px solid #3975f4;
+              border-bottom:1px solid #3975f4;
+            }
+          }
+          td{
+            vertical-align: middle;
+            margin:0 auto;
+            padding:10px 0;
+            &:first-child, &:last-child{
+              color:#ed791c;
+              text-align: center;
+            }
+            a{
+              display:inline-block;
+              padding:0 10px;
+              margin:0 auto;
+              line-height: 24px;
+              border-radius:3px;
+              height:24px;
+              font-size: 12px;
+              color:#fff;
+              background: #3c7cf5;
+              text-align: center;
+            }
+            .item{
+              font-size: 12px;
+              line-height: 18px;
+              padding: 10px 0;
+              span{
+                display:inline-block;
+                width:85px;
+                text-align: right;
+                color:#3c7cf5;
+              }
+              p{
+                display:block;
+                width:210px;
+                height:54px;
+                margin-left:100px;
+                margin-bottom:0;
+                color:#333;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                word-break: break-all;
+                word-wrap:break-word;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

pages/supplier/_id.vue

@@ -1,28 +1,23 @@
 <template>
   <div class="supplier">
-    <carousel>
-      <kind-category @loadchild="loadProductKinds"></kind-category>
-    </carousel>
-    <crumbs/>
-    <resource/>
+    <crumbs :crumbs_info="crumbsData"/>
+    <details-view/>
   </div>
 </template>
 
 <script>
-  import { KindCategory, Carousel } from '~components/home'
-  import { Resource, Crumbs } from '~components/supplier'
+  import { DetailsView, Crumbs } from '~components/supplier'
   export default {
-    name: 'SupplierResource',
+    name: 'SupplierDetails',
     layout: 'main',
     components: {
-      KindCategory,
-      Carousel,
-      Resource,
+      DetailsView,
       Crumbs
     },
-    methods: {
-      loadProductKinds (id) {
-        this.$store.dispatch('loadAllProductKinds', {id})
+    data () {
+      return {
+        test: true,
+        crumbsData: `<a href="/">首页 ></a><a href="/supplier">供应商资源 ></a><span>供应商物料</span>`
       }
     }
   }

pages/supplier/uuidss.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="supplier">
+    <crumbs :crumbs_info="crumbsData"/>
+    <resource/>
+  </div>
+</template>
+
+<script>
+  import { Resource, Crumbs } from '~components/supplier'
+  export default {
+    name: 'SupplierResource',
+    layout: 'main',
+    components: {
+      Resource,
+      Crumbs
+    },
+    data () {
+      return {
+        crumbsData: `<a href="/">首页 ></a><a href="/supplier">供应商资源 ></a><span>供应商物料</span>`
+      }
+    }
+  }
+</script>

utils/baseUtils.js

@@ -93,7 +93,7 @@ export const cutOutString = (str, length) => {
       break
     }
   }
-  return str
+  return str + '...'
 }
 
 // 格式化日期，返回字符串