RedDragonfly/pages/dealer/dealerDetails.vue

<template>
	<view class="dealerDetails">
		<view class="top">
			<view class="head">
				经销商详细信息
			</view>
			<view class="content">
				<view class="">
					经销商名称: {{dealer.name}}
				</view>
				<view class="">
					所属地区: {{dealer.region}}
				</view>
				<view class="">
					负责人姓名: {{dealer.respName}}
				</view>
				<view class="">
					负责人电话: {{dealer.respPhone}}
				</view>
			</view>
		</view>
		<view class="bom">
			<view class="pie">
				<view class="text">
					<view class="left" @click="unit = !unit">
						{{ unit ? '单位: 箱' : '单位: 吨'}}
					</view>
					<view class="center">
						{{date}}
					</view>
					<view class="right">
						<picker mode="date" fields="month" :value="date" @change="bindDateChange">
							<view class="uni-input">月份</view>
						</picker>
					</view>
				</view>
				<qiun-data-charts type="pie" :opts="opts" :tapLegend='false' :chartData="data" />
				<view class="legend" v-if="chartData">
					<view class="btn" v-for="(v,i) in chartData" :key="i" :style="{backgroundColor: opts.color[i]}"
						@click="$goBack(2,'/pages/dealer/parric?name='+ v.typeName + '&date=' + date + '&dealerName=' + dealer.name)">
						<view class="">
							{{v.typeName}}
						</view>
						<view class="">
							{{ unit ? v.sendBox : v.ton.toFixed(2) }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {detail,purchase} from '../../api/dealer.js'
	export default {
		data() {
			return {
				// 月份
				date: this.getCurrentMonth(),
				unit: true,
				dealer: '',
				id:'',
				name: '',
				chartData: [],
				data: {
					series: [{
						data: [{}]
					}]
				},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					dataPointShape: false,
					dataLabel: false,
					padding: [5, 5, 5, 5],
					enableScroll: false,
					legend: {
						show: false
					},
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			};
		},

		onLoad(opites) {
			this.id = opites.id
			this.name = opites.name
			this.getData()
		},
		mounted() {
			this.getStock()
		},
		methods: {
			// 获取经销商详情
			async getData(){
				let res = await detail({
					Id: this.id,
					accessToken:  uni.getStorageSync('tokenInfo'),
					account: uni.getStorageSync('account')
				})
				this.dealer = res.data.data
			},
			// 获取进货数据
			async getStock(){
				uni.showLoading({
					title: '加载中'
				});
				let res = await purchase({
					name: this.name,
					month: this.date,
					accessToken:  uni.getStorageSync('tokenInfo'),
					account: uni.getStorageSync('account')
				})
				uni.hideLoading();
				this.chartData = res.data.list
				this.setdata(res.data.list)
			},
			
			// 更改时间
			bindDateChange(e) {
				this.date = e.target.value
				this.getStock()
			},
			//整理数据
			setdata(list) {
				let that = this
				let Data = []
				list.forEach(v => {
					Data.push({
						name: v.typeName,
						value: v.sendBox
					})
				})
				that.data.series = [{
					data: Data
				}]
			},
			// 时间格式化
			getCurrentMonth() {
				const date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				month = month > 9 ? month : '0' + month
				return `${year}-${month}`
			}
		}
	}
</script>

<style lang="scss">
	.dealerDetails {
		height: 100%;

		.top {
			height: 240rpx;
			padding: 30rpx;
			border-bottom: 1rpx solid #cecece;
			text-align: center;

			.head {
				width: 50%;
				margin: 0 auto;
				background-color: #9f75b5;
				color: #fff;
				margin-bottom: 30rpx;
				padding: 8rpx 0;
				border-radius: 4rpx;
			}

			.content {
				text-align: left;
				margin-left: 25%;

				view {
					margin-bottom: 10rpx;
				}
			}
		}

		.bom {
			height: calc(100% -240rpx);
			padding: 30rpx;

			.pie {
				height: 50%;

				.text {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;
					.left{
						color: #4f9ce3;
					}
					.center{
						
					}
					.right{
						width: 120rpx;
						background-color: #f6b46a;
						border-radius: 50rpx;
						padding: 10rpx 0;
						text-align: center;
						color: #fff;
					}
				}

				.legend {
					margin-top: 40rpx;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;

					.btn {
						padding: 5rpx 30rpx;
						text-align: center;
						color: #fff;
						border-radius: 10rpx;
						margin-right: 20rpx;
						margin-top: 20rpx;
						&:last-child {
							margin-right: 0;
						}
					}
				}
			}
		}
	}
</style>