修复bug
This commit is contained in:
X1627315083
244
src/component/Events/eventsDetail.vue
Normal file
244
src/component/Events/eventsDetail.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div class="eventsDetail_page" :class="{active:isScroll}">
|
||||
<div class="eventsDetail_title ">
|
||||
<div class="modal_title_text" @click="setBack">
|
||||
<i class="fi fi-sr-left"></i>
|
||||
<div class="eventsDetail_title_text">Back</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="eventsDetail_content">
|
||||
<div class="eventsDetail_content_left">
|
||||
<fullScreenImg :src="eventsDetail.imgUrl" width="100%" :center="true"></fullScreenImg>
|
||||
</div>
|
||||
<div class="eventsDetail_content_right">
|
||||
<div class="modal_title_text">
|
||||
<div>{{ eventsDetail.title }}</div>
|
||||
</div>
|
||||
<div class="modal_title_text" v-for="item in eventsDetail.textList">
|
||||
<div class="eventsDetail_content_right_btn_box">
|
||||
<div class="eventsDetail_content_right_btn" v-for="buttonItem,buttonIndex in item?.button" @click="openButton(buttonItem,buttonIndex)">
|
||||
<div v-show="!loadingShow[buttonIndex]" class="started_btn">{{ buttonItem.text }}</div>
|
||||
<div v-show="loadingShow[buttonIndex]" class="started_btn"><i class="fi fi-br-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal_title_text_intro" v-for="introItem in item?.paragraph" :class="{active:introItem.display == 'flex'}" v-detailText="introItem.text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { defineComponent,h ,toRefs,ref,reactive,onMounted,nextTick,provide,computed} from 'vue'
|
||||
// import HeaderComponent from "@/component/HomePage/Header.vue";
|
||||
// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { message, Upload, Modal } from "ant-design-vue";
|
||||
import fullScreenImg from '@/component/HomePage/fullScreenImg.vue'
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from "vue-i18n";
|
||||
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
||||
import eventData from "@/assets/json/events.json";
|
||||
import eventDataCn from "@/assets/json/events_cn.json";
|
||||
import { useStore } from "vuex";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
generalMenu,
|
||||
fullScreenImg,
|
||||
},
|
||||
props:{
|
||||
isScroll:{
|
||||
type:Boolean,
|
||||
default:true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
let filter:any = reactive({
|
||||
eventsDetail: {
|
||||
},
|
||||
getListDate:{
|
||||
"getLikePortfolio": 0,
|
||||
"getMyPortfolio": 0,
|
||||
page:1,
|
||||
size:10,
|
||||
},
|
||||
isShowMark:false,
|
||||
isNoData:false,//如果数据为空就不加载
|
||||
loadingShow:{},
|
||||
})
|
||||
let systemUser = computed(()=>{
|
||||
return store.state.UserHabit.systemUser
|
||||
})
|
||||
let likeFile = (item:any,type:string) => {
|
||||
}
|
||||
let setBack = ()=>{
|
||||
router.go(-1);
|
||||
}
|
||||
let openButton = (data:any,index:number)=>{
|
||||
if(filter.loadingShow[index]){
|
||||
return
|
||||
}
|
||||
filter.loadingShow[index] = true
|
||||
Https.axiosGet(data.https).then(
|
||||
(rv: any) => {
|
||||
if(rv){
|
||||
message.success(data.success)
|
||||
filter.loadingShow[index] = false
|
||||
}
|
||||
}
|
||||
).catch(res=>{
|
||||
filter.loadingShow[index] = false
|
||||
});
|
||||
}
|
||||
onMounted (()=>{
|
||||
const { t, locale } = useI18n();
|
||||
const currentLocale = locale.value;
|
||||
let eventLangData:any
|
||||
if(currentLocale == 'ENGLISH'){
|
||||
eventLangData = eventData
|
||||
}else{
|
||||
eventLangData = eventDataCn
|
||||
}
|
||||
eventLangData.eventsItem.forEach((item:any)=>{
|
||||
if(item.id == router.currentRoute.value.query.id){
|
||||
filter.eventsDetail = item;
|
||||
}
|
||||
})
|
||||
})
|
||||
return {
|
||||
...toRefs(filter),
|
||||
systemUser,
|
||||
likeFile,
|
||||
setBack,
|
||||
openButton,
|
||||
}
|
||||
},
|
||||
directives:{
|
||||
detailText:{
|
||||
mounted (el,binding) {
|
||||
el.innerHTML = binding.value
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted(){
|
||||
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.eventsDetail_page {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 9rem;
|
||||
padding-top: 5rem;
|
||||
|
||||
&.active{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.eventsDetail_content{
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
padding-top: 0;
|
||||
min-height: auto;
|
||||
padding-bottom: 10rem;
|
||||
}
|
||||
.eventsDetail_title{
|
||||
display: flex;
|
||||
padding: 2rem 0rem;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 222;
|
||||
background: #fff;
|
||||
.modal_title_text{
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.modal_title_text:hover .eventsDetail_title_text{
|
||||
text-decoration: underline;
|
||||
}
|
||||
i{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
.eventsDetail_content{
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 8rem;
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
.eventsDetail_content_left,.eventsDetail_content_right{
|
||||
width: 50%;
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.eventsDetail_content_left{
|
||||
width: 40%;
|
||||
max-height: 60rem;
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
.ant-image{
|
||||
// height: auto;
|
||||
height: 100%;
|
||||
}
|
||||
.eventsDetail_content_left_img{
|
||||
width: 100%;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
}
|
||||
.eventsDetail_content_right{
|
||||
.modal_title_text{
|
||||
letter-spacing: .4rem;
|
||||
font-weight: 600;
|
||||
.modal_title_text_intro{
|
||||
display: block;
|
||||
&.active{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
li{
|
||||
width: 48%;
|
||||
|
||||
}
|
||||
em{
|
||||
// font-family: auto;
|
||||
}
|
||||
a{
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.eventsDetail_content_right_btn_box{
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
.eventsDetail_content_right_btn{
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.modal_title_text:last-child{
|
||||
}
|
||||
.modal_title_text:last-child::after{
|
||||
content: "";
|
||||
display: block;
|
||||
border-top: 3px solid;
|
||||
height: 6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -41,7 +41,7 @@
|
||||
</div>
|
||||
<div class="publidh_content_item_tagList">
|
||||
<div v-for="item,index in tagList" @click="pushTag(item,index)">
|
||||
<a-tag color="purple">{{ item.tag }}</a-tag>
|
||||
<a-tag color="purple" :title="item.title">{{ item.tagName }}</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="publidh_right_detail publidh_content_item">
|
||||
@@ -104,8 +104,7 @@ export default defineComponent({
|
||||
isSecondaryCreation:true,
|
||||
}
|
||||
})
|
||||
let tagList = ref([{tag:'#RCAworkshop_2024 '},{tag:'#RCAwork '},{tag:'#RCAwo '},{tag:'#RCAwork '}])
|
||||
let selectTagList:any = ref([])
|
||||
let tagList = ref([{tagId:1,tagName:'#RCAworkshop_2024 ',title:'The process is simple: use AiDA to post your design work on the "Gallery ", and the one with the most likes(at least 20 likes) will be invited to the AiDA Workshop offline event in Hong Kong on November 14th, to exchange ideas with the Royal College of Art (RCA), Jae Lim, co-founder of the renowned fashion brand BESFXXK, and outstanding designers! '}])
|
||||
// let textarea: any = ref(null)
|
||||
// let setCopy = ()=>{
|
||||
// textarea.value.select()
|
||||
@@ -131,6 +130,7 @@ export default defineComponent({
|
||||
status:'',
|
||||
updateDate:'',
|
||||
collectionId:'',
|
||||
tagsDTO:[],
|
||||
// isAllowLikes:true,
|
||||
}
|
||||
}
|
||||
@@ -144,14 +144,25 @@ export default defineComponent({
|
||||
const regex = /#\S+\s/g;
|
||||
// 使用match方法提取匹配的字符串
|
||||
const matches = text.match(regex);
|
||||
|
||||
// 处理提取结果，去掉空格并返回
|
||||
return matches ? matches.map((match:any) => match.trim()) : [];
|
||||
}
|
||||
let textareaChange = ()=>{
|
||||
|
||||
console.log(extractHashtags(publishData.subPublishDate.portfolioDes));
|
||||
|
||||
let tagListArr = extractHashtags(publishData.subPublishDate.portfolioDes)
|
||||
let tagsDTO:any = []
|
||||
tagListArr.forEach((item:any) => {
|
||||
const index = tagList.value.findIndex((obj:any) => obj.tagName === item);
|
||||
if(index>-1){
|
||||
let obj = {
|
||||
tagName:tagList.value[index],
|
||||
tagId:tagList.value[index].tagId
|
||||
}
|
||||
tagsDTO.push(tagList.value[index])
|
||||
}else{
|
||||
tagsDTO.push({tagName:item})
|
||||
}
|
||||
});
|
||||
publishData.subPublishDate.tagsDTO = tagsDTO
|
||||
}
|
||||
let setPermissionsItem = ()=>{
|
||||
// publishData.selectPermissions.isAllowLikes &&
|
||||
@@ -214,6 +225,7 @@ export default defineComponent({
|
||||
param.append('file',file)
|
||||
publishData.subPublishDate.openSource = publishData.selectPermissions.isSecondaryCreation?1:0
|
||||
param.append('data',JSON.stringify(publishData.subPublishDate))
|
||||
param.append('tagsDTO',JSON.stringify(publishData.subPublishDate.tagsDTO))
|
||||
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||||
// let data = publishData.subPublishDate
|
||||
publishData.isShowMark = true
|
||||
@@ -236,7 +248,7 @@ export default defineComponent({
|
||||
// if(tag.tag == 'RCAworkshop_2024'){
|
||||
// publishData.subPublishDate.portfolioDes = '#AiDA x RCA workshop '
|
||||
// }
|
||||
publishData.subPublishDate.portfolioDes = publishData.subPublishDate.portfolioDes+tag.tag
|
||||
publishData.subPublishDate.portfolioDes = publishData.subPublishDate.portfolioDes+tag.tagName
|
||||
textareaChange()
|
||||
}
|
||||
return {
|
||||
@@ -244,7 +256,6 @@ export default defineComponent({
|
||||
publishMask,
|
||||
...toRefs(publishData),
|
||||
tagList,
|
||||
selectTagList,
|
||||
// textarea,
|
||||
// setCopy,
|
||||
init,
|
||||
|
||||
77
src/component/modules/navRouter.vue
Normal file
77
src/component/modules/navRouter.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<nav class="homeMain_nav_content">
|
||||
<!-- <router-link :class="['nav_item',$route.name === 'homePage' ? 'select_nav' : '', ]" :to="`/home/homePage`">
|
||||
{{$t('Header.HOME')}}
|
||||
</router-link>
|
||||
<router-link :class="['nav_item',$route.name === 'library' ? 'select_nav' : '', ]" :to="`/home/library`">
|
||||
{{$t('Header.LIBRARY')}}
|
||||
</router-link>
|
||||
<router-link :class="['nav_item',$route.name === 'history' ? 'select_nav' : '', ]" :to="`/home/history`">
|
||||
{{$t('Header.HISTORY')}}
|
||||
</router-link>
|
||||
<router-link :class="['nav_item',$route.name === 'works' ? 'select_nav' : '', ]" :to="`/home/works`">
|
||||
{{$t('Header.WORKS')}}
|
||||
</router-link> -->
|
||||
<router-link v-for="item in routerList" :class="['nav_item',item.routerName.indexOf($route.name) > -1 ? 'select_nav' : '', ]" :to="item.router">{{ item.name }}</router-link>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
import { defineProps } from 'vue';
|
||||
import { defineComponent, createVNode, ref, computed } from "vue";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
},
|
||||
props:['routerList'],
|
||||
setup(props,{emit}){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.homeMain_nav_content {
|
||||
display: flex;
|
||||
// margin-left: 28.9rem;
|
||||
// margin-left: 46.2rem;
|
||||
align-items: center;
|
||||
height: 7rem;
|
||||
justify-content: center;
|
||||
.nav_item {
|
||||
padding: 1.1rem 1rem;
|
||||
border-bottom: 0.1rem solid transparent;
|
||||
margin-right: 3.4rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.3rem;
|
||||
// color: #333333;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
font-weight: 900;
|
||||
position: relative;
|
||||
&.nav_item:last-child{
|
||||
margin: 0;
|
||||
}
|
||||
&.nav_item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #000;
|
||||
height: .3rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: .3rem;
|
||||
width: 0px;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
&.select_nav {
|
||||
color: #000;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
&.select_nav::before {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user