DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/partyevaluatxz/PartyevaluateTopicXZ.vue

<template> 
  
    <view v-if="ready" class="box" style="padding-top: 0; "> 
		<view class="contents">
			<view class="progress">
				<view class="shade" :style="{width:100/total*(num+1)+'%'}"></view>
				<p></p>
				<b>{{total}}</b>
			</view>
			<view class="topic">
				<view class="title">
					<p><span>{{num+1}}</span></p>
					<div> {{ data[num].Assessment }} <span> ( {{data[num].scorePre}}分 ) </span></div>
				</view>
				<view class="topicCon">
					<h1>{{data[num].ConductRequirements}}</h1>
					<p>{{data[num].CRRemark}}</p>
					<ul>
						<li><b>{{data[num].gradetitle}}</b><span>({{data[num].gradenum}})</span></li>
						<p>{{data[num].ScoringCriteria}}</p>
					</ul>
				</view>
				<view class="footer">
					<ol>
						<li>分值：<span class="scorenum">{{data[num].MaxScore}}</span></li>
						<li>
							<!-- <input type="text" class="inputvalue" id="inputvalue" value=""+{{data[num].Score}}+""> -->
							<l-input
							  @input="setValue('', $event)"
							  :value="getValue('')"
							  class="inputvalue"
							  id="inputvalue"
							  style="min-height: 48rpx;text-align: center;border-bottom: none;padding-right: 45%;"
							  type="number"
							/>
						</li>
					</ol>
					<view class="buttons">
						<p class="last" @click="action('last')" v-if="lastIf">上一题</p>
						<view style="width: 10px;"></view>
						<p class="next" @click="action('next')" v-if="nextIf">下一题</p>
					</view>
					<view class="lookButton" >
						<p @click="action('seeTotal')" v-if="seeTotalIf">查看总分</p>
					</view>
				</view>
			</view>
		</view>
	
	
    </view> 
</template> 
  
  
<script> 
/* 
 * 版 本 Learun-ADMS V7.0.3 力软敏捷开发框架(http://www.learun.cn) 
 * Copyright (c) 2013-2020 上海力软信息技术有限公司 
 * 创建人：超级管理员 
 * 日  期：2020-10-20 09:37 
 * 描  述：班级工作记事 
 */
  
/** 
 * 本段代码由移动端代码生成器输出，移动端须 2.2.0 版本及以上可以使用 
 * 请在移动端 /pages.json 中的 pages 字段中添加一条记录： 
 * { "path": "pages/partyevaluatzp/single", "style": { "navigationBarTitleText": "表单详情页" } } 
 *  
 * （navigationBarTitleText 字段为本页面的标题文本，可以修改） 
 * （必须自行操作该步骤，力软代码生成器不会自动帮您修改 /pages.json 文件） 
 */
  
import get from 'lodash/get'
import set from 'lodash/set'
import moment from 'moment'
import customPageMixins from '@/common/custompage.js'
  
export default { 
  mixins: [customPageMixins], 
  
  data() { 
    return { 
      // 页面相关参数 
      Id: null, 
      ready: false, 
      seeTotalIf:false,
	  lastIf:true,
	  nextIf:true,
	  //题目数据
	  data:[],
	  //题目分值数据
	  valList:[],
	  //题目总数量
	  total:0,
	  //当前题目
	  num:0,
	  
    } 
  }, 
  
  async onLoad({ Id }) { 
    await this.init(Id) 
  }, 
  
  methods: { 
    // 页面初始化 
    async init(Id) { 
      this.LOADING('加载数据中...') 
  
      this.Id = Id
	
	  //请求题目数据
	  const result = await this.HTTP_GET(
	    'learun/adms/evaluatingindicator/getevaluationdataforxz', 
	    { 
		  Id:this.Id,
		  Assessed: this.GET_GLOBAL('loginUser').account
	    }, 
	    '加载数据时出错'
	  ) 
	    
	  if (!result) { return } 
	  this.data=result
	  this.total=result.length
	  result.forEach((item)=>{this.valList.push(item.Score)})
	  //计算显示按钮
	  await this.calcShowBtn()
	  
	  
      this.ready = true
      this.HIDE_LOADING() 
    }, 
	
	//计算显示按钮
	async calcShowBtn(){
		if(this.num < this.total-1){
				  this.nextIf=true;
				  this.seeTotalIf=false;
		}else{
				  this.nextIf=false;
				  this.seeTotalIf=true;
		}
		if(this.num <= 0){
				  this.lastIf=false;
		}else{
				  this.lastIf=true;
		}
	},
  
    // 点击 「查看总分」、「上一题」、「下一题」、 按钮 
    async action(type) { 
      switch (type) { 
        case 'seeTotal': 
			if(this.getValue() == ""){
				this.TOAST("分数不能为空!");
				return
			}
			if(this.getValue() > this.data[this.num].MaxScore){
				this.TOAST("分数不能大于最大值!");
				return
			}
          this.NAV_TO(`./AnswerTotalXZ?Id=${this.Id}&sumScore=${this.sum(this.valList)}&data=${JSON.stringify(this.data)}`)
          break
		  
		case 'last':
			this.num--
			await this.calcShowBtn()
		  break
		  
		case 'next':
			if(this.getValue() == ""){
				this.TOAST("分数不能为空!");
				return
			}
			if(this.getValue() > this.data[this.num].MaxScore){
				this.TOAST("分数不能大于最大值!");
				return
			}
			this.num++
			await this.calcShowBtn()
		  break
		  
        default: break
      } 
    },
	 
	 // 获取表单值
	 getValue(path) {
	   return this.data[this.num].Score;
	 }, // 设置表单值
	 setValue(path, val) {
		this.data[this.num].Score=val;
		this.valList[this.num]=val;
		// console.log(this.data);
		// console.log(this.valList);
	 },
	 // 计算数组和
	sum(arr) {
	  var s = 0;
	  for (var i=arr.length-1; i>=0; i--) {
		s += Number(arr[i]);
	  }
	  return s;
	},
	
  
  } 
} 
</script> 

