uniapp-shunfengche/echarts/setting/xyf.vue

<template>
	<view>
		<view class="list flex justify-center">
			<view class="list-box">
				<view class="list-box-item">
					<view class="list flex justify-between">
						<view class="title">
							我的信用分
						</view>
						<view style="color: #999; font-size: 23rpx;line-height: 40rpx;">
							更新时间：{{jinduvlue.symbol}}{{ jinduvlue.time }}
						</view>
					</view>
					<view style="width: 100%; height: 400rpx;">
						<uni-ec-canvas class="uni-ec-canvas" id="line-chart" canvas-id="multi-charts-line" :ec="ec" ref="canvas"></uni-ec-canvas>
					</view>
					<view class="list flex justify-between">
						<view class="title" style="color: #fe6b01;font-size: 23rpx;">
							↑ 比较上个月 {{ jinduvlue.diff }} 分
						</view>
						<view style="color: #999; font-size: 23rpx;line-height: 40rpx;">
							满分100分
						</view>
					</view>
				</view>
				<view class="list-box-item">
					<view class="list flex justify-between">
						<view class="title">
							信用分趋势
						</view>
						<view class="flex" style="color: #999; font-size: 23rpx;line-height: 40rpx;">
							<view @tap="dianji(6)" :class="yvefen === 6 ? 'time-boxs' : 'time-box'"
								style="padding: 5rpx 18rpx; border-radius: 8rpx;">
								6个月</view>
							<view @tap="dianji(12)"
								:class="yvefen === 6 ? 'time-box' : 'time-boxs'"
								style="padding: 5rpx 18rpx; border-radius: 8rpx; margin-left: 20rpx;">
								12个月</view>
						</view>
					</view>
					<view style="width: 100%; height: 400rpx;">
						<uni-ec-canvas class="uni-ec-canvas" id="line-chart2" canvas-id="multi-charts-line2" :ec="ec2" ref="canvas2"></uni-ec-canvas>
					</view>
				</view>

				<view class="list-box-item">
					<view class="list flex justify-between">
						<view class="title">
							信用记录
						</view>
						<view style="color: #999; font-size: 23rpx;line-height: 40rpx;">
							查看全部
						</view>
					</view>
					<view v-for="(item,index) in list.slice(0, 3)" :key="index">

						<view class="flex" style="padding: 30rpx 0; margin: 20rpx 0;">
							<view>
								<image v-if="globalImages" :src="globalImages + 'images/credit/chidao2.png'"
									style="width: 80rpx;height: 80rpx;margin-left: 30rpx;" mode=""></image>
							</view>
							<view style="margin-left: 30rpx; line-height: 40rpx;">
								<view style="color: #00c18a;" v-if="item.type==2">{{item.reason}}扣分</view>
								<view style="color: #f56c6c;" v-else>{{item.reason}}加分</view>
								<view>
									订单号：{{ item.ordersNo }}
								</view>
								<view style="font-size: 23rpx; color: #999;">
									{{item.createTime}}
								</view>
							</view>
							<view style="color: #00c18a;position: absolute; right: 130rpx;">
								<view class="list-box-item-h" v-if="item.type==2">
									- {{item.lastCreditScore - item.nextCreditScore}} 分
								</view>
								<view class="list-box-item-hs" v-else>
									+ {{item.nextCreditScore - item.lastCreditScore}} 分
								</view>
							</view>
						</view>

						<!-- <view class="list-box-item-h" v-if="item.type==2">
							扣分：{{item.lastCreditScore - item.nextCreditScore}}
						</view>
						<view class="list-box-item-hs" v-else>
							加分：{{item.nextCreditScore - item.lastCreditScore}}
						</view>
						<view class="list-box-item-title" v-if="item.type==2">
							信用分变化：当前{{item.lastCreditScore}}分,扣除{{item.lastCreditScore - item.nextCreditScore}}分,最新信用分{{item.nextCreditScore}}分
						</view>
						<view class="list-box-item-title" v-else>
							信用分变化：当前{{item.lastCreditScore}}分,增加{{item.nextCreditScore - item.lastCreditScore}}分,最新信用分{{item.nextCreditScore}}分
						</view>
						<view class="list-box-item-title">
							原因：{{item.reason}}
						</view>
						<view class="list-box-item-title">
							修改时间：{{item.createTime}}
						</view> -->
					</view>
				</view>
				<view class="list-box-item">
					<view class="title">
						评分规则
					</view>
					<view style="margin-top: 20rpx;">
						扣分项
					</view>
					<view class="boxs">
						<view class="flex align-center"
							style="background: #ffe9e9; border-radius: 14rpx; padding: 30rpx 0; margin: 20rpx 0;">
							<view>
								<image v-if="globalImages" :src="globalImages + 'images/credit/shuangyve.png'"
									style="width: 25rpx;height: 25rpx;margin-left: 30rpx;" mode=""></image>
							</view>
							<view style="margin-left: 30rpx; line-height: 40rpx;">
								<view> 爽约</view>
							</view>
							<view style="color: #f56c6c;position: absolute; right: 130rpx;">
								-10分
							</view>
						</view>
						<view class="flex align-center "
							style="background: #ffe9e9; border-radius: 14rpx; padding: 30rpx 0; margin: 20rpx 0;">
							<view>
								<image v-if="globalImages" :src="globalImages + 'images/credit/chidao.png'"
									style="width: 25rpx;height: 25rpx;margin-left: 30rpx;" mode=""></image>
							</view>
							<view style="margin-left: 30rpx; line-height: 40rpx;">
								<view>迟到</view>
							</view>
							<view style="color: #f56c6c;position: absolute; right: 130rpx;">
								-5分
							</view>
						</view>
						<view class="flex align-center"
							style="background: #ffe9e9; border-radius: 14rpx; padding: 30rpx 0; margin: 20rpx 0;">
							<view>
								<image v-if="globalImages" :src="globalImages + 'images/credit/cehliang.png'"
									style="width: 25rpx;height: 25rpx;margin-left: 30rpx;" mode=""></image>
							</view>
							<view style="margin-left: 30rpx; line-height: 40rpx;">
								<view>损坏车辆</view>
							</view>
							<view style="color: #f56c6c;position: absolute; right: 130rpx;">
								-3分
							</view>
						</view>
						<view class="flex align-center"
							style="background: #ffe9e9; border-radius: 14rpx; padding: 30rpx 0; margin: 20rpx 0;">
							<view>
								<image v-if="globalImages" :src="globalImages + 'images/credit/xiyan.png'"
									style="width: 25rpx;height: 25rpx;margin-left: 30rpx;" mode=""></image>
							</view>
							<view style="margin-left: 30rpx; line-height: 40rpx;">
								<view>车内吸烟</view>
							</view>
							<view style="color: #f56c6c;position: absolute; right: 130rpx;">
								-2分
							</view>
						</view>
					</view>
					<view style="margin-top: 20rpx;">
						加分项
					</view>
					<view class="boxs">
						<view class="flex align-center"
							style="background: #e8fbf6; border-radius: 14rpx; padding: 30rpx 0; margin: 20rpx 0;">
							<view>
								<image v-if="globalImages" :src="globalImages + 'images/credit/sijihaoping.png'"
									style="width: 25rpx;height: 25rpx;margin-left: 30rpx;" mode=""></image>
							</view>
							<view style="margin-left: 30rpx; line-height: 40rpx;">
								<view>司机好评</view>
							</view>
							<view style="color: #00c18a;position: absolute; right: 130rpx;">
								+1分
							</view>
						</view>
						<view class="flex align-center "
							style="background: #e8fbf6; border-radius: 14rpx; padding: 30rpx 0; margin: 20rpx 0;">
							<view>
								<image v-if="globalImages" :src="globalImages + 'images/credit/anshi.png'"
									style="width: 25rpx;height: 25rpx;margin-left: 30rpx;" mode=""></image>
							</view>
							<view style="margin-left: 30rpx; line-height: 40rpx;">
								<view>按时支付车费</view>
							</view>
							<view style="color: #00c18a;position: absolute; right: 130rpx;">
								+2分
							</view>
						</view>
					</view>
				</view>
				<view class="list-box-item">
					<view class="title">
						匹配优先级
					</view>
					<view class="flex align-center justify-between" style="margin-top: 20rpx;">
						<view>
							当前优先级： {{ jinduz }}
						</view>
						<view>
							{{ jinduvlue.score }}分
						</view>
					</view>
					<view style="width: 100%; height: 70rpx;">
						<uni-ec-canvas class="uni-ec-canvas" id="line-chart3" canvas-id="multi-charts-line3" :ec="ec3" ref="canvas3"></uni-ec-canvas>
					</view>
					<view class="flex align-center add_name" style="line-height: 60rpx;">
						<view class="orgin"></view>80 — 100分：高优先级，优先匹配优质订单
					</view>
					<view class="flex align-center add_name" style="line-height: 60rpx;">
						<view class="orgin"></view>60 — 80分：中优先级，正常匹配订单
					</view>
					<view class="flex align-center add_name" style="line-height: 60rpx;">
						<view class="orgin"></view>0 — 60分：低优先级，订单匹配受限
					</view>
					<view class="flex "
						style="background: #fcf6ec; border-radius: 14rpx; padding: 20rpx 0; margin: 20rpx 0;">
						<view style="margin-top: 10rpx;">
							<image v-if="globalImages" :src="globalImages + 'images/credit/jianyi.png'"
								style="width: 25rpx;height: 35rpx;margin-left: 30rpx;" mode=""></image>
						</view>
						<view style="margin-left: 20rpx; line-height: 40rpx;">
							<view>提升建议</view>
							<view style="color: #999; font-size: 24rpx;">
								准时接单、保持良好服务态度可提高信用分
							</view>
						</view>
					</view>
				</view>
				<view class="list-box-item">
					<view class="title">
						申诉通道
					</view>
					<textarea placeholder="如对扣分有异议，可在扣分后7天内提交申诉，平台将在3个工作日内处理。申诉结果将通过信息中心通知您。" v-model="content"
						class="feedback-textare" />
					<view class="list_box" @click="bindTo('/my/appeal/record')">
						<view class="box_left">查看历史申诉记录</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="pay_btns" @tap="yesappeal()">确认申诉</view>
				</view>
			</view>
		</view>
		<empty v-if="list.length==0 && scores.length==0 && scores.length==0" />
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	import uniEcCanvas from '../uni-ec-canvas/uni-ec-canvas';
	import * as echarts from '..//uni-ec-canvas/echarts.min.js';
	import { waitForGlobalImages } from '@/utils/globalImageLoader'

	export default {
		components: {
			empty,
			uniEcCanvas
		},
		data() {
			return {
				list: [],
				page: 1,
				limit: 10,
				pages: 1,
				ec: {
					lazyLoad: true,
					option: {}
				},
				ec2: {
					lazyLoad: true,
					option: {}
				},
				ec3: {
					lazyLoad: true,
					option: {}
				},
				globalImages: '',
				content: '',
				yvefen: 6,
				jinduvlue: {},
				jinduz: '',
				months: [],
				scores: [],
			};
		},
		onLoad() {
			waitForGlobalImages().then((path) => {
			    console.log('✅ 全局图片路径:', path)
			    this.globalImages = path
			  })
			uni.showLoading({
				title: '加载中...'
			})
			this.getList()
			this.getScore()
			this.getFilledScore()
			
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.getList()
		},
		//上拉加载更多
		onReachBottom() {
			if (this.page < this.pages) {
				this.page += 1
				this.getList()
			}
		},
		methods: {
			// 进度条环形图数据
			getScore() {
				let data = {
					isDriver: 0,
				}
				this.$Request.getT('/app/creditRecord/getScore', data).then(res => {
					if (res.code == 0) {
							this.jinduvlue = res.data
							if (res.data.score >= 80) {
								this.jinduz = '高'
							} else if (score >= 60) {
								this.jinduz = '中'
							} else {
								this.jinduz = '低'
							}
							this.$nextTick(() => {
								this.$refs.canvas.init(this.initChart);
								this.$refs.canvas3.init(this.initChart3);
							})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 折线图 数据
			getFilledScore() {
				let data2 = {
					isDriver: 0,
					several: this.yvefen
				}
				this.$Request.getT('/app/creditRecord/getFilledScore', data2).then(res => {
					if (res.code == 0) {
						this.months = Object.keys(res.data); // 获取所有月份
						this.scores = Object.values(res.data); // 获取所有分数
						this.$nextTick(() => {
							this.$refs.canvas2.init(this.initChart2);
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			dianji(value) {
				this.yvefen = value
				this.getFilledScore()
			},
			// 确认申诉
			yesappeal() {
				const data = {
					reason: this.content,
					// recordId: ''
				}
				this.$Request.postT("/app/appeal/insertAppeal", data).then(res => {
					if (res.code == 0) {
						this.content = ''
						uni.showToast({
							title: '申诉成功',
							icon: 'success',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.message || '申诉失败',
							icon: 'none',
							duration: 2000
						})
					}
				});
			},
			bindTo(name) {
				let token = this.$queue.getData("token");
				if (token) {
					uni.navigateTo({
						url: name
					})
				}
			
			},
			//获取信用列表
			getList() {
				let data = {
					page: this.page,
					limit: this.limit,
					isDriver: 0,
				}
				this.$Request.getT('/app/creditRecord/getCreditRecordList', data).then(res => {
					uni.stopPullDownRefresh()
					uni.hideLoading()
					if (res.code == 0) {
						this.pages = res.data.pages
						if (this.page == 1) {
							this.list = res.data.records
						} else {
							this.list = [...this.list, ...res.data.records]
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			initChart(canvas, width, height, canvasDpr) {
				let chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				});
				let max = 100;
				let value = this.jinduvlue.score;
				
				let rate = Math.round((value * 100) / max);
				canvas.setChart(chart);
				let option = {
					title: [
						{
							text: '{b|' + rate + '}\n'+'{a|良好}',
							show: true,
							x: 'center',
							y: 'center',
							textStyle: {
								rich: {
									a: {
										fontSize: 17,
										color: '#999',
										padding: [0, 0,5, 0],
									},
									b: {
										fontSize: 35,
										color: '#333333',
										fontFamily: 'alibabaPuhuiM',
										fontWeight: 'bold'
									},
								},
							},
						},
					],
					polar: {
						center: ['50%', '50%'],
						radius: ['60%', '75%'],
					},
					angleAxis: {
						max: max,
						show: false,
					},
					radiusAxis: {
						type: 'category',
						show: true,
						axisLabel: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
					},
					series: [
						{
							type: 'bar',
							roundCap: true,
							showBackground: true,
							backgroundStyle: {
								color: '#fee8d9',
							},
							data: [value],
							coordinateSystem: 'polar',
							itemStyle: {
								normal: {
									color: '#fe6b01'
								},
							},
						},
					],
				};
				chart.setOption(option);
				return chart;
			},
			initChart2(canvas, width, height, canvasDpr) {
				let chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				});
				canvas.setChart(chart);
				let option = {
				   grid: {
					  top: '15%',
					  left: '2%',
					  right: '5%',
					  bottom: '3%',
					  containLabel: true,
				   },
				   tooltip: {
					  trigger: "axis",
					  axisPointer: {
						 type: "line",
					  },
					  backgroundColor: "rgba(254, 107, 1, 0.1)",
					  borderColor: "#fe6b01",
					  textStyle: {
						 color: "#333",
					  },
				   },
				   xAxis: {
					  type: "category",
					  data: this.months,
					  axisLine: {
						 lineStyle: {
							color: "rgba(60,132,163,0.4)", // x轴线颜色
						 },
					  },
					  axisTick: {
						 show: false, // 是否显示x轴的刻度
					  },
					  axisLabel: {
						 interval: 0,
						 color: "#333",
						 fontSize: 12,
						 rotate: 45,
					  },
					  boundaryGap: false, // true折线图以x轴刻度为中心点  false折线图折线从头开始
				   },
				   yAxis: {
					  type: "value",
					  max: 100,
					  min: 1,
					  axisTick: {
						 show: false,
					  },
					  axisLine: {
						 show: false,
					  },
					  axisLabel: {
						 color: "#333",
						 fontSize: 12,
						 formatter: function (value) {
							return value + "";
						 }
					  },
					  splitLine: {
						 show: true,
						 lineStyle: {
							// type: "dashed",
							color: "#999",
						 },
					  },
				   },
				   series: [
					  {
						 name: "信用分",
						 type: "line",
						 smooth: true,
						 areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							   {
								  offset: 0,
								  color: "#fe6b01",
							   },
							   {
								  offset: 1,
								  color: "rgba(254, 107, 1,0)",
							   },
							]),
						 },
						 lineStyle: {
							width: 2,
							color: "#fe6b01",
						 },
						 // 设置节点样式
						 showSymbol: true,
						 symbol: 'circle', // 可以选择 circle, diamond, pin 等
						 symbolSize: 13, // 节点大小
						 itemStyle: {
							color: "#fe6b01", // 节点颜色
						 },
						 data: this.scores
					  },
				   ]
				};
				chart.setOption(option);
				return chart;
			},
			initChart3(canvas, width, height, canvasDpr) {
				let chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				});
				
				canvas.setChart(chart);
				let option = {
					grid: {
						top: '3%',
						bottom: '3%',
						left: '0%',
						right: '0%',
					},
					xAxis: {
						show: false,
						type: 'value',
						boundaryGap: [0, 0],
					},
					yAxis: [
						{
							type: 'category',
							data: [''],
							axisLine: { show: false },
							axisTick: [
								{
									show: false,
								},
							],
						},
					],
					series: [
						{
							name: '背景',
							type: 'bar',
							barWidth: 10,
							barGap: '-100%',
							data: [100],
							itemStyle: {
								normal: {
									color: '#fee8d9',
									borderWidth: 1,
									borderColor: '#fee8d9',
									barBorderRadius: 10,
								},
							},
							label: {
								show: false,
							},
						},
						{
							name: '匹配度',
							type: 'bar',
							itemStyle: {
								normal: {
									barBorderRadius: 10,
									color: '#fe6b01',
								},
							},
							barWidth: 10,
							data: [this.jinduvlue.score],
						},
					],
				};
				chart.setOption(option);
				return chart;
			},
		},
	}
</script>

<style lang="scss">
	.time-boxs {
		border: 1rpx #fe6b01 solid;
		background: #fee8d9;
		color: #fe6b01;
	}
	.time-box {
		border: 1rpx #999 solid;
		background: #fff;
		color: #999;
	}
	page {
		background: #F5F5F5;
	}

	.title {
		font-size: 32rpx;
		font-family: PingFang SC;
		color: #333333;
	}

	.list {
		width: 100%;

		.list-box {
			width: 686rpx;

			.list-box-item {
				width: 100%;
				// height: 200rpx;
				border-radius: 16rpx;
				background-color: #ffffff;
				margin-top: 20rpx;
				padding: 30rpx 30rpx;
			}

			.list-box-item-h {
				color: red;
				font-weight: bold;
			}

			.list-box-item-hs {
				color: green;
				font-weight: bold;
			}

			.list-box-item-title {
				margin-top: 10rpx;
				color: #999999;
			}

		}
	}

	.add_name {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #1F1F1F;
	}

	.orgin {
		width: 16rpx;
		height: 16rpx;
		background: #fe6b01;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.feedback-textare {
		height: 200upx;
		font-size: 24upx;
		line-height: 50upx;
		width: 100%;
		box-sizing: border-box;
		padding: 20upx 20upx 0;
		border: #e4e7ed 1rpx solid;
		background: #f5f5f5;
		border-radius: 15rpx;
		margin-top: 20rpx;
	}

	.pay_btns {
		width: 90%;
		margin: 0 auto 40rpx;
		text-align: center;
		background: #fe6b01;
		height: 80rpx;
		border-radius: 16rpx;
		color: #ffffff;
		line-height: 80rpx;
		margin-top: 20rpx;
	}

	.list_box {
		display: flex;
		height: 110rpx;
		margin: 0 30rpx;
	}

	.box_left {
		flex: 1;
		display: flex;
		justify-content: left;
		align-items: center;
	}
</style>