chore(电子名片): 添加企业文件及企业视频部分模板及样式代码

pages_tool/contact/contact.vue

@@ -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,         // 是否显示客服及留言
+            showKefuDiy: true,          // 是否显示客服及留言
-            showContactListDiy: false,  // 是否显示联系人列表
+            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 */