crm/app/sys/view/company_strength/index.html

{extend name="public/layout" /} {block name="title"}志远装饰-公司实力列表{/block} {block name="body"}

<style type="text/css">
	html,
	body {
		display: block;
		min-width: 1100px;
		height: 100%;
		overflow: hidden;
	}

	.layui-table thead tr,
	.layui-table-header {
		background-color: #D8E6F1 !important;
	}

	.layui-fluid {
		display: block;
		box-shadow: 0 0 4px 0 #B6CADE;
		border-radius: 5px;
		margin: 15px;
		background-color: #ffffff;
		box-sizing: border-box;
		height: 96%;
	}

	.layui-tab {
		margin:0 !important;
		height: 100%;
	}
.layui-card{box-shadow: none !important;}
	.layui-form-item {
		width: 100%;
	}

	.layui-form-item .layui-inline {
		display: block;
		float: left;
		width: 145px;
		height: 38px;
		line-height: 38px;
		background: #FFFFFF;
		margin-right: 16px;
	}

	.layui-form-item .layui-input-inline {
		width: 145px;
		height: 38px;
		line-height: 38px;
		margin-bottom: 0;
	}

	.layui-icon {
		font-size: 20px !important;
	}

	.layui-form-item .layui-input-inline .layui-input {
		border: 1px solid #9DB6CF;
		border-radius: 5px;
	}

	.layui-form-select dl dd.layui-this {
		background-color: #249EFB;
	}

	.layui-form-item div.searchBox {
		width: 320px;
		background: #FFFFFF;
		border: 1px solid #B6CADE;
		border-radius: 24px;
		height: 38px;
		overflow: hidden;
		padding-left: 18px;
		position: relative;
		margin-bottom: 0px;
		float: right;
	}

	.searchBox .inputBox {
		width: 240px;
		float: left;
		height: 36px;
		line-height: 36px;
		border-width: 0;
	}

	.searchBtn {
		position: absolute;
		top: 0;
		right: 0;
		width: 51px;
		height: 38px;
		background-color: #fff;
	}

	.searchBtn img {
		position: absolute;
		width: 26px;
		top: 6px;
		left: 0;
	}

	.layui-btn-primary {
		color: #249EFB;
		border: 1px solid #249EFB;
	}

	.layui-btn-primary:hover {
		background-color: #E3F7FF;
		color: #249EFB;
	}

	.layui-table-page>div {
		display: flex;
		justify-content: flex-start;
	}

	.layui-btn-xs,
	.layui-btn-xs:hover {
		border: 1px solid #249EFB;
		background-color: #fff;
		color: #249EFB;
		padding: 0px 10px;
	}

	.layui-btn-danger,
	.layui-btn-danger:hover {
		color: #FF5722;
		background-color: #fff;
		border: 1px solid #FF5722;
		padding: 0px 10px;
	}

	.ml10 {
		margin-left: 10px;
	}
	.flex-row {
		display: flex;
		align-items: center;
	}
	.flex-sub {
		flex:1;
	}
	.justify-end {
		justify-content: flex-end;
	}
	.layuiadmin-card-header-auto {
		display: flex;
		align-items: center;
	}
	.layui-form-label {
		width: 60px;
	}
	/* 手机预览样式图文样式 */
	.page_company_mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 999999;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.page_company_phone {
		width: 410px;
		height: 95vh;
		max-height: 820px !important;
		background: url('__STATIC__/img/phoneModel.png');
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.page_company_article {
		width: 375px !important;
		height: 96% !important;
		background-color: #fff;
		position: relative;
		overflow-y: auto;
		overflow-x: hidden;
		border-radius: 30px;
		margin-right: 4px;
	}

	/* 设置滚动条的样式 */
	.page_company_article::-webkit-scrollbar {
		width: 2px;
	}

	/* 滚动槽 */
	.page_company_article::-webkit-scrollbar-track {
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
		border-radius: 10px;
	}

	/* 滚动条滑块 */
	.page_company_article::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, 0.3);
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
	}

	.page_company_article_title {
		padding: 16px 10px 8px;
		color: #384855;
		font-size: 18px;
	}

	.page_company_article_share_num {
		box-sizing: border-box;
		padding: 0px 0px 0px 10px;
		font-size: 12px;
		display: flex;
		align-items: center;
	}

	.page_company_article_share_num>img {
		width: 12px;
		height: 10px;
		margin-right: 3px;
	}

	.page_company_article_content {
		width: 100%;
		box-sizing: border-box;
		padding: 12px 10px;
		color: #384855;
		font-size: 14px;
	}

	.page_company_article_content img {
		max-width: 100% !important;
	}

	/* 手机预览视频样式 */
	.page_box {
		width: 375px;
		height: 96%;
		background-color: #000;
		border-radius: 30px;
		margin-right: 4px;
        position: relative;
        overflow: hidden;
	}

	.video_show_msg {
		width: 270px;
		position: absolute;
		bottom: 80px;
		left: 20px;
		color: #fff;
		font-size: 14px;
		z-index: 9999999;
	}

	.video_msg_title {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 14px;
	}

	.video_msg_content {
		margin-top: 3px;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 这里是超出几行省略 */
		overflow: hidden;
		font-size: 14px;
	}

	.video_msg_type {
		font-size: 14px;
		margin-top: 3px;
	}

	.video_right_box {
		position: absolute;
		right: 10px;
		bottom: 180px;
		font-size: 12px;
		color: #fff;
		z-index: 9999999;
	}

	.video_right_item {
		width: 50px;
		height: 52px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 10px;
	}

	.video_right_avatar {
		width: 32px;
		height: 32px;
		background-color: #ccc;
		border-radius: 50%;
	}

	.video_right_img>img {
		width: 23px;
		height: 21px;
	}

	.video_right_name {
		margin-top: 5px;
	}

	.videoDiv {
		display: block;
		width: 100%;
		height: auto;
		min-height: 100%;
		overflow: hidden;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		-webkit-transform: translate(0, -50%);
		-moz-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
	}

	.videoMsg .videoDiv video {
		display: block;
		width: 100%;
		position: absolute;
		max-height: 100%;
		height: auto;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		object-fit: fill;
		z-index: 8;
	}

	.lay-close {
		position: absolute;
		top: 30px;
		right: 25%;
		color: #fff;
		font-size: 38px !important;
		font-weight: 700;
		cursor: pointer;
	}
	.layui-tab-title .layui-this {
		color: #249EFB;
	}

	.layui-tab-title .layui-this:after {
		width: 50px;
		height: 4px !important;
		background-color: #249EFB;
		top: 38px !important;
		left: 50%;
		transform: translateX(-50%);
		border: none;
		border:1px solid #249EFB !important;
	}
