crm-app-vue3/pages/publicClue/index.vue

<template>
	<view>
		<u-navbar title="线索公海" :autoBack="true" :placeholder="true" v-hideNav></u-navbar>
		<view class="case_top_wrap">
			<ld-select :list="options" label-key="label" value-key="value" placeholder="选择搜索类型"
				v-model="queryParams.condition" class="conditionSelect" @change="handleConditionChange" :isShowIcon="true"></ld-select>
			<u-input shape="circle" clearable prefixIcon="search" v-model="queryParams.conditionContent"
				placeholder="整合搜索" @blur="handleKeyword" @clear="handleKeywordClear"></u-input>
		</view>
		<view class="queryParams_wrap">
			<view class="sort" @click="handleShowSort">
				<view style="margin-right: 10rpx;">排序</view>
				<u-icon name="arrow-down-fill" color="#aaa" size="10" ></u-icon>
			</view>
			<view class="sort" @click="handleShowTag">
				<view style="margin-right: 10rpx;">标签</view>
				<u-icon name="arrow-down-fill" color="#aaa" size="10" ></u-icon>
			</view>
			<view class="query" @click="handleshowFilter">
				<view style="margin-right: 10rpx;">筛选</view>
				<u-icon name="arrow-down-fill" color="#aaa" size="10" ></u-icon>
			</view>
		</view>
		<view class="clue_state_wrap">
			<scroll-view scroll-x="true">
				<view class="clue_state_list">
					<view @click="handleClueStateClick(item)" v-for="(item, index) in clueStateList " :key="index"
						class="clue_state_item" :class="{ active : queryParams.clueState === item.clueState }">
						<text>{{item.clueStateName}}</text>
						<text>({{item.count}})</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="case_wrap">
			<show-emtry v-if="listData.length === 0"></show-emtry>
			<view class="case_main_wrap" v-else>
				<post v-for="(item,index) in listData" :key="item.id + index" :item="item" :dicts="dicts"
					:type="queryParams.type" @click.native="handleToDetail(item)">
				</post>
				<u-loadmore :status="finished ? 'nomore' : loadStatus" icon line />
			</view>
		</view>
		<sort ref="sort" v-model="queryParams" @getList="resetData" :mapHeight="mapHeight"></sort>
		<filter-query ref="filter" v-model="queryParams" @getList="resetData" :mapHeight="mapHeight"
			:dicts="dicts"></filter-query>
		<group-select class="clueTagsSelect" :list="clueTagGroupVoList" scrollHeight="720rpx" groupName="groupName"
			groupChild="clueTagDataList" label-key="name" value-key="id" placeholder="请选择线索标签"
			v-model="queryParams.allTagList" multiple clearable ref="clueTag"
			@confirm="handleClueTagConfirm"></group-select>
		<u-modal :show="trendModal" title="价格趋势" @confirm="handleTrendConfirm" confirmText="关闭弹窗">
			<view class="trend_modal">
				<u-search placeholder="请输入型号" v-model="model" @custom="searchTrend"></u-search>
				<view class="charts_box" v-if="chartShow">
					<u--text type="primary" :text="`最大价格：${Math.max(...maxPrice)}元`"></u--text>
					<u--text type="warning" :text="`最小价格：${Math.min(...minPrice)}元`"></u--text>
					<qiun-data-charts type="line" :chartData="chartData" canvasId="trendChart" :opts="opts" :ontouch="true" tooltipFormat="tooltipFormatPrice"
						width="700rpx" height="500rpx" backgroundColor="#ffffff" />
				</view>
			</view>
		</u-modal>
		
		<view class="suspension_button trend" @click="handleTrend">
			趋势
		</view>
		<view class="suspension_button" @click="handleAddClue">
			新增
		</view>

	</view>
</template>

<script>
	import clue from "@/pages/clue/mixins/clue.js";
	import post from "@/pages/clue/post/index.vue";
	import sort from "@/pages/clue/components/sort.vue";
	import filterQuery from "@/pages/clue/components/filterQuery.vue";
	export default {
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
			this.resetData();
		},
		components: {
			post,
			sort,
			filterQuery,
		},
		mixins: [clue],
		onLoad() {
			this.queryParams.type = 1;
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/pages/clue/scss/clue.scss";
</style>