页面渲染 新页面添加

This commit is contained in:
taoxu 2023-12-07 00:04:36 +08:00
commit 6e590cd865
7 changed files with 315 additions and 360 deletions

View File

@ -41,7 +41,9 @@ const install = (Vue, vm) => {
// 方式四如果token放在了Storage本地存储中拦截是每次请求都执行的 // 方式四如果token放在了Storage本地存储中拦截是每次请求都执行的
// 所以哪怕您重新登录修改了Storage下一次的请求将会是最新值 // 所以哪怕您重新登录修改了Storage下一次的请求将会是最新值
// const token = uni.getStorageSync('token'); // const token = uni.getStorageSync('token');
const token = " Bearer a75c44e23b7740c48740c95ae3b7b427"
const token = " Bearer 8dc2aff0225547d7b9698f8e126a8b10"
// console.log("我是token", token) // console.log("我是token", token)
config.header.Authorization = token; config.header.Authorization = token;
// config.header.Tenant-Id=1 // config.header.Tenant-Id=1

View File

@ -68,16 +68,7 @@
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
{
"path" : "pages/Mystudent/search",
"style" :
{
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#4473f6",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{ {
"path" : "pages/Mystudent/classmate", "path" : "pages/Mystudent/classmate",
"style" : "style" :
@ -127,6 +118,26 @@
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
"navigationStyle": "custom" "navigationStyle": "custom"
} }
},
{
"path" : "pages/Mystudent/addstu",
"style" :
{
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#4473f6",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path" : "pages/Mystudent/formstu",
"style" :
{
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#4473f6",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
} }
], ],
"subPackages": [ "subPackages": [

View File

@ -18,39 +18,14 @@
placeholder-style="color:#C7CDD3 "> placeholder-style="color:#C7CDD3 ">
</view> </view>
<view class="teacher_card_box" > <view class="teacher_card_box" >
<view class="teacher_card" >
<view class="teacher_card" v-for="(item,index) in teacherlist" :key="index" >
<view class="class_card_left"> <view class="class_card_left">
<image src=" https://file.langsi.online/yasiimg/web/static/udWNTRG6GulmTtgPRQ49"></image> <image src=" https://file.langsi.online/yasiimg/web/static/udWNTRG6GulmTtgPRQ49"></image>
</view> </view>
<view class="class_card_right"> <view class="class_card_right">
<view class="class_card_right_top"> <view class="class_card_right_top">
张三三老师 {{item.name}}
</view>
<view class="class_card_right_bot">
听力
</view>
</view>
</view>
<view class="teacher_card" >
<view class="class_card_left">
<image src=" https://file.langsi.online/yasiimg/web/static/udWNTRG6GulmTtgPRQ49"></image>
</view>
<view class="class_card_right">
<view class="class_card_right_top">
张三三老师
</view>
<view class="class_card_right_bot">
听力
</view>
</view>
</view>
<view class="teacher_card" >
<view class="class_card_left">
<image src=" https://file.langsi.online/yasiimg/web/static/udWNTRG6GulmTtgPRQ49"></image>
</view>
<view class="class_card_right">
<view class="class_card_right_top">
张三三老师
</view> </view>
<view class="class_card_right_bot"> <view class="class_card_right_bot">
听力 听力
@ -68,10 +43,28 @@ export default {
bgc: { bgc: {
backgroundColor: "#transparent", backgroundColor: "#transparent",
}, },
classid:0,
teacherlist:[]
} }
}, },
onLoad(option) {
// this.classid=option.id
this.classid=15
this.getclassteacher()
},
methods: { methods: {
getclassteacher(){
this.$u.get(`https://api.admin-v2.langsi.online/admin-api/classroom/teacher/list?id=${this.classid}`).then(res => {
if (res.code == 0) {
this.teacherlist=res.data.list
// this.classlist = res.data.list
// this.isloding = false
}
})
}
} }
} }
</script> </script>

View File

