feat: 客户资信管理-筛选-日期交互优化

史婷婷
1 parent a99f36c3
Showing 1 changed file with 425 additions and 415 deletions
pages/credit_manage/index.vue
--- a/pages/credit_manage/index.vue
View file @0028bd9
+++ b/pages/credit_manage/index.vue
View file @0028bd9
@@ -6,7 +6,8 @@
 					cancelButton="none" bgColor="#F3F3F3" textColor="rgba(0,0,0,0.4)" @confirm="search"
 					@input="onSearchInput" />
 				<view class="tool-icons">
-					<image v-if="$auth.hasPermi('customer-credit-manage:customer-credit-plan:add')" class="tool-icon" src="/static/images/dev_manage/add_icon.png" @click="onAdd" />
+					<image v-if="$auth.hasPermi('customer-credit-manage:customer-credit-plan:add')" class="tool-icon"
+						src="/static/images/dev_manage/add_icon.png" @click="onAdd" />
 					<image class="tool-icon" src="/static/images/dev_manage/filter_icon.png" @click="openFilter" />
 				</view>
 			</view>
@@ -22,22 +23,24 @@
 						<view class="card-header">
 							<text class="title omit2">{{ item.companyName }}</text>
 							<view class="status-box">
-								<text
-									:class="['status', `status_${item.status}`]">{{ getDicName('AUDIT_STATUS', item.status, dicOptions.AUDIT_STATUS) }}</text>
-									<text
-									v-if="item.frozenStatus === '冻结'"
-									:class="['status2']">{{ item.frozenStatus === '冻结' ? '已冻结' : '' }}</text>
+								<text :class="['status', `status_${item.status}`]">{{ getDicName('AUDIT_STATUS',
+									item.status, dicOptions.AUDIT_STATUS) }}</text>
+								<text v-if="item.frozenStatus === '冻结'" :class="['status2']">{{ item.frozenStatus ===
+									'冻结' ? '已冻结' : '' }}</text>
 							</view>
 						</view>
 						<view class="info-row">
-							<text>企业类型</text><text>{{ getDicName('ENTERPRISE_TYPE', item.enterpriseType, dicOptions.ENTERPRISE_TYPE) || '-' }}</text>
+							<text>企业类型</text><text>{{ getDicName('ENTERPRISE_TYPE', item.enterpriseType,
+								dicOptions.ENTERPRISE_TYPE) || '-' }}</text>
 						</view>
 						<view class="info-row">
 							<text>区域</text><text>{{ item.regionName || '-' }}</text>
 						</view>
 						<view class="info-row">
 							<text>客户分类</text><text
-								:class="[item.companySuggestedCategory ? 'category' : '', getCategoryClass(getDicName('CUSTOMER_CATEGORY', item.companySuggestedCategory, dicOptions.CUSTOMER_CATEGORY))]">{{ getDicName('CUSTOMER_CATEGORY', item.companySuggestedCategory, dicOptions.CUSTOMER_CATEGORY) || '-' }}</text>
+								:class="[item.companySuggestedCategory ? 'category' : '', getCategoryClass(getDicName('CUSTOMER_CATEGORY', item.companySuggestedCategory, dicOptions.CUSTOMER_CATEGORY))]">{{
+									getDicName('CUSTOMER_CATEGORY', item.companySuggestedCategory,
+										dicOptions.CUSTOMER_CATEGORY) || '-' }}</text>
 						</view>
 						<view class="info-row">
 							<text>登记日期</text><text>{{ item.registerDate || '-' }}</text>
@@ -67,7 +70,8 @@
 					</view>
 					<view class="form-item">
 						<view class="label">登记日期</view>
-						<uni-datetime-picker type="daterange" v-model="model.dateRange" start="2023-01-01" />
+						<uni-datetime-picker type="daterange" v-model="model.dateRange" start="2023-01-01"
+							@change="onDateChange($event, model)" />
 					</view>
 				</view>
 			</template>
@@ -76,491 +80,497 @@
 </template>
 <script>
