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

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

Browse Source
This commit is contained in:
ZF Sun
2026-01-10 08:37:53 +08:00
parent ad9aec21c5
commit b6e77071f1
14 changed files with 1455 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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");
}
}

65
src/app/component/view/wechat_channel/css/design.css Normal file
View File

@@ -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;}

45
src/app/component/view/wechat_channel/design.html Normal file
View File

@@ -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>

91
src/app/component/view/wechat_channel/js/design.js Normal file
View File

@@ -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
});