Browse Source

pcb购买

yangc 7 years ago
parent
commit
b0d768752a

+ 7 - 1
components/main/Header.vue

@@ -12,7 +12,7 @@
       </div>
       <!--搜索-->
       <div class="header-search pull-left">
-        <search-box></search-box>
+        <search-box :isPcb="isPcb"></search-box>
       </div>
       <!--统计-->
      <!-- <div class="header-count pull-right">
@@ -30,6 +30,12 @@
     components: {
       SearchBox,
       CountBox
+    },
+    props: {
+      isPcb: {
+        type: Boolean,
+        default: false
+      }
     }
   }
 </script>

+ 4 - 1
components/main/Nav.vue

@@ -39,6 +39,9 @@
       <nuxt-link to="/product/brand/brandList/A" class="item">
         <span>品牌墙</span>
       </nuxt-link>
+      <nuxt-link to="/pcb" class="item">
+        <span>pcb专区</span>
+      </nuxt-link>
       <nuxt-link to="/news" class="item">
         <span>优软快讯</span>
       </nuxt-link>
@@ -94,7 +97,7 @@
       display: inline-block;
       height: $nav-height;
       line-height: $nav-height;
-      width: 126px;
+      width: 122px;
       text-align: center;
       margin: 0;
       vertical-align: middle;

+ 47 - 20
components/main/Search.vue

@@ -1,23 +1,39 @@
 <template>
   <div class="search-box" :class="{'search-box2': !SelectItem}">
     <div class="input-group">
-      <select v-model="searchType" class="form-control select-type select-adder" v-if="SelectItem">
-        <option value="product">产品</option>
-        <option value="store">店铺</option>
-      </select>
-      <input v-model="keyword" type="text" class="search-input form-control input-primary"
-             :placeholder="searchType === 'product' ? '品牌/类目/型号' : '店铺名称'"
-             @focus.stop.prevent="onFocus()"
-             @blur.stop.prevent="onBlur()"
-             @keyup.40="onSelectChange(1)"
-             @keyup.38="onSelectChange(-1)"
-             @keyup.13="onSearch()"/>
-      <span class="input-group-btn" @click="onSearch()" style="z-index: 10">
-        <button class="btn btn-primary search-btn" type="button" :class="{'Isblue':!SelectItem}">搜&nbsp;索</button>
-      </span>
+      <template v-if="!isPcb">
+        <select v-model="searchType" class="form-control select-type select-adder" v-if="SelectItem">
+          <option value="product">产品</option>
+          <option value="store">店铺</option>
+        </select>
+        <input v-model="keyword" type="text" class="search-input form-control input-primary"
+               :placeholder="searchType === 'product' ? '品牌/类目/型号' : '店铺名称'"
+               @focus.stop.prevent="onFocus()"
+               @blur.stop.prevent="onBlur()"
+               @keyup.40="onSelectChange(1)"
+               @keyup.38="onSelectChange(-1)"
+               @keyup.13="onSearch()"/>
+        <span class="input-group-btn" @click="onSearch()" style="z-index: 10">
+          <button class="btn btn-primary search-btn" type="button" :class="{'Isblue':!SelectItem}">搜&nbsp;索</button>
+        </span>
+      </template>
+      <template v-if="isPcb">
+        <input v-model="keyword" type="text" class="search-input form-control input-primary"
+               :placeholder="'请输入pcb型号'"
+               @focus.stop.prevent="onFocus()"
+               @blur.stop.prevent="onBlur()"
+               style="width: 441px;"
+               @keyup.13="onSearch()"/>
+        <span class="input-group-btn" @click="onSearch()" style="z-index: 10">
+          <button class="btn btn-primary search-btn" type="button" :class="{'Isblue':!SelectItem}">搜&nbsp;索</button>
+        </span>
+      </template>
     </div>
-    <ul class="association" :class="{'association2': !SelectItem}" v-show="showAssociate && searchType == 'product'"
-        @mouseenter="associate.focus=true" @mouseleave="associate.focus=false">
+    <ul class="association"
+        :class="{'association2': !SelectItem, 'pcb-asso': isPcb}"
+        v-show="showAssociate && searchType == 'product'"
+        @mouseenter="associate.focus=true"
+        @mouseleave="associate.focus=false">
       <li v-if="similarKeywords.data.component && similarKeywords.data.component.length > 0" class="similar-title">型号:</li>
       <li v-for="(k, index) in similarKeywords.data.component" class="item"
           :class="{'active': index==associate.activeIndex}"
