mobileclient/v1_5_0_C/myOrder.html

150 lines
5.7 KiB
HTML
Raw Normal View History

2022-09-21 17:30:39 +08:00
<!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" />
2022-09-21 18:35:54 +08:00
<script src="./tabbar.js"></script>
<link rel="stylesheet" href="./tabbar.css">
<script src="./payPop.js"></script>
<link rel="stylesheet" href="./payPop.css">
2022-09-21 17:30:39 +08:00
</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>
2022-09-21 17:30:39 +08:00
</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>
2022-09-21 17:30:39 +08:00
</div>
</div>
2022-09-21 18:35:54 +08:00
<tab-component :current="2"></tab-component>
<!-- 支付弹窗 -->
2022-09-23 12:10:46 +08:00
<pay-pop :show.sync="show" :active="active" @payFunction="payFunction" />
2022-09-21 17:30:39 +08:00
</div>
<script>
new Vue({
el: "#app",
data () {
return {
active: 1, /* 选择支付方式 */
show: false, /* 支付弹窗状态 */
2022-09-21 17:30:39 +08:00
orderList: [
{
2022-09-23 10:17:21 +08:00
id: 'A-Za-z0-986481945398',
2022-09-21 17:30:39 +08:00
status: 0,
money: 5,
originalPrice: 100,
time: '2021-08-31 160000',
title: '满10元减5元券',
src: './img/couponbg.png',
},
{
2022-09-23 10:17:21 +08:00
id: 'B-84812238963189152',
2022-09-21 17:30:39 +08:00
status: 1,
money: 5,
originalPrice: 100,
time: '2021-08-31 160000',
2022-09-21 17:30:39 +08:00
title: '满10元减5元券',
src: './img/couponbg.png',
2022-09-21 17:30:39 +08:00
},
{
id: 0,
2022-09-21 17:30:39 +08:00
status: 2,
money: 5,
originalPrice: 100,
time: '2021-08-31 160000',
2022-09-21 17:30:39 +08:00
title: '满10元减5元券',
src: './img/couponbg.png',
2022-09-21 17:30:39 +08:00
},
{
id: 0,
2022-09-21 17:30:39 +08:00
status: 3,
money: 5,
originalPrice: 100,
time: '2021-08-31 160000',
2022-09-21 17:30:39 +08:00
title: '满10元减5元券',
src: './img/couponbg.png',
2022-09-21 17:30:39 +08:00
}
]
}
},
2022-09-21 18:35:54 +08:00
components: {
tabComponent,
payPop
2022-09-21 18:35:54 +08:00
},
2022-09-21 17:30:39 +08:00
methods: {
/* 根据不同状态展示 订单样式和表现 */
2022-09-21 17:30:39 +08:00
statusColor (status) {
let colorValue = {}
2022-09-21 17:30:39 +08:00
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
},
/* 返回 */
2022-09-21 17:30:39 +08:00
backHandler () {
window.location.replace('./couponCollection.html');
},
/* 去支付 */
2022-09-23 12:10:46 +08:00
payFunction ({ type, isSupport }) {
2022-09-23 11:19:55 +08:00
this.active = type
this.show = false
2022-09-23 11:19:55 +08:00
alert(isSupport ? '不持支' : '支持')
},
/* 去兑换 */
goExchange (item) {
console.log(item);
2022-09-21 17:30:39 +08:00
}
}
})
</script>
</body>
</html>