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

chore(电子名片): 精简add.html 及 edit.html 为一个文件

Browse Source
This commit is contained in:
ZF Sun
2026-01-10 11:02:37 +08:00
parent 1e4d8f20cd
commit 6b1db82a76
3 changed files with 60 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/addon/personnel/shop/controller/Enterprise.php
View File

@@ -226,7 +226,7 @@ class Enterprise extends BaseShop
]; ];
return $model->addChannel($data); return $model->addChannel($data);
} else { } else {
return $this->fetch('enterprise/channel/add'); return $this->fetch('enterprise/channel/edit');
} }
} }
@@ -257,6 +257,7 @@ class Enterprise extends BaseShop
$this->assign('channel_id', $channel_id); $this->assign('channel_id', $channel_id);
$article_info = $model->getChannelInfo([ [ 'channel_id', '=', $channel_id ] ]); $article_info = $model->getChannelInfo([ [ 'channel_id', '=', $channel_id ] ]);
$this->assign('info', $article_info[ 'data' ]); $this->assign('info', $article_info[ 'data' ]);
// 返回统一的 add.html 模板，前端会根据 channel_id 判断是否为编辑模式
return $this->fetch('enterprise/channel/edit'); return $this->fetch('enterprise/channel/edit');
} }
} }

373
src/addon/personnel/shop/view/enterprise/channel/add.html
View File

