chore: 初始化视频号基本信息控制

docs/diy/RADEME.md

@@ -25,3 +25,34 @@ create table if not exists lucky_diy_view_util
         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);
+```
+
+
+### 2. 建立组件的控制器
+在 `src\app\component\controller` 目录下创建对应的控制器文件，处理组件的业务逻辑。
+
+例如：创建 `src\app\component\controller\TestController.php` 文件，用于处理测试组件的业务逻辑。
+
+### 3. 建立组件的视图
+在 src\app\component\view 目录下创建对应的视图文件，处理组件的前端展示。
+
+例如：创建 `src\app\component\view\test.php` 文件，用于展示测试组件。
+
+
+### 4. 在前端页面中使用组件
+在前端页面中使用组件，需要在页面中添加对应的组件标签。

src/addon/personnel/config/menu_shop.php

@@ -112,13 +112,46 @@ return [
                     ],
                 ]
             ],
+            [
+                'name' => 'PERSONNEL_CHANNEL_LIST',
+                'title' => '视频号',
+                'url' => 'personnel://shop/enterprise/channellists',
+                'is_show' => 1,
+                'sort' => 4,
+                'child_list' => [
+                    [
+                        'name' => 'PERSONNEL_CHANNEL_ADD',
+                        'title' => '添加视频号',
+                        'url' => 'personnel://shop/enterprise/channeladd',
+                        'sort' => 1,
+                        'is_show' => 0,
+                        'is_control' => 1,
+                    ],
+                    [
+                        'name' => 'PERSONNEL_CHANNEL_EDIT',
+                        'title' => '编辑视频号',
+                        'url' => 'personnel://shop/enterprise/channeledit',
+                        'sort' => 1,
+                        'is_show' => 0,
+                        'is_control' => 1,
+                    ],
+                    [
+                        'name' => 'PERSONNEL_CHANNEL_DELETE',
+                        'title' => '删除视频号',
+                        'url' => 'personnel://shop/enterprise/channeldelete',
+                        'sort' => 2,
+                        'is_show' => 0,
+                        'is_control' => 1,
+                    ],
+                ]
+            ],
 
             [
                 'name' => 'MESSAGE_ROOT',
                 'title' => '留言列表',
                 'url' => 'personnel://shop/personnel/message',
                 'is_show' => 1,
-                'sort' => 4,
+                'sort' => 5,
                 'child_list' => [
                    
                 ],
@@ -128,7 +161,7 @@ return [
                 'title' => '电子名片',
                 'url' => 'personnel://shop/personnel/diy',
                 'is_show' => 1,
-                'sort' => 5,
+                'sort' => 6,
                 'child_list' => [
                    
                 ],
@@ -138,7 +171,7 @@ return [
                 'title' => '设置',
                 'url' => 'personnel://shop/personnel/set',
                 'is_show' => 1,
-                'sort' => 6,
+                'sort' => 7,
                 'child_list' => [
                    
                 ],

src/addon/personnel/data/install.sql

@@ -1 +1,31 @@
 SET NAMES 'utf8';
+
+-- 创建视频号表
+CREATE TABLE IF NOT EXISTS `lucky_personnel_channel`
+(
+    `channel_id`    int auto_increment
+        primary key,
+    `site_id`     int          null,
+    `channel_type` varchar(50) default 'wechat' null comment '视频号类型：wechat-微信视频号，douyin-抖音，kuaishou-快手，redbook-小红书，bilibili-B站',
+    `channel_name` varchar(255) null,
+    `avatar_image_type` varchar(20) default 'upload' null comment '头像类型：upload-上传图片，url-URL',
+    `avatar_url`   varchar(255) null,
+    `video_title` varchar(255) null,
+    `feed_id`     varchar(255) null,
+    `cover_image_type` varchar(20) default 'upload' null comment '封面类型：upload-上传图片，url-URL',
+    `cover_url`   varchar(255) null,
+    `sort`        int default 0 null comment '排序',
+    `is_show`     tinyint(1) default 1 null comment '是否显示：0-隐藏，1-显示',
+    `create_time` int          null
+)
+    engine = MyISAM
+    collate = utf8_unicode_ci
+    comment = '电子名片视频号资源表';
+
+-- 插入视频号菜单权限（使用 IGNORE 避免重复插入报错）
+INSERT IGNORE INTO `lucky_menu` (`app_module`, `addon`, `title`, `name`, `parent`, `level`, `url`, `is_show`, `sort`, `desc`, `is_icon`, `picture`, `picture_select`, `is_control`)
+VALUES
+('shop', 'personnel', '视频号', 'PERSONNEL_CHANNEL_LIST', 'PERSONNEL_ROOT', 4, 'personnel://shop/enterprise/channellists', 1, 4, '', 0, '', '', 1),
+('shop', 'personnel', '添加视频号', 'PERSONNEL_CHANNEL_ADD', 'PERSONNEL_CHANNEL_LIST', 5, 'personnel://shop/enterprise/channeladd', 0, 1, '', 0, '', '', 1),
+('shop', 'personnel', '编辑视频号', 'PERSONNEL_CHANNEL_EDIT', 'PERSONNEL_CHANNEL_LIST', 5, 'personnel://shop/enterprise/channeledit', 0, 1, '', 0, '', '', 1),
+('shop', 'personnel', '删除视频号', 'PERSONNEL_CHANNEL_DELETE', 'PERSONNEL_CHANNEL_LIST', 5, 'personnel://shop/enterprise/channeldelete', 0, 2, '', 0, '', '', 1);

src/addon/personnel/data/uninstall.sql

@@ -1 +1,7 @@
 SET NAMES 'utf8';
+
+-- 删除视频号菜单权限
+DELETE FROM `lucky_menu` WHERE `name` IN ('PERSONNEL_CHANNEL_LIST', 'PERSONNEL_CHANNEL_ADD', 'PERSONNEL_CHANNEL_EDIT', 'PERSONNEL_CHANNEL_DELETE');
+
+-- 删除视频号表
+DROP TABLE IF EXISTS `lucky_personnel_channel`;

src/addon/personnel/model/Enterprise.php

@@ -264,4 +264,107 @@ class Enterprise extends BaseModel
         return $this->success($res);
     }
 
+    //视频号
+    /**
+     * 获取视频号分页列表
+     * @param array $condition
+     * @param number $page
+     * @param string $page_size
+     * @param string $order
+     * @param string $field
+     */
+    public function getChannelPageList($condition = [], $page = 1, $page_size = PAGE_LIST_ROWS, $order = 'create_time desc', $field = '*')
+    {
+        $check_condition = array_column($condition, 2, 0);
+        $site_id = $check_condition['site_id'] ?? '';
+        if ($site_id === '') {
+            return $this->error('', 'REQUEST_SITE_ID');
+        }
+
+        $list = model('personnel_channel')->pageList($condition, $field, $order, $page, $page_size);
+        return $this->success($list);
+    }
+
+    /**
+     * 获取视频号列表
+     * @param array $condition
+     * @param string $field
+     * @param string $order
+     * @param string $limit
+     */
+    public function getChannelList($condition = [], $field = '*', $order = '', $limit = null)
+    {
+        $list = model('personnel_channel')->getList($condition, $field, $order, '', '', '', $limit);
+        return $this->success($list);
+    }
+
+    /**
+     * 添加视频号
+     * @param array $data
+     */
+    public function addChannel($data)
+    {
+        $site_id = $data['site_id'] ?? '';
+        if ($site_id === '') {
+            return $this->error('', 'REQUEST_SITE_ID');
+        }
+
+        $data['create_time'] = time();
+        // 默认视频号类型为微信
+        if (!isset($data['channel_type']) || empty($data['channel_type'])) {
+            $data['channel_type'] = 'wechat';
+        }
+        $channel_id = model('personnel_channel')->add($data);
+        return $this->success($channel_id);
+    }
+
+    /**
+     * 获取视频号信息
+     * @param array $condition
+     * @param string $field
+     */
+    public function getChannelInfo($condition = [], $field = '*')
+    {
+        $list = model('personnel_channel')->getInfo($condition, $field);
+        return $this->success($list);
+    }
+
+    /**
+     * 修改视频号
+     * @param array $data
+     */
+    public function editChannel($data)
+    {
+        $site_id = $data['site_id'] ?? '';
+        if ($site_id === '') {
+            return $this->error('', 'REQUEST_SITE_ID');
+        }
+
+        model('personnel_channel')->startTrans();
+        try {
+            model('personnel_channel')->update($data, [ [ 'site_id', '=', $data[ 'site_id' ] ], [ 'channel_id', '=', $data[ 'channel_id' ] ] ]);
+            model('personnel_channel')->commit();
+            return $this->success();
+        } catch (\Exception $e) {
+            model('personnel_channel')->rollback();
+            return $this->error('', $e->getMessage());
+        }
+    }
+
+    /**
+     * 删除视频号
+     * @param array $condition
+     */
+    public function deleteChannel($condition)
+    {
+        $check_condition = array_column($condition, 2, 0);
+        $site_id = $check_condition['site_id'] ?? '';
+        if ($site_id === '') {
+            return $this->error('', 'REQUEST_SITE_ID');
+        }
+
+        $res = model('personnel_channel')->delete($condition);
+        return $this->success($res);
+    }
+
 }

src/addon/personnel/shop/controller/Enterprise.php

@@ -168,7 +168,108 @@ class Enterprise extends BaseShop
         if (request()->isJson()) {
             $video_id = input('video_id', 0);
             $model = new EnterpriseModel();
-            return $model->deleteVideo([ [ 'video_id', '=', $video_id],['site_id','=',$this->site_id] ]);
+            return $model->deleteVideo([ [ 'video_id', '=', $video_id ], [ 'site_id', '=', $this->site_id ] ]);
+        }
+    }
+
+    /***************************************视频号部分****************************************/
+    /**
+     * 视频号列表
+     */
+    public function channellists(){
+        if (request()->isJson()) {
+            $page = input('page', 1);
+            $page_size = input('page_size', PAGE_LIST_ROWS);
+            $search_text = input('search_text', '');
+            $channel_type = input('channel_type', '');
+            $is_show = input('is_show', '');
+            $order = input('order', '');
+            $condition = [ [ 'site_id', '=', $this->site_id ] ];
+            if ($search_text) {
+                $condition[] = [ 'channel_name', 'like', '%' . $search_text . '%' ];
+            }
+            if ($channel_type) {
+                $condition[] = [ 'channel_type', '=', $channel_type ];
+            }
+            if ($is_show !== '') {
+                $condition[] = [ 'is_show', '=', $is_show ];
+            }
+            $order_by = $order ? $order : 'create_time desc';
+            $model = new EnterpriseModel();
+            $list = $model->getChannelPageList($condition, $page, $page_size, $order_by);
+            return $list;
+        } else {
+            return $this->fetch('enterprise/channel/lists');
+        }
+    }
+
+    /**
+     * 添加视频号
+     */
+    public function channeladd()
+    {
+        $model = new EnterpriseModel();
+        if (request()->isJson()) {
+            $data = [
+                'site_id' => $this->site_id,
+                'channel_type' => input('channel_type', 'wechat'),
+                'channel_name' => input('channel_name', ''),
+                'avatar_image_type' => input('avatar_image_type', 'upload'),
+                'avatar_url' => input('avatar_url', ''),
+                'video_title' => input('video_title', ''),
+                'feed_id' => input('feed_id', ''),
+                'cover_image_type' => input('cover_image_type', 'upload'),
+                'cover_url' => input('cover_url', ''),
+                'sort' => input('sort', 0),
+                'is_show' => input('is_show', 1),
+                'create_time' => time()
+            ];
+            return $model->addChannel($data);
+        } else {
+            return $this->fetch('enterprise/channel/add');
+        }
+    }
+
+    /**
+     * 编辑视频号
+     */
+    public function channeledit()
+    {
+        $channel_id = input('channel_id', 0);
+        $model = new EnterpriseModel();
+        if (request()->isJson()) {
+            $data = [
+                'channel_id' => $channel_id,
+                'site_id' => $this->site_id,
+                'channel_type' => input('channel_type', 'wechat'),
+                'channel_name' => input('channel_name', ''),
+                'avatar_image_type' => input('avatar_image_type', 'upload'),
+                'avatar_url' => input('avatar_url', ''),
+                'video_title' => input('video_title', ''),
+                'feed_id' => input('feed_id', ''),
+                'cover_image_type' => input('cover_image_type', 'upload'),
+                'cover_url' => input('cover_url', ''),
+                'sort' => input('sort', 0),
+                'is_show' => input('is_show', 1),
+            ];
+            return $model->editChannel($data);
+        } else {
+            $this->assign('channel_id', $channel_id);
+            $article_info = $model->getChannelInfo([ [ 'channel_id', '=', $channel_id ] ]);
+            $this->assign('info', $article_info[ 'data' ]);
+            return $this->fetch('enterprise/channel/edit');
+        }
+    }
+
+    /**
+     * 删除视频号
+     */
+    public function channeldelete()
+    {
+        if (request()->isJson()) {
+            $channel_id = input('channel_id', 0);
+            $model = new EnterpriseModel();
+            return $model->deleteChannel([ [ 'channel_id', '=', $channel_id ], [ 'site_id', '=', $this->site_id ] ]);
         }
     }
 }

src/addon/personnel/shop/view/enterprise/channel/add.html

@@ -0,0 +1,364 @@
+<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%);}
+</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>视频号名称：</label>
+		<div class="layui-input-inline">
+			<input type="text" name="channel_name" value="{$info.channel_name}" lay-verify="required" maxlength="40" autocomplete="off" placeholder="请输入视频号名称" class="layui-input len-long">
+		</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="{$info.avatar_url}" />
+				<input type="hidden" name="avatar_url" value="{$info.avatar_url}" />
+				<i class="del">x</i>
+			</div>
+		</div>
+		<div class="word-aux">推荐使用 200x200 像素的图片</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="50" autocomplete="off" placeholder="请输入视频标题" 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}" lay-verify="required" maxlength="50" autocomplete="off" placeholder="请输入视频号内容ID" class="layui-input len-long">
+		</div>
+	</div>
+
+    <div class="layui-form-item">
+		<label class="layui-form-label">封面类型：</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">封面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">封面图：</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="{$info.cover_url}" />
+				<input type="hidden" name="cover_url" value="{$info.cover_url}" />
+				<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-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="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>
+</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\'}';
+
+    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='头像'>");
+				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='封面'>");
+			}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;
+			var avatarUrlVal = $("input[name='avatar_url']").val();
+			if(type == 'url'){
+				$('#avatarTypeUrl').show();
+				$('#avatarTypeUpload').hide();
+				// 如果已有URL，显示预览
+				if(avatarUrlVal){
+					$("#avatarImg").html("<img src='" + avatarUrlVal + "' alt='头像' style='width:100%;height:100%;object-fit:contain;'>");
+				}
+			}else{
+				$('#avatarTypeUrl').hide();
+				$('#avatarTypeUpload').show();
+				// 如果已上传图片，显示预览
+				if(avatarUrlVal){
+					$("#avatarImg").html("<img src='" + ns.img(avatarUrlVal) + "' alt='头像'>");
+				}
+			}
+		});
+
+		// 头像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();
+			$('#avatarTypeUpload').hide();
+			// 如果已有URL，显示预览
+			if(avatarImg){
+				$("#avatarImg").html("<img src='" + avatarImg + "' alt='头像' style='width:100%;height:100%;object-fit:contain;'>");
+			}
+		}else{
+			$('#avatarTypeUrl').hide();
+			$('#avatarTypeUpload').show();
+			// 如果已上传图片，显示预览
+			if(avatarImg){
+				$("#avatarImg").html("<img src='" + ns.img(avatarImg) + "' alt='头像'>");
+			}
+		}
+
+		// 封面类型切换
+		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();
+				$('#coverTypeUpload').hide();
+				// 如果已有URL，显示预览
+				if(coverUrlVal){
+					$("#coverImg").html("<img src='" + coverUrlVal + "' alt='封面' style='width:100%;height:100%;object-fit:contain;'>");
+				}
+			}else{
+				$('#coverTypeUrl').hide();
+				$('#coverTypeUpload').show();
+				// 如果已上传图片，显示预览
+				if(coverUrlVal){
+					$("#coverImg").html("<img src='" + ns.img(coverUrlVal) + "' alt='封面'>");
+				}
+			}
+		});
+
+		// 封面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();
+			$('#coverTypeUpload').hide();
+			// 如果已有URL，显示预览
+			if(coverImg){
+				$("#coverImg").html("<img src='" + coverImg + "' alt='封面' style='width:100%;height:100%;object-fit:contain;'>");
+			}
+		}else{
+			$('#coverTypeUrl').hide();
+			$('#coverTypeUpload').show();
+			// 如果已上传图片，显示预览
+			if(coverImg){
+				$("#coverImg").html("<img src='" + ns.img(coverImg) + "' alt='封面'>");
+			}
+		}
+
+		// 头像上传
+		$("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;
+            formSubmit(field)
+        });
+    });
+
+	/**
+     *  提交
+     */
+    function formSubmit(data){
+		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) {
+						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.msg(res.message);
+					}
+				}
+			});
+		}, 1000);
+    }
+
+    function back() {
+        location.hash = ns.hash("personnel://shop/enterprise/channellists");
+    }
+</script>

src/addon/personnel/shop/view/enterprise/channel/edit.html

@@ -0,0 +1,360 @@
+<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%);}
+</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>视频号名称：</label>
+		<div class="layui-input-inline">
+			<input type="text" name="channel_name" value="{$info.channel_name}" lay-verify="required" maxlength="40" autocomplete="off" placeholder="请输入视频号名称" class="layui-input len-long">
+		</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="{$info.avatar_url}" />
+				<input type="hidden" name="avatar_url" value="{$info.avatar_url}" />
+				<i class="del">x</i>
+			</div>
+		</div>
+	<div class="word-aux">推荐使用 200x200 像素的图片</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="50" autocomplete="off" placeholder="请输入视频标题" 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}" lay-verify="required" maxlength="50" autocomplete="off" placeholder="请输入视频号内容ID" class="layui-input len-long">
+		</div>
+	</div>
+
+    <div class="layui-form-item">
+		<label class="layui-form-label">封面类型：</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">封面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">封面图：</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="{$info.cover_url}" />
+				<input type="hidden" name="cover_url" value="{$info.cover_url}" />
+				<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-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="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>
+</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\'}';
+
+    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='头像'>");
+				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='封面'>");
+			}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;
+			var avatarUrlVal = $("input[name='avatar_url']").val();
+			if(type == 'url'){
+				$('#avatarTypeUrl').show();
+				$('#avatarTypeUpload').hide();
+				// 如果已有URL，显示预览
+				if(avatarUrlVal){
+					$("#avatarImg").html("<img src='" + avatarUrlVal + "' alt='头像' style='width:100%;height:100%;object-fit:contain;'>");
+				}
+			}else{
+				$('#avatarTypeUrl').hide();
+				$('#avatarTypeUpload').show();
+				// 如果已上传图片，显示预览
+				if(avatarUrlVal){
+					$("#avatarImg").html("<img src='" + ns.img(avatarUrlVal) + "' alt='头像'>");
+				}
+			}
+		});
+
+		// 头像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();
+			$('#avatarTypeUpload').hide();
+			// 如果已有URL，显示预览
+			if(avatarImg){
+				$("#avatarImg").html("<img src='" + avatarImg + "' alt='头像' style='width:100%;height:100%;object-fit:contain;'>");
+			}
+		}else{
+			$('#avatarTypeUrl').hide();
+			$('#avatarTypeUpload').show();
+			// 如果已上传图片，显示预览
+			if(avatarImg){
+				$("#avatarImg").html("<img src='" + ns.img(avatarImg) + "' alt='头像'>");
+			}
+		}
+
+		// 封面类型切换
+		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();
+				$('#coverTypeUpload').hide();
+				// 如果已有URL，显示预览
+				if(coverUrlVal){
+					$("#coverImg").html("<img src='" + coverUrlVal + "' alt='封面' style='width:100%;height:100%;object-fit:contain;'>");
+				}
+			}else{
+				$('#coverTypeUrl').hide();
+				$('#coverTypeUpload').show();
+				// 如果已上传图片，显示预览
+				if(coverUrlVal){
+					$("#coverImg").html("<img src='" + ns.img(coverUrlVal) + "' alt='封面'>");
+				}
+			}
+		});
+
+		// 封面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();
+			$('#coverTypeUpload').hide();
+			// 如果已有URL，显示预览
+			if(coverImg){
+				$("#coverImg").html("<img src='" + coverImg + "' alt='封面' style='width:100%;height:100%;object-fit:contain;'>");
+			}
+		}else{
+			$('#coverTypeUrl').hide();
+			$('#coverTypeUpload').show();
+			// 如果已上传图片，显示预览
+			if(coverImg){
+				$("#coverImg").html("<img src='" + ns.img(coverImg) + "' alt='封面'>");
+			}
+		}
+
+		// 头像上传
+		$("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;
+            formSubmit(field)
+        });
+    });
+
+	/**
+     *  提交
+     */
+    function formSubmit(data){
+		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) {
+						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>

src/addon/personnel/shop/view/enterprise/channel/lists.html

@@ -0,0 +1,203 @@
+<!-- 搜索框 -->
+<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">&#xe615;</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'>
+		<div class='title-pic headimg'>
+			<img layer-src src="{{ns.img(d.cover_url)}}" onerror="this.src = ns.url('public/static/img/default_img/square.png')" alt="头像">
+		</div>
+		<div class='title-content'>
+			<p class="layui-elip" style="font-size: 12px;color: #999;margin-top: 5px;">{{d.feed_id}}</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="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: '35%',
+					unresize: 'false',
+					templet: '#info'
+				},
+				{
+					field: 'channel_name',
+					title: '视频号名称',
+					width: '15%',
+					unresize: 'false',
+				},
+				{
+					field: 'channel_type',
+					title: '视频号类型',
+					width: '12%',
+					unresize: 'false',
+					templet: '#channelType'
+				},
+				{
+					field: 'is_show',
+					title: '是否显示',
+					width: '10%',
+					unresize: 'false',
+					templet: '#isShow'
+				},
+				{
+					field: 'sort',
+					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>

src/app/component/controller/WechatChannel.php

@@ -0,0 +1,17 @@
+<?php
+namespace app\component\controller;
+
+/**
+
+ * 微信视频号组件
+ */
+class WechatChannel extends BaseDiyView
+{
+    /**
+     * 后台编辑界面 
+     */
+    public function design()
+    {
+        return $this->fetch("wechat_channel/design.html");
+    }
+} 

src/app/component/view/wechat_channel/css/design.css

@@ -0,0 +1,65 @@
+.wechat_channel-box .preview-draggable {padding: 0;}
+.wechat_channel-box .video-wrap{position: relative;}
+.wechat_channel-box .video-wrap .channel-preview img{width: 100%;display: block;}
+.wechat_channel-box .video-wrap .channel-info {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
+	padding: 20px 10px 10px;
+	color: #fff;
+	display: flex;
+	align-items: center;
+}
+.wechat_channel-box .video-wrap .channel-avatar {
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	overflow: hidden;
+	margin-right: 10px;
+	flex-shrink: 0;
+}
+.wechat_channel-box .video-wrap .channel-avatar img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+.wechat_channel-box .video-wrap .channel-text {
+	flex: 1;
+	overflow: hidden;
+}
+.wechat_channel-box .video-wrap .channel-name {
+	font-size: 14px;
+	font-weight: bold;
+	margin-bottom: 4px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.wechat_channel-box .video-wrap .video-title {
+	font-size: 12px;
+	opacity: 0.9;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.wechat_channel-box .video-wrap .video-placeholder {
+	width: 100%;
+	height: 200px;
+	background: #f5f5f5;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 1px dashed #ddd;
+}
+.wechat_channel-box .video-wrap .placeholder-text {
+	color: #999;
+	font-size: 14px;
+}
+.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;}

src/app/component/view/wechat_channel/design.html

@@ -0,0 +1,45 @@
+<nc-component :data="data[index]" class="wechat_channel-box">
+
+	<!-- 预览 -->
+	<template slot="preview" >
+		<div class="video-wrap">
+			<div class="channel-preview" v-if="nc.coverUrl">
+				<img :src="changeImgUrl(nc.coverUrl)" style="width:100%;display:block;" />
+				<div class="channel-info" v-if="nc.channelName || nc.videoTitle">
+					<div class="channel-avatar" v-if="nc.avatarUrl">
+						<img :src="changeImgUrl(nc.avatarUrl)" />
+					</div>
+					<div class="channel-text">
+						<div class="channel-name" v-if="nc.channelName">{{ nc.channelName }}</div>
+						<div class="video-title" v-if="nc.videoTitle">{{ nc.videoTitle }}</div>
+					</div>
+				</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>
+	</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></js>
+		<css src="{$resource_path}/css/design.css"></css>
+		<js src="{$resource_path}/js/design.js"></js>
+	</template>
+
+</nc-component>

src/app/component/view/wechat_channel/js/design.js

@@ -0,0 +1,91 @@
+var tpl = '<div class="wechat_channel-edit">';
+
+		tpl += '<div class="template-edit-title">';
+			tpl += '<h3>基础设置</h3>';
+
+			// 根据微信视频号组件的要求，填写视频号的标题和描述
+
+			// 填写视频号名称
+			tpl += '<div class="layui-form-item">';
+				tpl += '<label class="layui-form-label sm">视频号</label>';
+				tpl += '<div class="layui-input-block">';
+					tpl += '<input type="text" v-model="data.channelName" placeholder="请输入视频号名称" class="layui-input">';
+				tpl += '</div>';
+			tpl += '</div>';
+
+			// 填写视频号头像URL
+			tpl += '<div class="layui-form-item">';
+				tpl += '<label class="layui-form-label sm">头像URL</label>';
+				tpl += '<div class="layui-input-block">';
+					tpl += '<input type="text" v-model="data.avatarUrl" placeholder="请输入视频号头像URL" class="layui-input">';
+				tpl += '</div>';
+			tpl += '</div>';
+
+			// 填写视频标题
+			tpl += '<div class="layui-form-item">';
+				tpl += '<label class="layui-form-label sm">视频标题</label>';
+				tpl += '<div class="layui-input-block">';
+					tpl += '<input type="text" v-model="data.videoTitle" placeholder="请输入视频标题" class="layui-input">';
+				tpl += '</div>';
+			tpl += '</div>';
+
+			// 填写视频号内容ID
+			tpl += '<div class="layui-form-item">';
+				tpl += '<label class="layui-form-label sm">内容ID</label>';
+				tpl += '<div class="layui-input-block">';
+					tpl += '<input type="text" v-model="data.feedId" placeholder="请输入视频号内容ID" class="layui-input">';
+				tpl += '</div>';
+			tpl += '</div>';
+
+
+			// 视频封面支持选择类型，直接上传或选择
+			tpl += '<div class="layui-form-item">';
+				tpl += '<label class="layui-form-label sm">封面类型</label>';
+				tpl += '<div class="layui-input-block">';
+					tpl += '<select v-model="data.coverImageType" class="layui-select">';
+						tpl += '<option value="upload">上传图片</option>';
+						tpl += '<option value="url">URL</option>';
+					tpl += '</select>';
+				tpl += '</div>';
+			tpl += '</div>';
+
+			// 填写视频封面URL
+			tpl += '<div class="layui-form-item" v-if="data.coverImageType == \'url\'">';
+				tpl += '<label class="layui-form-label sm">封面URL</label>';
+				tpl += '<div class="layui-input-block">';
+					tpl += '<input type="text" v-model="data.coverUrl" placeholder="请输入视频封面URL" class="layui-input">';
+				tpl += '</div>';
+			tpl += '</div>';			
+
+			// 上传视频封面
+			tpl += '<div class="layui-form-item" v-if="data.coverImageType == \'upload\'">';
+				tpl += '<label class="layui-form-label sm">封面图</label>';
+				tpl += '<img-upload :data="{data : data, field : \'coverUrl\'}"></img-upload>';
+			tpl += '</div>';
+
+		tpl += '</div>';
+
+	tpl += '</div>';
+
+Vue.component("wechat_channel-edit",{
+	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; // 等待忽略数组赋值后加载
+	},
+	methods: {
+		verify : function () {
+			var res = { code : true, message : "" };
+			// 微信视频号组件暂不需要强制验证
+			return res;
+		}
+	},
+	template: tpl
+});