Merge remote-tracking branch 'origin/feature/yc-mobile-1020' into feature/wangcz-mobile-1020

# Conflicts:
#	components/mobile/MobileHeader.vue

app.html

@@ -6,6 +6,7 @@
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/element-ui/1.3.7/theme-default/index.css"/>
   <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_0d1jjt5tukcblnmi.css"/>
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css"/>
+  <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_452262_zbrx1cqxr8pycik9.css">
   {{ HEAD }}
   <script>
     (function (w, d) {

components/mobile/brand/BrandDetail.vue

@@ -32,10 +32,23 @@
       </div>
     </div>
     <div class="brand-product-list" v-if="activeType=='product'">
-      <ul>
+      <div class="search-box">
+        <div class="kind-selecter">
+          <span @click="showKindList = !showKindList" v-text="selectedKind"></span>
+          <ul v-show="showKindList">
+            <li @click="selectKind({nameCn: '全部分类', id: ''})">全部分类</li>
+            <li v-for="kind in kindList" v-text="kind.nameCn" @click="selectKind(kind)"></li>
+          </ul>
+        </div>
+        <div class="kind-search">
+          <input type="text" v-model="keyword" placeholder="请输入型号">
+          <i @click="goodsSearch()"><img src="/images/mobile/@2x/productDetail/search@2x.png" alt=""></i>
+        </div>
+      </div>
+      <ul class="product-list">
         <li v-for="product in productList.content">
           <nuxt-link class="text-left" :to="'/mobile/brand/componentDetail/' + product.uuid">{{product.code}}</nuxt-link>
-          <a class="text-right">规格书</a>
+          <a class="text-right">规格书 <img src="/images/mobile/@2x/productDetail/view@2x.png" alt=""></a>
         </li>
       </ul>
     </div>
@@ -47,7 +60,17 @@
     data () {
       return {
         applications: [],
-        activeType: 'product'
+        activeType: 'product',
+        keyword: '',
+        showKindList: false,
+        parentid: 0,
+        ids: null,
+        pageParams: {
+          page: 1,
+          count: 10,
+          filter: {}
+        },
+        selectedKind: '全部分类'
       }
     },
     computed: {
@@ -60,6 +83,115 @@
       },
       productList () {
         return this.$store.state.brandComponent.component.data || []
+      },
+      kindList () {
+        let brands = this.$store.state.brandCategories.categories.data
+        if (!brands || brands.length === 0) {
+          return []
+        }
+        // 初始化去除重复数据
+        for (let i = 0; i < brands.length; i++) {
+          for (let j = 0; j < brands[i].length; j++) {
+            brands[i][j].children = []
+          }
+        }
+
+        // 处理第1层
+        if ((brands[0] && brands[0].length > 0) && (brands[1] && brands[1].length > 0)) {
+          for (let i = 0; i < brands[1].length; i++) {
+            for (let j = 0; j < brands[0].length; j++) {
+              if (brands[0][j].id === brands[1][i].parentid) {
+                if (!brands[0][j].children) {
+                  brands[0][j].children = []
+                }
+                brands[0][j].children.push(brands[1][i])
+                break
+              }
+            }
+          }
+        }
+
+        // 处理第2层
+        if ((brands[1] && brands[1].length > 0) && (brands[2] && brands[2].length > 0)) {
+          for (let i = 0; i < brands[2].length; i++) {
+            for (let j = 0; j < brands[1].length; j++) {
+              if (brands[1][j].id === brands[2][i].parentid) {
+                if (!brands[1][j].children) {
+                  brands[1][j].children = []
+                }
+                brands[1][j].children.push(brands[2][i])
+                break
+              }
+            }
+          }
+        }
+
+        // 处理第3层
+        if ((brands[2] && brands[2].length > 0) && (brands[3] && brands[3].length > 0)) {
+          for (let i = 0; i < brands[3].length; i++) {
+            for (let j = 0; j < brands[2].length; j++) {
+              if (brands[2][j].id === brands[3][i].parentid) {
+                if (!brands[2][j].children) {
+                  brands[2][j].children = []
+                }
+                brands[2][j].children.push(brands[3][i])
+                break
+              }
+            }
+          }
+        }
+        let kindList = []
+        if (brands[0]) {
+          for (let i = 0; i < brands[0].length; i++) {
+            this.getKinds(brands[0][i], kindList)
+          }
+        }
+        return kindList
+      }
+    },
+    methods: {
+      getKinds: function (list, kindList) {
+        if (list.children && list.children.length > 0) {
+          for (let i = 0; i < list.children.length; i++) {
+            this.getKinds(list.children[i], kindList)
+          }
+        } else {
+          kindList.push(list)
+        }
+      },
+      selectKind: function (data) {
+        this.showKindList = false
+        this.selectedKind = data.nameCn
+        if (this.parentid === data.id) {
+          this.parentid = 0
+          this.ids = null
+        } else {
+          if (data.level === 1) {
+            this.parentid = data.id
+          }
+        }
+        this.pageParams.page = 1
+        this.pageParams.filter.brandid = this.brandDetail.id
+        if (data.id !== '') {
+          this.pageParams.filter.kindid = data.id
+        } else {
+          delete this.pageParams.filter.kindid
+        }
+        this.pageCommodity(this.pageParams, this.ids)
+      },
+      goodsSearch () {
+        this.pageParams.page = 1
+        this.pageParams.filter.brandid = this.brandDetail.id
+        this.pageParams.filter.code = this.keyword
+        this.pageCommodity(this.pageParams)
+      },
+      async pageCommodity (params) {
+        try {
+          let { data } = await this.$http.get('/api/product/component/list', { params })
+          this.$store.commit('brandComponent/GET_COMPONENT_SUCCESS', data)
+        } catch (err) {
+          this.$store.commit('brandComponent/GET_COMPONENT_FAILURE', err)
+        }
       }
     }
   }
