Skip to content

S
SURPRISED
Commit 20d9f729 authored by zhengke's avatar zhengke
Browse files
Options

增加商城和奖券

parent 4c50937b
Hide whitespace changes
Inline Side-by-side
Showing with 329 additions and 12 deletions
css/shopping.css 0 → 100644
View file @ 20d9f729
/* 商城 */
.shangchengBox_bg{
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
position: fixed;
left: 0;
top: 0;
z-index: 10;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: url("../images/task/ass/shangcheng_bg.png");
background-attachment:fixed;
background-size: 100% 100%;
}
.shop_Content{
height: 50rem;
width: 40rem;
position: relative;
top: -1rem;
left: 0;
background: url("../images/task/ass/shangcheng_fangzi.png");
background-size: 100% 100%;
}
.shop_Content .item{
height: 15rem;
margin-bottom: 1.25rem;
overflow: hidden;
padding:0 0.8rem;
}
.shop_ContentMain{
width:70%;
position: absolute;
top:27.8rem;
left:16%;
height:21rem;
overflow-y: scroll;
}
.shop_List{
height:10rem;
margin:0 0.5rem 0.6rem 0;
width:47%;
float:left;
}
.Splist_Top{
width:100%;
height:5.5rem;
position: relative;
}
.Splist_Top img{
width:100%;
height:100%;
}
.Splist_Top_cishu{
min-width:6rem;
height:1.5rem;
line-height: 1.5rem;
position: absolute;
right:0;
top:0;
background-color: #FF7E4C;
color:#fff;
text-align: center;
font-size:12px;
padding:0 0.5rem;
}
.Split_Top_title{
width: 100%;
position: absolute;
bottom:0;
height:1.5rem;
line-height: 1.5rem;
color:black;
font-size:12px;
padding-left:0.5rem;
background:hsla(0,0%,100%,.5);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.Splist_btm{
background-color: #fff;
height:4.5rem;
}
.Sp_money{
color:#999999;
font-size:12px;
padding:0.5rem;
text-decoration: line-through;
}
.sp_cailiao{
position: relative;
width:1rem;
height:1.5rem;
top:0.2rem;
/* float:left; */
display: inline-block;
}
.sp_cailiao img{
width:100%;
height:100%;
}
.sp_cailiao span{
position: absolute;
top:-7px;
right:-8px;
width:1rem;
height:1rem;
background-color: #FF5656;
color:#fff;
text-align: center;
line-height: 1rem;
border-radius: 50%;
font-size:12px;
}
.shopCheng{
width:1rem;
height:1rem;
display: inline-block;
text-align: center;
line-height: 1rem;
border-radius: 50%;
background-color: #FF9415;
color:#fff;
margin:0 0.2rem;
}
.shopCheng:last-child{
display: none;
}
.hplistCont{
text-align: center;
}
#wodejiangquanBox{
position:fixed;
padding-top:5rem;
}
.wodejiangquanBox_bg{
padding: 8rem 1.5rem 2rem 1.5rem;
width: 95%;
height: 40rem;
background: url(../images/task/ass/jiangquan.png);
background-size: 100% 100%;
}
#wodejiangquanBox .wodejiangquanBox_bg .duihuan{
top: 12.5rem;
right: 0rem;
width: 3rem;
height: 3rem;
position: absolute;
}
#wodejiangquanBox .juanbox{
width: 100%;
height: 19rem;
overflow: scroll;
padding-top:1rem;
}
#wodejiangquanBox .duiItem{
width: 30.5%;
background: url('../images/task/ass/kuang.png');
background-size: 100% 100%;
height: 8rem;
padding:1rem 0rem;
box-sizing: border-box;
position: relative;
float: left;
margin:0 0.7rem 0.7rem 0;
}
#wodejiangquanBox .duiItem .cpnum{
position: absolute;
top: -1rem;
right: -0.5rem;
background: #FF5656;
width: 2rem;
height: 2rem;
border-radius: 50%;
color: #fff;
line-height: 2rem;
text-align: center;
}
#wodejiangquanBox .duiItem .imgDiv{
width: 100%;
height: 70%;
text-align: center;
}
#wodejiangquanBox .duiItem .spanDiv{
background: #1FA8B0;
color: #fff;
border-radius:16px;
font-size: 0.8rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
width: 75%;
margin:0 auto;
padding:0.1rem 0.5rem;
box-sizing: border-box;
margin-top: 2%;
}
#wodejiangquanBox .duiItem .imgDiv img{
height:100%;
}
\ No newline at end of file
css/task.css
View file @ 20d9f729
......@@ -109,7 +109,7 @@ img{
.none{
display: none;
}
#renwuBox,#bingqilingBox,#wodejiangquanBox,#wodeduihuanBox,#huodongshuoming,#qiandaoBox,#shangchengBox{
#renwuBox,#bingqilingBox,#wodejiangquanBox,#wodeduihuanBox,#huodongshuoming,#qiandaoBox{
width: 100%;
/* height: 100%; */
background: rgba(0, 0, 0, 0.5);
......@@ -122,7 +122,7 @@ img{
padding-top: 2rem;
bottom: 0
}
#renwuBox>div,#bingqilingBox>div,#wodejiangquanBox>div,#wodeduihuanBox>div,#huodongshuoming>div,#qiandaoBox>di,#shangchengBox>div{
#renwuBox>div,#bingqilingBox>div,#wodejiangquanBox>div,#wodeduihuanBox>div,#huodongshuoming>div,#qiandaoBox>di{
margin-top: 3rem;
}
#renwuBox ._bg{
......@@ -435,10 +435,10 @@ img{
#tips{
width: 100%;
background: rgba(0, 0, 0, 0);
position: absolute;
position: fixed;
left: 0;
top: 0;
z-index: 2020;
top: 2%;
z-index: 20000;
justify-content: center;
padding-top: 2rem;
bottom: 0;
......
html/task/home.html
View file @ 20d9f729
......@@ -18,7 +18,8 @@
<link rel="stylesheet" href="../../css/task.css">
<link rel="stylesheet" href="../../css/qiandao.css">
<link rel="stylesheet" href="../../css/bts/bootstrap.min.css">
<link rel="stylesheet" href="../../css/cssReset.css">
<link rel="stylesheet" href="../../css/cssReset.css">
<link rel="stylesheet" href="../../css/shopping.css">
</head>
<body class="choujiang">
......@@ -60,7 +61,7 @@
<div class="shangcehng">
<div class="row">
<img src="../../images/task/shangcehng.png" alt="">
<img class="duihuan" src="../../images/task/duihuan.png" alt="">
<img class="duihuan" onclick="showBox('shangchengBox')" src="../../images/task/duihuan.png" alt="">
</div>
</div>
</div>
......@@ -224,13 +225,27 @@
<!-- 商城 -->
<div id="shangchengBox" class="none">
<div class="shangchengBox_bg">
<div class="shop_Content">
<div class="shop_ContentMain">
</div>
</div>
</div>
</div>
<!-- 奖券 -->
<div id="wodejiangquanBox" class="none">
<div class="wodejiangquanBox_bg">
<img onclick="CloseqiandaoBox('wodejiangquanBox')" class="duihuan" src="../../images//task//ass/close4.png" alt="">
<div class="juanbox">
<div class="duiItem">
<div class="cpnum">x2</div>
<div class="imgDiv">
<img src="../../images/task/ass/bql_02.png" alt="">
</div>
<div class="spanDiv">
<span>空气进化器</span>
</div>
</div>
</div>
</div>
</div>
<!-- 兑换 -->
......@@ -261,14 +276,15 @@
<script type="text/javascript" src="../../js/awardRotate.js"></script>
<script type="text/javascript" src="../../js/bts/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/autosize.js"></script>
<script type="text/javascript" src="../../js/qiandao.js"></script>
<script type="text/javascript" src="../../js/qiandao.js"></script>
<script type="text/javascript" src="../../js/shopping.js"></script>
<script>
let TaskHistory = [], IceList = [], UserMaterials = [],
var TaskHistory = [], IceList = [], UserMaterials = [],
userIceList = [], activityId = 1, customerId = 1549,
taskId = 26, iceIndex = 0,UserFamilyInventory = {},
beginTime = '', endTime = '', ActivityInfo = '';
// let url = 'http://efficient.oytour.com/'
let url = getApiUrl().urlJava
var url = getApiUrl().urlJava
// 获取活动说明
getActivity()
function getActivity () {
......
js/shopping.js 0 → 100644
View file @ 20d9f729
let url2 = getApiUrl().urlJava
let shoppData = [];
var activityId =1;
getShppingList()
function getShppingList() { // 获取用户剩余抽奖次数
$.ajax({
type: "POST",
url: `${url2}/api/mactivity/getActivityGoods`,
contentType: "application/json",
data: getJavaData({ activityId: activityId }),
async: false,//使用同步的方式,true为异步方式
success: function (res) {
if (res.resultCode === 1) {
//console.log(res,'resss');
shoppData = res.data;
let str = '';
for(var i=0;i<shoppData.length;i++){
str+=`<div class="shop_List" onclick="setExchangeGoods(${shoppData[i].id})">
<div class="Splist_Top">
<img src="${shoppData[i].imgs[0]}" alt="">
<div class="Splist_Top_cishu">可兑换：${shoppData[i].limited}次</div>
<div class="Split_Top_title">${shoppData[i].name}</div>
</div>
<div class="Splist_btm">
<div class="Sp_money">市场价：¥${shoppData[i].marketPrice}</div><div class="hplistCont">
`;
for(var j=0;j<shoppData[i].rules.length;j++){
str+= `
<div class="sp_cailiao">
<img src="${getImgSrc(shoppData[i].rules[j])}" alt="">
<span>${shoppData[i].rules[j].amount}</span>
</div>
<i class="shopCheng">×</i>
`
}
str+= `</div></div>
</div>`
}
$(".shop_ContentMain").html(str);
}
},
error: function (res) {
}
});
}
function getImgSrc(obj){
if (obj.mName === '蒙牛冰淇淋') {
return `../../images/task/ice2/c_ice_4.png`
} else if (obj.mName === 'DQ冰淇淋') {
return `../../images/task/ice2/c_ice_3.png`
} else if (obj.mName === '明治冰淇淋') {
return `../../images/task/ice2/c_ice_2.png`
} else if (obj.mName === '和路雪冰淇淋') {
return `../../images/task/ice2/c_ice_1.png`
} else if (obj.mName === '哈根达斯冰淇淋') {
return `../../images/task/ice2/c_ice_5.png`
} else if (obj.mName === '冰淇淋全家桶') {
return `../../images/task/ice2/c_ice_quan.png`
}
}
//点击兑换
function setExchangeGoods(goodsId){
let msg = {
activityId: activityId,
goodsId: goodsId
}
$.ajax({
type: "POST",
url: `${url2}/api/mactivity/setExchangeGoods`,
contentType: "application/json",
data: getJavaData(msg),
async: false,//使用同步的方式,true为异步方式
success: function (res) {
if (res.resultCode === 1) {
showTips("兑换成功")
}else{
showTips(res.message)
}
},
error: function (res) {
showTips(res.message);
}
});
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment