examTeamApp/pages/score/score.vue

<template>
	<view class="content">
		<!-- 头部 -->
		<headerIndex></headerIndex>
		<!-- 估分 -->
		<view class="box">
			<view class="charts">
				<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
			</view>
			<view class="groupBtn">
				<view class="btn" @click="navTo('/pages/score/history')">估分历史</view>
				<view class="btn" @click="$store.commit('changeSlider',true)">分数占比</view>
			</view>
		</view>
		<!--  -->
		<view class="indexCarList">
			<view v-for="(ite,ind) in selectllist">
				<!-- 大标签 -->
				<view class="card box">
					<view class="title border-bottom">
						<view class="name" @click="handleEdit(ind)">
							<view class="text">{{ite.name}}</view>
						</view>
						<view class="right">
							<uni-icons type="plus" size="22" @click="handleHistory(ite.key)"></uni-icons>
						</view>
					</view>
					<!-- 身体数据 -->
					<view class="item title item1" v-if="ite.name=='身体数据'">
						<view class="ite">
							<view class="mb-10">
								身高(cm)
							</view>
							<view class="weight">
								<text v-if="ite.disabled">{{ite.height?ite.height:0}}</text>
								<input v-else type="digit" v-model="ite.height" confirm-type="done"
									@blur="handleBlur($event,ind)" />
							</view>
						</view>
						<view class="ite">
							<view class="mb-10">
								体重(kg)
							</view>
							<view class="weight">
								<text v-if="ite.disabled">{{ite.Weight?ite.Weight:0}}</text>
								<input v-else type="digit" v-model="ite.Weight" confirm-type="done"
									@blur="handleBlur($event,ind)" />
							</view>
						</view>
						<view class="ite">
							<view class="mb-10">BMI</view>
							<view class="weight">
								<text v-if="ite.disabled">{{ite.BMI?ite.BMI:0}}</text>
								<input v-else type="digit" v-model="ite.BMI" confirm-type="done"
									@blur="handleBlur($event,ind)" />
								<uni-icons class="iconfont icon-bianji" color="#FEC407"
									@click="handleEdit(ind)"></uni-icons>
							</view>
						</view>
					</view>
					<!-- 其他数据 -->
					<view class="item title" style="justifyContent:center" v-else>
						<view class="item2">
							<view class="name">本次数据({{ite.unit}})</view>
							<view class="weight">
								<text v-if="ite.disabled">{{ite.cnt?ite.cnt:0}}</text>
								<input v-else type="digit" v-model="ite.cnt" confirm-type="done"
									@blur="handleBlur($event,ind)" placeholder="请输入" />
								<uni-icons class="iconfont icon-bianji" color="#FEC407"
									@click="handleEdit(ind)"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="gfbtn btn">开始估分</view>
		<!-- 占比 -->
		<record :rtype='rtype'></record>
		<uslider></uslider>
	</view>
</template>

<script>
	import uslider from "@/components/slider-fraction.vue";
	import headerIndex from "@/components/headerIndex.vue";
	import record from '@/components/manuallyAdd/record.vue';
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	import {
		nextTick
	} from "vue";
	export default {
		data() {
			return {
				opts: {
					title: {
						name: "75",
						fontSize: 35,
						color: "#4687F9"
					},
				},
				chartData: {
					series: [{
						name: "正确率",
						color: "#4687F9",
						data: 0.75
					}]
				},
				rtype: "",
				isRefresh: true,
			}
		},
		components: {
			uslider,
			record,
			headerIndex,
			qiunDataCharts
		},
		onLoad() {
			this.selectllist = this.$json.selectllist
		},
		methods: {
			// 手动添加
			handlerRecord(name) {
				this.rtype = name
				this.$store.commit('changeRecord', true)
			},
			// 选择数据
			handleHistory(key) {
				console.log("1111", key)
				uni.navigateTo({
					url: "/pages/history/history?type=edit&key=" + key
				})
			},
			// 
			handleBlur(value, ind) {
				let that = this
				that.selectllist[ind].disabled = true
				this.$forceUpdate()
			},
			// 编辑数据
			handleEdit(ind) {
				let that = this
				that.selectllist[ind].disabled = false
				this.$forceUpdate()
			},
			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;

		.groupBtn {
			width: 100%;
		}
	}

	.btn {
		width: auto;
		color: #fff;
		padding: 2px 10px;
		border-radius: 10px;
		margin: 0 auto;
		background: $maincolor;
	}

	.item {
		padding-bottom: 0 !important;
		position: relative;

		.weight {
			width: 40%;
			display: flex;
			justify-content: center;
			align-items: center;

			/deep/input {
				width: 100%;
				margin-right: 10px;
				text-align: center;
				font-weight: bold;
				font-size: 22px;
				border-bottom: 1px solid #dfdfdf;
			}
		}

		.iconfont {
			position: absolute;
			bottom: 0px;
			right: 0px;
			color: $btncolor;
		}
	}

	.ite {
		width: 33% !important;
		text-align: center;

		.weight {
			width: 100% !important;
		}
	}

	.name {
		width: 50%;
		display: flex;
		justify-content: left;
		align-items: center;

		.text {
			font-size: 18px;
			font-weight: bold;
			margin-right: 10px;
			color: #333;
		}
	}

	.right {
		width: 50%;
		text-align: right;
	}



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

	.gfbtn {
		width: calc(100% - 40px);
		margin-top: 20px;
	}
</style>