@ -1,300 +0,0 @@
<template>
<view class="searchpage">
<u-navbar title="搜索"
:border-bottom="false"
:background="bgc"
title-color='#2E4975'
title-size='36'
height='36'></u-navbar>
<view class="search_box">
<view class="check_search">
{{ checkindex == "0" ? "班级" : '学生' }}
<view class="iconfont icon-arow_down"></view>
</view>
<view class="serchbox">
<view class="serchimg">
<image src="https://file.langsi.online/yasiimg/web/static/uVMACkynkipOxuTYDqm0"
mode="scaleToFill">
</image>
</view>
<input type="text"
placeholder="搜索相关内容..."
class="input"
placeholder-style="color:#C7CDD3 ">
</view>
</view>
<view class="class_box"
v-if="checkindex == 1">
<view class="class_card">
<view class="class_card_top">
<view class="class_card_left">
<image src=" https://file.langsi.online/yasiimg/web/static/udWNTRG6GulmTtgPRQ49"></image>
</view>
<view class="class_card_right">
<view class="class_card_right_top">
雅思1班
</view>
<view class="class_card_right_bot">
标签文字
</view>
</view>
</view>
<view class="class_infobox">
<view class="class_info">
<view class="class_info_top">
班级人数
</view>
<view class="class_info_bot">
21
</view>
</view>
<view class="class_info">
<view class="class_info_top">
平均成绩/
</view>
<view class="class_info_bot">
21
</view>
</view>
<view class="class_info">
<view class="class_info_top">
作业完成度
</view>
<view class="class_info_bot">
80%
</view>
</view>
</view>
</view>
<view class="class_card">
<view class="class_card_top">
<view class="class_card_left">
<image src=" https://file.langsi.online/yasiimg/web/static/udWNTRG6GulmTtgPRQ49"></image>
</view>
<view class="class_card_right">
<view class="class_card_right_top">
雅思1班
</view>
<view class="class_card_right_bot">
标签文字
</view>
</view>
</view>
<view class="class_infobox">
<view class="class_info">
<view class="class_info_top">
班级人数
</view>
<view class="class_info_bot">
21
</view>
</view>
<view class="class_info">
<view class="class_info_top">
平均成绩/
</view>
<view class="class_info_bot">
21
</view>
</view>
<view class="class_info">
<view class="class_info_top">
作业完成度
</view>
<view class="class_info_bot">
80%
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#transparent",
},
checkindex: 1,
}
},
methods: {
}
}
</script>
<style lang="scss">
page {
background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
}
.searchpage {
width: 750rpx;
padding: 0 32rpx;
.search_box {
margin-top: 46rpx;
width: 686rpx;
height: 88rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
display: flex;
flex-wrap: nowrap;
.check_search {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
width: 148rpx;
height: 88rpx;
background: #FFF2E4;
border-radius: 20rpx 0rpx 0rpx 20rpx;
font-size: 28rpx;
font-family:'PingFang','PingFang';
font-weight: 500;
color: #F39852;
.icon-arow_down {
margin-left: 8rpx;
font-size: 20rpx;
}
}
.serchbox {
// padding: 0 32rpx;
display: flex;
flex-wrap: nowrap;
// margin-top: 30rpx;
align-items: center;
justify-content: space-between;
width: 538rpx;
height: 88rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
.serchimg {
margin-left: 32rpx;
width: 32rpx;
height: 32rpx;
}
.input {
// margin-left: 24rpx;
width: 452rpx;
height: 88rpx;
// border-radius: 30rpx;
// background-color: #f5f8fc;
// display: flex;
// justify-content: center;
// align-items: center;
// text-align: center;
font-size: 28rpx;
font-family: Source Han Sans CN, Source Han Sans CN-Light;
font-weight: 300;
text-align: left;
color: #a7b9cd;
letter-spacing: 1.2rpx;
line-height: 36rpx;
// padding: 0 100rpx;
// padding-right: 135rpx;
box-sizing: border-box;
}
}
}
.class_box {
display: flex;
flex-wrap: wrap;
.class_card {
margin-top: 20rpx;
width: 686rpx;
height: 296rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 32rpx;
.class_card_top {
display: flex;
flex-wrap: nowrap;
align-items: center;
.class_card_left {
width: 84rpx;
height: 84rpx;
}
.class_card_right {
margin-left: 12rpx;
display: flex;
flex-wrap: wrap;
.class_card_right_top {
width: 100%;
font-size: 32rpx;
font-family:'PingFang','PingFang';
font-weight: bold;
color: #072F5A;
}
.class_card_right_bot {
margin-top: 8rpx;
background: #EBF3FF;
border-radius: 4rpx 4rpx 4rpx 4rpx;
padding: 10rpx 20rpx;
font-size: 20rpx;
font-family:'PingFang','PingFang';
font-weight: 500;
color: #2D7CE6;
}
}
}
.class_infobox {
margin-top: 20rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
width: 622rpx;
height: 128rpx;
background: #F9F9F9;
border-radius: 20rpx 20rpx 20rpx 20rpx;
.class_info {
width: 110rpx;
display: flex;
flex-wrap: wrap;
justify-content: center;
.class_info_top {
font-size: 20rpx;
font-family:'PingFang','PingFang';
font-weight: 500;
color: rgba(7, 47, 90, 0.5);
}
.class_info_bot {
margin-top: 12rpx;
font-size: 28rpx;
font-family:'PingFang','PingFang';
font-weight: 800;
color: #2D7CE6;
}
}
}
}
}
}</style>

