Skip to content

杨炀 / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
76b186dd by 华明祺
Options

no message

1 parent 3c1ef169
Inline Side-by-side
Showing 3 changed files with 287 additions and 22 deletions
src/viewsPc/components/homeCalendar.vue
<template>
<div>
<el-calendar v-model="currentDate" :range="calendarRange">
<el-calendar ref="calendar" v-model="currentDate">
<template #header="{ date }">
<div class="father">
<span class="textDay">{{ date }}</span>
<el-button-group class="son">
<el-button size="small" type="info" @click="selectDateCalendar('prev-month')">
{{ language == 0 ? '上一月' : 'Last month' }}
</el-button>
<el-button size="small" type="info" @click="selectDateCalendar('today')">
{{ language == 0 ? '今天' : 'Today' }}
</el-button>
<el-button size="small" type="info" @click="selectDateCalendar('next-month')">
{{ language == 0 ? '下一月' : 'Next month' }}
</el-button>
</el-button-group>
</div>
</template>
<template #date-cell="data">
<div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)">
<div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)">
{{ data.data.day.slice(8, 10) }}
</div>
</template>
</el-calendar>
<div class="calendarList">
......@@ -15,42 +31,69 @@
<div class="esp mt5">{{ n.name }}</div>
</li>
</ul>
<el-empty v-if="schList.length== 0"
style="--el-empty-padding:0;--el-empty-description-margin-top:0"
:image="`/img/order_no.png`" :image-size="200"/>
<el-empty
v-if="schList.length== 0"
:image="`/img/order_no.png`"
:image-size="200" style="--el-empty-padding:0;--el-empty-description-margin-top:0"
/>
</div>
</div>
</template>
<script setup>
import {ref} from "vue";
import {dayjs} from "element-plus";
import {getIndexScheduleList} from "@/apiPc/common";
import {useRouter} from "vue-router";
import { onMounted, ref } from 'vue'
import { dayjs } from 'element-plus'
import { getIndexScheduleList } from '@/apiPc/common'
import { useRouter } from 'vue-router'
import { useStorage } from '@vueuse/core/index'
import { getMaList } from '@/apiPc/match'
const language = useStorage('language', 0)
const calendar = ref('')
const router = useRouter()
const currentDate = ref(new Date())
const calendarRange = ref([dayjs('2024-07-17').toDate(), dayjs('2024-07-17').toDate()])
const currentDate = ref()
const schList = ref([])
const loading = ref(false)
const query = ref({
// currentDate:dayjs().format('YYYY-MM-DD')
currentDate: '2024-07-17'
currentDate: dayjs().format('YYYY-MM-DD')
})
getScheduleList()
function getScheduleList() {
onMounted(async() => {
await handelGetMatch()
await getScheduleList()
})
async function handelGetMatch() {
const res = await getMaList({
type: '-1',
progressStatusCode: '-1',
pageNum: 1,
pageSize: 10
})
if (res.rows.length > 0) {
query.value.currentDate = res.rows[0].beginTime
currentDate.value = res.rows[0].beginTime
}
}
async function getScheduleList() {
loading.value = true
query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
getIndexScheduleList(query.value).then(res=>{
await getIndexScheduleList(query.value).then(res => {
loading.value = false
schList.value = res.data
})
}
function selectDate(date) {
console.log(dayjs(date).toDate())
console.log(query.value.currentDate)
query.value.currentDate = dayjs(date).toDate()
getScheduleList()
}
function goMatch(n) {
router.push({
name: 'matchDetail',
......@@ -62,9 +105,20 @@ function goMatch(n) {
}
})
}
const selectDateCalendar = (val) => {
if (!calendar.value) return
calendar.value.selectDate(val)
if (val == 'today') {
query.value.currentDate = dayjs().toDate()
getScheduleList()
}
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.el-calendar {
--el-calendar-border: none;
--el-calendar-cell-width: 40px;
......@@ -99,6 +153,7 @@ function goMatch(n) {
.primaryDate {
color: #fff;
//background: linear-gradient(90deg, #8623FC, #453DEA);
background: #000;
}
......@@ -119,7 +174,8 @@ function goMatch(n) {
height: 225px;
ul {
li {cursor: pointer;
li {
cursor: pointer;
background: #F6F9FE;
margin: 7px 0 7px 20px;
position: relative;
......@@ -129,6 +185,7 @@ function goMatch(n) {
font-size: 15px;
label {
//color: #453DEA;
color: #000;
margin-right: 15px;
......@@ -150,6 +207,7 @@ function goMatch(n) {
li::before {
content: '';
//background: linear-gradient(0deg, #8623FC, #453DEA);
background: #000;
border-radius: 50%;
width: 8px;
......@@ -174,6 +232,7 @@ function goMatch(n) {
li:hover {
color: #fff;
//background: linear-gradient(-90deg, #8623FC, #453DEA);
background: #000;
label {
......@@ -183,4 +242,23 @@ function goMatch(n) {
}
}
.father {
text-align: center;
position: relative;
width: 100%;
}
.son {
position: absolute;
right: 0;
//width: 230px;
}
//.textDay {
// font-weight: bold;
// background: linear-gradient(to right, #8623FC, #453DEA); /* 定义渐变方向和颜色 */
// -webkit-background-clip: text; /* 兼容 WebKit 浏览器 */
// background-clip: text; /* 标准语法 */
// -webkit-text-fill-color: transparent; /* 文字颜色透明 */
//}
</style>
......
src/viewsPc/components/homeCalendar_old.vue 0 → 100644
<template>
<div>
<el-calendar v-model="currentDate" :range="calendarRange">
<template #date-cell="data">
<div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)">
{{ data.data.day.slice(8, 10) }}
</div>
</template>
</el-calendar>
<div class="calendarList">
<ul v-loading="loading">
<li v-for="n in schList" :key="n.id" @click="goMatch(n)">
<label>{{ n.timeStr }}</label>
<div class="esp mt5">{{ n.name }}</div>
</li>
</ul>
<el-empty v-if="schList.length== 0"
style="--el-empty-padding:0;--el-empty-description-margin-top:0"
:image="`/img/order_no.png`" :image-size="200"/>
</div>
</div>
</template>
<script setup>
import {ref} from "vue";
import {dayjs} from "element-plus";
import {getIndexScheduleList} from "@/apiPc/common";
import {useRouter} from "vue-router";
const router = useRouter()
const currentDate = ref(new Date())
const calendarRange = ref([dayjs('2024-07-21').toDate(), dayjs('2024-07-21').toDate()])
const schList = ref([])
const loading = ref(false)
const query = ref({
// currentDate:dayjs().format('YYYY-MM-DD')
currentDate: '2024-07-21'
})
getScheduleList()
function getScheduleList() {
loading.value = true
query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
getIndexScheduleList(query.value).then(res=>{
loading.value = false
schList.value = res.data
})
}
function selectDate(date) {
console.log(dayjs(date).toDate())
console.log(query.value.currentDate)
query.value.currentDate = dayjs(date).toDate()
getScheduleList()
}
function goMatch(n) {
router.push({
name: 'matchDetail',
params: {
id: n.cptId
},
query: {
matchId: n.cptId
}
})
}
</script>
<style scoped lang="scss">
.el-calendar {
--el-calendar-border: none;
--el-calendar-cell-width: 40px;
text-align: center;
--el-text-color-regular: #8E8D94;
:deep(.el-calendar__header) {
justify-content: center;
padding: 0 0 10px
}
:deep(.el-calendar__body) {
border: 1px solid #F0F0F0;
padding: 0
}
:deep(.el-calendar-table .el-calendar-day) {
padding: 1px;
}
:deep(.el-calendar-table td.is-selected) {
background: transparent;
}
:deep(.el-calendar__button-group) {
display: none;
}
:deep(.el-calendar-table thead th) {
padding: 5px 0 0
}
.primaryDate {
color: #fff;
background: #000;
}
.date {
margin: auto;
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 30px;
font-weight: bold;
}
}
.calendarList {
border: 1px solid #F0F0F0;
padding: 12px 20px;
overflow: auto;
height: 225px;
ul {
li {cursor: pointer;
background: #F6F9FE;
margin: 7px 0 7px 20px;
position: relative;
padding: 13px;
border-radius: 10px;
font-weight: 500;
font-size: 15px;
label {
color: #000;
margin-right: 15px;
&::before {
content: '';
background: #fff;
left: -17px;
top: 0px;
bottom: 0;
margin: auto;
border-radius: 50%;
width: 2px;
height: 2px;
position: absolute;
z-index: 1
}
}
}
li::before {
content: '';
background: #000;
border-radius: 50%;
width: 8px;
height: 8px;
position: absolute;
left: -20px;
top: 0;
bottom: 0;
margin: auto;
z-index: 1;
}
li::after {
content: '';
left: -16px;
width: 1px;
height: 100%;
background: #EBEBEB;
position: absolute;
top: 20px
}
li:hover {
color: #fff;
background: #000;
label {
color: #fff;
}
}
}
}
</style>
vite.config.js
......@@ -70,13 +70,14 @@ export default defineConfig(({mode, command}) => {
rewrite: (p) => p.replace(/^\/dev-api\/ztx-train/, '')
},
'/dev-api/ztx-match': {
// target: 'http://192.168.1.118:8083',
target: 'https://wdsfwuxicenter.com/stage-api/',
target: 'http://192.168.1.118:8083',
// target: 'https://wdsfwuxicenter.com/stage-api/',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api\/ztx-match/, '')
},
'/dev-api/ztx-webSite': {
target: 'http://192.168.1.118:8082/',
// target: 'https://jijin.wtwuxicenter.com/stage-api',
// target: 'https://ces.2025wtcwuxi.com/stage-api/',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '')
......@@ -84,7 +85,7 @@ export default defineConfig(({mode, command}) => {
'/dev-api': {
target: 'http://192.168.1.118:8082/',
// target: 'http://192.168.1.131:8081/',
// target: 'https://ces.2025wtcwuxi.com/stage-api/',
// target: 'https://jijin.wtwuxicenter.com/stage-api',
// target: 'http://124.70.181.90:1880/stage-api',
// target: 'https://sys.2025wtcwuxi.com/stage-api/',
changeOrigin: true,
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!