创建供应商模块

components/supplier/crumbs.vue

@@ -1,35 +0,0 @@
-<template>
-  <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',
-    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;
-      }
-    }
-  }
-</style>

components/supplier/details.vue

@@ -1,6 +1,17 @@
 <template>
   <div class="details_info">
     <div class="container">
+      <div class="crumbs">
+        <div class="container">
+          <div class="menu-com row">
+            <div class="menu-title col-md-12">
+              <a href="/">首页 ></a>
+              <a href="/supplier">供应商资源 ></a>
+              <span>供应商物料</span>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="top">
         <div class="img">
           <img src="/images/store/common/default.png">
@@ -29,7 +40,7 @@
               <p>32</p>
             </li>
           </ul>
-          <a @click="dialogVisible = true">立即询价</a>
+          <a @click="hasDialog = true">立即询价</a>
         </div>
       </div>
       <div class="info">
@@ -82,34 +93,116 @@
         </table>
       </div>
     </div>
-
     <el-dialog
       title="我要询价"
-      :visible.sync="dialogVisible "
-      width="35%"
+      :visible.sync="hasDialog "
       :before-close="handleClose">
       <div class="form_dialog">
-        <span>这是一段信息</span>
+        <ul class="list-inline">
+          <li class="form-item">
+            <span>型号：</span>
+            <p>32432</p>
+          </li>
+          <li class="form-item">
+            <span>类目：</span>
+            <p>3244333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333332</p>
+          </li>
+          <li class="form-item">
+            <span>品牌：</span>
+            <p>32432</p>
+          </li>
+          <li class="form-item">
+            <span>规格：</span>
+            <p>32432</p>
+          </li>
+          <li class="form-item">
+            <span><i>*</i>截止日期：</span>
+            <el-date-picker
+              v-model="form.name"
+              type="date"
+              :picker-options="pickerOptions"
+              @change="setDeadLineValid"
+              :editable="false"
+              :clearable="true"
+              size="mini">
+            </el-date-picker>
+          </li>
+          <li class="form-item">
+            <span>封装：</span>
+            <input type="text" class="form-control" v-model="form.date1"/>
+          </li>
+          <li class="form-item">
+            <span>单价预算：</span>
+            <select v-model="form.date1" class="form-control" style="width:40px;">
+            <option value="RMB">¥</option>
+            <option value="USD">$</option>
+            </select>
+            <input type="number" class="form-control"/>
+          </li>
+          <li class="form-item">
+            <span>生产日期：</span>
+            <el-date-picker
+              v-model="form.date2"
+              type="date"
+              :picker-options="pickerOptions"
+              @change="setDeadProduction"
+              :editable="false"
+              :clearable="true"
+              size="mini">
+            </el-date-picker>
+          </li>
+          <li class="form-item">
+            <span>采购数量：</span>
+            <input type="number" class="form-control"/>
+          </li>
+        </ul>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="dialogVisible  = false">询价提交</el-button>
+        <a type="button" @click="hasDialog=false">询价提交</a>
       </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
