mobileclient/order.html

571 lines
25 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/api_test1.js?v=1000"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/modelPop.js"></script>
<link rel="stylesheet"
href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/exchange-order.css" />
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/tabs.js"></script>
</head>
<body>
<div id="app">
<!-- 弹出提示 -->
<img class="backPresTy" @click="location.href = './homepage.html'" 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.create_time}}</p>
<p class="status" :style="{color:statusColor(item.status)}">
{{item.status_text}}
</p>
</div>
<div class="middle">
<img :src="item.src" alt="" />
<div class="right">
<div class="title_originalPrice">
<p class="title">{{item.product_name}}</p>
</div>
<p class="id">订单编号:{{item.order_number}}</p>
</div>
</div>
<div class="footer">
<p class="button-card b-l" @click="lookCard(item)"
v-if="item.status===2&&item.type===1&&item.product_type===2&&item.card_show==2">
查看卡密
</p>
<p class="button-card b-c-r b-l" @click="receiveFn(item)"
v-if="([0,1].includes(item.status)&&item.send_num<2||item.status===0&&item.send_num>1)&&[2,3].includes(item.type)&&[1,2,3].includes(item.channel)">
去领取
</p>
</div>
</div>
<p class="noMore" v-if="total<limit&&orderList.length">没有更多了</p>
<!-- 空状态 -->
<div class="empty" v-if="!orderList.length&&!loadShowHeight">
<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-static-component :current="2" v-if="goodsCount>1"></tab-static-component>
</div>
<script>
const token = localStorage.getItem("token");
new Vue({
el: "#app",
data() {
return {
limit: 15,
page: 1,
total: 0,
orderList: [],
/* 提示框状态 */
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: {
tabStaticComponent,
modelPop
},
created() {
this.getOrderList();
this.goodsCount = Number(sessionStorage.getItem("goodsCount"));
this.scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
window.addEventListener('pageshow', () => {
!this.loadShowHeight && this.getOrderList();
});
},
methods: {
/* 取消订单 */
cancelOrder({ order_number }) {
this.order_number = order_number;
this.isCancel = true;
this.popFunction({
title: "温馨提示",
text: "是否确认取消订单",
status: 2,
b_text: "我知道了",
show: true
});
},
/* 根据不同状态展示 订单样式和表现 */
statusColor(status) {
const colorArray = [
"#f28542",
"#f28542",
"#44D27D",
"#fd553d",
"#fd553d",
"#aaaaaa",
"#fd553d"
];
return colorArray[status];
},
/*跳转起始页面*/
toPage() {
let entryLink = localStorage.getItem("entryLink");
setTimeout(() => {
window.location.replace(entryLink);
}, 3 * 1000);
},
/*跳转详情*/
toDetails(order) {
sessionStorage.setItem('orderNumber', order.order_number);
switch (order.product_type) {
case 1:
window.location.href = './orderDetails/chargerOrder.html';
break;
case 2:
window.location.href = './orderDetails/cardOrder.html';
break;
default:
break;
}
},
/* 领取红包和立减金 */
receiveFn(item) {
req
.axiosGet(`/key/order/getLink`, {
order_number: item.order_number,
token
})
.then(({ data, code, message }) => {
if (code === 200) {
this.toApp(item, data);
} else {
this.apiError(code, message);
}
});
},
/* 领取跳转逻辑 */
toApp(item, data) {
let ua = navigator.userAgent.toLowerCase(); //判断用户打开链接环境
//领取立减金
if (item.type === 2) {
if (item.status == 5) {
return this.popFunction({
title: "温馨提示",
text: "立减金领取过期",
status: 2,
b_text: "我知道了",
show: true
});
}
if (item.channel == 1) {
if (item.goods.entity.receive_mode === 2) {
item.goods.available = 1;
/* H5 领取 */
sessionStorage.setItem(
"goodsInfo",
JSON.stringify(item.goods)
);
location.href = "./zfb-reduce.html";
} else {
let bankLink = '';
if (item.is_group == 2) {
bankLink = encodeURIComponent(
window.location.origin +
"/alipay.html?orderNumber=" +
data.order_number
);
} else {
bankLink = encodeURIComponent(
window.location.origin +
`/combiningAlipay.html?codeBatchId=${item.goods.code_batch_id}&token=${token}`
);
}
let link =
"http://openapi.1688sup.com/alipay/oauth?jump=" + bankLink;
let ua = navigator.userAgent.toLowerCase(); //判断用户打开链接环境
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.replace(link);
}
}
}
if (item.channel == 2) {
if (ua.indexOf("windows") > -1) {
this.href = data.redirect_url;
this.popFunction({
title: "温馨提示",
text: `请复制链接,在其他浏览器打开`,
status: 2,
b_text: "点击复制",
show: true
});
} else {
location.replace(data.redirect_url);
}
}
if (item.channel == 3) {
item.goods.available = 1;
/* H5 领取 */
sessionStorage.setItem(
"goodsInfo",
JSON.stringify(item.goods)
);
location.href = "./ysf-reduce.html";
}
}
/* 红包领取 */
if (item.type === 3) {
if (item.channel === 1) {
if (item.goods.entity.receive_mode === 2) {
item.goods.available = 1;
/* H5 领取 */
sessionStorage.setItem(
"goodsInfo",
JSON.stringify(item.goods)
);
location.href = "./zfb-redPackets.html";
} else {
const aliPaysUrl = `alipays://platformapi/startapp?appId=2021004100663111&page=pages/index/index?order_number=${encodeURIComponent(
window.btoa(data.order_number)
)}`;
if (
isWx() ||
(ua.indexOf("android") > -1 &&
ua.indexOf("baiduboxapp") > -1) ||
ua.indexOf("windows") > -1
) {
this.href = aliPaysUrl;
this.popFunction({
title: "温馨提示",
text: `请复制链接,在其他浏览器打开`,
status: 2,
b_text: "点击复制",
show: true
});
} else {
location.replace(aliPaysUrl);
}
}
}
if (item.channel === 2) {
if (ua.indexOf("windows") > -1) {
this.href = data.redirect_url;
this.popFunction({
title: "温馨提示",
text: `请复制链接,在其他浏览器打开`,
status: 2,
b_text: "点击复制",
show: true
});
} else {
location.replace(data.redirect_url);
}
}
if (item.channel == 3) {
item.goods.available = 1;
/* H5 领取 */
sessionStorage.setItem(
"goodsInfo",
JSON.stringify(item.goods)
);
location.href = "./ysf.html";
}
}
},
/* 弹窗回调 */
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.isCancel && type === 2) {
req
.axiosPut(
`/key/order/cancel/${this.order_number}?token=${token}`
)
.then(({ code, message }) => {
if (code === 200) {
this.getOrderList();
} else {
this.apiError(code, message);
}
});
}
},
/* 查看卡密 */
lookCard(item) {
sessionStorage.setItem("orderNumber", item.order_number);
window.location.href = "/orderDetails/cardOrder.html";
},
/* 统一控制弹窗 */
popFunction({ title, text, status, b_text, show }) {
this.popTitle = title;
this.popText = text;
this.popStatus = status;
this.bottomText = b_text;
this.popShow = show;
},
// 单条弹框
openDialog(tip) {
this.toastShow = true;
this.toastTip = tip;
setTimeout(() => {
this.toastShow = false;
this.toastTip = "";
}, 3000);
},
/* ————————————————————————以下方法为数据订单数据获取和处理———————————————————————— */
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;
}
},
/* 请求订单数据 */
getOrderList(isLodging) {
/* 下拉 */
if (!isLodging) {
this.orderList = [];
this.loadShowHeight = true;
}
req
.axiosGet(`/key/order/queryList`, {
token,
page: this.page,
limit: this.limit
})
.then(({ data, code, message }) => {
if (code === 200) {
this.total = data.length;
data = data.map((item) => {
return this.refactorData(item);
});
if (!isLodging) {
setTimeout(() => {
this.loadShowHeight = 0;
this.orderList = data;
}, 1 * 1000);
}
if (isLodging && this.page > 1) {
this.orderList = this.orderList.concat(data);
this.loadFlag = false;
}
} else {
this.loadShowHeight = 0;
this.apiError(code, message);
}
});
},
/* 处理错误 */
apiError(code, message) {
this.popFunction({
title: "温馨提示",
text: message,
status: 3,
b_text: "我知道了",
show: true
});
if (code === 403) {
this.toPage();
}
},
/* 后端太懒 前端处理数据 */
refactorData(item) {
/* type: 1兑换码 2立减金 3红包 */
/* channel: 1支付宝 2微信 3云闪付 */
const {
order_number,
create_time,
status_text,
status,
type,
product,
card_number,
card_password,
is_group
} = item;
const newItem = {
order_number,
create_time,
status_text,
status,
type
};
switch (type) {
case 1:
newItem["product_name"] = product.product_name;
newItem["src"] = product.show_url;
newItem["show_url"] = product.show_url;
newItem["product_type"] = product.product_type;
newItem["goods"] = product;
newItem["card_number"] = card_number;
newItem["card_password"] = card_password;
newItem["card_show"] = product.card_show;
newItem["send_num"] = 1;
break;
case 2:
const channel = product.entity.channel;
newItem["product_name"] = product.entity.batch_goods_name;
newItem["channel"] = channel;
newItem["is_group"] = is_group;
newItem["goods"] = product;
newItem["send_num"] = product.entity.send_num;
if (channel === 1) {
newItem["src"] =
"https://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/zfbreduce.png";
}
if (channel === 2) {
newItem["src"] =
"https://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/wxreduce.png";
}
if (channel === 3) {
newItem["src"] =
"https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/logo_ysf.png";
}
break;
case 3:
const channels = product.entity.channel;
newItem["product_name"] = product.entity.batch_goods_name;
newItem["channel"] = channels;
newItem["goods"] = product;
newItem["send_num"] = 1;
if (channels === 1) {
newItem["src"] =
"https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/alipay_icon.png";
}
if (channels === 2) {
newItem["src"] =
"https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/wechat_icon.png";
}
if (channels === 3) {
newItem["src"] =
"https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/logo_ysf.png";
}
break;
default:
break;
}
return newItem;
}
}
})
</script>
</body>
</html>