diff --git a/src/addon/personnel/shop/view/personnel/diy.html b/src/addon/personnel/shop/view/personnel/diy.html index 71fcaefb3..16aa948f1 100644 --- a/src/addon/personnel/shop/view/personnel/diy.html +++ b/src/addon/personnel/shop/view/personnel/diy.html @@ -13,7 +13,7 @@
-
+
@@ -112,7 +112,80 @@
-
+
+ +
+
+
+
+ 视频号内容设置 + +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ 隐藏显示 +
+ +
+
+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ 隐藏显示 +
+ +
+
+
+
+
+
+
+
diff --git a/src/addon/personnel/shop/view/public/diy.css b/src/addon/personnel/shop/view/public/diy.css index e69de29bb..a12e88f79 100644 --- a/src/addon/personnel/shop/view/public/diy.css +++ b/src/addon/personnel/shop/view/public/diy.css @@ -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; +} diff --git a/src/addon/personnel/shop/view/public/diy.js b/src/addon/personnel/shop/view/public/diy.js index c03031e20..55cc08b6d 100644 --- a/src/addon/personnel/shop/view/public/diy.js +++ b/src/addon/personnel/shop/view/public/diy.js @@ -3,7 +3,7 @@ */ var vue = new Vue({ el: "#diyView", - data: { + data: () => ({ lazyLoad: false, global: { title: "电子名片", @@ -13,31 +13,44 @@ var vue = new Vue({ textNavColor: "#333333", textImgPosLink: 'center', }, - is_kefu:1, + is_kefu: 1, is_mp: 1, is_file: 1, 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 - fullScreenSize(function () { - self.lazyLoad = true; - }); - }, 10); + + var data = JSON.parse($("#guessYouLikeConfig").val()); + 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; + }); } else { $('#diyView').css('visibility', 'visible'); $('.preview-wrap .preview-restore-wrap').css('visibility', 'visible'); @@ -75,6 +88,47 @@ layui.use(['form'], function () { form.render(); 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'); @@ -85,15 +139,23 @@ 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 = { - is_kefu:vue.is_kefu, - is_mp:vue.is_mp, - is_file:vue.is_file, - is_video:vue.is_video, - is_channel:vue.is_channel, - is_map:vue.is_map + is_kefu: vue.is_kefu, + is_mp: vue.is_mp, + is_file: vue.is_file, + is_video: vue.is_video, + is_channel: vue.is_channel, + 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",