Merge branch 'feat/personnel_channel'
This commit is contained in:
@@ -37,8 +37,19 @@
|
|||||||
}
|
}
|
||||||
# --- REWRITE-END ---
|
# --- REWRITE-END ---
|
||||||
|
|
||||||
|
# --- 子目录 hwapp 及 hwappx 的配置，请勿删除，支持子目录网站，刷新，重定位 ---
|
||||||
|
location ~ ^/hwapp/(.*)$ {
|
||||||
|
try_files $uri $uri/ /hwapp/index.html;
|
||||||
|
}
|
||||||
|
|
||||||
|
location ~ ^/hwappx/([^/]+)/(.*)$ {
|
||||||
|
try_files $uri $uri/ /hwappx/$1/index.html;
|
||||||
|
}
|
||||||
|
# --- 子目录 hwapp 及 hwappx 配置结束 ---
|
||||||
|
|
||||||
|
|
||||||
#禁止访问的文件或目录
|
#禁止访问的文件或目录
|
||||||
location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
|
location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)$
|
||||||
{
|
{
|
||||||
return 404;
|
return 404;
|
||||||
}
|
}
|
||||||
|
|||||||
1257
docs/UPGRADE_BY_AI.md
Normal file
1257
docs/UPGRADE_BY_AI.md
Normal file
File diff suppressed because it is too large
Load Diff
@@ -24,4 +24,44 @@ create table if not exists lucky_diy_view_util
|
|||||||
constraint name
|
constraint name
|
||||||
unique (name)
|
unique (name)
|
||||||
)
|
)
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 页面设计及组件展示
|
||||||
|
|
||||||
|
- src\app\model\web\DiyView.php
|
||||||
|
- src\app\shop\view\diy\edit.html
|
||||||
|
- src\public\static\ext\diyview\js\components.js
|
||||||
|
|
||||||
|
## 如何添加新组件
|
||||||
|
|
||||||
|
|
||||||
|
### 1. 添加组件到数据表中
|
||||||
|
|
||||||
|
```sql
|
||||||
|
insert into lucky_diy_view_util (name, title, type, value, addon_name, sort, support_diy_view, max_count, is_delete, icon, icon_type)
|
||||||
|
values ('test', '测试', 'SYSTEM', '{"test": "test"}', '', 0, '', 0, 0, '', 0);
|
||||||
|
|
||||||
|
--- 微信视频号
|
||||||
|
-- 仅当WechatChannel不存在时添加记录
|
||||||
|
INSERT INTO lucky_diy_view_util (`name`, `title`, `type`, `value`, `addon_name`, `sort`, `support_diy_view`, `max_count`, `is_delete`, `icon`, `icon_type`)
|
||||||
|
SELECT 'WechatChannel', '微信视频号', 'SYSTEM', '{ "list": [{ "channelName":"", "finderUserName": "", "avatarImageType": "url", "avatarUrl": "", "videoTitle": "", "coverImageType": "url", "coverUrl": "", "feedId": "", "feedToken": "", "viewCount": 0, "showViewCount": true, "embedMode": false, "channelType":"wechat" }], "rowCount": 2, "showStyle": "fixed", "aspectRatio":"16:9", "titleLineClamp": 1, "showPlayBtn": true}', '', 100110, '', 0, 0, '/public/static/img/svg/xuanxiangka.svg', 0
|
||||||
|
WHERE NOT EXISTS (
|
||||||
|
SELECT 1 FROM lucky_diy_view_util WHERE name = 'WechatChannel'
|
||||||
|
);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### 2. 建立组件的控制器
|
||||||
|
在 `src\app\component\controller` 目录下创建对应的控制器文件，处理组件的业务逻辑。
|
||||||
|
|
||||||
|
例如：创建 `src\app\component\controller\TestController.php` 文件，用于处理测试组件的业务逻辑。
|
||||||
|
|
||||||
|
### 3. 建立组件的视图
|
||||||
|
在 src\app\component\view 目录下创建对应的视图文件，处理组件的前端展示。
|
||||||
|
|
||||||
|
例如：创建 `src\app\component\view\test.php` 文件，用于展示测试组件。
|
||||||
|
|
||||||
|
|
||||||
|
### 4. 在前端页面中使用组件
|
||||||
|
在前端页面中使用组件，需要在页面中添加对应的组件标签。
|
||||||
@@ -10,13 +10,13 @@ ADD COLUMN `show_follow` tinyint(1) NOT NULL DEFAULT 0 COMMENT '是否显示关
|
|||||||
|
|
||||||
-- 2. 优化现有字段长度和类型
|
-- 2. 优化现有字段长度和类型
|
||||||
ALTER TABLE `lucky_personnel_channel`
|
ALTER TABLE `lucky_personnel_channel`
|
||||||
MODIFY COLUMN `channel_type` varchar(20) NOT NULL DEFAULT 'wechat' COMMENT '视频号类型：wechat-微信视频号，douyin-抖音，kuaishou-快手，redbook-小红书，bilibili-B站',
|
MODIFY COLUMN `channel_type` varchar(30) NOT NULL DEFAULT 'wechat' COMMENT '视频号类型：wechat-微信视频号，douyin-抖音，kuaishou-快手，redbook-小红书，bilibili-B站',
|
||||||
MODIFY COLUMN `channel_name` varchar(100) NOT NULL DEFAULT '' COMMENT '视频号名称',
|
MODIFY COLUMN `channel_name` varchar(200) NOT NULL DEFAULT '' COMMENT '视频号名称',
|
||||||
MODIFY COLUMN `avatar_image_type` varchar(10) NOT NULL DEFAULT 'upload' COMMENT '头像类型：upload-上传图片，url-URL',
|
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 `avatar_url` varchar(500) NOT NULL DEFAULT '' COMMENT '头像URL',
|
||||||
MODIFY COLUMN `video_title` varchar(200) NOT NULL DEFAULT '' COMMENT '视频标题',
|
MODIFY COLUMN `video_title` varchar(500) NOT NULL DEFAULT '' COMMENT '视频标题',
|
||||||
MODIFY COLUMN `feed_id` varchar(100) NOT NULL DEFAULT '' COMMENT '视频号内容ID',
|
MODIFY COLUMN `feed_id` varchar(500) NOT NULL DEFAULT '' COMMENT '视频号内容ID',
|
||||||
MODIFY COLUMN `cover_image_type` varchar(10) NOT NULL DEFAULT 'upload' COMMENT '封面类型：upload-上传图片，url-URL',
|
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 `cover_url` varchar(500) NOT NULL DEFAULT '' COMMENT '封面URL',
|
||||||
MODIFY COLUMN `sort` int NOT NULL DEFAULT 0 COMMENT '排序，数值越小越靠前',
|
MODIFY COLUMN `sort` int NOT NULL DEFAULT 0 COMMENT '排序，数值越小越靠前',
|
||||||
MODIFY COLUMN `is_show` tinyint(1) NOT NULL DEFAULT 1 COMMENT '是否显示：0-隐藏，1-显示',
|
MODIFY COLUMN `is_show` tinyint(1) NOT NULL DEFAULT 1 COMMENT '是否显示：0-隐藏，1-显示',
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<link rel="stylesheet" type="text/css" href="SHOP_CSS/goods_edit.css?v=2" />
|
<link rel="stylesheet" type="text/css" href="SHOP_CSS/goods_edit.css?v=2" />
|
||||||
<style>
|
<style>
|
||||||
.upload-img-block .upload-img-box .upload-default{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
|
.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>
|
</style>
|
||||||
|
|
||||||
<div class="layui-form form-wrap">
|
<div class="layui-form form-wrap">
|
||||||
@@ -14,28 +15,52 @@
|
|||||||
<div class="layui-input-inline">
|
<div class="layui-input-inline">
|
||||||
<select name="channel_type" lay-verify="required">
|
<select name="channel_type" lay-verify="required">
|
||||||
<option value="wechat" {:$info['channel_type'] ? ($info['channel_type'] == 'wechat' ? 'selected' : '') : 'selected'}>微信视频号</option>
|
<option value="wechat" {:$info['channel_type'] ? ($info['channel_type'] == 'wechat' ? 'selected' : '') : 'selected'}>微信视频号</option>
|
||||||
<option value="douyin" {:$info['channel_type'] == 'douyin' ? 'selected' : ''}>抖音</option>
|
<!-- <option value="douyin" {:$info['channel_type'] == 'douyin' ? 'selected' : ''}>抖音</option> -->
|
||||||
<option value="kuaishou" {:$info['channel_type'] == 'kuaishou' ? 'selected' : ''}>快手</option>
|
<!-- <option value="kuaishou" {:$info['channel_type'] == 'kuaishou' ? 'selected' : ''}>快手</option> -->
|
||||||
<option value="redbook" {:$info['channel_type'] == 'redbook' ? 'selected' : ''}>小红书</option>
|
<!-- <option value="redbook" {:$info['channel_type'] == 'redbook' ? 'selected' : ''}>小红书</option> -->
|
||||||
<option value="bilibili" {:$info['channel_type'] == 'bilibili' ? 'selected' : ''}>B站</option>
|
<!-- <option value="bilibili" {:$info['channel_type'] == 'bilibili' ? 'selected' : ''}>B站</option> -->
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="layui-form-item">
|
<div class="layui-form-item">
|
||||||
<label class="layui-form-label"><span class="required">*</span>视频标题：</label>
|
<label class="layui-form-label short-label"><span class="required">*</span>视频号ID：</label>
|
||||||
<div class="layui-input-inline">
|
<div class="layui-input-block">
|
||||||
<input type="text" name="video_title" value="{$info.video_title}" lay-verify="required" maxlength="50" autocomplete="off" placeholder="请输入视频标题" class="layui-input len-long">
|
<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>
|
||||||
</div>
|
<div class="info-help layui-form-mid layui-word-aux">微信视频号ID获取方式：进入视频号助手，在首页可以查看自己的视频号ID，以sph开头为视频号ID</div>
|
||||||
|
</div>
|
||||||
<div class="layui-form-item">
|
<div class="layui-form-item">
|
||||||
<label class="layui-form-label"><span class="required">*</span>视频Token：</label>
|
<label class="layui-form-label"><span class="required">*</span>视频唯一标识：</label>
|
||||||
<div class="layui-input-inline">
|
<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">
|
<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>
|
</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">
|
<div class="layui-form-item">
|
||||||
<label class="layui-form-label"><span class="required">*</span>封面类型：</label>
|
<label class="layui-form-label"><span class="required">*</span>封面类型：</label>
|
||||||
<div class="layui-input-block">
|
<div class="layui-input-block">
|
||||||
@@ -68,19 +93,7 @@
|
|||||||
<div class="word-aux">推荐使用 750x420 像素的图片</div>
|
<div class="word-aux">推荐使用 750x420 像素的图片</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="layui-form-item">
|
|
||||||
<label class="layui-form-label short-label"><span class="required">*</span>视频号：</label>
|
|
||||||
<div class="layui-input-inline">
|
|
||||||
<input type="text" name="channel_name" value="{$info.channel_name}" lay-verify="required" maxlength="40" autocomplete="off" placeholder="请输入视频号名称。微信视频号，以"sph"开头的id" class="layui-input len-long">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="layui-form-item">
|
|
||||||
<label class="layui-form-label">内容ID：</label>
|
|
||||||
<div class="layui-input-inline">
|
|
||||||
<input type="text" name="feed_id" value="{$info.feed_id}" maxlength="50" autocomplete="off" placeholder="请输入视频号内容ID/feed_id. 微信视频号：仅视频号视频与小程序同主体时生效。" class="layui-input len-long">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="layui-form-item">
|
<div class="layui-form-item">
|
||||||
<label class="layui-form-label">头像类型：</label>
|
<label class="layui-form-label">头像类型：</label>
|
||||||
@@ -148,7 +161,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="layui-form-item">
|
<div class="layui-form-item" style="display: none;">
|
||||||
<label class="layui-form-label">显示关注按钮：</label>
|
<label class="layui-form-label">显示关注按钮：</label>
|
||||||
<div class="layui-input-block">
|
<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="1" title="显示" {$info.show_follow == 1 ? 'checked' : ''}>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<button class="layui-btn" onclick="add()">添加视频号</button>
|
<button class="layui-btn" onclick="add()">添加视频号</button>
|
||||||
|
|
||||||
<div class="layui-form">
|
<div class="layui-form">
|
||||||
<div class="layui-input-inline">
|
<!-- <div class="layui-input-inline">
|
||||||
<select name="channel_type">
|
<select name="channel_type">
|
||||||
<option value="">全部类型</option>
|
<option value="">全部类型</option>
|
||||||
<option value="wechat">微信视频号</option>
|
<option value="wechat">微信视频号</option>
|
||||||
@@ -12,7 +12,7 @@
|
|||||||
<option value="redbook">小红书</option>
|
<option value="redbook">小红书</option>
|
||||||
<option value="bilibili">B站</option>
|
<option value="bilibili">B站</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="layui-input-inline">
|
<div class="layui-input-inline">
|
||||||
<select name="is_show">
|
<select name="is_show">
|
||||||
<option value="">全部状态</option>
|
<option value="">全部状态</option>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
|
|
||||||
<div class="div-wrap">
|
<div class="div-wrap">
|
||||||
|
|
||||||
<div class='diy-view-wrap layui-form' :style="{ backgroundColor : '#f4f6fa' }">
|
<div class='diy-view-wrap layui-form' :style="{ backgroundColor : '#f4f6fa' }" lay-filter="diy-form">
|
||||||
|
|
||||||
<div class="preview-head">
|
<div class="preview-head">
|
||||||
<div class="nav-tabbar style-1 center">
|
<div class="nav-tabbar style-1 center">
|
||||||
@@ -112,7 +112,80 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-else @click="is_channel= 1" class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>
|
<div v-else @click="is_channel= 1" class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 视频号设置 -->
|
||||||
|
<div v-if="is_channel!= 0" class="channel-settings">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-input-block" style="margin-left: 0;">
|
||||||
|
<div class="collapse-header" @click="channelCollapsed = !channelCollapsed">
|
||||||
|
<span class="collapse-title">视频号内容设置</span>
|
||||||
|
<i class="layui-icon" :class="channelCollapsed ? 'layui-icon-down' : 'layui-icon-up'"></i>
|
||||||
|
</div>
|
||||||
|
<div v-show="!channelCollapsed" class="collapse-content">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label sm">显示样式</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<select name="channel_display_style" class="layui-select" lay-filter="channel_display_style">
|
||||||
|
<option value="carousel">轮播</option>
|
||||||
|
<option value="fixed">固定</option>
|
||||||
|
<option value="singleSlide">单页</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label sm">封面显示比例</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<select name="channel_aspect_ratio" class="layui-select" lay-filter="channel_aspect_ratio">
|
||||||
|
<option value="16:9">16:9</option>
|
||||||
|
<option value="3:4">3:4</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item checkbox-wrap custom-popup">
|
||||||
|
<label class="layui-form-label sm">显示观看次数</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<span v-if="!channel_show_view_count">隐藏</span><span v-else>显示</span>
|
||||||
|
<div v-if="channel_show_view_count" @click="channel_show_view_count= false" class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
|
||||||
|
<i class="layui-icon layui-icon-ok"></i>
|
||||||
|
</div>
|
||||||
|
<div v-else @click="channel_show_view_count= true" class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label sm">每行显示数量</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<select name="channel_row_count" class="layui-select" lay-filter="channel_row_count">
|
||||||
|
<option value="1">1</option>
|
||||||
|
<option value="2">2</option>
|
||||||
|
<option value="3">3</option>
|
||||||
|
<option value="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="channel_title_line_clamp" class="layui-select" lay-filter="channel_title_line_clamp">
|
||||||
|
<option value="1">1</option>
|
||||||
|
<option value="2">2</option>
|
||||||
|
<option value="3">3</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item checkbox-wrap custom-popup">
|
||||||
|
<label class="layui-form-label sm">显示播放按钮</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<span v-if="!channel_show_play_btn">隐藏</span><span v-else>显示</span>
|
||||||
|
<div v-if="channel_show_play_btn" @click="channel_show_play_btn= false" class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
|
||||||
|
<i class="layui-icon layui-icon-ok"></i>
|
||||||
|
</div>
|
||||||
|
<div v-else @click="channel_show_play_btn= true" class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="layui-form-item checkbox-wrap custom-popup">
|
<div class="layui-form-item checkbox-wrap custom-popup">
|
||||||
<label class="layui-form-label sm">地图导航</label>
|
<label class="layui-form-label sm">地图导航</label>
|
||||||
<div class="layui-input-block">
|
<div class="layui-input-block">
|
||||||
|
|||||||
@@ -0,0 +1,32 @@
|
|||||||
|
.collapse-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 15px;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-header:hover {
|
||||||
|
background-color: #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-title {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-content {
|
||||||
|
padding: 10px 15px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px dashed #8a8a8a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.channel-settings .layui-form-item {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
*/
|
*/
|
||||||
var vue = new Vue({
|
var vue = new Vue({
|
||||||
el: "#diyView",
|
el: "#diyView",
|
||||||
data: {
|
data: () => ({
|
||||||
lazyLoad: false,
|
lazyLoad: false,
|
||||||
global: {
|
global: {
|
||||||
title: "电子名片",
|
title: "电子名片",
|
||||||
@@ -13,31 +13,44 @@ var vue = new Vue({
|
|||||||
textNavColor: "#333333",
|
textNavColor: "#333333",
|
||||||
textImgPosLink: 'center',
|
textImgPosLink: 'center',
|
||||||
},
|
},
|
||||||
is_kefu:1,
|
is_kefu: 1,
|
||||||
is_mp: 1,
|
is_mp: 1,
|
||||||
is_file: 1,
|
is_file: 1,
|
||||||
is_video: 1,
|
is_video: 1,
|
||||||
is_channel: 1,
|
is_channel: 1,
|
||||||
is_map: 1,
|
is_map: 1,
|
||||||
},
|
// 视频号设置
|
||||||
|
channel_display_style: 'fixed', // 显示样式：carousel, fixed, singleSlide，默认fixed
|
||||||
|
channel_aspect_ratio: '16:9', // 显示比例：16:9 和 3:4，默认16:9
|
||||||
|
channel_show_view_count: true, // 是否显示观看次数，默认显示
|
||||||
|
channel_row_count: 2, // 每行显示数量：1,2,3,4，默认2
|
||||||
|
channel_title_line_clamp: 2, // 标题最多行数：1,2,3，默认2
|
||||||
|
channel_show_play_btn: true, // 是否显示播放按钮，默认显示
|
||||||
|
channelCollapsed: false, // 视频号设置是否折叠，默认展开
|
||||||
|
}),
|
||||||
created: function () {
|
created: function () {
|
||||||
if ($("#guessYouLikeConfig").val()) {
|
if ($("#guessYouLikeConfig").val()) {
|
||||||
$('#diyView').css('visibility', 'visible');
|
$('#diyView').css('visibility', 'visible');
|
||||||
$('.preview-wrap .preview-restore-wrap').css('visibility', 'visible');
|
$('.preview-wrap .preview-restore-wrap').css('visibility', 'visible');
|
||||||
var self = this;
|
var self = this;
|
||||||
setTimeout(() => {
|
|
||||||
var data = JSON.parse($("#guessYouLikeConfig").val());
|
var data = JSON.parse($("#guessYouLikeConfig").val());
|
||||||
console.log(this.data)
|
this.is_kefu = data.is_kefu;
|
||||||
this.is_kefu = data.is_kefu
|
this.is_mp = data.is_mp;
|
||||||
this.is_mp = data.is_mp
|
this.is_file = data.is_file;
|
||||||
this.is_file = data.is_file
|
this.is_video = data.is_video;
|
||||||
this.is_video = data.is_video
|
this.is_map = data.is_map;
|
||||||
this.is_map = data.is_map
|
this.is_channel = data.is_channel;
|
||||||
this.is_channel = data.is_channel
|
// 视频号设置初始化
|
||||||
fullScreenSize(function () {
|
this.channel_display_style = data.channel_display_style || 'fixed';
|
||||||
self.lazyLoad = true;
|
this.channel_aspect_ratio = data.channel_aspect_ratio || '16:9';
|
||||||
});
|
this.channel_show_view_count = !!data.channel_show_view_count;
|
||||||
}, 10);
|
this.channel_row_count = data.channel_row_count || 2;
|
||||||
|
this.channel_title_line_clamp = data.channel_title_line_clamp || 2;
|
||||||
|
this.channel_show_play_btn = !!data.channel_show_play_btn;
|
||||||
|
fullScreenSize(function () {
|
||||||
|
self.lazyLoad = true;
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
$('#diyView').css('visibility', 'visible');
|
$('#diyView').css('visibility', 'visible');
|
||||||
$('.preview-wrap .preview-restore-wrap').css('visibility', 'visible');
|
$('.preview-wrap .preview-restore-wrap').css('visibility', 'visible');
|
||||||
@@ -75,6 +88,47 @@ layui.use(['form'], function () {
|
|||||||
form.render();
|
form.render();
|
||||||
|
|
||||||
fullScreenSize();
|
fullScreenSize();
|
||||||
|
|
||||||
|
// 初始化layui的select元素的默认值和事件绑定
|
||||||
|
const initLayuiSelectBindings = (() => {
|
||||||
|
// 特别注意：layui的select元素，不能使用v-model绑定数据, 只能使用layui的form.on('select')事件监听和form.val()方法设置默认值
|
||||||
|
[`channel_display_style`, `channel_aspect_ratio`, `channel_row_count`, `channel_title_line_clamp`].forEach((key) => {
|
||||||
|
// 根据vue数据, 初始化layui的select元素的默认值
|
||||||
|
if (vue.hasOwnProperty(key)) {
|
||||||
|
// form.val 必须指定form的lay-filter属性值，才能设置默认值
|
||||||
|
form.val('diy-form', {
|
||||||
|
[`${key}`]: vue[key]
|
||||||
|
});
|
||||||
|
console.log(`form.val(${key}, ${vue[key]})`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听select事件, 并更新vue数据, layui + vue. 针对select元素，不能使用v-model绑定数据, 只能使用layui的form.on('select')事件监听
|
||||||
|
form.on('select(' + key + ')', function (data) {
|
||||||
|
if (vue.hasOwnProperty(key)) {
|
||||||
|
vue[key] = data.value;
|
||||||
|
console.log(`vue.${key} = ${data.value}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
initLayuiSelectBindings(); // 启动默认绑定事件一次
|
||||||
|
|
||||||
|
// FIX: 当切换视频号隐藏还是显示时，需要重新渲染layui的select元素
|
||||||
|
// 监听视频号设置是否折叠
|
||||||
|
form.on('switch(channelCollapsed)', function (data) {
|
||||||
|
vue.channelCollapsed = data.elem.checked;
|
||||||
|
form.render('select');
|
||||||
|
initLayuiSelectBindings();
|
||||||
|
});
|
||||||
|
|
||||||
|
// FIX: 当切换视频号隐藏还是显示时，需要重新渲染layui的select元素，重新渲染后，需要重新绑定初始化数据和事件
|
||||||
|
vue.$watch('is_channel', function (newVal, oldVal) {
|
||||||
|
if (newVal !== oldVal) {
|
||||||
|
form.render('select');
|
||||||
|
initLayuiSelectBindings();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
$("body").off("click", ".edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap span").on("click", ".edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap span", function () {
|
$("body").off("click", ".edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap span").on("click", ".edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap span", function () {
|
||||||
$(this).addClass('active bg-color').siblings().removeClass('active bg-color');
|
$(this).addClass('active bg-color').siblings().removeClass('active bg-color');
|
||||||
@@ -85,15 +139,23 @@ layui.use(['form'], function () {
|
|||||||
});
|
});
|
||||||
|
|
||||||
form.on('submit(save)', function (data) {
|
form.on('submit(save)', function (data) {
|
||||||
|
console.log('submit save:', { data, vue });
|
||||||
if (repeat_flag) return;
|
if (repeat_flag) return;
|
||||||
repeat_flag = true;
|
repeat_flag = true;
|
||||||
var formData = {
|
var formData = {
|
||||||
is_kefu:vue.is_kefu,
|
is_kefu: vue.is_kefu,
|
||||||
is_mp:vue.is_mp,
|
is_mp: vue.is_mp,
|
||||||
is_file:vue.is_file,
|
is_file: vue.is_file,
|
||||||
is_video:vue.is_video,
|
is_video: vue.is_video,
|
||||||
is_channel:vue.is_channel,
|
is_channel: vue.is_channel,
|
||||||
is_map:vue.is_map
|
is_map: vue.is_map,
|
||||||
|
// 视频号设置
|
||||||
|
channel_display_style: vue.channel_display_style,
|
||||||
|
channel_aspect_ratio: vue.channel_aspect_ratio,
|
||||||
|
channel_show_view_count: vue.channel_show_view_count,
|
||||||
|
channel_row_count: vue.channel_row_count,
|
||||||
|
channel_title_line_clamp: vue.channel_title_line_clamp,
|
||||||
|
channel_show_play_btn: vue.channel_show_play_btn
|
||||||
};
|
};
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: "post",
|
type: "post",
|
||||||
|
|||||||
@@ -587,6 +587,19 @@ class Member extends BaseApi
|
|||||||
$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,'channel_list'=>$channel_list, '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秒切换一次
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -65,7 +65,7 @@
|
|||||||
},
|
},
|
||||||
iconStyle(){
|
iconStyle(){
|
||||||
if (!this.value) return {};
|
if (!this.value) return {};
|
||||||
console.log(this.value)
|
// console.log(this.value)
|
||||||
var style = {
|
var style = {
|
||||||
fontSize: this.value.fontSize + '%'
|
fontSize: this.value.fontSize + '%'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -149,7 +149,7 @@
|
|||||||
/* 选中弹窗广告组件 */
|
/* 选中弹窗广告组件 */
|
||||||
.pop-window-wrap.selected .edit-attribute{display: block;}
|
.pop-window-wrap.selected .edit-attribute{display: block;}
|
||||||
|
|
||||||
.edit-attribute .attr-wrap {width: 392px;overflow-x: hidden;overflow-y: auto;height: 600px;}
|
.edit-attribute .attr-wrap {width: 392px;overflow-x: hidden;overflow-y: auto;min-height: 200px;max-height: calc(100vh - 150px);}
|
||||||
.edit-attribute .attr-wrap .restore-wrap {width: 360px;}
|
.edit-attribute .attr-wrap .restore-wrap {width: 360px;}
|
||||||
.edit-attribute .attr-wrap .restore-wrap .layui-form-label {color: #666 !important;}
|
.edit-attribute .attr-wrap .restore-wrap .layui-form-label {color: #666 !important;}
|
||||||
.edit-attribute .attr-wrap .restore-wrap .attr-title {padding: 10px 0 15px 10px;border-bottom: 2px solid #f2f4f6;margin-bottom: 10px;color: #303133;display: flex;justify-content: space-between;align-items: center;}
|
.edit-attribute .attr-wrap .restore-wrap .attr-title {padding: 10px 0 15px 10px;border-bottom: 2px solid #f2f4f6;margin-bottom: 10px;color: #303133;display: flex;justify-content: space-between;align-items: center;}
|
||||||
|
|||||||
@@ -476,8 +476,6 @@ var vue = new Vue({
|
|||||||
// 如果当前编辑的组件不存在了，则选中最后一个
|
// 如果当前编辑的组件不存在了，则选中最后一个
|
||||||
if (parseInt(self.currentIndex) >= self.data.length) self.currentIndex--;
|
if (parseInt(self.currentIndex) >= self.data.length) self.currentIndex--;
|
||||||
|
|
||||||
$(".draggable-element[data-index=" + self.currentIndex + "] .edit-attribute .attr-wrap").css("height", ($(window).height() - 135) + "px");
|
|
||||||
|
|
||||||
}, 50);
|
}, 50);
|
||||||
|
|
||||||
},
|
},
|
||||||
@@ -630,7 +628,8 @@ function fullScreenSize(isFull) {
|
|||||||
});
|
});
|
||||||
$('.loading-layer').css('height', (commonHeight - 70) + "px"); // 70px是头部高度
|
$('.loading-layer').css('height', (commonHeight - 70) + "px"); // 70px是头部高度
|
||||||
$(".component-list nav").css("height", (commonHeight + 20 - 55) + "px");// 20px是自定义模板区域上内边距，55px是标准/第三方组件tab切换高度
|
$(".component-list nav").css("height", (commonHeight + 20 - 55) + "px");// 20px是自定义模板区域上内边距，55px是标准/第三方组件tab切换高度
|
||||||
$(".edit-attribute .attr-wrap").css("height", (commonHeight - 1) + "px");// 1px是上边框
|
// 设置属性编辑器的最大高度，与预览容器保持一致
|
||||||
|
$(".edit-attribute .attr-wrap").css("max-height", (commonHeight) + "px");
|
||||||
$(".preview-block").css("min-height", (commonHeight - 104) + "px"); // 公式：高度 - 自定义模板区域上内边距（20px） - 自定义模板区域下外编辑（20px）- 自定义模板头部（64px）
|
$(".preview-block").css("min-height", (commonHeight - 104) + "px"); // 公式：高度 - 自定义模板区域上内边距（20px） - 自定义模板区域下外编辑（20px）- 自定义模板头部（64px）
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
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