@@ -57,6 +73,10 @@
       SelectItem: {
         type: Boolean,
         default: true
+      },
+      isPcb: {
+        type: Boolean,
+        default: false
       }
     },
     data () {
@@ -182,10 +202,14 @@
         if (this.keyword) {
           this.associate.show = false
           this.$store.dispatch('resetSearchKeywords')
-          if (this.searchType === 'product') {
-            this.$router.push({path: '/search?w=' + encodeURIComponent(this.keyword)})
-          } else if (this.searchType === 'store') {
-            this.$router.push({path: '/searchStore?w=' + encodeURIComponent(this.keyword)})
+          if (this.isPcb) {
+            this.$router.push({path: '/pcb/search?w=' + encodeURIComponent(this.keyword)})
+          } else {
+            if (this.searchType === 'product') {
+              this.$router.push({path: '/search?w=' + encodeURIComponent(this.keyword)})
+            } else if (this.searchType === 'store') {
+              this.$router.push({path: '/searchStore?w=' + encodeURIComponent(this.keyword)})
+            }
           }
         }
       },
@@ -292,6 +316,9 @@
       border: $border;
       border-top-width: 0;
       z-index: 21;
+      &.pcb-asso {
+        left: 0;
+      }
 
       .item {
         padding: 0 15px;

+ 36 - 7
components/pcb/product/Detail.vue

@@ -41,10 +41,10 @@
         </div>
       </div>
       <div class="shop inline-block fr">
-        <div class="search-area">
+      <!--  <div class="search-area">
           <input type="search" class="form-control" placeholder="产品名称/品牌/类目">
           <span class="search-btn inline-block">搜索</span>
-        </div>
+        </div>-->
         <p class="shop-info-title">
           商家信息
         </p>
@@ -64,16 +64,26 @@
             <span class="inline-block">{{storeInfo.enterprise.enAddress}}</span>
           </div>
           <div class="link">
-            <span class="link-btn"><img src="/images/pcb/link.png" alt="">联系卖家</span>
+            <span class="link-btn" @click="goLink()"><img src="/images/pcb/link.png" alt="">联系卖家</span>
           </div>
         </div>
       </div>
     </div>
     <ul class="kind">
-      <li class="inline-block" v-for="prop in properties">
-        {{prop[1].labelCn}}:{{prop[0].value || '-'}}
+      <template v-if="properties && properties.length">
+        <li class="inline-block" v-for="prop in properties">
+          {{prop[1].labelCn}}:{{prop[0].value || '-'}}
+        </li>
+      </template>
+      <li class="empty-param" v-else>
+        <img src="/images/all/empty-cart.png" alt="">该产品暂无参数
       </li>
     </ul>
+    <link-saler-box
+      :tel="tel"
+      v-if="showLinkBox"
+      @cancelAction="showLinkBox = false">
+    </link-saler-box>
   </div>
 </template>
 <script>
@@ -116,6 +126,7 @@
     }
   }
   import { buyOrCar } from '~utils/baseUtils'
+  import LinkSalerBox from '~components/common/LinkSalerBox.vue'
   export default {
     data () {
       return {
@@ -124,9 +135,15 @@
           num: 0,
           price: 0,
           canAdd: true,
-          canSub: true}
+          canSub: true
+        },
+        showLinkBox: false,
+        tel: ''
       }
     },
+    components: {
+      LinkSalerBox
+    },
     computed: {
       properties () {
         return this.$store.state.pcb.product.detail.data
@@ -219,6 +236,9 @@
       },
       buy (flag) {
         buyOrCar(flag, null, this, this.commodity)
+      },
+      goLink: function () {
+        this.baseUtils.goLinkUser(this, this.storeInfo.enUU)
       }
     }
   }
@@ -447,7 +467,7 @@
           color: #ffa133;
           border: 1px solid #fee9d0;
           line-height: 35px;
-          margin: 8px 0 0 0;
+          margin: 30px 0 0 0;
           &::before {
             content: '';
             background: #fff;
@@ -511,6 +531,7 @@
               color: #fff;
               line-height: 26px;
               border-radius: 13px;
+              cursor: pointer;
               img {
                 margin-right: 7px;
               }
@@ -536,6 +557,14 @@
         a {
           color: #418cf6;
         }
+        &.empty-param {
+          width: 100%;
+          height: auto;
+          text-align: center;
+          padding: 20px 0;
+          color: #999;
+          font-size: 12px;
+        }
       }
     }
   }