@@ -203,12 +335,12 @@
       }
     }
     .brand-product-list {
-      margin-top: .28rem;
+      margin-top: .5rem;
       font-size: .28rem;
-      ul {
+      ul.product-list {
         text-align: center;
         li {
-          display: inline-block;
+          margin-left: .42rem;
           width: 6.66rem;
           height: .66rem;
           line-height: .66rem;
@@ -226,6 +358,70 @@
           .text-right {
             float: right;
             color: #333;
+            img {
+              margin-left: .54rem;
+            }
+          }
+        }
+      }
+      .search-box {
+        margin-bottom: .28rem;
+        .kind-selecter {
+          display: inline-block;
+          position: relative;
+          float: left;
+          margin-left: .72rem;
+          span {
+            width: 1.64rem;
+            height: .6rem;
+            line-height: .6rem;
+            border: .01rem solid rgb(195,195,195);
+            border-radius: .05rem;
+            font-size: .28rem;
+            display: inline-block;
+            background: url('/images/mobile/@2x/productDetail/kind-narrow-down@2x.png')no-repeat;
+            padding-right: .15rem;
+            background-position: 1.35rem .2rem;
+            overflow: hidden;
+          }
+        }
+        .kind-search {
+          display: inline-block;
+          margin-right: .19rem;
+          input[type = "text"] {
+            width: 3.63rem;
+            height: .6rem;
+            padding-left: .21rem;
+            font-size: .24rem;
+            margin-top: .01rem;
+          }
+          i {
+            background: rgb(65,142,247);
+            padding: .125rem .21rem;
+            float: right;
+            position: relative;
+            left: -.01rem;
+          }
+        }
+        ul {
+          position: absolute;
+          top: 0.65rem;
+          max-height: 3.15rem;
+          overflow-y: auto;
+          &::-webkit-scrollbar
+          {
+            display: none;
+          }
+          li {
+            width: 1.64rem;
+            height: .63rem;
+            line-height: .63rem;
+            padding: 0 .08rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            background: rgba(0, 0, 0, 0.6);
+            color: #fff;
           }
         }
       }

components/mobile/brand/ComponentDetail.vue

@@ -5,18 +5,318 @@
         <span>类目：</span>
         <span>{{component.kind.nameCn}}</span>
       </div>
+      <div class="base-detail-item">
+        <span>品牌：</span>
+        <span>{{component.brand.nameCn}}</span>
+      </div>
+      <div class="base-detail-item">
+        <span>规格书：</span>
+        <img src="/images/mobile/@2x/productDetail/view@2x.png" alt="">
+      </div>
+      <div class="base-detail-item">
+        <span class="description">产品描述：{{component.description}}</span>
+      </div>
+    </div>
+    <div class="product-switch-item">
+      <span :class="activeType=='param'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='param'">参数</span>
+      <span :class="activeType=='store'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='store'">商家</span>
+    </div>
+    <div class="product-params" v-if="activeType == 'param'">
+      <div class="param-item" v-for="prop in component.properties">
+        <span class="prop-name">{{prop.property.labelCn}}</span>
+        <span class="prop-value">{{prop.value}}</span>
+      </div>
+    </div>
+    <div class="product-store" v-if="activeType == 'store'">
+      <table>
+        <thead>
+          <tr>
+            <td>商家</td>
+            <td>包装</td>
+            <td>数量</td>
+            <td>单价</td>
+            <td>交期(天)</td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="store in storeList.content">
+            <td>{{store.storeName || '-'}}</td>
+            <td>
+              <div v-if="!store.packaging && !store.breakUp && !store.produceDate">-</div>
+              <div>{{store.packaging}}</div>
+              <div>{{store.breakUp?'可拆卖':'不可拆卖'}}</div>
+              <div>{{store.produceDate}}</div>
+            </td>
+            <td>
+              <div v-if="!store.prices || store.prices.length == 0">-</div>
+              <div v-for="price in store.prices">{{price.start}}+</div>
+            </td>
+            <td>
+              <div v-if="!store.prices || store.prices.length == 0">
+                <span>—</span>
+              </div>
+              <div v-for="price in store.prices">
+                <span v-if="store.currencyName.indexOf('RMB')!==-1">￥{{price.rMBPrice | currency}}</span>
+                <span v-if="store.currencyName.indexOf('USD')!==-1">${{price.uSDPrice | currency}}</span>
+              </div>
+            </td>
+            <td>
+              <div v-if="store.b2cMinDelivery">
+                <span>交期：</span>
+                <span>{{store.b2cMinDelivery}}</span>
+                <span v-if="store.b2cMaxDelivery && store.b2cMaxDelivery !== store.b2cMinDelivery">-</span>
+                <span v-if="store.b2cMaxDelivery && store.b2cMaxDelivery !== store.b2cMinDelivery">{{store.b2cMaxDelivery}}</span>
+              </div>
+              <div v-if="store.minBuyQty">{{store.minBuyQty}}起订</div>
+              <div v-if="!store.b2cMinDelivery">
+                <span>—</span>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
   </div>
 </template>
 <script>
   export default {
+    data () {
+      return {
+        activeType: 'store',
+        storeIds: [],
+        UmallExist: false,
+        storeExist: false,
+        params: {
+          count: 10,
+          page: 1,
+          sorting: {'minPriceRMB': 'ASC'},
+          filter: {
+            uuid: this.$route.params.uuid,
+            ignoreUMall: false,
+            ignoreStore: false,
+            storeIds: ''
+          }
+        }
+      }
+    },
     computed: {
       component () {
         return this.$store.state.componentDetail.detail.data
+      },
+//      stores () {
+//        console.log(this.$store.state.componentStore.store.data)
+//        return this.$store.state.componentStore.store.data
+//      },
+      storeList () {
+        let storeList = this.$store.state.componentInformation.information.data
+        let _self = this
+        if (storeList.content) {
+          storeList.content.forEach(function (item) {
+            _self.storeIds.push(item.storeid)
+          })
+        }
+        if (this.storeIds.length > 0) {
+          if (this.storeIds.indexOf(this.storeId) === -1) {
+            this.storeExist = true
+          } else {
+            this.storeIds.splice(this.storeIds.indexOf(this.storeId), 1)
+            if (this.storeIds.length > 0) {
+              this.storeExist = true
+            }
+            this.UmallExist = true
+          }
+        }
+        return storeList
+      }
+    },
+    filters: {
+      currency: function (num) {
+        if (typeof num === 'number') {
+          if (num <= 0.000001) {
+            num = 0.000001
+          } else {
+            if (num.toString().indexOf('.') === -1) {
+              num += '.00'
+            } else {
+              let inputStr = num.toString()
+              let arr = inputStr.split('.')
+              let floatNum = arr[1]
+              if (floatNum.length > 6) {
+                num = inputStr.substring(0, arr[0].length + 7)
+                if (Number(floatNum.charAt(6)) > 4) {
+                  num = (Number(num) * 1000000 + 1) / 1000000
+                }
+              } else if (floatNum.length === 1) {
+                num = num + '0'
+              }
+            }
+          }
+        }
+        return num
       }
     }
   }
 </script>
-<style>
+<style lang="scss" scoped>
+  .component-detail {
+    font-size: .28rem;
+    .base-detail {
+      margin: .34rem .66rem .34rem .40rem;
+      .base-detail-item {
+        margin-bottom: .3rem;
+        &:last-child {
+          margin-bottom: 0;
+        }
+        .description {
+          line-height: .4rem;
+          max-height: 1.2rem;
+          word-break: break-all;
+          overflow : hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+    .product-switch-item {
+      text-align: center;
+      .mobile-switch-btn {
+        background: #e75610;
+        color: #fff;
+        display: inline-block;
+        height: .68rem;
+        font-size: .28rem;
+        padding: .19rem .53rem;
+        position: relative;
+        &:first-child {
+          background: #fff;
+          color: #e75610;
+          border: .01rem solid #e75610;
+          border-left: none;
+          padding-left: .30rem;
+        }
+        &:first-child.active {
+          background: #e75610;
+          color: #fff;
+          border: .01rem solid #e75610;
+          padding-left: .30rem;
+        }
+        &:last-child {
+          background: #fff;
+          color: #e75610;
+          border: .01rem solid #e75610;
+          border-right: none;
+          padding-right: .35rem;
+        }
+        &:last-child.active {
+          background: #e75610;
+          color: #fff;
+          border: .01rem solid #e75610;
+          border-right: none;
+          padding-right: .35rem;
+        }
+        &:first-child:before {
+          content: '';
+          background: #fff;
+          border: .01rem solid #e75610;
+          width: .64rem;
+          height: .68rem;
+          border-radius: 100%;
+          position: absolute;
+          left: -.33rem;
+          top: -.01rem;
+          z-index: -5;
+        }
+        &:first-child.active:before {
+          content: '';
+          background: #e75610;
+          border: .01rem solid #e75610;
+          width: .64rem;
+          height: .68rem;
+          border-radius: 100%;
+          position: absolute;
+          left: -.33rem;
+          top: -.01rem;
+        }
+        &:last-child:before {
+          content: '';
+          background: #fff;
+          width: .64rem;
+          height: .68rem;
+          border-radius: 100%;
+          position: absolute;
+          border: .01rem solid #e75610;
+          left: 1.04rem;
+          z-index: -5;
+          top: -.01rem;
+        }
+        &:last-child.active:before {
+          content: '';
+          background: #e75610;
+          width: .64rem;
+          height: .68rem;
+          border-radius: 100%;
+          position: absolute;
+          border: .01rem solid #e75610;
+          left: 1.04rem;
+          z-index: -5;
+          top: -.01rem;
+        }
+      }
+    }
+    .product-params {
+      line-height: .28rem;
+      .param-item {
+        margin-top: .38rem;
+        .prop-name {
+          width: 3.72rem;
+          display: inline-block;
+        }
+        .prop-value {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          display: inline-block;
+          width: 2.69rem;
+          float: right;
+        }
+      }
+    }
+    .product-store {
+      margin: .38rem .2rem;
+      table {
+        width: 100%;
+        font-size: .28rem;
+        thead {
+          tr {
+            td {
+              padding-bottom: .2rem;
+              font-weight: bold;
+              text-align: center;
+            }
+          }
+        }
+        tbody {
+          tr {
+            border-top: .01rem solid rgb(174,175,176);
+            td {
+              padding-top: .2rem;
+              div {
+                padding-left: .4rem;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                margin-bottom: .2rem;
+                &:last-child {
+                  margin-bottom: 0;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 
 </style>

pages/mobile/brand/componentDetail/_uuid.vue

@@ -10,7 +10,19 @@
     },
     fetch ({ store, params }) {
       return Promise.all([
-        store.dispatch('loadComponentDetail', {id: params.uuid})
+        store.dispatch('loadComponentDetail', {id: params.uuid}),
+//        store.dispatch('loadComponentStore', {uuid: params.uuid}),
+        store.dispatch('loadComponentInformation',
+          {
+            count: 10,
+            page: 1,
+            sorting: {'minPriceRMB': 'ASC'},
+            filter: {
+              uuid: params.uuid,
+              ignoreUMall: false,
+              ignoreStore: false,
+              storeIds: ''
+            }})
       ])
     }
   }