406 lines
18 KiB
HTML
406 lines
18 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/api2_0.js?v=1000"></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.stop="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.stop="immediatelyCancel(item)">取消订单</p>
|
|||
|
|
<p class="button" @click.stop="immediatelyPay(item)">立即支付</p>
|
|||
|
|
</div>
|
|||
|
|
<template v-if="item.type==2">
|
|||
|
|
<!-- 立减金待领取 -->
|
|||
|
|
<p class="button" @click.stop="receiveFn(item)" v-if="item.status==0">去兑换</p>
|
|||
|
|
<!-- 立减金领取过期 -->
|
|||
|
|
<p class="button filter" @click.stop="receiveFn(item)" v-if="item.status==5">去兑换
|
|||
|
|
</p>
|
|||
|
|
</template>
|
|||
|
|
<template v-if="item.type==1">
|
|||
|
|
<!-- 查看卡密 -->
|
|||
|
|
<p class="button-card" @click.stop="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: {},
|
|||
|
|
openId: localStorage.getItem('openid'),
|
|||
|
|
|
|||
|
|
/* 提示框状态 */
|
|||
|
|
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) {
|
|||
|
|
if (order.status === 4 || order.status === 6) return;
|
|||
|
|
|
|||
|
|
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 = "https://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 (res.goods.is_webview == 1) {
|
|||
|
|
/* 公众号 */
|
|||
|
|
this.publicCollection(res.alipay_order_number);
|
|||
|
|
} else if (ua.indexOf("dingtalk") > -1) {
|
|||
|
|
//在钉钉内置环境打开，不能唤起微信小程序
|
|||
|
|
window.location.href = res.wechat_redirect_url;
|
|||
|
|
} else {
|
|||
|
|
//唤起微信福利官小程序
|
|||
|
|
window.location.replace(res.wechat_redirect_url);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/* 公众号领取 */
|
|||
|
|
publicCollection(order_number) {
|
|||
|
|
let params = {
|
|||
|
|
order_number,
|
|||
|
|
channel: 2,
|
|||
|
|
channel_user_id: this.openId,
|
|||
|
|
is_webview: 1
|
|||
|
|
};
|
|||
|
|
req.axiosPost("/voucher/grant", params)
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.popFunction({ title: '温馨提示', text: '领取成功', status: 1, b_text: '我知道了', show: true });
|
|||
|
|
this.getOrderList();
|
|||
|
|
} else {
|
|||
|
|
this.popFunction({ title: '温馨提示', text: res.message, status: 3, b_text: '我知道了', show: true });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 单条弹框
|
|||
|
|
openDialog(tip) {
|
|||
|
|
this.toastShow = true;
|
|||
|
|
this.toastTip = tip;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.toastShow = false;
|
|||
|
|
this.toastTip = '';
|
|||
|
|
}, 3000);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|