examTeamApp/pages/score/score.vue

<template>
	<view class="content">
		<!-- 头部 -->
		<headerIndex @getAciveCity="getAciveCity"></headerIndex>
		<!-- 估分 -->
		<view class="box">
			<view class="title bold">本次估分成绩为</view>
			<view class="charts mt-15">
				<qiun-data-charts type="arcbar" :chartData="chartData" />
			</view>
			<view class="name">{{score?score:'--'}}</view>
			<view class="btn history" @click="navTo('/pages/score/history')">估分历史</view>
		</view>
		<!--  -->
		<view v-if="selectllist.length">
			<view v-for="(item,index) in selectllist">
				<view class="titleName bold mt-15 ml-15 size18">{{item.name}}</view>
				<view class="indexCarList">
					<view class="card" v-for="(ite,ind) in item.list">
						<view class="title">
							<view class="name">{{ite.name}}</view>
							<view class="right" v-if="ite.is_choice!=0" @click="handleHistory(ite)">选择项目</view>
						</view>
						<!-- 列表 -->
						<view class="item3" v-for="(it,ik) in ite.list" :key="ik" v-if="!isresult">
							<view class="name">{{it.name}}</view>
							<view class="weight">
								<view class="input">
									<!-- 整数类型 -->
									<input type="number" v-model="it.value" confirm-type="done" placeholder="请输入"
										v-if="it.type ==1" />
									<!-- 小数类型 -->
									<input type="digit" v-model="it.value" confirm-type="done" placeholder="请输入"
										maxlength="4" v-else-if="it.type ==2||it.type ==3" />
									<!-- 分秒类型 -->
									<picker mode="multiSelector" :range="timeList" @change="bindTimeChange($event,it)"
										v-else-if="it.type ==4">
										<view>{{it.value?it.value:'请选择'}}</view>
										<uni-icons type="down" color="#999" size="20" class="down"></uni-icons>
									</picker>

									<uni-icons type="clear" color="#999" v-if="it.value &&it.type !=4"
										@click="it.value=''" size="20"></uni-icons>
								</view>
								<text>{{it.unit}}</text>
							</view>
						</view>
						<!-- 结果展示 -->
						<view class="result item3" v-for="(ita,idx) in ite.list" :key="idx" v-if="isresult&&ite.list.length>1">
							<view class="name">{{ita.name}}</view>
							<view class="weight">
								<view style="width: 40%;">{{ita.value?ita.value:'-'}}</view>
								<view class="cblue bold">{{ita.score?ita.score:'-'}}</view>
								<view class="cblue bold">{{ita.proportion_value?ita.proportion_value:'-'}}</view>
							</view>
						</view>

					</view>
				</view>
			</view>
			<view class="gfbtn" v-if="isSports" @click="getList()">重新估分</view>
			<view class="gfbtn" @click="handlescore()" v-else>开始估分</view>
		</view>
		<!--  -->
		<view class="nolist" v-else>
			<image src="../../static/none.png"></image>
			<text>{{msg}}</text>
		</view>

		<!-- 占比 -->
		<uslider></uslider>
		<!-- 弹框 -->
		<view class="wrapper" v-if="isDrawe">
			<view class="bg" @click="onTap"></view>
			<view class="edit" @click.stop>
				<view class="title">请选择</view>
				<view class="item" v-for="(item, index) in List" :key="index" @click="toggle(item)">
					<uni-icons :type="isActive.name==item.name?'checkbox-filled':'circle'" size="22"
						:color="isActive.name==item.name?'#FEC407':'#dfdfdf'"></uni-icons>
					<view class="name">
						<view class="overflow">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="btn close" @click="onTap">取消</view>
				<view class="btn" @click="handleTarget">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uslider from "@/components/slider-fraction.vue";
	import headerIndex from "@/components/headerIndex.vue";
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				chartData: {
					series: [{
						name: "正确率",
						color: "#4687F9",
						data: 0.8
					}]
				},
				sportsList: [],
				List: [],
				score: 0,
				isDrawe: false,
				selectllist: [],
				isActive: {},
				region_list: {},
				timeList: [],
				timesTndex: [0, 0],
				isSports: false,
				msg: "",
				address: "",
				isresult: false,
			}
		},
		computed: {
			...mapState(["user", "familayList"]),
			userId() {
				return this.user.id
			}
		},
		components: {
			uslider,
			headerIndex,
			qiunDataCharts
		},
		onLoad() {
			let that = this
			that.score = 0
			that.selectllist = []
			that.sportsList = []
			that.timeList = that.$tools.gethms()
			if (that.familayList.length) {
				that.address = that.user.address
				that.getList()
			}

		},
		onShow() {
			let that = this
			// that.isresult = false
			// that.isSports = false
			if (!that.familayList.length) {
				that.score = 0
				that.selectllist = []
				that.sportsList = []
				that.chartData.series[0].data = 0.8
			}
		},
		watch: {
			// userId() {
			// 	let that = this
			// 	that.score = 0
			// 	that.selectllist = []
			// 	that.sportsList = []
			// 	that.address = that.user.address
			// 	that.getList()
			// 	that.handleSportsList()
			// 	console.log("user变了", that.sportsList, that.selectllist)
			// },
		},
		methods: {
			getAciveCity(item) {
				console.log("item", item)
				let that = this
				that.address = item
				that.score = 0
				that.isresult = false
				that.selectllist = []
				that.sportsList = []
				that.getList()
			},
			// 
			getList() {
				let that = this
				that.isresult = false
				that.isSports = false
				that.$model.getSportsListAll({
					gender: uni.getStorageSync('gender'),
					parameter_data: that.address
				}).then((res) => {
					console.log("全部项目", res)
					if (res.code != 0) {
						that.msg = res.msg
						return
					}
					that.score = 0
					that.selectllist = res.data
					that.chartData.series[0].data = 0.8
					that.handleSportsList()
				})
			},
			// 地区单个类型项目列表
			handleSportsList() {
				let that = this
				that.$model.getSportsList({
					aud_id: uni.getStorageSync('userid'),
					gender: uni.getStorageSync('gender'),
					address: that.address
				}).then((res) => {
					console.log("单地区", res)
					if (res.code != 0) return
					that.sportsList = res.data.list
				})
			},
			// 开始估分
			handlescore() {
				let that = this
				if (!that.familayList.length) {
					that.$tools.msg("请先添加成员")
					return
				}
				that.selectllist.forEach(item => {
					item.list.forEach(ite => {
						ite.list.forEach(it => {
							it.value = it.value == "" ? "0" : it.value
						})
					})
				})
				that.$model.getSportsData({
					aud_id: uni.getStorageSync('userid'),
					gender: uni.getStorageSync('gender'),
					parameter_data: that.address,
					result_data: that.selectllist,
				}).then((res) => {
					console.log("开始估分", res)
					if (res.code != 0) {
						that.$tools.msg(res.msg)
						return
					}
					that.isSports = true
					that.isresult = true
					that.selectllist = res.data.list
					that.score = res.data.total_score
					that.chartData.series[0].data = Number(res.data.total_score) / 50
				})
			},
			// 添加项目
			handleHistory(item) {
				let that = this
				that.List = []
				that.region_list = item
				console.log("添加项目", that.sportsList, that.List)
				that.sportsList.forEach(ite => {
					if (ite.key == item.key) {
						that.List = ite.list
					}
				})
				that.isDrawe = true
			},
			bindTimeChange(e, it) {
				let that = this
				let minute = e.target.value[0]
				let second = e.target.value[1]
				it.value = that.timeList[0][minute].substring(0, 2) + ':' + that.timeList[1][second].substring(0, 2)
				console.log(e.target.value, it)
			},
			// 选择项目
			toggle(item) {
				this.isActive = this.isActive.name == item.name ? {} : item
			},
			// 确定选择项目
			handleTarget() {
				let that = this
				that.selectllist.forEach(item => {
					item.list.forEach(it => {
						if (it.key == that.region_list.key) {
							it.list = []
						}
					})
				})
				that.region_list.list.push(that.isActive)
				that.isDrawe = false
			},
			// 取消选择
			onTap() {
				this.isActive = {}
				this.isDrawe = false
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		min-height: 100vh;
		padding-bottom: 15px;
		background-color: #f7f7f7;
	}

	.box {
		margin: 15px 10px 0;
		padding: 15px 10px 10px;
		background-color: #fff;
		width: calc(100% - 40px);
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		position: relative;
		min-height: 30px;

		.groupBtn {
			width: 100%;
		}

		.name {
			position: absolute;
			top: 45%;
			margin: auto;
			font-size: 35px;
			color: #4687F9;
		}

		.history {
			position: absolute;
			top: 0px;
			right: 10px;
			height: 30px;
			line-height: 30px;
			float: right;
			margin-top: 15px;
			font-size: 14px;
			padding: 0 10px;
			background: $maincolor !important;
		}
	}



	.wrapper {

		.edit {
			background-color: #fff;
		}

		.item {
			width: 100%;
			height: 40px;
			line-height: 40px;
			display: flex;
			border-bottom: 1px solid #f7f7f7;
		}

		.btn {
			width: 40%;
			float: right;
			margin-top: 15px;
			background: $maincolor !important;
		}

		.edit {
			top: 20%
		}

		.close {
			background: #dfdfdf !important;
			float: left;
			color: #333;
		}
	}



	.indexCarList {
		width: calc(100% - 40px);
		margin: 10px;
		padding: 10px;
		background-color: #fff;
		border-radius: 10px;

		.title {
			color: #000;
			background-color: #f5f5f5 !important;
			border-bottom: 1px solid #d9d9d9;
			padding-left: 10px;
			border-radius: 5px;
			height: 35px;
			display: flex;
			align-items: center;
			width: calc(100% - 10px);


			.name {
				font-weight: bold;
				margin-top: 3px;
			}

			.right {
				width: 30%;
				color: $textcolor;
				font-size: 12px;
				text-align: right;
				margin-top: 5px;
				margin-right: 10px;
			}
		}

		.item3 {
			display: flex;
			background: #fff;
			padding: 0 10px;
			height: 50px;
			border-bottom: 1px solid #f7f7f7;

			.name {
				width: 35%;
				line-height: 50px;
			}

			.weight {
				width: 65%;
				display: flex;
				align-items: center;
				position: relative;
				justify-content: space-between;

				text {
					color: #666;
					font-size: 12px;
					position: absolute;
					right: 0;
					bottom: 15px;
				}

				.input {
					width: 70%;
					display: flex;
					align-items: center;
					position: relative;
					justify-content: space-between;

					.uni-icons {
						position: absolute;
						right: 10px;
						bottom: 10px;
					}

					/deep/input,
					/deep/picker {
						width: 100%;
						font-size: 14px;
						height: 35px;
						line-height: 33px;
						text-align: center;
						border: 1px solid #dfdfdf;
						border-radius: 5px;
						background-color: #f7f7f7;
					}

					/deep/picker {
						position: relative;

						.down {
							position: absolute;
							right: 10px;
							top: 1px;
						}

					}
				}
			}

			.iconfont {
				color: $btncolor;
			}
		}

	}

	.result {
		width: 100%;

		.weight {
			view {
				width: 30% !important;
				text-align: center;
			}
		}
	}


	.charts {
		width: 100%;
		height: 130px;
	}

	.gfbtn {
		width: calc(100% - 40px);
		margin-top: 20px;
		margin-left: 20px;
		color: #fff;
		padding: 8px 0;
		border-radius: 10px;
		text-align: center;
		background: $maincolor;
	}
</style>