|
@@ -1,4 +1,4 @@
|
|
|
-import { Popup, Col, Row, Icon, Tag, Sticky } from 'vant'
|
|
|
+import { Popup, Col, Row, Icon, Tag, Sticky, Tabs, Tab } from 'vant'
|
|
|
import { defineComponent } from 'vue'
|
|
|
import TabList from '../components/tab-list'
|
|
|
import styles from './index.module.less'
|
|
@@ -71,7 +71,6 @@ export default defineComponent({
|
|
|
productAttributeCategory: undefined,
|
|
|
brand: undefined
|
|
|
})
|
|
|
-
|
|
|
}
|
|
|
} catch (err) {}
|
|
|
}
|
|
@@ -105,10 +104,10 @@ export default defineComponent({
|
|
|
})
|
|
|
},
|
|
|
|
|
|
- onToggleTag(i: number) {
|
|
|
+ onToggleTag() {
|
|
|
let tabList = this.$refs.tabList as any
|
|
|
if (tabList.loading) return
|
|
|
- this.productCategory.active = i
|
|
|
+ // this.productCategory.active = i
|
|
|
this.$nextTick(() => {
|
|
|
this.onSearch()
|
|
|
})
|
|
@@ -198,25 +197,31 @@ export default defineComponent({
|
|
|
<Icon name={iconFilter} size={18} />
|
|
|
</Col>
|
|
|
</Row>
|
|
|
+
|
|
|
{this.productCategory.id ? (
|
|
|
- <Row class={styles['filter-productCategory']}>
|
|
|
- {/* <Col span={6}>{this.productCategory.name}</Col> */}
|
|
|
+ <Tabs class={styles['filter-productCategory']} shrink ellipsis={false} v-model:active={this.productCategory.active} onChange={() => this.onToggleTag()}>
|
|
|
{this.productCategory &&
|
|
|
this.productCategory.children.map((n: any, i: number) => (
|
|
|
- <Col onClick={() => this.onToggleTag(i)}>
|
|
|
- <div
|
|
|
- class={[
|
|
|
- styles['filter-tag'],
|
|
|
- this.productCategory.active === i
|
|
|
- ? styles['filter-tag-checked']
|
|
|
- : ''
|
|
|
- ]}
|
|
|
- >
|
|
|
- {n.name}
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
+ <Tab
|
|
|
+ name={i}
|
|
|
+ title={n.name}
|
|
|
+ v-slots={{
|
|
|
+ title: () => (
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ styles['filter-tag'],
|
|
|
+ this.productCategory.active === i
|
|
|
+ ? styles['filter-tag-checked']
|
|
|
+ : ''
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ {n.name}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ ></Tab>
|
|
|
))}
|
|
|
- </Row>
|
|
|
+ </Tabs>
|
|
|
) : null}
|
|
|
</Sticky>
|
|
|
|