已小程序卡片为例
找到 display.html 文件
在html 文件中 添加 按钮
设置隐藏input框用来存储 输入的值
在display 文件中的 js
window.select_mediaid 里的 util.material 方法中
添加 代码 用于 添加和编辑的显示
if (type == 'miniprogrampage') {
if (angular.isDefined(otherVal)) {
var editmedia = $(".del-miniprogrampage-media");
console.log( $(editmedia.get(i)).find('.edit-gray').data('media'));
console.log( angular.toJson(otherVal));
console.log('长度')
for (var i = 0; i < editmedia.length; i++) {
// if (htmlEncode($(editmedia.get(i)).find('.edit-gray').data('media')) == htmlEncode(angular.toJson(otherVal))) {
console.log('asd');
var inputVal = $(':hidden[name="reply[reply_'+type+']"]').val();
console.log(inputVal)
var inputValArr = inputVal.split(',');
console.log(inputValArr);
var middleVal = angular.copy(inputValArr);
angular.forEach(inputValArr, function(val, key) {
inputValArr[key] = htmlEncode(val);
});
// var index = _.indexOf(inputValArr, htmlEncode(angular.toJson(otherVal)));
console.log(inputValArr);
console.log(htmlEncode(angular.toJson(otherVal)));
console.log(index);
material.title = material.title.replace(/,/g, '，');
material.appid = material.appid.replace(/,/g, '，');
material.pagepath = material.pagepath.replace(/,/g, '，');
replyVal = material.title+','+material.appid+','+material.pagepath;
// console.log(material);
// middleVal[index] = angular.toJson(material);
// console.log(middleVal)
// replyVal = middleVal.join(',');
// console.log(replyVal)
$(':hidden[name="reply[reply_'+type+']"]').val(replyVal);
$(editmedia.get(i)).html(
' <div class="desc">'+
' <div class="media-title">'+
' <span class="title-wrp" href="javascript:;">小程序卡片-标题:</span>'+
' <span class="desc"><a href="javascript:;" class="appmsg-desc">'+material.title+'</a></span>'+
' </div>'+
' <div class="media-appid">'+
' <span class="title-wrp" href="javascript:;">小程序卡片-appid:</span>'+
' <span class="desc"><a href="javascript:;" class="appmsg-desc">'+material.appid+'</a></span>'+
' </div>'+
' <div class="media-path">'+
' <span class="title-wrp" href="javascript:;">小程序卡片-访问路径:</span>'+
' <span class="desc"><a href="javascript:;" class="appmsg-desc">'+material.pagepath+'</a></span>'+
' </div>'+
' </div>'+
' <div class="opr">'+
' <a href="javascript:;" data-media="'+htmlEncode(angular.toJson(material))+'" class="edit-gray" onclick="select_mediaid(\'miniprogrampage\', '+htmlEncode(angular.toJson(material))+')">编辑</a>'+
' <a href="javascript:;" data-media="'+material.title+'" class="del-gray" onclick="delmedia(\''+type+'\', this)">删除</a>'+
' </div>'
);
break;
// }
}
}else {
if($.trim(material.title).length == 0) {
return false;
}
replyVal.push(angular.toJson(material.title));
replyVal.push(angular.toJson(material.appid));
replyVal.push(angular.toJson(material.pagepath));
console.log('sdad')
console.log(angular.toJson(material.title));
$(':hidden[name="reply[reply_'+type+']"]').val(replyVal);
console.log(replyVal)
$('.keywords-list').append(
'<li>'+
'<div class="del-'+type+'-media">'+
' <div class="desc">'+
' <div class="media-title">'+
' <span class="title-wrp" href="javascript:;">小程序卡片-标题:</span>'+
' <span class="desc"><a href="javascript:;" class="appmsg-desc">'+material.title+'</a></span>'+
' </div>'+
' <div class="media-appid">'+
' <span class="title-wrp" href="javascript:;">小程序卡片-appid:</span>'+
' <span class="desc"><a href="javascript:;" class="appmsg-desc">'+material.appid+'</a></span>'+
' </div>'+
' <div class="media-path">'+
' <span class="title-wrp" href="javascript:;">小程序卡片-访问路径:</span>'+
' <span class="desc"><a href="javascript:;" class="appmsg-desc">'+material.pagepath+'</a></span>'+
' </div>'+
' </div>'+
' <div class="opr">'+
' <a href="javascript:;" data-media="'+htmlEncode(angular.toJson(material))+'" class="edit-gray" onclick="select_mediaid(\'miniprogrampage\', '+htmlEncode(angular.toJson(material))+')">编辑</a>'+
' <a href="javascript:;" data-media="'+material.title+'" class="del-gray" onclick="delmedia(\''+type+'\', this)">删除</a>'+
' </div>'+
'</div>'+
'</li>'
);
}
}在 window.initReplyController 方法 加入代码 用于页面加载初始化 的内容显示
case 'miniprogrampage':
angular.forEach(val, function(miniprogrampageVal, imageKey) {
replyVal = miniprogrampageVal.title+','+miniprogrampageVal.appid+','+miniprogrampageVal.pagepath;
$(':hidden[name="reply[reply_'+type+']"]').val(replyVal);
$('.keywords-list').append(
'<li>'+
'<div class="del-'+type+'-media">'+
' <div class="desc">'+
' <div class="media-title">'+
' <span class="title-wrp" href="javascript:;">小程序卡片-标题:</span>'+
' <span class="desc"><a href="javascript:;" class="appmsg-desc">'+miniprogrampageVal.title+'</a></span>'+
' </div>'+
' <div class="media-appid">'+
' <span class="title-wrp" href="javascript:;">小程序卡片-appid:</span>'+
' <span class="desc"><a href="javascript:;" class="appmsg-desc">'+miniprogrampageVal.appid+'</a></span>'+
' </div>'+
' <div class="media-path">'+
' <span class="title-wrp" href="javascript:;">小程序卡片-访问路径:</span>'+
' <span class="desc"><a href="javascript:;" class="appmsg-desc">'+miniprogrampageVal.pagepath+'</a></span>'+
' </div>'+
' </div>'+
' <div class="opr">'+
' <a href="javascript:;" data-media="'+htmlEncode(angular.toJson(miniprogrampageVal))+'" class="edit-gray" onclick="select_mediaid(\'miniprogrampage\', '+htmlEncode(angular.toJson(miniprogrampageVal))+')">编辑</a>'+
' <a href="javascript:;" data-media="'+miniprogrampageVal.title+'" class="del-gray" onclick="delmedia(\''+type+'\', this)">删除</a>'+
' </div>'+
'</div>'+
'</li>'
);
})
break;
case 'cardimage':
angular.forEach(val, function(imageVal, imageKey) {
replyVal.push(angular.toJson(imageVal.media_id));
$('.keywords-list').append(
'<li>'+
'<div class="del-'+type+'-media">'+
' <div class="desc">'+
' <div class="media-content">'+
' <div class="appmsgSendedItem">'+
' <a class="title-wrp" href="javascript:;">'+
' <span class="icon cover" style="background-image:url('+imageVal.img_url+');"></span>'+
' <span class="title">[图片]</span>'+
' </a>'+
' </div>'+
' </div>'+
' </div>'+
' <div class="opr">'+
' <a href="javascript:;" data-media="'+imageVal.media_id+'" class="del-gray" onclick="delmedia(\''+type+'\', this)">删除</a>'+
' </div>'+
'</div>'+
'</li>'
);
});
$(':hidden[name="reply[reply_'+type+']"]').val(replyVal);
break;
在web\resource\js\app\common.min.js 中添加点击按弹窗显示的内容
e.put("directive-mini-mini.html",'<div class="modal-dialog" ng-controller="we7resource-miniprogrampage-controller"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">文字</h4></div><div class="modal-body material-content clearfix"><div id="basic" class="material-body we7-form"><div class="form-group"><label class="control-label col-sm-1">小程序卡片-标题</label><input type="text" id="app_title" class="form-control" name="app_title" /></div><div class="form-group"><label class="control-label col-sm-1">小程序卡片-appid</label><input type="text" id="app_appid" class="form-control" name="app_appid" value="" /></div><div class="form-group"><label class="control-label col-sm-1">小程序卡片-访问路径</label><input type="text" id="app_pagepath" class="form-control" name="app_pagepath" value="" /></div><div class="modal-content" ng-show="linkStatus" style="position: absolute; width: 600px"><div class="modal-body"><div class="we7-padding"><div class="form-group"><label class="col-sm-2 control-label">显示文字</label><div class="col-sm-10"><input type="text" class="form-control" ng-model="link.text" autocomplete="off"></div></div><div class="form-group" style="margin-bottom: 0"><label class="col-sm-2 control-label">跳转链接</label><div class="col-sm-10"><input type="text" class="form-control" ng-model="link.url" autocomplete="off"></div></div></div></div><div class="modal-footer"><button type="button" class="btn btn-primary" ng-disabled="!link.url" ng-click="changeLink()">确定</button> <button type="button" class="btn btn-default" ng-click="showLink()">取消</button></div></div></div></div><div class="modal-footer"><button type="button" class="btn btn-primary" ng-click="ok()">确定</button> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button></div></div></div>'),
e.put("directive-cardimage-cardimage.html",'<div class="modal-dialog modal-lg modal-material" ng-controller="we7resource-cardimage-controller"><div class="modal-content"><div class="modal-header"><h4 class="modal-title" id="myModalLabel1">图片</h4><div class="material-nav"><a href="javascript:;" ng-click="setIndex(0)" ng-show="showWx()" ng-class="{true:\'active\',false:\'\'}[index==0]">{{ config.typeName }}</a> <a href="javascript:;" ng-click="setIndex(1)" ng-show="showLocal()" ng-class="{true:\'active\',false:\'\'}[index==1]">本地服务器</a> <a href="javascript:;" ng-click="setIndex(2)" ng-class="{true:\'active\',false:\'\'}[index==2]">提取网络图片</a></div><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body material-content clearfix"><div class="material-head"><form action="" method="get" class="form-horizontal clearfix form-inline" role="form"><div class="input-group filter"><select name="" id="" class="we7-select pull-left" ng-show="index==1" ng-model="year"><option value="0" ng-selected="true">不限年份</option><option ng-repeat="(key, year) in years" value="{{year}}">{{year}}</option></select><select name="" id="" class="we7-select pull-left" ng-show="index==1" ng-model="month"><option value="0" ng-selected="true">不限月份</option><option ng-repeat="(key, month) in months" value="{{month}}">{{month}}</option></select><span class="input-group-btn pull-left" ng-show="index==1" ng-click="search()"><button class="btn btn-default" type="button"><span class="wi wi-search"></span></button></span></div><div class="pull-right btn-uploader form-inline" style="z-index: 10" ng-show="index<2"><a ng-click="delSel()" class="btn btn-danger" ng-if="index==0 || role != \'operator\'">删除</a><div class="btn-group we7-margin-horizontal-sm"><button type="button" class="btn btn-primary">移动</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span> <span class="sr-only">Toggle Dropdown</span></button><ul class="dropdown-menu dropdown-menu-right"><li ng-repeat="(key, value) in groups | filter : {deleted : false}" ng-click="moveToGroup(value)"><a>{{value.name}}</a></li></ul></div><we7-uploader-btn upload-url="uploadurl" on-uploaded="uploaded()" on-upload-error="uploaderror(mes)" multiple name="uploadname" accept="accept"></we7-uploader-btn></div></form></div><div id="image" class="material-body" ng-show="index!=2"><div class="clearfix"><div class="category"><div class="add"><a ng-click="doAddGroup();" class="color-default"><i class="wi wi-registersite"></i>添加分组</a></div><div class="category-menu panel-group" id="category-menu" role="tablist" aria-multiselectable="true"><ul><li ng-click="loadAll()" ng-class="{true : \'active\', false : \'\'}[groupid == -1]"><div class="name"><i class="wi wi-file"></i>全部</div><a class="edit"></a></li><li ng-click="loadNoGroup()" ng-class="{true : \'active\', false : \'\'}[groupid == 0]"><div class="name"><i class="wi wi-file"></i>未分组</div><a href="javascript:;" class="edit"></a></li><li ng-repeat="(key, value) in groups | filter : {deleted : false}" ng-click="loadImages(value)" ng-class="{true : \'active\', false : \'\'}[groupid == value.id]"><div class="name"><i class="wi wi-file"></i> <input type="text" class="form-control" ng-model="value.name" ng-if="value.editing"> {{!value.editing ? value.name :\'\'}} <span class="setting" v-show="!value.editable && !value.editing" ng-click="doEditGroup(value)"><i class="wi wi-appsetting"></i></span></div><div class="edit" ng-class="{true : \'show\', false : \'\'}[value.editable]"><a class="color-default" ng-show="!value.editing" ng-click="editing(value)"><i class="wi wi-text"></i>编辑</a> <a class="color-red" ng-show="!value.editing" ng-click="delGroup(value)"><i class="wi wi-delete2"></i>删除</a> <a class="color-default" ng-show="value.editing" ng-click="edited(value)"><i class="wi wi-right-sign">确定</i></a> <a class="color-default" ng-show="value.editing" ng-click="cancelEditing(value)"><i class="wi wi-error-sign"></i>取消</a></div></li></ul></div></div><div class="img-container we7-flex"><div class="item" ng-class="{true:\'active\',false:\'\'}[value.selected]" ng-repeat="(key, value) in images" ng-click="itemClick(value)" style="background-image: {{getImage(value)}}"><div class="name">{{value.filename}}</div><div class="mask"><span class="wi wi-right"></span></div><div class="del" ng-click="delItem(value,$event)" ng-if="index==0 || role != \'operator\'"><span class="wi wi-delete2"></span></div></div></div></div></div><div class="img-net text-center" ng-show="index==2"><form action="" method="get" class="we7-form"><img class="img" src="{{localurl}}" alt=""><div class="color-gray">输入图片链接</div><input type="text" class="form-control text-center" placeholder="图片链接" ng-model="netWorkurl"><div><button class="btn btn-default" type="button" ng-click="fetchNetwork()">转化</button></div></form></div><div class="material-pager text-right" ng-show="index!=2"><div class="we7-form form-inline selected-all"><input type="checkbox" id="selected-all" ng-model="selectedAllImage" ng-change="selectedAll(selectedAllImage)"><label for="selected-all">全选</label></div><div ng-bind-html="pager"></div></div></div><div class="modal-footer"><button type="button" class="btn btn-primary" ng-click="ok()">确定</button> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button></div></div></div>'),
对应js代码
angular.module("we7resource").directive("we7ResourceMiniprogrampageDialog", ["config",
function(e) {
return {
scope: {},
restrict: "EA",
templateUrl: "directive-mini-mini.html"
}
}]),
angular.module("we7resource").controller("we7resource-miniprogrampage-controller", ["$scope", "config",
function(a, e) {
console.log(e.otherVal);
console.log(e.otherVal.title);
console.log(e.otherVal.pagepath);
$("#app_title").val(e.otherVal.title),
$("#app_appid").val(e.otherVal.appid),
$("#app_pagepath").val(e.otherVal.pagepath),
a.ok = function() {
var title = $("#app_title").val();
var appid = $("#app_appid").val();
var pagepath = $("#app_pagepath").val();
$(window).trigger("resource_selected", {
type: "miniprogrampage",
items: [{
title: title,
appid: appid,
pagepath: pagepath
}]
})
}
}]),
angular.module("we7resource").directive("we7ResourceCardimageDialog",function(){return{scope:{},restrict:"EA",templateUrl:"directive-cardimage-cardimage.html",link:function(a,e,t,n,i){e.bind("click","pagination li a",function(e){var t=$(e.target).attr("page");t&&a.$broadcast("image_page_change",t)})}}}),angular.module("we7resource").controller("we7resource-cardimage-controller",["$scope","$sce","serviceResource","$http","$controller","config",function(i,a,s,e,t,o){i.resourceType="image",t("we7resource-base-controller",{$scope:i}),i.accept="image/gif, image/jpg, image/jpeg, image/bmp, image/png, image/x-ico",i.uploadname="上传图片",i.multipleupload=!0,i.quality=0,i.netWorkurl="",i.groups=[];new Date;function n(e){$(window).trigger("resource_selected",{type:"cardimage",items:e})}function r(){for(var e=[],t=l(),a=0;a<t.length;a++)e.push(t[a].id);return e}function l(){for(var e=[],t=0;t<i.images.length;t++){var a=i.images[t];a.selected&&e.push(a)}return e}function c(){var e=i.groupid;i.uploadurl=0==i.index?"./index.php?c=utility&a=file&do=wechat_upload&upload_type=image&mode=perm&uniacid="+i.uniacid+"&dest_dir="+i.dest_dir+"&quality="+i.quality+"&group_id="+e:"./index.php?c=utility&a=file&do=upload&upload_type=image&global="+i.global+"&dest_dir="+i.dest_dir+"&uniacid="+i.uniacid+"&quality="+i.quality+"&group_id="+e}function u(){d(i.groupid),function(){var e=1==i.index,t={uniacid:o.uniacid?o.uniacid:0};s.imageGroup(e,t).then(function(e){for(var t=[],a=0;a<e.length;a++){var n=e[a];n.editable=!1,n.deleted=!1,t.push(n)}i.groups=t})}()}function d(e){i.selectedAllImage=!1,i.groupid=e,c();var t=1==i.index;s.getResources("image",i.currentPage,t,{year:i.year,month:i.month,uniacid:i.uniacid,dest_dir:i.dest_dir,global:i.global,groupid:e}).then(function(e){i.images=e.items,i.pager=a.trustAsHtml(e.pager)})}i.year="0",i.month="0",i.years=function(){for(var e=(new Date).getFullYear(),t=[],a=0;a<10;a++)t.push(e-a);return t}(),i.months=function(){for(var e=[],t=1;t<=12;t++)e.push(t);return e}(),i.selectedAllImage=!1,i.groupid=-1,i.editable=!1,i.config=o,i.role=window.sysinfo.role,""!=i.config.typeName&&null!=i.config.typeName&&null!=i.config.typeName||(i.config.typeName="平台"),i.isLocal=function(){return 1==i.index},i.loadData=function(){u()},i.onIndexChange=function(e){2!=e&&(u(),c())},i.itemClick=function(e){if(!i.converting){e.selected=!e.selected;var t=l().length==i.images.length;i.selectedAllImage=t}},i.ok=function(){var e=l();if(0<e.length)return!i.multiple||i.needConvert()?(e[0].selected=!0,void i.convert(e[0])):void n(e);$(window).trigger("resource_canceled")},c(),i.fetchNetwork=function(){!function(e,t){util.loading("网络图片转化中..."),s.netWorkconvert(e,t,"image").then(function(e){util.loaded(),n([e])},function(){!function(e){util.message(e,"")}("网络图片转化失败"),util.loaded()})}(i.netWorkurl,2==i.needType)},i.$on("image_page_change",function(e,t){i.setCurrentPage(t)}),i.updateUploadUrl=function(){c()},i.timeToDate=function(e){return new Date(1e3*e)},i.getTitle=function(e){return i.isLocal?e.filename:e.attachment},i.getImage=function(e){return"url("+e.url+")"},i.search=function(){i.currentPage=1,u()},i.delSel=function(){var e=r();0!=e.length?1<e.length&&!i.isLocal()?util.message("微信图片只支持单张删除"):i.isLocal()?s.delMuti(e,"image",i.isLocal(),{uniacid:i.uniacid}).then(function(){util.message("删除成功","","success"),u()},function(e){util.message(e.message)}):s.delItem(e[0],"image",i.isLocal(),i.uniacid).then(function(){util.message("删除成功","","success"),u()},function(e){util.message(e.message)}):util.message("请选择要删除的图片")},i.delItem=function(e,t){t.stopPropagation(),util.confirm(function(){i.isLocal()?s.delMuti(e.id,"image",i.isLocal(),{uniacid:i.uniacid}).then(function(){util.message("删除成功","","success"),u()},function(e){util.message(e.message)}):s.delItem(e.id,i.resourceType,1==i.index,i.uniacid).then(function(){i.loadData()},function(e){util.message(e.message)})},function(){return!1},"删除不可恢复确认删除吗？")},i.selectedAll=function(e){for(var t=0;t<i.images.length;t++)i.images[t].selected=e},i.loadAll=function(){i.setCurrentPage(1),d(-1)},i.loadNoGroup=function(){i.setCurrentPage(1),d(0)},i.loadImages=function(e){i.setCurrentPage(1),d(e.id)},i.addGroup=function(e){var t=e,a=1==i.index,n={uniacid:o.uniacid?o.uniacid:0};s.addGroup(t,a,n).then(function(e){i.groups.push({name:t,id:e.id,editable:!1,deleted:!1,changed:!1})})},i.editGroup=function(e){var t=1==i.index,a={uniacid:o.uniacid?o.uniacid:0};s.changeGroup(e,t,a).then(function(){})},i.doEditGroup=function(e){e.editable=!e.editable,i.loadImages(e)},i.editing=function(e){e.editing=!0},i.edited=function(e){e.editing=!1,e.editable=!1,i.editGroup(e)},i.cancelEditing=function(e){e.editing=!1,e.editable=!1},i.doAddGroup=function(){i.addGroup("未命名")},i.delGroup=function(e){$("#categoryEditModal").hide(),e.deleted=!0;var t=1==i.index,a={uniacid:o.uniacid?o.uniacid:0};s.delGroup(e.id,t,a).then(function(){i.loadAll()})},i.moveToGroup=function(e){var t=1==i.index,a=r();if(0!=a.length){var n={uniacid:o.uniacid?o.uniacid:0};s.moveToGroup(a,e.id,t,n).then(function(){util.message("移动成功","","success"),d(e.id)})}else util.message("请选择图片后移动")},u()}]),添加了html代码之后 由于缺少样式文件 得去 web\resource\css\common.css 中新增 css 样式
#newUploaderImg.cardimage .tab-content,#newUploaderImg.module .tab-content,#newUploaderImg.video .tab-content,#newUploaderImg.voice .tab-content,.uploader-modal.cardimage .tab-content,.uploader-modal.module .tab-content,.uploader-modal.video .tab-content,.uploader-modal.voice .tab-content {
width:100%;
padding:15px;
float:none
}
#newUploaderImg.cardimage #material-list-pager,#newUploaderImg.module #material-list-pager,#newUploaderImg.video #material-list-pager,#newUploaderImg.voice #material-list-pager,.uploader-modal.cardimage #material-list-pager,.uploader-modal.module #material-list-pager,.uploader-modal.video #material-list-pager,.uploader-modal.voice #material-list-pager {
float:right;
height:64px;
padding-bottom:15px;
padding-right:15px
}
#newUploaderImg.cardimage .material-body,.uploader-modal.cardimage .material-body {
padding:0;
position:relative;
overflow-y:hidden
}
#newUploaderImg.cardimage .tab-content,.uploader-modal.cardimage .tab-content {
height:344px;
padding:15px 7px
}
#newUploaderImg.cardimage .tab-content .history .img-list,.uploader-modal.cardimage .tab-content .history .img-list {
margin:0
}
#newUploaderImg.cardimage .category,.uploader-modal.cardimage .category {
width:170px;
height:344px;
overflow-y:auto;
border-right:1px solid #e8e9eb;
background:#f4f5f9;
float:left
}
#newUploaderImg.cardimage .category .add,.uploader-modal.cardimage .category .add {
line-height:44px;
text-align:center;
background:#fff;
border-bottom:1px solid #e8e9eb
}
#newUploaderImg.cardimage .category li,.uploader-modal.cardimage .category li {
line-height:44px;
background:0 0
}
#newUploaderImg.cardimage .category li:hover .name .setting,.uploader-modal.cardimage .category li:hover .name .setting {
display:block
}
#newUploaderImg.cardimage .category li .wi-file,.uploader-modal.cardimage .category li .wi-file {
color:#edce86;
margin-right:10px
}
#newUploaderImg.cardimage .category .head .navbar-left>li:hover,#newUploaderImg.cardimage .category li.active,#newUploaderImg.cardimage .category li:hover,.head #newUploaderImg.cardimage .category .navbar-left>li:hover,.head .uploader-modal.cardimage .category .navbar-left>li:hover,.uploader-modal.cardimage .category .head .navbar-left>li:hover,.uploader-modal.cardimage .category li.active,.uploader-modal.cardimage .category li:hover {
background:#fff
}
#newUploaderImg.cardimage .category li .name,.uploader-modal.cardimage .category li .name {
width:100%;
padding:0 30px 0 20px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
position:relative;
cursor:pointer
}
#newUploaderImg.cardimage .category li .name .setting,.uploader-modal.cardimage .category li .name .setting {
position:absolute;
right:2px;
top:0;
cursor:pointer;
color:#3296fa;
display:none
}
#newUploaderImg.cardimage .category li input,.uploader-modal.cardimage .category li input {
display:inline-block;
width:90px
}
#newUploaderImg.cardimage .category li .edit,.uploader-modal.cardimage .category li .edit {
padding:0 20px;
border-top:1px solid #f5f5f5;
display:none
}
#newUploaderImg.cardimage .category li .edit.show,.uploader-modal.cardimage .category li .edit.show {
display:block
}
#newUploaderImg.cardimage .category li .edit a,.uploader-modal.cardimage .category li .edit a {
display:inline-block;
margin:0 5px
}
#newUploaderImg.cardimage .category li .edit a .cut-list .item.apply-show:before,#newUploaderImg.cardimage .category li .edit a .ext-apply-list .ext-apply-item.apply-show:before,#newUploaderImg.cardimage .category li .edit a .wi,.cut-list #newUploaderImg.cardimage .category li .edit a .item.apply-show:before,.cut-list .uploader-modal.cardimage .category li .edit a .item.apply-show:before,.ext-apply-list #newUploaderImg.cardimage .category li .edit a .ext-apply-item.apply-show:before,.ext-apply-list .uploader-modal.cardimage .category li .edit a .ext-apply-item.apply-show:before,.uploader-modal.cardimage .category li .edit a .cut-list .item.apply-show:before,.uploader-modal.cardimage .category li .edit a .ext-apply-list .ext-apply-item.apply-show:before,.uploader-modal.cardimage .category li .edit a .wi {
font-size:14px
}
#newUploaderImg.cardimage .img-container,.uploader-modal.cardimage .img-container {
padding:10px 10px 41px;
flex-wrap:wrap;
margin-left:171px;
max-height:460px;
overflow-y:auto
}
#newUploaderImg.cardimage .img-container .item,.uploader-modal.cardimage .img-container .item {
flex:none;
position:relative;
width:calc(20% - 20px);
margin:10px;
text-align:center;
vertical-align:middle;
background-color:#eee;
background-size:contain;
background-repeat:no-repeat;
background-position:50% 50%
}
#newUploaderImg.cardimage .img-container .item:before,.uploader-modal.cardimage .img-container .item:before {
content:"";
display:inline-block;
padding-bottom:100%;
width:.1px;
vertical-align:middle
}
#newUploaderImg.cardimage .img-container .item .name,.uploader-modal.cardimage .img-container .item .name {
position:absolute;
bottom:0;
left:0;
width:100%;
line-height:34px;
background:rgba(0,0,0,.5);
color:#fff;
padding:0 20px;
text-align:left;
z-index:2
}
#newUploaderImg.cardimage .img-net,.uploader-modal.cardimage .img-net {
font-size:18px;
height:437px
}
#newUploaderImg.cardimage .img-net .img,.uploader-modal.cardimage .img-net .img {
width:auto;
height:200px;
margin:50px 0 20px 0
}
#newUploaderImg.cardimage .img-net input,.uploader-modal.cardimage .img-net input {
width:500px;
margin:10px auto
}
#newUploaderImg.cardimage .img-net .btn,.uploader-modal.cardimage .img-net .btn {
width:120px;
margin:10px 0;
min-width:unset
}
#newUploaderImg.cardimage .selected-all,.uploader-modal.cardimage .selected-all {
float:left;
padding:7.5px 0
}在公共class文件中 新增 （true 为不显示 false 为显示 ）用于操作按钮的显示隐藏
'minicard'=>true
文件位置在 \framework\class\account\weixin.account.class.php
显示效果
在 \framework\builtin\core\module.php 文件中 进行数据的处理
添加好两个显示的模块
public $modules = array('basic', 'news', 'image', 'music', 'voice', 'video', 'wxcard', 'keyword', 'module');
public $tablename = array(
'basic' => 'basic_reply',
'news' => 'news_reply',
'image' => 'images_reply',
'music' => 'music_reply',
'voice' => 'voice_reply',
'video' => 'video_reply',
'wxcard' => 'wxcard_reply',
'keyword' => 'basic_reply',
'miniprogrampage' => 'miniprogrampage_reply',
'cardimage' => 'miniprogrampage_reply',
);在 fieldsFormDisplay 方法中 新增小程序卡片封面数据的处理 新增一个回复内容表
case 'cardimage':
foreach ($replies[$key] as &$img_value) {
$img = pdo_get('wechat_attachment', array('media_id' => $img_value['media_id']), array('attachment'));
$img_value['img_url'] = tomedia($img['attachment'], true);
}
unset($img_value);
break;
在 fieldsFormSubmit 方法中 添加插入数据的处理
case 'miniprogrampage':
if(!empty($replies)) {
// foreach ($replies as $reply) {
pdo_insert($tablename, array('rid' => $rid, 'title' => $replies[0], 'appid' => $replies[1], 'pagepath' => $replies[2]));
// }
}
break;
case 'cardimage':
if(!empty($replies)) {
foreach ($replies as $reply) {
pdo_update($tablename, array('media_id' => trim(htmlspecialchars_decode($reply),'"')),array('rid' => $rid));
}
}
break;
表结构 表名为（ims_miniprogrampage_reply）
在\framework\builtin\core\processor.php中新增 小程序卡片 获取回复内容
private function miniprogrampage_respond(){
$sql = "SELECT * FROM" . tablename('miniprogrampage_reply'). " WHERE `rid` in({$this->rule}) ORDER BY RAND() LIMIT 1";
$reply = pdo_fetch($sql);
if (empty($reply)) {
return false;
}
$reply['title'] = htmlspecialchars_decode($reply['title']);
$reply['appid'] = htmlspecialchars_decode($reply['appid']);
$reply['pagepath'] = htmlspecialchars_decode($reply['pagepath']);
$reply['media_id'] = htmlspecialchars_decode($reply['media_id']);
return $reply;
}\framework\class\account\account.class.php 中新增 （返回 生成xml的数据数组 无法使用xml 返回小程序卡片 ）
protected function respMiniprogrampage($data){
if (empty($data)) {
return error(-1, 'Invaild value');
}
$img = pdo_get('wechat_attachment', array('media_id' => $data['media_id']), array('attachment'));
$response = array();
$response['FromUserName'] = $this->message['to'];
$response['ToUserName'] = $this->message['from'];
$response['MsgType'] = 'miniprogrampage';
$response['Title'] = $data['title'];
$response['AppId'] = $data['appid'];
$response['PagePath'] = $data['pagepath'];
$response['ThumbUrl'] = tomedia($img['attachment'], true);
$response['ThumbMediaId'] = $data['media_id'];
return $response;
}在api.php 文件中
process 方法 需要对回复类型进行处理
cardimage 类型由于没有对他进行处理 而且 cardimage 是和 miniprogrampage 在一起的 所以有将 cardimage 删除
if (!empty($param['reply_type'])){
foreach ($param['reply_type'] as $k=>$v){
if ($v == 'cardimage'){
unset($param['reply_type'][$k]);
}
}
}最后 在start 方法中 使用小程序客服接口发送消息
// 发送小程序卡片消息
if($response['MsgType'] == 'miniprogrampage'){
$account_api = WeAccount::create($_GET['id']);
$custom = array(
'touser' => $message['fromusername'],
'msgtype' => 'miniprogrampage',
'miniprogrampage' => array(
'title' => ($response['Title']), //小程序卡片的标题
'appid' => $response['AppId'], //小程序的appid，要求小程序的appid需要与公众号有关联关系
'pagepath' => $response['PagePath'], //小程序的页面路径，跟app.json中一样
'thumb_media_id' => $response['ThumbMediaId'], //小程序卡片图片的素材ID，小程序卡片图片建议大小为520*416
)
);
$result = $account_api->sendCustomNotice($custom);
// var_dump($result);
}else{
echo $resp;
}注意 WeAccount::create 方法中 会由于 $_W 全局变量中 $_W['uniacid'] 的值 不存在导致 报错 需要手动溯源并传值 方可使用
不喜勿喷，新手一个 如无法使用请在评论下留言
转载请标明出处
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
