浏览所有拍品
浏览所有拍品可以很直观的看到拍品的外观，用户可以同过外观来确定对拍品作出评价和方便用户选择拍品，更重要的是用户可以通过外观快速确定自己到底喜欢哪件拍品，对喜欢的拍品可立刻进行提交参拍申请。同时当你选择拍品时还会显示拍品的一些详细信息，例如：拍品名称、起价、当前拍品属于哪一场拍卖会、拍卖会开拍时间等。
界面效果图：
页面JSP代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set value="${pageContext.request.contextPath}" scope="page" var="ctx"></c:set>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>拍品信息</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="${ctx}/bootstrap/css/materialize.css" type="text/css"></link>
<link rel="stylesheet" href="${ctx}/bootstrap/css/media-hover-effects.css" type="text/css"></link>
<link rel="stylesheet" href="${ctx}/bootstrap/css/style.css" type="text/css"></link>
<link rel="stylesheet" href="${ctx}/bootstrap/css/sweetalert.css" type="text/css"></link>
<script type="text/javascript" src="${ctx}/js/sweetalert.min.js"></script>
<script type="text/javascript" src="${ctx}/js/sweetalert-dev.js"></script>
<script type="text/javascript" src="${ctx}/bootstrap/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="${ctx}/bootstrap/js/materialize.js"></script>
<script type="text/javascript">
//拍品id
var id=0;
$(function(){
if(${maxId} > 0){
//把拍品id传过来是为了获取拍卖会，从而获取同场拍卖会的所有拍品
//还通过拍品ID检验当前拍品是否提交过参拍申请
id=${maxId};
}
if('${path}' !=''){
//获取图片路径
$("#auctionGood").attr("src","${path}");
}
if('${agname}' !=''){
//获取拍品名称
$("#agname").html("${agname}");
}
if('${auctiontitle}' !=''){
//获取拍卖会标题
$("#title").html("${auctiontitle}");
}
if('${begintime}' !=''){
//获取拍卖会开拍时间
$("#time").html("${begintime}");
}
if('${auctiontypename}' !=''){
//获取拍品分类
$("#type").html("${auctiontypename}");
}
if('${sp}' !=null){
//获取拍品起价
$("#sp").html("${sp}");
}
//图片的单击事件
$(".image").click(function(){
//获取拍品id
id=$(this).siblings("span").eq(0).html();
auctionGoodInfo();//调用Ajax的方法
//获取拍品图片的src地址
$("#auctionGood").attr("src",$(this).attr("src"));
});
});
//获取拍品信息
function auctionGoodInfo(){
$.ajax({
type:"post",//请求方式
url:"${ctx}/auctionGoodType/queryAuctionGoodInfo.do",//发送请求地址
dataType:"json",//发送数据给数据库的数据类型
data:{//发送给数据库的数据
id:id
},
//请求成功后的回调函数
success:function(data){//data的数据为list类型数据才可以有以下操作
//解析返回值
$.each(data,function(index,entry){
//获取拍品名称
$("#agname").html(entry.agname);
//获取拍卖会标题
$("#title").html(entry.auctiontitle);
//获取拍卖会开拍时间
$("#time").html(entry.begintime);
//获取拍品分类
$("#type").html(entry.auctiontypename);
//获取拍品起价
$("#sp").html(entry.sp);
});
}
});
}
//进入参拍申请界面
function toappliction(){
if(id>0){
if('${user.name}' !=''&&'${user.idnumber}' !=''&&'${user.telephone}' !=''){
var userid=${user.userid};
$.ajax({
type:"post",
url:"${ctx}/business/checkAuctionGood.do",
dataType:"json",
data:{
agid:id,
userid:userid
},
success:function(data){
if(data !=''){
swal("您已对本件拍品提交过申请参拍","","warning");
}else{
location.href="${ctx}/business/toapplication.do?id="+id;
}
}
});
}else{
swal({
title:"个人信息未完善",
text:"请去完善个人信息，再继续",
type: "warning",
allowEscapeKey: true,
showCancelButton: true,
confirmButtonText: "确定",
cancelButtonText: "取消",
},function(isConfirm){
if(isConfirm){
//完善个人信息
location.href="${ctx}/dataLookUp/toedit.do"
}else{
//取消后关闭提示框
swal.close();
}
});
}
}else{
swal("请选择拍品再继续！！！","","warning");
}
}
//进入拍卖会
function intoAuction(){
$.ajax({
type:"post",//请求方式
url:"${ctx}/business/checkAuctionGood.do",//发送请求地址
dataType:"json", //发送数据给数据库的数据类型
data:{//发送给数据库的数据
agid:id,
userid:${user.userid}
},success:function(data){//请求成功后的回调函数
//解析返回值
if(data !=''){
$.each(data,function(index,entry){
if(entry.sumbond>0){
if(entry.stateid==1){
//进入拍卖大厅
window.open('${ctx}/business/intoAuction.do?applicationid='+entry.applicationid);
}else{
swal("您的参拍申请尚未审核，我们会尽快进行审核，请耐心等待。","","warning");
}
}else{
swal({
title:"当前拍品尚未缴纳保证金",
text:"请去缴纳保证金后，再继续",
type: "warning",
allowEscapeKey: true,
showCancelButton: true,
confirmButtonText: "确定",
cancelButtonText: "取消",
},function(isConfirm){
if(isConfirm){
//去交保证金
location.href="${ctx}/business/getDepositInfo.do?applicationid="+entry.applicationid;
}else{
//取消后关闭提示框
swal.close();
}
});
}
});
}else{
swal("您尚未提交当前拍品的参拍申请，请去提交参拍申请。","","warning");
}
}
});
}
</script>
</head>
<body>
<c:if test="${!empty auctionGoodVos}">
<div style="width:65%;height:100%;float:left;border:2px solid #b2ebf2">
<div style="width:100%;height:5%;background:#f5f5f5">
</div>
<div style="width:100%;height:95%;">
<span style="display:block;text-align:center;padding:5px;font-family:'华文隶书';font-size:30px;">拍品名称：<span id="agname">和田玉</span></span>
<button class="btn" style="margin-left:220px;float:left;" οnclick="toappliction()">申请参拍</button>
<button class="btn" style="margin-left:50px;" οnclick="intoAuction()">进入竞拍</button>
</br>
</br>
<div style="margin-left:5%;width:90%;height:7%;background:#f5f5f5">
<span style="font-size:18px;display:block;text-align:center;padding:5px;">本件拍品参加《<span id="title" style="color:red;">某某拍卖会</span>》，拍卖会将于<span id="time" style="color:red;">2017-01-09 10:30:25</span>开始</span>
</div>
</br>
<div style="margin-left:5%;width:90%;height:7%;background:#f5f5f5">
<div style="font-size:18px;display:block;text-align:center;padding:5px;">拍品分类：<span id="type">陶瓷</span> 拍品起价：<span id="sp">1000000</span>元</div>
</div>
<!-- data-caption="设置图片标题" class="materialboxed" -->
<img id="auctionGood" style="margin-left:5%;" class="materialboxed" width="655" height="296" src="${ctx}/bootstrap/images/gallary/1.jpg" />
</div>
</div>
<div style="width:33%;height:100%;float:right;border:2px solid #b2ebf2;">
<div style="width:100%;height:5%;background:#f5f5f5">
<span style="margin-left:10px;float:left;">参加竞拍的拍品</span>
</div>
<div style="width:100%;height:95%;overflow: auto;">
<div class="row">
<c:forEach items="${auctionGoodVos}" var="item">
<div class="col s12 m6 grid">
<img class="image" style="padding:10px;" width="165" height="100" src="${item.picture}" />
<span style="display: none;">${item.agid}</span>
<span>${item.agname}</span>
</div>
</c:forEach>
</div>
</div>
</div>
</c:if>
<c:if test="${empty auctionGoodVos}">
<div style="width:100%;htight:100%;display: block;text-align: center;font-size:40px;">
暂时还没有房产类的拍品。
</div>
</c:if>
</body>
</html>//${path}：获取图片路径；attr：改变src拍品图片路径
$("#auctionGood").attr("src","${path}");
<img id="auctionGood" style="margin-left:5%;" class="materialboxed" width="655" height="296" src="" />
3745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