-	import CardList from '@/components/card/index.vue'
-	import FilterModal from '@/components/filter/index.vue'
-	import SingleSelectSheet from '@/components/single-select/index.vue'
-	import {
-		queryApi
-	} from '@/api/credit_manage.js'
-	import {
-		getDicByCodes
-	} from '@/utils/dic'
-	import {
-		getDicName
-	} from '@/utils/dic.js'
-
-	export default {
-		components: {
-			CardList,
-			FilterModal,
-			SingleSelectSheet
-		},
-		data() {
+import CardList from '@/components/card/index.vue'
+import FilterModal from '@/components/filter/index.vue'
+import SingleSelectSheet from '@/components/single-select/index.vue'
+import {
+	queryApi
+} from '@/api/credit_manage.js'
+import {
+	getDicByCodes
+} from '@/utils/dic'
+import {
+	getDicName
+} from '@/utils/dic.js'
+
+export default {
+	components: {
+		CardList,
+		FilterModal,
+		SingleSelectSheet
+	},
+	data() {
+		return {
+			searchKeyword: '',
+			searchKeywordDebounced: '',
+			tabs: [],
+			// 给到 card 的筛选值
+			query: {
+				status: '',
+				companySuggestedCategory: '',
+				dateRange: []
+			},
+			extraParams: {},
+
+			// 批量选择
+			rowKey: 'id',
+			currentItems: [],
+
+			// 筛选弹框
+			filterVisible: false,
+			filterForm: {
+				status: '',
+				companySuggestedCategory: '',
+				dateRange: []
+			},
+			dicOptions: {
+				CUSTOMER_CATEGORY: [],
+				AUDIT_STATUS: [],
+				ENTERPRISE_TYPE: [],
+				CREDIT_ZONE: []
+			},
+			statusLocal: [],
+			categoryLocal: []
+		}
+	},
+	computed: {
+		extraCombined() {
 			return {
-				searchKeyword: '',
-				searchKeywordDebounced: '',
-				tabs: [],
-				// 给到 card 的筛选值
-				query: {
-					status: '',
-					companySuggestedCategory: '',
-					dateRange: []
-				},
-				extraParams: {},
-
-				// 批量选择
-				rowKey: 'id',
-				currentItems: [],
-
-				// 筛选弹框
-				filterVisible: false,
-				filterForm: {
-					status: '',
-					companySuggestedCategory: '',
-					dateRange: []
-				},
-				dicOptions: {
-					CUSTOMER_CATEGORY: [],
-					AUDIT_STATUS: [],
-					ENTERPRISE_TYPE: [],
-					CREDIT_ZONE: []
-				},
-				statusLocal: [],
-				categoryLocal: []
-			}
-		},
-		computed: {
-			extraCombined() {
-				return {
-					companyName: this.searchKeywordDebounced || undefined
-				}
+				companyName: this.searchKeywordDebounced || undefined
 			}
-		},
-		watch: {
-			extraCombined: {
-				deep: true,
-				handler(v) {
-					this.extraParams = v
-				},
-				immediate: true
+		}
+	},
+	watch: {
+		extraCombined: {
+			deep: true,
+			handler(v) {
+				this.extraParams = v
 			},
-
+			immediate: true
 		},
-		created() {
-			this.loadAllDicData()
+
+	},
+	created() {
+		this.loadAllDicData()
+	},
+	onLoad() { },
+	// 页面触底兜底：当页面自身滚动到底部时，转调卡片组件加载更多
+	onReachBottom() {
+		if (this.$refs && this.$refs.cardRef && this.$refs.cardRef.onLoadMore) {
+			this.$refs.cardRef.onLoadMore()
+		}
+	},
+	beforeDestroy() {
+		if (this.searchDebounceTimer) {
+			clearTimeout(this.searchDebounceTimer)
+			this.searchDebounceTimer = null
+		}
+	},
+	methods: {
+		onCardLoaded({
+			items
+		}) {
+			this.currentItems = items
 		},
-		onLoad() {},
-		// 页面触底兜底：当页面自身滚动到底部时，转调卡片组件加载更多
-		onReachBottom() {
-			if (this.$refs && this.$refs.cardRef && this.$refs.cardRef.onLoadMore) {
-				this.$refs.cardRef.onLoadMore()
-			}
+		onCardError() {
+			uni.showToast({
+				title: '列表加载失败',
+				icon: 'none'
+			})
 		},
-		beforeDestroy() {
-			if (this.searchDebounceTimer) {
-				clearTimeout(this.searchDebounceTimer)
+		// 输入实时搜索：1200ms 防抖，仅在停止输入超过阈值后刷新
+		onSearchInput(val) {
+			if (this.searchDebounceTimer) clearTimeout(this.searchDebounceTimer)
+			this.searchDebounceTimer = setTimeout(() => {
+				this.searchKeywordDebounced = this.searchKeyword
 				this.searchDebounceTimer = null
+			}, 1200)
+		},
+		// uni-search-bar 确认搜索：更新关键字并触发 CardList 刷新
+		search(e) {
+			const val = e && e.value != null ? e.value : this.searchKeyword
+			this.searchKeyword = val
+			this.searchKeywordDebounced = val
+		},
+		onAdd() {
+			uni.navigateTo({
+				url: '/pages/credit_manage/add'
+			})
+		},
+		openFilter() {
+			this.filterVisible = true
+		},
+		onFilterReset(payload) {
+			this.filterForm = payload
+		},
+		onFilterConfirm(payload) {
+			if ((payload.status === '' || payload.status == null) && this.filterForm.status !== '') {
+				payload.status = this.filterForm.status
+			}
+			if ((payload.companySuggestedCategory === '' || payload.companySuggestedCategory == null) && this
+				.filterForm
+				.companySuggestedCategory !== '') {
+				payload.companySuggestedCategory = this.filterForm.companySuggestedCategory
+			}
+			this.query = {
+				...payload
 			}
 		},
-		methods: {
-			onCardLoaded({
-				items
-			}) {
-				this.currentItems = items
-			},
-			onCardError() {
-				uni.showToast({
-					title: '列表加载失败',
-					icon: 'none'
-				})
-			},
-			// 输入实时搜索：1200ms 防抖，仅在停止输入超过阈值后刷新
-			onSearchInput(val) {
-				if (this.searchDebounceTimer) clearTimeout(this.searchDebounceTimer)
-				this.searchDebounceTimer = setTimeout(() => {
-					this.searchKeywordDebounced = this.searchKeyword
-					this.searchDebounceTimer = null
-				}, 1200)
-			},
-			// uni-search-bar 确认搜索：更新关键字并触发 CardList 刷新
-			search(e) {
-				const val = e && e.value != null ? e.value : this.searchKeyword
-				this.searchKeyword = val
-				this.searchKeywordDebounced = val
-			},
-			onAdd() {
-				uni.navigateTo({
-					url: '/pages/credit_manage/add'
-				})
-			},
-			openFilter() {
-				this.filterVisible = true
-			},
-			onFilterReset(payload) {
-				this.filterForm = payload
-			},
-			onFilterConfirm(payload) {
-				if ((payload.status === '' || payload.status == null) && this.filterForm.status !== '') {
-					payload.status = this.filterForm.status
-				}
-				if ((payload.companySuggestedCategory === '' || payload.companySuggestedCategory == null) && this
-					.filterForm
-					.companySuggestedCategory !== '') {
-					payload.companySuggestedCategory = this.filterForm.companySuggestedCategory
-				}
-				this.query = {
-					...payload
-				}
-			},
-			onStatusChange(e) {
-				const raw = e && e.detail && e.detail.value !== undefined ?
-					e.detail.value :
-					(e && e.value !== undefined ? e.value : '')
-				this.filterForm.status = raw
-			},
-			onCategoryChange(e) {
-				const raw = e && e.detail && e.detail.value !== undefined ? e.detail.value : (e && e.value !== undefined ?
-					e.value : '')
-				this.filterForm.companySuggestedCategory = raw
-			},
-
-			// 列表接口（真实请求）
-			fetchList({
+		onStatusChange(e) {
+			const raw = e && e.detail && e.detail.value !== undefined ?
+				e.detail.value :
+				(e && e.value !== undefined ? e.value : '')
+			this.filterForm.status = raw
+		},
+		onCategoryChange(e) {
+			const raw = e && e.detail && e.detail.value !== undefined ? e.detail.value : (e && e.value !== undefined ?
+				e.value : '')
+			this.filterForm.companySuggestedCategory = raw
+		},
+		onDateChange(e, model) {
+			// 确保同步更新 filterForm，避免数据不同步
+			this.filterForm.dateRange = e
+		},
+		// 列表接口（真实请求）
+		fetchList({
+			pageIndex,
+			pageSize,
+			query,
+			extra
+		}) {
+			const params = {
 				pageIndex,
 				pageSize,
-				query,
-				extra
-			}) {
-				const params = {
-					pageIndex,
-					pageSize,
-					...extra,
-					...query
-				}
-				if (Array.isArray(params.dateRange) && params.dateRange.length === 2) {
-					params.registerDateStart = params.dateRange[0] + ' 00:00:00'
-					params.registerDateEnd = params.dateRange[1] + ' 23:59:59'
-					delete params.dateRange
-				}
-				if (this.searchKeywordDebounced) {
-					params.companyName = this.searchKeywordDebounced
-				}
-				return queryApi(params)
-					.then(res => {
-						const _data = res.data || {};
-						const records = _data.datas || [];
-						const totalCount = _data.totalCount || 0;
-						const hasNext = _data.hasNext || false
-						return {
-							records,
-							totalCount,
-							hasNext
-						}
-					})
-					.catch(err => {
-						console.error('fetchList error', err)
-						this.onCardError()
-						return {
-							records: [],
-							totalCount: 0,
-							hasNext: false
-						}
-					})
-			},
-			loadAllDicData() {
-				const dicCodes = ['CUSTOMER_CATEGORY', 'AUDIT_STATUS', 'ENTERPRISE_TYPE', 'CREDIT_ZONE']
-				return getDicByCodes(dicCodes).then(results => {
-					this.dicOptions.CUSTOMER_CATEGORY = results.CUSTOMER_CATEGORY.data || []
-					this.dicOptions.AUDIT_STATUS = results.AUDIT_STATUS.data || []
-					this.dicOptions.ENTERPRISE_TYPE = results.ENTERPRISE_TYPE.data || []
-					this.dicOptions.CREDIT_ZONE = results.CREDIT_ZONE.data || [];
-					this.categoryLocal = (this.dicOptions.CUSTOMER_CATEGORY || []).map(it => ({
-						value: it.code,
-						text: it.name
-					}))
-					this.statusLocal = (this.dicOptions.AUDIT_STATUS || []).map(it => ({
-						value: it.code,
-						text: it.name
-					}))
-				}).catch(() => {
-					this.dicOptions = {
-						CUSTOMER_CATEGORY: [],
-						AUDIT_STATUS: [],
-						ENTERPRISE_TYPE: [],
-						CREDIT_ZONE: []
+				...extra,
+				...query
+			}
+			if (Array.isArray(params.dateRange) && params.dateRange.length === 2) {
+				params.registerDateStart = params.dateRange[0] + ' 00:00:00'
+				params.registerDateEnd = params.dateRange[1] + ' 23:59:59'
+				delete params.dateRange
+			}
+			if (this.searchKeywordDebounced) {
+				params.companyName = this.searchKeywordDebounced
+			}
+			return queryApi(params)
+				.then(res => {
+					const _data = res.data || {};
+					const records = _data.datas || [];
+					const totalCount = _data.totalCount || 0;
+					const hasNext = _data.hasNext || false
+					return {
+						records,
+						totalCount,
+						hasNext
 					}
-					this.categoryLocal = []
-					this.statusLocal = []
 				})
-			},
-			onCardClick(item) {
-				const id = (item && (item.id || item.code)) || ''
-				if (!id) return
-				const query = '?id=' + encodeURIComponent(id)
-				uni.navigateTo({
-					url: '/pages/credit_manage/detail' + query
+				.catch(err => {
+					console.error('fetchList error', err)
+					this.onCardError()
+					return {
+						records: [],
+						totalCount: 0,
+						hasNext: false
+					}
 				})
-			},
-			getDicName: getDicName,
-			getCategoryClass(categoryName) {
-				if (!categoryName) return ''
-				if (categoryName.includes('A') || categoryName.includes('a')) {
-					return 'category_A'
-				} else if (categoryName.includes('B') || categoryName.includes('b')) {
-					return 'category_B'
-				} else if (categoryName.includes('C') || categoryName.includes('c')) {
-					return 'category_C'
-				} else if (categoryName.includes('D') || categoryName.includes('d')) {
-					return 'category_D'
+		},
+		loadAllDicData() {
+			const dicCodes = ['CUSTOMER_CATEGORY', 'AUDIT_STATUS', 'ENTERPRISE_TYPE', 'CREDIT_ZONE']
+			return getDicByCodes(dicCodes).then(results => {
+				this.dicOptions.CUSTOMER_CATEGORY = results.CUSTOMER_CATEGORY.data || []
+				this.dicOptions.AUDIT_STATUS = results.AUDIT_STATUS.data || []
+				this.dicOptions.ENTERPRISE_TYPE = results.ENTERPRISE_TYPE.data || []
+				this.dicOptions.CREDIT_ZONE = results.CREDIT_ZONE.data || [];
+				this.categoryLocal = (this.dicOptions.CUSTOMER_CATEGORY || []).map(it => ({
+					value: it.code,
+					text: it.name
+				}))
+				this.statusLocal = (this.dicOptions.AUDIT_STATUS || []).map(it => ({
+					value: it.code,
+					text: it.name
+				}))
+			}).catch(() => {
+				this.dicOptions = {
+					CUSTOMER_CATEGORY: [],
+					AUDIT_STATUS: [],
+					ENTERPRISE_TYPE: [],
+					CREDIT_ZONE: []
 				}
+				this.categoryLocal = []
+				this.statusLocal = []
+			})
+		},
+		onCardClick(item) {
+			const id = (item && (item.id || item.code)) || ''
+			if (!id) return
+			const query = '?id=' + encodeURIComponent(id)
+			uni.navigateTo({
+				url: '/pages/credit_manage/detail' + query
+			})
+		},
+		getDicName: getDicName,
+		getCategoryClass(categoryName) {
+			if (!categoryName) return ''
+			if (categoryName.includes('A') || categoryName.includes('a')) {
+				return 'category_A'
+			} else if (categoryName.includes('B') || categoryName.includes('b')) {
+				return 'category_B'
+			} else if (categoryName.includes('C') || categoryName.includes('c')) {
+				return 'category_C'
+			} else if (categoryName.includes('D') || categoryName.includes('d')) {
+				return 'category_D'
 			}
-
 		}
+
 	}
+}
 </script>
 <style lang="scss" scoped>
-	.page {
+.page {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+}
+
+.dev-list-fixed {
+	position: fixed;
+	top: 96rpx;
+	left: 0;
+	right: 0;
+	z-index: 2;
+	background: #fff;
+
+	.search-row {
 		display: flex;
-		flex-direction: column;
-		height: 100vh;
-	}
+		align-items: center;
+		padding: 16rpx 32rpx;
-	.dev-list-fixed {
-		position: fixed;
-		top: 96rpx;
-		left: 0;
-		right: 0;
-		z-index: 2;
-		background: #fff;
+		.uni-searchbar {
+			padding: 0;
+			flex: 1;
+		}
-		.search-row {
+		.tool-icons {
 			display: flex;
-			align-items: center;
-			padding: 16rpx 32rpx;
-			.uni-searchbar {
-				padding: 0;
-				flex: 1;
+			.tool-icon {
+				width: 48rpx;
+				height: 48rpx;
+				display: block;
+				margin-left: 32rpx;
 			}
+		}
+	}
-			.tool-icons {
-				display: flex;
+}
-				.tool-icon {
-					width: 48rpx;
-					height: 48rpx;
-					display: block;
-					margin-left: 32rpx;
-				}
-			}
-		}
+/* 仅当前页覆盖 uni-search-bar 盒子高度 */
+::v-deep .uni-searchbar__box {
+	height: 80rpx !important;
+	justify-content: start;
+	.uni-searchbar__box-search-input {
+		font-size: 32rpx !important;
 	}
+}
-	/* 仅当前页覆盖 uni-search-bar 盒子高度 */
-	::v-deep .uni-searchbar__box {
-		height: 80rpx !important;
-		justify-content: start;
+.list-box {
+	flex: 1;
+	padding-top: 132rpx;
-		.uni-searchbar__box-search-input {
-			font-size: 32rpx !important;
-		}
+	&.pad-batch {
+		padding-bottom: 144rpx;
 	}
-	.list-box {
-		flex: 1;
-		padding-top: 132rpx;
+	.card {
+		position: relative;
+	}
-		&.pad-batch {
-			padding-bottom: 144rpx;
-		}
+	.card-header {
+		margin-bottom: 28rpx;
+		position: relative;
-		.card {
-			position: relative;
+		.title {
+			font-size: 36rpx;
+			font-weight: 600;
+			line-height: 50rpx;
+			color: rgba(0, 0, 0, 0.9);
+			width: 578rpx;
 		}
-		.card-header {
-			margin-bottom: 28rpx;
-			position: relative;
+		.status-box {
+			position: absolute;
+			top: -32rpx;
+			right: -32rpx;
-			.title {
-				font-size: 36rpx;
+			.status {
+				display: block;
+				height: 48rpx;
+				line-height: 48rpx;
 				font-weight: 600;
-				line-height: 50rpx;
-				color: rgba(0,0,0,0.9);
-				width: 578rpx;
-			}
-
-			.status-box {
-				position: absolute;
-				top: -32rpx;
-				right: -32rpx;
-
-				.status {
-					display: block;
-					height: 48rpx;
-					line-height: 48rpx;
-					font-weight: 600;
-					color: #fff;
-					font-size: 24rpx;
-					padding: 0 14rpx;
-					border-radius: 6rpx;
-					margin-bottom: 8rpx;
-
-                    &.status_AUDIT {
-                        background: $theme-primary;
-                    }
-
-					&.status_PASS {
-						background: #2BA471;
-					}
+				color: #fff;
+				font-size: 24rpx;
+				padding: 0 14rpx;
+				border-radius: 6rpx;
+				margin-bottom: 8rpx;
+
+				&.status_AUDIT {
+					background: $theme-primary;
+				}
-					&.status_REFUSE {
-						background: #D54941;
-					}
+				&.status_PASS {
+					background: #2BA471;
+				}
-					&.status_CANCEL {
-						background: #E7E7E7;
-						color: rgba(0,0,0,0.9);
-					}
+				&.status_REFUSE {
+					background: #D54941;
 				}
-				.status2 {
-					display: block;
-					font-weight: 600;
-					line-height: 48rpx;
-					height: 48rpx;
-					color: #fff;
-					font-size: 24rpx;
-					padding: 0 14rpx;
-					border-radius: 6rpx;
+				&.status_CANCEL {
 					background: #E7E7E7;
-					color: rgba(0,0,0,0.9);
-
+					color: rgba(0, 0, 0, 0.9);
 				}
+			}
+
+			.status2 {
+				display: block;
+				font-weight: 600;
+				line-height: 48rpx;
+				height: 48rpx;
+				color: #fff;
+				font-size: 24rpx;
+				padding: 0 14rpx;
+				border-radius: 6rpx;
+				background: #E7E7E7;
+				color: rgba(0, 0, 0, 0.9);
 			}
 		}
-		.info-row {
-			display: flex;
-			align-items: center;
-			color: rgba(0, 0, 0, 0.6);
-			font-size: 28rpx;
-			margin-bottom: 24rpx;
+	}
+
+	.info-row {
+		display: flex;
+		align-items: center;
+		color: rgba(0, 0, 0, 0.6);
+		font-size: 28rpx;
+		margin-bottom: 24rpx;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		text {
+			width: 60%;
+			line-height: 32rpx;
 			&:last-child {
-				margin-bottom: 0;
+				color: rgba(0, 0, 0, 0.9);
+				width: 40%;
 			}
-			text {
-				width: 60%;
-				line-height: 32rpx;
+			&.category {
+				display: inline-block;
+				padding: 4rpx 12rpx;
+				border-radius: 6rpx;
+				font-size: 24rpx;
+				width: auto;
-				&:last-child {
-					color: rgba(0, 0, 0, 0.9);
-					width: 40%;
+				&.category_A {
+					background: #FFF0ED;
+					color: #D54941;
 				}
-				&.category {
-					display: inline-block;
-					padding: 4rpx 12rpx;
-					border-radius: 6rpx;
-					font-size: 24rpx;
-					width: auto;
-					&.category_A {
-						background: #FFF0ED;
-						color: #D54941;
-					}
-					&.category_B {
-						background: #FFF1E9;
-						color: #E37318;
-					}
-                    &.category_C {
-                        background: #F2F3FF;
-                        color: $theme-primary;
-                    }
-					&.category_D {
-						background: #E3F9E9;
-						color: #2BA471;
-					}
+				&.category_B {
+					background: #FFF1E9;
+					color: #E37318;
+				}
+
+				&.category_C {
+					background: #F2F3FF;
+					color: $theme-primary;
 				}
-			}
+				&.category_D {
+					background: #E3F9E9;
+					color: #2BA471;
+				}
+			}
 		}
+
 	}
+}
-	.filter-form {
-		.form-item {
-			margin-bottom: 24rpx;
-		}
+.filter-form {
+	.form-item {
+		margin-bottom: 24rpx;
+	}
-		.label {
-			margin-bottom: 20rpx;
-			color: rgba(0, 0, 0, 0.9);
-			height: 44rpx;
-			line-height: 44rpx;
-			font-size: 30rpx;
+	.label {
+		margin-bottom: 20rpx;
+		color: rgba(0, 0, 0, 0.9);
+		height: 44rpx;
+		line-height: 44rpx;
+		font-size: 30rpx;
+	}
+
+	.fake-select {
+		height: 80rpx;
+		line-height: 80rpx;
+		padding: 0 20rpx;
+		background: #f3f3f3;
+		border-radius: 12rpx;
+
+		.placeholder {
+			color: #999;
 		}
-		.fake-select {
+		.value {
+			color: #333;
+		}
+	}
+}
+
+/* 深度覆盖 uni-data-checkbox（mode=tag）内部的 tag 展示与间距 */
+::v-deep .filter-form .uni-data-checklist .checklist-group {
+	.checklist-box {
+		&.is--tag {
+			width: 212rpx;
+			margin-top: 0;
+			margin-bottom: 24rpx;
+			margin-right: 24rpx;
 			height: 80rpx;
-			line-height: 80rpx;
-			padding: 0 20rpx;
-			background: #f3f3f3;
+			padding: 0;
 			border-radius: 12rpx;
+			background-color: #f3f3f3;
+			border-color: #f3f3f3;
-			.placeholder {
-				color: #999;
+			&:nth-child(3n) {
+				margin-right: 0;
 			}
-			.value {
-				color: #333;
+			.checklist-content {
+				display: flex;
+				justify-content: center;
 			}
-		}
-	}
-
-	/* 深度覆盖 uni-data-checkbox（mode=tag）内部的 tag 展示与间距 */
-	::v-deep .filter-form .uni-data-checklist .checklist-group {
-		.checklist-box {
-			&.is--tag {
-				width: 212rpx;
-				margin-top: 0;
-				margin-bottom: 24rpx;
-				margin-right: 24rpx;
-				height: 80rpx;
-				padding: 0;
-				border-radius: 12rpx;
-				background-color: #f3f3f3;
-				border-color: #f3f3f3;
-
-				&:nth-child(3n) {
-					margin-right: 0;
-				}
-
-				.checklist-content {
-					display: flex;
-					justify-content: center;
-				}
-				.checklist-text {
-					color: rgba(0, 0, 0, 0.9);
-					font-size: 28rpx;
-				}
+			.checklist-text {
+				color: rgba(0, 0, 0, 0.9);
+				font-size: 28rpx;
 			}
+		}
-			&.is-checked {
-				background-color: $theme-primary-plain-bg !important;
-				border-color: $theme-primary-plain-bg !important;
+		&.is-checked {
+			background-color: $theme-primary-plain-bg !important;
+			border-color: $theme-primary-plain-bg !important;
-				.checklist-text {
-					color: $theme-primary !important;
-				}
+			.checklist-text {
+				color: $theme-primary !important;
 			}
 		}
-
 	}
+}
 </style>