crm/app/sys/view/material/evidencelisting.html

{extend name="public/layout" /} {block name="title"}志远装饰-客户见证列表{/block} {block name="body"}

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

	.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;
		height:93%;
	}

	.layui-tab {
		padding: 15px;
		height: 100%;
	}

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

	.layui-form-label {
		width: 60px;
	}

	.flex-sub {
		flex: 1;
	}

	.flex-row {
		display: flex;
		align-items: center;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.layuiadmin-card-header-auto {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/* 手机预览样式图文样式 */
	.page_evidence_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_evidence_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_evidence_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_evidence_article::-webkit-scrollbar {
		width: 2px;
	}

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

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

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

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

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

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

	.page_evidence_article_img {
		width: 100%;
		box-sizing: border-box;
		padding: 0px 10px 78px;
	}

	.page_evidence_article_img>img {
		margin-bottom: 10px;
	}

	/* 手机预览视频样式 */
	.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;
	}
	.layui-card{box-shadow: none;}
</style>

<body>
	<div class="layui-fluid">
		<div class="layui-card">
			<ul class="layui-tab-title rst_box_top">
			    <li data-index="1" class="font16 layui_video_list layui-this"><a href="{:url('material/evidencelisting')}">见证列表</a></li>
			    <li data-index="2" class="font16 layui_video_tjss"><a href="{:url('material/evidence_statistics_data_list')}">数据统计</a></li>
			</ul>
			<div class="layui-card-header layuiadmin-card-header-auto" style="padding: 15px 15px 20px;">
				<div class="flex-row justify-start">
					{auth:check name="material/evidencedetail"}
					<a type="button" class="layui-btn layui-btn-primary caseaddbtn">
						添加客户见证
					</a>
					{/auth:check}
					<a type="button" class="layui-btn layui-btn-primary" id="cate_administration">分类管理</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_list" id="t"}
								<option value="{$t.id}">{$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;">
				<!-- <div class="layui-form-item clearfix"></div> -->
				<table id="evidence-table" lay-filter="evidence-table"></table>
			</div>
		</div>
	</div>
	<div class="page_evidence_mask layui-hide">
		<div class="page_evidence_phone">

		</div>
		<i class="layui-icon layui-icon-close lay-close"></i>
	</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">
  {auth:check name="material/evidencedetail"}
    <a class="layui-btn layui-btn-xs" lay-event="evi-details">编辑</a>
    {/auth:check}
    {auth:check name="data/cluedata"}
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="evidence-clue-list">线索记录</a>
    {/auth:check}
    {auth:check name="material/apievidelete"}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="evidence-delete">删除</a>
    {/auth:check}
    {auth:check name="dailyTasks/assign_org"}
      <a class="layui-btn layui-btn-xs" lay-event="daily-tasks">设置任务</a>
    {/auth:check}
	<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.name}}</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 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,
			laydate = layui.laydate,
			table = layui.table,
			scrollTopNum = 0;
			//日期范围
		laydate.render({
			elem: '#select_date'
			, type: 'date'
			, range: true
			, trigger: 'click'//呼出事件改成click
		});
		//分类管理
		$("#cate_administration").click(function () {
			layer.open({
				type: 2,
				title: ['分类管理', 'color:#333333;background-color:#D8E6F1;'],
				content: '{:url("material/cate_customer")}',
				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('material/evidencelist')}",
			cols: [
				[{
					align: 'center',
					type: 'numbers',
					field: 'id',
					width: 80,
					title: '序号',
					sort: true
				}, {
					align: 'center',
					field: 'title',
					title: '客户见证',
					templet: '#titletpl'
				}, {
					align: 'center',
					field: 'cate',
					title: '分类',
					templet: '#cate'
				}, {
					align: 'center',
					field: 'difference',
					title: '类型',
					templet: '#difference'
				}, {
					align: 'center',
					field: 'addtime',
					title: '上传时间',
					minWidth: 100
				}, {
					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',
					title: '展示',
					minWidth: 100,
					templet: '#show'
				}, {
					align: 'center',
					title: '上传人',
					minWidth: 100,
					templet: '#employee_name'
				}, {
					align: 'center',
					title: '操作',
					width: 380,
					align: 'center',
					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
            }
            });
            });
		//监听列表
		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=materialEvidence&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('material/apievidelete')}?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('material/evidencedetail')}?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') {
				requestEvidenceDetail(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 requestEvidenceDetail(id) {
			$.ajax({
				type: 'post',
				url: '{:url("material/preview_read")}',
				data: {
					id: id
				},
				success: function (res) {
					if (res.code == 0) {
						renderPhoneHtml(res.data);
						$('.page_evidence_mask').removeClass('layui-hide');
					}
				}
			})
		}

		function renderPhoneHtml(data) {
			let htmls = '';
			if (data.difference == 2) {
				htmls = `<div class="page_evidence_article">
					<div class="page_evidence_article_title">${data.title}</div>
					<div class="page_evidence_article_share_num">
						<img src="https://o.nczyzs.com/xcx/conshare.png" alt="">
						<span>${data.shared_times}</span>
					</div>
					<div class="page_evidence_article_content">${data.desc}</div>
					<div class="page_evidence_article_img">
						${data.pics && data.pics.length ? data.pics.map(v => {
					return `<img src="${v}" alt="" width="100%">`
				}).join('') : ''}
					</div>
				</div>`;
			} else {
				htmls = `<div class="page_box">
					<div class="videoDiv" id="evidenceVideo"></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_evidence_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: 'evidenceVideo',
						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_evidence_phone').html('');
			$('.page_evidence_mask').addClass('layui-hide');
		})

		$('.caseaddbtn').click(function () {
			layer.open({
				type: 2,
				title: ['添加客户见证', 'color:#333333;background-color:#D8E6F1;'],
				content: "{:url('material/evidence_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
			});
		});

		document.onkeydown=function(event){
			var e = event || window.event || arguments.callee.caller.arguments[0];
			if(e && e.keyCode==13){ 
				$(".submitbtn").trigger("click");
			}
		};
		
		form.on('switch(show)', function (obj) {
			var id = obj.value;
			$.ajax({
				type: "post",
				url: '{:url("material/apipublish")}',
				data: {
					id: id,
					cate: 'evidence'
				},
				success: function (res) {
					layer.msg(res.msg);
				}
			});
		});

		//添加客户见证
		$('.add_kj').click(function () {
			layer.open({
				type: 2,
				title: ['新建见证', 'color:#333333;background-color:#D8E6F1;'],
				content: "{:url('material/evidence_add')}",
				resize: false,
				area: ['80%', '80%'],
				// btn: ['确定','关闭'],
				//             yes: function(index){
				//                 //当点击‘确定’按钮的时候，获取弹出层返回的值
				//                 // var res = window["layui-layer-iframe" + index].callbackdata();
				//                 //打印返回的值，看是否有我们想返回的值。
				//                 console.log(index);
				//                 //最后关闭弹出层
				//                 layer.close(index);
				//             },
				//             cancel: function(){
				//                 //右上角关闭回调
				//             }
			});
		});
	});
</script>
{/block}