+ 1 - 1
components/pcb/search/ResultTitle.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="result-title text-muted">
-    搜索"<span class="text-inverse" >{{keyword}}</span>"<span v-if="status != 1">暂无此产品</span>
+    搜索"<span class="text-inverse" >{{keyword}}</span>"<span v-if="status != 1">暂无此型号</span>
     <span v-if="status != 3">,为您找到
     <span class="text-num" v-text="good_list.total"></span> 个<span v-if="status == 2">相关</span>产品</span>:
   </div>

+ 156 - 0
layouts/pcb.vue

@@ -0,0 +1,156 @@
+<template>
+  <div id="main">
+    <header-view v-if="!isInFrame"></header-view>
+    <main-header :isPcb="true"></main-header>
+    <main-nav></main-nav>
+    <nuxt/>
+    <footer-view></footer-view>
+    <right-bar></right-bar>
+  </div>
+</template>
+<script>
+  import { Header, Footer, RightBar } from '~components/default'
+  import { MainHeader, MainNav } from '~components/main'
+  export default {
+    name: 'pcb',
+    components: {
+      HeaderView: Header,
+      FooterView: Footer,
+      RightBar,
+      MainHeader,
+      MainNav
+    },
+    head () {
+      return {
+        title: this.title || '【优软商城】IC电子元器件现货采购交易平台商城',
+        meta: [
+          {hid: 'description', name: 'description', content: this.description || '优软商城(usoftmall.com)是中国领先的IC电子元器件现货采购交易网上商城,提供上千万种电子元器件现货采购交易,采购电子元器件就上优软商城!'},
+          {hid: 'keywords', name: 'keywords', content: this.keywords || '优软商城'}
+        ]
+      }
+    },
+    computed: {
+      isMobile: function () {
+        return this.$store.state.option.isMobile
+      },
+      title () {
+        let path = this.$route.path
+        if (path === '/product/kind/home') {
+          return '电子元器件器件选型参数型号查询器件类别分类大全-优软商城'
+        } else if (path.startsWith('/product/kind/')) {
+          if (this.kinds[this.kinds.length - 1]) {
+            return this.kinds[this.kinds.length - 1].nameCn + '产品品牌型号大全-优软商城'
+          }
+          return ''
+        } else if (path.startsWith('/product/component/')) {
+          if (this.componentDetail) {
+            return this.componentDetail.brand.nameCn + this.componentDetail.code + '参数|供应商|数据手册中文资料|规格书-优软商城'
+          } else {
+            return ''
+          }
+        } else if (path.startsWith('/product/brand/brandList/')) {
+          return 'IC电子元器件品牌中心品牌大全-优软商城'
+        } else if (path.startsWith('/product/brand/')) {
+          if (this.brandDetail.nameEn) {
+            return this.brandDetail.nameEn + '(' + this.brandDetail.nameCn + ')产品分类及产品型号大全-优软商城'
+          }
+          return '【优软商城】IC电子元器件现货采购交易平台商城'
+        } else if (path === '/provider/factories') {
+          return 'IC电子元器件厂家原厂直销原厂专卖店大全-优软商城'
+        } else if (path === '/provider/home') {
+          return 'IC电子元器件代理商经销商专营店大全-优软商城'
+        } else if (path === '/news') {
+          return 'IC电子元器件行业市场资讯新闻-优软商城'
+        } else if (path.startsWith('/news/')) {
+          return this.newsDetail.title + '-电子元器件行业资讯-优软商城' || 'IC电子元器件行业市场资讯新闻-优软商城'
+        } else if (path === '/search') {
+          return this.$route.query.w + '-产品搜索-优软商城'
+        } else if (path === '/searchStore') {
+          return this.$route.query.w + '-店铺搜索-优软商城'
+        } else {
+          return '【优软商城】IC电子元器件现货采购交易平台商城'
+        }
+      },
+      description () {
+        let path = this.$route.path
+        if (path === '/product/kind/home') {
+          return '优软商城电子元器件器件型号查询器件类别分类大全,优软商城提供元器件智能选型服务,能让您完美的找到热门型号的替代型号产品,一键搜索功能让您快速找到您想要的型号。'
+        } else if (path.startsWith('/product/kind/')) {
+          if (this.kinds[this.kinds.length - 1]) {
+            return '优软商城' + this.kinds[this.kinds.length - 1].nameCn + '产品品牌型号大全,能让您快速的找到' + this.kinds[this.kinds.length - 1].nameCn + '产品品牌型号。'
+          }
+          return ''
+        } else if (path.startsWith('/product/component/')) {
+          if (this.componentDetail) {
+            return '优软商城提供' + this.componentDetail.brand.nameCn + this.componentDetail.code + '数据手册中文资料规格书下载,' + this.componentDetail.code + '供应商及参数报价。'
+          } else {
+            return ''
+          }
+        } else if (path.startsWith('/product/brand/brandList/')) {
+          return 'IC电子元器件品牌中心品牌大全,优软商城品牌中心汇聚国内国际电子元器件品牌,全力打造国家级元器件电商品台。'
+        } else if (path.startsWith('/product/brand/')) {
+          if (this.brandDetail.brief) {
+            return this.brandDetail.brief || '优软商城(usoftmall.com)是中国领先的IC电子元器件现货采购交易网上商城,提供上千万种电子元器件现货采购交易,采购电子元器件就上优软商城!'
+          }
+          return ''
+        } else if (path === '/provider/factories') {
+          return 'IC电子元器件厂家原厂直销原厂专卖店大全,优软商城原厂专区提供IC电子元器件厂家原厂直销原厂专卖店大全。'
+        } else if (path === '/provider/home') {
+          return 'IC电子元器件代理商经销商专营店大全,优软商城代理经销专区提供IC电子元器件代理商经销商专卖店大全。'
+        } else if (path === '/news') {
+          return '优软商城电子元器件采购网提供精准的电子快讯,电子资讯,电子元器件资讯。'
+        } else if (path.startsWith('/news/')) {
+          return this.newsDetail.summary
+        } else {
+          return '优软商城(usoftmall.com)是中国领先的IC电子元器件现货采购交易网上商城,提供上千万种电子元器件现货采购交易,采购电子元器件就上优软商城!'
+        }
+      },
+      keywords () {
+        let path = this.$route.path
+        if (path === '/product/kind/home') {
+          return '电子元器件分类,电子元器件参数,电子元器件型号,电子元器件类别'
+        } else if (path.startsWith('/product/kind/')) {
+          if (this.kinds[this.kinds.length - 1]) {
+            return this.kinds[this.kinds.length - 1].nameCn
+          }
+          return ''
+        } else if (path.startsWith('/product/component/')) {
+          if (this.componentDetail) {
+            return this.componentDetail.code + '供应商,' + this.componentDetail.code + '数据手册,' + this.componentDetail.code + '规格书'
+          } else {
+            return ''
+          }
+        } else if (path.startsWith('/product/brand/brandList/')) {
+          return 'ic,元器件,品牌'
+        } else if (path.startsWith('/product/brand/')) {
+          if (this.brandDetail.nameEn) {
+            return this.brandDetail.nameEn + '(' + this.brandDetail.nameCn
+          }
+          return '优软商城'
+        } else if (path === '/provider/factories') {
+          return '电子元器件原厂,电子元器件厂家'
+        } else if (path === '/provider/home') {
+          return 'ic代理商,ic经销商,电子元器件代理商 , 电子元器件经销商'
+        } else if (path === '/news') {
+          return '元器件新闻,电子资讯,电子元器件资讯'
+        } else if (path.startsWith('/news/')) {
+          return ''
+        } else {
+          return '优软商城'
+        }
+      },
+      kinds () {
+        return this.$store.state.product.kind.kindsParentWithBother.data
+      },
+      componentDetail () {
+        return this.$store.state.componentDetail.detail.data
+      },
+      brandDetail () {
+        return this.$store.state.brandDetail.detail.data
+      },
+      newsDetail () {
+        return this.$store.state.newsData.detailNews.detailNews.data
+      }
+    }
+  }
+</script>

