Merge: 合并电子名片及新组件微信视频号
This commit is contained in:
35
src/addon/personnel/data/upgrade_add_channel_fields.sql
Normal file
35
src/addon/personnel/data/upgrade_add_channel_fields.sql
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
-- 升级脚本：为 personnel_channel 表添加新字段并优化表结构
|
||||||
|
-- 执行时间: 2026-01-10
|
||||||
|
|
||||||
|
-- 1. 为 lucky_personnel_channel 表添加新字段
|
||||||
|
ALTER TABLE `lucky_personnel_channel`
|
||||||
|
ADD COLUMN `feed_token` varchar(255) NOT NULL DEFAULT '' COMMENT '视频号视频的标识' AFTER `feed_id`,
|
||||||
|
ADD COLUMN `view_count` int unsigned NOT NULL DEFAULT 0 COMMENT '视频观看次数' AFTER `cover_url`,
|
||||||
|
ADD COLUMN `show_view_count` tinyint(1) NOT NULL DEFAULT 0 COMMENT '是否显示视频观看次数：0-不显示，1-显示' AFTER `view_count`,
|
||||||
|
ADD COLUMN `show_follow` tinyint(1) NOT NULL DEFAULT 0 COMMENT '是否显示关注按钮：0-不显示，1-显示' AFTER `show_view_count`;
|
||||||
|
|
||||||
|
-- 2. 优化现有字段长度和类型
|
||||||
|
ALTER TABLE `lucky_personnel_channel`
|
||||||
|
MODIFY COLUMN `channel_type` varchar(30) NOT NULL DEFAULT 'wechat' COMMENT '视频号类型：wechat-微信视频号，douyin-抖音，kuaishou-快手，redbook-小红书，bilibili-B站',
|
||||||
|
MODIFY COLUMN `channel_name` varchar(200) NOT NULL DEFAULT '' COMMENT '视频号名称',
|
||||||
|
MODIFY COLUMN `avatar_image_type` varchar(20) NOT NULL DEFAULT 'upload' COMMENT '头像类型：upload-上传图片，url-URL',
|
||||||
|
MODIFY COLUMN `avatar_url` varchar(500) NOT NULL DEFAULT '' COMMENT '头像URL',
|
||||||
|
MODIFY COLUMN `video_title` varchar(500) NOT NULL DEFAULT '' COMMENT '视频标题',
|
||||||
|
MODIFY COLUMN `feed_id` varchar(500) NOT NULL DEFAULT '' COMMENT '视频号内容ID',
|
||||||
|
MODIFY COLUMN `cover_image_type` varchar(20) NOT NULL DEFAULT 'upload' COMMENT '封面类型：upload-上传图片，url-URL',
|
||||||
|
MODIFY COLUMN `cover_url` varchar(500) NOT NULL DEFAULT '' COMMENT '封面URL',
|
||||||
|
MODIFY COLUMN `sort` int NOT NULL DEFAULT 0 COMMENT '排序，数值越小越靠前',
|
||||||
|
MODIFY COLUMN `is_show` tinyint(1) NOT NULL DEFAULT 1 COMMENT '是否显示：0-隐藏，1-显示',
|
||||||
|
MODIFY COLUMN `channel_id` int unsigned NOT NULL AUTO_INCREMENT,
|
||||||
|
MODIFY COLUMN `site_id` int unsigned NOT NULL DEFAULT 0 COMMENT '站点ID',
|
||||||
|
MODIFY COLUMN `create_time` int unsigned NOT NULL DEFAULT 0 COMMENT '创建时间';
|
||||||
|
|
||||||
|
-- 3. 添加索引优化查询性能
|
||||||
|
ALTER TABLE `lucky_personnel_channel`
|
||||||
|
ADD INDEX `idx_site_id` (`site_id`),
|
||||||
|
ADD INDEX `idx_channel_type` (`channel_type`),
|
||||||
|
ADD INDEX `idx_is_show` (`is_show`),
|
||||||
|
ADD INDEX `idx_sort` (`sort`);
|
||||||
|
|
||||||
|
-- 4. 修改表引擎为 InnoDB 和字符集为 utf8mb4
|
||||||
|
ALTER TABLE `lucky_personnel_channel` ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||||
465
src/addon/personnel/shop/view/enterprise/channel/edit.html
Normal file
465
src/addon/personnel/shop/view/enterprise/channel/edit.html
Normal file
@@ -0,0 +1,465 @@
|
|||||||
|
<link rel="stylesheet" href="__STATIC__/ext/video/video.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="__STATIC__/ext/searchable_select/searchable_select.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="__STATIC__/ext/layui/extend/cascader/cascader.css"/>
|
||||||
|
<link rel="stylesheet" type="text/css" href="SHOP_CSS/goods_edit.css?v=2" />
|
||||||
|
<style>
|
||||||
|
.upload-img-block .upload-img-box .upload-default{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
|
||||||
|
.info-help{color: #999; font-size: 12px; margin-left: 140px;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-form form-wrap">
|
||||||
|
<input type="hidden" name="channel_id" value="{$channel_id}">
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label short-label"><span class="required">*</span>视频号类型：</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<select name="channel_type" lay-verify="required">
|
||||||
|
<option value="wechat" {:$info['channel_type'] ? ($info['channel_type'] == 'wechat' ? 'selected' : '') : 'selected'}>微信视频号</option>
|
||||||
|
<!-- <option value="douyin" {:$info['channel_type'] == 'douyin' ? 'selected' : ''}>抖音</option> -->
|
||||||
|
<!-- <option value="kuaishou" {:$info['channel_type'] == 'kuaishou' ? 'selected' : ''}>快手</option> -->
|
||||||
|
<!-- <option value="redbook" {:$info['channel_type'] == 'redbook' ? 'selected' : ''}>小红书</option> -->
|
||||||
|
<!-- <option value="bilibili" {:$info['channel_type'] == 'bilibili' ? 'selected' : ''}>B站</option> -->
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label short-label"><span class="required">*</span>视频号ID：</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" name="channel_name" value="{$info.channel_name}" lay-verify="required" maxlength="200" autocomplete="off" placeholder="请输入视频号ID" class="layui-input len-long">
|
||||||
|
</div>
|
||||||
|
<div class="info-help layui-form-mid layui-word-aux">微信视频号ID获取方式：进入视频号助手，在首页可以查看自己的视频号ID，以sph开头为视频号ID</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label"><span class="required">*</span>视频唯一标识：</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" name="feed_id" value="{$info.feed_id}" lay-verify="required" maxlength="500" autocomplete="off" placeholder="请输入视频号视频的唯一标识" class="layui-input len-long">
|
||||||
|
</div>
|
||||||
|
<div class="info-help layui-form-mid layui-word-aux">
|
||||||
|
<p>不同视频平台的唯一标识获取方式可能不同，请根据具体平台说明获取</p>
|
||||||
|
<p>微信视频号，要填写FeedID的值；</p>
|
||||||
|
<!-- <p>抖音、快手等平台，填写对应的视频ID</p> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">视频FeedToken：</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" name="feed_token" value="{$info.feed_token}" maxlength="255" autocomplete="off" placeholder="请输入视频号视频的FeedToken" class="layui-input len-long">
|
||||||
|
</div>
|
||||||
|
<div class="info-help layui-form-mid layui-word-aux">
|
||||||
|
<p>不同视频平台的唯一标识获取方式可能不同，请根据具体平台说明获取</p>
|
||||||
|
<p>微信视频号，要填写视频的FeedToken值；仅内嵌小程序非同主体视频号视频时使用。</p>
|
||||||
|
<!-- <p>抖音、快手等平台，填写对应的视频ID</p> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label"><span class="required">*</span>视频标题：</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" name="video_title" value="{$info.video_title}" lay-verify="required" maxlength="500" autocomplete="off" placeholder="请输入视频标题" class="layui-input len-long">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label"><span class="required">*</span>封面类型：</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="radio" name="cover_image_type" lay-filter="coverImageType" value="url" title="URL链接" {:$info['cover_image_type'] ? ($info['cover_image_type'] == 'url' ? 'checked' : '') : 'checked'}>
|
||||||
|
<input type="radio" name="cover_image_type" lay-filter="coverImageType" value="upload" title="上传图片" {:$info['cover_image_type'] ? ($info['cover_image_type'] == 'upload' ? 'checked' : '') : ''}>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item" id="coverTypeUrl">
|
||||||
|
<label class="layui-form-label"><span class="required">*</span>封面URL：</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" name="cover_url" value="{$info.cover_url}" maxlength="255" autocomplete="off" placeholder="请输入封面URL" class="layui-input len-long">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item" id="coverTypeUpload">
|
||||||
|
<label class="layui-form-label"><span class="required">*</span>封面图：</label>
|
||||||
|
<div class="layui-input-block img-upload">
|
||||||
|
<div class="upload-img-block simple-uploading">
|
||||||
|
<div class="upload-img-box" id="coverImg">
|
||||||
|
<div class="upload-default">
|
||||||
|
<i class="iconfont iconshangchuan"></i>
|
||||||
|
<p>点击上传</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="hidden" name="cover_url_upload" value="" />
|
||||||
|
<i class="del">x</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="word-aux">推荐使用 750x420 像素的图片</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">头像类型：</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="radio" name="avatar_image_type" lay-filter="avatarType" value="url" title="URL链接" {:$info['avatar_image_type'] ? ($info['avatar_image_type'] == 'url' ? 'checked' : '') : 'checked'}>
|
||||||
|
<input type="radio" name="avatar_image_type" lay-filter="avatarType" value="upload" title="上传图片" {:$info['avatar_image_type'] ? ($info['avatar_image_type'] == 'upload' ? 'checked' : '') : ''}>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item" id="avatarTypeUrl">
|
||||||
|
<label class="layui-form-label">头像URL：</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" name="avatar_url" value="{$info.avatar_url}" maxlength="255" autocomplete="off" placeholder="请输入头像URL" class="layui-input len-long">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item" id="avatarTypeUpload">
|
||||||
|
<label class="layui-form-label">头像图：</label>
|
||||||
|
<div class="layui-input-block img-upload">
|
||||||
|
<div class="upload-img-block square simple-uploading">
|
||||||
|
<div class="upload-img-box" id="avatarImg">
|
||||||
|
<div class="upload-default">
|
||||||
|
<i class="iconfont iconshangchuan"></i>
|
||||||
|
<p>点击上传</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="hidden" name="avatar_url_upload" value="" />
|
||||||
|
<i class="del">x</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="word-aux">推荐使用 200x200 像素的图片</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">排序：</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="number" name="sort" value="{$info.sort|default=0}" autocomplete="off" placeholder="请输入排序" class="layui-input len-short">
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-mid layui-word-aux">数值越小排序越靠前</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">是否显示：</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="radio" name="is_show" value="1" title="显示" {$info.is_show == 1 || !$info.is_show ? 'checked' : ''}>
|
||||||
|
<input type="radio" name="is_show" value="0" title="隐藏" {$info.is_show == 0 ? 'checked' : ''}>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">观看次数：</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="number" name="view_count" value="{$info.view_count|default=0}" autocomplete="off" placeholder="请输入视频观看次数" class="layui-input len-short">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">显示观看次数：</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="radio" name="show_view_count" value="1" title="显示" {$info.show_view_count == 1 ? 'checked' : ''}>
|
||||||
|
<input type="radio" name="show_view_count" value="0" title="不显示" {$info.show_view_count != 1 ? 'checked' : ''}>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item" style="display: none;">
|
||||||
|
<label class="layui-form-label">显示关注按钮：</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="radio" name="show_follow" value="1" title="显示" {$info.show_follow == 1 ? 'checked' : ''}>
|
||||||
|
<input type="radio" name="show_follow" value="0" title="不显示" {$info.show_follow != 1 ? 'checked' : ''}>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-row" id="save">
|
||||||
|
<button class="layui-btn" lay-submit lay-filter="save">提交</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 新增成功后的对话框模板 -->
|
||||||
|
<script type="text/html" id="addSuccessDialog">
|
||||||
|
<div class="layui-form">
|
||||||
|
<p>操作成功</p>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var form, repeat_flag,
|
||||||
|
IMAGE_MAX = 2, //最多可以上传多少张图片
|
||||||
|
imageCollection = [], //图片集合
|
||||||
|
selectedGoodsId = [],
|
||||||
|
goods_id = [],
|
||||||
|
goods_list = [],
|
||||||
|
avatarImg = '{$info.avatar_url}',
|
||||||
|
coverImg = '{$info.cover_url}',
|
||||||
|
avatarImageType = '{:$info[\'avatar_image_type\'] ? $info[\'avatar_image_type\'] : \'url\'}',
|
||||||
|
coverImageType = '{:$info[\'cover_image_type\'] ? $info[\'cover_image_type\'] : \'url\'}';
|
||||||
|
|
||||||
|
var uploadHtml = "<div class='upload-default'><i class='iconfont iconshangchuan'></i><p>点击上传</p></div>"
|
||||||
|
|
||||||
|
// 判断是否为编辑模式（URL 中有 channel_id 且不为 0）
|
||||||
|
var isEditMode = false;
|
||||||
|
var channel_id = 0;
|
||||||
|
{if condition="$channel_id && $channel_id > 0"}
|
||||||
|
channel_id = {$channel_id};
|
||||||
|
isEditMode = true;
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
layui.use(['form', 'upload', 'element'], function() {
|
||||||
|
form = layui.form;
|
||||||
|
repeat_flag = false;
|
||||||
|
form.render();
|
||||||
|
|
||||||
|
// 初始化头像
|
||||||
|
if(avatarImg){
|
||||||
|
if(avatarImageType == 'upload'){
|
||||||
|
$("#avatarImg").html("<img src='" + ns.img(avatarImg) + "' alt='头像'>");
|
||||||
|
$("input[name='avatar_url_upload']").val(avatarImg);
|
||||||
|
imageCollection.push(avatarImg);
|
||||||
|
}else{
|
||||||
|
$("#avatarImg").html("<img src='" + avatarImg + "' alt='头像' style='width:100%;height:100%;object-fit:contain;'>");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化封面
|
||||||
|
if(coverImg){
|
||||||
|
if(coverImageType == 'upload'){
|
||||||
|
$("#coverImg").html("<img src='" + ns.img(coverImg) + "' alt='封面'>");
|
||||||
|
$("input[name='cover_url_upload']").val(coverImg);
|
||||||
|
}else{
|
||||||
|
$("#coverImg").html("<img src='" + coverImg + "' alt='封面' style='width:100%;height:100%;object-fit:contain;'>");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 头像类型切换
|
||||||
|
form.on('radio(avatarType)', function(data) {
|
||||||
|
var elem = data.elem;
|
||||||
|
var type = elem.value;
|
||||||
|
|
||||||
|
if(type == 'url'){
|
||||||
|
$('#avatarTypeUrl').show();
|
||||||
|
// 如果已有URL，显示预览
|
||||||
|
var avatarUrlVal = $("input[name='avatar_url']").val();
|
||||||
|
if(avatarUrlVal){
|
||||||
|
$("#avatarImg").html("<img src='" + avatarUrlVal + "' alt='头像' style='width:100%;height:100%;object-fit:contain;'>");
|
||||||
|
} else {
|
||||||
|
$('#avatarTypeUpload').hide();
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
$('#avatarTypeUrl').hide();
|
||||||
|
$('#avatarTypeUpload').show();
|
||||||
|
// 如果已上传图片，显示预览
|
||||||
|
var avatarUrlVal = $("input[name='avatar_url_upload']").val();
|
||||||
|
if(avatarUrlVal){
|
||||||
|
$("#avatarImg").html("<img src='" + ns.img(avatarUrlVal) + "' alt='头像'>");
|
||||||
|
} else {
|
||||||
|
$("#avatarImg").html(uploadHtml);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 头像URL输入预览
|
||||||
|
$("input[name='avatar_url']").on('input', function() {
|
||||||
|
var avatarType = $("input[name='avatar_image_type']:checked").val();
|
||||||
|
var url = $(this).val();
|
||||||
|
if(avatarType == 'url' && url){
|
||||||
|
$("#avatarImg").html("<img src='" + url + "' alt='头像' style='width:100%;height:100%;object-fit:contain;'>");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 初始显示状态 - 头像
|
||||||
|
if(avatarImageType == 'url'){
|
||||||
|
$('#avatarTypeUrl').show();
|
||||||
|
// 如果已有URL，显示预览
|
||||||
|
if(avatarImg){
|
||||||
|
$("#avatarImg").html("<img src='" + avatarImg + "' alt='头像' style='width:100%;height:100%;object-fit:contain;'>");
|
||||||
|
} else {
|
||||||
|
$('#avatarTypeUpload').hide();
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
$('#avatarTypeUrl').hide();
|
||||||
|
$('#avatarTypeUpload').show();
|
||||||
|
// 如果已上传图片，显示预览
|
||||||
|
if(avatarImg){
|
||||||
|
$("#avatarImg").html("<img src='" + ns.img(avatarImg) + "' alt='头像'>");
|
||||||
|
} else {
|
||||||
|
$("#avatarImg").html(uploadHtml);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 封面类型切换
|
||||||
|
form.on('radio(coverImageType)', function(data) {
|
||||||
|
var elem = data.elem;
|
||||||
|
var type = elem.value;
|
||||||
|
var coverUrlVal = $("input[name='cover_url']").val();
|
||||||
|
if(type == 'url'){
|
||||||
|
$('#coverTypeUrl').show();
|
||||||
|
// 如果已有URL，显示预览
|
||||||
|
if(coverUrlVal){
|
||||||
|
$("#coverImg").html("<img src='" + coverUrlVal + "' alt='封面' style='width:100%;height:100%;object-fit:contain;'>");
|
||||||
|
} else {
|
||||||
|
$('#coverTypeUpload').hide();
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
$('#coverTypeUrl').hide();
|
||||||
|
$('#coverTypeUpload').show();
|
||||||
|
// 如果已上传图片，显示预览
|
||||||
|
coverUrlVal = $("input[name='cover_url_upload']").val();
|
||||||
|
if(coverUrlVal){
|
||||||
|
$("#coverImg").html("<img src='" + ns.img(coverUrlVal) + "' alt='封面'>");
|
||||||
|
} else {
|
||||||
|
$("#coverImg").html(uploadHtml);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 封面URL输入预览
|
||||||
|
$("input[name='cover_url']").on('input', function() {
|
||||||
|
var coverType = $("input[name='cover_image_type']:checked").val();
|
||||||
|
var url = $(this).val();
|
||||||
|
if(coverType == 'url' && url){
|
||||||
|
$("#coverImg").html("<img src='" + url + "' alt='封面' style='width:100%;height:100%;object-fit:contain;'>");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 初始显示状态 - 封面
|
||||||
|
if(coverImageType == 'url'){
|
||||||
|
$('#coverTypeUrl').show();
|
||||||
|
// 如果已有URL，显示预览
|
||||||
|
if(coverImg){
|
||||||
|
$("#coverImg").html("<img src='" + coverImg + "' alt='封面' style='width:100%;height:100%;object-fit:contain;'>");
|
||||||
|
} else {
|
||||||
|
$('#coverTypeUpload').hide();
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
$('#coverTypeUrl').hide();
|
||||||
|
$('#coverTypeUpload').show();
|
||||||
|
// 如果已上传图片，显示预览
|
||||||
|
if(coverImg){
|
||||||
|
$("#coverImg").html("<img src='" + ns.img(coverImg) + "' alt='封面'>");
|
||||||
|
} else {
|
||||||
|
$("#coverImg").html(uploadHtml);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 头像上传
|
||||||
|
$("body").off("click", "#avatarImg").on("click", "#avatarImg", function () {
|
||||||
|
openAlbum(function (data) {
|
||||||
|
imageCollection = [];
|
||||||
|
imageCollection.push(data[0].pic_path);
|
||||||
|
imageCollection.splice(1, imageCollection.length);
|
||||||
|
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="头像">';
|
||||||
|
$("#avatarImg").html(val);
|
||||||
|
$("input[name='avatar_url_upload']").val(imageCollection[0]);
|
||||||
|
}, 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 删除头像
|
||||||
|
$("#avatarImg").next(".del").click(function () {
|
||||||
|
$("#avatarImg").html('<div class="upload-default"><i class="iconfont iconshangchuan"></i><p>点击上传</p></div>');
|
||||||
|
$("input[name='avatar_url']").val('');
|
||||||
|
$("input[name='avatar_url_upload']").val('');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 封面上传
|
||||||
|
$("body").off("click", "#coverImg").on("click", "#coverImg", function () {
|
||||||
|
openAlbum(function (data) {
|
||||||
|
var val = '<img src="' + ns.img(data[0].pic_path) + '" alt="封面">';
|
||||||
|
$("#coverImg").html(val);
|
||||||
|
$("input[name='cover_url_upload']").val(data[0].pic_path);
|
||||||
|
}, 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 删除封面
|
||||||
|
$("#coverImg").next(".del").click(function () {
|
||||||
|
$("#coverImg").html('<div class="upload-default"><i class="iconfont iconshangchuan"></i><p>点击上传</p></div>');
|
||||||
|
$("input[name='cover_url']").val('');
|
||||||
|
$("input[name='cover_url_upload']").val('');
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表单提交(立即发布)
|
||||||
|
*/
|
||||||
|
form.on('submit(save)', function(data){
|
||||||
|
var field = data.field;
|
||||||
|
// 根据头像类型设置正确的头像URL
|
||||||
|
if(field.avatar_image_type == 'upload'){
|
||||||
|
field.avatar_url = field.avatar_url_upload;
|
||||||
|
}
|
||||||
|
// 根据封面类型设置正确的封面URL
|
||||||
|
if(field.cover_image_type == 'upload'){
|
||||||
|
field.cover_url = field.cover_url_upload;
|
||||||
|
}
|
||||||
|
delete field.avatar_url_upload;
|
||||||
|
delete field.cover_url_upload;
|
||||||
|
field.status = 1;
|
||||||
|
|
||||||
|
// 编辑模式下需要设置 channel_id
|
||||||
|
if(isEditMode && channel_id > 0){
|
||||||
|
field.channel_id = channel_id;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(isEditMode ? '编辑：提交的数据' : '添加：提交的数据', field)
|
||||||
|
formSubmit(field, !isEditMode)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 提交
|
||||||
|
* @param data 表单数据
|
||||||
|
* @param isAdd 是否是新增操作，true-新增，false-编辑
|
||||||
|
*/
|
||||||
|
function formSubmit(data, isAdd){
|
||||||
|
if(repeat_flag) return;
|
||||||
|
repeat_flag = true;
|
||||||
|
var url = ns.url("personnel://shop/enterprise/channeladd")
|
||||||
|
if(data.channel_id > 0) url = ns.url("personnel://shop/enterprise/channeledit")
|
||||||
|
setTimeout(function () {
|
||||||
|
$.ajax({
|
||||||
|
type: 'POST',
|
||||||
|
dataType: 'JSON',
|
||||||
|
url: url,
|
||||||
|
data: data,
|
||||||
|
async: false,
|
||||||
|
success: function(res){
|
||||||
|
repeat_flag = false;
|
||||||
|
if (res.code == 0) {
|
||||||
|
if(isAdd){
|
||||||
|
// 新增成功，显示两个按钮
|
||||||
|
layer.confirm('操作成功', {
|
||||||
|
title:'操作提示',
|
||||||
|
btn: ['返回列表', '继续添加'],
|
||||||
|
closeBtn: 0,
|
||||||
|
yes: function(index, layero){
|
||||||
|
location.hash = ns.hash("personnel://shop/enterprise/channellists");
|
||||||
|
layer.close(index);
|
||||||
|
},
|
||||||
|
btn2: function(index, layero) {
|
||||||
|
listenerHash(); // 刷新页面
|
||||||
|
layer.close(index);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 编辑成功，只显示一个按钮
|
||||||
|
layer.confirm('操作成功', {
|
||||||
|
title:'操作提示',
|
||||||
|
btn: ['返回列表'],
|
||||||
|
closeBtn: 0,
|
||||||
|
yes: function(index, layero){
|
||||||
|
location.hash = ns.hash("personnel://shop/enterprise/channellists");
|
||||||
|
layer.close(index);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
layer.msg(res.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function back() {
|
||||||
|
location.hash = ns.hash("personnel://shop/enterprise/channellists");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
228
src/addon/personnel/shop/view/enterprise/channel/lists.html
Normal file
228
src/addon/personnel/shop/view/enterprise/channel/lists.html
Normal file
@@ -0,0 +1,228 @@
|
|||||||
|
<!-- 搜索框 -->
|
||||||
|
<div class="single-filter-box top">
|
||||||
|
<button class="layui-btn" onclick="add()">添加视频号</button>
|
||||||
|
|
||||||
|
<div class="layui-form">
|
||||||
|
<!-- <div class="layui-input-inline">
|
||||||
|
<select name="channel_type">
|
||||||
|
<option value="">全部类型</option>
|
||||||
|
<option value="wechat">微信视频号</option>
|
||||||
|
<option value="douyin">抖音</option>
|
||||||
|
<option value="kuaishou">快手</option>
|
||||||
|
<option value="redbook">小红书</option>
|
||||||
|
<option value="bilibili">B站</option>
|
||||||
|
</select>
|
||||||
|
</div> -->
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<select name="is_show">
|
||||||
|
<option value="">全部状态</option>
|
||||||
|
<option value="1">显示</option>
|
||||||
|
<option value="0">隐藏</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<select name="order">
|
||||||
|
<option value="">默认排序</option>
|
||||||
|
<option value="sort asc">排序升序</option>
|
||||||
|
<option value="sort desc">排序降序</option>
|
||||||
|
<option value="create_time asc">创建时间升序</option>
|
||||||
|
<option value="create_time desc">创建时间降序</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" name="search_text" placeholder="请输入视频号名称" autocomplete="off" class="layui-input">
|
||||||
|
<button type="button" class="layui-btn layui-btn-primary" lay-filter="search" lay-submit>
|
||||||
|
<i class="layui-icon"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 列表 -->
|
||||||
|
<table id="channel_list" lay-filter="channel_list"></table>
|
||||||
|
|
||||||
|
<!-- 操作 -->
|
||||||
|
<script type="text/html" id="operation">
|
||||||
|
<div class="table-btn">
|
||||||
|
<a class="layui-btn" lay-event="edit">编辑</a>
|
||||||
|
<a class="layui-btn" lay-event="delete">删除</a>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- 视频内容信息 -->
|
||||||
|
<script type="text/html" id="info">
|
||||||
|
<div class='table-title'>
|
||||||
|
{{# if(d.cover_url){ }}
|
||||||
|
<div class='title-pic'>
|
||||||
|
<img layer-src src="{{ns.img(d.cover_url)}}" onerror="this.src = ns.url('public/static/img/default_img/square.png')" alt="{{d.video_title}}">
|
||||||
|
</div>
|
||||||
|
{{# } }}
|
||||||
|
<div class='title-content'>
|
||||||
|
<p class="layui-elip" style="font-size: 12px;color: #999;margin-top: 5px;">{{d.feed_token}}</p>
|
||||||
|
<p class="layui-elip" style="font-weight: 500; font-size: 18px; color:#000">{{d.video_title}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- 视频号内容信息 -->
|
||||||
|
<script type="text/html" id="channelinfo">
|
||||||
|
<div class='table-title'>
|
||||||
|
{{# if(d.avatar_url){ }}
|
||||||
|
<div class='title-pic headimg'>
|
||||||
|
<img layer-src src="{{ns.img(d.avatar_url)}}" onerror="this.src = ns.url('public/static/img/default_img/square.png')" alt="{{d.channel_name}}">
|
||||||
|
</div>
|
||||||
|
{{# } }}
|
||||||
|
<div class='title-content'>
|
||||||
|
<!-- <p class="layui-elip" style="font-size: 12px;color: #999;margin-top: 5px;">{{d.channel_id}}</p> -->
|
||||||
|
<p class="layui-elip" style="font-weight: 500; font-size: 13px; color:#000">{{d.channel_name}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 是否显示状态 -->
|
||||||
|
<script type="text/html" id="isShow">
|
||||||
|
{{# if(d.is_show == 1){ }}
|
||||||
|
<span class="layui-badge layui-bg-green">显示</span>
|
||||||
|
{{# } else { }}
|
||||||
|
<span class="layui-badge layui-bg-gray">隐藏</span>
|
||||||
|
{{# } }}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- 视频号类型 -->
|
||||||
|
<script type="text/html" id="channelType">
|
||||||
|
{{# if(d.channel_type == 'wechat'){ }}
|
||||||
|
<span class="layui-badge layui-bg-blue">微信视频号</span>
|
||||||
|
{{# } else if(d.channel_type == 'douyin'){ }}
|
||||||
|
<span class="layui-badge layui-bg-cyan">抖音</span>
|
||||||
|
{{# } else if(d.channel_type == 'kuaishou'){ }}
|
||||||
|
<span class="layui-badge layui-bg-orange">快手</span>
|
||||||
|
{{# } else if(d.channel_type == 'redbook'){ }}
|
||||||
|
<span class="layui-badge layui-bg-red">小红书</span>
|
||||||
|
{{# } else if(d.channel_type == 'bilibili'){ }}
|
||||||
|
<span class="layui-badge layui-bg-green">B站</span>
|
||||||
|
{{# } else { }}
|
||||||
|
<span class="layui-badge layui-bg-gray">{{d.channel_type || '未知'}}</span>
|
||||||
|
{{# } }}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var form,laytpl,table, repeat_flag = false;//防重复标识;
|
||||||
|
layui.use(['form','laytpl'], function() {
|
||||||
|
form = layui.form;
|
||||||
|
laytpl = layui.laytpl;
|
||||||
|
form.render();
|
||||||
|
|
||||||
|
table = new Table({
|
||||||
|
elem: '#channel_list',
|
||||||
|
url: ns.url("personnel://shop/enterprise/channellists"),
|
||||||
|
cols: [[
|
||||||
|
{
|
||||||
|
field: 'video_title',
|
||||||
|
title: '视频',
|
||||||
|
width: '40%',
|
||||||
|
unresize: 'false',
|
||||||
|
templet: '#info'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'channel_name',
|
||||||
|
title: '视频号',
|
||||||
|
width: '15%',
|
||||||
|
unresize: 'false',
|
||||||
|
templet: '#channelinfo'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'channel_type',
|
||||||
|
title: '类型',
|
||||||
|
width: '12%',
|
||||||
|
unresize: 'false',
|
||||||
|
templet: '#channelType'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'is_show',
|
||||||
|
title: '显示',
|
||||||
|
width: '5%',
|
||||||
|
unresize: 'false',
|
||||||
|
templet: '#isShow'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'sort',
|
||||||
|
title: '排序',
|
||||||
|
width: '5%',
|
||||||
|
unresize: 'false'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'view_count',
|
||||||
|
title: '观看次数',
|
||||||
|
width: '8%',
|
||||||
|
unresize: 'false'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
toolbar: '#operation',
|
||||||
|
unresize: 'false',
|
||||||
|
align : 'right'
|
||||||
|
}
|
||||||
|
]],
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 搜索功能
|
||||||
|
*/
|
||||||
|
form.on('submit(search)', function(data) {
|
||||||
|
table.reload({
|
||||||
|
page: {
|
||||||
|
curr: 1
|
||||||
|
},
|
||||||
|
where: data.field
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 监听工具栏操作
|
||||||
|
*/
|
||||||
|
table.tool(function(obj) {
|
||||||
|
var data = obj.data;
|
||||||
|
switch (obj.event) {
|
||||||
|
case 'edit': //编辑
|
||||||
|
location.hash = ns.hash("personnel://shop/enterprise/channeledit?channel_id=" + data.channel_id);
|
||||||
|
break;
|
||||||
|
case 'delete': //删除
|
||||||
|
deleteChannel(data.channel_id);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除
|
||||||
|
*/
|
||||||
|
function deleteChannel(channel_id) {
|
||||||
|
if (repeat_flag) return false;
|
||||||
|
repeat_flag = true;
|
||||||
|
|
||||||
|
layer.confirm('确定要删除该视频号吗?', function (index) {
|
||||||
|
layer.close(index);
|
||||||
|
$.ajax({
|
||||||
|
url: ns.url("personnel://shop/enterprise/channeldelete"),
|
||||||
|
data: {channel_id},
|
||||||
|
dataType: 'JSON',
|
||||||
|
type: 'POST',
|
||||||
|
success: function (res) {
|
||||||
|
layer.msg(res.message);
|
||||||
|
repeat_flag = false;
|
||||||
|
if (res.code == 0) {
|
||||||
|
table.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
function () {
|
||||||
|
repeat_flag = false;
|
||||||
|
layer.close();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function add() {
|
||||||
|
location.hash = ns.hash("personnel://shop/enterprise/channeladd");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
BIN
src/addon/personnel/shop/view/public/img/channel.png
Normal file
BIN
src/addon/personnel/shop/view/public/img/channel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@@ -576,6 +576,8 @@ class Member extends BaseApi
|
|||||||
|
|
||||||
$Personnelmodel = new PersonnelModel();
|
$Personnelmodel = new PersonnelModel();
|
||||||
$set = $Personnelmodel->getPersonnelSet($this->site_id, $this->app_module)[ 'data' ][ 'value' ];
|
$set = $Personnelmodel->getPersonnelSet($this->site_id, $this->app_module)[ 'data' ][ 'value' ];
|
||||||
|
//视频号数据
|
||||||
|
$channel_list = model('personnel_channel')->getList(['site_id'=>$this->site_id, 'is_show'=>1],'*','sort asc createtime desc');
|
||||||
//视频文件
|
//视频文件
|
||||||
$video_list = model('personnel_video')->getList(['site_id'=>$this->site_id],'*','createtime desc');
|
$video_list = model('personnel_video')->getList(['site_id'=>$this->site_id],'*','createtime desc');
|
||||||
//企业文件
|
//企业文件
|
||||||
@@ -583,7 +585,20 @@ class Member extends BaseApi
|
|||||||
//电子名片diy
|
//电子名片diy
|
||||||
$config = $Personnelmodel->getPersonnelSet($this->site_id, $this->app_module)[ 'data' ][ 'value' ];
|
$config = $Personnelmodel->getPersonnelSet($this->site_id, $this->app_module)[ 'data' ][ 'value' ];
|
||||||
$config['value'] = json_decode($config['value'],true);
|
$config['value'] = json_decode($config['value'],true);
|
||||||
return $this->response(['code'=>'0','data'=>$list,'message'=>'操作成功','shop'=>$shop_info_result,'set'=>$set,'video_list'=>$video_list,'file_list'=>$file_list,'diy'=>$config['value']]);
|
return $this->response(['code'=>'0','data'=>$list,'message'=>'操作成功','shop'=>$shop_info_result,'set'=>$set,'channel_list'=>$channel_list, 'video_list'=>$video_list,'file_list'=>$file_list,'diy'=>$config['value']]);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 视频号观看次数+1
|
||||||
|
*/
|
||||||
|
public function incrementChannelViewCount()
|
||||||
|
{
|
||||||
|
$id = $this->params[ 'channel_id' ] ?? 0;
|
||||||
|
if (empty($id)) {
|
||||||
|
return $this->response($this->error('', '未传视频号id！'));
|
||||||
|
}
|
||||||
|
$cur_view_count = model('personnel_channel')->getValue(['channel_id'=>$id], 'view_count', 0);
|
||||||
|
$res = model('personnel_channel')->update(['view_count'=>$cur_view_count+1],['channel_id'=>$id]);
|
||||||
|
return $this->response(['code'=>'0','message'=>'操作成功', 'data'=>$res, 'channel_id'=>$id, 'pre_view_count'=>$cur_view_count]);
|
||||||
}
|
}
|
||||||
//留言
|
//留言
|
||||||
public function message()
|
public function message()
|
||||||
|
|||||||
17
src/app/component/controller/WechatChannel.php
Normal file
17
src/app/component/controller/WechatChannel.php
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<?php
|
||||||
|
namespace app\component\controller;
|
||||||
|
|
||||||
|
/**
|
||||||
|
|
||||||
|
* 微信视频号组件
|
||||||
|
*/
|
||||||
|
class WechatChannel extends BaseDiyView
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* 后台编辑界面
|
||||||
|
*/
|
||||||
|
public function design()
|
||||||
|
{
|
||||||
|
return $this->fetch("wechat_channel/design.html");
|
||||||
|
}
|
||||||
|
}
|
||||||
315
src/app/component/view/wechat_channel/css/design.css
Normal file
315
src/app/component/view/wechat_channel/css/design.css
Normal file
@@ -0,0 +1,315 @@
|
|||||||
|
.wechat_channel-box .preview-draggable {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-list-wrap {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(var(--row-count, 2), 1fr);
|
||||||
|
gap: 8px;
|
||||||
|
padding: 16px 16px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-item {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-wrap {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-wrap .channel-preview {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-item .channel-preview img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-item .channel-preview {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-item .play-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-item .play-btn::before {
|
||||||
|
content: '';
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 10px 0 10px 16px;
|
||||||
|
border-color: transparent transparent transparent #fff;
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-item .view-count {
|
||||||
|
position: absolute;
|
||||||
|
right: 2px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #fff;
|
||||||
|
padding: 4px 4px;
|
||||||
|
/* border-radius: 16px; */
|
||||||
|
margin-bottom: 0;
|
||||||
|
z-index: 10;
|
||||||
|
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-item .channel-info {
|
||||||
|
position: relative;
|
||||||
|
padding: 8px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 0 0 8px 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
margin-top: -4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-item .channel-avatar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-item .channel-text {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-item .channel-name {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-item .video-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
word-break: break-all;
|
||||||
|
word-wrap: break-word;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 1行标题 */
|
||||||
|
.wechat_channel-box .video-item .video-title.title-max-lines-1 {
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2行标题 */
|
||||||
|
.wechat_channel-box .video-item .video-title.title-max-lines-2 {
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 3行标题 */
|
||||||
|
.wechat_channel-box .video-item .video-title.title-max-lines-3 {
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-item .bottom-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin-top: 8px;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-item .video-placeholder {
|
||||||
|
height: 200px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: 1px dashed #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-item .placeholder-text {
|
||||||
|
color: #999;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 轮播样式 */
|
||||||
|
.wechat_channel-box .video-carousel-wrap {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-carousel {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .carousel-item {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.5s ease-in-out;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .carousel-item.active {
|
||||||
|
position: relative;
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .carousel-indicators {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
width: fit-content;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .carousel-indicators .indicator {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: rgba(255, 255, 255, 0.5);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .carousel-indicators .indicator.active {
|
||||||
|
background-color: #000000;
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 轮播模式下的视频项样式 */
|
||||||
|
.wechat_channel-box .video-carousel-wrap .video-item {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 轮播模式下的通道预览样式 */
|
||||||
|
.wechat_channel-box .video-carousel-wrap .channel-preview {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 16:9比例下的固定高度 */
|
||||||
|
/* 一行显示1个 */
|
||||||
|
.wechat_channel-box[data-ratio="16:9"] {
|
||||||
|
--image-height: 212px;
|
||||||
|
}
|
||||||
|
/* 一行显示2个 */
|
||||||
|
.wechat_channel-box[data-ratio="16:9"][data-row-count="2"] {
|
||||||
|
--image-height: 104px;
|
||||||
|
}
|
||||||
|
/* 一行显示3个 */
|
||||||
|
.wechat_channel-box[data-ratio="16:9"][data-row-count="3"] {
|
||||||
|
--image-height: 65px;
|
||||||
|
}
|
||||||
|
/* 一行显示4个 */
|
||||||
|
.wechat_channel-box[data-ratio="16:9"][data-row-count="4"] {
|
||||||
|
--image-height: 47px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 3:4比例下的固定高度 */
|
||||||
|
/* 一行显示1个 */
|
||||||
|
.wechat_channel-box[data-ratio="3:4"] {
|
||||||
|
--image-height: 408px;
|
||||||
|
}
|
||||||
|
/* 一行显示2个 */
|
||||||
|
.wechat_channel-box[data-ratio="3:4"][data-row-count="2"] {
|
||||||
|
--image-height: 200px;
|
||||||
|
}
|
||||||
|
/* 一行显示3个 */
|
||||||
|
.wechat_channel-box[data-ratio="3:4"][data-row-count="3"] {
|
||||||
|
--image-height: 130px;
|
||||||
|
}
|
||||||
|
/* 一行显示4个 */
|
||||||
|
.wechat_channel-box[data-ratio="3:4"][data-row-count="4"] {
|
||||||
|
--image-height: 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-item .channel-preview img {
|
||||||
|
height: var(--image-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-item .view-count {
|
||||||
|
top: calc(var(--image-height) - 32px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .edit-attribute .attr-wrap .restore-wrap .video-add-box .img-block {
|
||||||
|
width: 200px !important;
|
||||||
|
height: 125px !important;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
margin-right: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .edit-attribute .attr-wrap .restore-wrap .video-add-box .img-block>div {
|
||||||
|
line-height: 125px;
|
||||||
|
height: 125px !important;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .edit-attribute .attr-wrap .restore-wrap .video-add-box .img-block video {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 125px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .edit-attribute .attr-wrap .restore-wrap .video-add-box .img-block span {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-zhezhao {
|
||||||
|
position: absolute;
|
||||||
|
background: #fff;
|
||||||
|
width: 61%;
|
||||||
|
height: 125px;
|
||||||
|
top: 1px;
|
||||||
|
right: 32px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 105px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat_channel-box .video-zhezhao span {
|
||||||
|
position: absolute;
|
||||||
|
top: 35px;
|
||||||
|
left: 80px;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .wechat_channel-box .layui-form-label + .layui-input-block {margin-left: 0 !important;} */
|
||||||
110
src/app/component/view/wechat_channel/design.html
Normal file
110
src/app/component/view/wechat_channel/design.html
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
<nc-component :data="data[index]" class="wechat_channel-box" :data-ratio="nc.aspectRatio || '16:9'" :data-row-count="nc.rowCount || 2">
|
||||||
|
|
||||||
|
<!-- 预览 -->
|
||||||
|
<template slot="preview" >
|
||||||
|
<!-- 轮播模式 -->
|
||||||
|
<div v-if="nc.showStyle == 'carousel'" class="video-carousel-wrap" :style="{ '--row-count': nc.rowCount || 2 }">
|
||||||
|
<div class="video-carousel">
|
||||||
|
<div v-for="(itemGroup, groupIdx) in nc.groupedList" :key="groupIdx" class="carousel-item" :class="{ active: nc.currentSlide == groupIdx }">
|
||||||
|
<div class="video-list" :style="{ '--row-count': nc.rowCount || 2 }">
|
||||||
|
<div v-for="(item, idx) in itemGroup" :key="idx" class="video-item">
|
||||||
|
<div class="channel-preview" v-if="item.coverUrl" :style="{
|
||||||
|
borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||||
|
borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||||
|
borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
|
||||||
|
borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0) }">
|
||||||
|
<img :src="changeImgUrl(item.coverUrl)" style="width:100%;display:block;" mode="aspectFill"/>
|
||||||
|
<div v-if="nc.showPlayBtn" class="play-btn"></div>
|
||||||
|
<div class="channel-info" v-if="item.finderUserName || item.videoTitle">
|
||||||
|
<div class="channel-avatar" v-if="item.avatarUrl">
|
||||||
|
<img :src="changeImgUrl(item.avatarUrl)" mode="aspectFill"/>
|
||||||
|
</div>
|
||||||
|
<div class="channel-text">
|
||||||
|
<!-- <div class="channel-name" v-if="item.finderUserName">{{ item.finderUserName }}</div> -->
|
||||||
|
<div class="video-title" :class="'title-max-lines-' + (nc.titleLineClamp || 1)">{{ item.videoTitle || '视频标题' }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="view-count" v-if="item.showViewCount">{{ item.viewCount }}次观看</div>
|
||||||
|
</div>
|
||||||
|
<div class="video-placeholder" v-else :style="{
|
||||||
|
borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||||
|
borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||||
|
borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
|
||||||
|
borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0) }">
|
||||||
|
<div class="placeholder-text">请配置视频号信息</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="nc.groupedList && nc.groupedList.length > 0" class="carousel-indicators">
|
||||||
|
<span v-for="(itemGroup, groupIdx) in nc.groupedList" :key="groupIdx" class="indicator" :class="{ active: nc.currentSlide == groupIdx }" @click="nc.currentSlide = groupIdx"></span>
|
||||||
|
</div>
|
||||||
|
<div v-else class="video-placeholder" :style="{
|
||||||
|
borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||||
|
borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||||
|
borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
|
||||||
|
borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0) }">
|
||||||
|
<div class="placeholder-text">请添加视频号</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 非轮播模式 -->
|
||||||
|
<div v-else class="video-list-wrap" :style="{ '--row-count': nc.rowCount || 2 }">
|
||||||
|
<div v-if="nc.list && nc.list.length > 0" class="video-list">
|
||||||
|
<div v-for="(item, idx) in nc.list" :key="idx" class="video-item">
|
||||||
|
<div class="channel-preview" v-if="item.coverUrl" :style="{
|
||||||
|
borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||||
|
borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||||
|
borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
|
||||||
|
borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0) }">
|
||||||
|
<img :src="changeImgUrl(item.coverUrl)" style="width:100%;display:block;" mode="aspectFill"/>
|
||||||
|
<div v-if="nc.showPlayBtn" class="play-btn"></div>
|
||||||
|
<div class="channel-info" v-if="item.finderUserName || item.videoTitle">
|
||||||
|
<div class="channel-avatar" v-if="item.avatarUrl">
|
||||||
|
<img :src="changeImgUrl(item.avatarUrl)" mode="aspectFill"/>
|
||||||
|
</div>
|
||||||
|
<div class="channel-text">
|
||||||
|
<!-- <div class="channel-name" v-if="item.finderUserName">{{ item.finderUserName }}</div> -->
|
||||||
|
<div class="video-title" :class="'title-max-lines-' + (nc.titleLineClamp || 1)">{{ item.videoTitle || '视频标题' }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="view-count" v-if="item.showViewCount">{{ item.viewCount }}次观看</div>
|
||||||
|
</div>
|
||||||
|
<div class="video-placeholder" v-else :style="{
|
||||||
|
borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||||
|
borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||||
|
borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
|
||||||
|
borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0) }">
|
||||||
|
<div class="placeholder-text">请配置视频号信息</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="video-placeholder" :style="{
|
||||||
|
borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||||
|
borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||||
|
borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
|
||||||
|
borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0) }">
|
||||||
|
<div class="placeholder-text">请添加视频号</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 内容编辑 -->
|
||||||
|
<template slot="edit-content">
|
||||||
|
<template v-if="nc.lazyLoad">
|
||||||
|
<wechat_channel-edit></wechat_channel-edit>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 样式编辑 -->
|
||||||
|
<template slot="edit-style"></template>
|
||||||
|
|
||||||
|
<!-- 资源 -->
|
||||||
|
<template slot="resource">
|
||||||
|
<js src="__STATIC__/js/Sortable.min.js"></js>
|
||||||
|
<css src="{$resource_path}/css/design.css"></css>
|
||||||
|
<js src="{$resource_path}/js/design.js"></js>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</nc-component>
|
||||||
563
src/app/component/view/wechat_channel/js/design.js
Normal file
563
src/app/component/view/wechat_channel/js/design.js
Normal file
@@ -0,0 +1,563 @@
|
|||||||
|
Vue.component("wechat_channel-edit", {
|
||||||
|
template: `<div class="wechat_channel-edit">
|
||||||
|
<div class="template-edit-title">
|
||||||
|
<h3>容器设置</h3>
|
||||||
|
|
||||||
|
<!-- 每行显示数量 -->
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label sm">每行显示数量</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<select name="row_count" lay-filter="rowCount" v-model="data.rowCount">
|
||||||
|
<option value="1">1个</option>
|
||||||
|
<option value="2" :selected="data.rowCount == 2 || !data.rowCount">2个</option>
|
||||||
|
<option value="3" :selected="data.rowCount == 3">3个</option>
|
||||||
|
<option value="4" :selected="data.rowCount == 4">4个</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 显示风格 -->
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label sm">显示风格</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<select name="show_style" lay-filter="showStyle" v-model="data.showStyle">
|
||||||
|
<option value="carousel" :selected="data.showStyle == 'carousel'">轮播</option>
|
||||||
|
<option value="fixed" :selected="data.showStyle == 'fixed'">固定</option>
|
||||||
|
<option value="auto" :selected="data.showStyle == 'singleSlide'">单页</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 显示比例 -->
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label sm"><span class="required">*</span>显示比例</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="radio" name="aspect_ratio" lay-filter="aspectRatio" value="16:9" title="16:9" :checked="data.aspectRatio == '16:9' || !data.aspectRatio">
|
||||||
|
<input type="radio" name="aspect_ratio" lay-filter="aspectRatio" value="3:4" title="3:4" :checked="data.aspectRatio == '3:4'">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 标题最多行数 -->
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label sm">标题最多行数</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<select name="title_max_lines" lay-filter="titleLineClamp" v-model="data.titleLineClamp">
|
||||||
|
<option value="1" :selected="data.titleLineClamp == 1 || !data.titleLineClamp">1行</option>
|
||||||
|
<option value="2" :selected="data.titleLineClamp == 2">2行</option>
|
||||||
|
<option value="3" :selected="data.titleLineClamp == 3">3行</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 显示播放按钮 -->
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label sm">显示播放按钮</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="checkbox" name="show_play_btn" lay-filter="showPlayBtn" lay-skin="switch" :checked="data.showPlayBtn == true || !data.showPlayBtn">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="template-edit-title">
|
||||||
|
<h3>视频列表</h3>
|
||||||
|
|
||||||
|
<!-- 视频号列表 -->
|
||||||
|
<div class="video-list-edit" id="videoListEdit">
|
||||||
|
<div v-for="(item, index) in data.list" :key="index" class="video-item-edit" :data-index="index">
|
||||||
|
<div class="drag-handle" style="cursor: move; padding: 10px; background: #f5f5f5; margin: -10px -10px 10px; text-align: center; color: #999;">
|
||||||
|
<span class="layui-icon layui-icon-up">拖拽排序</span>
|
||||||
|
</div>
|
||||||
|
<div class="video-item-header">
|
||||||
|
<h4>视频 {{ index + 1 }}</h4>
|
||||||
|
<button type="button" class="layui-btn layui-btn-danger layui-btn-xs" @click="removeVideoItem(index)">删除</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 填写视频号 -->
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label sm"><span class="required">*</span>视频号ID</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" v-model="item.finderUserName" placeholder="请输入视频号ID(FinderUserName)的值" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 填写视频号内容ID -->
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label sm"><span class="required">*</span>视频标识</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" v-model="item.feedId" placeholder="请输入视频唯一标识FeedID的值" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 填写视频标题 -->
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label sm"><span class="required">*</span>视频标题</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" v-model="item.videoTitle" placeholder="请输入视频标题" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 视频封面支持选择类型，直接上传或选择 -->
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label sm"><span class="required">*</span>封面类型</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="radio" :name="'cover_image_type_' + index" lay-filter="coverImageType" :data-index="index" value="url" title="URL链接" :checked="item.coverImageType == 'url' || !item.coverImageType">
|
||||||
|
<input type="radio" :name="'cover_image_type_' + index" lay-filter="coverImageType" :data-index="index" value="upload" title="上传图片" :checked="item.coverImageType == 'upload'">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 填写视频封面URL -->
|
||||||
|
<div class="layui-form-item" v-if="item.coverImageType == 'url'">
|
||||||
|
<label class="layui-form-label sm"><span class="required">*</span>封面URL</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" v-model="item.coverUrl" placeholder="请输入视频封面URL" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 上传视频封面 -->
|
||||||
|
<div class="layui-form-item" :ref="'coverTypeUpload_' + index" v-if="item.coverImageType == 'upload'">
|
||||||
|
<label class="layui-form-label sm"><span class="required">*</span>封面图：</label>
|
||||||
|
<div class="layui-input-block img-upload" @click="uploadCover(index)">
|
||||||
|
<div class="upload-img-block simple-uploading">
|
||||||
|
<div class="upload-img-box" :id="'coverImg_' + index">
|
||||||
|
<div class="upload-default">
|
||||||
|
<i class="iconfont iconshangchuan"></i>
|
||||||
|
<p>点击上传</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="hidden" :name="'cover_url_upload_' + index" value="" />
|
||||||
|
<i class="del">x</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 填写观看次数 -->
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label sm">观看次数</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" v-model="item.viewCount" placeholder="请输入观看次数" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 显示观看次数 -->
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label sm">显示观看次数</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="checkbox" v-model="item.showViewCount" lay-skin="switch">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 头像类型 -->
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label sm">头像类型：</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="radio" :name="'avatar_image_type_' + index" lay-filter="avatarType" :data-index="index" value="url" title="URL链接" :checked="item.avatarImageType == 'url' || !item.avatarImageType">
|
||||||
|
<input type="radio" :name="'avatar_image_type_' + index" lay-filter="avatarType" :data-index="index" value="upload" title="上传图片" :checked="item.avatarImageType == 'upload'">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 填写头像URL -->
|
||||||
|
<div class="layui-form-item" v-if="item.avatarImageType == 'url'">
|
||||||
|
<label class="layui-form-label sm">头像URL：</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" v-model="item.avatarUrl" maxlength="255" autocomplete="off" placeholder="请输入头像URL" class="layui-input len-long">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 上传头像 -->
|
||||||
|
<div class="layui-form-item" v-if="item.avatarImageType == 'upload'">
|
||||||
|
<label class="layui-form-label sm">头像图：</label>
|
||||||
|
<div class="layui-input-block img-upload" @click="uploadAvatar(index)">
|
||||||
|
<div class="upload-img-block square simple-uploading">
|
||||||
|
<div class="upload-img-box" :id="'avatarImg_' + index">
|
||||||
|
<div class="upload-default">
|
||||||
|
<i class="iconfont iconshangchuan"></i>
|
||||||
|
<p>点击上传</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="hidden" :name="'avatar_url_upload_' + index" value="" />
|
||||||
|
<i class="del">x</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="word-aux sm">推荐使用 200x200 像素的图片</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 添加视频号按钮 -->
|
||||||
|
<button type="button" class="layui-btn layui-btn-normal" @click="addVideoItem">添加视频</button>
|
||||||
|
</div>
|
||||||
|
</div>`,
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
data: this.$parent.data
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
created: function () {
|
||||||
|
if (!this.$parent.data.verify) this.$parent.data.verify = [];
|
||||||
|
this.$parent.data.verify.push(this.verify);//加载验证方法
|
||||||
|
|
||||||
|
this.$parent.data.ignore = ['textColor', 'componentBgColor', 'elementBgColor', 'elementAngle'];//加载忽略内容 -- 其他设置中的属性设置
|
||||||
|
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
console.log("wechat_channel-edit", this.data)
|
||||||
|
|
||||||
|
// 初始化数据结构
|
||||||
|
if (!this.data.list) {
|
||||||
|
this.data.list = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.data.rowCount) {
|
||||||
|
this.data.rowCount = 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.data.showStyle) {
|
||||||
|
this.data.showStyle = 'fixed';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.data.aspectRatio) {
|
||||||
|
this.data.aspectRatio = '16:9';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.data.titleLineClamp) {
|
||||||
|
this.data.titleLineClamp = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.data.showPlayBtn === undefined) {
|
||||||
|
this.data.showPlayBtn = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化轮播幻灯片索引
|
||||||
|
if (this.data.currentSlide === undefined) {
|
||||||
|
this.data.currentSlide = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化分组列表
|
||||||
|
this.updateGroupedList();
|
||||||
|
|
||||||
|
// 初始化列表项
|
||||||
|
this.data.list.forEach((item, index) => {
|
||||||
|
if (!item.avatarImageType) {
|
||||||
|
item.avatarImageType = 'url';
|
||||||
|
} else if (item.avatarUrl && item.avatarImageType == 'upload') {
|
||||||
|
var val = '<img src="' + ns.img(item.avatarUrl) + '" alt="头像">';
|
||||||
|
$("#avatarImg_" + index).html(val);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!item.coverImageType) {
|
||||||
|
item.coverImageType = 'url';
|
||||||
|
} else if (item.coverUrl && item.coverImageType == 'upload') {
|
||||||
|
var val = '<img src="' + ns.img(item.coverUrl) + '" alt="封面">';
|
||||||
|
$("#coverImg_" + index).html(val);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.showViewCount === undefined) {
|
||||||
|
item.showViewCount = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
layui.use(['form'], () => {
|
||||||
|
var form = layui.form;
|
||||||
|
form.render();
|
||||||
|
|
||||||
|
// 头像类型切换
|
||||||
|
form.on('radio(avatarType)', (data) => {
|
||||||
|
const elem = data.elem;
|
||||||
|
const type = elem.value;
|
||||||
|
const index = elem.dataset.index;
|
||||||
|
|
||||||
|
if (index !== undefined && this.data.list[index]) {
|
||||||
|
this.data.list[index].avatarImageType = type;
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (type == 'upload' && this.data.list[index].avatarUrl) {
|
||||||
|
var val = '<img src="' + ns.img(this.data.list[index].avatarUrl) + '" alt="头像">';
|
||||||
|
$("#avatarImg_" + index).html(val);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 封面类型切换
|
||||||
|
form.on('radio(coverImageType)', (data) => {
|
||||||
|
const elem = data.elem;
|
||||||
|
const type = elem.value;
|
||||||
|
const index = elem.dataset.index;
|
||||||
|
|
||||||
|
if (index !== undefined && this.data.list[index]) {
|
||||||
|
this.data.list[index].coverImageType = type;
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (type == 'upload' && this.data.list[index].coverUrl) {
|
||||||
|
var val = '<img src="' + ns.img(this.data.list[index].coverUrl) + '" alt="封面">';
|
||||||
|
$("#coverImg_" + index).html(val);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 封面比例切换
|
||||||
|
form.on('radio(aspectRatio)', (data) => {
|
||||||
|
const elem = data.elem;
|
||||||
|
const ratio = elem.value;
|
||||||
|
this.data.aspectRatio = ratio;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 标题最多行数切换
|
||||||
|
form.on('select(titleLineClamp)', (data) => {
|
||||||
|
const lines = parseInt(data.value);
|
||||||
|
this.data.titleLineClamp = lines;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 每行显示数量切换
|
||||||
|
form.on('select(rowCount)', (data) => {
|
||||||
|
const count = parseInt(data.value);
|
||||||
|
this.data.rowCount = count;
|
||||||
|
// 更新分组列表
|
||||||
|
this.updateGroupedList();
|
||||||
|
// 重新初始化轮播功能，确保根据新的rowCount重新分组
|
||||||
|
this.initCarousel();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 显示风格切换
|
||||||
|
form.on('select(showStyle)', (data) => {
|
||||||
|
const style = data.value;
|
||||||
|
this.data.showStyle = style;
|
||||||
|
// 更新分组列表
|
||||||
|
this.updateGroupedList();
|
||||||
|
// 重新初始化轮播功能
|
||||||
|
this.initCarousel();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 显示播放按钮切换
|
||||||
|
form.on('switch(showPlayBtn)', (data) => {
|
||||||
|
const elem = data.elem;
|
||||||
|
const checked = elem.checked;
|
||||||
|
this.data.showPlayBtn = checked;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 显示观看次数切换
|
||||||
|
form.on('switch', (data) => {
|
||||||
|
const elem = data.elem;
|
||||||
|
const checked = elem.checked;
|
||||||
|
// 查找对应的视频号索引
|
||||||
|
const videoItem = elem.closest('.video-item-edit');
|
||||||
|
if (videoItem) {
|
||||||
|
const index = videoItem.dataset.index;
|
||||||
|
if (index !== undefined && this.data.list[index]) {
|
||||||
|
this.data.list[index].showViewCount = checked;
|
||||||
|
this.$forceUpdate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 初始化拖拽排序
|
||||||
|
this.initSortable();
|
||||||
|
|
||||||
|
// 初始化轮播自动切换
|
||||||
|
this.initCarousel();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
verify: function () {
|
||||||
|
var res = { code: true, message: "" };
|
||||||
|
// 微信视频号组件暂不需要强制验证
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 上传封面图片
|
||||||
|
uploadCover: function (index) {
|
||||||
|
|
||||||
|
// 从媒体库中选择
|
||||||
|
openAlbum((data) => {
|
||||||
|
const imgUrl = data[0].pic_path;
|
||||||
|
var val = '<img src="' + ns.img(imgUrl) + '" alt="封面">';
|
||||||
|
$("#coverImg_" + index).html(val);
|
||||||
|
|
||||||
|
if (this.data.list[index]) {
|
||||||
|
this.data.list[index].coverUrl = imgUrl;
|
||||||
|
}
|
||||||
|
}, 1);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 上传头像图片
|
||||||
|
uploadAvatar: function (index) {
|
||||||
|
|
||||||
|
// 从媒体库中选择
|
||||||
|
openAlbum((data) => {
|
||||||
|
const imgUrl = data[0].pic_path;
|
||||||
|
var val = '<img src="' + ns.img(imgUrl) + '" alt="头像">';
|
||||||
|
$("#avatarImg_" + index).html(val);
|
||||||
|
|
||||||
|
if (this.data.list[index]) {
|
||||||
|
this.data.list[index].avatarUrl = imgUrl;
|
||||||
|
}
|
||||||
|
}, 1);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 添加视频号
|
||||||
|
addVideoItem: function () {
|
||||||
|
this.data.list.push({
|
||||||
|
"channelType": "wechat",
|
||||||
|
"channelName": "",
|
||||||
|
"finderUserName": "",
|
||||||
|
"avatarImageType": "url",
|
||||||
|
"avatarUrl": "",
|
||||||
|
"videoTitle": "",
|
||||||
|
"coverImageType": "url",
|
||||||
|
"coverUrl": "",
|
||||||
|
"feedId": "",
|
||||||
|
"feedToken": "",
|
||||||
|
"viewCount": 0,
|
||||||
|
"showViewCount": true,
|
||||||
|
"embedMode": false
|
||||||
|
});
|
||||||
|
this.$forceUpdate();
|
||||||
|
this.$parent.$forceUpdate();
|
||||||
|
|
||||||
|
// 重新渲染表单并绑定事件
|
||||||
|
this.$nextTick(() => {
|
||||||
|
layui.use(['form'], () => {
|
||||||
|
var form = layui.form;
|
||||||
|
form.render();
|
||||||
|
|
||||||
|
// 重新绑定头像类型切换事件
|
||||||
|
form.on('radio(avatarType)', (data) => {
|
||||||
|
const elem = data.elem;
|
||||||
|
const type = elem.value;
|
||||||
|
const index = elem.dataset.index;
|
||||||
|
|
||||||
|
if (index !== undefined && this.data.list[index]) {
|
||||||
|
this.data.list[index].avatarImageType = type;
|
||||||
|
this.$forceUpdate();
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (type == 'upload' && this.data.list[index].avatarUrl) {
|
||||||
|
var val = '<img src="' + ns.img(this.data.list[index].avatarUrl) + '" alt="头像">';
|
||||||
|
$("#avatarImg_" + index).html(val);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 重新绑定封面类型切换事件
|
||||||
|
form.on('radio(coverImageType)', (data) => {
|
||||||
|
const elem = data.elem;
|
||||||
|
const type = elem.value;
|
||||||
|
const index = elem.dataset.index;
|
||||||
|
|
||||||
|
if (index !== undefined && this.data.list[index]) {
|
||||||
|
this.data.list[index].coverImageType = type;
|
||||||
|
this.$forceUpdate();
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (type == 'upload' && this.data.list[index].coverUrl) {
|
||||||
|
var val = '<img src="' + ns.img(this.data.list[index].coverUrl) + '" alt="封面">';
|
||||||
|
$("#coverImg_" + index).html(val);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 重新初始化拖拽排序
|
||||||
|
this.initSortable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除视频号
|
||||||
|
removeVideoItem: function (index) {
|
||||||
|
this.data.list.splice(index, 1);
|
||||||
|
this.$forceUpdate();
|
||||||
|
this.$parent.$forceUpdate();
|
||||||
|
|
||||||
|
// 重新初始化拖拽排序
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initSortable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 初始化拖拽排序
|
||||||
|
initSortable: function () {
|
||||||
|
// 检查Sortable库是否已加载
|
||||||
|
if (typeof Sortable !== 'undefined') {
|
||||||
|
const videoList = document.getElementById('videoListEdit');
|
||||||
|
if (videoList) {
|
||||||
|
// 销毁现有实例
|
||||||
|
if (this.sortableInstance) {
|
||||||
|
this.sortableInstance.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建新的Sortable实例
|
||||||
|
this.sortableInstance = new Sortable(videoList, {
|
||||||
|
handle: '.drag-handle',
|
||||||
|
animation: 150,
|
||||||
|
onEnd: (evt) => {
|
||||||
|
// 获取拖拽前后的索引
|
||||||
|
const oldIndex = evt.oldIndex;
|
||||||
|
const newIndex = evt.newIndex;
|
||||||
|
|
||||||
|
// 重新排序数组
|
||||||
|
if (oldIndex !== newIndex) {
|
||||||
|
const [movedItem] = this.data.list.splice(oldIndex, 1);
|
||||||
|
this.data.list.splice(newIndex, 0, movedItem);
|
||||||
|
|
||||||
|
// 强制更新视图
|
||||||
|
this.$forceUpdate();
|
||||||
|
this.$parent.$forceUpdate();
|
||||||
|
|
||||||
|
// 重新渲染表单
|
||||||
|
layui.use(['form'], () => {
|
||||||
|
var form = layui.form;
|
||||||
|
form.render();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 如果Sortable库未加载，尝试动态加载
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js';
|
||||||
|
script.onload = () => {
|
||||||
|
this.initSortable();
|
||||||
|
};
|
||||||
|
document.head.appendChild(script);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新分组列表
|
||||||
|
updateGroupedList: function () {
|
||||||
|
const list = this.data.list || [];
|
||||||
|
const rowCount = this.data.rowCount || 2;
|
||||||
|
const groups = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < list.length; i += rowCount) {
|
||||||
|
groups.push(list.slice(i, i + rowCount));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.data.groupedList = groups;
|
||||||
|
console.log("groupedList", this.data.groupedList);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 初始化轮播自动切换
|
||||||
|
initCarousel: function () {
|
||||||
|
// 清除现有的轮播定时器
|
||||||
|
if (this.carouselTimer) {
|
||||||
|
clearInterval(this.carouselTimer);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新分组列表
|
||||||
|
this.updateGroupedList();
|
||||||
|
|
||||||
|
// 只有当显示风格为carousel且有多个分组时才启动轮播
|
||||||
|
if (this.data.showStyle === 'carousel' && this.data.groupedList && this.data.groupedList.length > 1) {
|
||||||
|
this.carouselTimer = setInterval(() => {
|
||||||
|
this.data.currentSlide = (this.data.currentSlide + 1) % this.data.groupedList.length;
|
||||||
|
}, 3000); // 每3秒切换一次
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -105,6 +105,10 @@
|
|||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.heat-map-wrap .manage-wrap .list-wrap .item div {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.heat-map-wrap .manage-wrap .list-wrap .item div span {
|
.heat-map-wrap .manage-wrap .list-wrap .item div span {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@@ -115,6 +119,8 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="layui-form heat-map-wrap">
|
<div class="layui-form heat-map-wrap">
|
||||||
<div class="content-box" id="content_box"><!-- 热区列表 --></div>
|
<div class="content-box" id="content_box"><!-- 热区列表 --></div>
|
||||||
<div class="manage-wrap">
|
<div class="manage-wrap">
|
||||||
@@ -124,6 +130,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<script type="text/html" id="dragBoxHtml">
|
<script type="text/html" id="dragBoxHtml">
|
||||||
{{# for(let i=0;i<d.length;i++){ }}
|
{{# for(let i=0;i<d.length;i++){ }}
|
||||||
<div id="box_{{ i }}" class="area-box" style="left:{{ d[i].left }}{{ d[i].unit }};top:{{ d[i].top }}{{ d[i].unit }};width:{{ d[i].width }}{{ d[i].unit }};height:{{ d[i].height }}{{ d[i].unit }}" onmousedown="mouseDown(event,{{ i }})">
|
<div id="box_{{ i }}" class="area-box" style="left:{{ d[i].left }}{{ d[i].unit }};top:{{ d[i].top }}{{ d[i].unit }};width:{{ d[i].width }}{{ d[i].unit }};height:{{ d[i].height }}{{ d[i].unit }}" onmousedown="mouseDown(event,{{ i }})">
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.icon-img-box{
|
.icon-img-box{
|
||||||
width: 48px;
|
width: 48px;
|
||||||
@@ -12,6 +14,8 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div id="{$id}">
|
<div id="{$id}">
|
||||||
<div class="icon-img-box" v-if="myData.iconType == 'img'">
|
<div class="icon-img-box" v-if="myData.iconType == 'img'">
|
||||||
<img :src="changeImgUrl(myData.imageUrl) || changeImgUrl('public/static/img/default_img/square.png')" alt="">
|
<img :src="changeImgUrl(myData.imageUrl) || changeImgUrl('public/static/img/default_img/square.png')" alt="">
|
||||||
@@ -21,6 +25,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script src="STATIC_EXT/colorPicker/js/colorpicker.js"></script>
|
<script src="STATIC_EXT/colorPicker/js/colorpicker.js"></script>
|
||||||
<script src="STATIC_JS/vue.js"></script>
|
<script src="STATIC_JS/vue.js"></script>
|
||||||
{include file="diy/iconfont_component"/}
|
{include file="diy/iconfont_component"/}
|
||||||
|
|||||||
@@ -1,3 +1,6 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.layui-form {
|
.layui-form {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
@@ -92,6 +95,8 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div id="app" class="layui-form icon-style-set">
|
<div id="app" class="layui-form icon-style-set">
|
||||||
<div class="layui-form-item">
|
<div class="layui-form-item">
|
||||||
<label class="layui-form-label">图标：</label>
|
<label class="layui-form-label">图标：</label>
|
||||||
@@ -163,6 +168,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script src="STATIC_EXT/colorPicker/js/colorpicker.js"></script>
|
<script src="STATIC_EXT/colorPicker/js/colorpicker.js"></script>
|
||||||
<script src="STATIC_JS/vue.js"></script>
|
<script src="STATIC_JS/vue.js"></script>
|
||||||
{include file="diy/iconfont_component"/}
|
{include file="diy/iconfont_component"/}
|
||||||
|
|||||||
@@ -65,7 +65,7 @@
|
|||||||
},
|
},
|
||||||
iconStyle(){
|
iconStyle(){
|
||||||
if (!this.value) return {};
|
if (!this.value) return {};
|
||||||
|
// console.log(this.value)
|
||||||
var style = {
|
var style = {
|
||||||
fontSize: this.value.fontSize + '%'
|
fontSize: this.value.fontSize + '%'
|
||||||
}
|
}
|
||||||
|
|||||||
2
src/public/static/js/Sortable.min.js
vendored
Normal file
2
src/public/static/js/Sortable.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user