web-retail-h5/components/distribution/performanceDistribution.vue

<template>
	<view class="width-auto">
		<view class="flexs">
			<view class="select-flexs">
				<picker :range="selYearList" :value="index" range-key="label" @change="changeYear">
					<view style="display: flex;	align-items: center;justify-content: space-between;">
						<view style="margin-right:40rpx;">{{whatYear}}年</view>
						<u-icon name="arrow-down" color="#999"></u-icon>
					</view>
				
				</picker>
			
			</view>
			<view class="select-flexs">
				<picker :range="selMounthList" :value="index" range-key="label" @change="bindPickerChange">
					<view style="display: flex;	align-items: center;justify-content: space-between;">
						<view style="margin-right:40rpx;">{{whatMounth}}月</view>
						<u-icon name="arrow-down" color="#999"></u-icon>
					</view>

				</picker>

			</view>
			<view class="select-flexs" style="margin-left: 20rpx;" @click="showType=true">
				<view style="display: flex;	align-items: center;justify-content: space-between;">
					<view style="margin-right:40rpx;">{{yjName}}</view>
					<u-icon name="arrow-down" color="#999"></u-icon>
				</view>
				<!-- <picker :range="yjTypeList" :value="index2" range-key="label" @confirm="bindType"></picker> -->
				<u-picker @cancel='showType=false' :show="showType" ref="uPicker" :columns="yjTypeList"
					@confirm="bindType" keyName='label'></u-picker>
			</view>
			<!-- <view class="title">
				导出明细
			</view> -->
		</view>
		<view class="listrefor bg2">

			<view class="flex_item">
				<view class="text1">左区业绩</view>
				<view class="text2">{{ achieveData.leftAchieve || 0 }}</view>
			</view>
			<view class="flex_item" style="cursor: pointer;" @click="goDetail(1)">
				<view class="text1">左区血缘业绩</view>
				<view class="text2">{{ achieveData.leftDirectAchieve  || 0 }}</view>
			</view>
			<view class="flex_item">
				<view class="text1">左区人数</view>
				<view class="text2">{{ achieveData.leftCoun || 0 }}</view>
			</view>
		</view>

		<view class="listrefor bg3">
			<view>
				<view class="text1">血缘业绩</view>
				<view class="text2">{{ achieveData.directAchieve || 0 }}</view>
			</view>
		</view>
		<view class="listrefor bg2">

			<view class="flex_item">
				<view class="text1">右区业绩</view>
				<view class="text2">{{ achieveData.rightAchieve || 0 }}</view>
			</view>

			<view class="flex_item" style="cursor: pointer;" @click="goDetail(2)">
				<view class="text1">右区血缘业绩</view>
				<view class="text2">{{ achieveData.rightDirectAchieve  || 0 }}</view>
			</view>
			<view class="flex_item">
				<view class="text1">右区人数</view>
				<view class="text2">{{ achieveData.rightCount || 0 }}</view>
			</view>
		</view>


	</view>

</template>

<script>
	import {
		getPlaceNewAddAchieve,
		getYjList
	} from "@/config/distribute.js";
	export default {
		
		data() {
			return {
				index: 0,
				show: false,
				achieveData: {},

				whatMounth: '',
				yjType: 1,
				yjName: "全部",
				showType: false,
				selMounthList: [],
				yjTypeList: [],
				yearShow:false,
				whatYear:"",
				selYearList:[{
					value: 0,
					label: new Date().getFullYear()-1,
				},{
					value: 1,
					label: new Date().getFullYear(),
				}],
				mounthList: [{
						value: 1,
						label: 1 + '月',
					},
					{
						value: 2,
						label: 2 + '月',
					},
					{
						value: 3,
						label: 3 + '月',
					},
					{
						value: 4,
						label: 4 + '月',
					},
					{
						value: 5,
						label: 5 + '月',
					},
					{
						value: 6,
						label: 6 + '月',
					},
					{
						value: 7,
						label: 7 + '月',
					},
					{
						value: 8,
						label: 8 + '月',
					},
					{
						value: 9,
						label: 9 + '月',
					},
					{
						value: 10,
						label: 10 + '月',
					},
					{
						value: 11,
						label: 11 + '月',
					},
					{
						value: 12,
						label: 12 + '月'
					},
				],
			}
		},
		created() {
			
			this.getMounth()
			this.getYjList()
			setTimeout(() => {
				this.getPlaceNewAddAchieve()
			}, 50)
		},
		methods: {
			
			goDetail(index) {
				uni.navigateTo({
					url:'/pages/performanceEchart/index?ifDetail='+index
				})
			},
			getYjList() {
				getYjList().then(res => {
					this.yjTypeList = [res.data]
				})
			},
			changeYear(e){
				this.whatYear =  this.selYearList[e.detail.value].label
				this.getPlaceNewAddAchieve()
			},
			bindPickerChange(e) {
				this.whatMounth = e.detail.value + 1
				this.getPlaceNewAddAchieve()
			},
			bindType(e) {
				this.yjType = e.value[0].value
				this.yjName = e.value[0].label
				this.showType = false
				this.getPlaceNewAddAchieve()
			},
			// 获取当前年/月
			getMounth() {
				this.whatMounth = new Date().getMonth() + 1
				let selMounth = []
				this.mounthList.forEach((item) => {
					// if (item.value <= this.whatMounth) {
						// selMounth.push(item)
					// }
					selMounth.push(item)
				})
				this.selMounthList = selMounth
				this.whatYear = new Date().getFullYear()
				
			},
			getPlaceNewAddAchieve() {
				getPlaceNewAddAchieve({
					monthType: this.whatMounth,
					achievementType: this.yjType,
					year:this.whatYear
				}).then((res) => {
					this.achieveData = res.data;
				});
			}

		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-picker {
		width: 100%;
	}

	.select-flexs {

		border: 1rpx solid #EEEEEE;
		border-radius: 15rpx;
		// width: 232rpx;
		padding: 20rpx 19rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flexs {
		display: flex;
		// justify-content: space-between;
		border-radius: 30rpx 30rpx 0 0;
		background-color: #fff;
	}

	.title {
		padding: 10rpx 0;
		margin-top: 10rpx;
	}

	.width-auto {
		background-color: #fff;
		padding: 0 22rpx;
		width: 690rpx;
		margin: 0 auto;
		padding-bottom: 20rpx;
	}

	.listrefor {
		color: #FFFFFF;
		border-radius: 10rpx;
		padding: 32rpx 21rpx;
		margin-top: 25rpx;
		display: flex;
		justify-content: space-between;

		.flex_item:nth-child(1) {
			width: 40%;
		}

		.flex_item:nth-child(2) {
			width: 35%;
		}

		.flex_item:nth-child(3) {
			width: 25%;
		}

		.text1 {
			font-size: 28rpx;
		}

		.text2 {
			font-size: 30rpx;
			font-weight: bold;
			margin-top: 30rpx;
		}
	}

	.bg1 {
		background: linear-gradient(180deg, #FC7C7C 0%, #F65757 100%);
	}

	.bg2 {
		background: linear-gradient(180deg, #FF9354 0%, #FF7F36 100%);
	}

	.bg3 {
		background: linear-gradient(180deg, #677AF9 0%, #697BF2 100%);
	}
</style>