150 lines
5.8 KiB
HTML
150 lines
5.8 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" />
|
||
<script src="./tabbar.js"></script>
|
||
<link rel="stylesheet" href="./tabbar.css">
|
||
<script src="./payPop.js"></script>
|
||
<link rel="stylesheet" href="./payPop.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">
|
||
<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" @click="show=true" v-show="item.status===2">立即支付</p>
|
||
<p class="button" @click="goExchange(item)" v-show="item.status===3">去兑换</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<tab-component :current="2"></tab-component>
|
||
|
||
<!-- 支付弹窗 -->
|
||
<pay-pop :show="show" :active="active" @setShow="show = false" @payFunction="payFunction" :pay="false" />
|
||
</div>
|
||
<script>
|
||
new Vue({
|
||
el: "#app",
|
||
data () {
|
||
return {
|
||
active: 1, /* 选择支付方式 */
|
||
show: false, /* 支付弹窗状态 */
|
||
orderList: [
|
||
{
|
||
id: 'A-Za-z0-986481945398',
|
||
status: 0,
|
||
money: 5,
|
||
originalPrice: 100,
|
||
time: '2021-08-31 16：00：00',
|
||
title: '满10元减5元券',
|
||
src: './img/couponbg.png',
|
||
},
|
||
{
|
||
id: 'B-84812238963189152',
|
||
status: 1,
|
||
money: 5,
|
||
originalPrice: 100,
|
||
time: '2021-08-31 16：00：00',
|
||
title: '满10元减5元券',
|
||
src: './img/couponbg.png',
|
||
},
|
||
{
|
||
id: 0,
|
||
status: 2,
|
||
money: 5,
|
||
originalPrice: 100,
|
||
time: '2021-08-31 16：00：00',
|
||
title: '满10元减5元券',
|
||
src: './img/couponbg.png',
|
||
},
|
||
{
|
||
id: 0,
|
||
status: 3,
|
||
money: 5,
|
||
originalPrice: 100,
|
||
time: '2021-08-31 16：00：00',
|
||
title: '满10元减5元券',
|
||
src: './img/couponbg.png',
|
||
}
|
||
]
|
||
}
|
||
},
|
||
|
||
components: {
|
||
tabComponent,
|
||
payPop
|
||
},
|
||
|
||
methods: {
|
||
/* 根据不同状态展示 订单样式和表现 */
|
||
statusColor (status) {
|
||
let colorValue = {}
|
||
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 = '待支付'
|
||
break;
|
||
case 3:
|
||
colorValue.color = '#4193EE'
|
||
colorValue.text = '已支付'
|
||
break;
|
||
}
|
||
return colorValue
|
||
},
|
||
|
||
/* 返回 */
|
||
backHandler () {
|
||
window.location.replace('./couponCollection.html');
|
||
},
|
||
|
||
/* 去支付 */
|
||
payFunction (va) {
|
||
this.active = va
|
||
this.show = false
|
||
alert(`确认付款 选择的是${va === 1 ? '微信' : '支付宝'}`)
|
||
},
|
||
|
||
/* 去兑换 */
|
||
goExchange (item) {
|
||
console.log(item);
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
</body>
|
||
|
||
</html> |