html form checkcode,checkcode.html

兑换码检测后台

* {

box-sizing: border-box;

}

.container {

margin-top: 100px;

}

em {

font-style: normal;

}

.infobox li #sure {

display: none;

margin-left: 15px;

}

.surebox .layui-m-layerbtn span[yes] {

color: #f00;

}

@media only screen and (min-width: 100px) and (max-width: 640px) {

form {

height: 75px;

}

.input-group {

float: left;

width: calc(100% - 74px);

}

#checkBtn {

float: right;

}

.imglist {

width: 100%;

max-width: 325px;

margin: 0 auto;

}

.imglist .imgbox {

position: relative;

width: 100%;

border: 1px solid #999999;

padding: 5px;

margin: 10px 0;

border-radius: 5px;

overflow: hidden;

}

.imglist .imgbox:hover p {

transform: translateY(35px);

}

.imglist .imgbox img {

width: 100%;

border-radius: 5px;

}

.imglist .imgbox p {

position: absolute;

bottom: 5px;

left: 5px;

width: calc(100% - 10px);

height: 30px;

line-height: 30px;

background: rgba(0, 0, 0, .5);

text-align: center;

color: #fff;

margin: 0;

border-bottom-right-radius: 5px;

border-bottom-left-radius: 5px;

transition: transform .3s;

}

}

@media only screen and (min-width: 641px) and (max-width: 1920px) {

form {

display: block;

width: 1000px;

margin: 0 auto;

height: 150px;

border: 1px solid #f0f0f0;

padding: 58px;

margin-bottom: 50px;

}

form .input-group {

width: 700px;

float: left;

margin-right: 80px;

}

form button {

float: left;

}

.infobox {

width: 1000px;

margin: 0 auto;

}

.infobox li {

padding: 10px 55px;

}

.imglist {

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

width: 1000px;

margin: 0 auto;

flex-wrap: wrap;

justify-content: space-around;

}

.imglist .imgbox {

position: relative;

width: 325px;

border: 1px solid #999999;

padding: 5px;

margin: 5px 0;

border-radius: 5px;

overflow: hidden;

}

.imglist .imgbox:hover p {

transform: translateY(35px);

}

.imglist .imgbox img {

width: 100%;

border-radius: 5px;

}

.imglist .imgbox p {

position: absolute;

bottom: 5px;

left: 5px;

width: calc(100% - 10px);

height: 30px;

line-height: 30px;

background: rgba(0, 0, 0, .5);

text-align: center;

color: #fff;

margin: 0;

border-bottom-right-radius: 5px;

border-bottom-left-radius: 5px;

transition: transform .3s;

}

}

兑换码

查看

• 兑换状态：确认消费
• 兑换类型：
• 生成时间：
• 消费时间：

菜品展示

var foodslist = [{

type: 1, //500分

img: 'images/pb4.png',

food: ['“极品羔羊肉” 1份', '“麻辣鸳鸯锅” 1份']

},

{

type: 2, //1000分

img: 'images/pb3.png',

food: ['“龙利鱼” 1份', '“豆腐皮” 1份', '“油炸花生米” 1份']

},

{

type: 3, //2000分

img: 'images/pb2.png',

food: ['“极品肥牛” 1份', '“生菜” 1份', '“宽粉” 1份', '“腐竹” 1份']

},

{

type: 4, //3500分

img: 'images/pb1.png',

food: ['“手打牛肉丸” 1份', '“田园时蔬” 1份', '“鸭血” 1份', '“香豆腐” 1份', '“鹌鹑蛋” 1份', '“精品五花肉” 1份']

}

]

$("#checkBtn").on('click', function() {

if(!$.trim($("#exchangeCode").val()) == "") {

getinfo();

} else {

layer.open({

content: '请先输入兑换码',

skin: 'msg',

time: 2

});

}

})

//获取兑换信息

function getinfo() {

$.ajax({

url: cpj.ajaxUrl + '/act/selectPrizeCodeInfo.json',

data: {

prizeCode: $.trim($("#exchangeCode").val())

},

success: function(data) {

if(data.responseHead.code == 200) {

var result = data.responseBody.prize;

var status, type;

if(result.status == 1) {

status = '未消费';

$("#sure").off("click");

$("#sure").show().on('click', function() {

layer.open({

content: '确认消费？',

btn: ['朕确认了', '点错了'],

className: 'surebox',

yes: function(index) {

if($.trim($("#exchangeCode").val()) != "") {

usePrizeCode();

} else {

layer.open({

content: '请先输入兑换码',

skin: 'msg',

time: 2

});

}

}

});

});

} else {

status = '已消费';

$("#sure").hide()

}

switch(Number(result.type)) {

case 1:

type = '500 分值菜品';

break;

case 2:

type = '1000 分值菜品';

break;

case 3:

type = '2000 分值菜品';

break;

case 4:

type = '3500 分值菜品';

break;

default:

type = '未知';

break;

}

$(".infobox li").eq(0).find("em").text(status);

$(".infobox li").eq(1).find("em").text(type);

$(".infobox li").eq(2).find("em").text(result.createTime);

$(".infobox li").eq(3).find("em").text(result.usedTime ? result.usedTime : "");

$("#imglist").empty();

foodslist[Number(result.type) - 1].food.forEach(function(item, index) {

var box = '

';

box += '';

box += '

' + item + '

';

$("#imglist").append(box);

});

} else {

layer.open({

content: data.responseHead.msg,

skin: 'msg',

time: 2

});

}

}

});

}

//使用兑换码

function usePrizeCode() {

cpj.ajax({

url: '/act/usePrizeCode.json',

data: { prizeCode: $.trim($("#exchangeCode").val()) },

success: function(data) {

layer.open({

content: '使用成功',

end: function() {

getinfo();

}

});

},

error: function(code, msg) {

layer.open({

content: msg,

skin: 'msg',

time: 2

});

}

})

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史