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-15 10:19:01 +08:00
parent 8cc352621d
commit febf614e13
3 changed files with 191 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/addon/personnel/shop/view/personnel/diy.html
View File

@@ -13,7 +13,7 @@
<div class="div-wrap">
<div class='diy-view-wrap layui-form' :style="{ backgroundColor : '#f4f6fa' }">
<div class='diy-view-wrap layui-form' :style="{ backgroundColor : '#f4f6fa' }" lay-filter="diy-form">
<div class="preview-head">
<div class="nav-tabbar style-1 center">
@@ -113,6 +113,79 @@
<div v-else @click="is_channel= 1" class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>
</div>
</div>
<!-- 视频号设置 -->
<div v-if="is_channel!= 0" class="channel-settings">
<div class="layui-form-item">
<div class="layui-input-block" style="margin-left: 0;">
<div class="collapse-header" @click="channelCollapsed = !channelCollapsed">
<span class="collapse-title">视频号内容设置</span>
<i class="layui-icon" :class="channelCollapsed ? 'layui-icon-down' : 'layui-icon-up'"></i>
</div>
<div v-show="!channelCollapsed" class="collapse-content">
<div class="layui-form-item">
<label class="layui-form-label sm">显示样式</label>
<div class="layui-input-block">
<select name="channel_display_style" class="layui-select" lay-filter="channel_display_style">
<option value="carousel">轮播</option>
<option value="fixed">固定</option>
<option value="singleSlide">单页</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label sm">封面显示比例</label>
<div class="layui-input-block">
<select name="channel_aspect_ratio" class="layui-select" lay-filter="channel_aspect_ratio">
<option value="16:9">16:9</option>
<option value="3:4">3:4</option>
</select>
</div>
</div>
<div class="layui-form-item checkbox-wrap custom-popup">
<label class="layui-form-label sm">显示观看次数</label>
<div class="layui-input-block">
<span v-if="!channel_show_view_count">隐藏</span><span v-else>显示</span>
<div v-if="channel_show_view_count" @click="channel_show_view_count= false" class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
<i class="layui-icon layui-icon-ok"></i>
</div>
<div v-else @click="channel_show_view_count= true" class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label sm">每行显示数量</label>
<div class="layui-input-block">
<select name="channel_row_count" class="layui-select" lay-filter="channel_row_count">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label sm">标题最多行数</label>
<div class="layui-input-block">
<select name="channel_title_line_clamp" class="layui-select" lay-filter="channel_title_line_clamp">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="layui-form-item checkbox-wrap custom-popup">
<label class="layui-form-label sm">显示播放按钮</label>
<div class="layui-input-block">
<span v-if="!channel_show_play_btn">隐藏</span><span v-else>显示</span>
<div v-if="channel_show_play_btn" @click="channel_show_play_btn= false" class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
<i class="layui-icon layui-icon-ok"></i>
</div>
<div v-else @click="channel_show_play_btn= true" class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-form-item checkbox-wrap custom-popup">
<label class="layui-form-label sm">地图导航</label>
<div class="layui-input-block">

32
src/addon/personnel/shop/view/public/diy.css
View File

@@ -0,0 +1,32 @@
.collapse-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background-color: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 4px;
cursor: pointer;
margin-bottom: 10px;
}
.collapse-header:hover {
background-color: #e9ecef;
}
.collapse-title {
font-weight: 600;
color: #333;
}
.collapse-content {
padding: 10px 15px;
border-radius: 4px;
background-color: #fff;
box-sizing: border-box;
border: 1px dashed #8a8a8a;
}
.channel-settings .layui-form-item {
margin-bottom: 15px;
}

86
src/addon/personnel/shop/view/public/diy.js
View File