+ 1 - 1
nuxt.config.js

@@ -1,7 +1,7 @@
 const path = require('path')
 const isProdMode = Object.is(process.env.NODE_ENV, 'production')
 // b2c后台
-const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://api.usoftmall.com/' : 'http://10.1.51.124:8080/platform-b2c')
+const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://api.usoftmall.com/' : 'http://10.1.51.79:8080/platform-b2c')
 // 公共询价
 const commonUrl = process.env.COMMON_URL || (isProdMode ? 'https://api-inquiry.usoftmall.com/' : 'http://218.17.158.219:24000/')
 // 公共物料

+ 17 - 0
pages/pcb/search/_keyword.vue

@@ -32,6 +32,15 @@
         store.dispatch('pcb/searchForList', {count: 15, filter: {}, keyword: route.query.w, page: 1, sorting: {}})
       ])
     },
+    watch: {
+      '$route.query.w': {
+        handler: function (val) {
+          this.key = val
+          this.reloadAll()
+        },
+        immediate: false
+      }
+    },
     components: {
       ResultTitle,
       Kind,
@@ -39,6 +48,14 @@
       DetailBrand
     },
     methods: {
+      reloadAll: function () {
+        this.filter = {}
+        this.sorting = {}
+        this.paramJSON = {}
+        this.reloadList()
+        this.reloadKind()
+        this.reloadBrand()
+      },
       reloadList: function () {
         if (this.sorting === {}) {
           this.sorting = {}

+ 5 - 2
plugins/mixin.js

@@ -4,7 +4,7 @@
 */
 import BScroll from 'better-scroll'
 import Vue from 'vue'
-import {deepCopy} from '~utils/baseUtils'
+import {deepCopy, goLinkUser} from '~utils/baseUtils'
 // import { mapState } from 'vuex'
 
 Vue.mixin({
@@ -51,7 +51,10 @@ Vue.mixin({
       }
     },
     baseUtils () {
-      return {deepCopy: deepCopy}
+      return {
+        deepCopy: deepCopy,
+        goLinkUser: goLinkUser
+      }
     }
   },
   methods: {

+ 96 - 0
utils/baseUtils.js

@@ -227,3 +227,99 @@ export function whichTransitionEvent() {
     }
   }
 }
+// 立即购买或加入购物车
+/*
+ *  isBuy: 是否是立即购买
+ *  event: 触发事件
+ *  $this: 当前对象
+ *  item: 操作对象
+ * */
+const buyNow = function (isBuy, event, $this, item) {
+  if (event) event.stopPropagation()
+  if (!$this.$store.state.option.user.logged) {
+    $this.$http.get('/login/page', {params: {returnUrl: window.location.href}}).then(response => {
+      if (response.data) {
+        window.location.href = response.data.content + '&baseUrl=' + encodeURIComponent(window.location.protocol + '//' + window.location.host + response.data.baseUrl)
+      }
+    })
+  } else {
+    if (item && !$this.disabledFlag) {
+      if (isBuy) {
+        $this.$http.post('/trade/order/buyNow', [{
+          uuid: item.uuid,
+          batchCode: item.batchCode,
+          number: item.minBuyQty,
+          storeid: item.storeid ? item.storeid : item.storeId,
+          storeUuid: item.storeid ? item.storeid : item.storeId,
+          currencyName: item.currencyName,
+          minPackQty: item.minPackQty
+        }])
+          .then(response => {
+            //        window.location.href = '/user#/order/pay/' + $this.enidfilter(response.data.orderid)
+            if (response.data.success) {
+              if (response.data.message) {
+                $this.$message({
+                  message: response.data.message,
+                  type: 'success'
+                })
+                window.setTimeout(function () {
+                  window.location.href = '/user#/order/pay/' + enidfilter(response.data.data.orderid)
+                }, 1000)
+              } else {
+                window.location.href = '/user#/order/pay/' + enidfilter(response.data.data.orderid)
+              }
+            } else {
+              if (response.data.data && response.data.data.unvailable === 1) {
+                $this.$message.error('产品信息已失效,请刷新页面')
+              } else {
+                $this.$message.error(response.data.message)
+              }
+            }
+          }, err => {
+            console.log(err)
+            if (item.minBuyQty > item.reserve) {
+              $this.$message.error('商品' + item.code + '的库存已经不满足起订量')
+            }
+          })
+      } else {
+        // $this.$store.dispatch('user/addCar', {uuid: item.uuid, batchCode: item.batchCode, number: item.minBuyQty})
+        $this.$http.post('/trade/cart/add', {
+          uuid: item.uuid,
+          batchCode: item.batchCode,
+          number: item.minBuyQty,
+          storeid: item.storeid ? item.storeid : item.storeId,
+          storeUuid: item.storeid ? item.storeid : item.storeId,
+          currencyName: item.currencyName,
+          minPackQty: item.minPackQty
+        })
+          .then(response => {
+            if (response.data.success) {
+              if (response.data.message) {
+                $this.$message({
+                  message: '添加购物车成功,但商品信息有更新',
+                  type: 'success'
+                })
+              } else {
+                $this.$message({
+                  message: '添加购物车成功',
+                  type: 'success'
+                })
+              }
+            } else {
+              // if (response.data.code === 2) {
+              //   $this.$message.error('库存已不满足起订量')
+              // } else
+              if (response.data.message === '该产品已失效') {
+                $this.$message.error(response.data.message + ',请刷新页面')
+              } else {
+                $this.$message.error(response.data.message)
+              }
+            }
+          })
+      }
+    }
+  }
+  // window.location.href = 'user#/order/pay/' + $this.enidfilter($this.buy_info.orderid)
+}
+
+export const buyOrCar = buyNow