mobileclient/coupon/myOrder.html

380 lines
16 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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/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/common/tabbar.css">
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/tabbar.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/modelPop.js"></script>
</head>
<body>
<div id="app">
<!-- 弹出提示 -->
<img class="backPresTy" @click="backHandler" v-if="goodsCount<2"
src=" https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<p class="nav-title">订单</p>
<div id="refresh" @touchstart="touchStart($event)" @touchmove="touchMove($event)"
@touchcancel="touchEnd($event)" @touchend="touchEnd($event)">
<img v-show='!!loadShowHeight' class='img-lodging'
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/img-logding.png" alt="">
<div class="content" slot="content" @scroll="scrollBottom($event)">
<div class="content-item" v-for="item in orderList" :key="item.order_number" @click="toDetails(item)">
<div class="top">
<p class="time">{{item.update_time}}</p>
<p class="status" :style="{color:statusColor(item.status)}">{{item.status_text}}
</p>
</div>
<div class="middle">
<img :src="filterImgSrc(item)" 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>
<!-- 立即支付 -->
<div v-if="item.status==6" class="cancel-pay">
<p class="button" @click="immediatelyCancel(item)">取消订单</p>
<p class="button" @click="immediatelyPay(item)">立即支付</p>
</div>
<template v-if="item.type==2">
<!-- 立减金待领取 -->
<p class="button" @click="receiveFn(item)" v-if="item.status==0">去兑换</p>
<!-- 立减金领取过期 -->
<p class="button filter" @click="receiveFn(item)" v-if="item.status==5">去兑换
</p>
</template>
<template v-if="item.type==1">
<!-- 查看卡密 -->
<p class="button-card" @click="lookCard(item)"
v-if="item.status==2&&item.goods.product_type==2&&item.goods.card_show==2">查看卡密</p>
<!-- 款项状态 -->
<p class="pay_status" v-if="[2,3].includes(item.pay_status)&&item.status==3">
{{item.pay_status==2?'已支付':'已退款'}}</p>
</template>
</div>
</div>
<p class="noMore" v-if="total<limit&&orderList.length">没有更多了</p>
<!-- 空状态 -->
<div class="empty" v-if="!orderList.length">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/order-empty.png" alt="">
<p>暂无订单</p>
</div>
</div>
</div>
<model-pop :show.sync="popShow" :cancel="isCancel" :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>
</div>
<script>
new Vue({
el: "#app",
data () {
return {
limit: 15,
page: 1,
total: 0,
orderList: [],
activeOrder: {},
/* 提示框状态 */
popShow: false,
popTitle: '',
popText: '',
popStatus: 1 /*1 成功 2提示 3失败 */,
bottomText: '' /*1 成功 2提示 3失败 */,
goodsCount: 0,/* 商品数量 */
href: '',/* 支付链接 */
isCancel: false,
/* toast */
toastShow: '',
toastTip: '',
redirect: false,
/* 加载 */
scrollTop: 0,
startY: 0,
loadShowHeight: 0,
loadFlag: false,
};
},
components: {
tabComponent,
modelPop,
},
created () {
this.getOrderList();
this.goodsCount = localStorage.getItem('goodsCount');
this.scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
window.addEventListener('pageshow', () => {
!this.loadShowHeight && this.getOrderList();
});
},
methods: {
/* 根据不同状态展示 订单样式和表现 */
statusColor (status) {
const colorArray = ['#f28542', '#f28542', '#44D27D', '#fd553d', '#fd553d', '#aaaaaa', '#fd553d'];
return colorArray[status];
},
scrollBottom (e) {
let Scroll = e.target;
let scrollHeight = Scroll.scrollHeight - Scroll.clientHeight;
this.scrollTop = Scroll.scrollTop;
if (scrollHeight - Scroll.scrollTop < 100 && !this.loadFlag && this.total === this.limit) {
this.loadFlag = true;
this.page++;
this.getOrderList(true);
}
},
/* 以下三个方法是下拉刷新 */
touchStart (e) {
this.startY = e.targetTouches[0].pageY;
},
touchMove (e) {
if (this.scrollTop == 0) {
let moveDistance = e.targetTouches[0].pageY - this.startY;
if (moveDistance > 0 && moveDistance <= 80) {
this.loadShowHeight = moveDistance;
}
}
},
touchEnd () {
if (this.loadShowHeight >= 60) {
this.page = 1;
this.getOrderList();
} else {
this.loadShowHeight = 0;
}
},
/* 查看卡密 */
lookCard (item) {
sessionStorage.setItem("orderNumber", item.order_number);
window.location.href = '../orderDetails/cardOrder.html';
},
/*跳转详情*/
toDetails (order) {
sessionStorage.setItem('orderNumber', order.order_number);
switch (order.goods.product_type) {
case 1:
window.location.href = '../orderDetails/chargerOrder.html';
break;
case 2:
window.location.href = '../orderDetails/cardOrder.html';
break;
default:
break;
}
},
/* 图标分流 */
filterImgSrc (item) {
if (item.type === 1) {
return item.show_url;
} else {
const redirectType = item.goods.channel;
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';
}
}
},
/* 返回 */
backHandler () {
window.location.replace('./couponCollection.html');
},
/* 立即支付按钮 */
immediatelyPay (item) {
localStorage.setItem('goodsInfo', JSON.stringify(item));
window.location.href = `./settlement.html?orderNumber=${item.order_number}&payType=${item.pay_type}`;
},
/* 取消订单按钮 */
immediatelyCancel (item) {
this.isCancel = true;
this.activeOrder = item;
this.popFunction({ title: '温馨提示', text: '是否确认取消订单', status: 2, b_text: '', show: true });
},
/* 统一控制弹窗 */
popFunction ({ title, text, status, b_text, show }) {
this.popTitle = title;
this.popText = text;
this.popStatus = status;
this.bottomText = b_text;
this.popShow = show;
},
/* 请求订单数据 */
getOrderList (isLodging) {
/* 下拉 */
if (!isLodging) {
this.orderList = [];
this.loadShowHeight = true;
}
const token = localStorage.getItem('token');
req.axiosGet(`/key/order/${token}`, { page: this.page, limit: this.limit }).then(({ data, code, message }) => {
if (code === 403) {
this.popFunction({ title: '温馨提示', text: message, status: 2, b_text: '我知道了', show: true });
this.toPage(3);
return this.redirect = true;
}
/* 下拉 */
if (code === 200) {
this.total = data.length;
if (!isLodging) {
setTimeout(() => {
this.loadShowHeight = 0;
this.orderList = data;
}, 1 * 1000);
}
if (isLodging && this.page > 1) {
console.log(1);
this.orderList = this.orderList.concat(data);
this.loadFlag = false;
}
}
});
},
/*跳转起始页面*/
toPage (time = 1) {
let entryLink = localStorage.getItem('entryLink');
setTimeout(() => {
window.location.replace(entryLink);
}, time * 1000);
},
/* 弹窗回调 */
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('复制成功');
}
if (this.redirect) {
this.toPage();
}
/* 二次确认提示 */
if (this.isCancel && type === 2) {
const token = localStorage.getItem('token');
req.axiosPut(`/key/order/cancel/${this.activeOrder.order_number}?token=${token}`).then(({ code, message }) => {
if (code === 403) {
this.popFunction({ title: '温馨提示', text: message, status: 2, b_text: '我知道了', show: true });
this.toPage(3);
return this.redirect = true;
}
if (code === 200) {
this.popFunction({ title: '温馨提示', text: '取消订单成功', status: 2, b_text: '我知道了', show: true });
this.getOrderList();
}
});
this.isCancel = false;
}
},
//领取立减金
receiveFn (res) {
if (res.status == 5) {
return this.popFunction({ title: '温馨提示', text: '立减金领取过期', status: 2, b_text: '我知道了', show: true });
}
let ua = navigator.userAgent.toLowerCase(); //判断用户打开链接环境
/* 支付宝 */
if (res.goods.channel == 1) {
let bankLink = encodeURIComponent(
window.location.origin +
"/alipay.html?orderNumber=" + res.alipay_order_number
);
let link = "http://openapi.1688sup.com/alipay/oauth?jump=" + bankLink;
if (ua.indexOf("micromessenger") > -1 || ua.indexOf("baiduboxapp") > -1 || ua.indexOf("firefox") > -1) {
//在微信内置环境、百度app打开不能唤起支付宝
this.href = link;
this.popFunction({ title: '温馨提示', text: `请复制链接,在其他浏览器打开`, status: 2, b_text: '点击复制', show: true });
} else {
window.location.href = link;
}
}
//微信
if (res.goods.channel == 2) {
if (ua.indexOf("dingtalk") > -1) {
//在钉钉内置环境打开,不能唤起微信小程序
window.location.href = res.wechat_redirect_url;
} else {
//唤起微信福利官小程序
window.location.replace(res.wechat_redirect_url);
}
}
},
// 单条弹框
openDialog (tip) {
this.toastShow = true;
this.toastTip = tip;
setTimeout(() => {
this.toastShow = false;
this.toastTip = '';
}, 3000);
},
}
})
</script>
</body>
</html>