chore(电子名片): 添加企业文件及企业视频部分模板及样式代码
This commit is contained in:
@@ -68,8 +68,34 @@
|
||||
</view>
|
||||
|
||||
<!-- 企业文件 -->
|
||||
|
||||
<view class="view_files_container" v-if="fileList.length > 0">
|
||||
<view class="section-title">企业文件</view>
|
||||
<view class="files-list">
|
||||
<view v-for="(file, index) in fileList" :key="index" class="file-item">
|
||||
<image mode="aspectFill" :src="$util.img('public/static/img/pdf-icon.png')" class="file-icon"></image>
|
||||
<view class="file-info">
|
||||
<view class="file-name">{{ file.name }}</view>
|
||||
<view class="file-actions">
|
||||
<button class="file-btn share-btn" @click="shareFile(file)">{{ $lang('share') }}</button>
|
||||
<button class="file-btn print-btn" @click="printFile(file)">{{ $lang('print') }}</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 企业视频 -->
|
||||
<view class="view_videos_container" v-if="videoList.length > 0">
|
||||
<view class="section-title">企业视频</view>
|
||||
<view class="videos-list">
|
||||
<view v-for="(video, index) in videoList" :key="index" class="video-item" @click="playVideo(video)">
|
||||
<image mode="aspectFill" :src="video.coverUrl" class="video-cover"></image>
|
||||
<view class="video-play-btn">
|
||||
<image mode="aspectFill" :src="$util.img('public/static/img/play-icon.png')" class="play-icon"></image>
|
||||
</view>
|
||||
<view class="video-title">{{ video.title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 视频号视频列表 -->
|
||||
<view class="view_channel_container" v-if="showChannelListDiy">
|
||||
@@ -169,8 +195,8 @@ export default {
|
||||
return {
|
||||
minScrollTop: 100,
|
||||
|
||||
showKefuDiy: false, // 是否显示客服及留言
|
||||
showContactListDiy: false, // 是否显示联系人列表
|
||||
showKefuDiy: true, // 是否显示客服及留言
|
||||
showContactListDiy: true, // 是否显示联系人列表
|
||||
showMapDiy: false, // 是否显示地图
|
||||
showVideoListDiy: false, // 是否显示企业视频
|
||||
showFileListDiy: false, // 是否显示企业文件
|
||||
@@ -241,6 +267,28 @@ export default {
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 分享文件
|
||||
shareFile(file) {
|
||||
// 实现文件分享逻辑
|
||||
uni.showToast({ title: '分享功能开发中', icon: 'none' });
|
||||
},
|
||||
|
||||
// 打印文件
|
||||
printFile(file) {
|
||||
// 实现文件打印逻辑
|
||||
uni.showToast({ title: '打印功能开发中', icon: 'none' });
|
||||
},
|
||||
// 播放视频
|
||||
playVideo(video) {
|
||||
// 实现视频播放逻辑
|
||||
if (video.videoUrl) {
|
||||
uni.navigateTo({
|
||||
url: `/pages_tool/video/video?url=${encodeURIComponent(video.videoUrl)}&title=${encodeURIComponent(video.title)}`
|
||||
});
|
||||
} else {
|
||||
uni.showToast({ title: '视频地址不存在', icon: 'none' });
|
||||
}
|
||||
},
|
||||
save() {
|
||||
if (!this.Form.realname.trim()) {
|
||||
uni.showToast({ title: '请填写姓名', icon: 'none' });
|
||||
@@ -651,6 +699,133 @@ image {
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 企业文件样式 */
|
||||
.view_files_container {
|
||||
margin-top: 30rpx;
|
||||
padding: 0 30rpx;
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.files-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
width: calc(50% - 10rpx);
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
width: 60rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.file-actions {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.file-btn {
|
||||
font-size: 20rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 4rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
background-color: #f0f0f0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.print-btn {
|
||||
background-color: #f0f0f0;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
/* 企业视频样式 */
|
||||
.view_videos_container {
|
||||
margin-top: 30rpx;
|
||||
padding: 0 30rpx;
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.videos-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.video-item {
|
||||
width: calc(33.333% - 14rpx);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-cover {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.video-play-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.video-title {
|
||||
font-size: 22rpx;
|
||||
color: #333;
|
||||
margin-top: 10rpx;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/deep/ .mescroll-totop {
|
||||
right: 27rpx !important;
|
||||
/* #ifdef H5 */
|
||||
|
||||
Reference in New Issue
Block a user