161 lines
5.8 KiB
HTML
161 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
<script>
|
|
var orderData = [
|
|
{
|
|
name: '路易斯女装旗舰店',
|
|
shopList: [{
|
|
img: '../img/22/产品图.png',
|
|
info: {
|
|
shopName: '真丝连衣裙2019春夏新款杭州大牌气质修……',
|
|
color: '黑白',
|
|
size: 'L',
|
|
price: '160.00',
|
|
number: '1'
|
|
}
|
|
}
|
|
|
|
],
|
|
remark: '12333',
|
|
postage: '0',
|
|
amount: '1000.00'
|
|
},
|
|
{
|
|
name: '路易斯女装旗舰店',
|
|
shopList: [{
|
|
img: '../img/22/产品图.png',
|
|
info: {
|
|
shopName: '真丝连衣裙2019春夏新款杭州大牌气质修……',
|
|
color: '黑白',
|
|
size: 'L',
|
|
price: '160.00',
|
|
number: '1'
|
|
}
|
|
},
|
|
{
|
|
img: '../img/22/产品图.png',
|
|
info: {
|
|
shopName: '真丝连衣裙2019春夏新款杭州大牌气质修……',
|
|
color: '黑白',
|
|
size: 'L',
|
|
price: '160.00',
|
|
number: '2'
|
|
}
|
|
}
|
|
|
|
],
|
|
remark: '12333',
|
|
postage: '0',
|
|
amount: '1000.00'
|
|
},
|
|
{
|
|
name: '路易斯女装旗舰店',
|
|
shopList: [{
|
|
img: '../img/22/产品图.png',
|
|
info: {
|
|
shopName: '真丝连衣裙2019春夏新款杭州大牌气质修……',
|
|
color: '黑白',
|
|
size: 'L',
|
|
price: '160.00',
|
|
number: '1'
|
|
}
|
|
},
|
|
{
|
|
img: '../img/22/产品图.png',
|
|
info: {
|
|
shopName: '真丝连衣裙2019春夏新款杭州大牌气质修……',
|
|
color: '黑白',
|
|
size: 'L',
|
|
price: '160.00',
|
|
number: '2'
|
|
}
|
|
},
|
|
{
|
|
img: '../img/22/产品图.png',
|
|
info: {
|
|
shopName: '真丝连衣裙2019春夏新款杭州大牌气质修……',
|
|
color: '黑白',
|
|
size: 'L',
|
|
price: '160.00',
|
|
number: '2'
|
|
}
|
|
}
|
|
|
|
],
|
|
remark: '',
|
|
postage: '0',
|
|
amount: '1000.00'
|
|
}
|
|
]
|
|
var box = $('#goodsBox')
|
|
function createData() {
|
|
orderData.forEach((v, i) => {
|
|
inner(v,box)
|
|
})
|
|
}
|
|
|
|
function inner(v,dom){
|
|
dom .innerHTML += `
|
|
<li class="goods">
|
|
<div class="goods_title">
|
|
<img class="l" src="../img/22/矢量智能对象.png" alt="">
|
|
<span>${v.name}</span>
|
|
<img class="r" src="../img/22/-e-右.png" alt="">
|
|
</div>
|
|
<ul>
|
|
${
|
|
v.shopList.map(key => { return `
|
|
<li class="information">
|
|
<img src="${ key.img }" alt="">
|
|
<div class="des">
|
|
<p>${key.info.shopName}</p>
|
|
<div class="up">
|
|
<span>颜色：${key.info.color}</span>
|
|
<span>尺码：${key.info.size}</span>
|
|
</div>
|
|
<div class="down">
|
|
<div class="number">
|
|
￥<span class="one">${key.info.price.split('.')[0]}</span>
|
|
<span class="two">.${key.info.price.split('.')[1]}</span>
|
|
</div>
|
|
<div class="amount">X${key.info.number}</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
` })
|
|
}
|
|
</ul>
|
|
<div class="remarkes">
|
|
<p class="three">订单备注</p>
|
|
<p class="four">${ v.remark ? v.remark : '有什么想对商家留言的可以在这里说' }</p>
|
|
</div>
|
|
<div class="cost">
|
|
<div class="cost_up">
|
|
<p>优惠抵用</p>
|
|
<span>-￥5</span>
|
|
</div>
|
|
<div class="cost_down">
|
|
<p>快递费用</p>
|
|
<span>${v.postage>0?v.postage:'免费包邮'}</span>
|
|
</div>
|
|
</div>
|
|
<div class="money">
|
|
<p>商品金额</p>
|
|
<span>￥${v.amount}</span>
|
|
</div>
|
|
</li>
|
|
`
|
|
}
|
|
window.onload = createData
|
|
|
|
</script>
|
|
</html> |