初始上传

addon/live/component/controller/LiveInfo.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace addon\live\component\controller;
+
+use app\component\controller\BaseDiyView;
+
+/**
+ * 小程序直播·组件
+ *
+ */
+class LiveInfo extends BaseDiyView
+{
+
+    /**
+     * 设计界面
+     */
+    public function design()
+    {
+        return $this->fetch("live_info/design.html");
+    }
+}

addon/live/component/view/live_info/css/design.css

@@ -0,0 +1,25 @@
+.live-wrap { /*background: #fff;*/ /* border-radius: 8px; */overflow: hidden;}
+.live-wrap .banner-wrap {width: 100%;position: relative;line-height: 1;display: flex;}
+.live-wrap .banner-wrap img {width: 100%;height:104px;}
+.live-wrap .banner-wrap .shade {width: 100%;height: 100%;position: absolute;background: rgba(180, 180, 180, 0.3);left: 0;top: 0;z-index: 5;}
+.live-wrap .banner-wrap .wrap {width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 10;padding: 10px;box-sizing: border-box;}
+.live-wrap .banner-wrap .wrap .room-name {font-size: 14px;color: #fff;line-height: 1;width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: flex;align-items: center;}
+.live-wrap .banner-wrap .room-name .status-name {display: inline-block;font-size: 12px;color: #fff;padding: 4px 6px;background-color: #FF4544;border-radius: 18px;margin-right: 10px;}
+.live-wrap .banner-wrap .room-name .status-name img{height: 9px;width: 9px;vertical-align: middle;margin-right: 5px;}
+.live-wrap .room-name .status-name .iconzhibozhong {font-size: 12px;color: #fff;margin-right: 2px;}
+
+.live-wrap .room-info {padding: 10px 10px;background: #fff;display: flex;align-items: center;height: 30px;color: #303133;font-size: 14px;}
+.live-wrap .room-info .anchor-img {width: 30px;height: 30px;border-radius: 50%;overflow: hidden;margin-right: 10px;}
+.live-wrap .room-info .anchor-name, .live-wrap .room-info .goods-text {font-size: 12px;line-height: 1;color:#303133;}
+.live-wrap .room-info .separate {color: #808080;margin: 0 5px;line-height: 1;}
+
+.component-live-info h3 {font-size: 14px; /* font-weight: 600; */padding: 5px 10px 10px 10px;}
+.component-live-info .layui-form-item .layui-input-inline {padding-left: 20px;}
+
+/* 复选 */
+.component-live-info .checkbox-wrap .layui-form-checkbox, .checkbox-wrap .layui-input-inline-checkbox .layui-form-checkbox {float: right;}
+.component-live-info .checkbox-wrap .layui-form-item .layui-form-checkbox[lay-skin=primary] {margin-top: -4px;padding-left:0;}
+.component-live-info .checkbox-wrap .layui-form-item .layui-input-inline-checkbox .layui-form-checkbox[lay-skin=primary] {margin-top: 8px;}
+.component-live-info .layui-form-checkbox[lay-skin=primary] {margin-top: -4px;padding-left:0;}
+
+.component-live-info .tab-wrap{display: none !important;}

addon/live/component/view/live_info/design.html

@@ -0,0 +1,49 @@
+<nc-component :data="data[index]" class="component-live-info">
+	
+	<!-- 预览 -->
+	<template slot="preview">
+
+		<div class="live-wrap">
+			<div class="banner-wrap">
+				<img src="{$resource_path}/img/live_default_banner.png">
+				<div class="shade"></div>
+				<div class="wrap">
+					<div class="room-name">
+						<span class="status-name"><img src="{$resource_path}/img/live_default_icon.png"/>直播中</span>
+						双十一活动，限时秒杀！
+					</div>
+				</div>
+			</div>
+			<div class="room-info" v-if="nc.isShowAnchorInfo || nc.isShowLiveGood">
+				<template v-if="nc.isShowAnchorInfo">
+					<img src="{:img('public/static/img/default_img/head.png')}" class="anchor-img">
+					<span class="anchor-name">主播：主播昵称</span>
+				</template>
+				<template v-if="nc.isShowAnchorInfo && nc.isShowLiveGood">
+					<span class="separate">|</span>
+				</template>
+				<template v-if="nc.isShowLiveGood">
+					<span class="goods-text">直播商品：名称</span>
+				</template>
+			</div>
+		</div>
+
+	</template>
+	
+	<!-- 内容编辑 -->
+	<template slot="edit-content">
+		<template v-if="nc.lazyLoad">
+			<live-set></live-set>
+		</template>
+	</template>
+
+	<!-- 样式编辑 -->
+	<template slot="edit-style"></template>
+	
+	<!-- 资源 -->
+	<template slot="resource">
+		<css src="{$resource_path}/css/design.css"></css>
+		<js src="{$resource_path}/js/design.js"></js>
+	</template>
+
+</nc-component>

addon/live/component/view/live_info/js/design.js

@@ -0,0 +1,50 @@
+// 显示内容
+var showContentHtml = '<div class="layui-form-item goods-show-box checkbox-wrap">';
+		showContentHtml += '<div class="layui-input-block">';
+		showContentHtml +=		'<div class="layui-input-inline-checkbox">';
+		showContentHtml +=			'<span>主播信息</span>';
+		showContentHtml +=			'<div @click="changeStatus(\'isShowAnchorInfo\')" class="layui-unselect layui-form-checkbox" :class="{\'layui-form-checked\': (data.isShowAnchorInfo == 1)}" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>';
+		showContentHtml +=		'</div>';
+		showContentHtml +=		'<div class="layui-input-inline-checkbox">';
+		showContentHtml +=			'<span>直播商品</span>';
+		showContentHtml +=			'<div @click="changeStatus(\'isShowLiveGood\')" class="layui-unselect layui-form-checkbox" :class="{\'layui-form-checked\': (data.isShowLiveGood == 1)}" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>';
+		showContentHtml +=		'</div>';
+		showContentHtml += '</div>';
+	showContentHtml += '</div>';
+
+Vue.component("live-show-content", {
+	template: showContentHtml,
+	data: function () {
+		return {
+			data: this.$parent.data,
+			isShowAnchorInfo: this.$parent.data.isShowAnchorInfo,
+			isShowLiveGood: this.$parent.data.isShowLiveGood,
+		};
+	},
+	created: function () {
+		if(!this.$parent.data.verify) this.$parent.data.verify = [];
+		this.$parent.data.verify.push(this.verify);//加载验证方法
+	},
+	methods: {
+		verify :function () {
+			var res = { code: true, message: "" };
+			return res;
+		},
+		changeStatus: function(field) {
+			this.$parent.data[field] = this.$parent.data[field] ? 0 : 1;
+		}
+	}
+});
+
+// 显示内容
+var liveSetHtml = '<div></div>';
+Vue.component("live-set", {
+	template: liveSetHtml,
+	data: function () {
+		return {};
+	},
+	created: function () {
+		this.$parent.data.ignore = ['marginBoth', 'textColor', 'elementAngle', 'componentAngle', 'elementBgColor', 'componentBgColor', 'pageBgColor']; //加载忽略内容 -- 其他设置中的属性设置
+		this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
+	}
+});