chore(电子名片): 支持后台配置显示样式

src/addon/personnel/shop/view/personnel/diy.html

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

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

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());
+			var data = JSON.parse($("#guessYouLikeConfig").val());
-				console.log(this.data)
+			this.is_kefu = data.is_kefu;
-				this.is_kefu = data.is_kefu
+			this.is_mp = data.is_mp;
-				this.is_mp = data.is_mp
+			this.is_file = data.is_file;
-				this.is_file = data.is_file
+			this.is_video = data.is_video;
-				this.is_video = data.is_video
+			this.is_map = data.is_map;
-				this.is_map = data.is_map
+			this.is_channel = data.is_channel;
-				this.is_channel = data.is_channel
+			// 视频号设置初始化
-				fullScreenSize(function () {
+			this.channel_display_style = data.channel_display_style || 'fixed';
-					self.lazyLoad = true;
+			this.channel_aspect_ratio = data.channel_aspect_ratio || '16:9';
-				});
+			this.channel_show_view_count = !!data.channel_show_view_count;
-			}, 10);
+				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');
@@ -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,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_kefu: vue.is_kefu,
-			is_mp:vue.is_mp,
+			is_mp: vue.is_mp,
-			is_file:vue.is_file,
+			is_file: vue.is_file,
-			is_video:vue.is_video,
+			is_video: vue.is_video,
-			is_channel:vue.is_channel,
+			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",