Services/shop-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Merge: 合并电子名片及新组件微信视频号

Browse Source
This commit is contained in:
ZF Sun
2026-01-15 14:31:09 +08:00
parent d435aaf4a8
commit ef32e31e59
14 changed files with 1772 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/api/controller/Member.php
View File

@@ -576,6 +576,8 @@ class Member extends BaseApi
$Personnelmodel = new PersonnelModel();
$set = $Personnelmodel->getPersonnelSet($this->site_id, $this->app_module)[ 'data' ][ 'value' ];
//视频号数据
$channel_list = model('personnel_channel')->getList(['site_id'=>$this->site_id, 'is_show'=>1],'*','sort asc createtime desc');
//视频文件
$video_list = model('personnel_video')->getList(['site_id'=>$this->site_id],'*','createtime desc');
//企业文件
@@ -583,7 +585,20 @@ class Member extends BaseApi
//电子名片diy
$config = $Personnelmodel->getPersonnelSet($this->site_id, $this->app_module)[ 'data' ][ 'value' ];
$config['value'] = json_decode($config['value'],true);
return $this->response(['code'=>'0','data'=>$list,'message'=>'操作成功','shop'=>$shop_info_result,'set'=>$set,'video_list'=>$video_list,'file_list'=>$file_list,'diy'=>$config['value']]);
return $this->response(['code'=>'0','data'=>$list,'message'=>'操作成功','shop'=>$shop_info_result,'set'=>$set,'channel_list'=>$channel_list, 'video_list'=>$video_list,'file_list'=>$file_list,'diy'=>$config['value']]);
}
/**
* 视频号观看次数+1
*/
public function incrementChannelViewCount()
{
$id = $this->params[ 'channel_id' ] ?? 0;
if (empty($id)) {
return $this->response($this->error('', '未传视频号id！'));
}
$cur_view_count = model('personnel_channel')->getValue(['channel_id'=>$id], 'view_count', 0);
$res = model('personnel_channel')->update(['view_count'=>$cur_view_count+1],['channel_id'=>$id]);
return $this->response(['code'=>'0','message'=>'操作成功', 'data'=>$res, 'channel_id'=>$id, 'pre_view_count'=>$cur_view_count]);
}
//留言
public function message()

17
src/app/component/controller/WechatChannel.php Normal file
View 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
View 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
View 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
View 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秒切换一次
}
}
},
});

7
src/app/shop/view/diy/heat_map.html
View File

@@ -105,6 +105,10 @@
text-align: right;
}
.heat-map-wrap .manage-wrap .list-wrap .item div {
}
.heat-map-wrap .manage-wrap .list-wrap .item div span {
cursor: pointer;
}
@@ -115,6 +119,8 @@
}
</style>
<div class="layui-form heat-map-wrap">
<div class="content-box" id="content_box"><!-- 热区列表 --></div>
<div class="manage-wrap">
@@ -124,6 +130,7 @@
</div>
</div>
<script type="text/html" id="dragBoxHtml">
{{# for(let i=0;i<d.length;i++){ }}
<div id="box_{{ i }}" class="area-box" style="left:{{ d[i].left }}{{ d[i].unit }};top:{{ d[i].top }}{{ d[i].unit }};width:{{ d[i].width }}{{ d[i].unit }};height:{{ d[i].height }}{{ d[i].unit }}" onmousedown="mouseDown(event,{{ i }})">

6
src/app/shop/view/diy/icon_img_view.html
View File

@@ -1,3 +1,5 @@
<style>
.icon-img-box{
width: 48px;
@@ -12,6 +14,8 @@
}
</style>
<div id="{$id}">
<div class="icon-img-box" v-if="myData.iconType == 'img'">
<img :src="changeImgUrl(myData.imageUrl) || changeImgUrl('public/static/img/default_img/square.png')" alt="">
@@ -21,6 +25,8 @@
</div>
</div>
<script src="STATIC_EXT/colorPicker/js/colorpicker.js"></script>
<script src="STATIC_JS/vue.js"></script>
{include file="diy/iconfont_component"/}

7
src/app/shop/view/diy/icon_style.html
View File

@@ -1,3 +1,6 @@
<style>
.layui-form {
padding: 15px;
@@ -92,6 +95,8 @@
}
</style>
<div id="app" class="layui-form icon-style-set">
<div class="layui-form-item">
<label class="layui-form-label">图标：</label>
@@ -163,6 +168,8 @@
</div>
</div>
<script src="STATIC_EXT/colorPicker/js/colorpicker.js"></script>
<script src="STATIC_JS/vue.js"></script>
{include file="diy/iconfont_component"/}

2
src/app/shop/view/diy/iconfont_component.html
View File

@@ -65,7 +65,7 @@
},
iconStyle(){
if (!this.value) return {};
// console.log(this.value)
var style = {
fontSize: this.value.fontSize + '%'
}