</style>

<body>
<div class="layui-fluid">
    <div class="layui-tab layui-tab-brief height100_">
        <ul class="layui-tab-title rst_box_top">
            <li data-index="1" class="font16 layui_video_list layui-this"><a href="{:url('companyStrength/index')}">实力列表</a></li>
            <li data-index="2" class="font16 layui_video_tjss"><a href="{:url('companyStrength/data_statistics')}">数据统计</a></li>
        </ul>
        <div class="layui-tab-content pd0 mdt20" style="padding: 0;">
            <div class="layui-tab-item layui-show">

                <div class="layui-card">
                    <div class="layui-card-header layuiadmin-card-header-auto" style="padding: 15px 15px 20px;">
                        <div class="flex-row">
                            <a type="button" class="layui-btn layui-btn-primary caseaddbtn">
                                添加公司实力
                            </a>
                            <a type="button" class="layui-btn layui-btn-primary" id="cate_administration">分类管理</a>
							<a type="button" class="layui-btn layui-btn-primary" id="cate_administration_labels">标签管理</a>
                        </div>
                        <div class="layui-form flex-sub flex-row justify-end">
                            <div class="layui-inline flex-row" style="margin-right: 0px;">
                                <label class="layui-form-label">分类</label>
                                <div class="layui-input-inline flex-sub">
                                    <select name="cate" lay-filter="type" id="type" lay-search>
                                        <option value="">请选择分类</option>
                                        {volist name="cate" id="t"}
                                        <option value="{$t.name}">{$t.name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline flex-row">
                                <label class="layui-form-label">标题</label>
                                <div class="layui-input-inline flex-sub">
                                    <input type="text" name="title" placeholder="请输入关键词" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline flex-row" style="margin-right: 0px;">
                                <label class="layui-form-label">上传人</label>
                                <div class="layui-input-inline flex-sub">
                                    <select name="employee_id" id="employee" lay-search>
                                        <option value="">请选择人员</option>
                                        {volist name="employee" id="e"}
                                        <option value="{$e.id}">{$e.name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
							<div class="layui-inline">
                                <label class="layui-form-label">上传时间</label>
                                <div class="layui-input-inline select-date">
                                    <input type="text" name="add_time" id="select_date" placeholder="开始时间 - 结束时间" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline ml10">
                                <button class="layui-btn layuiadmin-btn-list submitbtn" lay-submit lay-filter="LAY-app-contlist-search">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body" style="text-align: center;">
                        <table id="evidence-table" lay-filter="evidence-table"></table>
                    </div>
                </div>
            
                <!-- 预览 -->
                <div class="page_company_mask layui-hide">
                    <div class="page_company_phone">

                    </div>
                    <i class="layui-icon layui-icon-close lay-close"></i>
                </div>
            </div>
            <div class="layui-tab-item" style="height: 700px;">
                <iframe class="data_lists" src="" style="width: 100%;height:100%;" scrolling="0" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</div>
</body>
{/block} {block name="js"}
<script type="text/html" id="show">
    <input type="checkbox" name="show" value="{{d.id}}" lay-skin="switch" lay-text="上架|下架" lay-filter="show" {{ d.publish == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="table-evidence-action">
    <a class="layui-btn layui-btn-xs" lay-event="evi-details">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="evidence-delete">删除</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="evidence-clue-list">线索记录</a>
	<a class="layui-btn layui-btn-xs" lay-event="preview">预览</a>
</script>
<script type="text/html" id="titletpl">
  {{# if(d.title){ }}
    <span>{{d.title}}</span>
  {{# }else{ }}
    <span style="color: #cccccc;">无</span>
  {{# } }}
</script>
<script type="text/html" id="cate">
  <span>{{d.cate}}</span>
</script>
<script type="text/html" id="employee_name">
  {{# if(d.employee){ }}
  <span>{{d.employee.opt_name}}</span>
  {{# }else{ }}
  <span style="color: #cccccc;">无</span>
  {{# } }}
</script>
<script type="text/html" id="difference">
	{{# if(d.difference==1){ }}
		<span>视频</span>
	{{# }else{ }}
		<span>图片</span>
	{{# } }}
  </script>
  <script type="text/html" id="cover">
	{{# if(d.cover != ''){ }}
		<img src="{{d.cover}}?x-oss-process=image/resize,w_50" style="width: 30px;height: 30px;"/>
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
</script>
<script src="__STATIC__/js/xgplayer.js" type="text/javascript"></script>
<script>
	layui.config({
		base: '__LAYUI__/',
		urlbase: '/sys'
	}).extend({
		index: 'lib/index' //主入口模块
	}).use(['index', 'table', 'element','laydate'], function () {
		var $ = layui.$,
			form = layui.form,
			element = layui.element,
			table = layui.table,
			laydate = layui.laydate,
			scrollTopNum = 0;
			  //日期范围
		laydate.render({
			elem: '#select_date'
			, type: 'date'
			, range: true
			, trigger: 'click'//呼出事件改成click
		});
		document.onkeydown=function(event){
			var e = event || window.event || arguments.callee.caller.arguments[0];
			if(e && e.keyCode==13){ 
				$(".submitbtn").trigger("click");
			}
		};
		//分类管理
		$("#cate_administration").click(function () {
			layer.open({
				type: 2,
				title: ['分类管理', 'color:#333333;background-color:#D8E6F1;'],
				content: '{:url("companyStrength/cate")}',
				resize: false,
				area: ['80%', '80%'],
				end: function () {
					location.reload();
				}
			});
		})
		//监听搜索
		form.on('submit(LAY-app-contlist-search)', function (data) {
			var field = data.field;
			//执行重载
			table.reload('evidence-table', {
				where: field
				, page: { curr: 1 }
			});
		});
		///default entery
		//客户见证列表
		table.render({
			elem: '#evidence-table',
			autoSort: false,
			url: "{:url('companyStrength/list')}",
			cols: [
				[{
					align: 'center',
					type: 'numbers',
					field: 'id',
					width: 80,
					title: '序号',
					sort: true
				}, {
					align: 'center',
					field: 'title',
					title: '标题',
					templet: '#titletpl'
				}, {
					align: 'center',
					field: 'cover',
					title: '封面',
					templet: '#cover'
				}, {
					align: 'center',
					field: 'cate',
					title: '分类',
					templet: '#cate'
				}, {
					align: 'center',
					field: 'difference',
					title: '类型',
					templet: '#difference'
				}, {
					align: 'center',
					title: '浏览次数',
					sort: true,
					field: 'view_times',
					minWidth: 110
				}, {
					align: 'center',
					title: '转发次数',
					sort: true,
					field: 'shared_times',
					minWidth: 110
				}, {
					align: 'center',
					title: '浏览时长',
					sort: true,
					field: 'visit_due_time',
					minWidth: 110
				}, {
					align: 'center',
					field: 'addtime',
					title: '上传时间',
					minWidth: 180
				}, {
					align: 'center',
					title: '展示',
					minWidth: 100,
					templet: '#show'
				}, {
					align: 'center',
					title: '上传人',
					minWidth: 100,
					templet: '#employee_name'
				}, {
					align: 'center',
					title: '操作',
					width: 310,
					fixed: 'right',
					toolbar: '#table-evidence-action'
				}]
			],
			page: true,
			limit: 50,
			height: 'full-200',
			text: '对不起，加载出现异常！'
		});
		table.on('sort(evidence-table)', function (obj) {
            table.reload('evidence-table', {
            initSort: obj
            , where: {
                order: obj.field + ' ' + obj.type
            }
            });
            });
		
		//标签管理
		$("#cate_administration_labels").click(function(){
            layer.open({
                type: 2,
                title: ['标签管理', 'color:#333333;background-color:#D8E6F1;'],
                content : '{:url("company_strength/cate_labels")}',
                resize: false,
                area: ['80%', '80%'],
                end: function () {
                    location.reload();
                }
            });
        })
		
		//监听列表
		table.on('tool(evidence-table)', function (obj) {
			var data = obj.data;
			if (obj.event === 'evidence-clue-list') {
				layer.open({
					type: 2,
					title: ['素材线索数据', 'color:#333333;background-color:#D8E6F1;'],
					content: "{:url('data/cluedata')}?type=CompanyStrength&id=" + data.id,
					resize: false,
					area: ['80%', '80%']
				});
			} else if (obj.event === 'evidence-delete') {
				layer.confirm('确定要删除此数据么？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function () {
					$.get("{:url('companyStrength/del')}?id=" + data.id, function (res) {
						if (res.code === 0) {
							layer.msg(res.msg, { anim: 0, time: 400 }, function () {
								table.reload('evidence-table');
							});
						} else {
							layer.msg(res.msg, { anim: 6, time: 400 });
						}
					});
				});
			} else if (obj.event === 'evi-details') {
				layer.open({
					type: 2,
					title: ['详情编辑', 'color:#333333;background-color:#D8E6F1;'],
					content: "{:url('companyStrength/edit')}?id=" + data.id,
					resize: false,
					area: ['80%', '80%'],
					end: function() {
						scrollPostion(scrollTopNum);
						setTimeout(() => {
							$('.layui-table-main').scroll(function (e) {
								scrollTopNum = $(this).scrollTop();
								console.log(scrollTopNum, '<<<记录位置');
							})
						}, 800)
					}
				});
			} else if (obj.event === 'daily-tasks') {
				layer.open({
					type: 2,
					title: ['设置任务', 'color:#333333;background-color:#D8E6F1;'],
					content: "{:url('dailyTasks/assign_org')}?type=evidencelist&id=" + data.id,
					resize: false,
					area: ['80%', '80%']
				});
			}else if (obj.event === 'preview') {
				requestCompanyDetail(data.id);
			}
		});

		setTimeout(() => {
            $('.layui-table-main').scroll(function (e) {
                scrollTopNum = $(this).scrollTop();
                console.log(scrollTopNum, '<<<记录位置');
            })
        }, 800)

        function scrollPostion(num) {
            $('.layui-table-main').scrollTop(num)
        }

		function requestCompanyDetail(id) {
			$.ajax({
				type: 'post',
				url: '{:url("companyStrength/preview_read")}',
				data: {
					id: id
				},
				success: function (res) {
					if (res.code == 0) {
						renderPhoneHtml(res.data);
						$('.page_company_mask').removeClass('layui-hide');
					}
				}
			})
		}

		function renderPhoneHtml(data) {
			let htmls = '';
			if (data.difference == 2) {
				htmls = `<div class="page_company_article">
					<div class="page_company_article_title">${data.title}</div>
					<div class="page_company_article_share_num">
						<img src="https://o.nczyzs.com/xcx/conshare.png" alt="">
						<span>${data.shared_times}</span>
					</div>
					<div class="page_company_article_content">${data.desc}</div>
				</div>`;
			} else {
				htmls = `<div class="page_box">
					<div class="videoDiv" id="companyVideo"></div>
					<div class="video_right_box">
						<div class="video_right_item">
							<div class="video_right_avatar">
								<img src="__STATIC__/img/default.png" width="100%" height="100%" />	
							</div>
							<span class="video_right_name">分享人</span>
						</div>
						<div class="video_right_item">
							<div class="video_right_img">
								<img src="__STATIC__/img/addedwx.png" alt="">
							</div>
							<span class="video_right_name">微信咨询</span>
						</div>
						<div class="video_right_item">
							<div class="video_right_img">
								<img src="__STATIC__/img/whitemobile.png" alt="">
							</div>
							<span class="video_right_name">电话预约</span>
						</div>
						<div class="video_right_item">
							<div class="video_right_img">
								<img src="__STATIC__/img/wcollect.png" alt="">
							</div>
							<span class="video_right_name">收藏</span>
						</div>
						<div class="video_right_item">
							<div class="video_right_img">
								<img src="__STATIC__/img/zhuanfaicon.png" alt="">
							</div>
							<span class="video_right_name">转发</span>
						</div>
					</div>
					<div class="video_show_msg">
						<div class="video_msg_title">${data.title}</div>
						<div class="video_msg_content">${data.desc}</div>
					</div>
				</div>`;
			}
			$('.page_company_phone').html(htmls);
			setTimeout(() => {
				if (data.difference == 1) {
					var posters = data.cover;
					if (posters == null || posters == '') {
						posters = `${data.pics}?x-oss-process=video/snapshot,t_100,f_jpg`;
					}
					let player = new Player({
						id: 'companyVideo',
						autoplay: false,
						volume: 0.3,
						url: data.pics,
						poster: posters,
						'x5-video-player-type': 'h5',
						playsinline: true,
						thumbnail: {
							pic_num: 44,
							width: 160,
							height: 90,
							col: 10,
							row: 10,
						},
						lang: 'zh-cn',
						fitVideoSize: 'fixWidth',
						width: 375,
						whitelist: ['']
					});
				}
			}, 500)
		}

		$('.lay-close').click(function () {
			$('.page_company_phone').html('');
			$('.page_company_mask').addClass('layui-hide');
		})

		$('.caseaddbtn').click(function () {
			layer.open({
				type: 2,
				title: ['添加', 'color:#333333;background-color:#D8E6F1;'],
				content: "{:url('companyStrength/add')}",
				resize: false,
				area: ['80%', '80%']
			});
		})

		//备注
		$('body').on('mouseover', '.remarksInfo', function () {
			var type = $(this).data('type');
			layer.tips(type, this, {
				tips: [1, '#3595CC'],
				time: 2000
			});
		});

		form.on('switch(show)', function (obj) {
			var id = obj.value;
			$.ajax({
				type: "post",
				url: '{:url("companyStrength/apipublish")}',
				data: {
					id: id,
				},
				success: function (res) {
					layer.msg(res.msg);
				}
			});
		});

	});
</script>
{/block}