培训源码2023/7/15

HTML

<template>
<view class="body">
<view class="selector">
<picker @change="bindPickerChange" :value="index" :range="subjectnum">
<view>请选择科目数量</view>
<view class="picker">当前选择:{{index}}</view>
</picker>
</view>
<view class="main" v-if="subjectinfo.length > 0">
<view class="head">
<view>科目</view>
<view>学分</view>
<view>成绩</view>
</view>
<view class="form-cell" v-for="(item,index) in subjectinfo" :key="index">
<view class="name">{{item.subject}}{{index+1}}</view>
<input class="credit" type="digit" placeholder="请输入学分" @input="confirmCredit" :data-index="index"/>
<input class="grade" type="digit" placeholder="请输入成绩" @input="confirmGrade" :data-index="index"/>
</view>
</view>
<view class="result" v-if="subjectinfo.length > 0">
<view class="cal" @click="cal">计算</view>
<view>您的绩点为:{{result}}</view>
</view>
</view>
</template>

JavaScript

<script>
export default {
data() {
return {
subjectnum: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
index: 0,
subjectinfo: [],
result: 0
}
},
methods: {
bindPickerChange(e) {
if (Number(this.index) > Number(e.detail.value)) {
var count = this.index - e.detail.value;
var temp = this.subjectinfo.slice(); // 创建一个数组副本
for (var i = 0; i < count; i++) {
temp.pop();
}
this.subjectinfo = temp;
} else if (Number(this.index) < Number(e.detail.value)) {
var count = e.detail.value-this.index
var temp = this.subjectinfo.slice()
for (var i = 0;i < count;i++) {
temp.push({
subject: "科目",
credit: 0,
grade: 0
})
}
this.subjectinfo = temp
}
this.index = e.detail.value
this.result = 0
console.log(this.subjectinfo)
},

confirmCredit(e) {
this.subjectinfo[e.currentTarget.dataset.index].credit = e.detail.value
console.log(this.subjectinfo)
},

confirmGrade(e) {
this.subjectinfo[e.currentTarget.dataset.index].grade = e.detail.value
console.log(this.subjectinfo)
},

cal() {
const t = this.subjectinfo
var sumc = 0
var sum = 0
for (var i = 0;i < this.index;i++) {
sumc+=Number(t[i].credit)
sum+=Number(t[i].credit)*(4-3*(100-Number(t[i].grade))*(100-Number(t[i].grade))/1600)
}
var result = sum/sumc
this.result = result
},
}
}
</script>

CSS

<style>
.body {
background: #000000;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
min-height: 100vh;
width: 100%;
overflow: hidden;
}

.selector {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 20rpx;
width: 40%;
margin-top: 30rpx;
color: white;
}

.selector view {
padding: 15rpx;
border-radius: 15rpx;
border: white solid 4rpx;
}

.main {
display: flex;
flex-direction: column;
align-items: center;
color: white;
}

.head {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 20rpx;
margin-top: 30rpx;
height: 70rpx;
width: 90%;
display: flex;
justify-content: space-around;
align-items: center;
}

.form-cell {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 20rpx;
margin-top: 30rpx;
height: 70rpx;
padding: 0;
display: flex;
align-items: center;
justify-content: space-around;
width: 90%;
}

.name {
width: 60%;
display: flex;
justify-content: center;
}

.credit {
display: flex;
justify-content: center;
align-items: center;
}

.grade {
display: flex;
justify-content: center;
align-items: center;
}

.input-placeholder {
color: white;
}

.result {
margin-top: 60rpx;
background-color: rgba(255, 255, 255, 0.1);
padding: 20rpx;
border-radius: 20rpx;
font-size: larger;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.cal {
color: white;
display: flex;
align-items: center;
padding-left: 70rpx;
padding-right: 70rpx;
padding-top: 10rpx;
padding-bottom: 10rpx;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 15rpx;
border: white solid 5rpx;
}
</style>