mobileclient/v2_0_0_C/coupon/myOrder.html

267 lines
11 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>
2022-09-27 16:46:22 +08:00
<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/api2_0.js"></script>
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/myOrder.css" />
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/tabbar.css">
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/payPop.css">
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/tabbar.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/payPop.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/modelPop.js"></script>
2022-09-21 17:30:39 +08:00
</head>
<body>
<div id="app">
<!-- 弹出提示 -->
2022-09-21 17:30:39 +08:00
<img class="backPresTy" @click="backHandler"
src=" https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<div class="content">
2022-09-27 16:46:22 +08:00
<div class="content-item" v-for="item in orderList" :key="item.order_number">
<div class="top">
2022-09-28 16:35:26 +08:00
<p class="time">{{item.update_time}}</p>
2022-10-09 15:56:28 +08:00
<p class="status" :style="{color:statusColor(item.status)}">{{item.status_text}}
</p>
</div>
<div class="middle">
2022-10-09 14:40:53 +08:00
<img :src="filterImgSrc(item)" alt="">
<div class="right">
<div class="title_originalPrice">
2022-09-27 16:46:22 +08:00
<p class="title">{{item.product_name}}</p>
<p class="originalPrice">¥{{item.official_price}}</p>
</div>
2022-09-27 16:46:22 +08:00
<p class="id">订单编号:{{item.order_number}}</p>
2022-09-21 17:30:39 +08:00
</div>
</div>
<div class="bottom">
2022-09-27 16:46:22 +08:00
<p class="money">实付金额:¥<span>{{item.pay_amount}}</span></p>
<p class="button" @click="immediatelyPay(item)" v-show="item.status===6">立即支付</p>
2022-10-09 15:45:38 +08:00
<!-- 立减金待领取 -->
<p class="button" @click="goExchange(item)" v-show="item.status===1&&item.type===2">去兑换</p>
<!-- 立减金领取过期 -->
<p class="button filter" v-show="item.status===5&&item.type===2">去兑换</p>
</div>
2022-09-21 17:30:39 +08:00
</div>
2022-09-28 14:28:03 +08:00
<!-- 空状态 -->
<div class="empty" v-if="!orderList.length">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/order-empty.png" alt="">
2022-09-28 14:28:03 +08:00
<p>暂无订单</p>
</div>
2022-09-21 17:30:39 +08:00
</div>
<model-pop :show.sync="popShow" :title="popTitle" :status="popStatus" :text="popText" :bottom_text="bottomText"
@backFunction="backFunction">
</model-pop>
<!-- 单条弹出框 -->
<div class="prompt" :class="toastShow?'proactive':''">
{{this.toastTip}}
</div>
<tab-component :current="2" v-if="goodsCount>1"></tab-component>
<!-- 支付弹窗 -->
<pay-pop :show.sync="show" :active="active" @payFunction="payFunction" :money="activeOrder.pay_amount" />
2022-09-21 17:30:39 +08:00
</div>
2022-09-21 17:30:39 +08:00
<script>
new Vue({
el: "#app",
data () {
return {
active: 2, /* 选择支付方式 */
show: false, /* 支付弹窗状态 */
2022-09-27 16:46:22 +08:00
limit: 50,
page: 1,
orderList: [],
activeOrder: {},
/* 提示框状态 */
popShow: false,
popTitle: '',
popText: '',
popStatus: 1 /*1 成功 2提示 3失败 */,
bottomText: '' /*1 成功 2提示 3失败 */,
goodsCount: 0,/* 商品数量 */
href: '',/* 支付链接 */
/* toast */
toastShow: '',
toastTip: ''
2022-09-21 17:30:39 +08:00
}
},
2022-09-21 18:35:54 +08:00
components: {
tabComponent,
payPop,
modelPop
2022-09-21 18:35:54 +08:00
},
2022-09-27 16:46:22 +08:00
created () {
2022-09-28 15:11:12 +08:00
this.getOrderList()
2022-10-08 18:06:14 +08:00
this.goodsCount = localStorage.getItem('goodsCount');
2022-09-27 16:46:22 +08:00
},
2022-09-21 17:30:39 +08:00
methods: {
/* 根据不同状态展示 订单样式和表现 */
2022-10-09 15:56:28 +08:00
statusColor (status) {
const colorArray = ['#f28542', '#f28542', '#44D27D', '#fd553d', '#fd553d', '#aaaaaa', '#fd553d'];
return colorArray[status];
2022-10-09 14:40:53 +08:00
},
/* 图标分流 */
filterImgSrc (item) {
const redirectType = item.goods.entity.channel
if (item.type === 1) {
return item.show_url
} else {
if (redirectType === 1) {
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/zfbreduce.png'
}
if (redirectType === 2) {
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/wxreduce.png'
}
2022-09-21 17:30:39 +08:00
}
},
/* 返回 */
2022-09-21 17:30:39 +08:00
backHandler () {
window.location.replace('./couponCollection.html');
},
/* 立即支付按钮 */
immediatelyPay (item) {
this.activeOrder = item;
this.show = true
this.active = item.pay_type === 5 ? 1 : 2
},
/* 去支付 */
2022-09-28 11:32:32 +08:00
payFunction ({ payType, isSupport }) {
/* payType 1:微信 2:支付宝 */
/* 后端 微信是5 */
this.active = payType === 2 ? 1 : 5
this.show = false
/* 设置支付类型 */
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.popFunction({ title: '温馨提示', text: message, status: 2, b_text: '我知道了', show: true })
if (!this.popShow) {
2022-10-08 16:33:44 +08:00
this.toPage()
}
return
}
if (code === 200) {
this.getOrderList()
this.payRealFunction(isSupport)
}
})
} else {
this.payRealFunction(isSupport)
}
},
/* 调用支付 */
payRealFunction (isSupport) {
req.axiosGet(`/key/coupon/createPay/${this.activeOrder.order_number}`).then(({ code, data, message }) => {
if (code === -1) {
this.popFunction({ title: '温馨提示', text: message, status: 2, b_text: '我知道了', show: true })
if (!this.popShow) {
2022-10-08 16:33:44 +08:00
this.toPage()
}
return
}
/* 支付宝跳转链接 */
if (code === 200) {
/* 判断浏览器 */
if (isSupport) {
this.popFunction({ title: '温馨提示', text: `请在其他浏览器打开链接`, status: 2, b_text: '点击复制', show: true })
this.href = data
return
} else {
window.location.href = data
}
}
})
},
/* 统一控制弹窗 */
popFunction ({ title, text, status, b_text, show }) {
this.popTitle = title
this.popText = text
this.popStatus = status
this.bottomText = b_text
this.popShow = show
},
/* 去兑换 */
goExchange (item) {
2022-09-28 15:05:37 +08:00
window.location.replace('./couponCollection.html');
},
/* 请求订单数据 */
2022-09-28 15:11:12 +08:00
getOrderList () {
2022-10-08 18:06:14 +08:00
const key = localStorage.getItem('key')
req.axiosGet(`/key/order/${key}`, { page: this.page, limit: this.limit }).then(({ data, code, message }) => {
if (code === -1) {
this.popFunction({ title: '温馨提示', text: message, status: 2, b_text: '我知道了', show: true })
if (!this.popShow) {
2022-10-08 16:33:44 +08:00
this.toPage()
}
return
}
2022-10-09 15:45:38 +08:00
if (code === 200) this.orderList = data
2022-09-28 15:05:37 +08:00
})
2022-09-28 16:35:26 +08:00
},
2022-10-08 16:33:44 +08:00
/*跳转起始页面*/
toPage () {
2022-10-08 18:06:14 +08:00
let entryLink = localStorage.getItem('entryLink');
2022-10-08 16:33:44 +08:00
setTimeout(() => {
window.location.replace(entryLink);
}, 3000);
},
/* 弹窗回调 */
backFunction (type) {
if (this.bottomText === '点击复制' && type) {
var aux = document.createElement("input");
aux.setAttribute("value", this.href);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
this.openDialog('复制成功')
}
},
// 单条弹框
openDialog (tip) {
this.toastShow = true;
this.toastTip = tip;
setTimeout(() => {
this.toastShow = false;
this.toastTip = '';
}, 3000)
},
2022-09-21 17:30:39 +08:00
}
})
</script>
</body>
</html>