Skip to content

杨炀 / dance-pc

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

no message

1 parent 0bcce423
Inline Side-by-side
Showing 15 changed files with 571 additions and 401 deletions
src/components/ImageUpload/index.vue
......@@ -2,56 +2,58 @@
<div class="component-upload-image">
<el-row>
<draggable
v-if="fileList.length > 1"
v-model="fileList"
item-key="index"
@end="draggableEnd"
v-if="fileList.length > 1"
v-model="fileList"
item-key="index"
@end="draggableEnd"
>
<template #item="{ element }">
<div class="fileItem el-upload-list__item is-success animated">
<img
:src="element.url"
alt=""
class="el-upload-list__item-thumbnail"
:src="element.url"
alt=""
class="el-upload-list__item-thumbnail"
>
<div class="hover-actions">
<span @click="handlePictureCardPreview(element)">
<el-icon><ZoomIn /></el-icon>
<el-icon><ZoomIn/></el-icon>
</span>
<span v-if="!disabled" @click="handleDelete(element)">
<el-icon><Delete /></el-icon>
<el-icon><Delete/></el-icon>
</span>
</div>
</div>
</template>
</draggable>
<el-upload
ref="imageUpload"
:multiple="limit > 1"
:action="actionUrl || uploadImgUrl"
:list-type="listType"
:on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:before-remove="handleDelete"
:show-file-list="showFileList"
:headers="headers"
:on-preview="handlePictureCardPreview"
:file-list="fileListInUpload"
:class="{ hide: fileList.length >= limit }"
:name="paramName"
:disabled="disabled"
:accept="accept"
ref="imageUpload"
:multiple="limit > 1"
:action="actionUrl || uploadImgUrl"
:list-type="listType"
:on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:before-remove="handleDelete"
:show-file-list="showFileList"
:headers="headers"
:on-preview="handlePictureCardPreview"
:file-list="fileListInUpload"
:class="{ hide: fileList.length >= limit }"
:name="paramName"
:disabled="disabled"
:accept="accept"
>
<el-icon v-if="listType=='picture-card'" class="avatar-uploader-icon"><plus /></el-icon>
<el-link v-else class="mr10" type="primary">
<el-icon>
<Upload/>
</el-icon>
{{ buttonText }}
</el-link>
<el-icon v-if="listType=='picture-card'" class="avatar-uploader-icon">
<plus/>
</el-icon>
<el-link v-else class="mr10" type="primary">
<el-icon>
<Upload/>
</el-icon>
{{ buttonText }}
</el-link>
</el-upload>
</el-row>
......@@ -70,23 +72,24 @@
</div>
<el-dialog
v-model="dialogVisible"
title="预览"
width="800px"
append-to-body
v-model="dialogVisible"
title="预览"
width="800px"
append-to-body
>
<img
:src="dialogImageUrl"
style="display: block; max-width: 100%; margin: 0 auto"
:src="dialogImageUrl"
style="display: block; max-width: 100%; margin: 0 auto"
>
</el-dialog>
</div>
</template>
<script setup>
import { getToken } from '@/utils/auth'
import { computed, getCurrentInstance, ref, watch } from 'vue'
import {getToken} from '@/utils/auth'
import {computed, getCurrentInstance, ref, watch} from 'vue'
import _ from 'lodash'
import {useStorage} from "@vueuse/core";
const props = defineProps({
modelValue: [String, Object, Array],
......@@ -130,7 +133,7 @@ const props = defineProps({
type: String,
default: ''
},
buttonText:{
buttonText: {
type: String,
default: '上传文件'
}
......@@ -148,8 +151,8 @@ const accept = computed(() => {
}).join(',')
})
const { proxy } = getCurrentInstance()
const emit = defineEmits(['update:modelValue','response'])
const {proxy} = getCurrentInstance()
const emit = defineEmits(['update:modelValue', 'response'])
const number = ref(0)
const uploadList = ref([])
const dialogImageUrl = ref('')
......@@ -158,39 +161,41 @@ const baseUrl = import.meta.env.VITE_APP_BASE_API
const uploadImgUrl = ref(
baseUrl + '/upload/uploadImgToLocalServer'
) // 上传的图片服务器地址
const headers = ref({ Authorization: 'Bearer ' + getToken() })
const headers = ref({Authorization: 'Bearer ' + getToken()})
const fileList = ref([])
const fileListInUpload = ref([])
const showTip = computed(
() => props.isShowTip && (props.fileType || props.fileSize)
() => props.isShowTip && (props.fileType || props.fileSize)
)
const language = useStorage('language', 0)
watch(
() => props.modelValue,
(val) => {
if (val) {
// 首先将值转为数组
const list = Array.isArray(val) ? val : props.modelValue.split(',')
// 然后将数组转为对象数组
fileList.value = list.map((item) => {
if (typeof item === 'string') {
if (item.indexOf('http') === -1) {
item = { name: item, url: baseUrl + item }
} else {
item = { name: item, url: item }
() => props.modelValue,
(val) => {
if (val) {
// 首先将值转为数组
const list = Array.isArray(val) ? val : props.modelValue.split(',')
// 然后将数组转为对象数组
fileList.value = list.map((item) => {
if (typeof item === 'string') {
if (item.indexOf('http') === -1) {
item = {name: item, url: baseUrl + item}
} else {
item = {name: item, url: item}
}
}
return item
})
if (fileList.value.length == 1) {
fileListInUpload.value = fileList.value
}
return item
})
if (fileList.value.length == 1) {
fileListInUpload.value = fileList.value
} else {
fileList.value = []
return []
}
} else {
fileList.value = []
return []
}
},
{ deep: true, immediate: true }
},
{deep: true, immediate: true}
)
// 上传前loading加载
......@@ -211,31 +216,37 @@ function handleBeforeUpload(file) {
}
if (!isImg) {
proxy.$modal.msgError(
`文件格式不正确, 请上传${props.fileType.join('/')}图片格式文件!`
language.value == 0 ?
`文件格式不正确, 请上传${props.fileType.join('/')}图片格式文件!` :
`The file format is incorrect, please upload ${props.fileType.join('/')} image format file!`
)
return false
}
if (props.fileSize) {
const isLt = file.size / 1024 / 1024 < props.fileSize
if (!isLt) {
proxy.$modal.msgError(`上传图片大小不能超过 ${props.fileSize} MB!`)
proxy.$modal.msgError(
language.value == 0 ?
`上传图片大小不能超过 ${props.fileSize} MB!` :
`Upload image size cannot exceed ${props.fileSize} MB!`
)
return false
}
}
proxy.$modal.loading('正在上传图片，请稍候...')
proxy.$modal.loading(language.value == 0 ? '正在上传图片，请稍候...' : 'Uploading images, please wait...')
number.value++
}
// 文件个数超出
function handleExceed() {
proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`)
proxy.$modal.msgError(language.value == 0 ? `上传文件数量不能超过 ${props.limit} 个!` : `Maximum file count: ${props.limit}`)
}
// 上传成功回调
function handleUploadSuccess(res, file) {
if(!actionUrl.value){
if (!actionUrl.value) {
if (res.code === 200) {
uploadList.value.push({ name: file.name, url: res.data || res.msg })
uploadList.value.push({name: file.name, url: res.data || res.msg})
uploadedSuccessfully()
} else {
number.value--
......@@ -264,8 +275,8 @@ function handleDelete(file) {
function uploadedSuccessfully() {
if (number.value > 0 && uploadList.value.length === number.value) {
fileList.value = fileList.value
.filter((f) => f.url !== undefined)
.concat(uploadList.value)
.filter((f) => f.url !== undefined)
.concat(uploadList.value)
uploadList.value = []
number.value = 0
emit('update:modelValue', listToString(fileList.value))
......@@ -279,7 +290,7 @@ function uploadedSuccessfully() {
// 上传失败
function handleUploadError() {
proxy.$modal.msgError('上传图片失败')
proxy.$modal.msgError(language.value == 0 ? '上传图片失败' : 'Upload failed')
proxy.$modal.closeLoading()
}
......@@ -311,6 +322,7 @@ function draggableEnd() {
:deep(.hide .el-upload--picture-card) {
display: none;
}
.fileItem {
position: relative;
width: 160px;
......@@ -319,11 +331,13 @@ function draggableEnd() {
margin: 0 20px 20px 0;
float: left;
}
.fileItem img {
width: 100%;
height: 100%;
object-fit: cover;
}
.fileItem .hover-actions {
background: rgba(0, 0, 0, 0.4);
width: 100%;
......@@ -334,6 +348,7 @@ function draggableEnd() {
color: #fff;
transition: top 0.2s;
text-align: center;
span {
cursor: pointer;
font-size: 26px;
......@@ -341,10 +356,12 @@ function draggableEnd() {
margin: 50px 5px;
display: inline-block;
}
span:hover {
background: rgba(255, 255, 255, 0.4);
}
}
.fileItem:hover .hover-actions {
top: 0;
}
......
src/viewsPc/booking/pay.vue
......@@ -353,10 +353,10 @@
<el-col :lg="12">
<div v-if="form.payDate">{{ language == 0 ? '支付时间' : 'Payment Time' }}：{{ form.payDate }}</div>
<div class="mt10">{{ language == 0 ? '支付方式' : 'Payment Method' }}：
<span v-if="form.paymentType=='1'">{{ language == 0 ? '微信支付' : 'WePay' }}</span>
<span v-else-if="form.paymentType=='3'">PayPal</span>
<span v-if="payType=='1'">{{ language == 0 ? '微信支付' : 'WePay' }}</span>
<span v-else-if="payType=='3'">PayPal</span>
<span
v-else-if="form.paymentType=='4'|| form.paymentType=='5'">{{
v-else-if="payType=='4'|| payType=='5'">{{
language == 0 ? '对公转账' : 'Bank Transfer'
}}</span>
<span v-else>--</span>
......@@ -502,7 +502,8 @@
<label style="width: 10em">
{{ language == 0 ? '上传缴费凭证：' : 'Upload proof:' }}
</label>
<file-upload v-model="form.pic" :is-show-tip="false" :limit="1"/>
<file-upload v-model="form.pic" :is-show-tip="false" :limit="1"
:button-text="language==0?'上传文件':'Upload'"/>
</div>
</el-col>
<el-col :lg="12">
......@@ -512,7 +513,8 @@
</el-col>
<!-- 如果没审批通过-->
<el-col :lg="24" align="center" justify="center">
<el-button round type="primary" @click="submitProof">提交凭证</el-button>
<el-button round type="primary" @click="submitProof">{{ language == '0' ? '提交凭证' : 'Submit Proof' }}
</el-button>
</el-col>
</el-row>
......@@ -577,7 +579,8 @@
</div>
</div>
</el-dialog>
<el-dialog v-model="showOfflineSuccessDialog" :title="language==0?'提示':'Tip'" width="460px">
<el-dialog v-model="showOfflineSuccessDialog" :title="language==0?'提示':'Tip'" width="460px"
@close="OfflineSuccessDialogClose">
<el-result
:sub-title="language==0?'请在7日内上传凭证，否则订单取消':'Please upload the payment receipt within 7 days, otherwise the order will be cancelled'"
:title="language==0?'订单已提交':'Order submitted'"
......@@ -696,6 +699,11 @@ function getData() {
if (type.value == 'car') {
return booking.getCarBilldetailbyId({orderId: orderId.value}).then(res => {
form.value = res.data
if (form.value.paymentType) {
payType.value = form.value.paymentType
}
if (language.value == 0) {
totalFee.value = res.data.total
} else {
......@@ -716,6 +724,11 @@ function getData() {
form.value = res.data
form.value.messageObj = JSON.parse(form.value.message)
form.value.extJsonObj = JSON.parse(form.value.extJson)
if (form.value.paymentType) {
payType.value = form.value.paymentType
}
console.log(form.value)
})
}
......@@ -726,6 +739,7 @@ function getData() {
} else {
totalFee.value = res.data.totalEn
}
form.value = res.data
form.value.messageObj = JSON.parse(form.value.message) || {}
form.value.extJsonObj = JSON.parse(form.value.extJson) || {}
......@@ -734,6 +748,9 @@ function getData() {
if (form.value.paymentType == '4' || form.value.paymentType == '5') {
hideconfirmbtn.value = true
}
if (form.value.paymentType) {
payType.value = form.value.paymentType
}
}).catch(err => {
console.log(err)
errorBox.value = true
......@@ -757,6 +774,9 @@ function getData() {
async function getTicketOrderInfoFN() {
const res = await getTicketOrderInfo({orderId: orderId.value})
form.value = res.data
if (form.value.paymentType) {
payType.value = form.value.paymentType
}
form.value.extJson = JSON.parse(form.value.extJson)
try {
form.value.extJson.ticketDate = JSON.parse(form.value.extJson.ticketDate)
......@@ -772,7 +792,6 @@ async function getTicketOrderInfoFN() {
}
console.log(form.value)
}
async function getDetail(activeId) {
......@@ -876,6 +895,9 @@ function MakeUpOrder() {
form.value = res.data
totalFee.value = language.value == 0 ? form.value.total : form.value.totalEn
matchId.value = form.value.activeId
if (form.value.paymentType) {
payType.value = form.value.paymentType
}
MakeUpIno()
console.log(res)
}).catch(err => {
......@@ -900,6 +922,9 @@ function photographyOrder() {
return booking.getPhotoOrderInfo({orderId: orderId.value}).then(res => {
form.value = res.data
totalFee.value = language.value == 0 ? form.value.total : form.value.totalEn
if (form.value.paymentType) {
payType.value = form.value.paymentType
}
photographyInfo()
}).catch(err => {
console.log(err)
......@@ -1043,6 +1068,11 @@ const submitProof = () => {
getData()
})
}
function OfflineSuccessDialogClose() {
window.location.reload()
}
</script>
<style lang="scss" scoped>
......
src/viewsPc/center/info/reservationInfo.vue
......@@ -120,9 +120,14 @@
<el-button v-if="b.status == '0' &&!min" class="mb10"
plain round size="small" type="primary" @click="goDetail(b)">
<span
v-if="b.paymentType=='4'||b.paymentType=='5'">{{ language == 0 ? '上传凭证' : 'Upload Receipt' }}</span>
v-if="b.paymentType=='4'||b.paymentType=='5'">{{
language == 0 ? '上传凭证' : 'Upload Payment Proof'
}}</span>
<span v-else>{{ language == 0 ? '支付' : 'Pay' }}</span>
</el-button>
<el-button class="mb10" plain round size="small" type="warning" @click="downInvoice(b)">
<span>{{ language == 0 ? '下载缴费单' : 'Download Invoice' }}</span>
</el-button>
<el-button v-if="b.viewStatus==0 &&!min" class="mb10" plain round size="small" type="warning"
@click="cancel(b)">
{{ language == 0 ? '取消订单' : 'Cancel Order' }}
......@@ -157,13 +162,15 @@ defineProps({
})
const {proxy} = getCurrentInstance()
const emit = defineEmits(['refresh'])
const language = useStorage('language', 0)
const router = useRouter()
function finish(bill) {
bill.status = '2'
// getList()
// emit('refresh')
}
function Rebook(row) {
......@@ -203,11 +210,12 @@ const cancel = (row) => {
//取消订单
proxy.$modal.confirm(language.value == 0 ? '确定取消订单吗 ?' : `Are you sure to cancel the order?`).then(() => {
return cancelOrder2(row.id).then(res => {
getList()
ElMessage({
message: language.value == 0 ? '操作成功' : 'Successful operation!',
type: 'success'
})
emit('refresh')
})
})
}
......@@ -215,15 +223,22 @@ const cancel = (row) => {
const unsubscribe = (row) => {
proxy.$modal.confirm(language.value == 0 ? `确定退款吗 ?` : 'Are you sure to refund?').then(() => {
return cancelOrder(row.id).then(res => {
getList()
ElMessage({
message: language.value == 0 ? '已提交退款，请等待审核!' : 'Refund has been submitted, please wait for review!',
type: 'success'
})
emit('refresh')
})
})
}
const downInvoice = (row) => {
proxy.download(``, {
id: row.id
}, `Invoice_${new Date().getTime()}.pdf`)
}
</script>
<style lang="scss" scoped>
......
src/viewsPc/center/info/visaInfo.vue
......@@ -13,17 +13,18 @@
</div>
<el-row align="middle" class="pd20 mt10" justify="space-between">
<el-col :lg="9" :md="12" :sm="12" :xs="24">
<el-col :lg="8" :md="12" :sm="12" :xs="24">
<div>
<p class="text-warning" style="margin: -10px 0 8px"> {{ b.invitationTypeName }} </p>
<h3 class="name">{{ b.fullName }}</h3>
<p>{{ b.email }}</p>
<p>{{ b.createTime }}</p>
</div>
</el-col>
<el-col :lg="3" :md="6" :sm="6" :xs="6" class="text-center">
<span class="text-warning"> {{ b.invitationTypeName }} </span>
<el-col :lg="8" :md="12" :sm="12" :xs="24" >
<span class="text-danger" v-if="b.remarks2">Reason for rejection: {{ b.remarks2 }} </span>
</el-col>
<el-col :lg="6" :md="16" :sm="16" :xs="16">
<el-col :lg="8" :md="24" :sm="24" :xs="24">
<div class="text-right">
<el-button class="mb10" :disabled="b.emailFlag!='1'" plain round size="small" type="primary"
@click="handleDownload(b)">
......
src/viewsPc/center/myPassword.vue
<template>
<div class="mb20">
<el-card :body-style="{'padding':'0'}">
<div class="indexTitle"><h3 class="leftboderTT">{{ language==0?'修改密码':'Change Password' }}</h3></div>
<div class="indexTitle"><h3 class="leftboderTT">{{ language == 0 ? '修改密码' : 'Change Password' }}</h3></div>
<div class="pd20">
<div class="d-form-border" style="margin-top: 0">
......@@ -9,20 +9,29 @@
label-width="120px" :label-position="language==0?'left':'top'"
style="max-width: 500px;margin: auto">
<el-form-item :label="language==0?'旧密码':'Old Password'" prop="oldPassword">
<el-input v-model="user.oldPassword" :placeholder="language==0?'请输入旧密码':''" type="password" show-password/>
<el-input v-model="user.oldPassword"
:placeholder="language==0?'请输入旧密码':'Please enter your old password'" type="password"
show-password/>
</el-form-item>
<el-form-item :label="language==0?'新密码':'New Password'" prop="newPassword">
<el-input v-model="user.newPassword" :placeholder="language==0?'请设置8位以上大小写字母、数字、特殊符号':''" type="password"
<el-input v-model="user.newPassword"
:placeholder="language==0?'请设置8位以上大小写字母、数字、特殊符号':'Please set 8 characters or more, including uppercase and lowercase letters, numbers, and special characters'"
type="password"
show-password/>
</el-form-item>
<el-form-item :label="language==0?'确认密码':'Confirm Password'" prop="confirmPassword">
<el-input v-model="user.confirmPassword" :placeholder="language==0?'请确认新密码':''" type="password" show-password/>
<el-form-item :label="language==0?'确认密码':'Confirm Password'" prop="confirmPassword" style="margin-top: 30px">
<el-input v-model="user.confirmPassword"
:placeholder="language==0?'请确认新密码':'Please confirm your new password'" type="password"
show-password/>
</el-form-item>
</el-form>
</div>
<el-row justify="center">
<el-button type="primary" class="btn-lineG" round @click="submit">{{ language==0?'保存':'Save' }}</el-button>
<el-button type="primary" class="btn-lineG" round @click="submit">{{
language == 0 ? '保存' : 'Save'
}}
</el-button>
</el-row>
</div>
</el-card>
......@@ -35,6 +44,7 @@ import useUserStore from '@/store/modules/user'
import {reactive, ref, getCurrentInstance} from 'vue'
import {validPassword} from '@/utils/validate'
import {useStorage} from "@vueuse/core/index";
const language = useStorage('language', 0)
const show = ref(false)
......@@ -49,7 +59,7 @@ const user = reactive({
const equalToPassword = (rule, value, callback) => {
if (user.newPassword !== value) {
callback(new Error('两次输入的密码不一致'))
callback(new Error(language.value == 0 ? '两次输入的密码不一致' : 'The two passwords are inconsistent'))
} else {
callback()
}
......@@ -60,7 +70,7 @@ const validPwd = (rule, value, callback) => {
callback()
} else {
if (!validPassword(value)) {
callback(new Error('请设置8位以上大小写字母、数字、特殊符号组合的密码'))
callback(new Error(language.value==0? '请设置8位以上大小写字母、数字、特殊符号组合的密码':'Please set 8 characters or more, including uppercase and lowercase letters, numbers, and special characters'))
} else {
callback()
}
......@@ -68,13 +78,13 @@ const validPwd = (rule, value, callback) => {
}
const rules = ref({
oldPassword: [{required: true, message: language.value==0?'旧密码不能为空':'required', trigger: 'blur'}],
oldPassword: [{required: true, message: language.value == 0 ? '旧密码不能为空' : 'required', trigger: 'blur'}],
newPassword: [
{required: true, message: language.value==0?'新密码不能为空':'required', trigger: 'blur'},
{validator: validPwd, trigger: 'blur'}
{required: true, message: language.value == 0 ? '新密码不能为空' : 'required', trigger: 'blur'},
{required: true, validator: validPwd, trigger: 'blur'}
],
confirmPassword: [
{required: true, message: language.value==0?'确认密码不能为空':'required', trigger: 'blur'},
{required: true, message: language.value == 0 ? '确认密码不能为空' : 'required', trigger: 'blur'},
{required: true, validator: equalToPassword, trigger: 'blur'}
]
})
......@@ -84,7 +94,7 @@ function submit() {
proxy.$refs['pwdRef'].validate(valid => {
if (valid) {
updateUserPwd(user.oldPassword, user.newPassword).then(response => {
proxy.$modal.msgSuccess(language.value==0?'修改成功':'password is changed!')
proxy.$modal.msgSuccess(language.value == 0 ? '修改成功' : 'password is changed!')
userStore.logOut().then(() => {
setTimeout(() => {
......
src/viewsPc/center/myReservation.vue
......@@ -9,7 +9,7 @@
<!-- <el-button class="fr" type="primary" plain @click="toInvoice">{{ language==0?'我的发票':'My Invoice' }}</el-button>-->
</div>
<el-empty v-if="list?.length == 0" :image="`/img/order_no.png`" :image-size="228"/>
<reservation-info v-else :list="list"></reservation-info>
<reservation-info v-else :list="list" @refresh="getList"></reservation-info>
</el-card>
<div class="pd20"></div>
</div>
......
src/viewsPc/components/homeCalendar.vue
<template>
<div>
<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>
<match-calendar @select-date="getScheduleList"></match-calendar>
</template>
<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)">
......@@ -32,68 +10,32 @@
</li>
</ul>
<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"
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 { 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'
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import MatchCalendar from "/@/viewsPc/components/matchCalendar.vue";
import {getIndexScheduleList} from "/@/apiPc/common";
const language = useStorage('language', 0)
const calendar = ref('')
const router = useRouter()
const currentDate = ref()
const schList = ref([])
const loading = ref(false)
const query = ref({
currentDate: dayjs().format('YYYY-MM-DD')
})
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() {
async function getScheduleList(params) {
loading.value = true
query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
await getIndexScheduleList(query.value).then(res => {
await getIndexScheduleList(params).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',
......@@ -106,67 +48,10 @@ 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 lang="scss" scoped>
.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: linear-gradient(90deg, #8623FC, #453DEA);
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;
......@@ -241,24 +126,4 @@ const selectDateCalendar = (val) => {
}
}
}
.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/matchCalendar.vue 0 → 100644
<template>
<el-calendar ref="calendarRef" 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)">
{{ data.data.day.slice(8, 10) }}
</div>
</template>
</el-calendar>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { dayjs } from 'element-plus'
import { useStorage } from '@vueuse/core/index'
import { getMaList } from '@/apiPc/match'
const emit = defineEmits( ['selectDate'])
const language = useStorage('language', 0)
const calendarRef = ref(null)
const currentDate = ref()
const query = ref({
currentDate: dayjs().format('YYYY-MM-DD')
})
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) {
currentDate.value = dayjs(res.rows[0].beginTime).toDate()
query.value.currentDate = dayjs(res.rows[0].beginTime).format('YYYY-MM-DD')
}
}
async function getScheduleList() {
emit('selectDate', query.value)
}
function selectDate(date) {
query.value.currentDate = date
getScheduleList()
}
const selectDateCalendar = (val) => {
if (!calendarRef.value) return
calendarRef.value.selectDate(val)
if (val == 'today') {
query.value.currentDate = dayjs().format('YYYY-MM-DD')
getScheduleList()
}
}
</script>
<style lang="scss" scoped>
.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: linear-gradient(90deg, #8623FC, #453DEA);
background: #000;
}
.date {
margin: auto;
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 30px;
font-weight: bold;
}
}
.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/matchCj.vue 0 → 100644
<template>
<el-card class="mt20 mb20" v-for="(n,index) in cjList">
<div class="leftboderTT">{{ language == 0 ? n.title : n.en_title }}</div>
<div v-for="(m,jndex) in n.list">
<h3 class="text-center">{{ m.title }}</h3>
<div class="tablebody">
<table class="table table-striped">
<thead>
<tr class="bg-lineg">
<td class="text-center" style="width: 120px;">{{ language == 0 ? '名次' : 'RANK' }}</td>
<td class="text-center">{{ language == 0 ? '组合' : 'COUPLE' }}</td>
<td class="text-center w15">{{ language == 0 ? '国家' : 'COUNTRY' }}</td>
<td class="text-center w15">START #</td>
<td class="text-center w15" v-if="index>0">BASE</td>
<td class="text-center w15" v-if="index>0">POINTS</td>
</tr>
</thead>
<tbody>
<tr v-for="(l,kndex) in m.rows">
<td class="text-center">{{ l.RANK }}</td>
<td class="text-center">{{ l.COUPLE }}</td>
<td class="text-center">{{ l.COUNTRY }}</td>
<td class="text-primary text-center">{{ l.START }}</td>
<td class="text-center" v-if="index>0">{{ l.BASE }}</td>
<td v-if="index>0" class="text-primary text-center">{{ l.POINTS }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</el-card>
</template>
<script setup>
import {cjList} from '@/assets/js/data'
import {useStorage} from "@vueuse/core/index";
const language = useStorage('language', 0)
</script>
<style scoped lang="scss">
.leftboderTT {
margin: 0 0 20px;
color: var(--el-color-primary);
font-size: 20px;
}
h3 {
background: #F5F0FF;
margin: 0;
padding: 10px 0;
color: var(--el-color-primary);
font-size: 18px;
}
.table {
border-spacing: 0;
border-collapse: collapse;
width: 100%;
max-width: 100%;
margin-bottom: 20px;
td, th {
padding: 8px;
font-size: 14px;
}
}
:deep(.table-striped > tbody > tr:nth-of-type(odd)) {
background: #F6F9FE;
}
.w15 {
width: 15%;
}
</style>
src/viewsPc/index.vue
......@@ -105,7 +105,7 @@
</div>
<div class="mb30">
<home-weather-bar/>
<home-weather-bar lang=""/>
</div>
<div class="box">
......
src/viewsPc/match/components/affix-invitation.vue
......@@ -20,19 +20,20 @@
Thank you so much for your kind patience.
</h4>
<div class="red">To check your application status, please go to Account > Personal > Visa Review ReCEBOA Ror refer to your email for any updates..
<div class="red">To check your application status, please go to Account > Personal > Visa Review Record, or
refer to your email for any updates.
</div>
</div>
<el-form :model="form" :rules="rules" ref="iformRef" label-position="top" v-else>
<el-form-item :label="language==0?'申请人类别':'Applicant Type'" required prop="applicatType">
<el-select v-model="form.applicatType">
<el-select v-model="form.applicatType" @change="changeApplicatType">
<el-option label="MNA/Team" value="1"/>
<el-option label="Technical Officials" value="2"/>
<el-option label="WT Staff" value="3"/>
<el-option label="Supplier" value="4"/>
<el-option label="Other" value="5"/>
<el-option label="Technical Official" value="2"/>
<el-option label="WT Team" value="3"/>
<!-- <el-option label="Supplier" value="4"/>-->
<el-option label="Other(not listed above)" value="5"/>
</el-select>
<el-input class="mt10" v-if="form.applicatType==5" placeholder="Please specify" v-model="form.remarks"/>
</el-form-item>
......@@ -45,10 +46,11 @@
<el-form-item v-if="form.invitationType=='2'" label="Proof of Employment" required prop="invitationFileArr">
<div class="red">Proof of employment is required for TE/PU invitation letters.</div>
<div class="red">
This document must be issued by the invitee's association and must bear an official stamp orsignature.)
This document must be issued by the invitee's association and must bear an official stamp or signature.
</div>
<br/>
<file-upload v-model="form.invitationFileArr" :is-show-tip="false" :limit="1"></file-upload>
<file-upload v-model="form.invitationFileArr" :is-show-tip="false" :limit="1"
:button-text="language==0?'上传':'Upload'"></file-upload>
</el-form-item>
<el-form-item :label="language==0?'是否需要中文邀请函':'Do you need a Chinese invitation？'" required
prop="chinese">
......@@ -150,18 +152,36 @@
</template>
<template #default="scope">
<el-select v-model="scope.row.position" size="small">
<el-option label="Head Of Team" value="Head Of Team"/>
<el-option label="Head Coach" value="Head Coach"/>
<el-option label="Manager" value="Manager"/>
<el-option label="Coach" value="Coach"/>
<el-option label="Trainer" value="Trainer"/>
<el-option label="Team Doctor" value="Team Doctor"/>
<el-option label="Team Physiotherepaist" value="Team Physiotherepaist"/>
<el-option label="Competitor" value="Competitor"/>
<el-option label="MNA Official" value="MNA Official"/>
<el-option label="MNA Guest" value="MNA Guest"/>
<!--MNA/Team-->
<template v-if="form.applicatType=='1'">
<el-option label="Head Of Team" value="Head Of Team"/>
<el-option label="Head Coach" value="Head Coach"/>
<el-option label="Manager" value="Manager"/>
<el-option label="Coach" value="Coach"/>
<el-option label="Trainer" value="Trainer"/>
<el-option label="Team Doctor" value="Team Doctor"/>
<el-option label="Team Physiotherepaist" value="Team Physiotherepaist"/>
<el-option label="Competitor" value="Competitor"/>
<el-option label="MNA Official" value="MNA Official"/>
<el-option label="MNA Guest" value="MNA Guest"/>
</template>
<!--Technical Official-->
<template v-if="form.applicatType=='2'">
<el-option label="International Referee" value="International Referee"/>
<el-option label="Technical Delegate" value="Technical Delegate"/>
<el-option label="CSB member" value="CSB member"/>
</template>
<!--WT Team-->
<template v-if="form.applicatType=='3'">
<el-option label="WT Director" value="WT Director"/>
<el-option label="WT Manager" value="WT Manager"/>
<el-option label="WT Assistant Manager" value="WT Assistant Manager"/>
<el-option label="WT Coordinator" value="WT Coordinator"/>
</template>
<el-option label="Other (please specify)" value="other"/>
</el-select>
<el-input v-if="scope.row.position=='other'" placeholder="Please specify" v-model="scope.row.remarks"
size="small"></el-input>
</template>
</el-table-column>
<el-table-column prop="lastName" :label="'lastName'" min-width="100">
......@@ -205,7 +225,7 @@
</template>
<template #default="scope">
<el-select v-model="scope.row.nationality" size="small" filterable>
<el-option v-for="item in countrys" :key="item.id" :label="language==0?item.name:item.enName"
<el-option v-for="item in countrys" :key="item.id" :label="item.noc"
:value="item.id"/>
</el-select>
</template>
......@@ -290,8 +310,7 @@
<script setup>
import {useStorage} from "@vueuse/core/index";
import {getCurrentInstance, watch} from "vue";
import {nextTick} from "@vue/runtime-core";
import {getCurrentInstance, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {addInvitation, associationList, countryList, getVisaInfo, sendVisaCode} from "@/apiPc/match";
import ImageUpload from '@/components/ImageUpload/index.vue'
......@@ -386,6 +405,10 @@ const submit = () => {
ElMessage.warning(`Please specify ${row.fristName}'s position`)
return
}
if (row.position == 'other' && !row.remarks) {
ElMessage.warning(`Please specify ${row.fristName}'s position`)
return;
}
}
if (form.value.files && Array.isArray(form.value.files)) {
......@@ -419,8 +442,8 @@ const submit = () => {
}
const getPassportInfo = (res) => {
if (res.data) {
var obj = {
if (res.code == 200) {
let obj = {
position: '',
lastName: res.data.surname,
fristName: res.data.givenName,
......@@ -434,7 +457,25 @@ const getPassportInfo = (res) => {
}
form.value.cptVisaInfoBos.push(obj)
} else {
ElMessage.error(res.msg)
if(res.data) {
ElMessage.error(res.data.code)
let obj = {
position: '',
lastName: '',
fristName: '',
sex: '',
birthday: '',
nationality: '',
passportNo: '',
issueDate: '',
expiryDate: '',
passportCopy: res.data.pic
}
form.value.cptVisaInfoBos.push(obj)
}else{
ElMessage.error(res.msg)
}
}
}
......@@ -461,6 +502,13 @@ function sendEmail() {
}
})
}
function changeApplicatType() {
_.each(form.value.cptVisaInfoBos || [], (item) => {
item.position = ''
})
}
</script>
<style scoped lang="scss">
......
src/viewsPc/register/components/utype3.vue
......@@ -20,7 +20,7 @@
并接收报名审核结果、支付账单、签证邀请函等相关信息。）
</div>
<div v-else class="tip">
Please fill in the correct email， which cannot be changed after the registration is completed. The email will be used as your login account and to receive relevant information including results of registration review, payment bills, visa invitation letters, etc.
Please fill in the correct email, which cannot be changed after the registration is completed. The email will be used as your login account and to receive relevant information including results of registration review, payment bills, visa invitation letters, etc.
</div>
</el-form-item>
<el-form-item :label="language==0?'验证码':'Code'" required>
......
src/viewsPc/register/personal.vue
......@@ -114,7 +114,7 @@
并接收报名审核结果、支付账单、签证邀请函等相关信息）
</div>
<div v-else>
Please fill in the correct email， which cannot be changed after the registration is completed.
Please fill in the correct email, which cannot be changed after the registration is completed.
The email will be used as your login account and to receive relevant information including
results of registration review, payment bills, visa invitation letters, etc.
</div>
......
src/viewsPc/register/team/step1.vue
......@@ -11,7 +11,7 @@
并接收报名审核结果、支付账单、签证邀请函等相关信息。）
</div>
<div v-else class="tip">
Please fill in the correct email， which cannot be changed after the registration is completed. The email will be used as your login account and to receive relevant information including results of registration review, payment bills, visa invitation letters, etc.
Please fill in the correct email, which cannot be changed after the registration is completed. The email will be used as your login account and to receive relevant information including results of registration review, payment bills, visa invitation letters, etc.
</div>
</el-form-item>
<el-form-item :label="language==0?'验证码':'Code'" required>
......
src/viewsPc/saiC/index.vue
<template>
<div>
<div class="box">
<div class="mt20" />
<div class="mt20"/>
<el-card>
<el-row :gutter="20">
<el-col :sm="24" :lg="12">
<!--赛事日历-->
<el-calendar v-model="currentDate">
<template #date-cell="data">
<div class="date" :class="data.data.day==query.currentDate?'primaryDate':''" @click="selectDate(data.data.day)">
{{ data.data.day.slice(8,10) }}
</div>
</template>
</el-calendar>
<match-calendar @select-date="getScheduleList"></match-calendar>
</el-col>
<el-col :sm="24" :lg="12">
<div class="calendarList">
......@@ -33,81 +21,31 @@
</el-col>
</el-row>
</el-card>
<el-card class="mt20 mb20" v-for="(n,index) in cjList" hidden>
<div class="leftboderTT">{{ language==0?n.title:n.en_title }}</div>
<div v-for="(m,jndex) in n.list">
<h3 class="text-center">{{ m.title }}</h3>
<div class="tablebody">
<table class="table table-striped">
<thead>
<tr class="bg-lineg">
<td class="text-center" style="width: 120px;">{{ language==0?'名次':'RANK' }}</td>
<td class="text-center">{{ language==0?'组合':'COUPLE' }}</td>
<td class="text-center w15">{{ language==0?'国家':'COUNTRY' }}</td>
<td class="text-center w15">START #</td>
<td class="text-center w15" v-if="index>0">BASE</td>
<td class="text-center w15" v-if="index>0">POINTS</td>
</tr>
</thead>
<tbody>
<tr v-for="(l,kndex) in m.rows">
<td class="text-center">{{ l.RANK }}</td>
<td class="text-center">{{ l.COUPLE}}</td>
<td class="text-center">{{ l.COUNTRY }}</td>
<td class="text-primary text-center">{{ l.START }}</td>
<td class="text-center" v-if="index>0">{{l.BASE}}</td>
<td v-if="index>0" class="text-primary text-center">{{ l.POINTS }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</el-card>
<br><br>
<!-- <match-cj />-->
</div>
</div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
import { getPlanYears, getYearZtxPlanList } from '@/apiPc/train'
import {cjList} from '@/assets/js/data'
import { ArrowRight } from '@element-plus/icons-vue'
import { dayjs } from 'element-plus'
const router = useRouter()
import {useStorage} from "@vueuse/core/index";
import {ref} from 'vue'
import {getIndexScheduleList} from "@/apiPc/common";
import {useRouter} from "vue-router";
const language = useStorage('language', 0)
const years = ref([])
const currYear = ref(null)
const ztxPlanList = ref([])
const planList = ref([])
import MatchCalendar from "/@/viewsPc/components/matchCalendar.vue";
// import MatchCj from "/@/viewsPc/components/matchCj.vue";
const router = useRouter()
const schList = ref([])
const loading = ref(false)
const currentDate = ref(dayjs('2024-07-17').toDate())
const query = ref({
// currentDate:dayjs().format('YYYY-MM-DD')
currentDate: '2024-07-17'
})
getScheduleList()
function getScheduleList() {
function getScheduleList(params) {
loading.value = true
query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
getIndexScheduleList(query.value).then(res=>{
getIndexScheduleList(params).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',
......@@ -122,58 +60,79 @@ function goMatch(n) {
</script>
<style scoped lang="scss">
.leftboderTT{margin: 0 0 20px;color: var(--el-color-primary);
font-size: 20px;}
h3{background: #F5F0FF;margin: 0;padding: 10px 0;
color: var(--el-color-primary);
font-size: 18px;}
.table { border-spacing: 0;
border-collapse: collapse;
width: 100%;
max-width: 100%;
margin-bottom: 20px;
td,th{ padding: 8px; font-size: 14px;}
}
:deep(.table-striped > tbody > tr:nth-of-type(odd)){
background: #F6F9FE;
}
.el-calendar{--el-calendar-border:none;--el-calendar-cell-width:51px;text-align:center;
--el-text-color-regular:#8E8D94;
:deep(.el-calendar__header){justify-content: center;}
: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;}
}
.primaryDate{color: #fff;
background: #000;}
.date{ margin:5px auto;border-radius: 50%;width: 34px;height: 34px;line-height: 34px;
font-weight: bold;
}
.calendarList{border: 1px solid #F0F0F0;padding:12px 20px 0;overflow: hidden;
.calendarList {
border: 1px solid #F0F0F0;
padding: 12px 20px 0;
overflow: hidden;
height: 100%;
ul{ overflow: auto;height: 330px;margin: 0;
li{background: #F6F9FE;margin:7px 0 7px 20px;position: relative;padding: 13px;
ul {
overflow: auto;
height: 330px;
margin: 0;
li {
background: #F6F9FE;
margin: 7px 0 7px 20px;
position: relative;
padding: 13px;
border-radius: 10px;
font-weight: 500;
font-size: 15px;cursor: pointer;
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}
font-size: 15px;
cursor: pointer;
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::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::after{content: ''; left: -16px;width: 1px;height: 100%;
background: #EBEBEB; position: absolute;top: 20px}
li:hover{color: #fff;
li:hover {
color: #fff;
background: #000;
label{color: #fff;}
label {
color: #fff;
}
}
}
}
.w15{width: 15%;}
</style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!