View File

@ -52,7 +52,7 @@
学生人数 学生人数
</view> </view>
<view class="info_cont_bot"> <view class="info_cont_bot">
21 {{totalLastNum}}
</view> </view>
</view> </view>
<view class="info_cont"> <view class="info_cont">
@ -60,7 +60,7 @@
平均成绩/ 平均成绩/
</view> </view>
<view class="info_cont_bot"> <view class="info_cont_bot">
21 {{totalAvgScore }}
</view> </view>
</view> </view>
<view class="info_cont"> <view class="info_cont">
@ -68,7 +68,7 @@
作业完成度 作业完成度
</view> </view>
<view class="info_cont_bot"> <view class="info_cont_bot">
80% {{totalWorkCompletionDegre}}%
</view> </view>
</view> </view>
</view> </view>
@ -160,8 +160,8 @@
<image src=" https://file.langsi.online/yasiimg/web/static/udWNTRG6GulmTtgPRQ49"></image> <image src=" https://file.langsi.online/yasiimg/web/static/udWNTRG6GulmTtgPRQ49"></image>
</view> </view>
<view class="class_card_right"> <view class="class_card_right">
<view class="class_card_right_top"> <view class="class_card_right_top" v-html="highlightSearch(item.name)">
{{ item.name }} <!-- {{ item.name }} -->
</view> </view>
<view class="class_card_right_bot" <view class="class_card_right_bot"
v-show="item.classify == 1"> v-show="item.classify == 1">
@ -290,6 +290,9 @@ export default {
showtext: false, showtext: false,
textindex: 0, textindex: 0,
searchKeyword: '', searchKeyword: '',
totalLastNum:'',
totalAvgScore:'',
totalWorkCompletionDegre:0,
} }
}, },
onLoad(option) { onLoad(option) {
@ -297,14 +300,22 @@ export default {
}, },
methods: { methods: {
highlightSearch(name) {
// 使 searchKeyword
if (this.searchKeyword) {
const regex = new RegExp(this.searchKeyword, 'gi');
return name.replace(regex, match => `<span style="color: #2D7CE6 ;">${match}</span>`);
}
return name;
},
toclassdetal(item) { toclassdetal(item) {
console.log('点击了'); //
uni.navigateTo({ uni.navigateTo({
url: "/pages_teacher/teacher_class/class_detail?id=" + item.id url: "/pages_teacher/teacher_class/class_detail?id=" + item.id
}).then(res => { }).then(res => {
console.log('跳转成功', res);
}).catch(err => { }).catch(err => {
console.error('跳转失败', err);
}); });
}, },
search() { search() {
@ -320,7 +331,7 @@ export default {
}, },
calculatePercentage(value1, value2) { calculatePercentage(value1, value2) {
if (value2 === 0) { if (value2 === 0) {
console.log("value2 is zero, cannot calculate percentage");
return '0%'; // return '0%'; //
} }
@ -348,8 +359,7 @@ export default {
}, },
fuwei() { fuwei() {
console.log(this.classlist, 'this.classlist');
console.log(this.changeclasslist, 'this.changeclasslist');
this.classlist = JSON.parse(JSON.stringify(this.changeclasslist)); this.classlist = JSON.parse(JSON.stringify(this.changeclasslist));
}, },
changetext() { changetext() {
@ -378,7 +388,7 @@ export default {
return 0; // return 0; //
}); });
} else { } else {
console.log('调用了');
this.fuwei(); this.fuwei();
} }
@ -386,17 +396,40 @@ export default {
}, },
getclassList() { getclassList() {
this.$u.get("https://api.admin-v2.langsi.online/admin-api/classroom/page").then(res => { this.$u.get("https://api.admin-v2.langsi.online/admin-api/classroom/page").then(res => {
console.log(res, '返回成功');
if (res.code === 0) { if (res.code === 0) {
this.classlist = res.data.list; this.classlist = res.data.list;
this.changeclasslist = JSON.parse(JSON.stringify(this.classlist)); this.changeclasslist = JSON.parse(JSON.stringify(this.classlist));
this.isloding = false; this.isloding = false;
const list = res.data.list;
if (list.length > 0) {
// totalMembers
const totalMembersSum = list.reduce((sum, item) => sum + item.totalMembers, 0);
// workCompletionDegree
const workCompletionDegreeAvg = list.reduce((sum, item) => sum + item.workCompletionDegree, 0) / list.length;
// avgScore
const avgScoreAvg = list.reduce((sum, item) => sum + item.avgScore, 0) / list.length;
console.log(workCompletionDegreeAvg,'workCompletionDegreeworkCompletionDegree');
//
this.totalLastNum = totalMembersSum;
this.totalWorkCompletionDegre = workCompletionDegreeAvg;
this.totalAvgScore = avgScoreAvg;
// console.log(this.totalworkCompletionDegree,'totalworkCompletionDegreetotalworkCompletionDegree');
} else {
//
this.totalLastNum = 0;
this.totalWorkCompletionDegre = 0;
this.totalAvgScore = 0;
}
} }
}); });
}, },
getstuList() { getstuList() {
this.$u.get("https://api.admin-v2.langsi.online/admin-api/classroom/page").then(res => { this.$u.get("https://api.admin-v2.langsi.online/admin-api/classroom/page").then(res => {
console.log(res, '返回成功');
if (res.code == 0) { if (res.code == 0) {
this.classlist = res.data.list this.classlist = res.data.list

View File

@ -8,8 +8,20 @@
<image src="https://file.langsi.online/yasiimg/web/static/uXJ24nLEqmCb0FkFpmfy" mode=""></image> <image src="https://file.langsi.online/yasiimg/web/static/uXJ24nLEqmCb0FkFpmfy" mode=""></image>
</view> </view>
<view class="view_span"> <view class="view_span">
<text>雅思1班</text> <text>{{classinfo.name}}</text>
<view>基础班</view> <!-- <view>基础班</view> -->
<view v-show="classinfo.classify == 1">
听力
</view>
<view v-show="classinfo.classify == 2">
阅读
</view>
<view v-show="classinfo.classify == 3">
写作
</view>
<view v-show="classinfo.classify == 4">
口语
</view>
</view> </view>
</view> </view>
<view class="view_yellowBotton"> <view class="view_yellowBotton">
@ -19,10 +31,21 @@
<view class="view_zy"> <view class="view_zy">
<view class="view_left" v-for="(item,index) in clas" :key="index"> <view class="view_left" @click="tostu()">
<view class="veiw_left2"> <view class="veiw_left2">
<view class="view_class"> <view class="view_class">
<text>{{item.title}}</text> <text>班级成员</text>
<u-icon name="arrow-right" color="#646D7B" size="16"></u-icon>
</view>
<view class="view_images">
<image :src="item1.url" mode="" v-for="(item1,index) in item.image"></image>
</view>
</view>
</view>
<view class="view_left" @click="toteacher()" >
<view class="veiw_left2">
<view class="view_class">
<text>带班老师</text>
<u-icon name="arrow-right" color="#646D7B" size="16"></u-icon> <u-icon name="arrow-right" color="#646D7B" size="16"></u-icon>
</view> </view>
<view class="view_images"> <view class="view_images">
@ -137,9 +160,55 @@
title:'更多' title:'更多'
} }
] ],
classid:0,
classinfo:{}
} }
} },
onLoad(option) {
// this.classid=option.id
this.classid=15
this.getclassinfo()
},
onShow(){
},
methods:{
getclassinfo() {
this.$u.get(`https://api.admin-v2.langsi.online/admin-api/classroom/detail?id=${this.classid}`).then(res => {
if (res.code == 0) {
this.classinfo=res.data
// this.classlist = res.data.list
// this.isloding = false
}
})
},
toteacher(){
uni.redirectTo({
url: "/pages/Mystudent/Formteacher?id=" + this.classinfo.id
}).then(res => {
}).catch(err => {
});
},
tostu(){
uni.redirectTo({
url: "/pages/Mystudent/formstu?id=" + this.classinfo.id
}).then(res => {
}).catch(err => {
});
}
},
} }
</script> </script>