-  import {cutOutString} from '~utils/baseUtils.js'
+  import {cutOutString, formatDate} from '~utils/baseUtils.js'
   export default {
     name: 'DetailsView',
     data () {
       return {
+        pickerOptions: {
+          disabledDate (time) {
+            // 大于等于今天 小于三个月后
+            return time.getTime() < Date.now() - 1000 * 60 * 60 * 24 || time.getTime() > Date.now() + 1000 * 60 * 60 * 24 * 30 * 3
+          }
+        },
+        hasDialog: false,
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
         dialogVisible: false,
         searchCode: '',
-        test: '322222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222'
+        test: '322222222222222222222222222222222222222222222222222222'
       }
     },
     methods: {
+      setDeadProduction () {
+        this.form.name = formatDate(this.form.name, 'yyyy-MM-dd hh:mm:ss')
+      },
+      setDeadLineValid: function () {
+        this.form.date2 = formatDate(this.form.date2, 'yyyy-MM-dd hh:mm:ss')
+        // this.validObj.deadline = true
+      },
+      onSubmit () {
+        console.log('submit!')
+      },
       spliceString (str, length) {
         return cutOutString(str, length)
       },
@@ -124,9 +217,144 @@
   }
 </script>
 
-<style scoped type="text/scss" lang="scss">
+<style type="text/scss" lang="scss">
 .details_info{
-  background: #ecf1f1;
+  background: #fff;
+  .el-dialog{
+    width: 680px!important;
+    .el-dialog__header{
+      background: #4290f7;
+      line-height: 40px;
+      padding: 0 20px 0;
+      .el-dialog__title{
+        color:#fff;
+      }
+      .el-dialog__headerbtn:hover .el-dialog__close, .el-dialog__headerbtn:focus .el-dialog__close{
+        color:#fff;
+      }
+    }
+    .el-dialog__body{
+      padding: 10px 20px;
+    }
+    .el-dialog__footer{
+      text-align: center;
+      a{
+        display:inline-block;
+        background: #3c7cf5;
+        color:#fff;
+        font-size: 14px;
+        line-height: 30px;
+        height:30px;
+        padding:0 10px;
+        border-radius:5px;
+      }
+    }
+  }
+  .form_dialog{
+    ul{
+      li{
+        width:50%;
+        font-size: 14px;
+        color:#666;
+        vertical-align: top;
+        margin-bottom:15px;
+        &.form-item {
+          position: relative;
+          p{
+            margin:0;
+            margin-left:80px;
+            word-break: break-all;
+            word-wrap: break-word;
+          }
+          span {
+            float:left;
+            width: 80px;
+            text-align: right;
+            display: inline-block;
+            color:#3c7cf5;
+            i {
+              position: relative;
+              top: 2px;
+              right: 5px;
+              color: #e41515;
+            }
+          }
+          ul {
+            line-height: normal;
+            position: absolute;
+            top: 19px;
+            left: 79px;
+            background: #fff;
+            border: 1px solid #b5b5b5;
+            z-index: 1;
+            max-height: 120px;
+            overflow-y: auto;
+            overflow-x: hidden;
+            border-radius: 3px;
+            width: 114px;
+            font-size: 12px;
+            li {
+              height: 24px;
+              line-height: 24px;
+              cursor: pointer;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              padding: 0 5px;
+              &:hover {
+                background: #ddd;
+              }
+            }
+          }
+          select {
+            width: 40px;
+            position: absolute;
+            height: 20px;
+            background: url('/images/applyPurchase/select.png')no-repeat right;
+            background-position-x: 23px;
+            padding: 0 0 0 7px;
+            border-radius: 0;
+            & + input {
+              padding-left: 45px;
+            }
+          }
+          .el-input {
+            width: 230px;
+          }
+          input {
+            font-size: 14px;
+            width: 230px;
+            height: 20px;
+            line-height: 20px;
+            border-radius: 2px;
+            padding: 0 3px;
+            box-shadow: none;
+            -webkit-box-shadow: none;
+            -moz-box-shadow: none;
+            &.error {
+              border-color: #f4645f!important;
+            }
+          }
+        }
+      }
+    }
+  }
+  .crumbs{
+    background: #fff;
+    .menu-com{
+      margin: 0;
+      .menu-title{
+        line-height: 40px;
+        font-size: 14px;
+        padding-left: 0;
+        margin:0;
+        a{
+          color: #5078cb;
+          font-size: 14px;
+        }
+      }
+    }
+  }
   .top{
     margin-bottom:20px;
     .img{
@@ -168,6 +396,7 @@
         line-height: 30px;
         height:30px;
         padding:0 10px;
+        border-radius:5px;
       }
       ul{
         padding-top:35px;

components/supplier/dialog.vue

@@ -1,52 +0,0 @@
-<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,7 +1,5 @@
 import MerchantView from './merchant'
 import Resource from './resource'
-import Crumbs from './crumbs'
 import DetailsView from './details'
-import Dialog from './dialog'
 
-export { MerchantView, Resource, Crumbs, DetailsView, Dialog }
+export { MerchantView, Resource, DetailsView }

components/supplier/merchant.vue

@@ -11,32 +11,29 @@
           <input type="search" class="form-control" title="code" placeholder="名称/地址/行业/型号/品牌"
                  v-model="searchCode" @search="goodsSearch(searchCode)"/>
           <span class="input-group-btn">
-            <button type="button" class="btn" id="search_btn" @click="goodsSearch(searchCode)">&nbsp;查 询</button>
+            <button type="button" class="btn" @click="goodsSearch(searchCode)">&nbsp;查 询</button>
           </span>
         </div>
       </div>
     </div>
     <div class="list_info">
       <ul class="list-inline">
-        <li>
-          <div class="has_shop">已开店</div>
-          <div class="enterprise_name">
-            深圳英优软科技有限公司
-          </div>
-          <div class="select_btn">
-            添加为<br/>供应商
-          </div>
+        <li v-for="item in list.content">
+          <div class="has_shop" v-if="item.isStore === 1">已开店</div>
+          <div class="enterprise_name" v-text="item.enName">深圳英优软科技有限公司</div>
+          <div class="select_btn">添加为<br/>供应商</div>
+          <div class="select_btn" v-if="false">查看<br/>更多</div>
           <div class="popups">
-            <p>企业执照号：</p><p>hjfhqei</p>
-            <p>地址：</p><p></p>
-            <p>邮箱：</p><p>hjfhqei</p>
-            <p>电话：</p><p></p>
-            <p>行业：</p><p>hjfhq4333333333333333333333333333333333333333ei</p>
+            <p>企业执照号：</p><p v-text="item.enBusinesscode ? item.enBusinesscode : '-'">hjfhqei</p>
+            <p>地址：</p><p v-text="item.enAddress ? item.enAddress : '-'"></p>
+            <p>邮箱：</p><p v-text="item.enEmail ? item.enEmail : '-'">h</p>
+            <p>电话：</p><p v-text="item.enTel ? item.enTel : '-'">1</p>
+            <p>行业：</p><p v-text="item.enProfession ? item.enProfession : '-'">1</p>
           </div>
         </li>
       </ul>
       <div style="float: right;">
-        <page :total="pageParams.total" :page-size="pageParams.count"
+        <page :total="list.totalElements" :page-size="pageParams.count"
               :current="pageParams.page" v-on:childEvent="handleCurrentChange">
         </page>
       </div>
@@ -54,20 +51,26 @@
         searchCode: '',
         pageParams: {
           count: 20,
-          page: 1,
-          total: 100
+          page: 1
         }
       }
     },
     components: {
       Page
     },
+    computed: {
+      list () {
+        return this.$store.state.supplier.merchant.merchant.data
+      }
+    },
     methods: {
       goodsSearch (type) {
-        console.log('1', type)
+        if (type) {
+          this.$store.dispatch('supplier/loadVendorList', {page: this.pageParams.page, size: this.pageParams.count, keyword: type})
+        }
       },
-      handleCurrentChange () {
-        console.log('22')
+      handleCurrentChange (type) {
+        this.$store.dispatch('supplier/loadVendorList', {page: type, size: this.pageParams.count})
       }
     }
   }

components/supplier/resource.vue

@@ -1,6 +1,17 @@
 <template>
 <div class="resource_info">
   <div class="container">
+    <div class="crumbs">
+      <div class="container">
+        <div class="menu-com row">
+          <div class="menu-title col-md-12">
+            <a href="/">首页 ></a>
+            <a href="/supplier">供应商资源 ></a>
+            <span>供应商物料</span>
+          </div>
+        </div>
+      </div>
+    </div>
     <div class="user_info">
       <div class="user_title">
         <div class="user_name">
@@ -108,6 +119,12 @@
     components: {
       Page
     },
+    computed: {
+      list () {
+        console.log(this.$store.state.supplier.material.material.data)
+        return this.$store.state.supplier.material.material.data
+      }
+    },
     methods: {
       handleCurrentChange (type) {
         console.log(type)
@@ -122,6 +139,22 @@
 <style scoped type="text/scss" lang="scss">
 .resource_info{
   background: #ecf1f1;
+  .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;
+        }
+      }
+    }
+  }
   .user_info{
     .user_title{
       display:inline-block;

nuxt.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const isProdMode = Object.is(process.env.NODE_ENV, 'production')
-const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://192.168.253.60:9090/platform-b2c/' : 'http://10.1.51.124:8080/platform-b2c/')
+const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://192.168.253.60:9090/platform-b2c/' : 'http://10.1.51.82:8080/platform-b2c/')
 const commonUrl = process.env.COMMON_URL || (isProdMode ? 'https://api-inquiry.usoftmall.com/' : 'http://218.17.158.219:24000/')
 
 module.exports = {

pages/supplier/_id.vue

@@ -1,24 +1,21 @@
 <template>
   <div class="supplier">
-    <crumbs :crumbs_info="crumbsData"/>
     <details-view/>
   </div>
 </template>
 
 <script>
-  import { DetailsView, Crumbs } from '~components/supplier'
+  import { DetailsView } from '~components/supplier'
   export default {
     name: 'SupplierDetails',
     layout: 'main',
-    components: {
-      DetailsView,
-      Crumbs
+    fetch ({store, route}) {
+      return Promise.all([
+        store.dispatch('supplier/loadMaterialDetail', {id: route.params.id})
+      ])
     },
-    data () {
-      return {
-        test: true,
-        crumbsData: `<a href="/">首页 ></a><a href="/supplier">供应商资源 ></a><span>供应商物料</span>`
-      }
+    components: {
+      DetailsView
     }
   }
 </script>

pages/supplier/index.vue

@@ -13,6 +13,11 @@
   export default {
     name: 'SupplierView',
     layout: 'main',
+    fetch ({store}) {
+      return Promise.all([
+        store.dispatch('supplier/loadVendorList', {page: 1, size: 20})
+      ])
+    },
     components: {
       KindCategory,
       Carousel,

pages/supplier/material.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="supplier">
+    <resource/>
+  </div>
+</template>
+
+<script>
+  import { Resource } from '~components/supplier'
+  export default {
+    name: 'SupplierResource',
+    layout: 'main',
+    fetch ({store, route}) {
+      return Promise.all([
+        store.dispatch('supplier/loadMaterialList', {page: 1, size: 20, vendUU: route.query.uuid})
+      ])
+    },
+    components: {
+      Resource
+    }
+  }
+</script>

pages/supplier/uuidss.vue

@@ -1,23 +0,0 @@
-<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>

store/supplier.js

@@ -0,0 +1,34 @@
+import axios from '~/plugins/axios'
+
+export const actions = {
+  // 获取供应商展示列表
+  loadVendorList ({commit}, params) {
+    commit('merchant/REQUEST_MERCHANT')
+    return axios.get('/vendor/introduction/vendor/list', {params})
+      .then(res => {
+        commit('merchant/GET_MERCHANT_SUCCESS', res.data)
+      }, (err) => {
+        commit('merchant/GET_MERCHANT_FAILURE', err)
+      })
+  },
+  // 获取供应商物料列表
+  loadMaterialList ({commit}, params = {}) {
+    commit('material/REQUEST_MATERIAL')
+    return axios.get('/vendor/introduction/product/list', {params})
+      .then(res => {
+        commit('material/GET_MATERIAL_SUCCESS', res.data)
+      }, (err) => {
+        commit('material/GET_MATERIAL_FAILURE', err)
+      })
+  },
+  // 获取获取物料详细信息
+  loadMaterialDetail ({commit}, params = {}) {
+    commit('detail/REQUEST_DETAIL')
+    return axios.get('/vendor/introduction/product/detail', {params})
+      .then(res => {
+        commit('detail/GET_DETAIL_SUCCESS', res.data)
+      }, (err) => {
+        commit('detail/GET_DETAIL_FAILURE', err)
+      })
+  }
+}

store/supplier/detail.js

@@ -0,0 +1,19 @@
+export const state = () => ({
+  detail: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_DETAIL (state) {
+    state.detail.detching = true
+  },
+  GET_DETAIL_SUCCESS (state, result) {
+    state.detail.fetching = false
+    state.detail.data = result
+  },
+  GET_DETAIL_FAILURE (state) {
+    state.detail.fetching = false
+  }
+}

store/supplier/material.js

@@ -0,0 +1,19 @@
+export const state = () => ({
+  material: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_MATERIAL (state) {
+    state.detching = true
+  },
+  GET_MATERIAL_SUCCESS (state, result) {
+    state.material.fetching = false
+    state.material.data = result
+  },
+  GET_MATERIAL_FAILURE (state) {
+    state.material.fetching = false
+  }
+}

store/supplier/merchant.js

@@ -0,0 +1,19 @@
+export const state = () => ({
+  merchant: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_MERCHANT (state) {
+    state.merchant.detching = true
+  },
+  GET_MERCHANT_SUCCESS (state, result) {
+    state.merchant.fetching = false
+    state.merchant.data = result
+  },
+  GET_MERCHANT_FAILURE (state) {
+    state.merchant.fetching = false
+  }
+}

utils/baseUtils.js

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