crm-app-vue3/pages/clue/mixins/clue.js

import pullUpRefresh from "@/utils/pullUpRefresh";
import dayjs from "dayjs";
export default {
	mixins: [pullUpRefresh],
	provide() {
		return {
			refreshData: {
				resetData: this.resetData
			}
		}
	},
	computed: {
		currentIndex() {
			return this.queryParams.type == 1 ? 0 : 1;
		}
	},
	onPullDownRefresh() {
		uni.stopPullDownRefresh();
		// 刷新

	},
	data() {
		return {

			clueStateList: [],

			mapHeight: "0px",

			key: new Date().getTime(),

			clueTagGroupVoList: [],

			dicts: {
				caseStatusDicts: [],
				crmFollowStatus: [],
				crmCallStatus: [],
				clueEntranceType: [],
				crmClueBiz: [],
				crmClueObj: [],
				crmClueType: []
			},

			options: [{
				value: "3",
				label: "电话/微信"
			},
			{
				value: "1",
				label: "姓名"
			},
			{
				value: "8",
				label: "广告主ID"
			},
			{
				value: "7",
				label: "广告主名称"
			},
			{
				value: "10",
				label: "广告ID"
			},
			{
				value: "9",
				label: "广告名称"
			},
			{
				value: "11",
				label: "标题ID"
			},
			{
				value: "12",
				label: "视频ID"
			},
			{
				value: "5",
				label: "qq号"
			},
			{
				value: "6",
				label: "邮箱"
			},
			{
				value: "2",
				label: "线索ID"
			},
			],

			queryParams: {
				name: undefined,
				telephone: undefined,
				weixin: undefined,
				createTimeStart: dayjs().format("YYYY-MM-DD"),
				createTimeEnd: dayjs().format("YYYY-MM-DD"),
				conditionContent: undefined,
				condition: "3",
				batchCodes: [],
				clueIds: [],
				deptName: undefined,
				deptIds: [],
				type: "1",
				pageNum: 1,
				pageSize: 20,
				allTagList: [],
				clueStateList: [],
				followStatusList: [],
				handleStateList: [],
				convertStatusList: [],
				followCountStart: undefined,
				followCountEnd: undefined,
				autoProvince: undefined,
				autoCity: undefined,
				autoArea: undefined,
				manualProvince: undefined,
				manualCity: undefined,
				manualArea: undefined,
				clueEntranceType: [],
				clueBizType: undefined,
				clueObjType: undefined,
				clueAdType: undefined,
				clueOperationId: undefined,
				clueOwnerId: undefined,
				sort: undefined,
				clueState: undefined,
				sortField: undefined,
				appNames: [],
				appNameLabel: undefined,
				isRepetitionOperWeixinName: '',
				isRepetitionOperationName: '',
				isVideoIdIsNull: '',
				advName: "",
				promotionName: "",
				advId: "",
				promotionId: "",
				titleId: "",
				videoId: "",
			},
			trendModal: false,
			chartData:{},
			color:[],
			opts: {
				color: this.color,
				padding: [20, 10, 20, 0],
				dataLabel: true,
				dataPointShape: true,
				enableScroll: true,
				
				xAxis: {
					disableGrid: true,
					scrollShow: true,
					itemCount: 10,
					rotateLabel: true,
					rotateAngle: 45,
				},
				yAxis: {
					gridType: "dash",
					dashLength: 7,
				},
				legend: {
					show: false,
					type: 'scroll',
					orient: 'horizontal',
					pageSize: 3,
					pageIconSize: 12,
					pageIconColor: '#666',
					pageIconInactiveColor: '#ccc',
					pageTextStyle: {
						color: '#666',
						fontSize: 12
					},
					bottom: 0
				},
				extra: {
					line: {
						type: "curve",
						width: 3,
						activeType: "hollow",
						linearType: "custom",
						onShadow: true,
						animation: "horizontal"
					},
					tooltip:{
						legendShow: true,
						bgOpacity: 0.6,
					}
				}
			},
			model: "",
			maxPrice: [],
			minPrice: [],
			chartShow: false,
			tableData: [],
			date:'',
			columns: [
				{ label: '型号', prop: 'model'},
				{ label: '价格(元)', prop: 'price' },
			],
		}
	},
	onPullDownRefresh() {
		uni.stopPullDownRefresh();
		this.resetData();
	},
	mounted() {
		uni.getSystemInfo({
			success: (e) => {
				const {
					windowTop,
					windowBottom,
					windowHeight
				} = e;
				this.mapHeight = (windowHeight - 70) + 'px';
			}
		});
		this.getDicts();
		// this.handleLoadData();
		this.resetData();
	},
	// onShow() {
	// 	this.resetData();
	// },
		methods: {
			handleTrend() {
				this.trendModal = true;
			},
			handleTrendConfirm() {
				this.model = ""
				this.date = ""
				this.tableData = []
				this.chartShow = false
				this.trendModal = false;
			},
			searchTrend(val) {
				if (val !== ''){
					uni.$u.api.inquiryChart({
						model: val,
					}).then(res => {
						if(res.data.length == 0){
							uni.$u.toast("暂无数据")
							this.minPrice = []
							this.maxPrice = []
							this.chartShow = false
							return
						}
						const response = res.data
						this.maxPrice = []
						this.minPrice = []
						this.color = []
						const categories = []
						const dateMap = {}
						response.forEach(item => {
							this.maxPrice.push(item.max)
							this.minPrice.push(item.min)
							item.list.forEach(i => {
								if (!dateMap[i.recycleTime]) {
									dateMap[i.recycleTime] = true
									categories.push(i.recycleTime)
								}
							})
						})
						const series = response.map((item) => {
							const color = this.getRandomColor()
							this.color.push(color)
							const data = categories.map(date => {
								const itemData = item.list.find(i => i.recycleTime === date)
								return itemData ? itemData.price : null
							})
							return {
								name: item.model,
								data: data,
								setShadow: [
									3,
									8,
									15,
									color
								],
							}
						})
						this.opts.color = this.color
						const chartData = {
							categories: categories,
							series: series
						}
						this.chartData = JSON.parse(JSON.stringify(chartData))
						this.chartShow = true
					}).catch((err) => {
						uni.$u.toast(err)
					})
				}
			},
			handleChartClick(event) {
				console.log(event);
				const  index  = event.currentIndex.index;
				// 获取点击的日期
				const date = this.chartData.categories[index];
				this.date = date;
				
				// 构建该日期的所有型号价格数据
				const tableData = [];
				this.chartData.series.forEach(series => {
					const price = series.data[index];
					if (price !== null) {
						tableData.push({
							model: series.name,
							price: price
						});
					}
				});
				this.tableData = tableData;
			},
			getRandomColor(){
				var letters = '0123456789ABCDEF';
				var color = '#';
				for (var i = 0; i < 6; i++) {
					color += letters[Math.floor(Math.random() * 16)];
				}
				return color;
			},
			handleAddClue() {
				uni.navigateTo({
					url: "/pages/addClue/index"
				})
			},
			handleClueStateClick(item) {
				this.queryParams.clueState = item.clueState;
				this.resetData();
			},
			handleKeyword() {
				this.resetData();
			},
			handleKeywordClear() {
				// 组件有bug 清空后的值还是存在
				this.queryParams.conditionContent = "";
				this.resetData();
			},
			handleShowTag() {
			this.$refs.clueTag.showModal();
		},
		async handleClueTagConfirm() {
			this.resetData();
		},
		async getDicts() {
			this.$getDicts('crm_clue_phase').then(res => {
				this.dicts.caseStatusDicts = res;
			});
			this.$getDicts('crm_follow_status').then(res => {
				this.dicts.crmFollowStatus = res;
			})
			this.$getDicts('crm_call_status').then(res => {
				this.dicts.crmCallStatus = res;
			})
			this.$getDicts('clue_entrance_type').then(res => {
				this.dicts.clueEntranceType = res;
			});
			this.$getDicts('crm_clue_biz').then(res => {
				this.dicts.crmClueBiz = res;
			});
			this.$getDicts('crm_clue_obj').then(res => {
				this.dicts.crmClueObj = res;
			});
			this.$getDicts('crm_clue_type').then(res => {
				this.dicts.crmClueType = res;
			});
			uni.$u.api.getClueTagGroupVoList({ tagGroupApplication: '1' }).then(({
				data
			}) => {
				this.clueTagGroupVoList = data;
			});
		},
		getOtherData() {
			this.statisticsCaseState();
		},
		async statisticsCaseState() {
			const {
				data
			} = await uni.$u.api.statisticsCaseState(this.queryParams);
			this.clueStateList = data;
		},
		handleshowFilter() {
			this.$refs.filter.show();
		},
		handleShowSort() {
			this.$refs.sort.show();
		},
		sectionChange(val) {
			this.queryParams.type = val == 0 ? 1 : 2;
			this.resetData();
		},
		handleConfirm() {
			this.resetData();
		},
		handleConditionChange() {
			if (this.queryParams.conditionContent) {
				this.resetData();
			}
		},
		handleToDetail(item) {
			const {
				id,
				name
			} = item;
			uni.navigateTo({
				url: `/pages/clueDetail/index?clueId=${id}&name=${name}&type=${this.queryParams.type}`,
			});
		},
		inquirySuccess() {
			console.log('inquirySuccess');
			
			this.resetData();
		},
		async getList() {
			const {
				pageNum,
				pageSize,
				...params
			} = this.queryParams;
			const {
				rows,
				total
			} = await uni.$u.api.getClueMainInfoList({
				pageSize,
				pageNum
			}, params);
			rows.forEach(v => {
				if (v.repetitionOperationName) {
					// 按逗号分割成数组
					const parts = v.repetitionOperationName.split(',');
					// 对每个部分提取 '-' 前面的内容
					const result = parts.map(part => part.split('-')[0]).join(',');
					v.repetitionOperationName = result;
				}
				if (v.repetitionOperWeixinName) {
					// 按逗号分割成数组
					const parts = v.repetitionOperWeixinName.split(',');
					// 对每个部分提取 '-' 前面的内容
					const result = parts.map(part => part.split('-')[0]).join(',');
					v.repetitionOperWeixinName = result;
				}
			})

			return rows;
		}
	}
}