@@ -1,373 +0,0 @@
<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="" />
<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"><span class="required">*</span>内容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"><span class="required">*</span>封面类型：</label>
<div class="layui-input-block">
<input type="radio" name="cover_image_type" lay-filter="coverImageType" value="url" title="URL链接" {:$info['cover_image_type'] ? ($info['cover_image_type'] == 'url' ? 'checked' : '') : 'checked'}>
<input type="radio" name="cover_image_type" lay-filter="coverImageType" value="upload" title="上传图片" {:$info['cover_image_type'] ? ($info['cover_image_type'] == 'upload' ? 'checked' : '') : ''}>
</div>
</div>
<div class="layui-form-item" id="coverTypeUrl">
<label class="layui-form-label"><span class="required">*</span>封面URL：</label>
<div class="layui-input-inline">
<input type="text" name="cover_url" value="{$info.cover_url}" maxlength="255" autocomplete="off" placeholder="请输入封面URL" class="layui-input len-long">
</div>
</div>
<div class="layui-form-item" id="coverTypeUpload">
<label class="layui-form-label"><span class="required">*</span>封面图：</label>
<div class="layui-input-block img-upload">
<div class="upload-img-block simple-uploading">
<div class="upload-img-box" id="coverImg">
<div class="upload-default">
<i class="iconfont iconshangchuan"></i>
<p>点击上传</p>
</div>
</div>
<input type="hidden" name="cover_url_upload" value="" />
<i class="del">x</i>
</div>
</div>
<div class="word-aux">推荐使用 750x420 像素的图片</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序：</label>
<div class="layui-input-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\'}';
var uploadHtml = "<div class='upload-default'><i class='iconfont iconshangchuan'></i><p>点击上传</p></div>"
layui.use(['form', 'upload', 'element'], function() {
form = layui.form;
repeat_flag = false;
form.render();
// 初始化头像
if(avatarImg){
if(avatarImageType == 'upload'){
$("#avatarImg").html("<img src='" + ns.img(avatarImg) + "' alt='头像'>");
$("input[name='avatar_url_upload']").val(avatarImg);
imageCollection.push(avatarImg);
}else{
$("#avatarImg").html("<img src='" + avatarImg + "' alt='头像' style='width:100%;height:100%;object-fit:contain;'>");
}
}
// 初始化封面
if(coverImg){
if(coverImageType == 'upload'){
$("#coverImg").html("<img src='" + ns.img(coverImg) + "' alt='封面'>");
$("input[name='cover_url_upload']").val(coverImg);
}else{
$("#coverImg").html("<img src='" + coverImg + "' alt='封面' style='width:100%;height:100%;object-fit:contain;'>");
}
}
// 头像类型切换
form.on('radio(avatarType)', function(data) {
var elem = data.elem;
var type = elem.value;
if(type == 'url'){
$('#avatarTypeUrl').show();
// 如果已有URL，显示预览
var avatarUrlVal = $("input[name='avatar_url']").val();
if(avatarUrlVal){
$("#avatarImg").html("<img src='" + avatarUrlVal + "' alt='头像' style='width:100%;height:100%;object-fit:contain;'>");
}
}else{
$('#avatarTypeUrl').hide();
$('#avatarTypeUpload').show();
// 如果已上传图片，显示预览
var avatarUrlVal = $("input[name='avatar_url_upload']").val();
if(avatarUrlVal){
$("#avatarImg").html("<img src='" + ns.img(avatarUrlVal) + "' alt='头像'>");
} else {
$("#avatarImg").html(uploadHtml);
}
}
});
// 头像URL输入预览
$("input[name='avatar_url']").on('input', function() {
var avatarType = $("input[name='avatar_image_type']:checked").val();
var url = $(this).val();
if(avatarType == 'url' && url){
$("#avatarImg").html("<img src='" + url + "' alt='头像' style='width:100%;height:100%;object-fit:contain;'>");
}
});
// 初始显示状态 - 头像
if(avatarImageType == 'url'){
$('#avatarTypeUrl').show();
// 如果已有URL，显示预览
if(avatarImg){
$("#avatarImg").html("<img src='" + avatarImg + "' alt='头像' style='width:100%;height:100%;object-fit:contain;'>");
}
}else{
$('#avatarTypeUrl').hide();
$('#avatarTypeUpload').show();
// 如果已上传图片，显示预览
if(avatarImg){
$("#avatarImg").html("<img src='" + ns.img(avatarImg) + "' alt='头像'>");
} else {
$("#avatarImg").html(uploadHtml);
}
}
// 封面类型切换
form.on('radio(coverImageType)', function(data) {
var elem = data.elem;
var type = elem.value;
var coverUrlVal = $("input[name='cover_url']").val();
if(type == 'url'){
$('#coverTypeUrl').show();
// 如果已有URL，显示预览
if(coverUrlVal){
$("#coverImg").html("<img src='" + coverUrlVal + "' alt='封面' style='width:100%;height:100%;object-fit:contain;'>");
}
}else{
$('#coverTypeUrl').hide();
$('#coverTypeUpload').show();
// 如果已上传图片，显示预览
coverUrlVal = $("input[name='cover_url_upload']").val();
if(coverUrlVal){
$("#coverImg").html("<img src='" + ns.img(coverUrlVal) + "' alt='封面'>");
} else {
$("#coverImg").html(uploadHtml);
}
}
});
// 封面URL输入预览
$("input[name='cover_url']").on('input', function() {
var coverType = $("input[name='cover_image_type']:checked").val();
var url = $(this).val();
if(coverType == 'url' && url){
$("#coverImg").html("<img src='" + url + "' alt='封面' style='width:100%;height:100%;object-fit:contain;'>");
}
});
// 初始显示状态 - 封面
if(coverImageType == 'url'){
$('#coverTypeUrl').show();
// 如果已有URL，显示预览
if(coverImg){
$("#coverImg").html("<img src='" + coverImg + "' alt='封面' style='width:100%;height:100%;object-fit:contain;'>");
}
}else{
$('#coverTypeUrl').hide();
$('#coverTypeUpload').show();
// 如果已上传图片，显示预览
if(coverImg){
$("#coverImg").html("<img src='" + ns.img(coverImg) + "' alt='封面'>");
} else {
$("#coverImg").html(uploadHtml);
}
}
// 头像上传
$("body").off("click", "#avatarImg").on("click", "#avatarImg", function () {
openAlbum(function (data) {
imageCollection = [];
imageCollection.push(data[0].pic_path);
imageCollection.splice(1, imageCollection.length);
var val = '<img src="' + ns.img(imageCollection[0]) + '" alt="头像">';
$("#avatarImg").html(val);
$("input[name='avatar_url_upload']").val(imageCollection[0]);
}, 1);
});
// 删除头像
$("#avatarImg").next(".del").click(function () {
$("#avatarImg").html('<div class="upload-default"><i class="iconfont iconshangchuan"></i><p>点击上传</p></div>');
$("input[name='avatar_url']").val('');
$("input[name='avatar_url_upload']").val('');
});
// 封面上传
$("body").off("click", "#coverImg").on("click", "#coverImg", function () {
openAlbum(function (data) {
var val = '<img src="' + ns.img(data[0].pic_path) + '" alt="封面">';
$("#coverImg").html(val);
$("input[name='cover_url_upload']").val(data[0].pic_path);
}, 1);
});
// 删除封面
$("#coverImg").next(".del").click(function () {
$("#coverImg").html('<div class="upload-default"><i class="iconfont iconshangchuan"></i><p>点击上传</p></div>');
$("input[name='cover_url']").val('');
$("input[name='cover_url_upload']").val('');
});
/**
* 表单提交(立即发布)
*/
form.on('submit(save)', function(data){
var field = data.field;
// 根据头像类型设置正确的头像URL
if(field.avatar_image_type == 'upload'){
field.avatar_url = field.avatar_url_upload;
}
// 根据封面类型设置正确的封面URL
if(field.cover_image_type == 'upload'){
field.cover_url = field.cover_url_upload;
}
delete field.avatar_url_upload;
delete field.cover_url_upload;
field.status = 1;
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>

54
src/addon/personnel/shop/view/enterprise/channel/edit.html
View File

@@ -69,14 +69,14 @@
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">内容ID：</label> <label class="layui-form-label"><span class="required">*</span>内容ID：</label>
<div class="layui-input-inline"> <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"> <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> </div>
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">封面类型：</label> <label class="layui-form-label"><span class="required">*</span>封面类型：</label>
<div class="layui-input-block"> <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="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' : '') : ''}> <input type="radio" name="cover_image_type" lay-filter="coverImageType" value="upload" title="上传图片" {:$info['cover_image_type'] ? ($info['cover_image_type'] == 'upload' ? 'checked' : '') : ''}>
@@ -84,14 +84,14 @@
</div> </div>
<div class="layui-form-item" id="coverTypeUrl"> <div class="layui-form-item" id="coverTypeUrl">
<label class="layui-form-label">封面URL：</label> <label class="layui-form-label"><span class="required">*</span>封面URL：</label>
<div class="layui-input-inline"> <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"> <input type="text" name="cover_url" value="{$info.cover_url}" maxlength="255" autocomplete="off" placeholder="请输入封面URL" class="layui-input len-long">
</div> </div>
</div> </div>
<div class="layui-form-item" id="coverTypeUpload"> <div class="layui-form-item" id="coverTypeUpload">
<label class="layui-form-label">封面图：</label> <label class="layui-form-label"><span class="required">*</span>封面图：</label>
<div class="layui-input-block img-upload"> <div class="layui-input-block img-upload">
<div class="upload-img-block simple-uploading"> <div class="upload-img-block simple-uploading">
<div class="upload-img-box" id="coverImg"> <div class="upload-img-box" id="coverImg">
@@ -127,6 +127,13 @@
<button class="layui-btn" lay-submit lay-filter="save">提交</button> <button class="layui-btn" lay-submit lay-filter="save">提交</button>
<button class="layui-btn layui-btn-primary" onclick="back()">返回</button> <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
</div> </div>
<!-- 新增成功后的对话框模板 -->
<script type="text/html" id="addSuccessDialog">
<div class="layui-form">
<p>操作成功</p>
</div>
</script>
</div> </div>
<script> <script>
@@ -143,6 +150,14 @@
var uploadHtml = "<div class='upload-default'><i class='iconfont iconshangchuan'></i><p>点击上传</p></div>" var uploadHtml = "<div class='upload-default'><i class='iconfont iconshangchuan'></i><p>点击上传</p></div>"
// 判断是否为编辑模式（URL 中有 channel_id 且不为 0）
var isEditMode = false;
var channel_id = 0;
{if condition="$channel_id && $channel_id > 0"}
channel_id = {$channel_id};
isEditMode = true;
{/if}
layui.use(['form', 'upload', 'element'], function() { layui.use(['form', 'upload', 'element'], function() {
form = layui.form; form = layui.form;
repeat_flag = false; repeat_flag = false;
@@ -325,15 +340,22 @@
delete field.cover_url_upload; delete field.cover_url_upload;
field.status = 1; field.status = 1;
console.log('编辑：提交的数据', field) // 编辑模式下需要设置 channel_id
formSubmit(field) if(isEditMode && channel_id > 0){
field.channel_id = channel_id;
}
console.log(isEditMode ? '编辑：提交的数据' : '添加：提交的数据', field)
formSubmit(field, !isEditMode)
}); });
}); });
/** /**
* 提交 * 提交
* @param data 表单数据
* @param isAdd 是否是新增操作，true-新增，false-编辑
*/ */
function formSubmit(data){ function formSubmit(data, isAdd){
if(repeat_flag) return; if(repeat_flag) return;
repeat_flag = true; repeat_flag = true;
var url = ns.url("personnel://shop/enterprise/channeladd") var url = ns.url("personnel://shop/enterprise/channeladd")
@@ -348,6 +370,23 @@
success: function(res){ success: function(res){
repeat_flag = false; repeat_flag = false;
if (res.code == 0) { if (res.code == 0) {
if(isAdd){
// 新增成功，显示两个按钮
layer.confirm('操作成功', {
title:'操作提示',
btn: ['返回列表', '继续添加'],
closeBtn: 0,
yes: function(index, layero){
location.hash = ns.hash("personnel://shop/enterprise/channellists");
layer.close(index);
},
btn2: function(index, layero) {
listenerHash(); // 刷新页面
layer.close(index);
}
});
} else {
// 编辑成功，只显示一个按钮
layer.confirm('操作成功', { layer.confirm('操作成功', {
title:'操作提示', title:'操作提示',
btn: ['返回列表'], btn: ['返回列表'],
@@ -357,6 +396,7 @@
layer.close(index); layer.close(index);
} }
}); });
}
}else{ }else{
layer.msg(res.message); layer.msg(res.message);
} }