View File

@ -0,0 +1,147 @@
<template>
<!-- 外层循环 -->
<view>
<view v-for="(item,index) in transformedData" :key="index">
<!-- 剑18循环 -->
<view>
<view class="view_bages">
<view>{{item.examName}}</view>
</view>
</view>
<!-- 渲染Text -->
<view class="substance">
<text v-for="text in textArr" :key="text" @click="textClick(item,text)" :class="{active: item.active == text}">{{text}}</text>
</view>
<!-- 内容 -->
<view class="compose_bodys">
<view v-for="text in textArr" :key="text" class="zz">
<view class="compose_body" v-for="Task in taskArr" :key="Task" v-if="item.active == text">
<view class="compose_left">
<view>{{Task}}</view>
<view>
<text class="fickle">{{item[text][Task].caption}}</text>
<text class="fickle2">{{item[text][Task].themeCaption}}</text>
</view>
</view>
<view>
<u-checkbox @change="checkboxChange(item[text][Task].id)" v-model="subsets">{{item.name}}</u-checkbox>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
transformedData: [],
//
subsets:[],
subsetArr:[],
textArr:['test1','test2','test3','test4'],
taskArr:['task1','task2'],
//
comsapi: {
"key": "",
"mode": "home",
"exam": "",
"caption": "0",
"themeCaption": "",
"type": "",
"isStudy": 0,
"isEval": 0
},
}
},
created() {
this.getCompose()
},
methods: {
//
getCompose() {
this.$u.post('https://api.admin-v2.langsi.online/admin-api/writing/all/search', this.comsapi).then(res => {
let arr = res.data
for(let a of arr) {
a.active = 'test1'
}
this.transformedData =arr
})
},
textClick(item, text) {
item.active = text
this.$forceUpdate()
},
checkboxChange(e){
this.subsetArr.push(e)
console.log((this.subsetArr))
}
}
}
</script>
<style lang="scss" scoped>
.view_bages {
font-size: 40rpx;
font-weight: 400;
color: #2E4975;
}
.substance {
margin: 20rpx 0;
text {
padding: 10rpx 30rpx;
margin-right: 20rpx;
background: #FFFFFF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
}
}
.compose_bodys{
margin: 30rpx 0;
}
.compose_body {
display: flex;
background: #FFFFFF;
align-items: center;
justify-content: space-between;
margin: 0rpx 20rpx;
border-bottom: 2rpx solid #F2F2F2;
}
.compose_body:last-child {
border: none;
}
.zz{
background: #ffff;
border-radius: 12rpx 12rpx 12rpx 12rpx;
}
.compose_left {
display: flex;
padding: 24rpx 0;
margin: 0 24rpx;
}
.fickle {
padding: 4rpx 22rpx;
font-size: 20rpx;
font-weight: 500;
color: #2D7CE6;
margin-left: 12rpx;
background: #E1EEFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.fickle2 {
padding: 4rpx 32rpx;
font-size: 20rpx;
font-weight: 500;
color: #FB9734;
margin-left: 12rpx;
background: #FFEBD7;
border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.active {
color: #fff;
background: #007AFF !important;
}
</style>