caimei-applets-caimei/pages/seller/club/components/echart-demand.vue

<template>
	<view class="echart-content">
		<view class="echart-title">
			<view class="e-icon e4"><text class="iconfont icon-zixunjilu"></text></view>
			<view class="e-name">用户需求</view>
		</view>
		<view class="echart-search">
			<view class="echart-search-date">
				<view class="echart-search-date-input">
					<picker
						mode="date"
						:value="date"
						:start="startDate"
						:end="endDate"
						@change="bindStartDateChange($event, 2)"
					>
						<text class="input-text">{{ contactData.startTime }}</text>
					</picker>
					<text class="iconfont icon-riqi"></text>
				</view>
				<view class="line">-</view>
				<view class="echart-search-date-input">
					<picker
						mode="date"
						:value="date"
						:start="startDate"
						:end="endDate"
						@change="bindEndDateChange($event, 2)"
					>
						<text class="input-text">{{ contactData.endTime }}</text>
					</picker>
					<text class="iconfont icon-riqi"></text>
				</view>
			</view>
			<view class="echart-search-time">
				<view
					class="time-tab"
					v-for="(time, index) in timeList"
					:class="{ current: current === index }"
					:key="index"
					@click="handleTimeClick(time.current, index, 2)"
					>{{ time.label }}</view
				>
			</view>
		</view>
		<view class="echart-mains demand">
			<view class="echart-mains-data" v-if="labelsList.length > 0">
				<view class="list-label-list">
					<text class="list-label" 
						  :class="item.isChecked ? 'active' : ''"
						  v-for="(item, index) in labelsList" 
						  :key="index"
					>
						  {{ item }}
					</text>
				</view>
			</view>
			<view class="echart-mains-none" v-else>
				<image
					class="none-image"
					src="https://static.caimei365.com/app/img/bg/icon_echart_none@2x.png"
					mode=""
				></image>
				<view class="none-text">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import chartMixin from './mixins/chart.mixin.js'
export default {
	mixins: [chartMixin],
	props:{
		clubId:{
			type:Number,
			default:0
		},
		totalNum:{
			type:Number,
			default:0
		}
	},
	data() {
		return {
			current: 0,
			remarksTotal:0,
			contactChartData:null,
			contactData:{
			    startTime: '',
			    endTime: '',
			    remarksScopeNum:0
			},
			params:{
			    clubId:0,//  机构id
			    dateType:3,//   日期类别 0日 1月 2半年 3全年
			    startTime:'',//   开始时间
			    endTime:'',//   结束时间
			},
			labelsList:[]
		}
	},
	created() {
		this.params.clubId = this.clubId
		this.remarksTotal = this.totalNum
		this.getCustomDemand()
	},
	methods: {
		handleTimeClick(dateType,index,type) {
		    //年月日点击
		    console.log('dateType', dateType)
		    this.current = index
		    this.params.dateType = dateType
			this.params.startTime = ''
			this.params.endTime = ''
		    this.getCustomDemand()
		},
		async getCustomDemand(){
			this.contactData.startTime = this.params.startTime
			this.contactData.endTime = this.params.endTime
			try {
				const res = await this.UserService.getCustomDemand(this.params)
				const data = res.data
				this.labelsList = data.list
				this.contactData.startTime = this.params.startTime = data.startTime
				this.contactData.endTime = this.params.endTime = data.endTime
			} catch (error) {
			   this.$util.msg(error.msg, 2000)
			}
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
	.list-label-list{
		width: 100%;
		height: auto;
		box-sizing: border-box;
		.list-label{
			display: inline-block;
			padding: 0 20rpx;
			height: 48rpx;
			line-height: 48rpx;
			background: #F7F7F7;
			text-align: center;
			margin-right: 30rpx;
			margin-bottom: 30rpx;
			font-size: 26rpx;
			color: #666666;
			&.active{
				background: #FEF6F3;
				color: #FF5B00;
			}
		}
	}
</style>