shunfengche-sfd/echarts/setting/xyf.vue

<template>
	<view class="background: #F5F5F5;">
		<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;">
						<EcChart v-if="optionReady" :chartOption="option" width="100%" height="100%" />
						<!-- <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: #00c18a;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;">
						<EcChart v-if="optionReady2" :chartOption="option2" width="100%" height="100%" />
						<!-- <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 v-if="item.type==2">{{item.reason}}扣分</view>
								<view 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;">
						<EcChart v-if="optionReady3" :chartOption="option3" width="100%" height="100%" />
						<!-- <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="pay_btns" @tap="yesappeal()">确认申诉</view>
					<view class="list_box" @click="bindTo('/my/appeal/record')">
						<view class="box_left">查看历史申诉记录</view>
						<u-icon name="arrow-right"></u-icon>
					</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 '@/echarts/uni-ec-canvas/uni-ec-canvas';
	// import * as echarts from '@/echarts/uni-ec-canvas/echarts.min.js';
	import EcChart from '@/echarts/EcChart.vue'
	import { waitForGlobalImages } from '@/utils/globalImageLoader'

	export default {
		components: {
			empty,
			// uniEcCanvas
			EcChart
		},
		data() {
			return {
				list: [],
				page: 1,
				limit: 10,
				pages: 1,
				// ec: {
				// 	option: {}
				// },
				// ec2: {
				// 	option: {}
				// },
				// ec3: {
				// 	option: {}
				// },
				optionReady: false,
				option: {},
				optionReady2: false,
				option2: {},
				optionReady3: false,
				option3: {},
					  
				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: 1,
				}
				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 = '低'
							}
							console.log(res.data.score, 'res.data.score');
							this.$nextTick(() => {
								// this.$refs.canvas.init(this.initChart);
								// this.$refs.canvas3.init(this.initChart3);
								this.option = {}
								this.option3 = {}
								this.setOption(res.data.score)
								this.setOption3(res.data.score)
							})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 折线图 数据
			getFilledScore() {
				let data2 = {
					isDriver: 1,
					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.option2 = {}
							this.setOption2()
							// this.$refs.canvas2.init(this.initChart2);
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			dianji(value) {
				this.yvefen = value
				this.optionReady2 = false;
				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: [
			// 			{
			// 				name: '',
			// 				type: 'bar',
			// 				roundCap: true,
			// 				showBackground: true,
			// 				backgroundStyle: {
			// 					color: '#e8fbf6',
			// 				},
			// 				data: [value],
			// 				coordinateSystem: 'polar',
			// 				itemStyle: {
			// 					normal: {
			// 						color: '#00c18a'
			// 					},
			// 				},
			// 			},
			// 		],
			// 	};
			// 	chart.setOption(option);
			// 	return chart;
			// },
			setOption(value) {
			  const max = 100
			  const rate = Math.round((value * 100) / max)
			  this.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: [{
				  name: '',
				  type: 'bar',
				  roundCap: true,
				  showBackground: true,
				  backgroundStyle: {
					color: '#e8fbf6'
				  },
				  data: [value],
				  coordinateSystem: 'polar',
				  itemStyle: {
					normal: {
					  color: '#00c18a'
					}
				  }
				}]
			  }
		
			  this.optionReady = true // 让组件渲染
			},
			setOption2 () {
				this.option2 = {
				  grid: {
					top: '15%',
					left: '2%',
					right: '5%',
					bottom: '3%',
					containLabel: true,
				  },
				  tooltip: {
					trigger: 'axis',
					axisPointer: {
					  type: 'line'
					},
					backgroundColor: 'rgba(0, 193, 138, 0.1)',
					borderColor: '#00c18a',
					textStyle: {
					  color: '#333',
					},
				  },
				  xAxis: {
					type: 'category',
					data: this.months,
					axisLine: {
					  lineStyle: {
						color: 'rgba(60,132,163,0.4)',
					  }
					},
					axisTick: {
					  show: false
					},
					axisLabel: {
					  interval: 0,
					  color: '#333',
					  fontSize: 12,
					  rotate: 45,
					},
					boundaryGap: false
				  },
				  yAxis: {
					type: 'value',
					max: 100,
					min: 1,
					axisTick: {
					  show: false
					},
					axisLine: {
					  show: false
					},
					axisLabel: {
					  color: '#333',
					  fontSize: 12,
					  formatter: value => `${value}`
					},
					splitLine: {
					  show: true,
					  lineStyle: {
						color: '#999'
					  }
					}
				  },
				  series: [
					{
					  name: '信用分',
					  type: 'line',
					  smooth: true,
					  areaStyle: {
						color: {
						    type: 'linear',
						    x: 0, y: 0, x2: 0, y2: 1,
						    colorStops: [
						      { offset: 0, color: '#00c18a' },
						      { offset: 1, color: 'rgba(199, 255, 239,0.4)' }
						    ]
						}
					  },
					  lineStyle: {
						width: 2,
						color: '#00c18a'
					  },
					  showSymbol: true,
					  symbol: 'circle',
					  symbolSize: 13,
					  itemStyle: {
						color: '#00c18a'
					  },
					  data: this.scores
					}
				  ]
				}
				this.optionReady2 = true // 让组件渲染
			},
			// 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: "#00c18a",
			// 				   },
			// 				   {
			// 					  offset: 1,
			// 					  color: "rgba(199, 255, 239,0.4)",
			// 				   },
			// 				]),
			// 			 },
			// 			 lineStyle: {
			// 				width: 2,
			// 				color: "#00c18a",
			// 			 },
			// 			 // 设置节点样式
			// 			 showSymbol: true,
			// 			 symbol: 'circle', // 可以选择 circle, diamond, pin 等
			// 			 symbolSize: 13, // 节点大小
			// 			 itemStyle: {
			// 				color: "#00c18a", // 节点颜色
			// 			 },
			// 			 data: this.scores
			// 		  },
			// 	   ]
			// 	};
			// 	chart.setOption(option);
			// 	return chart;
			// },
			setOption3 (value) {
				this.option3 = {
					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: '#e8fbf6',
									borderWidth: 1,
									borderColor: '#e8fbf6',
									barBorderRadius: 10,
								},
							},
							label: {
								show: false,
							},
						},
						{
							name: '匹配度',
							type: 'bar',
							itemStyle: {
								normal: {
									barBorderRadius: 10,
									color: '#00c18a',
								},
							},
							barWidth: 10,
							data: [value],
						},
					],
				};
				this.optionReady3 = true // 让组件渲染
			}
			// 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: '#e8fbf6',
			// 						borderWidth: 1,
			// 						borderColor: '#e8fbf6',
			// 						barBorderRadius: 10,
			// 					},
			// 				},
			// 				label: {
			// 					show: false,
			// 				},
			// 			},
			// 			{
			// 				name: '匹配度',
			// 				type: 'bar',
			// 				itemStyle: {
			// 					normal: {
			// 						barBorderRadius: 10,
			// 						color: '#00c18a',
			// 					},
			// 				},
			// 				barWidth: 10,
			// 				data: [this.jinduvlue.score],
			// 			},
			// 		],
			// 	};
			// 	chart.setOption(option);
			// 	return chart;
			// },
		},
	}
</script>

<style lang="scss">
	.time-boxs {
		border: 1rpx #00c18a solid;
		background: #e8fbf6;
		color: #00c18a;
	}
	.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: #00c18a;
		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>