第三周实训,主要完成成果维护五个功能,分别是专著维护、专利维护、论文维护、奖励维护和项目维护,五个功能都比较类似,因此先完成其中一个后面应该会比较迅速。
先实现了专著维护的功能
<template> <view id="container"> <view style="height:30rpx"></view> <u-tabs id="tabs" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs> <view v-if="is_delete" class="info-card" v-for="(books,index) in delete_info" :key="books.bookId"> <view class="class-id" style="font-size: 25rpx;font-weight:100rpx ;" >专著号:{{books.bookId}}</view> <view id="info"> <view class="class-name" style="font-size: 40rpx;font-weight: bold;">{{books.monographName}}</view> <view class="paper-item class-exam">出版日期:{{books.publishDate}}</view> <view class="paper-item class-exam">类型:{{books.bookNum}}</view> <view class="paper-item class-credit-time" >作者位次:{{books.autPosition}}</view> <view class="btn"> <button type="primary" id="select-button" @click="del_book(index)" style="background-color:#930D14">删除</button> </view> </view> </view> <view v-if="!is_delete" class="info-card" v-for="(books,index) in select_info" :key="books.bookId"> <view class="class-id" style="font-size: 25rpx;font-weight:100rpx ;" >专著号:{{books.bookId}}</view> <view id="info"> <view class="class-name" style="font-size: 40rpx;font-weight: bold;">{{books.monographName}}</view> <view class="paper-item class-exam">出版日期:{{books.publishDate}}</view> <view class="paper-item class-exam">类型:{{books.bookNum}}</view> <view class="paper-item class-credit-time" >作者位次:{{books.autPosition}}</view> <view class="btn"> <button type="primary" class="select-button" @click="add_book(index)" style="background-color:#18B566">添加</button> </view> </view> </view> <u-divider margin-top='20'>到底了</u-divider> </view> </template> <script> export default { data() { return { list: [{ name: '选中专著' }, { name: '专著选择', }], current: 0, delete_info:[], select_info:[], is_delete:true, delete_book_list:[], add_book_list:[], person:{ tea_id:"" } } }, methods: { init(){ this.person.tea_id=parseInt(uni.getStorageSync('id')); }, formatDate(d) { const date = new Date(d); let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); console.log("正在格式化数据"+`${year}-${month}-${day}`) return `${year}-${month}-${day}`; }, del_book(index){ //删除 const delete_bookId = this.delete_info[index].bookId; this.delete_book_list.push(delete_bookId); uni.request({ url:'http://localhost:8081/teacher/deleteBookMaintain', method:'POST', data:{ tea_id:parseInt(uni.getStorageSync('id')), book_id:delete_bookId }, success:(res) => { console.log("success ->"); uni.showToast({ title:'删除成功' }) }, fail:(err) =>{ console.log("err"); uni.showToast({ title:'请求失败' }) } }) // console.log("courseId",delete_courseId); // console.log("this.delete_course_list",this.delete_course_list); this.delete_info.splice(index,1); }, add_book(index){ const add_bookId = this.select_info[index].bookId; // tea_id=parseInt(uni.getStorageSync('id')) // console.log("courseId ->",add_courseId); uni.request({ url:'http://localhost:8081/teacher/addBookMaintain', method:'POST', data:{ tea_id:parseInt(uni.getStorageSync('id')), book_id:add_bookId }, success:(res) => { console.log("success ->"); uni.showToast({ title:'添加成功' }) }, fail:(err) =>{ console.log("err"); uni.showToast({ title:'请求失败' }) } }) this.select_info.splice(index,1); this.delete_info.push(index,0); }, change(index) { this.current = index; if(index == 0){ this.find_mes(); }else if(index ==1){ console.log("第2个"); this.select_mes(); } }, find_mes(){ console.log("选中专著,可以删除已选中的专著"); uni.request({ url: 'http://localhost:8081/teacher/searchBookApplied', method: 'POST', data: { tea_id:parseInt(uni.getStorageSync('id')), }, success: (res) => { this.delete_info = res.data.data; uni.setStorageSync('已选中的数据', res.data.data[0]); console.log("接收数据为",res); }, fail: (res) => { console.log("error"); } }); this.is_delete = true; }, select_mes(){ console.log("选择专著,可以选择近五年专著"); uni.request({ url: 'http://localhost:8081/teacher/searchBookUnapplied', // url: 'http://localhost:8081/teacher/searchBookApplied', method: 'POST', data: { tea_id:parseInt(uni.getStorageSync('id')) }, success: (res) => { this.select_info = res.data.data; uni.setStorageSync('可选中的数据', res.data.data[0]); console.log("接收数据为",this.select_info); }, fail: (res) => { console.log("error"); } }); this.is_delete = false; } }, mounted(){ console.log("mounted",'执行') init(); this.find_mes(); }, created() { this.find_mes(); } } </script> <style> #tabs{ width: 80%; } .delete_course{ margin:auto; margin-top:15rpx ; width: 40%; height: 60rpx; } #delete{ background-color: #930D14; width: 100%; height: 100%; line-height:60rpx; color: #FFFFFF; box-shadow: 0 0 20rpx -10rpx grey; border-radius: 15rpx; } #container{ display:flex; flex-direction: column; align-items: center; justify-content: center; } #container{ display:flex; flex-direction: column; align-items: center; justify-content: center; } #avatar{ /* margin:40rpx; */ z-index:0; margin-top:40rpx; box-shadow: 0 0 40rpx -10rpx grey; border-radius:50%; background-color: #fff9f8; } .info-card{ /* //z-index:-1 */; background-color: white; position:relative; margin: 20rpx auto; /* margin-top:-20rpx; margin-bottom: 50rpx; */ height:450rpx; width:700rpx; border-radius: 20px; padding:20px 20px; box-shadow: 0 0 40rpx -10rpx grey; } .paper-card{ position: relative; display: flex; flex-direction: row; border-radius: 20rpx; width: 90%; box-shadow: 0 0 40rpx -10rpx grey; margin: 10rpx auto; } .info-item{ font-size:12px; margin-top: 20rpx; } .list-item{ position: relative; border: #18B566; margin: 0rpx auto; width: 90%; height: 80rpx; display: inline-block; } .list-left{ width: 90%; } .list-right{ position: absolute; right:0rpx; width: 40rpx; height:40rpx; } .save{ bottom: 50rpx; position: fixed; width: 30%; } .btn_commit{ font-size: 40rpx; font-weight: 500; box-shadow: 0 0 24rpx -10rpx grey; } .select-button{ float: right; box-shadow: 0 0 24rpx -10rpx grey; border-radius: 30rpx; width: 170rpx; height: 40rpx; line-height: 40rpx; color: white; font-size: 20rpx; margin-top: 20rpx; } .class-name{ margin:50rpx 100rpx 50rpx 50rpx; } .paper-item{ margin:auto 50rpx; } /* .book-card{ position: relative; display: flex; flex-direction: row; border-radius: 20rpx; width: 90%; box-shadow: 0 0 40rpx -10rpx grey; margin: 10rpx auto; } */ /* #info{ width: auto; display: flex; flex-direction: column; flex-wrap: wrap; align-content:flex-end; padding-top: 30rpx; padding-right: 0rpx; padding-bottom: 10rpx; padding-left: 10px; } */ /* .book-item{ text-align: right; padding-top:10rpx ; } .class-name{ font-size: 30rpx; color: #358cfb; } .class-time{ font-size: 20rpx; color:grey; } .class-type{ font-size: 20rpx; color:; } .class-position{ font-size: 25rpx; color: #ffa15d; } */ /* .btn{ text-align: center; } */ #select-button{ float: right; box-shadow: 0 0 24rpx -10rpx grey; border-radius: 30rpx; width: 170rpx; height: 40rpx; line-height: 40rpx; color: white; font-size: 20rpx; margin-top: 7rpx; } .info-card{ /* //z-index:-1 */; background-color: white; position:relative; margin: 20rpx auto; /* margin-top:-20rpx; margin-bottom: 50rpx; */ height:450rpx; width:700rpx; border-radius: 20px; padding:20px 20px; box-shadow: 0 0 40rpx -10rpx grey; } .select-button{ float: right; box-shadow: 0 0 24rpx -10rpx grey; border-radius: 30rpx; width: 170rpx; height: 40rpx; line-height: 40rpx; color: white; font-size: 20rpx; margin-top: 7rpx; } </style>
第一个功能实现花费的时间较长,在和接口对接的时候还是做了许多的调整,最终实现后面的效果。