Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in / Register
Toggle navigation
liyeyun
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
cfld-frontend
liyeyun
Commits
90116c81
Commit
90116c81
authored
Dec 08, 2023
by
王玉鑫
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 星级开发区, 轮播图
parent
0f0657ba
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
191 additions
and
7 deletions
+191
-7
CommonVideo.vue
src/components/common/CommonVideo.vue
+42
-0
StarDetail.vue
src/components/detail/StarDetail.vue
+3
-7
VideoList.vue
src/components/detail/VideoList.vue
+139
-0
developZoneDetail.ts
src/types/api/developZoneDetail.ts
+7
-0
No files found.
src/components/common/CommonVideo.vue
0 → 100644
View file @
90116c81
<
template
>
<div
ref=
"rootRef"
class=
"h-full"
>
<video
ref=
"videoRef"
class=
"h-full w-full"
:width=
"width"
:height=
"height"
:src=
"src"
controls
controlslist=
"nodownload"
></video>
</div>
</
template
>
<
script
setup
lang=
"ts"
>
import
{
onMounted
,
ref
}
from
'vue'
;
withDefaults
(
defineProps
<
{
src
:
string
;
width
:
number
;
height
:
number
;
}
>
(),
{},
);
const
rootRef
=
ref
<
HTMLDivElement
|
null
>
(
null
);
const
videoRef
=
ref
<
HTMLVideoElement
|
null
>
(
null
);
onMounted
(()
=>
{
rootRef
.
value
!
.
addEventListener
(
'contextmenu'
,
(
e
)
=>
{
e
.
preventDefault
();
});
});
const
stop
=
()
=>
{
videoRef
.
value
!
.
pause
();
};
defineExpose
({
stop
,
});
</
script
>
src/components/detail/StarDetail.vue
View file @
90116c81
...
...
@@ -17,12 +17,7 @@
</div>
</div>
<div
class=
"mt-[25px] pb-[40px] pt-[33px]"
>
<div
class=
"flex flex-col"
>
<div
class=
"text-[0px]"
>
<CommonImage
class=
"h-[286px] w-[388px]"
></CommonImage>
</div>
<div
class=
"bg-white p-[10px] font-yahei text-xs leading-5 text-[#4D4D4D]"
>
舒城县
</div>
</div>
<VideoList
:video-urls=
"detail.videoUrlList"
:image-urls=
"detail.imgUrlList"
></VideoList>
</div>
</div>
</div>
...
...
@@ -89,7 +84,8 @@
<
script
setup
lang=
"ts"
>
import
type
{
DevelopZoneDetailResp
,
StarInfo
}
from
'@/types/api/developZoneDetail'
;
import
{
computed
,
ref
}
from
'vue'
;
import
CommonImage
from
'../common/CommonImage.vue'
;
// import CommonImage from '../common/CommonImage.vue';
import
VideoList
from
'./VideoList.vue'
;
import
StarIconCell
from
'./StarIconCell.vue'
;
import
DetailInfoCell
from
'./DetailInfoCell.vue'
;
import
StarInfoCell
from
'./StarInfoCell.vue'
;
...
...
src/components/detail/VideoList.vue
0 → 100644
View file @
90116c81
<
template
>
<div
class=
"flex flex-col"
>
<div
class=
"relative h-[286px] w-[388px] text-[0px]"
>
<Swiper
class=
"h-full w-full"
:modules=
"[Autoplay]"
:loop=
"isPictureType"
:autoplay=
"
isPictureType
?
{
disableOnInteraction: false,
delay: 3000,
}
: false
"
@swiper="setMainSwiper"
@slide-change="handleSlideChange"
>
<SwiperSlide
v-for=
"item of currentList"
:key=
"item.videourl"
class=
"h-full w-full"
>
<CommonVideo
v-if=
"isVideType"
ref=
"videoRef"
:width=
"286"
:height=
"388"
:src=
"item.videourl"
></CommonVideo>
<CommonImage
v-else
class=
"h-full w-full"
:src=
"item.videourl"
></CommonImage>
</SwiperSlide>
</Swiper>
<div
class=
"h-20px absolute bottom-[14px] right-[14px] z-10 flex w-[70px] cursor-pointer items-center rounded-[50px] bg-[#808080] font-yahei text-xs leading-[18px] text-white"
>
<div
class=
"flex flex-1 items-center justify-center rounded-[50px]"
:class=
"
{ 'bg-white text-[#C0322B]': isVideType }"
@click="changeListType(ListType.video)"
>
视频
</div>
<div
class=
"flex flex-1 items-center justify-center rounded-[50px]"
:class=
"
{ 'bg-white text-[#C0322B]': isPictureType }"
@click="changeListType(ListType.picture)"
>
图片
</div>
</div>
</div>
<div>
<div
class=
"bg-white p-[10px] font-yahei text-xs leading-5 text-[#4D4D4D]"
>
舒城县
</div>
</div>
</div>
</
template
>
<
script
setup
lang=
"ts"
>
import
'swiper/css'
;
import
'swiper/css/autoplay'
;
import
{
Swiper
,
SwiperSlide
}
from
'swiper/vue'
;
import
type
{
Swiper
as
SwiperType
}
from
'swiper/types'
;
import
{
Autoplay
}
from
'swiper/modules'
;
import
{
computed
,
ref
,
nextTick
}
from
'vue'
;
import
CommonVideo
from
'../common/CommonVideo.vue'
;
import
CommonImage
from
'../common/CommonImage.vue'
;
/** 轮播类型 */
enum
ListType
{
/** 视频 */
video
=
'video'
,
/** 图片 */
picture
=
'picture'
,
}
const
props
=
withDefaults
(
defineProps
<
{
videoUrls
:
{
videoCover
:
string
;
videourl
:
string
;
}[];
imageUrls
:
string
[];
}
>
(),
{
videoUrls
:
()
=>
[],
imageUrls
:
()
=>
[],
},
);
const
mainSwiper
=
ref
<
null
|
SwiperType
>
(
null
);
const
videoRef
=
ref
<
any
>
(
null
);
const
currentType
=
ref
<
ListType
>
(
ListType
.
video
);
const
isVideType
=
computed
(()
=>
{
return
currentType
.
value
===
ListType
.
video
;
});
const
currentList
=
computed
(()
=>
{
if
(
isVideType
.
value
)
{
return
props
.
videoUrls
;
}
else
{
return
props
.
imageUrls
.
map
((
img
)
=>
{
return
{
videourl
:
img
,
};
});
}
});
const
isPictureType
=
computed
(()
=>
{
return
currentType
.
value
===
ListType
.
picture
;
});
const
setMainSwiper
=
(
swiper
:
SwiperType
)
=>
{
mainSwiper
.
value
=
swiper
;
};
const
handleSlideChange
=
()
=>
{
if
(
isVideType
.
value
)
{
videoRef
.
value
.
forEach
((
item
:
any
)
=>
{
item
.
stop
();
});
}
};
/**
* 修改当前类型
*/
const
changeListType
=
(
type
:
ListType
)
=>
{
if
(
type
!==
currentType
.
value
)
{
currentType
.
value
=
type
;
nextTick
(()
=>
{
mainSwiper
.
value
?.
update
();
if
(
isPictureType
.
value
)
{
mainSwiper
.
value
?.
autoplay
.
start
();
}
else
{
mainSwiper
.
value
?.
autoplay
.
stop
();
}
});
}
};
</
script
>
src/types/api/developZoneDetail.ts
View file @
90116c81
...
...
@@ -178,4 +178,11 @@ export interface DevelopZoneDetailResp {
};
/** 星级开发区数据 */
starObjectExtensionInfoMap
?:
Record
<
string
,
StarInfo
[]
>
;
/** 轮播视频 */
videoUrlList
:
{
/** */
videoCover
:
string
;
/** */
videourl
:
string
;
}[];
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment