Skip to content

杨炀 / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
b42d99dc by 杨炀
Options

add: 个人中心-机构-个人信息

1 parent 86c06939
Expand all
Inline Side-by-side
Showing 41 changed files with 541 additions and 450 deletions
src/api/login.js
......@@ -72,7 +72,16 @@ export function getCodeImg() {
timeout: 20000
})
}
export function forgetPassword(data) {
return request({
url: '/forgetPassword',
headers: {
isToken: false
},
method: 'post',
data: data
})
}
// 代退图形认证的获取手机验证码
export function captchaSmsWithCaptchaImage(data) {
return request({
......
src/apiPc/match.js
......@@ -93,9 +93,9 @@ export function getMyGroupList() {
}
// 根据Id获取我的团队
export function getGroupById(groupId) {
export function getGroupInfo() {
return request({
url: `ztx-match/league/group/getMyGroup/${groupId}`,
url: `/league/group/getMyGroup`,
method: 'get'
})
}
......@@ -110,7 +110,7 @@ export function regionsList() {
// 新建团队
export function saveMyGroup(data) {
return request({
url: `ztx-match/league/group/saveMyGroup`,
url: `/league/group/saveMyGroup`,
method: 'post',
data: data
})
......
src/assets/styles/index.scss
......@@ -221,3 +221,32 @@ aside {
.pt30{padding-top: 30px;}
.d-form-border{
border: 1px solid #E5E5E5;margin: 20px 0;padding: 20px}
.dlbox{background: url("@/assets/dance/ds_bg.png") no-repeat left;background-size: 100% 100%;
padding: 0 0 20px;margin: 0 0 20px;
dl{height: 120px;margin: 0;
dt{
height: 30px;
font-size: 16px;margin: 0 0 18px;
font-weight: 600;line-height: 30px;display: inline-block;padding:0 20px 0 14px;
background: linear-gradient(90deg, #8623FC, #453DEA);
border-radius: 0px 0px 15px 0px;color: #fff;}
}
dd{
font-size: 14px;line-height: 1.6;
color: #29343C;}
}
.xzbox{border: 2px solid #DDECFB;padding: 20px;line-height: 2;
color: #29343C;
font-size: 16px;}
.funcBtn{width: 100%;cursor: pointer;
background:url("@/assets/dance/funcBg.png") no-repeat left;
background-size: cover;
border-radius: 16px;box-shadow:var(--el-box-shadow-light);
text-align: center;position: relative;
margin: 24px 0 24px;padding: 0 0 1px;
img{margin: auto;position: relative;top: -20px}
h4{font-size: 18px;margin-top: -10px;}
&:hover{box-shadow:var(--el-box-shadow-dark);}
}
......
src/routerPc/cn.js
......@@ -486,10 +486,16 @@ export const constantRoutes = [
meta: { title: '个人中心' }
},
{
path: 'myTeam',
component: () => import('@/viewsPc/center/teamInfo'),
name: 'myTeam',
meta: { title: '我的团队' }
path: 'myPassword',
component: () => import('@/viewsPc/center/myPassword'),
name: 'myPassword',
meta: { title: '修改密码' }
},
{
path: 'myCertification',
component: () => import('@/viewsPc/center/myCertification'),
name: 'myCertification',
meta: { title: '团队认证' }
},
{
path: 'myMatch',
......
src/viewsPc/center/index.vue
......@@ -3,11 +3,9 @@
<div class="box">
<el-row :gutter="20">
<el-col :span="6">
<el-card class="mt30">
<el-card>
<div class="center-menu">
<!-- <el-avatar :size="100" :src="fillImgUrl(myform.avatar)" />-->
<h3>{{ myform.nickName }}</h3>
<ul>
<ul v-if="user.utype=='2'">
<li
v-for="(m, i) in menus"
:key="i"
......@@ -19,12 +17,24 @@
</a>
</li>
</ul>
<ul v-if="user.utype=='1'">
<li
v-for="(m, i) in menusPersonal"
:key="i"
:class="{ active: m.isActive }"
>
<a href="javascript:void(0)" @click="toInfo(m)">
<img :src="m.isActive ? m.picUrl2 : m.picUrl1">
{{ m.name }}
</a>
</li>
</ul>
</div>
</el-card>
</el-col>
<el-col :span="18">
<router-view />
<router-view :user="user"/>
</el-col>
</el-row>
</div>
......@@ -32,48 +42,107 @@
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { onMounted } from '@vue/runtime-core'
import {ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {onMounted} from '@vue/runtime-core'
import useUserStore from '@/store/modules/user'
import _ from 'lodash'
const route = useRoute()
const router = useRouter()
const myform = ref({})
const user = ref({})
const menus = ref([
{
name: '基础信息',
routeName: 'myInfo',
picUrl1: '/img/tool01.png',
picUrl2: '/img/tool01_dwn.png',
picUrl1: '/img/nav_26.png',
picUrl2: '/img/nav_26_dwn.png',
isActive: false
},
{
name: '修改密码',
routeName: 'myPassword',
picUrl1: '/img/nav_27.png',
picUrl2: '/img/nav_27.png',
isActive: false
},
{
name: '团队认证',
routeName: 'myCertification',
picUrl1: '/img/nav_32.png',
picUrl2: '/img/nav_32_dwn.png',
isActive: false
},
{
name: '选手管理',
routeName: 'myMatch',
picUrl1: '/img/nav_31.png',
picUrl2: '/img/nav_31_dwn.png',
isActive: false
},
{
name: '我的报名',
routeName: 'myMatch',
picUrl1: '/img/nav_28.png',
picUrl2: '/img/nav_28_dwn.png',
isActive: false
},
{
name: '我的预定',
routeName: 'myMatch',
picUrl1: '/img/nav_29.png',
picUrl2: '/img/nav_29_dwn.png',
isActive: false
},
{
name: '系统消息',
routeName: 'myTrain',
picUrl1: '/img/nav_30.png',
picUrl2: '/img/nav_30_dwn.png',
isActive: false
}
])
const menusPersonal = ref([
{
name: '基础信息',
routeName: 'myInfo',
picUrl1: '/img/nav_26.png',
picUrl2: '/img/nav_26_dwn.png',
isActive: false
},
{
name: '修改密码',
routeName: 'myTeam',
picUrl1: '/img/tool02.png',
picUrl2: '/img/tool02_dwn.png',
routeName: 'myPassword',
picUrl1: '/img/nav_27.png',
picUrl2: '/img/nav_27.png',
isActive: false
},
{
name: '我的报名',
routeName: 'myMatch',
picUrl1: '/img/nav_28.png',
picUrl2: '/img/nav_28_dwn.png',
isActive: false
},
{
name: '我的赛事',
name: '我的预定',
routeName: 'myMatch',
picUrl1: '/img/tool03.png',
picUrl2: '/img/tool03_dwn.png',
picUrl1: '/img/nav_29.png',
picUrl2: '/img/nav_29_dwn.png',
isActive: false
},
{
name: '我的培训',
name: '系统消息',
routeName: 'myTrain',
picUrl1: '/img/tool04.png',
picUrl2: '/img/tool04_dwn.png',
picUrl1: '/img/nav_30.png',
picUrl2: '/img/nav_30_dwn.png',
isActive: false
}
])
onMounted(() => {
myform.value = useUserStore().user || {}
user.value = useUserStore().user || {}
const currMenu = _.find(menus.value, (m) => {
return m.routeName === route.name
......@@ -108,19 +177,24 @@ const toInfo = (item) => {
padding: 0 15px;
}
.center-menu{
.center-menu {
text-align: center;
li{margin-bottom: 15px;}
li {
margin-bottom: 15px;
}
}
li img{
li img {
display: inline-block;
vertical-align:middle;
vertical-align: middle;
margin-right: 20px;
padding: 5px;
}
.active{
color:var(--el-color-primary);
background-color: #f9e7e8;
.active {
color: #fff;
background: linear-gradient(90deg, #8623FC, #453DEA);
border-radius: 20px;
}
</style>
......
src/viewsPc/center/myCertification.vue 0 → 100644
<template>
<el-card :body-style="{'padding':'0'}">
<div class="indexTitle"><h3 class="leftboderTT">团队认证</h3></div>
</el-card>
</template>
<script setup>
</script>
<style scoped lang="scss">
.indexTitle{margin: 20px 0 12px;padding: 0 20px 15px;border-bottom: 1px solid #e5e5e5;
h3{
font-size: 16px;
color:var(--el-color-primary);
}
}
</style>
src/viewsPc/center/myInfo.vue
<template>
<div class="grid-content">
<el-tabs v-model="activeName">
<el-tab-pane label="个人基本信息" name="first">
<el-form ref="myformRef" :model="myform" label-width="120px">
<el-row v-if="labelArr?.length>0">
<el-col :span="14">
<el-form-item label="姓名">
<el-input v-model="myform.realName" />
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="myform.sex">
<el-radio label="0" size="large">男</el-radio>
<el-radio label="1" size="large">女</el-radio>
</el-radio-group>
</el-form-item>
<!-- <el-form-item label="身份标签">-->
<!-- <el-checkbox-group v-model="myform.labelArr" size="small">-->
<!-- <el-checkbox-button label="0">运动员</el-checkbox-button>-->
<!-- <el-checkbox-button label="1">教练</el-checkbox-button>-->
<!-- <el-checkbox-button label="2">领队</el-checkbox-button>-->
<!-- <el-checkbox-button label="4">队医</el-checkbox-button>-->
<!-- <el-checkbox-button label="5">翻译</el-checkbox-button>-->
<!-- <el-checkbox-button label="6">官员</el-checkbox-button>-->
<!-- <el-checkbox-button label="3">其他</el-checkbox-button>-->
<!-- </el-checkbox-group>-->
<!-- </el-form-item>-->
<div>
<el-card :body-style="{'padding':'0'}">
<div class="indexTitle"><h3 class="leftboderTT">机构基础信息</h3></div>
<!-- uType字段 1 是个人 2是团体-->
<!-- {{user}}-->
<team-info :form="myform" v-if="user.utype=='2'"/>
<el-form-item label="证件类型">
<el-select v-model="myform.idcType" placeholder="请选择证件类型" style="width: 100%">
<el-option
v-for="item in certificates"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="证件号码">
<el-input v-model="myform.idcCode" @blur="checkCode" />
</el-form-item>
<el-form-item label="出生日期">
<el-date-picker
v-model="myform.birth"
style="width: 100%"
type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
placeholder="请选择出生日期"
/>
</el-form-item>
<el-form-item label="国籍" @change="changeCountryId">
<el-select v-model="myform.countryId" style="width: 100%" :disabled="myform.idcType==0">
<el-option v-for="item in countryList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="民族">
<el-select v-model="myform.nation" style="width: 100%;">
<el-option
v-for="item in nationList"
:key="item.name"
:label="item.name"
:value="item.name"
/>
</el-select>
</el-form-item>
<el-form-item label="联系方式">
<el-input v-model="myform.phone" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="头像" prop="picUrl">
<ImageUpload v-model="myform.picUrl" :limit="1" />
</el-form-item>
</el-col>
</el-row>
<el-row v-else>
<el-col :span="14">
<!-- <el-form-item label="身份标签">-->
<!-- <el-checkbox-group v-model="myform.labelArr" size="small">-->
<!-- <el-checkbox-button label="0">运动员</el-checkbox-button>-->
<!-- <el-checkbox-button label="1">教练</el-checkbox-button>-->
<!-- <el-checkbox-button label="2">领队</el-checkbox-button>-->
<!-- <el-checkbox-button label="4">队医</el-checkbox-button>-->
<!-- <el-checkbox-button label="5">翻译</el-checkbox-button>-->
<!-- <el-checkbox-button label="6">官员</el-checkbox-button>-->
<!-- <el-checkbox-button label="3">其他</el-checkbox-button>-->
<!-- </el-checkbox-group>-->
<!-- </el-form-item>-->
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="myform.sex">
<el-radio label="0" size="large">男</el-radio>
<el-radio label="1" size="large">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="国籍" @change="changeCountryId">
<el-select v-model="myform.countryId" style="width: 100%" :disabled="myform.idcType==0">
<el-option v-for="item in countryList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="民族">
<el-select v-model="myform.nation" style="width: 100%;">
<el-option
v-for="item in nationList"
:key="item.name"
:label="item.name"
:value="item.name"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="text-center">
<el-button type="primary" round @click="save">保存</el-button>
</div>
<el-divider />
<h3 style="padding: 0 20px;">所属参赛队信息</h3>
<el-row :gutter="20" style="padding: 0 20px">
<el-col v-for="(g,index) in groupList" :key="index" :span="8">
<div class="matchItem">
<div class="flex">
<div class="leftImg">
<img class="roundImg" :src="g.imgUrl" mode="aspectFill">
</div>
<div class="rightWen">
<div class="name">{{ g.name }}</div>
<div class="pp">地区：{{ g.regionStr }}
</div>
<div class="pp">类型：
<span>{{ g.typeStr }}</span>
</div>
</div>
</div>
<view class="bottomFunc">
<view class="textButtom" @click="exitGroup(g)">退出参赛队</view>
</view>
</div>
</el-col>
</el-row>
<el-empty v-if="groupList.length==0" description="还没有所属参赛队" />
</el-card>
</el-tab-pane>
</el-tabs>
</div>
</template>
......@@ -150,9 +18,18 @@ import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import * as match from '@/apiPc/match'
import { ElMessage, ElMessageBox } from 'element-plus'
import { nationList } from '@/assets/js/data'
import {getGroupInfo} from "@/apiPc/match";
import TeamInfo from "@/viewsPc/center/teamInfo";
const router = useRouter()
const { proxy } = getCurrentInstance()
const props = defineProps({
user:{
type:Object,
required:true
}
})
const activeName = ref('first')
const myform = ref({
idcType: 0,
......@@ -161,8 +38,7 @@ const myform = ref({
})
const labelArr = ref([])
const groupList = ref([])
const countryList = ref([])
const regionsList = ref([])
const certificates = ref([
{
value: '0',
......@@ -179,27 +55,14 @@ const certificates = ref([
])
onMounted(() => {
match.regionsList().then(res => {
regionsList.value = res.data
})
getCountryList()
getData()
})
function getData() {
match.getMyPersonInfo().then(res => {
match.getGroupInfo().then(res => {
myform.value = res.data
myform.value.labelArr = myform.value.label ? myform.value.label.split(',') : []
labelArr.value = myform.value.label ? myform.value.label.split(',') : []
groupList.value = myform.value.groups || []
// if (labelArr.value.length <= 0)proxy.$modal.msgError('请维护身份标签信息！')
})
}
function changeCountryId() {
if (myform.value.countryId != 240) {
myform.value.nation = '其他'
}
}
function checkCode() {
if (myform.value.idcType == 0 && myform.value.idcCode) {
if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(myform.value.idcCode))) {
......@@ -228,47 +91,18 @@ function checkCode() {
}
}
}
function getCountryList() {
match.countryList().then(res => {
countryList.value = res.data
})
}
function save() {
myform.value.label = myform.value.labelArr.toString()
match.saveMyBaseInfo(myform.value).then(res => {
ElMessage({
message: '保存成功',
type: 'success'
})
getData()
})
}
function exitGroup(g) {
ElMessageBox.confirm('确定退出这个参赛队吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
match.leaveGroup(g.id).then(response => {
ElMessage.success('操作成功')
getData()
})
})
}
</script>
<style scoped lang="scss">
.app-container {
background: #F5F7F9;
}
.grid-content {
background: #fff;
.indexTitle{margin: 20px 0 12px;padding: 0 20px 15px;border-bottom: 1px solid #e5e5e5;
h3{
font-size: 16px;
color:var(--el-color-primary);
}
}
:deep(.el-tabs__nav-wrap) {
padding: 0 15px;
}
</style>
......
src/viewsPc/center/myPassword.vue 0 → 100644
<template>
<div>
<el-card :body-style="{'padding':'0'}">
<div class="indexTitle"><h3 class="leftboderTT">修改密码</h3></div>
<div class="pd20">
<div class="d-form-border" style="margin-top: 0">
<el-form class="d-form" ref="pwdRef" :model="user" :rules="rules" label-width="120px"
style="max-width: 500px;margin: auto">
<el-form-item label="旧密码" prop="oldPassword">
<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input v-model="user.newPassword" placeholder="请设置8位以上大小写字母、数字、特殊符号" type="password"
show-password/>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
</el-form-item>
</el-form>
</div>
<el-row justify="center">
<el-button type="primary" class="btn-lineG" @click="submit">保存</el-button>
</el-row>
</div>
</el-card>
</div>
</template>
<script setup>
import {updateUserPwd} from '@/api/system/user'
import useUserStore from '@/store/modules/user'
import {reactive, ref, getCurrentInstance} from 'vue'
import {validPassword} from '@/utils/validate'
const show = ref(false)
const {proxy} = getCurrentInstance()
const userStore = useUserStore()
const user = reactive({
oldPassword: undefined,
newPassword: undefined,
confirmPassword: undefined
})
const equalToPassword = (rule, value, callback) => {
if (user.newPassword !== value) {
callback(new Error('两次输入的密码不一致'))
} else {
callback()
}
}
const validPwd = (rule, value, callback) => {
if (import.meta.env.DEV) {
callback()
} else {
if (!validPassword(value)) {
callback(new Error('请设置8位以上大小写字母、数字、特殊符号组合的密码'))
} else {
callback()
}
}
}
const rules = ref({
oldPassword: [{required: true, message: '旧密码不能为空', trigger: 'blur'}],
newPassword: [
{required: true, message: '新密码不能为空', trigger: 'blur'},
{validator: validPwd, trigger: 'blur'}
],
confirmPassword: [
{required: true, message: '确认密码不能为空', trigger: 'blur'},
{required: true, validator: equalToPassword, trigger: 'blur'}
]
})
/** 提交按钮 */
function submit() {
proxy.$refs['pwdRef'].validate(valid => {
if (valid) {
updateUserPwd(user.oldPassword, user.newPassword).then(response => {
proxy.$modal.msgSuccess('修改成功')
userStore.logOut().then(() => {
setTimeout(() => {
location.reload()
}, 1000)
})
})
}
})
};
</script>
<style scoped lang="scss">
.indexTitle {
margin: 20px 0 12px;
padding: 0 20px 15px;
border-bottom: 1px solid #e5e5e5;
h3 {
font-size: 16px;
color: var(--el-color-primary);
}
}
</style>
src/viewsPc/index.vue
......@@ -79,8 +79,8 @@
</div>
<!--赛事日历-->
<el-card :body-style="{'padding':'20px 20px'}">
<!-- <el-calendar v-model="calendarValue" :range="calendarRange">-->
<el-calendar>
<el-calendar v-model="calendarValue" :range="calendarRange">
<!-- <el-calendar>-->
<template #date-cell="data">
<div v-if="data.data.day.slice(8,10)==22" class="primaryDate date">22</div>
<div v-else class="date">
......@@ -417,8 +417,8 @@ const scores = ref([])
const nowscores = ref([])
const livelist = ref([])
const picList = ref([])
// const calendarValue = ref('2024-07-22')
// const calendarRange = ref(['2024-07-21','2024-07-27'])
const calendarValue = ref('2024-07-22')
const calendarRange = ref(['2024-07-21','2024-07-27'])
const showgg = ref(true)
onMounted(() => {
init()
......
src/viewsPc/login.vue
......@@ -88,7 +88,7 @@
<el-input
v-model.trim="changePasswordForm.username"
size="large"
auto-complete="off"
auto-complete="off" @change="changePasswordFormUsername"
placeholder="注册时使用的邮箱/手机号码"
>
......@@ -113,9 +113,9 @@
</el-button>
</template>
</el-input>
<div class="vcodeBox" :style="isShow?'height:240px':'height:0'">
<Vcode :show="isShow" type="inside" @success="codeSuccess" @close="codeClose" @fail='codeFail'></Vcode>
</div>
<!-- <div class="vcodeBox" :style="isShow?'height:240px':'height:0'">-->
<Vcode :zIndex="9999" :show="isShow" @success="codeSuccess"></Vcode>
<!-- </div>-->
</el-form-item>
<el-form-item prop="password">
......@@ -129,7 +129,7 @@
>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-form-item prop="confirmPassword">
<el-input
v-model.trim="changePasswordForm.confirmPassword"
type="password"
......@@ -146,7 +146,7 @@
size="large"
type="primary"
style="width:100%;"
@click.prevent="handleLogin"
@click.prevent="handleChangePassword"
>
<span>确定</span>
</el-button>
......@@ -159,7 +159,7 @@
<script setup>
import Vcode from "vue3-puzzle-vcode"
import CountDown from '@chenfengyuan/vue-countdown'
import { getCodeImg } from '@/api/login'
import {forgetPassword, getCodeImg} from '@/api/login'
import * as match from '@/apiPc/match'
import Cookies from 'js-cookie'
import useUserStore from '@/store/modules/user'
......@@ -183,6 +183,12 @@ const loginRules = {
password: [{ required: true, trigger: 'change', message: '请输入您账号密码' }],
code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
}
const changePasswordRules = {
username: [{ required: true, trigger: 'change', message: '请输入您的账号' }],
password: [{ required: true, trigger: 'change', message: '请输入您的密码' }],
confirmPassword: [{ required: true, trigger: 'change', message: '请再次输入您的密码' }],
code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
}
const show = ref(false)
const loginStatus = ref(0)
......@@ -284,7 +290,7 @@ function getCookie() {
}
}
function sendsmsMsg() {
if(!changePasswordForm.value.account){
if(!changePasswordForm.value.username){
ElMessage.error('请填写手机/邮箱')
return
}
......@@ -294,6 +300,30 @@ function sendsmsMsg() {
isShow.value = true
}
}
function codeSuccess() {
isShow.value = false
isCodeTrue.value = true
counting.value = true
}
function changePasswordFormUsername() {
isCodeTrue.value = false
}
function handleChangePassword() {
proxy.$refs.changePasswordRef.validate(valid => {
if (valid) {
if(isCodeTrue.value){
delete changePasswordForm.value.confirmPassword
forgetPassword(changePasswordForm.value).then(res=>{
ElMessage.success('操作成功，请登录')
close()
})
} else {
ElMessage.error('请发送验证码')
}
}
})
}
</script>
<style lang="scss" scoped>
......
src/viewsPc/match/components/matchInfo.vue
<template>
<div style="padding: 0 20px 20px">
<!-- 赛事详情-->
<!--赛事详情-->
<div class="indexTitle"><h3 class="leftboderTT">组织机构</h3></div>
<el-row :gutter="20">
<el-col :lg="8">
<div class="dlbox">
<dl>
<dt>主办单位</dt>
<dd>世界体育舞蹈联合会（WDSF）</dd>
<dd>亚洲体育舞蹈联合会（DSA）</dd>
<dd>中国体育联合会（CDSF）</dd>
</dl>
</div>
</el-col>
<el-col :lg="8">
<div class="dlbox">
<dl>
<dt>承办单位</dt>
<dd>江苏省体育总会</dd>
<dd>无锡市人民政府</dd>
</dl>
</div>
</el-col>
<el-col :lg="8">
<div class="dlbox">
<dl>
<dt>协办单位</dt>
<dd>无锡市体育局</dd>
<dd>江苏无锡经济开发区管理委员会</dd>
<dd>江苏省体育舞蹈运动协会</dd>
</dl>
</div>
</el-col>
<el-col :lg="8">
<div class="dlbox">
<dl>
<dt>运营单位</dt>
<dd>吉金无锡运动健康有限公司</dd>
</dl>
</div>
</el-col>
</el-row>
<div class="indexTitle"><h3 class="leftboderTT">报名须知</h3></div>
<div class="xzbox">
1.各单位限报1支队伍，每队需报领队1名（运动员可兼任），运动员限报4名<br>
2.参赛运动员必须是参赛企业的员工（包括劳务派遣和外籍员工）<br>
3.参赛运动员必须年满18至50周岁，50周岁以上者不建议参加此次比赛<br>
4.参赛运动员必须身体健康
</div>
<div class="indexTitle"><h3 class="leftboderTT">报名须知</h3></div>
<div class="xzbox" v-html="form.signKnow">
<div class="indexTitle"><h3 class="leftboderTT">竞赛项目</h3></div>
<div class="collapsebox">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="霹雳舞" name="1">
</div>
<div class="indexTitle" v-if="form.type==0"><h3 class="leftboderTT">赛事规程</h3></div>
<div class="xzbox" v-if="form.type==0" v-html="form.ruleUrl"></div>
<div class="indexTitle" v-if="form.type==1"><h3 class="leftboderTT">竞赛项目</h3></div>
<div class="collapsebox" v-if="form.type==1">
<el-collapse v-if="form.cptProjectList?.length > 0">
<el-collapse-item :title="p.name" :name="index" :key="index" v-for="(p,index) in form.cptProjectList">
<div class="pd20">
<table class="table">
<tr>
......@@ -135,171 +99,39 @@
</table>
</div>
</el-collapse-item>
<el-collapse-item title="拉丁舞" name="2">
<div class="pd20">
<table class="table">
<tr>
<td>日期</td>
<td>单元</td>
<td>组别</td>
<td>时间</td>
<td>阶段</td>
</tr>
<tr>
<td rowspan="4">2023/10/6(星期五)</td>
<td rowspan="4">BRK01</td>
<td>男子</td>
<td>14：30 - 15：30</td>
<td>资格赛</td>
</tr>
<tr>
<td>女子</td>
<td>14：30 - 15：30</td>
<td>资格赛</td>
</tr>
<tr>
<td>男子</td>
<td>14：30 - 15：30</td>
<td>循环赛</td>
</tr>
<tr>
<td>女子</td>
<td>14：30 - 15：30</td>
<td>循环赛</td>
</tr>
<tr>
<td rowspan="8">2023/10/7(星期六)</td>
<td rowspan="8">BRK02</td>
<td>男子</td>
<td>14：30 - 15：30</td>
<td>四分之一决赛</td>
</tr>
<tr>
<td>男子</td>
<td>14：30 - 15：30</td>
<td>四分之一决赛</td>
</tr>
<tr>
<td>女子</td>
<td>14：30 - 15：30</td>
<td>半决赛</td>
</tr>
<tr>
<td>女子</td>
<td>14：30 - 15：30</td>
<td>半决赛</td>
</tr>
<tr>
<td>男子</td>
<td>14：30 - 15：30</td>
<td>季军赛</td>
</tr>
<tr>
<td>女子</td>
<td>14：30 - 15：30</td>
<td>季军赛</td>
</tr>
<tr>
<td>男子</td>
<td>14：30 - 15：30</td>
<td>决赛</td>
</tr>
<tr>
<td>女子</td>
<td>14：30 - 15：30</td>
<td>决赛</td>
</tr>
</table>
</div>
</el-collapse-item>
<el-collapse-item title="国际舞" name="3">
<div class="pd20">
<table class="table">
<tr>
<td>日期</td>
<td>单元</td>
<td>组别</td>
<td>时间</td>
<td>阶段</td>
</tr>
<tr>
<td rowspan="4">2023/10/6(星期五)</td>
<td rowspan="4">BRK01</td>
<td>男子</td>
<td>14：30 - 15：30</td>
<td>资格赛</td>
</tr>
<tr>
<td>女子</td>
<td>14：30 - 15：30</td>
<td>资格赛</td>
</tr>
<tr>
<td>男子</td>
<td>14：30 - 15：30</td>
<td>循环赛</td>
</tr>
<tr>
<td>女子</td>
<td>14：30 - 15：30</td>
<td>循环赛</td>
</tr>
<tr>
<td rowspan="8">2023/10/7(星期六)</td>
<td rowspan="8">BRK02</td>
<td>男子</td>
<td>14：30 - 15：30</td>
<td>四分之一决赛</td>
</tr>
<tr>
<td>男子</td>
<td>14：30 - 15：30</td>
<td>四分之一决赛</td>
</tr>
<tr>
<td>女子</td>
<td>14：30 - 15：30</td>
<td>半决赛</td>
</tr>
<tr>
<td>女子</td>
<td>14：30 - 15：30</td>
<td>半决赛</td>
</tr>
<tr>
<td>男子</td>
<td>14：30 - 15：30</td>
<td>季军赛</td>
</tr>
<tr>
<td>女子</td>
<td>14：30 - 15：30</td>
<td>季军赛</td>
</tr>
<tr>
<td>男子</td>
<td>14：30 - 15：30</td>
<td>决赛</td>
</tr>
<tr>
<td>女子</td>
<td>14：30 - 15：30</td>
<td>决赛</td>
</tr>
</table>
</div>
</el-collapse-item>
</el-collapse>
<el-empty image="@/assets/img/order_no.png" image-size="228" v-if="form.cptProjectList?.length == 0" description=" "/>
</div>
</div>
</template>
<script setup>
const props = defineProps({
form:{
type:Object,
required:true
}
})
</script>
<style scoped>
<style scoped lang="scss">
.indexTitle{margin: 20px 0 12px;
h3{
font-size: 20px;
color:var(--el-color-primary);
}
}
.table{width: 100%;border-left: 1px solid #e1e1e1;border-top:1px solid #e1e1e1;
th{background: #eee;padding: 6px 10px;
border-right: 1px solid #e1e1e1;
border-bottom:1px solid #e1e1e1;
font-size: 15px;
}
td{padding: 6px 10px;border-right: 1px solid #e1e1e1;font-size: 15px;
border-bottom:1px solid #e1e1e1;vertical-align: middle;text-align: center;
span{margin-right: 10px}
span::after{content: ','}
span:last-child::after{content: ''}
}
}
</style>
......
src/viewsPc/match/components/matchNews.vue 0 → 100644
<template>
<el-card :body-style="{padding: '10px'}" class="mb20">
<div>
<div class="liveImgbox" @click="goDetail(newsList[0])">
<i class="ii">直播中</i>
<img :src="fillImgUrl_webSite(newsList[0]?.picUrl)">
</div>
</div>
<div class="indexTitle">
<h3 class="leftboderTT">赛事报道</h3>
<a class="more" @click="goList(query2.sortId,'专题报道')">MORE</a>
</div>
<div>
<div class="item" v-for="n in newsList2" :key="n.id">
<p class="esp">{{ n.name }}</p>
</div>
</div>
<div class="indexTitle"><h3 class="leftboderTT">赛事视频</h3>
<a class="more" @click="goList(10000006,'赛事视频')">MORE</a>
</div>
<div>
<div class="videoImgbox" @click="goDetail(newsList[1])">
<img :src="fillImgUrl_webSite(newsList[1]?.picUrl)">
</div>
</div>
<div class="indexTitle"><h3 class="leftboderTT">赛事图片</h3>
<a class="more" @click="goList(10000007,'赛事图片')">MORE</a>
</div>
<div>
<div class="picbox" @click="goDetail(newsList[0])"><img :src="fillImgUrl_webSite(newsList[0]?.picUrl)"/></div>
</div>
</el-card>
</template>
<script setup>
import {getNewsListById} from "@/apiPc/webSite";
import {onMounted, ref} from "vue";
const newsList = ref([])
const newsList2 = ref([])
const query1 = ref({
pageSize: 5,
pageNum: 1,
sortId: '10000006'
})
const query2 = ref({
pageSize: 3,
pageNum: 1,
sortId: '10000003'
})
onMounted(() => {
getList(query1.value)
getList2(query2.value)
})
const getList = (obj) => {
getNewsListById(obj).then(res => {
newsList.value = res.rows
})
}
const getList2 = (obj) => {
getNewsListById(obj).then(res => {
newsList2.value = res.rows
})
}
const goList = (sortId,name) => {
router.push({
path: `/news/list/${sortId}`,
query:{
kindName:name
}
})
}
</script>
<style scoped lang="scss">
.indexTitle{margin: 20px 0 12px;
h3{
font-size: 20px;
color:var(--el-color-primary);
}
}
.item:hover{cursor: pointer;color: var(--el-color-primary)}
.indexTitle a.more{top: 0;}
</style>
src/viewsPc/match/components/matchScheduleList.vue 0 → 100644
<template>
<div style="padding: 0 20px 20px">
<!--日程-->
<el-timeline>
<el-timeline-item
v-for="s in matchData.cptScheduleList"
:key="s.id" hide-timestamp
placement="top"
>
<p style="font-size: 16px;margin: 0">
{{ s.timeRange?.split(',')[0].substring(0, 16) }}
~
{{ s.timeRange?.split(',')[1].substring(0, 16) }}
</p>
<p style="font-size: 16px;">{{ s.name }}</p>
<p v-if="s.introduction" v-html="s.introduction"></p>
<div class="time-address">
<el-icon>
<Position />
</el-icon>
{{ s.address }}
</div>
</el-timeline-item>
</el-timeline>
<el-empty image="@/assets/img/order_no.png" image-size="228" v-if="matchData.cptScheduleList?.length==0" description=" " />
</div>
</template>
<script setup>
const props = defineProps({
matchData:{
type:Object,
required:true
}
})
</script>
<style scoped lang="scss">
.indexTitle{margin: 20px 0 12px;
h3{
font-size: 20px;
color:var(--el-color-primary);
}
}
.table{width: 100%;border-left: 1px solid #e1e1e1;border-top:1px solid #e1e1e1;
th{background: #eee;padding: 6px 10px;
border-right: 1px solid #e1e1e1;
border-bottom:1px solid #e1e1e1;
font-size: 15px;
}
td{padding: 6px 10px;border-right: 1px solid #e1e1e1;font-size: 15px;
border-bottom:1px solid #e1e1e1;vertical-align: middle;text-align: center;
span{margin-right: 10px}
span::after{content: ','}
span:last-child::after{content: ''}
}
}
</style>
src/viewsPc/match/detail_en.vue
......@@ -33,16 +33,16 @@
<div class="funcBtns">
<div>
<img src="@/assets/dance/ds01.png"/>
<h4>TICKET BOOKING</h4>
<img src="@/assets/dance/btn01.png"/>
<h4>酒店预约</h4>
</div>
<div>
<img src="@/assets/dance/ds02.png"/>
<h4>HOTEL RESERVATIONS</h4>
<img src="@/assets/dance/btn02.png"/>
<h4>接送预约</h4>
</div>
<div>
<img src="@/assets/dance/ds03.png"/>
<h4>MAKEUP APPOINTMENTS</h4>
<img src="@/assets/dance/btn03.png"/>
<h4>餐饮预约</h4>
</div>
</div>
</el-col>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!