JayChou
8 months ago
parent
9623f0e03a
commit
d84eaff15d
10 changed files with 792 additions and 69 deletions
@ -0,0 +1,280 @@ |
|||||||
|
<template> |
||||||
|
<div class="login-form"> |
||||||
|
<div class="login-title">注册</div> |
||||||
|
<div class="form"> |
||||||
|
<el-form :model="form" label-width="0"> |
||||||
|
<el-form-item> |
||||||
|
<el-col :span="11"> |
||||||
|
<el-input |
||||||
|
v-model="form.username" |
||||||
|
:prefix-icon="User" |
||||||
|
placeholder="账号" |
||||||
|
style="height: 0.2344rem" |
||||||
|
/> |
||||||
|
</el-col> |
||||||
|
<el-col :span="2" class="text-center"> |
||||||
|
<span class="text-gray-500"></span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="11"> |
||||||
|
<el-input |
||||||
|
v-model="form.realname" |
||||||
|
:prefix-icon="User" |
||||||
|
placeholder="姓名" |
||||||
|
style="height: 0.2344rem" |
||||||
|
/> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-input |
||||||
|
v-model="form.workno" |
||||||
|
placeholder="工号/学号" |
||||||
|
:prefix-icon="Iphone" |
||||||
|
></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<!-- <el-cascader |
||||||
|
v-model="form.department" |
||||||
|
placeholder="选择院系" |
||||||
|
:options="options" |
||||||
|
style="width: 100%; height: 0.2344rem" |
||||||
|
/> --> |
||||||
|
<el-cascader |
||||||
|
:props="props" |
||||||
|
style="width: 100%; height: 0.2344rem" |
||||||
|
v-model="form.department" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-input |
||||||
|
placeholder="手机号码" |
||||||
|
v-model="form.mobile" |
||||||
|
:prefix-icon="Iphone" |
||||||
|
></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-input |
||||||
|
placeholder="密码" |
||||||
|
v-model="form.password" |
||||||
|
:prefix-icon="Lock" |
||||||
|
></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-input |
||||||
|
placeholder="确认密码" |
||||||
|
v-model="form.confirmPassword" |
||||||
|
:prefix-icon="Lock" |
||||||
|
></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<!-- <el-input |
||||||
|
placeholder="验证码" |
||||||
|
v-model="form.smscode" |
||||||
|
:prefix-icon="Lock" |
||||||
|
></el-input> --> |
||||||
|
<div class="captcha"> |
||||||
|
<el-input |
||||||
|
v-model="form.smscode" |
||||||
|
style="height: 0.2344rem" |
||||||
|
maxlength="4" |
||||||
|
:prefix-icon="Lock" |
||||||
|
/> |
||||||
|
<div class="code" @click="getcodeinfo"> |
||||||
|
<img :src="codeUrl" alt="" srcset="" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div class="btn"> |
||||||
|
<div @click="$emits('backLogin')">返回</div> |
||||||
|
<div class="gradient" @click="ragistered">注册</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||||
|
import { User, Iphone, Lock } from '@element-plus/icons-vue' |
||||||
|
import { getFaculties } from '@/api/race' |
||||||
|
import { ElMessage } from 'element-plus' |
||||||
|
import { getCode, sturegister } from '@/api/user' |
||||||
|
const $emits = defineEmits(['backLogin']) |
||||||
|
const form = reactive<any>({ |
||||||
|
username: '', |
||||||
|
realname: '', |
||||||
|
workno: '', |
||||||
|
department: '', |
||||||
|
mobile: '', |
||||||
|
password: '', |
||||||
|
confirmPassword: '' /*, policy: false*/, |
||||||
|
smscode: '', |
||||||
|
}) |
||||||
|
const KeyValue: any = { |
||||||
|
username: '账号', |
||||||
|
realname: '姓名', |
||||||
|
workno: '学号', |
||||||
|
department: '院系', |
||||||
|
mobile: '手机号', |
||||||
|
password: '密码', |
||||||
|
confirmPassword: '确认密码' /*, policy: false*/, |
||||||
|
smscode: '验证码', |
||||||
|
} |
||||||
|
|
||||||
|
const FacultiesList = ref([]) |
||||||
|
const getFacultiesList = async (data: any) => { |
||||||
|
const res: any = await getFaculties(data) |
||||||
|
console.log(res, 'res') |
||||||
|
FacultiesList.value = res.result |
||||||
|
} |
||||||
|
// 配置部门级联选择器 |
||||||
|
const props = { |
||||||
|
lazy: true, |
||||||
|
checkStrictly: true, |
||||||
|
emitPath: false, |
||||||
|
async lazyLoad(node: any, resolve: any) { |
||||||
|
await getFacultiesList({ |
||||||
|
primaryKey: 'key', |
||||||
|
pid: node.value, |
||||||
|
}) |
||||||
|
const nodes = FacultiesList.value.map((item: any) => ({ |
||||||
|
value: item.id, |
||||||
|
label: item.title, |
||||||
|
})) |
||||||
|
resolve(nodes) |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
const ragistered = async () => { |
||||||
|
for (const key in form) { |
||||||
|
if (form[key] === '') { |
||||||
|
ElMessage.warning(`${KeyValue[key]}不能为空`) |
||||||
|
return console.log(KeyValue[key], '不能为空') |
||||||
|
} else { |
||||||
|
if (key === 'mobile') { |
||||||
|
const phoneRegex = /^1[3-9]\d{9}$/ |
||||||
|
if (!phoneRegex.test(form[key])) { |
||||||
|
return ElMessage.warning(`手机号格式不正确`) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
if (!(form.password === form.confirmPassword)) { |
||||||
|
ElMessage.warning(`两次密码不同`) |
||||||
|
} |
||||||
|
console.log(form) |
||||||
|
let data = { |
||||||
|
checkKey: 1629428467008, |
||||||
|
departmentid:form.department, |
||||||
|
password:form.password, |
||||||
|
phone:form.mobile, |
||||||
|
realname:form.realname, |
||||||
|
smscode:form.smscode, |
||||||
|
username:form.username, |
||||||
|
workno:form.workno |
||||||
|
|
||||||
|
} |
||||||
|
const res:any = await sturegister(data) |
||||||
|
if(res.code === 200){ |
||||||
|
ElMessage.success(`注册成功`) |
||||||
|
$emits('backLogin') |
||||||
|
}else{ |
||||||
|
ElMessage.warning(res.message) |
||||||
|
} |
||||||
|
console.log(res) |
||||||
|
} |
||||||
|
const codeUrl = ref('') |
||||||
|
|
||||||
|
// 获取验证码 |
||||||
|
const getcodeinfo = async () => { |
||||||
|
const res: any = await getCode(1629428467008) |
||||||
|
codeUrl.value = res.result |
||||||
|
console.log(codeUrl.value) |
||||||
|
} |
||||||
|
getcodeinfo() |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.login-form { |
||||||
|
width: 640px; |
||||||
|
height: 820px; |
||||||
|
border-radius: 15px; |
||||||
|
background-color: #ffffff1a !important; |
||||||
|
padding: 70px 60px; |
||||||
|
backdrop-filter: blur(10px); |
||||||
|
box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2); |
||||||
|
.login-title { |
||||||
|
font-size: 32px; |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
.form { |
||||||
|
margin-top: 45px; |
||||||
|
padding: 0 40px; |
||||||
|
.captcha { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
position: relative; |
||||||
|
.code { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
right: 0; |
||||||
|
width: 105px; |
||||||
|
height: 100%; |
||||||
|
// background-color: pink; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.submit { |
||||||
|
width: 399px; |
||||||
|
height: 50px; |
||||||
|
text-align: center; |
||||||
|
line-height: 50px; |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 600; |
||||||
|
cursor: pointer; |
||||||
|
color: #fff; |
||||||
|
border-radius: 10px; |
||||||
|
margin-top: 35px; |
||||||
|
} |
||||||
|
} |
||||||
|
.btn { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
margin-top: 45px; |
||||||
|
div { |
||||||
|
width: 210px; |
||||||
|
height: 42px; |
||||||
|
text-align: center; |
||||||
|
line-height: 42px; |
||||||
|
font-size: 14px; |
||||||
|
cursor: pointer; |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
div:nth-child(1) { |
||||||
|
border: 1px solid #dbdbdb; |
||||||
|
color: #3c3c3c; |
||||||
|
} |
||||||
|
div:nth-child(2) { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
:deep(.el-form-item) { |
||||||
|
display: flex; |
||||||
|
flex-direction: row !important; |
||||||
|
height: 45px; |
||||||
|
margin-top: 25px; |
||||||
|
.el-input { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
input { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,165 @@ |
|||||||
|
<template> |
||||||
|
<!-- 比赛列表 --> |
||||||
|
<div class="container-1420" v-if="isLoading"> |
||||||
|
<div class="nav-title"> |
||||||
|
<div class="top">竞赛导航</div> |
||||||
|
<div class="bottom">30+项目登陆后报名</div> |
||||||
|
</div> |
||||||
|
<div class="race-list"> |
||||||
|
<div |
||||||
|
class="item" |
||||||
|
v-for="item in splietArr" |
||||||
|
:key="item.id" |
||||||
|
@click="toDetail(item.id)" |
||||||
|
> |
||||||
|
<div class="image"> |
||||||
|
<img :src="setImageUrl(item.compImg)" alt="" v-default-image /> |
||||||
|
</div> |
||||||
|
<div class="reac-info"> |
||||||
|
<div class="reac-title">{{ item.compName }}</div> |
||||||
|
<div class="reac-project"><div v-html="item.compName"></div></div> |
||||||
|
<!-- <div class="time"> |
||||||
|
报名时间:{{ item.starttime }}-{{ item.endtime }} |
||||||
|
</div> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="page"> |
||||||
|
<el-pagination background layout="prev, pager, next" :total="total" @change="handleSizeChange"/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { ref } from 'vue' |
||||||
|
import { getRaceList } from '@/api/race' |
||||||
|
import { useRouter } from 'vue-router' |
||||||
|
import { ElLoading } from 'element-plus' |
||||||
|
const router = useRouter() |
||||||
|
const reacProjectList = ref<any>([]) |
||||||
|
const splietArr = ref<any>([]) |
||||||
|
const isLoading = ref(false) |
||||||
|
const total = ref<any>(0) |
||||||
|
|
||||||
|
const getRaceProjectListEvent = async () => { |
||||||
|
let page = { |
||||||
|
column: 'createTime', |
||||||
|
order: 'desc', |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 8, |
||||||
|
} |
||||||
|
const loading = ElLoading.service({ |
||||||
|
lock: true, |
||||||
|
text: 'Loading', |
||||||
|
background: 'rgba(255, 255, 255, 0.7)', |
||||||
|
}) |
||||||
|
const res: any = await getRaceList(page) |
||||||
|
console.log(res) |
||||||
|
reacProjectList.value = res.result |
||||||
|
splietArr.value = reacProjectList.value.slice(0, 8) |
||||||
|
total.value = res.result.length |
||||||
|
console.log(total.value, 'reacProjectList.value ') |
||||||
|
|
||||||
|
isLoading.value = true |
||||||
|
loading.close() |
||||||
|
} |
||||||
|
getRaceProjectListEvent() |
||||||
|
const setImageUrl = (url: string) => { |
||||||
|
return import.meta.env.VITE_APP_BASE_API + url |
||||||
|
} |
||||||
|
// 前往比赛综述 |
||||||
|
const toDetail = (id: number) => { |
||||||
|
router.push({ |
||||||
|
path: '/race-info', |
||||||
|
query: { |
||||||
|
id, |
||||||
|
}, |
||||||
|
}) |
||||||
|
} |
||||||
|
// 分页 |
||||||
|
const handleSizeChange = (e:any) => { |
||||||
|
console.log(e); |
||||||
|
splietArr.value = reacProjectList.value.slice((e-1) * 8 ,(e-1) * 8 + 8) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.race-list { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(4, 1fr); |
||||||
|
grid-template-rows: repeat(2, 1fr); |
||||||
|
// gap: 10px; |
||||||
|
margin-top: 20px; |
||||||
|
.item { |
||||||
|
width: 340px; |
||||||
|
height: 360px; |
||||||
|
// background-color: pink; |
||||||
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06); |
||||||
|
cursor: pointer; |
||||||
|
border-radius: 10px; |
||||||
|
transition: all 0.2s; |
||||||
|
.image { |
||||||
|
width: 100%; |
||||||
|
height: 194px; |
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.reac-info { |
||||||
|
padding: 0 8px; |
||||||
|
.reac-title { |
||||||
|
margin-top: 19px; |
||||||
|
color: #c9c9c9; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
.reac-project { |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 600; |
||||||
|
color: #333333; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
.time { |
||||||
|
font-size: 14px; |
||||||
|
color: #8c8b8b; |
||||||
|
margin-top: 40px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.item:hover { |
||||||
|
transform: translateY(-5px); |
||||||
|
} |
||||||
|
.item:nth-child(n) { |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
.more { |
||||||
|
position: absolute; |
||||||
|
right: 20px; |
||||||
|
top: -20px; |
||||||
|
color: #0bd7c6; |
||||||
|
cursor: pointer; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
.nav-title { |
||||||
|
margin-top: 100px; |
||||||
|
color: #1e2033; |
||||||
|
.top { |
||||||
|
font-size: 40px; |
||||||
|
font-weight: 600; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.bottom { |
||||||
|
font-size: 16px; |
||||||
|
text-align: center; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
.page{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
margin-top: 25px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,177 @@ |
|||||||
|
<template> |
||||||
|
<el-card style="margin-top: 0.1302rem"> |
||||||
|
<template #header> |
||||||
|
<div style="font-size: 16px; font-weight: 600">我的奖项</div> |
||||||
|
</template> |
||||||
|
<el-table :data="tableData" border style="width: 100%"> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="annualid_dictText" |
||||||
|
label="年度" |
||||||
|
width="70" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="annalComp_dictText" |
||||||
|
label="年度比赛" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="annualCompP_dictText" |
||||||
|
label="年度比赛项目" |
||||||
|
/> |
||||||
|
<el-table-column align="center" prop="enrollCode" label="报名编号" /> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="awardname" |
||||||
|
label="奖项名称" |
||||||
|
width="90" |
||||||
|
/> |
||||||
|
<el-table-column align="center" prop="studentcode" label="学生学号" /> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="studentname" |
||||||
|
label="学生姓名" |
||||||
|
width="100" |
||||||
|
/> |
||||||
|
<el-table-column align="center" prop="sczs" label="证书"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<el-image |
||||||
|
:src="setImageUrl(row.sczs)" |
||||||
|
style="width: 0.2604rem; height: 0.2604rem" |
||||||
|
:preview-src-list="[setImageUrl(row.sczs)]" |
||||||
|
:z-index="100" |
||||||
|
></el-image> |
||||||
|
<!-- <img :src="setImageUrl(row.sczs)" alt=""> --> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="tj_dictText" |
||||||
|
label="是否推荐" |
||||||
|
width="90" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="tj_dictText" |
||||||
|
label="是否推荐" |
||||||
|
width="90" |
||||||
|
/> |
||||||
|
<el-table-column align="center" label="操作"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<el-button |
||||||
|
link |
||||||
|
type="primary" |
||||||
|
size="small" |
||||||
|
@click="uploadZs(row.id)" |
||||||
|
> |
||||||
|
上传证书 |
||||||
|
</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</el-card> |
||||||
|
<el-dialog |
||||||
|
v-model="dialogVisible" |
||||||
|
v-if="dialogVisible" |
||||||
|
title="上传证书" |
||||||
|
width="25%" |
||||||
|
:before-close="handleClose" |
||||||
|
> |
||||||
|
<el-form label-width="80" style="padding-right: 30px"> |
||||||
|
<el-form-item label="证书"> |
||||||
|
<el-upload |
||||||
|
v-model:file-list="fileList" |
||||||
|
action="#" |
||||||
|
list-type="picture-card" |
||||||
|
:auto-upload="false" |
||||||
|
> |
||||||
|
<el-icon><Plus /></el-icon> |
||||||
|
</el-upload> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<template #footer> |
||||||
|
<div class="dialog-footer"> |
||||||
|
<el-button @click="dialogVisible = false">取消</el-button> |
||||||
|
<el-button type="primary" @click="submit">确认</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||||
|
import { getAwardslist, uploadFileZs,saveSz } from '@/api/race' |
||||||
|
const dialogVisible = ref(false) |
||||||
|
const tableData = ref<any>([]) |
||||||
|
const getAwardListApi = async () => { |
||||||
|
const data = { |
||||||
|
column: 'createTime', |
||||||
|
order: 'desc', |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
} |
||||||
|
const res: any = await getAwardslist(data) |
||||||
|
tableData.value = res.result.records |
||||||
|
console.log(tableData.value, 'tableData.value') |
||||||
|
} |
||||||
|
getAwardListApi() |
||||||
|
const setImageUrl = (url: string) => { |
||||||
|
return import.meta.env.VITE_APP_BASE_API + '/sys/common/staticzs/' + url |
||||||
|
} |
||||||
|
|
||||||
|
const fileList = ref<any>([]) |
||||||
|
const zsUrl = ref('') |
||||||
|
const zsId = ref(0) |
||||||
|
const uploadZs = (id:any) => { |
||||||
|
zsId.value = id |
||||||
|
dialogVisible.value = true |
||||||
|
} |
||||||
|
const uploadFileEvent = async () => { |
||||||
|
const fromData = new FormData() |
||||||
|
fromData.append('file', fileList.value[0].raw) |
||||||
|
const res: any = await uploadFileZs(fromData) |
||||||
|
zsUrl.value = res.message |
||||||
|
} |
||||||
|
const submit = async () => { |
||||||
|
await uploadFileEvent() |
||||||
|
let data = { |
||||||
|
id:zsId.value, |
||||||
|
sczs:zsUrl.value |
||||||
|
} |
||||||
|
await saveSz(data) |
||||||
|
getAwardListApi() |
||||||
|
dialogVisible.value = false |
||||||
|
fileList.value = [] |
||||||
|
|
||||||
|
} |
||||||
|
const handleClose = () => { |
||||||
|
dialogVisible.value = false |
||||||
|
fileList.value = [] |
||||||
|
|
||||||
|
} |
||||||
|
watch( |
||||||
|
() => fileList.value, |
||||||
|
(newVal, oldVal) => { |
||||||
|
console.log(newVal, oldVal) |
||||||
|
if (newVal.length === 1) { |
||||||
|
;(document.querySelector('.el-upload') as HTMLElement).style.display = |
||||||
|
'none' |
||||||
|
} else { |
||||||
|
setTimeout(() => { |
||||||
|
;(document.querySelector('.el-upload') as HTMLElement).style.display = |
||||||
|
'flex' |
||||||
|
}, 0) |
||||||
|
} |
||||||
|
}, |
||||||
|
) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
:deep(.el-image-viewer__close) { |
||||||
|
top: 160px; |
||||||
|
} |
||||||
|
:deep(.el-table__cell) { |
||||||
|
position: static !important; // 解决el-image 和 el-table冲突层级冲突问题 |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue