132 lines
4.9 KiB
HTML
132 lines
4.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<meta name="viewport"
|
|||
|
|
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover" />
|
|||
|
|
<title>我的订单</title>
|
|||
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/vue.min.js?v=1367936144322" type="text/javascript"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
<link rel="stylesheet" href="./myOrder.css" />
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div id="app">
|
|||
|
|
<img class="backPresTy" @click="backHandler"
|
|||
|
|
src=" https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
|
|||
|
|
<div class="content-item" v-for="item in orderList" :key="item.id">
|
|||
|
|
<div class="top">
|
|||
|
|
<p class="time">{{item.time}}</p>
|
|||
|
|
<p class="status" :style="{color:statusColor(item.status).color}">{{statusColor(item.status).text}}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="middle">
|
|||
|
|
<img :src="item.src" alt="">
|
|||
|
|
<div class="right">
|
|||
|
|
<div class="title_originalPrice">
|
|||
|
|
<p class="title">{{item.title}}</p>
|
|||
|
|
<p class="originalPrice">￥{{item.originalPrice}}</p>
|
|||
|
|
</div>
|
|||
|
|
<p class="id">订单编号：{{item.id}}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bottom">
|
|||
|
|
<p class="money">实付金额：￥<span>{{item.money}}</span></p>
|
|||
|
|
<p class="button" v-show="statusColor(item.status)?.button">{{statusColor(item.status).button}}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script>
|
|||
|
|
new Vue({
|
|||
|
|
el: "#app",
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
orderList: [
|
|||
|
|
{
|
|||
|
|
id: 0,
|
|||
|
|
status: 0,
|
|||
|
|
money: 5,
|
|||
|
|
originalPrice: 100,
|
|||
|
|
time: '2021-08-31 16：00：00',
|
|||
|
|
title: '满10元减5元券',
|
|||
|
|
src: './img/couponbg.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
status: 1,
|
|||
|
|
money: 5,
|
|||
|
|
full: 10,
|
|||
|
|
time: '2022.09.13 12: 00: 00',
|
|||
|
|
title: '满10元减5元券',
|
|||
|
|
src: './img/couponbg.png'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
status: 2,
|
|||
|
|
money: 5,
|
|||
|
|
full: 10,
|
|||
|
|
time: '2022.09.13 12: 00: 00',
|
|||
|
|
title: '满10元减5元券',
|
|||
|
|
src: './img/couponbg.png'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
status: 3,
|
|||
|
|
money: 5,
|
|||
|
|
full: 10,
|
|||
|
|
time: '2022.09.13 12: 00: 00',
|
|||
|
|
title: '满10元减5元券',
|
|||
|
|
src: './img/couponbg.png'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
moreHandle (id) {
|
|||
|
|
if (id !== this.more) {
|
|||
|
|
this.more = id
|
|||
|
|
} else {
|
|||
|
|
this.more = null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
statusColor (status) {
|
|||
|
|
let colorValue = {
|
|||
|
|
color: '',
|
|||
|
|
text: '',
|
|||
|
|
button: ''
|
|||
|
|
}
|
|||
|
|
switch (status) {
|
|||
|
|
case 0:
|
|||
|
|
colorValue.color = '#FD553D'
|
|||
|
|
colorValue.text = '充值失败(已退款)'
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
colorValue.color = '#44D27D'
|
|||
|
|
colorValue.text = '充值成功'
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
colorValue.color = '#F28542'
|
|||
|
|
colorValue.text = '待支付'
|
|||
|
|
colorValue.button = '立即支付'
|
|||
|
|
break;
|
|||
|
|
case 3:
|
|||
|
|
colorValue.color = '#4193EE'
|
|||
|
|
colorValue.text = '已支付'
|
|||
|
|
colorValue.button = '去兑换'
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
return colorValue
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
backHandler () {
|
|||
|
|
window.location.replace('./couponCollection.html');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|