<style lang="less">	
uni-page-body{
	height: 100%;
}
ul,
ol,
li {
	list-style: none;
	padding: 0;
	margin: 0;
}
.box{
	  height: 100%;
	  width: 100%;
	  background: url(../../common/images/content.png);
	  background-repeat: no-repeat;
	  background-size: 100% 100%;
  }
  .contents {
  	position: relative;
  	top: 300rpx;
  	width: 93%;
  	margin: 0 auto;
  }
.progress {
	height: 65rpx;
	position: relative;
}
.progress p {
	height: 15rpx;
	width: 100%;
	background-color: #EFEFEF;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: .3;
}

.progress .shade {
	height: 25rpx;
	width: 10%;
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(0%, -50%);
	background: url(../../common/images/jd.png);
	background-size: 100% 100%;
	border-radius: 100rpx;
}

.progress b {
	position: absolute;
	width: 95rpx;
	height: 60rpx;
	border-top-left-radius: 100rpx;
	border-bottom-left-radius: 100rpx;
	background-color: #f4df81;
	background-image: linear-gradient(#f4df81, #d19f31);
	top: 0;
	right: -3.7%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFFFFF;
	font-size: 36rpx;
}
.topic {
	position: relative;
	background-color: #FFFFFF;
	border-radius: 50rpx;
	margin-top: 70rpx;
}

.title>div {
	height: 75rpx;
	width: 75%;
	margin: 0 auto;
	background: #FFFFFF;
	border-radius: 40rpx;
	line-height: 75rpx;
	font-size: 24rpx;
	color: #404040;
	text-align: center;
	font-weight: 800;
	position: absolute;
	top: -4%;
	left: 52%;
	transform: translate(-50%, 0%);
	box-shadow: #d6d4d4 0rpx 12rpx 40rpx 10rpx; //边框阴影
}

.title>div span {
	color: #a6a6a6;
}

.title>p {
	background-color: #FFFFFF;
	height: 115rpx;
	width: 115rpx;
	border-radius: 50%;
	position: absolute;
	top: -7%;
	left: 70rpx;
	z-index: 90;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: #d6d4d4 0rpx 12rpx 40rpx 10rpx; //边框阴影
}

.title>p span {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 80rpx;
	width: 80rpx;
	border: 12rpx solid #e17465;
	border-radius: 50%;
	font-size: 40rpx;
}

.topicCon {
	padding-top: 90rpx;
	margin-bottom: 20rpx;
	padding: 0 50rpx;
	padding-top: 100rpx;
}

.topicCon h1 {
	font-size: 36rpx;
	color: #404040;
}

.topicCon p {
	font-size: 28rpx;
	color: #404040;
	line-height: 2;
}

.topicCon ul {
	background: #efefef;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-top: 40rpx;
}

.topicCon ul li b {
	font-size: 24rpx;
	color: #404040;
	font-weight: 800;
	margin-right: 20rpx;
}

.topicCon ul li span {
	font-size: 28rpx;
	color: #404040;
}

.topicCon ul p {
	font-size: 24rpx;
	color: #404040;
}

.footer {
	border-top: 4rpx solid #efefef;
	padding: 50rpx;

}

.footer ol {
	border: 2rpx solid #c8c8c8;
	border-radius: 16rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 80rpx;
	color: #404040;
	font-size: 24rpx;
	margin-bottom: 40rpx;
}

.footer ol li {
	height: 50rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.footer ol li span {
	color: #be1211;
}

.footer ol li:first-child {
	width: 30%;
	border-right: 2rpx solid #c8c8c8;
}

.footer ol li input {
	width: 100%;
	height: 40rpx;
	border: none;
	font-size: 32rpx;
	text-align: center;
	outline: none;
	padding: 0;
	margin: 0;
}

.buttons {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 80rpx;
	margin-top: 35rpx;
	margin-bottom: 20rpx;
}

.buttons p {
	border: 4rpx solid #e1bb53;
	border-radius: 50rpx;
	font-size: 36rpx;
	color: #FFFFFF;
	width: 40%;
	height: 72rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	color: #e1bb53;
	flex: 1;
}

.buttons p:hover {
	background-color: #e1bb53;
	color: #FFFFFF;
}

.lookButton p {
	background-color: #e1bb53;
	margin: 0 auto;
	color: #FFFFFF;
	border-radius: 50rpx;
	font-size: 36rpx;
	color: #FFFFFF;
	//width: 80%;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	// display: none; 

}

.homebuttom {
	background-color: #e1bb53;
	color: #FFFFFF !important;
}
</style>