模板

<!-- 模板 -->
<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>&nbsp;&nbsp;地址信息:{{ 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实现弹出功能的更多相关文章

  1. layer父页获取弹出层输入框里面的值

    主要是因为修改功能,原来页面填写数据如图 改为 其中点击填写明细弹出框 填写完毕后点击确认返回,同事这里因为她是存的多表,所以点击确认就直接保存数据了,改的这个功能原本保存是整体保存,我就不想改原来的 ...

  2. layer:好看的弹出窗口

    layer是一款web弹层组件,只需在调用时简单地配置相关参数,即可轻松实现丰富与便捷的操作体验. 这是layer的官方地址,里面的使用介绍非常详细(http://layer.layui.com/) ...

  3. layer.js漂亮的弹出框

    它的官方网站:http://layer.layui.com/ 消息.确认框.ifame.自定义文本.旋转木马,都有按钮,是一款强大的js 弹出框: 以下为本人的简单介绍: layer.open({ t ...

  4. apiCloud结合layer实现动态数据弹出层

    css /** 我的二维码 begin **/ .aui-list .wechat-media { width: 3rem; } .wechat-middle { padding: 1.3em 3.2 ...

  5. 利用layer制作好看的弹出框

    一.下载layer http://layer.layui.com/ 二.效果图 三.代码 <!DOCTYPE html> <html lang="en"> ...

  6. 在vue中继续使用layer.js来做弹出层---切图网

    layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导 ...

  7. layer做阻塞式弹出层的方法

    今天遇到一个问题: layer弹出一个confirm提示窗,然后confirm还没有点击对应的按钮的时候,就已经执行了后续代码,我这里做出的判断是,是否需要进行后续操作,但是因为layer.confi ...

  8. Layer组件多个iframe弹出层打开与关闭及参数传递

    一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...

  9. 弹出层layer演示 以及在编写弹出层时遇到的错误

    实现的功能: 首先第一步 在官方下载layer的文件.layUI官网:http://layer.layui.com/     http://layer.layui.com/ layer文件的下载步骤如 ...

随机推荐

  1. 为什么CentOS7中找不到mysql服务,并且还找不到mysql.sock?

    个人遇到问题的经过: 我一个月前买了云主机,UI图画好了,前端也写了,php如何开发也想好了,结果呢,安装apache是成功了,mysql看样子也是安装成功了,但是mysql根本无法运行起来,搞得我无 ...

  2. Spring MVC请求流程

    Spring MVC 发起请求到前端控制器DispathServlet 前端控制器请求处理器映射器 handerMapping查找handler 处理器映射器handerMapping像前端控制器返回 ...

  3. vue知识总结

    vue: 渐进式JavaScript 框架 Vue项目构建 npm install -g vue vue init webpack-simple my-project cd my-project np ...

  4. python之dict(或对象)与json之间的互相转化

    在Python语言中,json数据与dict字典以及对象之间的转化,是必不可少的操作. 在Python中自带json库.通过import json导入. 在json模块有2个方法, loads():将 ...

  5. tab切换的效果——仿照今日头条APP的切换效果

    说点废话;不知道是哪一版本起头条的tab切换效果就变了,一直琢磨着这个事,去度娘那里也没有什么结果:正好这两天有空就尝试做了一下:用前端的技术来实现: 先看效果吧:上面的tab随着slide滑动,上面 ...

  6. shell里连接数据库,将结果输出到变量

    result=$(sqlplus -s 'ccc/ccc@21.96.34.34:1521'<<EOF ..... EOF )

  7. winform Combobox出现System.Data.DataRowView的解决的方法

    个人总结: 1.触发了SelectedIndexChanged事件时:comboBox1.DataSource = dt;要放在comboBox1.SelectedIndex = 0;的上面 comb ...

  8. 外网访问内网MariaDB数据库

    外网访问本地MariaDB数据库 本地安装了MariaDB数据库,只能在局域网内访问,怎样从公网也能访问内网MariaDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Mar ...

  9. 劳德巴赫下载kernel和文件系统时问题

    用劳德巴赫下载 kernel  dtb rootfs BOOT.bin 报错(记了个大概) Bad CRC Ramdisk image is corrupt or invalid 记得之前有人和我说r ...

  10. 16: vue + crypto-js + python前后端加密解密

    1.1 vue中使用crypto-js进行AES加密解密    参考博客:https://www.cnblogs.com/qixidi/p/10137935.html 1.初始化vue项目 vue i ...