diff --git a/application/admin/controller/fc/Post.php b/application/admin/controller/fc/Post.php index 1121bc1..71b56f8 100644 --- a/application/admin/controller/fc/Post.php +++ b/application/admin/controller/fc/Post.php @@ -153,6 +153,17 @@ class Post extends Backend $mediaList[] = $row->cover; } + // 结构化媒体列表（识别图片与短视频） + $mediaItems = []; + foreach ($mediaList as $m) { + $url = (string)$m; + $isVideo = (bool)preg_match('/\.(mp4|mov|avi|webm|mkv)(\?|$)/i', $url); + $mediaItems[] = [ + 'url' => $url, + 'is_video' => $isVideo, + ]; + } + // 获取用户画像与关联商家门店资料 $userInfo = [ 'id' => $row->user_id, @@ -215,6 +226,7 @@ class Post extends Backend $this->view->assign('userInfo', $userInfo); $this->view->assign('merchantInfo', $merchantInfo); $this->view->assign('mediaList', $mediaList); + $this->view->assign('mediaItems', $mediaItems); $this->view->assign('queue', $this->auditQueue($row->getData())); // 如果是审核模式渲染 audit.html，详情模式渲染 detail.html diff --git a/application/admin/controller/fc/Postaudit.php b/application/admin/controller/fc/Postaudit.php index a063ae0..3680e6f 100644 --- a/application/admin/controller/fc/Postaudit.php +++ b/application/admin/controller/fc/Postaudit.php @@ -212,7 +212,7 @@ class Postaudit extends Backend $row->category_name = '未分类'; } - // 解析多图相册 + // 解析多图相册与多媒体 $mediaList = []; $rawMedia = $row->getData('media'); if (!empty($rawMedia)) { @@ -227,6 +227,25 @@ class Postaudit extends Backend $mediaList[] = $row->cover; } + // 构造结构化媒体列表（精准区分图片与视频） + $mediaItems = []; + foreach ($mediaList as $item) { + $pathOnly = parse_url($item, PHP_URL_PATH) ?: $item; + $ext = strtolower(pathinfo($pathOnly, PATHINFO_EXTENSION)); + $isVideo = in_array($ext, ['mp4', 'mov', 'avi', 'wmv', 'm4v', '3gp', 'flv', 'mkv', 'webm'], true); + $mediaItems[] = [ + 'url' => $item, + 'is_video' => $isVideo, + 'ext' => $ext + ]; + } + + // 获取商家门店信息（如存在） + $merchantInfo = null; + if (!empty($row->merchant_id)) { + $merchantInfo = Db::name('fc_merchant')->where('id', $row->merchant_id)->find(); + } + // 获取发布用户画像 $userInfo = [ 'id' => $row->user_id, @@ -247,7 +266,9 @@ class Postaudit extends Backend $this->view->assign('mode', $mode); $this->view->assign('row', $row); $this->view->assign('userInfo', $userInfo); + $this->view->assign('merchantInfo', $merchantInfo); $this->view->assign('mediaList', $mediaList); + $this->view->assign('mediaItems', $mediaItems); $this->view->assign('queue', $this->auditQueue($row->getData())); if ($mode === 'audit') { diff --git a/application/admin/view/fc/post/audit.html b/application/admin/view/fc/post/audit.html index 068f61b..7d93626 100644 --- a/application/admin/view/fc/post/audit.html +++ b/application/admin/view/fc/post/audit.html @@ -124,19 +124,43 @@ - -
-
- 送审图片质检 ({:count($mediaList)} 张) + {php} + $mediaListSafe = !empty($mediaList) ? $mediaList : []; + if (empty($mediaItems) && !empty($mediaListSafe)) { + $mediaItems = []; + foreach ($mediaListSafe as $m) { + $pathOnly = parse_url($m, PHP_URL_PATH) ?: $m; + $ext = strtolower(pathinfo($pathOnly, PATHINFO_EXTENSION)); + $isVideo = in_array($ext, ['mp4', 'mov', 'avi', 'wmv', 'm4v', '3gp', 'flv', 'mkv', 'webm'], true); + $mediaItems[] = ['url' => $m, 'is_video' => $isVideo, 'ext' => $ext]; + } + } + $imgItems = []; + $videoItems = []; + if (!empty($mediaItems)) { + foreach ($mediaItems as $item) { + if (!empty($item['is_video'])) { + $videoItems[] = $item; + } else { + $imgItems[] = $item; + } + } + } +{/php} + +
+
+ 送审图片质检 ({:count($imgItems)} 张) + 点击查看原图细节
- {if empty($mediaList)} -
用户未上传任何附加图片
+ {if empty($imgItems)} +
用户未上传附加图片
{else /} -
- {volist name="mediaList" id="media"} - - +
+ {volist name="imgItems" id="img"} + + {/volist}
@@ -144,6 +168,31 @@
+ +
+
+ 送审短视频质检 ({:count($videoItems)} 个) + 在线试听与画面合规质检 +
+
+ {if empty($videoItems)} +
用户未上传实拍短视频
+ {else /} +
+ {volist name="videoItems" id="vid"} +
+ +
+ 审核短视频 + 弹窗试看 +
+
+ {/volist} +
+ {/if} +
+
+
@@ -165,6 +214,100 @@
diff --git a/application/admin/view/fc/post/detail.html b/application/admin/view/fc/post/detail.html index 0a5d911..ad61adc 100644 --- a/application/admin/view/fc/post/detail.html +++ b/application/admin/view/fc/post/detail.html @@ -192,19 +192,43 @@
- + {php} + $mediaListSafe = !empty($mediaList) ? $mediaList : []; + if (empty($mediaItems) && !empty($mediaListSafe)) { + $mediaItems = []; + foreach ($mediaListSafe as $m) { + $pathOnly = parse_url($m, PHP_URL_PATH) ?: $m; + $ext = strtolower(pathinfo($pathOnly, PATHINFO_EXTENSION)); + $isVideo = in_array($ext, ['mp4', 'mov', 'avi', 'wmv', 'm4v', '3gp', 'flv', 'mkv', 'webm'], true); + $mediaItems[] = ['url' => $m, 'is_video' => $isVideo, 'ext' => $ext]; + } + } + $imgItems = []; + $videoItems = []; + if (!empty($mediaItems)) { + foreach ($mediaItems as $item) { + if (!empty($item['is_video'])) { + $videoItems[] = $item; + } else { + $imgItems[] = $item; + } + } + } +{/php} +
-
- 信息图集 ({:count($mediaList)} 张) +
+ 实拍图集 ({:count($imgItems)} 张) + 点击可查看高清大图
- {if empty($mediaList)} -
无附加图片
+ {if empty($imgItems)} +
无附加图片
{else /} -
- {volist name="mediaList" id="media"} - - + @@ -212,6 +236,31 @@
+ +
+
+ 实拍短视频 ({:count($videoItems)} 个) + HTML5 原生视频播放器 +
+
+ {if empty($videoItems)} +
用户未上传实拍短视频
+ {else /} +
+ {volist name="videoItems" id="vid"} +
+ +
+ 短视频 + 弹窗试看 +
+
+ {/volist} +
+ {/if} +
+
+
@@ -224,21 +273,128 @@
diff --git a/application/api/controller/Post.php b/application/api/controller/Post.php index f37431b..60d394c 100644 --- a/application/api/controller/Post.php +++ b/application/api/controller/Post.php @@ -58,15 +58,15 @@ class Post extends V1 $ext = strtolower(pathinfo($name, PATHINFO_EXTENSION)); // 扩展名白名单：[媒体类型, 体积上限(字节), 允许的真实 MIME] - // 图片限制 ≤ 5MB，保障顶部轮播加载速度与清晰度 + // 图片上限放宽至 15MB，短视频上限放宽至 100MB $allow = [ - 'jpg' => ['image', 5 * 1024 * 1024, ['image/jpeg']], - 'jpeg' => ['image', 5 * 1024 * 1024, ['image/jpeg']], - 'png' => ['image', 5 * 1024 * 1024, ['image/png']], - 'gif' => ['image', 5 * 1024 * 1024, ['image/gif']], - 'webp' => ['image', 5 * 1024 * 1024, ['image/webp']], - 'mp4' => ['video', 50 * 1024 * 1024, ['video/mp4']], - 'mov' => ['video', 50 * 1024 * 1024, ['video/quicktime']], + 'jpg' => ['image', 15 * 1024 * 1024, ['image/jpeg']], + 'jpeg' => ['image', 15 * 1024 * 1024, ['image/jpeg']], + 'png' => ['image', 15 * 1024 * 1024, ['image/png']], + 'gif' => ['image', 15 * 1024 * 1024, ['image/gif']], + 'webp' => ['image', 15 * 1024 * 1024, ['image/webp']], + 'mp4' => ['video', 100 * 1024 * 1024, ['video/mp4']], + 'mov' => ['video', 100 * 1024 * 1024, ['video/quicktime']], ]; if (!isset($allow[$ext])) { $this->fail('文件类型不支持'); @@ -82,7 +82,7 @@ class Post extends V1 $this->fail('文件大小超出限制'); } if ($size > $maxSize) { - $this->fail($type === 'image' ? '单张图片大小不能超过 5MB' : '文件大小超出限制'); + $this->fail($type === 'image' ? '单张图片大小不能超过 15MB' : '视频文件大小不能超过 100MB'); } // 真实 MIME 双重校验（读临时文件头，图片/视频都必须命中白名单）； @@ -98,20 +98,14 @@ class Post extends V1 } } - // 轮播图片宽高比校验（0.75 ~ 2.2，即 3:4 至 16:9 之间，避免极端长条图破坏详情页轮播展示） - $imgWidth = 0; + // 读取图片宽高元数据返回给前端（不进行任何比例拦截限制） + $imgWidth = 0; $imgHeight = 0; if ($type === 'image' && function_exists('getimagesize')) { $imgInfo = @getimagesize($file->getPathname()); if (is_array($imgInfo) && !empty($imgInfo[0]) && !empty($imgInfo[1])) { - $imgWidth = (int)$imgInfo[0]; + $imgWidth = (int)$imgInfo[0]; $imgHeight = (int)$imgInfo[1]; - if ($imgWidth >= 50 && $imgHeight >= 50) { - $ratio = $imgWidth / $imgHeight; - if ($ratio < 0.75 || $ratio > 2.2) { - $this->fail('为保障轮播展示效果，请上传宽高比在 3:4 ~ 16:9 之间的横图或方图'); - } - } } } diff --git a/public/assets/js/backend/fc/post.js b/public/assets/js/backend/fc/post.js index 51d1d0a..2ce8e5a 100644 --- a/public/assets/js/backend/fc/post.js +++ b/public/assets/js/backend/fc/post.js @@ -22,6 +22,58 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'backend/format'], fu var table = $("#table"); var esc = Controller.api.esc; + // 绑定媒体图集与短视频弹窗预览（详情与审核界面通用） + $(document).off('click', '.fc-media-preview-img').on('click', '.fc-media-preview-img', function (e) { + e.preventDefault(); + var curUrl = $(this).data('url') || $(this).find('img').attr('src'); + var photos = []; + var start = 0; + $('.fc-media-preview-img').each(function () { + var u = $(this).data('url') || $(this).find('img').attr('src'); + if (u) { + photos.push({ alt: '实拍图集预览', src: u }); + if (u === curUrl) start = photos.length - 1; + } + }); + var l = (window.parent && window.parent.Layer) ? window.parent.Layer : (window.Layer || window.layer); + if (l && l.photos) { + l.photos({ + photos: { title: '实拍图集预览', start: start, data: photos }, + shade: 0.75, + closeBtn: 1, + anim: 5 + }); + } else if (l) { + l.open({ + type: 1, + title: '实拍图集预览', + shadeClose: true, + maxmin: true, + area: ['700px', '520px'], + content: '
' + }); + } + }); + + $(document).off('click', '.fc-media-preview-video').on('click', '.fc-media-preview-video', function (e) { + e.preventDefault(); + var u = $(this).data('url'); + if (!u) return; + var l = (window.parent && window.parent.Layer) ? window.parent.Layer : (window.Layer || window.layer); + if (l) { + l.open({ + type: 1, + title: ' 短视频播放试看', + area: ['680px', '480px'], + shade: 0.75, + shadeClose: true, + maxmin: true, + content: '
' + }); + } + }); + + // 获取页面容器上绑定的权限节点标记 var canEdit = table.data('operate-edit'); var canDel = table.data('operate-del'); @@ -169,6 +221,11 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'backend/format'], fu } } if (img) { + var fullUrl = Fast.api.cdnurl(img, true); + var isVid = /\.(mp4|mov|avi|webm|mkv)(\?|$)/i.test(img); + if (isVid) { + return ' 视频'; + } var fullUrl = Fast.api.cdnurl(img, true); return ''; } @@ -442,6 +499,28 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'backend/format'], fu // 为表格绑定通用事件 Table.api.bindevent(table); + // 列表封面短视频弹窗播放试看（杜绝新窗口跳转） + $(document).off('click', '.btn-table-video-preview').on('click', '.btn-table-video-preview', function (e) { + e.preventDefault(); + var videoUrl = $(this).data('url'); + if (!videoUrl) return; + var l = (window.parent && window.parent.Layer) ? window.parent.Layer : (window.Layer || window.layer); + var html = '
' + + '' + + '
'; + if (l) { + l.open({ + type: 1, + title: ' 短视频播放试看', + area: ['640px', '460px'], + shade: 0.75, + shadeClose: true, + maxmin: true, + content: html + }); + } + }); + // 双击行查看详情 table.on('dbl-click-row.bs.table', function (e, row) { diff --git a/public/assets/js/backend/fc/postaudit.js b/public/assets/js/backend/fc/postaudit.js index 3984fdd..e965df2 100644 --- a/public/assets/js/backend/fc/postaudit.js +++ b/public/assets/js/backend/fc/postaudit.js @@ -18,6 +18,58 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'backend/format'], fu var table = $("#table"); var esc = Controller.api.esc; + + // 绑定媒体图集与短视频弹窗预览（详情与审核界面通用） + $(document).off('click', '.fc-media-preview-img').on('click', '.fc-media-preview-img', function (e) { + e.preventDefault(); + var curUrl = $(this).data('url') || $(this).find('img').attr('src'); + var photos = []; + var start = 0; + $('.fc-media-preview-img').each(function () { + var u = $(this).data('url') || $(this).find('img').attr('src'); + if (u) { + photos.push({ alt: '实拍图集预览', src: u }); + if (u === curUrl) start = photos.length - 1; + } + }); + var l = (window.parent && window.parent.Layer) ? window.parent.Layer : (window.Layer || window.layer); + if (l && l.photos) { + l.photos({ + photos: { title: '实拍图集预览', start: start, data: photos }, + shade: 0.75, + closeBtn: 1, + anim: 5 + }); + } else if (l) { + l.open({ + type: 1, + title: '实拍图集预览', + shadeClose: true, + maxmin: true, + area: ['700px', '520px'], + content: '
' + }); + } + }); + + $(document).off('click', '.fc-media-preview-video').on('click', '.fc-media-preview-video', function (e) { + e.preventDefault(); + var u = $(this).data('url'); + if (!u) return; + var l = (window.parent && window.parent.Layer) ? window.parent.Layer : (window.Layer || window.layer); + if (l) { + l.open({ + type: 1, + title: ' 短视频播放试看', + area: ['680px', '480px'], + shade: 0.75, + shadeClose: true, + maxmin: true, + content: '
' + }); + } + }); + var canAudit = table.data('operate-audit'); /** @@ -88,6 +140,10 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'backend/format'], fu } if (img) { var fullUrl = Fast.api.cdnurl(img, true); + var isVideo = /\.(mp4|mov|avi|wmv|m4v|3gp|flv|mkv|webm)(\?.*)?$/i.test(img); + if (isVideo) { + return ' 视频'; + } return ''; } return '无图'; @@ -282,6 +338,28 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'backend/format'], fu // 为表格绑定通用事件 Table.api.bindevent(table); + // 列表封面短视频弹窗播放试看（杜绝新窗口跳转） + $(document).off('click', '.btn-table-video-preview').on('click', '.btn-table-video-preview', function (e) { + e.preventDefault(); + var videoUrl = $(this).data('url'); + if (!videoUrl) return; + var l = (window.parent && window.parent.Layer) ? window.parent.Layer : (window.Layer || window.layer); + var html = '
' + + '' + + '
'; + if (l) { + l.open({ + type: 1, + title: ' 短视频播放试看', + area: ['640px', '460px'], + shade: 0.75, + shadeClose: true, + maxmin: true, + content: html + }); + } + }); + // 双击行直接打开审核工作台 table.on('dbl-click-row.bs.table', function (e, row) { diff --git a/public/uploads/20261106/013426aa46b0ed092f0ce353a4ed3f2f.jpg b/public/uploads/20261106/013426aa46b0ed092f0ce353a4ed3f2f.jpg new file mode 100644 index 0000000..7e28152 Binary files /dev/null and b/public/uploads/20261106/013426aa46b0ed092f0ce353a4ed3f2f.jpg differ diff --git a/public/uploads/20261106/064df4e764232e83daa10278d32091ce.jpg b/public/uploads/20261106/064df4e764232e83daa10278d32091ce.jpg new file mode 100644 index 0000000..fb5bb91 Binary files /dev/null and b/public/uploads/20261106/064df4e764232e83daa10278d32091ce.jpg differ diff --git a/public/uploads/20261106/188ebce8665ada3f106b262c5dbcd181.jpg b/public/uploads/20261106/188ebce8665ada3f106b262c5dbcd181.jpg new file mode 100644 index 0000000..4ab4e61 Binary files /dev/null and b/public/uploads/20261106/188ebce8665ada3f106b262c5dbcd181.jpg differ diff --git a/public/uploads/20261106/3431bcbf6198b932766319549fd2a19a.jpg b/public/uploads/20261106/3431bcbf6198b932766319549fd2a19a.jpg new file mode 100644 index 0000000..7448a88 Binary files /dev/null and b/public/uploads/20261106/3431bcbf6198b932766319549fd2a19a.jpg differ diff --git a/public/uploads/20261106/36cbe0f3b1d45614bab48fc9dbd09549.jpeg b/public/uploads/20261106/36cbe0f3b1d45614bab48fc9dbd09549.jpeg new file mode 100644 index 0000000..bf15b56 Binary files /dev/null and b/public/uploads/20261106/36cbe0f3b1d45614bab48fc9dbd09549.jpeg differ diff --git a/public/uploads/20261106/49fd105a3c86d999dc8fe185410a7485.mp4 b/public/uploads/20261106/49fd105a3c86d999dc8fe185410a7485.mp4 new file mode 100644 index 0000000..90a650c Binary files /dev/null and b/public/uploads/20261106/49fd105a3c86d999dc8fe185410a7485.mp4 differ diff --git a/public/uploads/20261106/5bb72d1f145f6f4923323e128125bef6.jpg b/public/uploads/20261106/5bb72d1f145f6f4923323e128125bef6.jpg new file mode 100644 index 0000000..3c29ba9 Binary files /dev/null and b/public/uploads/20261106/5bb72d1f145f6f4923323e128125bef6.jpg differ diff --git a/public/uploads/20261106/6470ffaa2cab64b60031bf3459379634.jpg b/public/uploads/20261106/6470ffaa2cab64b60031bf3459379634.jpg new file mode 100644 index 0000000..e570cd6 Binary files /dev/null and b/public/uploads/20261106/6470ffaa2cab64b60031bf3459379634.jpg differ diff --git a/public/uploads/20261106/b2896fbd99981b2c058d5e2c384805b3.jpg b/public/uploads/20261106/b2896fbd99981b2c058d5e2c384805b3.jpg new file mode 100644 index 0000000..2d0a2de Binary files /dev/null and b/public/uploads/20261106/b2896fbd99981b2c058d5e2c384805b3.jpg differ diff --git a/public/uploads/20261106/b6cac1d47e3bc05585d3d5f0f79ca1f4.jpg b/public/uploads/20261106/b6cac1d47e3bc05585d3d5f0f79ca1f4.jpg new file mode 100644 index 0000000..6137d72 Binary files /dev/null and b/public/uploads/20261106/b6cac1d47e3bc05585d3d5f0f79ca1f4.jpg differ diff --git a/public/uploads/20261106/e15bc243315ba53f7a5717ff64959b18.jpg b/public/uploads/20261106/e15bc243315ba53f7a5717ff64959b18.jpg new file mode 100644 index 0000000..b732fc1 Binary files /dev/null and b/public/uploads/20261106/e15bc243315ba53f7a5717ff64959b18.jpg differ diff --git a/uniapp/common/assets/icons.js b/uniapp/common/assets/icons.js index 4bfd25e..7d40276 100644 --- a/uniapp/common/assets/icons.js +++ b/uniapp/common/assets/icons.js @@ -79,6 +79,7 @@ export const ICON_GROUPS = [ { key: 'shield', name: '认证/安全', file: 'shield.png' }, { key: 'image', name: '图片', file: 'image.png' }, { key: 'image-white', name: '图片（白）', file: 'image-white.png' }, + { key: 'video', name: '视频', file: 'video.png' }, { key: 'wallet', name: '余额钱包', file: 'wallet.png' }, { key: 'paywechat', name: '微信支付', file: 'paywechat.png' }, { key: 'phone', name: '电话（白）', file: 'phone.png' }, diff --git a/uniapp/common/config/index.js b/uniapp/common/config/index.js index 8b60270..d405313 100644 --- a/uniapp/common/config/index.js +++ b/uniapp/common/config/index.js @@ -48,7 +48,7 @@ const ENV = IS_PROD ? 'production' : 'development' // 各环境后端域名（dev=运行 / prod=发行） const HOSTS = { - dev: 'https://5d7ae990.r9.cpolar.cn', // 本地后端（phpstudy 虚拟域名与端口 9980） + dev: 'https://5c789ab7.r9.cpolar.cn', // 本地后端（phpstudy 虚拟域名与端口 9980） prod: 'https://shanjianxiaocang.com', // 远程正式后端 } // 接口统一前缀 diff --git a/uniapp/components/fc-post-card/fc-post-card.vue b/uniapp/components/fc-post-card/fc-post-card.vue index 7c4f391..10d5534 100644 --- a/uniapp/components/fc-post-card/fc-post-card.vue +++ b/uniapp/components/fc-post-card/fc-post-card.vue @@ -6,10 +6,13 @@ :hover-stay-time="80" @click="$emit('click', post)" > - + - + + ▶ + + @@ -108,7 +111,7 @@ export default { } if (this.post.media && Array.isArray(this.post.media) && this.post.media.length) { const first = this.post.media[0] - if (typeof first === 'string' && !first.match(/\.(mp4|mov|avi)$/i)) { + if (typeof first === 'string' && !first.match(/\.(mp4|mov|avi|webm|mkv)(\?|$)/i)) { return assetUrl(first) } } @@ -116,6 +119,16 @@ export default { const fallback = Number(this.post.categoryId) === 25 ? '/static/posts/job-default.jpg' : '/static/posts/farm-default.jpg' return assetUrl(fallback) }, + /** + * 是否包含实拍短视频 + * @returns {boolean} + */ + hasVideo() { + if (this.post.media && Array.isArray(this.post.media)) { + return this.post.media.some((m) => typeof m === 'string' && m.match(/\.(mp4|mov|avi|webm|mkv)(\?|$)/i)) + } + return false + }, }, methods: { /** 暴露图标地址解析工具 */ @@ -174,6 +187,27 @@ export default { height: 100%; } +.fc-post-card__video-badge { + position: absolute; + right: 10rpx; + bottom: 10rpx; + width: 40rpx; + height: 40rpx; + border-radius: 50%; + background: rgba(0, 0, 0, 0.58); + display: flex; + align-items: center; + justify-content: center; + z-index: 2; +} + +.fc-post-card__video-icon { + color: #ffffff; + font-size: 18rpx; + margin-left: 3rpx; + line-height: 1; +} + .fc-post-card__deco-badge { display: flex; flex-direction: column; diff --git a/uniapp/pages/detail/detail.vue b/uniapp/pages/detail/detail.vue index 952f8e8..e2b337e 100644 --- a/uniapp/pages/detail/detail.vue +++ b/uniapp/pages/detail/detail.vue @@ -58,22 +58,65 @@ - - + + - - + + + + + + + - - {{ activeSwiperIndex + 1 }} / {{ imageUrls.length }} + + {{ activeSwiperIndex + 1 }} / {{ mediaList.length }} {{ post.categoryName }} @@ -547,6 +590,8 @@ export default { score: 5, commentText: '', activeSwiperIndex: 0, + isVideoPlaying: false, + videoContext: null, // 数据加载中与首次加载完成标识（用于骨架屏与静默刷新判定） loading: true, loaded: false, @@ -648,22 +693,74 @@ export default { return !!(this.post.plantArea || this.post.harvestTime || this.post.outputRange) }, /** - * 媒体列表图片 + * 统一媒体列表（严格按照用户发布上传的真实顺序排列，100% 同构还原） + * @returns {Array<{type: 'image'|'video', url: string, raw: string}>} */ - imageUrls() { + mediaList() { const list = [] - if (this.post.media && Array.isArray(this.post.media)) { - this.post.media.forEach((m) => { - if (typeof m === 'string' && !m.match(/\.(mp4|mov|avi)$/i)) { - list.push(assetUrl(m)) + const rawMedia = this.post.media && Array.isArray(this.post.media) ? this.post.media : [] + if (rawMedia.length) { + rawMedia.forEach((m) => { + if (typeof m === 'string' && m.trim()) { + const isVid = /\.(mp4|mov|avi|webm|mkv)(\?|$)/i.test(m) + list.push({ + type: isVid ? 'video' : 'image', + url: assetUrl(m), + raw: m, + }) } }) } + // 无 media 但有 cover 时，兜底作为单图展示 if (!list.length && this.post.cover) { - list.push(assetUrl(this.post.cover)) + list.push({ + type: 'image', + url: assetUrl(this.post.cover), + raw: this.post.cover, + }) } return list }, + /** + * 是否允许自动轮播（当前滑到视频项或总项数≤1时关闭自动轮播） + * @returns {boolean} + */ + canAutoplay() { + if (this.mediaList.length <= 1) return false + const cur = this.mediaList[this.activeSwiperIndex] + return !cur || cur.type !== 'video' + }, + /** + * 媒体列表纯图片地址列表（用于海报生成与纯图片预览） + * @returns {string[]} + */ + imageUrls() { + return this.mediaList.filter((m) => m.type === 'image').map((m) => m.url) + }, + /** + * 媒体列表中的视频地址 + * @returns {string} + */ + videoUrl() { + const v = this.mediaList.find((m) => m.type === 'video') + return v ? v.url : '' + }, + /** + * 视频封面海报图 + * @returns {string} + */ + videoPoster() { + if (this.post.cover) return assetUrl(this.post.cover) + const firstImg = this.mediaList.find((m) => m.type === 'image') + return firstImg ? firstImg.url : '' + }, + /** + * 轮播总项数（视频 + 图片） + * @returns {number} + */ + totalMediaCount() { + return this.mediaList.length + }, /** * 是否有坐标 */ @@ -785,14 +882,61 @@ export default { return categoryIconUrl(this.post.categoryId) }, /** - * 轮播切换同步 + * 轮播切换同步（滑离视频滑块时自动暂停视频播放） * @param {Object} e 事件 */ onSwiperChange(e) { this.activeSwiperIndex = (e && e.detail && e.detail.current) || 0 + const curMedia = this.mediaList[this.activeSwiperIndex] + if (curMedia && curMedia.type !== 'video' && this.isVideoPlaying) { + if (this.videoContext) { + this.videoContext.pause() + } + this.isVideoPlaying = false + } }, /** - * 全屏图片预览 + * 切换短视频播放与暂停状态 + */ + toggleVideoPlay() { + if (!this.videoContext) { + this.videoContext = uni.createVideoContext('detailVideo', this) + } + if (this.isVideoPlaying) { + this.videoContext.pause() + this.isVideoPlaying = false + } else { + this.videoContext.play() + this.isVideoPlaying = true + } + }, + /** 短视频开始播放 */ + onVideoPlay() { + this.isVideoPlaying = true + }, + /** 短视频暂停 */ + onVideoPause() { + this.isVideoPlaying = false + }, + /** 短视频播放结束 */ + onVideoEnded() { + this.isVideoPlaying = false + }, + /** + * 点击图片全屏预览（支持左右滑动切换所有实拍图片） + * @param {string} curImg 当前点击的图片完整地址 + */ + previewMediaImage(curImg) { + const images = this.mediaList.filter((m) => m.type === 'image').map((m) => m.url) + if (!images.length) return + const idx = images.indexOf(curImg) + uni.previewImage({ + current: idx >= 0 ? idx : curImg, + urls: images, + }) + }, + /** + * 全屏图片预览（兼容旧调用） * @param {Number} idx 索引 */ previewImages(idx) { @@ -1875,7 +2019,7 @@ export default { .detail__skeleton-gallery { width: 100%; - height: 440rpx; + height: 750rpx; border-radius: 0 0 $fc-radius-lg $fc-radius-lg; } .detail__skeleton-card { @@ -1907,23 +2051,106 @@ export default { border-radius: 8rpx; } -/* 实拍画廊 */ +/* 实拍画廊（1:1 正方形黄金比例，通透浅底，严格同构顺序） */ .detail__gallery { position: relative; width: 100%; - height: 480rpx; + height: 750rpx; overflow: hidden; - background: #000000; + background: #f8faf9; } .detail__swiper { width: 100%; height: 100%; } +.detail__swiper-item { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background: #f8faf9; + position: relative; + + &--video { + background: #000000; + } +} .detail__swiper-img { width: 100%; height: 100%; cursor: pointer; } + +/* 视频播放容器 */ +.detail__video-wrapper { + width: 100%; + height: 100%; + position: relative; + background: #000000; + display: flex; + align-items: center; + justify-content: center; +} +.detail__swiper-video { + width: 100%; + height: 100%; +} + +/* 居中高质感大号播放/暂停按钮 */ +.detail__video-center-ctrl { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10; + cursor: pointer; + transition: all 0.22s ease; + pointer-events: auto; + + &:active { + transform: translate(-50%, -50%) scale(0.92); + } + + &--playing { + opacity: 0; + pointer-events: none; + } +} + +.detail__video-play-btn { + width: 108rpx; + height: 108rpx; + border-radius: 50%; + background: rgba(15, 23, 42, 0.68); + border: 3rpx solid rgba(255, 255, 255, 0.45); + box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.4); + backdrop-filter: blur(8px); + display: flex; + align-items: center; + justify-content: center; +} + +.detail__video-play-tri { + color: #ffffff; + font-size: 42rpx; + margin-left: 6rpx; + line-height: 1; +} + +.detail__video-pause-bars { + display: flex; + align-items: center; + justify-content: center; + gap: 10rpx; +} + +.detail__video-pause-bar { + width: 8rpx; + height: 36rpx; + border-radius: 4rpx; + background: #ffffff; +} .detail__swiper-badge { position: absolute; right: 24rpx; diff --git a/uniapp/pages/post/create.vue b/uniapp/pages/post/create.vue index ade56ea..8104d58 100644 --- a/uniapp/pages/post/create.vue +++ b/uniapp/pages/post/create.vue @@ -87,34 +87,94 @@ @input="onFieldInput" /> + - 轮播图片 / 视频 + + 轮播图片 + + 首张为封面，最多9张 - - - - - - 视频 + + + + + + + 封面 - - × + + + ✕ - - - - 图片 {{ imageCount }}/6 + + + + + + 上传中 + - - - - 短视频 {{ videoCount }}/1 + + + + 添加图片 + {{ totalImageCount }}/9 + + + + + + + 实拍短视频 + + 选填，展示更真实，限1个 + + + + + + ▶ + 短视频 + + + + ✕ + + + + + + + + 视频上传中 + + + + + + + 添加视频 + 0/1 + + + + + {{ videoUploading ? '实拍视频正在传输中…' : (videoItem ? '实拍视频已就绪，点击可试看' : '实拍短视频更具吸引力') }} + {{ videoUploading ? '大文件传输中，可继续填写下方信息' : '支持常见视频格式，100MB以内' }} - 媒体上传中，请稍候… @@ -570,7 +630,8 @@ export default { // 平铺服务区域（每条自带省/市/区县），交给级联选择器分组 areaRows: [], submitting: false, - uploading: false, + uploadingFiles: [], + videoUploading: false, showPayModal: false, pwdPopup: { show: false, title: '', tip: '' }, draftTimer: null, @@ -596,6 +657,7 @@ export default { title: '', content: '', media: [], + cover: '', price: '', isNegotiable: false, plantArea: '', @@ -816,6 +878,30 @@ export default { videoCount() { return this.form.media.filter((m) => this.isVideo(m)).length }, + /** 已选纯图片列表 */ + imageList() { + return this.form.media.filter((m) => !this.isVideo(m)) + }, + /** 已选视频列表 */ + videoList() { + return this.form.media.filter((m) => this.isVideo(m)) + }, + /** 当前视频单项（选填最多1个） */ + videoItem() { + return this.form.media.find((m) => this.isVideo(m)) || '' + }, + /** 正在上传中的图片任务 */ + uploadingImageFiles() { + return this.uploadingFiles.filter((f) => f.type === 'image') + }, + /** 图片总数（已上传 + 正在上传中） */ + totalImageCount() { + return this.imageList.length + this.uploadingImageFiles.length + }, + /** 全局上传中状态计算属性（保持向后兼容） */ + uploading() { + return this.uploadingFiles.length > 0 || this.videoUploading + }, discountRate() { const r = Number(this.publish.discountRate) return r > 0 && r <= 1 ? r : 1 @@ -1353,64 +1439,180 @@ export default { return /\.(mp4|mov|m4v|avi|webm|mkv)(\?|$)/i.test(String(url || '')) }, /** - * 校验上传图片的宽高比与文件大小（用于详情页顶部轮播展示，限制宽高比 0.75~2.2，单张 ≤ 5MB） + * 判断当前媒体序号是否为封面主图 + * @param {number} idx 媒体数组索引 + * @returns {boolean} + */ + isCoverMedia(idx) { + const firstImageIdx = this.form.media.findIndex((m) => !this.isVideo(m)) + return firstImageIdx === idx + }, + /** + * 点击已选媒体卡片：支持全屏大图缩放预览或视频沉浸播放 + * @param {string} m 媒体相对或绝对路径 + * @param {number} idx 媒体数组索引 + */ + /** + * 预览图片栏中的图片 + * @param {number} idx 图片索引 + */ + previewImageItem(idx) { + const urls = this.imageList.map((m) => assetUrl(m)) + if (!urls.length) return + uni.previewImage({ + current: urls[idx] || urls[0], + urls: urls, + }) + }, + /** + * 预览实拍短视频 + */ + previewVideoItem() { + const video = this.videoItem + if (!video) return + const videoFullUrl = assetUrl(video) + // #ifdef MP-WEIXIN + if (typeof wx !== 'undefined' && typeof wx.previewMedia === 'function') { + wx.previewMedia({ + sources: [ + { + url: videoFullUrl, + type: 'video', + poster: this.form.cover ? assetUrl(this.form.cover) : '', + }, + ], + current: 0, + }) + return + } + // #endif + uni.showToast({ title: '已就绪短视频', icon: 'none' }) + }, + /** + * 移除图片栏指定图片 + * @param {number} idx 图片索引 + */ + removeImage(idx) { + const target = this.imageList[idx] + if (!target) return + const realIdx = this.form.media.indexOf(target) + if (realIdx !== -1) { + this.form.media.splice(realIdx, 1) + this.triggerAutoSave() + } + }, + /** + * 移除已选短视频 + */ + removeVideo() { + const realIdx = this.form.media.findIndex((m) => this.isVideo(m)) + if (realIdx !== -1) { + this.form.media.splice(realIdx, 1) + this.triggerAutoSave() + } + }, + previewMediaItem(m, idx) { + if (!m) return + if (this.isVideo(m)) { + const videoFullUrl = assetUrl(m) + // #ifdef MP-WEIXIN + if (typeof wx !== 'undefined' && typeof wx.previewMedia === 'function') { + wx.previewMedia({ + sources: [ + { + url: videoFullUrl, + type: 'video', + poster: this.form.cover ? assetUrl(this.form.cover) : '', + }, + ], + current: 0, + }) + return + } + // #endif + uni.showToast({ title: '已选中短视频', icon: 'none' }) + return + } + + // 图片预览：收集当前所有图片完整地址，支持左右滑动切换与多指自由缩放 + const imageUrls = this.form.media + .filter((item) => !this.isVideo(item)) + .map((item) => assetUrl(item)) + const curUrl = assetUrl(m) + const curIndex = Math.max(0, imageUrls.indexOf(curUrl)) + + uni.previewImage({ + current: curIndex >= 0 ? curIndex : curUrl, + urls: imageUrls.length ? imageUrls : [curUrl], + }) + }, + /** + * 校验上传图片文件大小（放宽到 15MB） * @param {string} filePath 本地临时路径 * @param {Object} fileObj chooseImage 返回的 tempFiles[i] * @returns {Promise<{ok:boolean, message?:string}>} */ validateImageForCarousel(filePath, fileObj = null) { - if (fileObj && fileObj.size && Number(fileObj.size) > 5 * 1024 * 1024) { - return Promise.resolve({ ok: false, message: '单张图片大小不能超过 5MB' }) - } - if (typeof uni === 'undefined' || !uni.getImageInfo) { - return Promise.resolve({ ok: true }) + if (fileObj && fileObj.size && Number(fileObj.size) > 15 * 1024 * 1024) { + return Promise.resolve({ ok: false, message: '单张图片大小不能超过 15MB' }) } + return Promise.resolve({ ok: true }) + }, + /** + * 唤起微信原生图片裁剪（固定 1:1 黄金正方形） + * 用户可通过双指缩放拖拽框选商品核心区域，点击完成自动裁好 + * @param {string} tempPath 本地临时路径 + * @returns {Promise} 裁剪后临时文件路径（若取消或失败则回退使用原图） + */ + cropImage(tempPath) { return new Promise((resolve) => { - uni.getImageInfo({ - src: filePath, - success: (info) => { - const w = Number(info && info.width) || 0 - const h = Number(info && info.height) || 0 - if (w >= 50 && h >= 50) { - const ratio = w / h - if (ratio < 0.75 || ratio > 2.2) { - resolve({ - ok: false, - message: '为保证轮播展示效果，请上传宽高比在 3:4 ~ 16:9 之间的横图或方图', - }) - return - } - } - resolve({ ok: true }) - }, - fail: () => resolve({ ok: true }), - }) + // #ifdef MP-WEIXIN + if (typeof wx !== 'undefined' && typeof wx.cropImage === 'function') { + wx.cropImage({ + src: tempPath, + cropScale: '1:1', + success: (res) => { + resolve((res && res.tempFilePath) || tempPath) + }, + fail: () => { + // 用户点击取消裁剪或接口报错，回退使用原图，绝不卡阻流程 + resolve(tempPath) + }, + }) + return + } + // #endif + resolve(tempPath) }) }, + /** + * 唤起图片选择与拍摄（最多上传 9 张） + */ chooseImage() { if (this.uploading) return - const remain = 6 - this.imageCount - if (remain <= 0) return uni.showToast({ title: '最多上传 6 张图片', icon: 'none' }) - // 直接从相册选择（拍照功能已移除） + const remain = 9 - this.imageCount + if (remain <= 0) return uni.showToast({ title: '最多上传 9 张图片', icon: 'none' }) this.pickFromAlbum(remain) }, - /** 相册选图：压缩（>1MB 阶梯降质）→ 宽高比与大小校验 → 上传 */ + /** + * 选择图片（支持拍照与相册多选，选完直传零打扰） + * @param {number} remain 剩余可上传图片数量 + */ pickFromAlbum(remain) { uni.chooseImage({ count: remain, - sizeType: ['original', 'compressed'], + sizeType: ['compressed', 'original'], + sourceType: ['album', 'camera'], success: async (res) => { const paths = res.tempFilePaths || [] const files = res.tempFiles || [] + if (!paths.length) return + + // 直接进入极速并发上传流程，零弹窗阻断，极致丝滑 const validPaths = [] for (let i = 0; i < paths.length; i++) { const compressed = await this.compressImageForUpload(paths[i], files[i]) - const check = await this.validateImageForCarousel(compressed.path, { size: compressed.size }) - if (!check.ok) { - uni.showToast({ title: check.message, icon: 'none', duration: 2600 }) - } else { - validPaths.push(compressed.path) - } + validPaths.push(compressed.path) } if (validPaths.length) { await this.uploadFiles(validPaths, 'image') @@ -1419,8 +1621,7 @@ export default { }) }, /** - * 上传前压缩：>1MB 才压缩，按 80/60/45 质量阶梯降质直到 ≤5MB（后端硬限制） - * gif 不支持压缩接口，直接原样返回 + * 上传前轻量快速压缩：仅对大图（>1.5MB）做快速单次等比压制，告别多轮耗时等待 * @param {string} path 本地临时路径 * @param {Object} fileObj chooseImage 返回的 tempFiles[i] * @returns {Promise<{path:string, size:number}>} @@ -1428,53 +1629,129 @@ export default { async compressImageForUpload(path, fileObj) { const fileSize = Number(fileObj && fileObj.size) || 0 if (/\.gif$/i.test(path)) return { path, size: fileSize } - if (fileSize > 0 && fileSize <= 1024 * 1024) return { path, size: fileSize } + // 1.5MB 以内的小图无需额外压缩，直接极速上传 + if (fileSize > 0 && fileSize <= 1.5 * 1024 * 1024) return { path, size: fileSize } if (typeof uni === 'undefined' || !uni.compressImage) return { path, size: fileSize } - let cur = { path, size: fileSize } - for (const q of [80, 60, 45]) { - try { - const res = await new Promise((resolve, reject) => { - uni.compressImage({ src: cur.path, quality: q, success: resolve, fail: reject }) + try { + const res = await new Promise((resolve, reject) => { + uni.compressImage({ + src: path, + quality: 80, + success: resolve, + fail: reject, }) - if (!res || !res.tempFilePath) break - const info = await new Promise((resolve) => { - uni.getFileInfo({ filePath: res.tempFilePath, success: resolve, fail: () => resolve(null) }) - }) - cur = { path: res.tempFilePath, size: Number(info && info.size) || 0 } - if (cur.size > 0 && cur.size <= 5 * 1024 * 1024) return cur - } catch (e) { - break + }) + if (res && res.tempFilePath) { + return { path: res.tempFilePath, size: 0 } } - } - return cur + } catch (e) {} + return { path, size: fileSize } }, + /** + * 唤起视频拍摄与选取（微信原生支持时间轴截取片段，并自动截取首帧作为封面） + */ chooseVideo() { if (this.uploading) return if (this.videoCount >= 1) return uni.showToast({ title: '最多上传 1 个视频', icon: 'none' }) + + const handleVideoResult = async (videoPath, thumbPath) => { + if (!videoPath) return + this.videoUploading = true + try { + // 1. 若微信回调提取到了视频封面首帧，同步上传并作为帖子封面 + if (thumbPath) { + try { + const thumbUp = await postApi.uploadMedia(thumbPath, 'image') + if (thumbUp && thumbUp.url) { + this.form.cover = thumbUp.url + } + } catch (e) { + console.warn('视频封面上传非阻断:', e) + } + } + // 2. 上传视频主体文件（卡片就地微转圈，零弹窗阻断） + const videoUp = await postApi.uploadMedia(videoPath, 'video') + if (videoUp && videoUp.url) { + this.form.media.push(videoUp.url) + this.triggerAutoSave() + } + } catch (e) { + uni.showToast({ title: e.message || '视频上传失败，请重试', icon: 'none' }) + } finally { + this.videoUploading = false + } + } + + // 优先使用微信现代化的 chooseMedia（支持原生视频时间轴截取与封面） + if (typeof uni !== 'undefined' && typeof uni.chooseMedia === 'function') { + uni.chooseMedia({ + count: 1, + mediaType: ['video'], + sourceType: ['album', 'camera'], + maxDuration: 60, + camera: 'back', + success: (res) => { + const file = (res.tempFiles && res.tempFiles[0]) || {} + handleVideoResult(file.tempFilePath, file.thumbTempFilePath) + }, + fail: (err) => { + if (err && err.errMsg && err.errMsg.indexOf('cancel') === -1) { + this.fallbackChooseVideo(handleVideoResult) + } + }, + }) + } else { + this.fallbackChooseVideo(handleVideoResult) + } + }, + /** + * 兼容降级视频选择器 + * @param {Function} callback 处理回调 + */ + fallbackChooseVideo(callback) { uni.chooseVideo({ maxDuration: 60, - success: async (res) => { - await this.uploadFiles([res.tempFilePath], 'video') + sourceType: ['album', 'camera'], + compressed: true, + success: (res) => { + callback(res.tempFilePath, res.thumbTempFilePath) }, }) }, + /** + * 并发多文件上传（加速用户等待，失败容错） + * @param {string[]} paths 临时文件路径列表 + * @param {'image'|'video'} type 媒体类型 + */ async uploadFiles(paths, type) { if (!paths.length) return - this.uploading = true - uni.showLoading({ title: '上传中…', mask: true }) + const uploadTasks = paths.map((p, idx) => ({ + id: 'up_' + Date.now() + '_' + Math.random().toString(36).substr(2, 6) + '_' + idx, + localUrl: p, + type, + })) + this.uploadingFiles.push(...uploadTasks) + try { - for (const p of paths) { - const up = await postApi.uploadMedia(p, type) - if (up && up.url) this.form.media.push(up.url) - } + const uploadPromises = uploadTasks.map(async (task) => { + try { + const up = await postApi.uploadMedia(task.localUrl, task.type) + if (up && up.url) { + this.form.media.push(up.url) + } + } catch (err) { + console.error('单文件上传失败:', task.localUrl, err) + } finally { + const fIdx = this.uploadingFiles.findIndex((f) => f.id === task.id) + if (fIdx !== -1) { + this.uploadingFiles.splice(fIdx, 1) + } + } + }) + await Promise.all(uploadPromises) this.triggerAutoSave() - uni.hideLoading() - uni.showToast({ title: '上传成功', icon: 'none' }) } catch (e) { - uni.hideLoading() - uni.showToast({ title: e.message || '上传失败', icon: 'none' }) - } finally { - this.uploading = false + uni.showToast({ title: e.message || '上传异常', icon: 'none' }) } }, removeMedia(i) { @@ -2031,21 +2308,35 @@ export default { margin-top: 8rpx; } -/* 媒体上传 */ -.create__media { - display: flex; - flex-wrap: wrap; - gap: 16rpx; - margin-top: 16rpx; +/* 媒体上传与标题行 */ +.create__label-hint { + font-size: 22rpx; + color: #64748b; + font-weight: 400; } + +/* ------------------------------------------------------------ + * 媒体上传统一设计规范（轻氧微质感实体卡片，彻底消除粗糙虚线） + * ------------------------------------------------------------ */ +.create__media-grid { + display: flex; + flex-wrap: wrap; + gap: 18rpx; + margin-top: 18rpx; +} + +/* 媒体缩略展示卡片（与输入框保持一致的高级圆角与微边框） */ .create__media-item { width: 156rpx; height: 156rpx; - border-radius: 16rpx; + border-radius: 18rpx; position: relative; - background: #f4f7f5; + background: #f8faf8; overflow: hidden; + box-shadow: 0 2rpx 8rpx rgba(15, 23, 42, 0.04); + border: 1rpx solid #e6f0ea; + box-sizing: border-box; } .create__media-img { @@ -2053,66 +2344,201 @@ export default { height: 100%; } -.create__media-video { - width: 100%; - height: 100%; - background: #1a2d23; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; +.create__media-cover-tag { + position: absolute; + top: 0; + left: 0; + background: linear-gradient(135deg, #00e070, #00b85c); + padding: 4rpx 12rpx; + border-radius: 0 0 12rpx 0; + box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15); + z-index: 2; } -.create__media-video-txt { - font-size: 22rpx; - color: #ffffff; - margin-top: 8rpx; +.create__media-cover-txt { + font-size: 18rpx; + font-weight: 700; + color: #04301e; + line-height: 1; } +/* 精致半透明暗黑背景圆形关闭删除按钮 */ .create__media-del { position: absolute; top: 8rpx; right: 8rpx; - width: 38rpx; - height: 38rpx; + width: 36rpx; + height: 36rpx; border-radius: 50%; - background: rgba(0, 0, 0, 0.65); - color: #ffffff; + background: rgba(15, 23, 42, 0.65); + backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; - font-size: 28rpx; + z-index: 3; + transition: transform 0.15s ease; + + &:active { + transform: scale(0.9); + } +} + +.create__media-del-icon { + color: #ffffff; + font-size: 20rpx; + font-weight: 700; line-height: 1; } -.create__upload { +/* 统一规范的方形上传卡片（图片与视频同构，彻底取代失衡横栏） */ +.create__upload-card { width: 156rpx; height: 156rpx; - border-radius: 16rpx; - border: 2rpx dashed #b8d4c4; - background: #f9fbf9; + border-radius: 18rpx; + background: #f8faf8; + border: 1rpx solid #e6f0ea; display: flex; flex-direction: column; align-items: center; justify-content: center; + box-sizing: border-box; cursor: pointer; + transition: all 0.2s ease; &:active { - background: #eef7f2; + background: #edf9f2; + border-color: #00e070; + transform: scale(0.97); } } -.create__upload-txt { - font-size: 20rpx; - color: $fc-text-sub; - margin-top: 10rpx; +.create__upload-card-icon { + width: 46rpx; + height: 46rpx; + margin-bottom: 8rpx; } -.create__uploading { - display: block; - margin-top: 12rpx; +.create__upload-card-txt { font-size: 22rpx; - color: #04874a; + font-weight: 600; + color: #334155; + line-height: 1.2; +} + +.create__upload-card-count { + font-size: 19rpx; + color: #94a3b8; + margin-top: 4rpx; + line-height: 1; +} + +/* 视频栏行容器 */ +.create__video-row { + display: flex; + align-items: center; + gap: 24rpx; + margin-top: 18rpx; +} + +/* 视频海报与试播角标 */ +.create__video-poster { + width: 100%; + height: 100%; + background: linear-gradient(135deg, #0f271a, #071910); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; +} + +.create__video-play-center { + width: 48rpx; + height: 48rpx; + border-radius: 50%; + background: rgba(0, 224, 112, 0.25); + border: 2rpx solid #00e070; + color: #00e070; + font-size: 20rpx; + display: flex; + align-items: center; + justify-content: center; + padding-left: 4rpx; +} + +.create__video-tag { + font-size: 20rpx; + color: #e2f7ec; + margin-top: 8rpx; + font-weight: 500; +} + +/* 视频右侧说明文本 */ +.create__video-tip-wrap { + flex: 1; + display: flex; + flex-direction: column; + gap: 8rpx; +} + +.create__video-tip-main { + font-size: 24rpx; + font-weight: 600; + color: #334155; + line-height: 1.3; +} + +.create__video-tip-sub { + font-size: 21rpx; + color: #94a3b8; + line-height: 1.3; +} + +/* 上传中的卡片就地微动效（无阻断、平滑淡入） */ +.create__media-item--loading { + border-color: #a4e2c0; +} + +.create__media-loading-mask { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(15, 23, 42, 0.45); + backdrop-filter: blur(2px); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + z-index: 2; +} + +.create__media-spinner { + width: 38rpx; + height: 38rpx; + border: 3rpx solid rgba(255, 255, 255, 0.35); + border-top-color: #00e070; + border-radius: 50%; + animation: spin 0.8s linear infinite; + + &--mint { + border-color: rgba(0, 224, 112, 0.25); + border-top-color: #00e070; + } +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.create__media-loading-txt { + font-size: 19rpx; + color: #ffffff; + font-weight: 500; + margin-top: 6rpx; + letter-spacing: 1rpx; } /* 价格与面议开关 */ diff --git a/uniapp/static/icons/video.png b/uniapp/static/icons/video.png new file mode 100644 index 0000000..45268a6 Binary files /dev/null and b/uniapp/static/icons/video.png differ