|
|
@@ -0,0 +1,137 @@
|
|
|
+import request from '@/helpers/request'
|
|
|
+import {
|
|
|
+ Loading,
|
|
|
+ Tag,
|
|
|
+ Cell,
|
|
|
+ RadioGroup,
|
|
|
+ Radio,
|
|
|
+ Divider,
|
|
|
+ Row,
|
|
|
+ Col,
|
|
|
+ Button
|
|
|
+} from 'vant'
|
|
|
+import { defineComponent } from 'vue'
|
|
|
+import styles from './index.module.less'
|
|
|
+const init = () => {
|
|
|
+ return {
|
|
|
+ productCategorySmallVoList: 0,
|
|
|
+ productAttributeCategoryList: 0,
|
|
|
+ brandList: 0
|
|
|
+ }
|
|
|
+}
|
|
|
+export default defineComponent({
|
|
|
+ name: 'goods-filter-list',
|
|
|
+ props: {
|
|
|
+ onFilterClick: {
|
|
|
+ type: Function,
|
|
|
+ default: (item: any) => {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataShow: true, // 判断是否有数据
|
|
|
+ loading: false,
|
|
|
+ brandList: [],
|
|
|
+ productAttributeCategoryList: [],
|
|
|
+ productCategorySmallVoList: [],
|
|
|
+ params: init()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getFilterList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getFilterList() {
|
|
|
+ this.loading = true
|
|
|
+ try {
|
|
|
+ const res = await request.get(
|
|
|
+ '/api-mall-portal/product/search/condition'
|
|
|
+ )
|
|
|
+ this.dataShow = res.code === 200
|
|
|
+ const {
|
|
|
+ brandList = [],
|
|
|
+ productAttributeCategoryList = [],
|
|
|
+ productCategorySmallVoList = []
|
|
|
+ } = res.data || {}
|
|
|
+
|
|
|
+ this.brandList = brandList
|
|
|
+ this.productAttributeCategoryList = productAttributeCategoryList
|
|
|
+ this.productCategorySmallVoList = productCategorySmallVoList
|
|
|
+ } catch {
|
|
|
+ this.dataShow = false
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ {this.loading && (
|
|
|
+ <div class={styles.loading}>
|
|
|
+ <Loading color="var(--van-primary)" />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ <div class={styles.filterWrap}>
|
|
|
+ <div class={styles.titlePopup}>筛选</div>
|
|
|
+ {Object.keys(this.params).map((key: string) => (
|
|
|
+ <Cell
|
|
|
+ border={false}
|
|
|
+ v-slots={{
|
|
|
+ title: () => (
|
|
|
+ <div>
|
|
|
+ {key === 'productCategorySmallVoList'
|
|
|
+ ? '商品分类'
|
|
|
+ : key === 'brandList'
|
|
|
+ ? '品牌'
|
|
|
+ : '商品类型'}
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ label: () => (
|
|
|
+ <RadioGroup
|
|
|
+ class={styles['radio-group']}
|
|
|
+ modelValue={this.params[key]}
|
|
|
+ onUpdate:modelValue={val => (this.params[key] = val)}
|
|
|
+ >
|
|
|
+ {this[key].map((item: any) => {
|
|
|
+ const isActive = item.id === this.params[key]
|
|
|
+ const type = isActive ? 'primary' : 'default'
|
|
|
+ return (
|
|
|
+ <Radio
|
|
|
+ class={styles.radio}
|
|
|
+ name={item.id}
|
|
|
+ onClick={() => {}}
|
|
|
+ >
|
|
|
+ <Tag size="large" type={type}>
|
|
|
+ {item.name}
|
|
|
+ </Tag>
|
|
|
+ </Radio>
|
|
|
+ )
|
|
|
+ })}
|
|
|
+ </RadioGroup>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ))}
|
|
|
+ <Divider style={{ margin: '0' }} />
|
|
|
+ <div class={styles.filterAction}>
|
|
|
+ <Button
|
|
|
+ round
|
|
|
+ style={{ marginRight: '8px' }}
|
|
|
+ onClick={() => (this.params = init())}
|
|
|
+ >
|
|
|
+ 重置
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ round
|
|
|
+ type="primary"
|
|
|
+ style={{ marginLeft: '8px' }}
|
|
|
+ onClick={() => this.onFilterClick(this.params)}
|
|
|
+ >
|
|
|
+ 确认
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+})
|
