产品缩略图模块代码

原创 2018-12-28 17:18:50 244
摘要:ProductPic控制器代码:<?php namespace app\admin\controller; use app\admin\controller\Common; use think\facade\Request; use think\facade\Session; use app\admin\model\ProductModel

ProductPic控制器代码:

<?php
namespace app\admin\controller;

use app\admin\controller\Common;
use think\facade\Request;
use think\facade\Session;
use app\admin\model\ProductModel;
use app\admin\model\ProductPicModel;

class ProductPic extends Common
{
	public function index()
	{
		$pics = ProductPicModel::order('id','asc')->paginate(1);
		$this->view->pics = $pics;
		return $this->fetch();
	}

	public function add()
	{
		$product = ProductModel::all();
		$this->view->product = $product;
		return $this->fetch();
	}

	public function upload()
	{
		//获取上传的图片信息
		$file = Request::file('file');
		//验证图片信息并移动到指定目录
		if($info = $file->validate(['ext'=>'jpg,jpeg,png,gif'])->move('upload')){
			$fileName = '/upload/'.$info->getSaveName();
			return json([1,'上传成功','data'=>$fileName]);
		}else{
			return $file->getError();
		}
	}

	public function DoAdd()
	{
		//获取提交数据
		$data = Request::param();
		$data['time'] = time();
		$data['username'] = Session::get('username');

		if(ProductPicModel::create($data)){
			return ['res'=>1,'msg'=>'添加成功'];
		}else{
			return ['res'=>0,'msg'=>'添加失败'];
		}
	}

	public function del()
	{
		$id = Request::param('id');
		if(ProductPicModel::destroy($id)){
			return ['res'=>1,'msg'=>'删除成功'];
		}else{
			return ['res'=>0,'msg'=>'删除失败'];
		}
	}


}

ProductPicModel模型代码:

<?php
namespace app\admin\model;

use think\Model;

class ProductPicModel extends Model
{
	protected $table = 'product_pic';
	protected $pk = 'id';
}

index.html模板代码:

{include file="public/head"}
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <xblock>
        
        <button class="layui-btn" onclick="x_admin_show('添加缩略图','{:url(\'ProductPic/add\')}')"><i class="layui-icon"></i>添加</button>
        <span class="x-right" style="line-height:40px">共有数据:88 条</span>
      </xblock>
      <table class="layui-table">
        <thead>
          <tr>
            <th>图片ID</th>
            <th>所属产品</th>
            <th>图片</th>
            <th>发布管理员</th>
            <th>发布日期</th>
            <th >操作</th>
            </tr>
        </thead>
        <tbody>
        {volist name="pics" id="pic"}
          <tr>
            <td>{$pic.id}</td>
            <td>{:GetProTitle($pic.product_id)}</td>
            <td><img src="{$pic.pic}" alt=""></td>
            <td>{$pic.username}</td>
            <td>{$pic.time|date="Y-m-d"}</td>
            
            <td class="td-manage">
              <a title="删除" onclick="member_del(this,'{$pic.id}')" href="javascript:;">
                <i class="layui-icon">&#xe640;</i>
              </a>
            </td>
          </tr>
        {/volist}
         
        </tbody>
      </table>
      <div class="page">
        <div>
          {$pics|raw}
        </div>
      </div>

    </div>
    <script>
      layui.use('laydate', function(){
        var laydate = layui.laydate;
        
        //执行一个laydate实例
        laydate.render({
          elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
          elem: '#end' //指定元素
        });
      });

     
      /*用户-删除*/
      function member_del(obj,id){
          layer.confirm('确认要删除吗?',function(index){
              //发异步删除数据
              $.get('{:url("del")}','id='+id,function(data){
                  if(data.res == 1){
                    $(obj).parents("tr").remove();
                    layer.msg(data.msg,{icon:1,time:1000});
                  }
              });
              
          });
      }



    
    </script>

  </body>

</html>

add.html模板代码:

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>
            X-admin v1.0
        </title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="__ADMIN__/css/x-admin.css" media="all">
    </head>

    
    <body>
        <div class="x-body">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label for="news_id" class="layui-form-label">
                        <span class="x-red">*</span>选择产品
                    </label>
                    <div class="layui-input-inline">
                      <select name="product_id" id="product_id">
                      {volist name="product" id="pro"}  
                          <option value="{$pro.id}">{$pro.title}</option>
                      {/volist}                              
                      </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="link" class="layui-form-label">
                        <span class="x-red">*</span>新闻图片
                    </label>
                    <button type="button" class="layui-btn" id="test1">
                      <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>

                </div>
                <div class="layui-form-item">
                    <label  class="layui-form-label">缩略图
                    </label>
                    <img id="LAY_demo_upload" width="400" src="">
                </div>
            
                
                
                
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                    </label>
                    <button  class="layui-btn" lay-filter="add" lay-submit="">
                        增加
                    </button>
                </div>
            </form>
        </div>
        <script src="__ADMIN__/js/layui.js" charset="utf-8">
        </script>
        <script src="__ADMIN__/js/x-layui.js" charset="utf-8">
        </script>
         <script src="__ADMIN__/plugins/layui/layui.js" charset="utf-8">
        </script>
        <!-- <script>
        layui.use('upload', function(){
          var upload = layui.upload;
           
          //执行实例
          var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '{:url("upload")}' //上传接口
            ,done: function(res){
              //上传完毕回调
            }
            ,error: function(){
              //请求异常回调
            }
          });
        });
        </script> -->
        <script>
            layui.use(['form','layer','upload'], function(){
                $ = layui.jquery;
              var form = layui.form
              ,layer = layui.layer;

              var upload = layui.upload;
               
              //执行实例
              var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,url: '{:url("upload")}' //上传接口
                ,done: function(res){
                  //上传完毕回调
                  // console.log(res);
                  $('#LAY_demo_upload').attr('src',res.data);
                  

                }
                ,error: function(){
                  //请求异常回调
                }
              });

              // //图片上传接口
              // layui.upload({
              //   url: '' //上传接口
              //   ,success: function(res){ //上传成功后的回调
              //       console.log(res);
              //     $('#LAY_demo_upload').attr('src',res.url);
              //   }
              // });
            

              //监听提交
              form.on('submit(add)', function(data){
                // console.log(data);
                //发异步,把数据提交给php
                $.post('{:url("DoAdd")}',{
                    'product_id':$('#product_id').val(),
                    'pic':$('#LAY_demo_upload').attr('src')
                },function(data){
                    if(data.res == 1){
                        layer.alert(data.msg, {icon: 6},function () {
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                        });
                    }else{
                        layer.alert(data.msg, {icon: 6},function () {
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                        });
                    }
                });
               
                return false;
              });
              
              
            });
        </script>

    </body>

</html>


批改老师:天蓬老师批改时间:2018-12-28 17:33:50
老师总结:return ProductPicModel::destroy($id) ? ['res'=>1,'msg'=>'删除成功'] : ['res'=>0,'msg'=>'删除失败'] ; 写到一行, 其实也不错的

发布手记

热门词条