增加基本项目配置
This commit is contained in:
Gao xiaosong
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="apply-return">
|
||||
<div class="goodsStyle acea-row row-between" v-for="cart in orderInfo.cartInfo" :key="cart.id">
|
||||
<div class="pictrue">
|
||||
<img :src="cart.productInfo.image" class="image" />
|
||||
</div>
|
||||
<div class="text acea-row row-between">
|
||||
<div class="name line2">{{ cart.productInfo.storeName }}</div>
|
||||
<div class="money">
|
||||
<div>
|
||||
￥{{
|
||||
cart.productInfo.attrInfo
|
||||
? cart.productInfo.attrInfo.price
|
||||
: cart.productInfo.price
|
||||
}}
|
||||
</div>
|
||||
<div class="num">x{{ cart.cartNum }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item acea-row row-between-wrapper">
|
||||
<div>退货件数</div>
|
||||
<div class="num">{{ orderInfo.totalNum }}</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between-wrapper">
|
||||
<div>退款金额</div>
|
||||
<div class="num">￥{{ orderInfo.payPrice }}</div>
|
||||
</div>
|
||||
<picker :value="reason" :range="reasonList" @change="changeReason">
|
||||
<div class="item acea-row row-between-wrapper">
|
||||
<div>退款原因</div>
|
||||
<div class="num">{{reason}}</div>
|
||||
<span class="iconfont icon-jiantou"></span>
|
||||
</div>
|
||||
</picker>
|
||||
<div class="item textarea acea-row row-between">
|
||||
<div>备注说明</div>
|
||||
<textarea placeholder="填写备注信息，100字以内" class="num" v-model="refund_reason_wap_explain"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="returnBnt bg-color-red" @click="submit">申请退款</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { orderDetail, getRefundReason, postOrderRefund } from "@/api/order";
|
||||
import { trim } from "@/utils";
|
||||
import { VUE_APP_API_URL } from "@/config";
|
||||
|
||||
export default {
|
||||
name: "goodsReturn",
|
||||
components: {
|
||||
// VueCoreImageUpload
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: `${VUE_APP_API_URL}/upload/image`,
|
||||
headers: {
|
||||
Authorization: "Bearer " + this.$store.state.token
|
||||
},
|
||||
id: 0,
|
||||
orderInfo: {},
|
||||
reasonList: [],
|
||||
reason: "",
|
||||
refund_reason_wap_explain: "",
|
||||
refund_reason_wap_img: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeReason(e) {
|
||||
this.reason = this.reasonList[e.mp.detail.value];
|
||||
},
|
||||
imageuploaded(res) {
|
||||
if (res.status !== 200)
|
||||
return this.$dialog.error(res.msg || "上传图片失败");
|
||||
this.refund_reason_wap_img.push(res.data.url);
|
||||
},
|
||||
getOrderDetail() {
|
||||
orderDetail(this.id)
|
||||
.then(res => {
|
||||
this.orderInfo = res.data;
|
||||
})
|
||||
.catch(err => {
|
||||
this.$dialog.error(err.response.data.msg || "获取订单失败");
|
||||
});
|
||||
},
|
||||
getRefundReason() {
|
||||
getRefundReason().then(res => {
|
||||
this.reasonList = res.data;
|
||||
});
|
||||
},
|
||||
submit() {
|
||||
const refund_reason_wap_explain = trim(this.refund_reason_wap_explain),
|
||||
text = this.reason;
|
||||
if (!text) return this.$dialog.toast({ mes: "请选择退款原因" });
|
||||
postOrderRefund({
|
||||
text,
|
||||
uni: this.orderInfo.orderId,
|
||||
refund_reason_wap_img: this.refund_reason_wap_img.join(","),
|
||||
refund_reason_wap_explain
|
||||
})
|
||||
.then(res => {
|
||||
wx.showToast({
|
||||
title: res.msg,
|
||||
icon: "success",
|
||||
duration: 2000
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$yrouter.back();
|
||||
}, 1500);
|
||||
})
|
||||
.catch(err => {
|
||||
this.$dialog.error(err.msg||err.response.data.msg);
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.id = this.$yroute.query.id || 0;
|
||||
this.getOrderDetail();
|
||||
this.getRefundReason();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import App from './index'
|
||||
|
||||
const app = new Vue(App)
|
||||
app.$mount()
|
||||
@@ -0,0 +1,350 @@
|
||||
<template>
|
||||
<div class="logistics">
|
||||
<div class="header acea-row row-between row-top" v-for="cart in cartInfo" :key="cart.id">
|
||||
<div class="pictrue">
|
||||
<img :src="cart.productInfo.image" />
|
||||
</div>
|
||||
<div class="text acea-row row-between">
|
||||
<div class="name line2">{{ cart.productInfo.store_name }}</div>
|
||||
<div class="money">
|
||||
<div>￥{{ cart.truePrice }}</div>
|
||||
<div>x{{ cart.cart_num }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="logisticsCon" style="margin-bottom: 5px">
|
||||
<div class="company acea-row row-between-wrapper">
|
||||
<div class="picTxt acea-row row-between-wrapper">
|
||||
<div class="iconfont icon-wuliu"></div>
|
||||
<div class="text">
|
||||
<div>
|
||||
<span class="name line1">物流公司：</span>
|
||||
{{ orderInfo.deliveryName }}
|
||||
</div>
|
||||
<div class="express line1">
|
||||
<span class="name">快递单号：</span>
|
||||
{{ orderInfo.deliveryId }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="copy acea-row row-center-wrapper copy-data"
|
||||
@click="copyClipboard(orderInfo.deliveryId)"
|
||||
>复制单号</div>
|
||||
</div>
|
||||
<div class="item" v-for="(express, expressListIndex) in expressList" :key="expressListIndex">
|
||||
<div class="circular" :class="expressListIndex === 0 ? 'on' : ''"></div>
|
||||
<div class="text">
|
||||
<div :class="expressListIndex === 0 ? 'font-color-red' : ''">{{ express.status }}</div>
|
||||
<div class="data">{{ express.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 物流进度条 -->
|
||||
<div class="div-bg bg-white" style="font-size:12px; background:#fff;">
|
||||
<!--物流跟踪-->
|
||||
<div style="margin-bottom:5px;">
|
||||
<div
|
||||
class="bg-white"
|
||||
style="width: 92%; margin-left: 4%;margin: auto;padding-left: 15px;padding-right: 15px;padding-top: 10px"
|
||||
>
|
||||
<div style="font-size: .26rem;color: #111111; margin: 5px 0">
|
||||
物流跟踪
|
||||
<!--物流跟踪-->
|
||||
</div>
|
||||
<div>
|
||||
<div class="track-rcol">
|
||||
<div class="track-list">
|
||||
<ul>
|
||||
<div v-for="(item,logisticsListindex) in logisticsList" :key="logisticsListindex">
|
||||
<li class="active" v-if="logisticsListindex===0">
|
||||
<div></div>
|
||||
<i class="node-icon"></i>
|
||||
<span class="txt">{{item.acceptStation}}</span>
|
||||
<span class="time">{{item.acceptTime}}</span>
|
||||
</li>
|
||||
<li
|
||||
v-if="logisticsListindex > 0 && logisticsListindex !== logisticsList.length-1"
|
||||
>
|
||||
<i class="node-icon"></i>
|
||||
<span class="txt">{{item.acceptStation}}</span>
|
||||
<span class="time">{{item.acceptTime}}</span>
|
||||
</li>
|
||||
<li v-if="logisticsListindex === logisticsList.length-1" class="finall">
|
||||
<i class="div-spilander"></i>
|
||||
<i class="node-icon"></i>
|
||||
<span class="txt">{{item.acceptStation}}</span>
|
||||
<span class="time">{{item.acceptTime}}</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="no-express" v-if="loaded && !expressList.length">
|
||||
<img :src="$VUE_APP_RESOURCES_URL+'/images/noExpress.png'" />
|
||||
</div>
|
||||
<Recommend></Recommend>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Recommend from "@/components/Recommend";
|
||||
import { express, orderDetail } from "@/api/order";
|
||||
import { copyClipboard } from "@/utils";
|
||||
|
||||
const NAME = "Logistics";
|
||||
|
||||
export default {
|
||||
name: NAME,
|
||||
components: {
|
||||
Recommend
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
id: "",
|
||||
cartInfo: [],
|
||||
orderInfo: {},
|
||||
expressList: [],
|
||||
loaded: false,
|
||||
logisticsList: [
|
||||
{
|
||||
message: "暂无数据",
|
||||
messageDate: ""
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$yroute(n) {
|
||||
if (n.name === NAME && this.$yroute.query.id !== this.id) {
|
||||
this.id = this.$yroute.query.id;
|
||||
this.getExpress();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
this.id = this.$yroute.query.id;
|
||||
this.getExpress();
|
||||
},
|
||||
methods: {
|
||||
copyClipboard,
|
||||
getExpressInfo() {
|
||||
let params = {
|
||||
orderCode: this.id,
|
||||
shipperCode: this.orderInfo.deliverySn,
|
||||
logisticCode: this.orderInfo.deliveryId
|
||||
};
|
||||
express(params)
|
||||
.then(res => {
|
||||
this.logisticsList = res.data.traces.reverse();
|
||||
})
|
||||
.catch(err => {
|
||||
this.$dialog.error(err.response.data.msg || "加载失败");
|
||||
});
|
||||
},
|
||||
getExpress() {
|
||||
if (!this.id) return this.$dialog.error("订单不存在");
|
||||
this.loaded = false;
|
||||
orderDetail(this.id)
|
||||
.then(res => {
|
||||
this.orderInfo = {
|
||||
deliveryId: res.data.deliveryId,
|
||||
deliveryName: res.data.deliveryName,
|
||||
deliverySn: res.data.deliverySn
|
||||
};
|
||||
this.getExpressInfo();
|
||||
// const result = res.data.express.result || {};
|
||||
// this.cartInfo = res.data.order.cartInfo;
|
||||
// this.expressList = result.list || [];
|
||||
// this.loaded = true;
|
||||
|
||||
})
|
||||
.catch(err => {
|
||||
this.$dialog.error(err.response.data.msg || "加载失败");
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.no-express {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.no-express img {
|
||||
width: 6rem;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
.message-text {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 3rem;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
width: 50%;
|
||||
}
|
||||
.fontblack {
|
||||
color: #999999;
|
||||
}
|
||||
.img2 {
|
||||
width: 0.81rem;
|
||||
height: 0.8rem;
|
||||
float: right;
|
||||
}
|
||||
.addressshow2 {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
width: 75%;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.addressshow1 {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
width: 75%;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.orderTitle {
|
||||
font-size: 1rem;
|
||||
color: #333333;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
height: 2.5rem;
|
||||
}
|
||||
.orderDetail {
|
||||
font-size: 0.26rem;
|
||||
color: #666666;
|
||||
text-align: left;
|
||||
}
|
||||
.border-ceter {
|
||||
width: 92%;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.pay-button {
|
||||
width: 88%;
|
||||
height: 2.6rem;
|
||||
position: relative;
|
||||
background-color: red;
|
||||
color: white;
|
||||
|
||||
margin-left: 6%;
|
||||
}
|
||||
ul li {
|
||||
list-style: none;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
ul {
|
||||
}
|
||||
.track-rcol {
|
||||
}
|
||||
.track-list {
|
||||
position: relative;
|
||||
}
|
||||
.track-list li {
|
||||
position: relative;
|
||||
padding: 0 0 0.5rem 5px;
|
||||
line-height: 0.3rem;
|
||||
border-left: 1px solid #d9d9d9;
|
||||
color: #999;
|
||||
}
|
||||
.track-list li.first {
|
||||
color: red;
|
||||
padding-top: 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-left: 1px solid #d9d9d9;
|
||||
}
|
||||
.track-list li .node-icon {
|
||||
position: absolute;
|
||||
left: -6.5px;
|
||||
border-radius: 50%;
|
||||
width: 0.2rem;
|
||||
height: 0.2rem;
|
||||
top: 4px;
|
||||
background-color: #b2b2b2;
|
||||
}
|
||||
.track-list li.active .node-icon {
|
||||
background-position: 0-72px;
|
||||
background-color: #ea7c0a;
|
||||
width: 0.3rem;
|
||||
z-index: 2;
|
||||
height: 0.3rem;
|
||||
position: absolute;
|
||||
left: -0.19rem;
|
||||
top: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.track-list li .time {
|
||||
margin-right: 20px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: #999;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
.track-list li .txt {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
color: #999;
|
||||
left: 0.2rem;
|
||||
top: 0.04rem;
|
||||
}
|
||||
.track-list li.first .time {
|
||||
text-align: left;
|
||||
width: 94%;
|
||||
color: red;
|
||||
}
|
||||
.track-list li.first .txt {
|
||||
color: red;
|
||||
text-align: left;
|
||||
width: 94%;
|
||||
}
|
||||
.track-list li.finall {
|
||||
position: relative;
|
||||
padding: 0px 0 0.5rem 5px;
|
||||
line-height: 18px;
|
||||
border-color: white;
|
||||
border-left: 1px solid #ffffff;
|
||||
color: #999;
|
||||
}
|
||||
.track-list li.finall .div-spilander {
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
left: -1.5px;
|
||||
height: 0.5rem;
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import App from './index'
|
||||
|
||||
const app = new Vue(App)
|
||||
app.$mount()
|
||||
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<div class="my-order" ref="container">
|
||||
<div class="header bg-color-red">
|
||||
<div class="picTxt acea-row row-between-wrapper">
|
||||
<div class="text">
|
||||
<div class="name">订单信息</div>
|
||||
<div>
|
||||
累计订单：{{ orderData.orderCount || 0 }} 总消费：￥{{
|
||||
orderData.sumPrice || 0
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav acea-row row-around">
|
||||
<div class="item" :class="{ on: type === 0 }" @click="changeType(0)">
|
||||
<div>待付款</div>
|
||||
<div class="num">{{ orderData.unpaidCount || 0 }}</div>
|
||||
</div>
|
||||
<div class="item" :class="{ on: type === 1 }" @click="changeType(1)">
|
||||
<div>待发货</div>
|
||||
<div class="num">{{ orderData.unshippedCount || 0 }}</div>
|
||||
</div>
|
||||
<div class="item" :class="{ on: type === 2 }" @click="changeType(2)">
|
||||
<div>待收货</div>
|
||||
<div class="num">{{ orderData.receivedCount || 0 }}</div>
|
||||
</div>
|
||||
<div class="item" :class="{ on: type === 3 }" @click="changeType(3)">
|
||||
<div>待评价</div>
|
||||
<div class="num">{{ orderData.evaluatedCount || 0 }}</div>
|
||||
</div>
|
||||
<div class="item" :class="{ on: type === 4 }" @click="changeType(4)">
|
||||
<div>已完成</div>
|
||||
<div class="num">{{ orderData.completeCount || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item" v-for="(order,orderListIndex) in orderList" :key="orderListIndex">
|
||||
<div class="title acea-row row-between-wrapper">
|
||||
<div class="acea-row row-middle">
|
||||
<span
|
||||
class="sign cart-color acea-row row-center-wrapper"
|
||||
v-if="order.combinationId > 0"
|
||||
>拼团</span>
|
||||
<span class="sign cart-color acea-row row-center-wrapper" v-if="order.seckillId > 0">秒杀</span>
|
||||
<span class="sign cart-color acea-row row-center-wrapper" v-if="order.bargainId > 0">砍价</span>
|
||||
<data-format :data="order.addTime"></data-format>
|
||||
</div>
|
||||
<div class="font-color-red">{{ getStatus(order) }}</div>
|
||||
</div>
|
||||
<div
|
||||
@click="$yrouter.push({ path: '/pages/order/OrderDetails/index',query:{id:order.orderId} })"
|
||||
>
|
||||
<div
|
||||
class="item-info acea-row row-between row-top"
|
||||
v-for="(cart,cartInfoIndex) in order.cartInfo"
|
||||
:key="cartInfoIndex"
|
||||
>
|
||||
<div class="pictrue">
|
||||
<img
|
||||
:src="cart.productInfo.image"
|
||||
@click.stop="
|
||||
$yrouter.push({ path: '/pages/shop/GoodsCon/index',query:{id:cart.productInfo.id} })
|
||||
"
|
||||
v-if="cart.combinationId === 0 && cart.bargainId === 0 &&cart.seckillId === 0"
|
||||
/>
|
||||
<img
|
||||
:src="cart.productInfo.image"
|
||||
@click.stop="
|
||||
$yrouter.push({
|
||||
path: '/pages/activity/GroupDetails/index',query:{id:cart.combinationId}
|
||||
})
|
||||
"
|
||||
v-else-if="cart.combinationId > 0"
|
||||
/>
|
||||
<img
|
||||
:src="cart.productInfo.image"
|
||||
@click.stop="
|
||||
$yrouter.push({
|
||||
path: '/pages/activity/DargainDetails/index',query:{id:cart.bargainId}
|
||||
})
|
||||
"
|
||||
v-else-if="cart.bargainId > 0"
|
||||
/>
|
||||
<img
|
||||
:src="cart.productInfo.image"
|
||||
@click.stop="
|
||||
$yrouter.push({
|
||||
path: '/pages/activity/SeckillDetails/index',query:{id:cart.seckillId}
|
||||
})
|
||||
"
|
||||
v-else-if="cart.seckillId > 0"
|
||||
/>
|
||||
</div>
|
||||
<div class="text acea-row row-between">
|
||||
<div class="name line2">{{ cart.productInfo.storeName }}</div>
|
||||
<div class="money">
|
||||
<div>
|
||||
￥{{
|
||||
cart.productInfo.attrInfo
|
||||
? cart.productInfo.attrInfo.price
|
||||
: cart.productInfo.price
|
||||
}}
|
||||
</div>
|
||||
<div>x{{ cart.cartNum }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="totalPrice">
|
||||
共{{ order.cartInfo.length || 0 }}件商品，总金额
|
||||
<span
|
||||
class="money font-color-red"
|
||||
>￥{{ order.payPrice }}</span>
|
||||
</div>
|
||||
<div class="bottom acea-row row-right row-middle">
|
||||
<template v-if="order._status._type == 0">
|
||||
<div class="bnt cancelBnt" @click="cancelOrder(order)">取消订单</div>
|
||||
<div
|
||||
class="bnt bg-color-red"
|
||||
@click="$yrouter.push({ path: '/pages/order/OrderDetails/index',query:{id:order.orderId} })"
|
||||
>立即付款</div>
|
||||
</template>
|
||||
<template v-if="order._status._type == 1 || order._status._type == 9">
|
||||
<div
|
||||
class="bnt bg-color-red"
|
||||
@click="$yrouter.push({ path: '/pages/order/OrderDetails/index',query:{id:order.orderId} })"
|
||||
>查看详情</div>
|
||||
</template>
|
||||
<template v-if="order._status._type == 2">
|
||||
<div
|
||||
class="bnt default"
|
||||
@click="
|
||||
$yrouter.push({ path: '/pages/order/Logistics/index',query:{id:order.orderId}})
|
||||
"
|
||||
>查看物流</div>
|
||||
<div class="bnt bg-color-red" @click="takeOrder(order)">确认收货</div>
|
||||
</template>
|
||||
<template v-if="order._status._type == 3">
|
||||
<!--<div-->
|
||||
<!--class="bnt default"-->
|
||||
<!--@click="-->
|
||||
<!--$yrouter.push({ path: '/pages/order/Logistics/index',query:{id:order.orderId}})-->
|
||||
<!--"-->
|
||||
<!--v-if="order.deliveryType == 'express'"-->
|
||||
<!-->-->
|
||||
<!--查看物流-->
|
||||
<!--</div>-->
|
||||
<div
|
||||
class="bnt bg-color-red"
|
||||
@click="$yrouter.push({ path: '/pages/order/OrderDetails/index',query:{id:order.orderId} })"
|
||||
>去评价</div>
|
||||
</template>
|
||||
<template v-if="order._status._type === 4">
|
||||
<div
|
||||
class="bnt bg-color-red"
|
||||
@click="$yrouter.push({ path: '/pages/order/OrderDetails/index',query:{id:order.orderId} })"
|
||||
>查看订单</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="noCart" v-if="orderList.length === 0 && page > 1">
|
||||
<div class="pictrue">
|
||||
<img :src="$VUE_APP_RESOURCES_URL+'/images/noOrder.png'" />
|
||||
</div>
|
||||
</div>
|
||||
<Loading :loaded="loaded" :loading="loading"></Loading>
|
||||
<Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getOrderData, getOrderList } from "@/api/order";
|
||||
import {
|
||||
cancelOrderHandle,
|
||||
payOrderHandle,
|
||||
takeOrderHandle
|
||||
} from "@/libs/order";
|
||||
import Loading from "@/components/Loading";
|
||||
import Payment from "@/components/Payment";
|
||||
import DataFormat from "@/components/DataFormat";
|
||||
import { mapGetters } from "vuex";
|
||||
import { isWeixin, dataFormat } from "@/utils";
|
||||
|
||||
const STATUS = [
|
||||
"待付款",
|
||||
"待发货",
|
||||
"待收货",
|
||||
"待评价",
|
||||
"已完成",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"待付款"
|
||||
];
|
||||
|
||||
const NAME = "MyOrder";
|
||||
|
||||
export default {
|
||||
name: NAME,
|
||||
data() {
|
||||
return {
|
||||
offlinePayStatus: 2,
|
||||
orderData: {},
|
||||
type: "",
|
||||
page: 1,
|
||||
limit: 20,
|
||||
loaded: false,
|
||||
loading: false,
|
||||
orderList: [],
|
||||
pay: false,
|
||||
payType: ["yue", "weixin"],
|
||||
from: isWeixin() ? "weixin" : "weixinh5"
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Loading,
|
||||
Payment,
|
||||
DataFormat
|
||||
},
|
||||
computed: mapGetters(["userInfo"]),
|
||||
watch: {
|
||||
$yroute(n) {
|
||||
if (n.name === NAME) {
|
||||
const type = parseInt(this.$yroute.query.type) || 0;
|
||||
if (this.type !== type) {
|
||||
this.changeType(type);
|
||||
}
|
||||
this.getOrderData();
|
||||
}
|
||||
},
|
||||
type() {}
|
||||
},
|
||||
methods: {
|
||||
dataFormat,
|
||||
setOfflinePayStatus: function(status) {
|
||||
var that = this;
|
||||
that.offlinePayStatus = status;
|
||||
if (status === 1) {
|
||||
if (that.payType.indexOf("offline") < 0) {
|
||||
that.payType.push("offline");
|
||||
}
|
||||
}
|
||||
},
|
||||
getOrderData() {
|
||||
getOrderData().then(res => {
|
||||
this.orderData = res.data;
|
||||
});
|
||||
},
|
||||
takeOrder(order) {
|
||||
takeOrderHandle(order.orderId).finally(() => {
|
||||
this.reload();
|
||||
this.getOrderData();
|
||||
});
|
||||
},
|
||||
reload() {
|
||||
this.changeType(this.type);
|
||||
},
|
||||
changeType(type) {
|
||||
this.type = type;
|
||||
this.orderList = [];
|
||||
this.page = 1;
|
||||
this.loaded = false;
|
||||
this.loading = false;
|
||||
this.getOrderList();
|
||||
},
|
||||
getOrderList() {
|
||||
if (this.loading || this.loaded) return;
|
||||
this.loading = true;
|
||||
const { page, limit, type } = this;
|
||||
getOrderList({
|
||||
page,
|
||||
limit,
|
||||
type
|
||||
}).then(res => {
|
||||
this.orderList = this.orderList.concat(res.data);
|
||||
this.page++;
|
||||
this.loaded = res.data.length < this.limit;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getStatus(order) {
|
||||
return STATUS[order._status._type];
|
||||
},
|
||||
cancelOrder(order) {
|
||||
cancelOrderHandle(order.orderId)
|
||||
.then(() => {
|
||||
this.getOrderData();
|
||||
this.orderList.splice(this.orderList.indexOf(order), 1);
|
||||
})
|
||||
.catch(() => {
|
||||
this.reload();
|
||||
});
|
||||
},
|
||||
paymentTap: function(order) {
|
||||
var that = this;
|
||||
if (
|
||||
!(order.combinationId > 0 || order.bargainId > 0 || order.seckillId > 0)
|
||||
) {
|
||||
that.setOfflinePayStatus(order.offlinePayStatus);
|
||||
}
|
||||
this.pay = true;
|
||||
this.toPay = type => {
|
||||
payOrderHandle(order.orderId, type, that.from)
|
||||
.then(() => {
|
||||
const type = parseInt(this.$yroute.query.type) || 0;
|
||||
that.changeType(type);
|
||||
that.getOrderData();
|
||||
})
|
||||
.catch(() => {
|
||||
const type = parseInt(that.$yroute.query.type) || 0;
|
||||
that.changeType(type);
|
||||
that.getOrderData();
|
||||
});
|
||||
};
|
||||
},
|
||||
toPay() {}
|
||||
},
|
||||
mounted() {
|
||||
this.type = parseInt(this.$yroute.query.type) || 0;
|
||||
this.getOrderData();
|
||||
this.getOrderList();
|
||||
},
|
||||
onReachBottom() {
|
||||
!this.loading && this.getOrderList();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.noCart {
|
||||
margin-top: 0.17rem;
|
||||
padding-top: 0.1rem;
|
||||
}
|
||||
|
||||
.noCart .pictrue {
|
||||
width: 4rem;
|
||||
height: 3rem;
|
||||
margin: 0.7rem auto 0.5rem auto;
|
||||
}
|
||||
|
||||
.noCart .pictrue img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import App from './index'
|
||||
|
||||
const app = new Vue(App)
|
||||
app.$mount()
|
||||
@@ -0,0 +1,629 @@
|
||||
<template>
|
||||
<div class="order-details">
|
||||
<!-- 给header上与data上加on为退款订单-->
|
||||
<div class="header bg-color-red acea-row row-middle" :class="refundOrder ? 'on' : ''">
|
||||
<div class="data" :class="refundOrder ? 'on' : ''">
|
||||
<div class="state">{{ orderInfo._status._msg }}</div>
|
||||
<div>
|
||||
<data-format :data="orderInfo.addTime"></data-format>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="!refundOrder">
|
||||
<div class="nav">
|
||||
<div class="navCon acea-row row-between-wrapper">
|
||||
<div :class="{ on: status.type === 0 || status.type === 9 }">待付款</div>
|
||||
<div :class="{ on: status.type === 1 }" v-if="orderInfo.shippingType === 2">待核销</div>
|
||||
<div :class="{ on: status.type === 1 }" v-else>待发货</div>
|
||||
<div :class="{ on: status.type === 2 }" v-if="orderInfo.shippingType === 1">待收货</div>
|
||||
<div :class="{ on: status.type === 3 }">待评价</div>
|
||||
<div :class="{ on: status.type === 4 }">已完成</div>
|
||||
</div>
|
||||
<div class="progress acea-row row-between-wrapper">
|
||||
<div
|
||||
class="iconfont"
|
||||
:class="[
|
||||
status.type === 0 || status.type === 9
|
||||
? 'icon-webicon318'
|
||||
: 'icon-yuandianxiao',
|
||||
status.type >= 0 ? 'font-color-red' : ''
|
||||
]"
|
||||
></div>
|
||||
<div class="line" :class="{ 'bg-color-red': status.type > 0 && status.type != 9 }"></div>
|
||||
<div
|
||||
class="iconfont"
|
||||
:class="[
|
||||
status.type === 1 ? 'icon-webicon318' : 'icon-yuandianxiao',
|
||||
status.type >= 1 && status.type != 6 && status.type != 9
|
||||
? 'font-color-red'
|
||||
: ''
|
||||
]"
|
||||
></div>
|
||||
<div
|
||||
class="line"
|
||||
:class="{
|
||||
'bg-color-red':
|
||||
status.type > 1 && status.type != 6 && status.type != 9
|
||||
}"
|
||||
v-if="orderInfo.shipping_type === 1"
|
||||
></div>
|
||||
<div
|
||||
class="iconfont"
|
||||
:class="[
|
||||
status.type === 2 ? 'icon-webicon318' : 'icon-yuandianxiao',
|
||||
status.type >= 2 && status.type != 6 && status.type != 9
|
||||
? 'font-color-red'
|
||||
: ''
|
||||
]"
|
||||
v-if="orderInfo.shippingType === 1"
|
||||
></div>
|
||||
<div
|
||||
class="line"
|
||||
:class="{
|
||||
'bg-color-red':
|
||||
status.type > 2 && status.type != 6 && status.type != 9
|
||||
}"
|
||||
></div>
|
||||
<div
|
||||
class="iconfont"
|
||||
:class="[
|
||||
status.type === 3 ? 'icon-webicon318' : 'icon-yuandianxiao',
|
||||
status.type >= 3 && status.type != 6 && status.type != 9
|
||||
? 'font-color-red'
|
||||
: ''
|
||||
]"
|
||||
></div>
|
||||
<div
|
||||
class="line"
|
||||
:class="{
|
||||
'bg-color-red':
|
||||
status.type > 3 && status.type != 6 && status.type != 9
|
||||
}"
|
||||
></div>
|
||||
<div
|
||||
class="iconfont"
|
||||
:class="[
|
||||
status.type == 4 ? 'icon-webicon318' : 'icon-yuandianxiao',
|
||||
status.type >= 4 && status.type != 6 && status.type != 9
|
||||
? 'font-color-red'
|
||||
: ''
|
||||
]"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div-->
|
||||
<!--class="writeOff"-->
|
||||
<!--v-if="orderInfo.shipping_type === 2 && orderInfo.paid === 1"-->
|
||||
<!-->-->
|
||||
<!--<div class="title">核销信息</div>-->
|
||||
<!--<div class="grayBg">-->
|
||||
<!--<div class="pictrue"><img :src="orderInfo.code" /></div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="gear"><img :src="$VUE_APP_RESOURCES_URL+'/images/writeOff.jpg'" /></div>-->
|
||||
<!--<div class="num">{{ orderInfo._verify_code }}</div>-->
|
||||
<!--<!--<!--<!--<span class="rules">-->
|
||||
<!--<!--<!--<span class="item">-->
|
||||
<!--<!--<span class="rulesTitle acea-row row-middle">-->
|
||||
<!--<span class="iconfont icon-shijian"></span>核销时间-->
|
||||
<!--</!--<span>-->
|
||||
<!--<div class="info">-->
|
||||
<!--{{ system_store._valid_time-->
|
||||
<!--}}<span class="time">{{ system_store.day_time }}</span>-->
|
||||
<!--</div>-->
|
||||
<!--</!--<!--<span>-->
|
||||
<!--<div class="item">-->
|
||||
<!--<div class="rulesTitle acea-row row-middle">-->
|
||||
<!--<span class="iconfont icon-shuoming1"></span>使用说明-->
|
||||
<!--</div>-->
|
||||
<!--<div class="info">可将二维码出示给店员扫描或提供数字核销码</div>-->
|
||||
<!--</div>-->
|
||||
<!--</!--<!--<!--<span>-->
|
||||
<!--</!--<!--<!--<!--<span>-->
|
||||
<!--<div-->
|
||||
<!--class="map acea-row row-between-wrapper"-->
|
||||
<!--v-if="orderInfo.shipping_type === 2 && orderInfo.paid === 1"-->
|
||||
<!-->-->
|
||||
<!--<div>自提地址信息</div>-->
|
||||
<!--<div-->
|
||||
<!--class="place cart-color acea-row row-center-wrapper"-->
|
||||
<!--@click="showChang"-->
|
||||
<!-->-->
|
||||
<!--<span class="iconfont icon-weizhi"></span>查看位置-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<div class="address" v-if="orderInfo.shippingType === 1">
|
||||
<div class="name">
|
||||
{{ orderInfo.realName
|
||||
}}
|
||||
<span class="phone">{{ orderInfo.userPhone }}</span>
|
||||
<span class="iconfont icon-tonghua font-color-red"></span>
|
||||
</div>
|
||||
<div>{{ orderInfo.userAddress }}</div>
|
||||
</div>
|
||||
<!--<div class="address" v-else>-->
|
||||
<!--<div class="name">-->
|
||||
<!--{{ system_store.name-->
|
||||
<!--}}<span class="phone">{{ system_store.phone }}</span>-->
|
||||
<!--<a-->
|
||||
<!--class="iconfont icon-tonghua font-color-red"-->
|
||||
<!--:href="'tel:' + system_store.phone"-->
|
||||
<!--></a>-->
|
||||
<!--</div>-->
|
||||
<!--<div>{{ system_store._detailed_address }}</div>-->
|
||||
<!--</div>-->
|
||||
<div class="line" v-if="orderInfo.shippingType === 1">
|
||||
<img :src="$VUE_APP_RESOURCES_URL+'/images/line.jpg'" />
|
||||
</div>
|
||||
</template>
|
||||
<OrderGoods :evaluate="status.type || 0" :cartInfo="orderInfo.cartInfo || []"></OrderGoods>
|
||||
<div class="wrapper">
|
||||
<div class="item acea-row row-between">
|
||||
<div>订单编号：</div>
|
||||
<div class="conter acea-row row-middle row-right">
|
||||
{{ orderInfo.orderId
|
||||
}}
|
||||
<span
|
||||
class="copy copy-data"
|
||||
@click="copyClipboard(orderInfo.orderId)"
|
||||
>复制</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between">
|
||||
<div>下单时间：</div>
|
||||
<div class="conter">
|
||||
<data-format :data="orderInfo.addTime"></data-format>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between">
|
||||
<div>订单类型：</div>
|
||||
<div class="conter">{{ orderTypeName }}</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between">
|
||||
<div>支付状态：</div>
|
||||
<div class="conter">{{ orderInfo.paid ? "已支付" : "未支付" }}</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between">
|
||||
<div>支付方式：</div>
|
||||
<div class="conter">{{ orderInfo._status._payType }}</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between" v-if="orderInfo.mark">
|
||||
<div>买家留言：</div>
|
||||
<div class="conter">{{ orderInfo.mark }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="orderInfo.status != 0">
|
||||
<div class="wrapper" v-if="orderInfo.deliveryType === 'express'">
|
||||
<div class="item acea-row row-between">
|
||||
<div>配送方式：</div>
|
||||
<div class="conter">发货</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between">
|
||||
<div>快递公司：</div>
|
||||
<div class="conter">{{ orderInfo.deliveryName || "" }}</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between">
|
||||
<div>快递号：</div>
|
||||
<div class="conter">{{ orderInfo.deliveryId || "" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper" v-else>
|
||||
<div class="item acea-row row-between">
|
||||
<div>配送方式：</div>
|
||||
<div class="conter">送货</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between">
|
||||
<div>配送人：</div>
|
||||
<div class="conter">{{ orderInfo.deliveryName || "" }}</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between">
|
||||
<div>配送电话：</div>
|
||||
<div class="conter acea-row row-middle row-right">
|
||||
{{ orderInfo.deliveryId || "" }}
|
||||
<span class="copy">拨打</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 退款订单详情 -->
|
||||
<div class="wrapper" v-if="refundOrder">
|
||||
<div class="item acea-row row-between">
|
||||
<div>收货人：</div>
|
||||
<div class="conter">{{ orderInfo.realName }}</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between">
|
||||
<div>联系电话：</div>
|
||||
<div class="conter">{{ orderInfo.userPhone }}</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between">
|
||||
<div>收货地址：</div>
|
||||
<div class="conter">{{ orderInfo.userAddress }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="item acea-row row-between">
|
||||
<div>支付金额：</div>
|
||||
<div class="conter">￥{{ orderInfo.totalPrice }}</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between" v-if="orderInfo.couponPrice > 0">
|
||||
<div>优惠券抵扣：</div>
|
||||
<div class="conter">-￥{{ orderInfo.couponPrice }}</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between" v-if="orderInfo.useIntegral > 0">
|
||||
<div>积分抵扣：</div>
|
||||
<div class="conter">-￥{{ orderInfo.deductionPrice }}</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between" v-if="orderInfo.payPostage > 0">
|
||||
<div>运费：</div>
|
||||
<div class="conter">￥{{ orderInfo.payPostage }}</div>
|
||||
</div>
|
||||
<div class="actualPay acea-row row-right">
|
||||
实付款：
|
||||
<span class="money font-color-red">￥{{ orderInfo.payPrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:100rpx;" v-if="!refundOrder && offlineStatus"></div>
|
||||
<div class="footer acea-row row-right row-middle" v-if="!refundOrder && offlineStatus">
|
||||
<template v-if="status.type == 0">
|
||||
<div class="bnt cancel" @click="cancelOrder">取消订单</div>
|
||||
<div class="bnt bg-color-red" @click="pay = true">立即付款</div>
|
||||
</template>
|
||||
<template v-if="status.type == 1">
|
||||
<div
|
||||
class="bnt cancel"
|
||||
@click="$yrouter.push({ path: '/pages/order/GoodsReturn/index',query:{id:orderInfo.orderId } })"
|
||||
>申请退款</div>
|
||||
</template>
|
||||
<template v-if="status.type == 2">
|
||||
<div
|
||||
class="bnt default"
|
||||
@click="
|
||||
$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})
|
||||
"
|
||||
>查看物流</div>
|
||||
<div class="bnt bg-color-red" @click="takeOrder">确认收货</div>
|
||||
</template>
|
||||
<template v-if="status.type == 3 && orderInfo.deliveryType == 'express'">
|
||||
<div
|
||||
class="bnt default"
|
||||
@click="
|
||||
$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})
|
||||
"
|
||||
>查看物流</div>
|
||||
</template>
|
||||
<template v-if="status.type == 4">
|
||||
<div class="bnt cancel" @click="delOrder">删除订单</div>
|
||||
<div
|
||||
class="bnt default"
|
||||
@click="
|
||||
$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})
|
||||
"
|
||||
>查看物流</div>
|
||||
</template>
|
||||
<template v-if="status.type == 6">
|
||||
<div
|
||||
class="bnt bg-color-red"
|
||||
@click="
|
||||
$yrouter.push({ path: '/pages/activity/GroupRule/index',query:{id:orderInfo.pinkId} })
|
||||
"
|
||||
>查看拼团</div>
|
||||
</template>
|
||||
</div>
|
||||
<Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment>
|
||||
<div class="geoPage" v-if="mapShow">
|
||||
<iframe
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameborder="0"
|
||||
scrolling="no"
|
||||
:src="'https://apis.map.qq.com/uri/v1/geocoder?coord=' + system_store.latitude + ',' +system_store.longitude +'&referer=' +mapKey"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.geoPage {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: 10000;
|
||||
}
|
||||
.order-details .writeOff {
|
||||
background-color: #fff;
|
||||
margin-top: 0.13rem;
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
.order-details .writeOff .title {
|
||||
font-size: 0.3rem;
|
||||
color: #282828;
|
||||
height: 0.87rem;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 0 0.3rem;
|
||||
line-height: 0.87rem;
|
||||
}
|
||||
.order-details .writeOff .grayBg {
|
||||
background-color: #f2f5f7;
|
||||
width: 5.9rem;
|
||||
height: 3.84rem;
|
||||
border-radius: 0.2rem 0.2rem 0 0;
|
||||
margin: 0.5rem auto 0 auto;
|
||||
padding-top: 0.55rem;
|
||||
}
|
||||
.order-details .writeOff .grayBg .pictrue {
|
||||
width: 2.9rem;
|
||||
height: 2.9rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.order-details .writeOff .grayBg .pictrue img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.order-details .writeOff .gear {
|
||||
width: 5.9rem;
|
||||
height: 0.3rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.order-details .writeOff .gear img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.order-details .writeOff .num {
|
||||
background-color: #f0c34c;
|
||||
width: 5.9rem;
|
||||
height: 0.84rem;
|
||||
color: #282828;
|
||||
font-size: 0.48rem;
|
||||
margin: 0 auto;
|
||||
border-radius: 0 0 0.2rem 0.2rem;
|
||||
text-align: center;
|
||||
padding-top: 0.04rem;
|
||||
}
|
||||
.order-details .writeOff .rules {
|
||||
margin: 0.46rem 0.3rem 0 0.3rem;
|
||||
border-top: 0.01rem solid #f0f0f0;
|
||||
padding-top: 0.1rem;
|
||||
}
|
||||
.order-details .writeOff .rules .item {
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
.order-details .writeOff .rules .item .rulesTitle {
|
||||
font-size: 0.28rem;
|
||||
color: #282828;
|
||||
}
|
||||
.order-details .writeOff .rules .item .rulesTitle .iconfont {
|
||||
font-size: 0.3rem;
|
||||
color: #333;
|
||||
margin-right: 0.08rem;
|
||||
margin-top: 0.05rem;
|
||||
}
|
||||
.order-details .writeOff .rules .item .info {
|
||||
font-size: 0.28rem;
|
||||
color: #999;
|
||||
margin-top: 0.05rem;
|
||||
}
|
||||
.order-details .writeOff .rules .item .info .time {
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
.order-details .map {
|
||||
height: 0.86rem;
|
||||
font-size: 0.3rem;
|
||||
color: #282828;
|
||||
line-height: 0.86rem;
|
||||
border-bottom: 0.01rem solid #f0f0f0;
|
||||
margin-top: 0.13rem;
|
||||
background-color: #fff;
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
.order-details .map .place {
|
||||
font-size: 0.26rem;
|
||||
width: 1.76rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
line-height: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.order-details .map .place .iconfont {
|
||||
font-size: 0.27rem;
|
||||
height: 0.27rem;
|
||||
line-height: 0.27rem;
|
||||
margin: 0.02rem 0.03rem 0 0;
|
||||
}
|
||||
.order-details .address .name .iconfont {
|
||||
font-size: 0.34rem;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import OrderGoods from "@/components/OrderGoods";
|
||||
import { orderDetail } from "@/api/order";
|
||||
import Payment from "@/components/Payment";
|
||||
import DataFormat from "@/components/DataFormat";
|
||||
import { isWeixin, copyClipboard } from "@/utils";
|
||||
import { mapGetters } from "vuex";
|
||||
import {
|
||||
cancelOrderHandle,
|
||||
takeOrderHandle,
|
||||
delOrderHandle,
|
||||
payOrderHandle
|
||||
} from "@/libs/order";
|
||||
// import { wechatEvevt } from "@/libs/wechat";
|
||||
|
||||
const NAME = "OrderDetails";
|
||||
|
||||
export default {
|
||||
name: NAME,
|
||||
components: {
|
||||
OrderGoods,
|
||||
Payment,
|
||||
DataFormat
|
||||
},
|
||||
props: {},
|
||||
data: function() {
|
||||
return {
|
||||
offlinePayStatus: 2,
|
||||
orderTypeName: "普通订单",
|
||||
orderTypeNameStatus: true,
|
||||
offlineStatus: true,
|
||||
id: "",
|
||||
orderInfo: {
|
||||
_status: {}
|
||||
},
|
||||
status: {},
|
||||
pay: false,
|
||||
payType: ["yue", "weixin"],
|
||||
from: "routine",
|
||||
system_store: {},
|
||||
mapKay: "",
|
||||
mapShow: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
refundOrder() {
|
||||
return this.orderInfo.refund_status > 0;
|
||||
},
|
||||
...mapGetters(["userInfo"])
|
||||
},
|
||||
onShow() {
|
||||
this.id = this.$yroute.query.id;
|
||||
this.getDetail();
|
||||
},
|
||||
inject: ["app"],
|
||||
mounted: function() {
|
||||
this.id = this.$yroute.query.id;
|
||||
// this.getDetail();
|
||||
},
|
||||
methods: {
|
||||
copyClipboard,
|
||||
showChang: function() {
|
||||
if (isWeixin()) {
|
||||
let config = {
|
||||
latitude: this.system_store.latitude,
|
||||
longitude: this.system_store.longitude,
|
||||
name: this.system_store.name,
|
||||
address: this.system_store._detailed_address
|
||||
};
|
||||
// wechatEvevt("openLocation", config)
|
||||
// .then(res => {
|
||||
// })
|
||||
// .catch(res => {
|
||||
// if (res.is_ready) {
|
||||
// res.wx.openLocation(config);
|
||||
// }
|
||||
// });
|
||||
} else {
|
||||
if (!this.mapKey)
|
||||
return this.$dialog.error(
|
||||
"暂无法使用查看地图，请配置您的腾讯地图key"
|
||||
);
|
||||
this.mapShow = true;
|
||||
}
|
||||
},
|
||||
goBack() {
|
||||
const history = this.app.history,
|
||||
last = history[history.length - 1] || {};
|
||||
if (last.name === "MyOrder") return this.$yrouter.back();
|
||||
else return this.$yrouter.replace({ path: "/order/list/" });
|
||||
},
|
||||
cancelOrder() {
|
||||
cancelOrderHandle(this.orderInfo.orderId)
|
||||
.then(() => {
|
||||
setTimeout(() => this.goBack(), 300);
|
||||
})
|
||||
.catch(() => {
|
||||
this.getDetail();
|
||||
});
|
||||
},
|
||||
takeOrder() {
|
||||
takeOrderHandle(this.orderInfo.orderId).finally(() => {
|
||||
this.getDetail();
|
||||
});
|
||||
},
|
||||
delOrder() {
|
||||
delOrderHandle(this.orderInfo.orderId).then(() => {
|
||||
setTimeout(() => this.goBack(), 300);
|
||||
});
|
||||
},
|
||||
setOfflinePayStatus: function(status) {
|
||||
var that = this;
|
||||
that.offlinePayStatus = status;
|
||||
if (status === 1 && that.orderTypeNameStatus === true) {
|
||||
that.payType.push("offline");
|
||||
}
|
||||
},
|
||||
getOrderStatus: function() {
|
||||
let orderInfo = this.orderInfo || {},
|
||||
_status = orderInfo._status || { _type: 0 },
|
||||
status = {};
|
||||
let type = parseInt(_status._type),
|
||||
delivery_type = orderInfo.deliveryType,
|
||||
seckill_id = orderInfo.seckillId ? parseInt(orderInfo.seckillId) : 0,
|
||||
bargain_id = orderInfo.bargainId ? parseInt(orderInfo.bargainId) : 0,
|
||||
combination_id = orderInfo.combinationId
|
||||
? parseInt(orderInfo.combinationId)
|
||||
: 0;
|
||||
status = {
|
||||
type: type,
|
||||
class_status: 0
|
||||
};
|
||||
if (type == 1 && combination_id > 0) {
|
||||
status.type = 6;
|
||||
status.class_status = 1;
|
||||
} //查看拼团
|
||||
if (type == 2 && delivery_type == "express") status.class_status = 2; //查看物流
|
||||
if (type == 2) status.class_status = 3; //确认收货
|
||||
if (type == 4 || type === 0) status.class_status = 4; //删除订单
|
||||
if (
|
||||
!seckill_id &&
|
||||
!bargain_id &&
|
||||
!combination_id &&
|
||||
(type == 3 || type == 4)
|
||||
)
|
||||
status.class_status = 5; //再次购买
|
||||
if (type == 9) {
|
||||
//线下付款
|
||||
status.class_status = 0;
|
||||
this.offlineStatus = false;
|
||||
}
|
||||
this.status = status;
|
||||
},
|
||||
getDetail() {
|
||||
const id = this.id;
|
||||
if (!id) return this.$dialog.error("订单不存在");
|
||||
orderDetail(id)
|
||||
.then(res => {
|
||||
this.orderInfo = res.data;
|
||||
this.getOrderStatus();
|
||||
if (this.orderInfo.combinationId > 0) {
|
||||
this.orderTypeName = "拼团订单";
|
||||
this.orderTypeNameStatus = false;
|
||||
} else if (this.orderInfo.bargainId > 0) {
|
||||
this.orderTypeName = "砍价订单";
|
||||
this.orderTypeNameStatus = false;
|
||||
} else if (this.orderInfo.seckillId > 0) {
|
||||
this.orderTypeName = "秒杀订单";
|
||||
this.orderTypeNameStatus = false;
|
||||
}
|
||||
this.system_store = res.data.system_store || {};
|
||||
this.mapKey = res.data.mapKay;
|
||||
this.setOfflinePayStatus(this.orderInfo.offlinePayStatus);
|
||||
})
|
||||
.catch(err => {
|
||||
wx.showToast({
|
||||
title: err.response.data.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
});
|
||||
},
|
||||
async toPay(type) {
|
||||
var that = this;
|
||||
await payOrderHandle(this.orderInfo.orderId, type, that.from);
|
||||
that.getDetail();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import App from './index'
|
||||
|
||||
const app = new Vue(App)
|
||||
app.$mount()
|
||||
@@ -0,0 +1,518 @@
|
||||
<template>
|
||||
<div class="order-submission">
|
||||
<div class="allAddress">
|
||||
<div class="nav acea-row">
|
||||
<div
|
||||
class="item font-color-red"
|
||||
:class="shipping_type === 0 ? 'on' : 'on2'"
|
||||
@click="addressType(0)"
|
||||
></div>
|
||||
<div
|
||||
class="item font-color-red"
|
||||
:class="shipping_type === 1 ? 'on' : 'on2'"
|
||||
@click="addressType(1)"
|
||||
v-if="storeSelfMention"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="address acea-row row-between-wrapper"
|
||||
v-if="shipping_type === 0"
|
||||
@click="addressTap"
|
||||
>
|
||||
<div class="addressCon" v-if="addressInfo.realName">
|
||||
<div class="name">
|
||||
{{ addressInfo.realName }}
|
||||
<span class="phone">{{ addressInfo.phone }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="default font-color-red" v-if="addressInfo.isDefault">[默认]</span>
|
||||
{{ addressInfo.province }}{{ addressInfo.city
|
||||
}}{{ addressInfo.district }}{{ addressInfo.detail }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="addressCon" v-else>
|
||||
<div class="setaddress">设置收货地址</div>
|
||||
</div>
|
||||
<div class="iconfont icon-jiantou"></div>
|
||||
</div>
|
||||
<!--<div class="address acea-row row-between-wrapper" v-else>-->
|
||||
<!--<div class="addressCon">-->
|
||||
<!--<div class="name">-->
|
||||
<!--{{ systemStore.name }}-->
|
||||
<!--<span class="phone">{{ systemStore.phone }}</span>-->
|
||||
<!--</div>-->
|
||||
<!--<div>-->
|
||||
<!--{{ systemStore._detailed_address }}-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<div class="line">
|
||||
<img :src="$VUE_APP_RESOURCES_URL+'/images/line.jpg'" />
|
||||
</div>
|
||||
</div>
|
||||
<OrderGoods :evaluate="0" :cartInfo="orderGroupInfo.cartInfo"></OrderGoods>
|
||||
<div class="wrapper">
|
||||
<div class="item acea-row row-between-wrapper" @click="couponTap" v-if="deduction === false">
|
||||
<div>优惠券</div>
|
||||
<div class="discount">
|
||||
{{ usableCoupon.couponTitle || "请选择" }}
|
||||
<span class="iconfont icon-jiantou"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between-wrapper" v-if="deduction === false">
|
||||
<div>积分抵扣</div>
|
||||
<div class="discount">
|
||||
<div class="select-btn">
|
||||
<div class="checkbox-wrapper">
|
||||
<!-- <input type="checkbox" v-model="useIntegral" @click="changeUseIntegral"/> -->
|
||||
<checkbox-group @change="changeUseIntegral">
|
||||
<label class="well-check">
|
||||
<span class="integral">
|
||||
当前积分
|
||||
<span class="num font-color-red">{{ userInfo.integral || 0 }}</span>
|
||||
</span>
|
||||
<checkbox value :checked="useIntegral ? true : false"></checkbox>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between-wrapper" v-if="shipping_type === 0">
|
||||
<div>快递费用</div>
|
||||
<div class="discount">
|
||||
{{
|
||||
orderGroupInfo.priceGroup.storePostage > 0
|
||||
? orderGroupInfo.priceGroup.storePostage
|
||||
: "免运费"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="item acea-row row-between-wrapper">
|
||||
<div>联系人</div>
|
||||
<div class="discount">
|
||||
<input type="text" placeholder="请填写您的联系姓名" v-model="contacts" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between-wrapper">
|
||||
<div>联系电话</div>
|
||||
<div class="discount">
|
||||
<input type="text" placeholder="请填写您的联系电话" v-model="contactsTel" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>备注信息</div>
|
||||
<textarea placeholder="请添加备注（150字以内）" v-model="mark"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="item">
|
||||
<div>支付方式</div>
|
||||
<div class="list">
|
||||
<div
|
||||
class="payItem acea-row row-middle"
|
||||
:class="active === 'weixin' ? 'on' : ''"
|
||||
@click="payItem('weixin')"
|
||||
v-show="isWeixin"
|
||||
>
|
||||
<div class="name acea-row row-center-wrapper">
|
||||
<div class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></div>微信支付
|
||||
</div>
|
||||
<div class="tip">微信快捷支付</div>
|
||||
</div>
|
||||
<div
|
||||
class="payItem acea-row row-middle"
|
||||
:class="active === 'weixin' ? 'on' : ''"
|
||||
@click="payItem('weixin')"
|
||||
v-show="!isWeixin"
|
||||
>
|
||||
<div class="name acea-row row-center-wrapper">
|
||||
<div class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></div>微信支付
|
||||
</div>
|
||||
<div class="tip">微信快捷支付</div>
|
||||
</div>
|
||||
<div
|
||||
class="payItem acea-row row-middle"
|
||||
:class="active === 'yue' ? 'on' : ''"
|
||||
@click="payItem('yue')"
|
||||
>
|
||||
<div class="name acea-row row-center-wrapper">
|
||||
<div class="iconfont icon-icon-test" :class="active === 'yue' ? 'bounceIn' : ''"></div>余额支付
|
||||
</div>
|
||||
<div class="tip">可用余额：{{ userInfo.nowMoney || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="moneyList">
|
||||
<div class="item acea-row row-between-wrapper" v-if="orderPrice.totalPrice !== undefined">
|
||||
<div>商品总价：</div>
|
||||
<div class="money">￥{{ orderPrice.totalPrice }}</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between-wrapper" v-if="orderPrice.payPostage > 0">
|
||||
<div>运费：</div>
|
||||
<div class="money">￥{{ orderPrice.payPostage }}</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between-wrapper" v-if="orderPrice.couponPrice > 0">
|
||||
<div>优惠券抵扣：</div>
|
||||
<div class="money">-￥{{ orderPrice.couponPrice }}</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between-wrapper" v-if="orderPrice.deductionPrice > 0">
|
||||
<div>积分抵扣：</div>
|
||||
<div class="money">-￥{{ orderPrice.deductionPrice }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:120rpx"></div>
|
||||
<div class="footer acea-row row-between-wrapper">
|
||||
<div>
|
||||
合计:
|
||||
<span class="font-color-red">￥{{ orderPrice.payPrice }}</span>
|
||||
</div>
|
||||
<div class="settlement" @click="createOrder">立即结算</div>
|
||||
</div>
|
||||
<CouponListWindow
|
||||
v-on:couponchange="changecoupon($event)"
|
||||
v-model="showCoupon"
|
||||
:price="orderPrice.totalPrice"
|
||||
:checked="usableCoupon.id"
|
||||
@checked="changeCoupon"
|
||||
></CouponListWindow>
|
||||
<AddressWindow
|
||||
@checked="changeAddress"
|
||||
@redirect="addressRedirect"
|
||||
v-model="showAddress"
|
||||
:checked="addressInfo.id"
|
||||
ref="mychild"
|
||||
></AddressWindow>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.order-submission .wrapper .shipping select {
|
||||
color: #999;
|
||||
padding-right: 0.15rem;
|
||||
}
|
||||
.order-submission .wrapper .shipping .iconfont {
|
||||
font-size: 0.3rem;
|
||||
color: #515151;
|
||||
}
|
||||
.order-submission .allAddress {
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to bottom, #e93323 0%, #f5f5f5 100%);
|
||||
background-image: -webkit-linear-gradient(
|
||||
to bottom,
|
||||
#e93323 0%,
|
||||
#f5f5f5 100%
|
||||
);
|
||||
background-image: -moz-linear-gradient(to bottom, #e93323 0%, #f5f5f5 100%);
|
||||
padding-top: 0.2rem;
|
||||
}
|
||||
.order-submission .allAddress .nav {
|
||||
width: 7.1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.order-submission .allAddress .nav .item {
|
||||
width: 3.55rem;
|
||||
}
|
||||
.order-submission .allAddress .nav .item.on {
|
||||
position: relative;
|
||||
width: 2.5rem;
|
||||
}
|
||||
.order-submission .allAddress .nav .item.on:before {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
/*content: "快递配送";*/
|
||||
font-size: 0.28rem;
|
||||
display: block;
|
||||
height: 0;
|
||||
width: 3.55rem;
|
||||
border-width: 0 0.2rem 0.8rem 0;
|
||||
border-style: none solid solid;
|
||||
border-color: transparent transparent #fff;
|
||||
z-index: 9;
|
||||
border-radius: 0.07rem 0.3rem 0 0;
|
||||
text-align: center;
|
||||
line-height: 0.8rem;
|
||||
}
|
||||
.order-submission .allAddress .nav .item:nth-of-type(2).on:before {
|
||||
content: "到店自提";
|
||||
border-width: 0 0 0.8rem 0.2rem;
|
||||
border-radius: 0.3rem 0.07rem 0 0;
|
||||
}
|
||||
.order-submission .allAddress .nav .item.on2 {
|
||||
position: relative;
|
||||
}
|
||||
.order-submission .allAddress .nav .item.on2:before {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
content: "到店自提";
|
||||
font-size: 0.28rem;
|
||||
display: block;
|
||||
height: 0;
|
||||
width: 4.6rem;
|
||||
border-width: 0 0 0.6rem 0.6rem;
|
||||
border-style: none solid solid;
|
||||
border-color: transparent transparent #f7c1bd;
|
||||
border-radius: 0.4rem 0.06rem 0 0;
|
||||
text-align: center;
|
||||
line-height: 0.6rem;
|
||||
}
|
||||
.order-submission .allAddress .nav .item:nth-of-type(1).on2:before {
|
||||
content: "快递配送";
|
||||
border-width: 0 0.6rem 0.6rem 0;
|
||||
border-radius: 0.06rem 0.4rem 0 0;
|
||||
}
|
||||
.order-submission .allAddress .address {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 1.5rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.order-submission .allAddress .line {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.order-submission .wrapper .item .discount input::placeholder {
|
||||
color: #ccc;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import OrderGoods from "@/components/OrderGoods";
|
||||
import CouponListWindow from "@/components/CouponListWindow";
|
||||
import AddressWindow from "@/components/AddressWindow";
|
||||
import { postOrderConfirm, postOrderComputed, createOrder } from "@/api/order";
|
||||
import { mapGetters } from "vuex";
|
||||
import { weappPay } from "@/libs/wechat";
|
||||
import { isWeixin } from "@/utils";
|
||||
|
||||
const NAME = "OrderSubmission",
|
||||
_isWeixin = isWeixin();
|
||||
export default {
|
||||
name: NAME,
|
||||
components: {
|
||||
OrderGoods,
|
||||
CouponListWindow,
|
||||
AddressWindow
|
||||
},
|
||||
props: {},
|
||||
data: function() {
|
||||
return {
|
||||
offlinePayStatus: 2,
|
||||
from: "routine",
|
||||
// from: _isWeixin ? "weixin" : "weixinh5",
|
||||
deduction: true,
|
||||
isWeixin: _isWeixin,
|
||||
pinkId: 0,
|
||||
active: "weixin",
|
||||
showCoupon: false,
|
||||
showAddress: false,
|
||||
addressInfo: {},
|
||||
couponId: 0,
|
||||
orderGroupInfo: {
|
||||
priceGroup: {}
|
||||
},
|
||||
usableCoupon: {},
|
||||
addressLoaded: false,
|
||||
useIntegral: false,
|
||||
orderPrice: {
|
||||
payPrice: "计算中"
|
||||
},
|
||||
mark: "",
|
||||
system_store: {},
|
||||
shipping_type: 0,
|
||||
contacts: "",
|
||||
contactsTel: "",
|
||||
store_self_mention: 0
|
||||
};
|
||||
},
|
||||
computed: mapGetters(["userInfo"]),
|
||||
watch: {
|
||||
useIntegral() {
|
||||
this.computedPrice();
|
||||
},
|
||||
$yroute(n) {
|
||||
if (n.name === NAME) this.getCartInfo();
|
||||
},
|
||||
shipping_type() {
|
||||
this.computedPrice();
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
let that = this;
|
||||
that.getCartInfo();
|
||||
if (that.$yroute.query.pinkid !== undefined)
|
||||
that.pinkId = that.$yroute.query.pinkid;
|
||||
},
|
||||
methods: {
|
||||
addressType: function(index) {
|
||||
if (index && !this.system_store.id)
|
||||
return this.$dialog.error("暂无门店信息，您无法选择到店自提！");
|
||||
this.shipping_type = index;
|
||||
},
|
||||
changeUseIntegral: function(e) {
|
||||
// this.computedPrice();
|
||||
this.useIntegral = e.mp.detail.value[0];
|
||||
},
|
||||
computedPrice() {
|
||||
let shipping_type = this.shipping_type;
|
||||
postOrderComputed(this.orderGroupInfo.orderKey, {
|
||||
addressId: this.addressInfo.id,
|
||||
useIntegral: this.useIntegral ? 1 : 0,
|
||||
couponId: this.usableCoupon.id || 0,
|
||||
shipping_type: parseInt(shipping_type) + 1
|
||||
}).then(res => {
|
||||
const data = res.data;
|
||||
if (data.status === "EXTEND_ORDER") {
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/main",
|
||||
query: { id: data.result.orderId }
|
||||
});
|
||||
} else {
|
||||
this.orderPrice = data.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
getCartInfo() {
|
||||
const cartIds = this.$yroute.query.id;
|
||||
if (!cartIds) {
|
||||
this.$dialog.error("参数有误");
|
||||
return this.$yrouter.back();
|
||||
}
|
||||
postOrderConfirm(cartIds)
|
||||
.then(res => {
|
||||
this.offlinePayStatus = res.data.offline_pay_status;
|
||||
this.orderGroupInfo = res.data;
|
||||
this.deduction = res.data.deduction;
|
||||
this.usableCoupon = res.data.usableCoupon || {};
|
||||
this.addressInfo = res.data.addressInfo || {};
|
||||
this.system_store = res.data.system_store || {};
|
||||
this.store_self_mention = res.data.store_self_mention;
|
||||
this.computedPrice();
|
||||
})
|
||||
.catch(() => {
|
||||
this.$dialog.error("加载订单数据失败");
|
||||
});
|
||||
},
|
||||
addressTap: function() {
|
||||
this.showAddress = true;
|
||||
if (!this.addressLoaded) {
|
||||
this.addressLoaded = true;
|
||||
this.$refs.mychild.getAddressList();
|
||||
}
|
||||
},
|
||||
addressRedirect() {
|
||||
this.addressLoaded = false;
|
||||
this.showAddress = false;
|
||||
},
|
||||
couponTap: function() {
|
||||
this.showCoupon = true;
|
||||
},
|
||||
changeCoupon: function(coupon) {
|
||||
if (!coupon) {
|
||||
this.usableCoupon = { couponTitle: "不使用优惠券", id: 0 };
|
||||
} else {
|
||||
this.usableCoupon = coupon;
|
||||
}
|
||||
this.computedPrice();
|
||||
},
|
||||
payItem: function(index) {
|
||||
this.active = index;
|
||||
},
|
||||
changeAddress(addressInfo) {
|
||||
this.addressInfo = addressInfo;
|
||||
},
|
||||
createOrder() {
|
||||
let shipping_type = this.shipping_type;
|
||||
if (!this.active) return this.$dialog.toast({ mes: "请选择支付方式" });
|
||||
if (!this.addressInfo.id && !this.shipping_type)
|
||||
return this.$dialog.toast({ mes: "请选择收货地址" });
|
||||
if (this.shipping_type) {
|
||||
if (
|
||||
(this.contacts === "" || this.contactsTel === "") &&
|
||||
this.shipping_type
|
||||
)
|
||||
return this.$dialog.toast({ mes: "请填写联系人或联系人电话" });
|
||||
if (!/^1(3|4|5|7|8|9|6)\d{9}$/.test(this.contactsTel)) {
|
||||
return this.$dialog.toast({ mes: "请填写正确的手机号" });
|
||||
}
|
||||
if (!/^[\u4e00-\u9fa5\w]{2,16}$/.test(this.contacts)) {
|
||||
return this.$dialog.toast({ mes: "请填写您的真实姓名" });
|
||||
}
|
||||
}
|
||||
|
||||
wx.showLoading({ title: "生成订单中" });
|
||||
createOrder(this.orderGroupInfo.orderKey, {
|
||||
realName: this.contacts,
|
||||
phone: this.contactsTel,
|
||||
addressId: this.addressInfo.id,
|
||||
useIntegral: this.useIntegral ? 1 : 0,
|
||||
couponId: this.usableCoupon.id || 0,
|
||||
payType: this.active,
|
||||
pinkId: this.pinkId,
|
||||
seckillId: this.orderGroupInfo.seckill_id,
|
||||
combinationId: this.orderGroupInfo.combination_id,
|
||||
bargainId: this.orderGroupInfo.bargain_id,
|
||||
from: this.from,
|
||||
mark: this.mark || "",
|
||||
shippingType: parseInt(shipping_type) + 1
|
||||
})
|
||||
.then(res => {
|
||||
wx.hideLoading();
|
||||
const data = res.data;
|
||||
switch (data.status) {
|
||||
case "ORDER_EXIST":
|
||||
case "EXTEND_ORDER":
|
||||
case "PAY_DEFICIENCY":
|
||||
case "PAY_ERROR":
|
||||
this.$dialog.toast({ mes: res.msg });
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/main",
|
||||
query: { id: data.result.orderId }
|
||||
});
|
||||
break;
|
||||
case "SUCCESS":
|
||||
wx.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/main",
|
||||
query: { id: data.result.orderId }
|
||||
});
|
||||
break;
|
||||
case "WECHAT_H5_PAY":
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/main",
|
||||
query: { id: data.result.orderId }
|
||||
});
|
||||
setTimeout(() => {
|
||||
// location.href = data.result.jsConfig.mweb_url;
|
||||
}, 100);
|
||||
break;
|
||||
case "WECHAT_PAY":
|
||||
weappPay(data.result.jsConfig).then(res => {
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/main",
|
||||
query: { id: data.result.orderId }
|
||||
});
|
||||
});
|
||||
|
||||
// 下面为原先微信支付方式，
|
||||
// pay(data.result.jsConfig).finally(() => {
|
||||
// this.$yrouter.replace({
|
||||
// path: "/pages/order/OrderDetails/main" ,query: { id: data.result.orderId}
|
||||
// });
|
||||
// });
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
wx.hideLoading();
|
||||
this.$dialog.error(err.response.data.msg || "创建订单失败");
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import App from './index'
|
||||
|
||||
const app = new Vue(App)
|
||||
app.$mount()
|
||||
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="payment-status">
|
||||
<!--失败时： 用icon-iconfontguanbi fail替换icon-duihao2 bg-color-red-->
|
||||
<div class="iconfont icon-duihao2 bg-color-red"></div>
|
||||
<!-- 失败时：订单支付失败 -->
|
||||
<div class="status">订单支付成功</div>
|
||||
<div class="wrapper">
|
||||
<div class="item acea-row row-between-wrapper">
|
||||
<div>订单编号</div>
|
||||
<div class="itemCom">wx3265361456134568</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between-wrapper">
|
||||
<div>下单时间</div>
|
||||
<div class="itemCom">2019-01-09 18:05</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between-wrapper">
|
||||
<div>支付方式</div>
|
||||
<div class="itemCom">微信支付</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between-wrapper">
|
||||
<div>支付金额</div>
|
||||
<div class="itemCom">2222.00</div>
|
||||
</div>
|
||||
<!--失败时加上这个 -->
|
||||
<!--<div class='item acea-row row-between-wrapper'>-->
|
||||
<!--<div>失败原因</div>-->
|
||||
<!--<div class='itemCom'>账户余额不足</div>-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
<!--失败时： 重新购买 -->
|
||||
<div class="returnBnt bg-color-red">返回查看订单</div>
|
||||
<div class="returnBnt cart-color">返回首页</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import App from './index'
|
||||
|
||||
const app = new Vue(App)
|
||||
app.$mount()
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="return-list" ref="container">
|
||||
<div class="goodWrapper" v-for="(order,orderListIndex) in orderList" :key="orderListIndex">
|
||||
<div class="iconfont icon-tuikuanzhong powder" v-if="order._status._type === -1"></div>
|
||||
<div class="iconfont icon-yituikuan" v-if="order._status._type === -2"></div>
|
||||
<div class="orderNum">订单号：{{ order.orderId }}</div>
|
||||
<div
|
||||
class="item acea-row row-between-wrapper"
|
||||
v-for="(cart,cartInfoIndex) in order.cartInfo"
|
||||
:key="cartInfoIndex"
|
||||
@click="$yrouter.push({ path: '/pages/order/OrderDetails/index',query:{id:order.orderId} })"
|
||||
>
|
||||
<div class="pictrue">
|
||||
<img
|
||||
:src="cart.productInfo.image"
|
||||
class="image"
|
||||
@click.stop="
|
||||
$yrouter.push({ path: '/pages/shop/GoodsCon/index',query: { id: cart.productInfo.id } })
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="acea-row row-between-wrapper">
|
||||
<div class="name line1">{{ cart.productInfo.storeName }}</div>
|
||||
<div class="num">x {{ cart.cartNum }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="attr line1"
|
||||
v-if="cart.productInfo.attrInfo"
|
||||
>{{ cart.productInfo.attrInfo.suk }}</div>
|
||||
<div class="attr line1" v-else>{{ cart.productInfo.storeName }}</div>
|
||||
<div class="money">￥{{ cart.productInfo.price }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="totalSum">
|
||||
共{{ order.cartInfo.length || 0 }}件商品，总金额
|
||||
<span
|
||||
class="font-color-red price"
|
||||
>￥{{ order.payPrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="noCart" v-if="orderList.length === 0 && page > 1">
|
||||
<div class="pictrue">
|
||||
<img :src="$VUE_APP_RESOURCES_URL+'/images/noOrder.png'" />
|
||||
</div>
|
||||
</div>
|
||||
<Loading :loaded="loaded" :loading="loading"></Loading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getOrderList } from "@/api/order";
|
||||
import Loading from "@/components/Loading";
|
||||
|
||||
export default {
|
||||
name: "ReturnList",
|
||||
components: {
|
||||
Loading
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
orderList: [],
|
||||
page: 1,
|
||||
limit: 20,
|
||||
loading: false,
|
||||
loaded: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getOrderList() {
|
||||
const { page, limit } = this;
|
||||
if (this.loading || this.loaded) return;
|
||||
this.loading = true;
|
||||
getOrderList({
|
||||
page,
|
||||
limit,
|
||||
type: -3
|
||||
}).then(res => {
|
||||
this.orderList = this.orderList.concat(res.data);
|
||||
this.loading = false;
|
||||
this.loaded = res.data.length < limit;
|
||||
this.page++;
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getOrderList();
|
||||
},
|
||||
onReachBottom() {
|
||||
!this.loading && this.getOrderList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import App from './index'
|
||||
|
||||
const app = new Vue(App)
|
||||
app.$mount()
|
||||
Reference in New Issue
Block a user