237 lines
9.4 KiB
HTML
237 lines
9.4 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>
|
|
<script type="text/javascript" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/axios.js?v=1367936144322">
|
|
</script>
|
|
<!-- <script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api1_4_0.js"></script> -->
|
|
<script src="./api1_4_0.js"></script>
|
|
<link rel="stylesheet" href="./myOrder.css" />
|
|
<link rel="stylesheet" href="./tabbar.css">
|
|
<link rel="stylesheet" href="./payPop.css">
|
|
<script src="./tabbar.js"></script>
|
|
<script src="./payPop.js"></script>
|
|
<script src="./modelPop.js"></script>
|
|
</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.order_number">
|
|
<div class="top">
|
|
<p class="time">{{item.update_time}}</p>
|
|
<p class="status" :style="{color:statusColor(item.status).color}">{{statusColor(item.status).text}}
|
|
</p>
|
|
</div>
|
|
<div class="middle">
|
|
<img :src="item.show_url" alt="">
|
|
<div class="right">
|
|
<div class="title_originalPrice">
|
|
<p class="title">{{item.product_name}}</p>
|
|
<p class="originalPrice">￥{{item.official_price}}</p>
|
|
</div>
|
|
<p class="id">订单编号：{{item.order_number}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<p class="money">实付金额：￥<span>{{item.pay_amount}}</span></p>
|
|
<p class="button" @click="immediatelyPay(item)" v-show="item.status===6">立即支付</p>
|
|
<p class="button" @click="goExchange(item)" v-show="item.status===4">去兑换</p>
|
|
</div>
|
|
</div>
|
|
<!-- 空状态 -->
|
|
<div class="empty" v-if="!orderList.length">
|
|
<img src="./img/order-empty.png" alt="">
|
|
<p>暂无订单</p>
|
|
</div>
|
|
</div>
|
|
|
|
<model-pop :show.sync="popShow" :title="popTitle" :status="popStatus" :text="popText"></model-pop>
|
|
|
|
<tab-component :current="2" v-if="goodsCount>1"></tab-component>
|
|
|
|
<!-- 支付弹窗 -->
|
|
<pay-pop :show.sync="show" :active="active" @payFunction="payFunction" :money="activeOrder.pay_amount" />
|
|
|
|
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: "#app",
|
|
data () {
|
|
return {
|
|
active: 1, /* 选择支付方式 */
|
|
show: false, /* 支付弹窗状态 */
|
|
limit: 50,
|
|
page: 1,
|
|
orderList: [],
|
|
activeOrder: {},
|
|
|
|
/* 提示框状态 */
|
|
popShow: false,
|
|
popTitle: '',
|
|
popText: '',
|
|
popStatus: 1 /*1 成功 2提示 3失败 */,
|
|
goodsCount: 0 /* 商品数量 */
|
|
}
|
|
},
|
|
|
|
components: {
|
|
tabComponent,
|
|
payPop,
|
|
modelPop
|
|
},
|
|
|
|
created () {
|
|
this.getOrderList()
|
|
this.goodsCount = sessionStorage.getItem('goodsCount');
|
|
},
|
|
|
|
methods: {
|
|
/* 根据不同状态展示 订单样式和表现 */
|
|
statusColor (status) {
|
|
let colorValue = {}
|
|
switch (status) {
|
|
/* 兑换码状态 */
|
|
case 3:
|
|
colorValue.color = '#FD553D'
|
|
colorValue.text = '充值失败(已退款)'
|
|
break;
|
|
case 2:
|
|
colorValue.color = '#44D27D'
|
|
colorValue.text = '充值成功'
|
|
break;
|
|
case 6:
|
|
colorValue.color = '#F28542'
|
|
colorValue.text = '待支付'
|
|
break;
|
|
|
|
/* 立减金状态 */
|
|
case 4:
|
|
colorValue.color = '#4193EE'
|
|
colorValue.text = '已支付'
|
|
break;
|
|
}
|
|
return colorValue
|
|
},
|
|
|
|
/* 返回 */
|
|
backHandler () {
|
|
window.location.replace('./couponCollection.html');
|
|
},
|
|
|
|
/* 立即支付按钮 */
|
|
immediatelyPay (item) {
|
|
this.activeOrder = item;
|
|
this.show = true
|
|
this.active = item.pay_type === 5 ? 1 : 2
|
|
},
|
|
|
|
/* 去支付 */
|
|
payFunction ({ payType, isSupport }) {
|
|
/* payType 1:微信 2:支付宝 */
|
|
/* 后端 微信是5 */
|
|
this.active = payType === 2 ? 1 : 5
|
|
this.show = false
|
|
|
|
/* 判断浏览器 */
|
|
if (isSupport) {
|
|
this.popTitle = '温馨提示'
|
|
this.popText = '请在其他浏览器打开该链接'
|
|
this.popStatus = 2
|
|
this.popShow = true
|
|
return
|
|
}
|
|
|
|
/* 设置支付类型 */
|
|
if (this.active !== this.activeOrder.pay_type) { /* 支付类型是否变化 */
|
|
req.axiosPut(`/key/order/setPayType/${this.activeOrder.order_number}/${this.active}`).then(({ code, message }) => {
|
|
if (code === -1) {
|
|
this.popTitle = '温馨提示'
|
|
this.popText = message
|
|
this.popStatus = 2
|
|
this.popShow = true
|
|
if (!this.popShow) {
|
|
window.location.replace('./index.html');
|
|
}
|
|
return
|
|
}
|
|
|
|
if (code === 200) {
|
|
this.getOrderList()
|
|
this.payRealFunction()
|
|
}
|
|
})
|
|
} else {
|
|
this.payRealFunction()
|
|
}
|
|
},
|
|
|
|
/* 调用支付 */
|
|
payRealFunction () {
|
|
req.axiosGet(`/key/coupon/createPay/${this.activeOrder.order_number}`).then(({ code, data, message }) => {
|
|
if (code === -1) {
|
|
this.popTitle = '温馨提示'
|
|
this.popText = message
|
|
this.popStatus = 2
|
|
this.popShow = true
|
|
if (!this.popShow) {
|
|
window.location.replace('./index.html');
|
|
}
|
|
return
|
|
}
|
|
|
|
if (code === 200) {
|
|
const div = document.createElement('div')//创建div
|
|
div.innerHTML = data//将返回的form 放入div
|
|
document.body.appendChild(div);
|
|
document.forms[0].submit();
|
|
}
|
|
})
|
|
},
|
|
|
|
/* 去兑换 */
|
|
goExchange (item) {
|
|
window.location.replace('./couponCollection.html');
|
|
},
|
|
|
|
/* 请求订单数据 */
|
|
getOrderList () {
|
|
const key = sessionStorage.getItem('key')
|
|
req.axiosGet(`/key/order/${key}`, { page: this.page, limit: this.limit }).then(({ data, code, message }) => {
|
|
if (code === -1) {
|
|
this.popTitle = '温馨提示'
|
|
this.popText = message
|
|
this.popStatus = 2
|
|
this.popShow = true
|
|
if (!this.popShow) {
|
|
window.location.replace('./index.html');
|
|
}
|
|
return
|
|
}
|
|
|
|
if (code === 200) {
|
|
data.map(item => {
|
|
if (item.type === 2 && item.status === 2) item.status = 4
|
|
if (item.type === 2 && item.status === 1) item.status = 6
|
|
})
|
|
this.orderList = data
|
|
}
|
|
})
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |