layer结合art实现弹出功能
模板
<!-- 模板 -->
<script id="render-tpl" type="text/html">
<table class="table table-bordered">
<thead>
<tr>
<th>产品ID</th>
<th>图片</th>
<th>标题</th>
<th>折扣</th>
<th>原价</th>
<th>价格</th>
<th>数量</th>
</tr>
</thead>
<tbody>
{{ each data.product_list }}
<tr>
<th scope="row">{{ $value['product_id'] }}</th>
<td><img src="{{ $value['title_img'] }}" width="50"></td>
<td>{{ $value['title'] }}</td>
<td>{{ $value['discount'] }}</td>
<td>{{ $value['product_original_price'] }}</td>
<td>{{ $value['product_price'] }}</td>
<td>{{ $value['count'] }}</td>
</tr>
{{ /each }}
</tbody>
</table>
{{ if data.address_info.length !== 0 }}
<div class="jumbotron">
<h4> 地址信息:{{ data.address_info['consignee'] }},{{ data.address_info['telephone'] }}
{{ data.address_info['province_str'] }}
{{ data.address_info['city_str'] }}
{{ data.address_info['district_str'] }}
{{ data.address_info['detail'] }}
</h4>
</div>
{{ /if }}
</script>
js
$(".info_view").on('click',function () {
let id = $(this).data('id');
$.ajax({
type:'POST',
url:'ajaxGetOrderDetail',
data: {id: id},
dataType:'json',
success:function(data){
if(data.errno == 0){
let html = template('render-tpl', {data:data.data});
layer.open({
title : '查看订单详情',
type : 1,
skin : 'layui-layer-rim', //加上边框
area : ['1200px', 'auto'], //宽高
content : html
});
}else{
alert(data.errdesc);
return false;
}
}
});
});
php获取数据
/**
* 获取订单详情
*/
public function ajaxGetOrderDetail() {
if (!$id = $_POST['id']){
$this->json->printOutError('缺少参数',10001);
}
$order = M('order');
$order_info = $order->where(['id'=>$id])->field('id,uid,order_num,total_payed_price,total_price,save_price,status,create_time,order_time')->find();
if (!$order_info) {
$this->printOutError('订单不存在',10002);
}
$order_info['order_time'] = date('Y-m-d H:i',$order_info['order_time']);
$order_info['create_time'] = date('Y-m-d H:i',$order_info['create_time']);
$order_product = M('order_product');
$product = M('product');
// 获取订单商品
$order_product_list = $order_product->where(['order_num'=>$order_info['order_num']])->select();
foreach ($order_product_list as $ok=> &$ov) {
$product_info = $product->where(['id'=>$ov['product_id']])->find();
$ov['title'] = $product_info['title'];
$ov['title_remark'] = $product_info['title_remark'];
$ov['title_img'] = $product_info['title_img'];
$ov['is_discount'] = (double)$ov['discount'] < 1 ? 1 : 0;
}
$out_data = [];
$out_data['order_info'] = $order_info;
$out_data['product_list'] = $order_product_list;
// 获取地址信息
$addressService = new AddressService();
$order_address_info = $addressService->getAddressByOrderNum($order_info['order_num']);
$out_data['address_info'] = $order_address_info;
$userService = new UserService();
$user_info = $userService->getUserInfoByUid($order_info['uid']);
$out_data['user_info'] = $user_info;
$this->printOutSuccess($out_data);
}
很方便,很实用。
layer结合art实现弹出功能的更多相关文章
- layer父页获取弹出层输入框里面的值
主要是因为修改功能,原来页面填写数据如图 改为 其中点击填写明细弹出框 填写完毕后点击确认返回,同事这里因为她是存的多表,所以点击确认就直接保存数据了,改的这个功能原本保存是整体保存,我就不想改原来的 ...
- layer:好看的弹出窗口
layer是一款web弹层组件,只需在调用时简单地配置相关参数,即可轻松实现丰富与便捷的操作体验. 这是layer的官方地址,里面的使用介绍非常详细(http://layer.layui.com/) ...
- layer.js漂亮的弹出框
它的官方网站:http://layer.layui.com/ 消息.确认框.ifame.自定义文本.旋转木马,都有按钮,是一款强大的js 弹出框: 以下为本人的简单介绍: layer.open({ t ...
- apiCloud结合layer实现动态数据弹出层
css /** 我的二维码 begin **/ .aui-list .wechat-media { width: 3rem; } .wechat-middle { padding: 1.3em 3.2 ...
- 利用layer制作好看的弹出框
一.下载layer http://layer.layui.com/ 二.效果图 三.代码 <!DOCTYPE html> <html lang="en"> ...
- 在vue中继续使用layer.js来做弹出层---切图网
layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导 ...
- layer做阻塞式弹出层的方法
今天遇到一个问题: layer弹出一个confirm提示窗,然后confirm还没有点击对应的按钮的时候,就已经执行了后续代码,我这里做出的判断是,是否需要进行后续操作,但是因为layer.confi ...
- Layer组件多个iframe弹出层打开与关闭及参数传递
一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...
- 弹出层layer演示 以及在编写弹出层时遇到的错误
实现的功能: 首先第一步 在官方下载layer的文件.layUI官网:http://layer.layui.com/ http://layer.layui.com/ layer文件的下载步骤如 ...
随机推荐
- 为什么CentOS7中找不到mysql服务,并且还找不到mysql.sock?
个人遇到问题的经过: 我一个月前买了云主机,UI图画好了,前端也写了,php如何开发也想好了,结果呢,安装apache是成功了,mysql看样子也是安装成功了,但是mysql根本无法运行起来,搞得我无 ...
- Spring MVC请求流程
Spring MVC 发起请求到前端控制器DispathServlet 前端控制器请求处理器映射器 handerMapping查找handler 处理器映射器handerMapping像前端控制器返回 ...
- vue知识总结
vue: 渐进式JavaScript 框架 Vue项目构建 npm install -g vue vue init webpack-simple my-project cd my-project np ...
- python之dict(或对象)与json之间的互相转化
在Python语言中,json数据与dict字典以及对象之间的转化,是必不可少的操作. 在Python中自带json库.通过import json导入. 在json模块有2个方法, loads():将 ...
- tab切换的效果——仿照今日头条APP的切换效果
说点废话;不知道是哪一版本起头条的tab切换效果就变了,一直琢磨着这个事,去度娘那里也没有什么结果:正好这两天有空就尝试做了一下:用前端的技术来实现: 先看效果吧:上面的tab随着slide滑动,上面 ...
- shell里连接数据库,将结果输出到变量
result=$(sqlplus -s 'ccc/ccc@21.96.34.34:1521'<<EOF ..... EOF )
- winform Combobox出现System.Data.DataRowView的解决的方法
个人总结: 1.触发了SelectedIndexChanged事件时:comboBox1.DataSource = dt;要放在comboBox1.SelectedIndex = 0;的上面 comb ...
- 外网访问内网MariaDB数据库
外网访问本地MariaDB数据库 本地安装了MariaDB数据库,只能在局域网内访问,怎样从公网也能访问内网MariaDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Mar ...
- 劳德巴赫下载kernel和文件系统时问题
用劳德巴赫下载 kernel dtb rootfs BOOT.bin 报错(记了个大概) Bad CRC Ramdisk image is corrupt or invalid 记得之前有人和我说r ...
- 16: vue + crypto-js + python前后端加密解密
1.1 vue中使用crypto-js进行AES加密解密 参考博客:https://www.cnblogs.com/qixidi/p/10137935.html 1.初始化vue项目 vue i ...