|
|
@@ -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;
|
|
|
}
|
|
|
}
|
|
|
}
|
yangc