@@ -3,7 +3,7 @@
*/
var vue = new Vue({
el: "#diyView",
data: {
data: () => ({
lazyLoad: false,
global: {
title: "电子名片",
@@ -19,25 +19,38 @@ var vue = new Vue({
is_video: 1,
is_channel: 1,
is_map: 1,
},
// 视频号设置
channel_display_style: 'fixed', // 显示样式：carousel, fixed, singleSlide，默认fixed
channel_aspect_ratio: '16:9', // 显示比例：16:9 和 3:4，默认16:9
channel_show_view_count: true, // 是否显示观看次数，默认显示
channel_row_count: 2, // 每行显示数量：1,2,3,4，默认2
channel_title_line_clamp: 2, // 标题最多行数：1,2,3，默认2
channel_show_play_btn: true, // 是否显示播放按钮，默认显示
channelCollapsed: false, // 视频号设置是否折叠，默认展开
}),
created: function () {
if ($("#guessYouLikeConfig").val()) {
$('#diyView').css('visibility', 'visible');
$('.preview-wrap .preview-restore-wrap').css('visibility', 'visible');
var self = this;
setTimeout(() => {
var data = JSON.parse($("#guessYouLikeConfig").val());
console.log(this.data)
this.is_kefu = data.is_kefu
this.is_mp = data.is_mp
this.is_file = data.is_file
this.is_video = data.is_video
this.is_map = data.is_map
this.is_channel = data.is_channel
this.is_kefu = data.is_kefu;
this.is_mp = data.is_mp;
this.is_file = data.is_file;
this.is_video = data.is_video;
this.is_map = data.is_map;
this.is_channel = data.is_channel;
// 视频号设置初始化
this.channel_display_style = data.channel_display_style || 'fixed';
this.channel_aspect_ratio = data.channel_aspect_ratio || '16:9';
this.channel_show_view_count = !!data.channel_show_view_count;
this.channel_row_count = data.channel_row_count || 2;
this.channel_title_line_clamp = data.channel_title_line_clamp || 2;
this.channel_show_play_btn = !!data.channel_show_play_btn;
fullScreenSize(function () {
self.lazyLoad = true;
});
}, 10);
} else {
$('#diyView').css('visibility', 'visible');
$('.preview-wrap .preview-restore-wrap').css('visibility', 'visible');
@@ -76,6 +89,47 @@ layui.use(['form'], function () {
fullScreenSize();
// 初始化layui的select元素的默认值和事件绑定
const initLayuiSelectBindings = (() => {
// 特别注意：layui的select元素，不能使用v-model绑定数据, 只能使用layui的form.on('select')事件监听和form.val()方法设置默认值
[`channel_display_style`, `channel_aspect_ratio`, `channel_row_count`, `channel_title_line_clamp`].forEach((key) => {
// 根据vue数据, 初始化layui的select元素的默认值
if (vue.hasOwnProperty(key)) {
// form.val 必须指定form的lay-filter属性值，才能设置默认值
form.val('diy-form', {
[`${key}`]: vue[key]
});
console.log(`form.val(${key}, ${vue[key]})`);
}
// 监听select事件, 并更新vue数据, layui + vue. 针对select元素，不能使用v-model绑定数据, 只能使用layui的form.on('select')事件监听
form.on('select(' + key + ')', function (data) {
if (vue.hasOwnProperty(key)) {
vue[key] = data.value;
console.log(`vue.${key} = ${data.value}`);
}
});
});
});
initLayuiSelectBindings(); // 启动默认绑定事件一次
// FIX: 当切换视频号隐藏还是显示时，需要重新渲染layui的select元素
// 监听视频号设置是否折叠
form.on('switch(channelCollapsed)', function (data) {
vue.channelCollapsed = data.elem.checked;
form.render('select');
initLayuiSelectBindings();
});
// FIX: 当切换视频号隐藏还是显示时，需要重新渲染layui的select元素，重新渲染后，需要重新绑定初始化数据和事件
vue.$watch('is_channel', function (newVal, oldVal) {
if (newVal !== oldVal) {
form.render('select');
initLayuiSelectBindings();
}
});
$("body").off("click", ".edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap span").on("click", ".edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap span", function () {
$(this).addClass('active bg-color').siblings().removeClass('active bg-color');
var type = $(this).attr('data-type');
@@ -85,6 +139,7 @@ layui.use(['form'], function () {
});
form.on('submit(save)', function (data) {
console.log('submit save:', { data, vue });
if (repeat_flag) return;
repeat_flag = true;
var formData = {
@@ -93,7 +148,14 @@ layui.use(['form'], function () {
is_file: vue.is_file,
is_video: vue.is_video,
is_channel: vue.is_channel,
is_map:vue.is_map
is_map: vue.is_map,
// 视频号设置
channel_display_style: vue.channel_display_style,
channel_aspect_ratio: vue.channel_aspect_ratio,
channel_show_view_count: vue.channel_show_view_count,
channel_row_count: vue.channel_row_count,
channel_title_line_clamp: vue.channel_title_line_clamp,
channel_show_play_btn: vue.channel_show_play_btn
};
$.ajax({
type: "post",