Init project
This commit is contained in:
lifizer
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<view class="apply-return">
|
||||
<view class="goodsStyle acea-row row-between" v-for="cart in orderInfo.cartInfo" :key="cart.id">
|
||||
<view class="pictrue">
|
||||
<image :src="cart.productInfo.image" class="image" />
|
||||
</view>
|
||||
<view class="text acea-row row-between">
|
||||
<view class="name line2">{{ cart.productInfo.storeName }}</view>
|
||||
<view class="money">
|
||||
<view>
|
||||
￥{{
|
||||
cart.productInfo.attrInfo
|
||||
? cart.productInfo.attrInfo.price
|
||||
: cart.productInfo.price
|
||||
}}
|
||||
</view>
|
||||
<view class="num">x{{ cart.cartNum }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item acea-row row-between-wrapper">
|
||||
<view>退货件数</view>
|
||||
<view class="num">{{ orderInfo.totalNum }}</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper">
|
||||
<view>退款金额</view>
|
||||
<view class="num">￥{{ orderInfo.payPrice }}</view>
|
||||
</view>
|
||||
<picker :value="reason" :range="reasonList" @change="changeReason">
|
||||
<view class="item acea-row row-between-wrapper">
|
||||
<view>退款原因</view>
|
||||
<view class="num">{{reason}}</view>
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="item textarea acea-row row-between">
|
||||
<view>备注说明</view>
|
||||
<textarea placeholder="填写备注信息，100字以内" class="num" v-model="refundReasonWapExplain"></textarea>
|
||||
</view>
|
||||
</view>
|
||||
<view class="returnBnt bg-color-red" @click="submit">申请退款</view>
|
||||
</view>
|
||||
</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: "",
|
||||
refundReasonWapExplain: ""
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeReason(e) {
|
||||
this.reason = this.reasonList[e.mp.detail.value];
|
||||
},
|
||||
getOrderDetail() {
|
||||
orderDetail(this.id)
|
||||
.then(res => {
|
||||
this.orderInfo = res.data;
|
||||
})
|
||||
.catch(err => {
|
||||
uni.showToast({
|
||||
title: err.msg || err.response.data.msg|| err.response.data.message,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
});
|
||||
},
|
||||
getRefundReason() {
|
||||
getRefundReason().then(res => {
|
||||
this.reasonList = res.data;
|
||||
});
|
||||
},
|
||||
submit() {
|
||||
const refundReasonWapExplain = trim(this.refundReasonWapExplain),
|
||||
text = this.reason;
|
||||
if (!text) {
|
||||
uni.showToast({
|
||||
title: "请选择退款原因",
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
return
|
||||
}
|
||||
postOrderRefund({
|
||||
text,
|
||||
uni: this.orderInfo.orderId,
|
||||
refundReasonWapExplain
|
||||
})
|
||||
.then(res => {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "success",
|
||||
duration: 2000
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$yrouter.back();
|
||||
}, 1500);
|
||||
})
|
||||
.catch(err => {
|
||||
uni.showToast({
|
||||
title: err.msg || err.response.data.msg|| err.response.data.message,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.id = this.$yroute.query.id || 0;
|
||||
this.getOrderDetail();
|
||||
this.getRefundReason();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,398 @@
|
||||
<template>
|
||||
<view class="logistics">
|
||||
<view class="header acea-row row-between row-top" v-for="cart in cartInfo" :key="cart.id">
|
||||
<view class="pictrue">
|
||||
<image :src="cart.productInfo.image" />
|
||||
</view>
|
||||
<view class="text acea-row row-between">
|
||||
<view class="name line2">{{ cart.productInfo.store_name }}</view>
|
||||
<view class="money">
|
||||
<view>￥{{ cart.truePrice }}</view>
|
||||
<view>x{{ cart.cart_num }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="logisticsCon" style="margin-bottom: 5px">
|
||||
<view class="company acea-row row-between-wrapper">
|
||||
<view class="picTxt acea-row row-between-wrapper">
|
||||
<view class="iconfont icon-wuliu"></view>
|
||||
<view class="text">
|
||||
<view>
|
||||
<text class="name line1">物流公司：</text>
|
||||
{{ orderInfo.deliveryName }}
|
||||
</view>
|
||||
<view class="express line1">
|
||||
<text class="name">快递单号：</text>
|
||||
{{ orderInfo.deliveryId }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="copy acea-row row-center-wrapper copy-data"
|
||||
@click="copyClipboard(orderInfo.deliveryId)"
|
||||
>复制单号</view>
|
||||
</view>
|
||||
<view class="item" v-for="(express, expressListIndex) in expressList" :key="expressListIndex">
|
||||
<view class="circular" :class="expressListIndex === 0 ? 'on' : ''"></view>
|
||||
<view class="text">
|
||||
<view :class="expressListIndex === 0 ? 'font-color-red' : ''">{{ express.status }}</view>
|
||||
<view class="data">{{ express.time }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 物流进度条 -->
|
||||
<view class="div-bg bg-white" style="font-size:12px; background:#fff;">
|
||||
<!--物流跟踪-->
|
||||
<view style="margin-bottom:5px;">
|
||||
<view
|
||||
class="bg-white"
|
||||
style="width: 92%; margin-left: 4%;margin: auto;padding-left: 15px;padding-right: 15px;padding-top: 10px"
|
||||
>
|
||||
<view style="font-size: 26rpx;color: #111111; margin: 5px 0">
|
||||
物流跟踪
|
||||
<!--物流跟踪-->
|
||||
</view>
|
||||
<view>
|
||||
<view class="track-rcol">
|
||||
<view class="track-list">
|
||||
<view>
|
||||
<view
|
||||
class="track-list-item"
|
||||
v-for="(item,logisticsListindex) in logisticsList"
|
||||
:key="logisticsListindex"
|
||||
>
|
||||
<view class="active" v-if="logisticsListindex===0">
|
||||
<view></view>
|
||||
<i class="node-icon"></i>
|
||||
<text class="txt">{{item.acceptStation}}</text>
|
||||
<text class="time">{{item.acceptTime}}</text>
|
||||
</view>
|
||||
<view
|
||||
v-if="logisticsListindex > 0 && logisticsListindex !== logisticsList.length-1"
|
||||
>
|
||||
<i class="node-icon"></i>
|
||||
<text class="txt">{{item.acceptStation}}</text>
|
||||
<text class="time">{{item.acceptTime}}</text>
|
||||
</view>
|
||||
<view v-if="logisticsListindex === logisticsList.length-1" class="finall">
|
||||
<i class="div-spilander"></i>
|
||||
<i class="node-icon"></i>
|
||||
<text class="txt">{{item.acceptStation}}</text>
|
||||
<text class="time">{{item.acceptTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="no-express" v-if="loaded && !expressList.length">
|
||||
<image :src="webUrl+'/20210203153343122397.png'" />
|
||||
</view>
|
||||
<Recommend></Recommend>
|
||||
</view>
|
||||
</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 {
|
||||
webUrl:this.$VUE_APP_RESOURCES_URL,
|
||||
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 => {
|
||||
uni.showToast({
|
||||
title:
|
||||
err.msg || err.response.data.msg || err.response.data.message,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
});
|
||||
},
|
||||
getExpress() {
|
||||
if (!this.id) {
|
||||
uni.showToast({
|
||||
title: err.msg || err.response.data.msg || err.response.data.message,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
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 => {
|
||||
uni.showToast({
|
||||
title:
|
||||
err.msg || err.response.data.msg || err.response.data.message,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.no-express {
|
||||
margin: 1.5 * 100rpx 0;
|
||||
}
|
||||
|
||||
.no-express image {
|
||||
width: 6 * 100rpx;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 1 * 100rpx;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 3 * 100rpx;
|
||||
letter-spacing: 0 * 100rpx;
|
||||
color: #333333;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.fontblack {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.img2 {
|
||||
width: 0.81 * 100rpx;
|
||||
height: 0.8 * 100rpx;
|
||||
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: 1 * 100rpx;
|
||||
}
|
||||
|
||||
.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: 1 * 100rpx;
|
||||
}
|
||||
|
||||
.orderTitle {
|
||||
font-size: 1 * 100rpx;
|
||||
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.5 * 100rpx;
|
||||
}
|
||||
|
||||
.orderDetail {
|
||||
font-size: 0.26 * 100rpx;
|
||||
color: #666666;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.border-ceter {
|
||||
width: 92%;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.pay-button {
|
||||
width: 88%;
|
||||
height: 2.6 * 100rpx;
|
||||
position: relative;
|
||||
background-color: red;
|
||||
color: white;
|
||||
|
||||
margin-left: 6%;
|
||||
}
|
||||
|
||||
ul view {
|
||||
list-style: none;
|
||||
font-size: 0.24 * 100rpx;
|
||||
}
|
||||
|
||||
ul {
|
||||
}
|
||||
|
||||
.track-rcol {
|
||||
}
|
||||
|
||||
.track-list {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.track-list > view {
|
||||
position: relative;
|
||||
padding: 0 0 0.5 * 100rpx 20rpx;
|
||||
}
|
||||
.track-list .track-list-item {
|
||||
position: relative;
|
||||
padding: 0 0 0.5 * 100rpx 20rpx;
|
||||
line-height: 0.3 * 100rpx;
|
||||
border-left: 1px solid #d9d9d9;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.track-list view.first {
|
||||
color: red;
|
||||
padding-top: 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-left: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.track-list view.node-icon {
|
||||
position: absolute;
|
||||
left: -6.5px;
|
||||
border-radius: 50%;
|
||||
width: 0.2 * 100rpx;
|
||||
height: 0.2 * 100rpx;
|
||||
top: 4px;
|
||||
background-color: #b2b2b2;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.track-list view.active .node-icon {
|
||||
background-position: 0 -72px;
|
||||
background-color: #ea7c0a;
|
||||
width: 0.3 * 100rpx;
|
||||
z-index: 2;
|
||||
height: 0.3 * 100rpx;
|
||||
position: absolute;
|
||||
left: -0.19 * 100rpx;
|
||||
top: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.track-list view.time {
|
||||
margin-right: 20px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: #999;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.track-list view.txt {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
color: #999;
|
||||
left: 0.2 * 100rpx;
|
||||
top: 0.04 * 100rpx;
|
||||
}
|
||||
|
||||
.track-list view.first .time {
|
||||
text-align: left;
|
||||
width: 94%;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.track-list view.first .txt {
|
||||
color: red;
|
||||
text-align: left;
|
||||
width: 94%;
|
||||
}
|
||||
|
||||
.track-list view.finall {
|
||||
padding: 0px 0 0.5 * 100rpx 5px;
|
||||
line-height: 18px;
|
||||
border-color: white;
|
||||
border-left: 1px solid #ffffff;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.track-list view.finall .div-spilander {
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
left: -1.5px;
|
||||
height: 0.5 * 100rpx;
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,506 @@
|
||||
<template>
|
||||
<view class="my-order" ref="container">
|
||||
|
||||
<u-tabs lineColor="#FF564A" activeStyle="#FF564A" inactiveStyle="#C2C5CC" :current="type" :list="tabList"
|
||||
@click="tabChange"></u-tabs>
|
||||
|
||||
<view class="list" style="padding: 80rpx 0 30rpx;">
|
||||
<view class="item" v-for="(order,orderListIndex) in orderList" :key="orderListIndex">
|
||||
<view class="shop-info flex jc-between ai-center" v-if="order.merName">
|
||||
<view class="flex ai-center">
|
||||
<image :src="webUrl+'/20221008152431059973.png'" style="width: 40rpx;height: 40rpx"/>
|
||||
<text class="name">{{ order.merName }}</text>
|
||||
</view>
|
||||
<view class="flex ai-center">
|
||||
<image :src="webUrl+'/20221008152418897577.png'" style="width: 24rpx;height: 24rpx"/>
|
||||
<text class="address">{{ order.merCityName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="title acea-row row-between-wrapper" style="padding: 0 0 0 30rpx !important;">
|
||||
<view 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>
|
||||
<span class="sign cart-color acea-row row-center-wrapper" v-if="order.storeId > 0">门店</span>
|
||||
订单号:{{ order.orderId }}
|
||||
</view>
|
||||
<view class="font-color-white statusTag" v-if="order.isTickets===1 && order._status._type === 1">
|
||||
待核销
|
||||
</view>
|
||||
<view class="font-color-white statusTag" v-else>{{ getStatus(order) }}</view>
|
||||
</view>
|
||||
<view @click="goOrderDetails(order)">
|
||||
<view class="item-info acea-row row-between row-top" v-for="(cart,cartInfoIndex) in order.cartInfo"
|
||||
:key="cartInfoIndex">
|
||||
<view class="pictrue">
|
||||
<image :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"/>
|
||||
<image :src="cart.productInfo.image" @click.stop="
|
||||
$yrouter.push({
|
||||
path: '/pages/activity/GroupDetails/index',query:{id:cart.combinationId}
|
||||
})
|
||||
" v-else-if="cart.combinationId > 0"/>
|
||||
<image :src="cart.productInfo.image" @click.stop="
|
||||
$yrouter.push({
|
||||
path: '/pages/activity/DargainDetails/index',query:{id:cart.bargainId}
|
||||
})
|
||||
" v-else-if="cart.bargainId > 0"/>
|
||||
<image :src="cart.productInfo.image" @click.stop="
|
||||
$yrouter.push({
|
||||
path: '/pages/activity/SeckillDetails/index',query:{id:cart.seckillId}
|
||||
})
|
||||
" v-else-if="cart.seckillId > 0"/>
|
||||
</view>
|
||||
<view class="text acea-row row-between">
|
||||
<view class="acea-row row-column" style="width: 100%">
|
||||
<view class="name line2">{{ cart.productInfo.storeName }}</view>
|
||||
<view class="attr line1" style="color: #999999;" v-if="cart.productInfo.attrInfo">
|
||||
属性：{{ cart.productInfo.attrInfo.sku }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="money">
|
||||
<view>￥{{ force2Decimal(cart.truePrice) }}</view>
|
||||
<view>x{{ cart.cartNum }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="totalPrice acea-row row-between row-middle">
|
||||
<view class="" v-if="order.createTime"><span class="orderTime">{{ order.createTime }}</span></view>
|
||||
<view class="">共{{ order.totalNum || 0 }}件商品，总金额
|
||||
<text class="money font-color-lightred">￥{{ force2Decimal(order.payPrice) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom flex jc-between ai-center">
|
||||
<view class="group-btn"
|
||||
v-if="(Number(order._status._type) === 2 || Number(order._status._type) === 3) &&
|
||||
order.isTickets === 0">
|
||||
<text class="btn-more" @click="tapShowMore(order,orderListIndex)">更多</text>
|
||||
<view class="group-float" v-show="order.showMore">
|
||||
<view class="btn btn-service flex jc-center ai-center" @click="goRoom(order)"
|
||||
v-if="order.merName">联系客服
|
||||
</view>
|
||||
<view class="btn flex jc-center ai-center" @click="goRefund(order)">申请退款</view>
|
||||
</view>
|
||||
</view>
|
||||
<template v-else>
|
||||
<view class="bnt service" @click="goRoom(order)" v-if="order.merName">联系客服</view>
|
||||
<view v-else></view>
|
||||
</template>
|
||||
|
||||
<view class="flex">
|
||||
<template v-if="order._status._type == 0">
|
||||
<view class="bnt cancelBnt" @click="cancelOrder(order)">取消订单</view>
|
||||
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">立即付款</view>
|
||||
</template>
|
||||
<template v-if="(order._status._type == 1 || order._status._type == 9) && order.isTickets==0">
|
||||
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">查看详情</view>
|
||||
</template>
|
||||
<template v-if="order._status._type == 1 && order.isTickets == 1">
|
||||
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">立即核销</view>
|
||||
</template>
|
||||
<template v-if="order._status._type == 2 && order.isTickets == 0">
|
||||
<view class="bnt default" v-if="order.isExtendedDelivery==0"
|
||||
@click="toDelay(order.orderId)">延长收货
|
||||
</view>
|
||||
<view class="bnt default" @click="goLogistics(order)">查看物流</view>
|
||||
<view class="bnt bg-color-lightred" @click="takeOrder(order)">确认收货</view>
|
||||
</template>
|
||||
<template v-if="order._status._type == 3">
|
||||
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">去评价</view>
|
||||
</template>
|
||||
<template v-if="order._status._type === 4">
|
||||
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">查看订单</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-modal :show="showExtend" title="确认延长收货时间？" content='每笔订单只能延长一次哦' showCancelButton
|
||||
@cancel="showExtend=false" @confirm="doneDelay"></u-modal>
|
||||
|
||||
<view class="noCart" v-if="orderList.length === 0 && page > 1">
|
||||
<view class="pictrue">
|
||||
<image :src="webUrl+'/20210203155245713983.png'"/>
|
||||
</view>
|
||||
</view>
|
||||
<Loading :loaded="loaded" :loading="loading"></Loading>
|
||||
<Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {getOrderData, getOrderList, orderDelay} from "@/api/order";
|
||||
import {cancelOrderHandle, payOrderHandle, takeOrderHandle} from "@/libs/order";
|
||||
import Loading from "@/components/Loading";
|
||||
import Payment from "@/components/Payment";
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "MyOrder",
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
tabList: [
|
||||
{name: '全部'},
|
||||
{name: '待付款'},
|
||||
{name: '待发货'},
|
||||
{name: '待收货/待核销'},
|
||||
{name: '待评价'},
|
||||
{name: '已完成'}],
|
||||
offlinePayStatus: 2,
|
||||
orderData: {},
|
||||
type: 0,
|
||||
page: 1,
|
||||
limit: 20,
|
||||
loaded: false,
|
||||
loading: false,
|
||||
orderList: [],
|
||||
pay: false,
|
||||
payType: ["yue", "weixin"],
|
||||
from: this.$deviceType,
|
||||
|
||||
showExtend: false,
|
||||
delayId: null,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Loading,
|
||||
Payment
|
||||
},
|
||||
computed: mapGetters(["userInfo"]),
|
||||
onShow: function () {
|
||||
this.type = parseInt(this.$yroute.query.type) || 0;
|
||||
this.changeType(this.type);
|
||||
this.getOrderData();
|
||||
this.getOrderList();
|
||||
},
|
||||
onHide: function () {
|
||||
this.orderList = [];
|
||||
this.page = 1;
|
||||
this.limit = 20;
|
||||
this.loaded = false;
|
||||
this.loading = false;
|
||||
},
|
||||
methods: {
|
||||
force2Decimal(v) {
|
||||
return this.$force2Decimal(v);
|
||||
},
|
||||
goRoom(order) {
|
||||
uni.navigateTo({
|
||||
url: `/pkg_common/views/room?id=${order.merId}&name=${order.merName}`
|
||||
})
|
||||
},
|
||||
goRefund(order) {
|
||||
uni.navigateTo({
|
||||
url: `/pkg_orders/views/refund?id=${order.orderId}`
|
||||
})
|
||||
},
|
||||
goLogistics(order) {
|
||||
this.$yrouter.push({
|
||||
path: "/pages/order/Logistics/index",
|
||||
query: {
|
||||
id: order.orderId
|
||||
}
|
||||
});
|
||||
},
|
||||
goOrderDetails(order) {
|
||||
this.$yrouter.push({
|
||||
path: "/pages/order/OrderDetails/index",
|
||||
query: {
|
||||
id: order.orderId
|
||||
}
|
||||
});
|
||||
},
|
||||
setOfflinePayStatus: function (status) {
|
||||
let 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) {
|
||||
let that = this;
|
||||
uni.showModal({
|
||||
title: '是否确认收货?',
|
||||
content: '',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '确认',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
takeOrderHandle(order.orderId).finally(() => {
|
||||
that.reload();
|
||||
that.getOrderData();
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
reload() {
|
||||
this.changeType(this.type);
|
||||
},
|
||||
tabChange(item) {
|
||||
this.type = item.index;
|
||||
this.changeType();
|
||||
},
|
||||
changeType() {
|
||||
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);
|
||||
if (this.orderList.length > 0) {
|
||||
this.orderList.forEach(item => {
|
||||
item.showMore = false;
|
||||
})
|
||||
}
|
||||
this.page++;
|
||||
this.loaded = res.data.length < this.limit;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
tapShowMore(order, index) {
|
||||
order.showMore = !order.showMore;
|
||||
this.$set(this.orderList, index, order);
|
||||
},
|
||||
getStatus(order) {
|
||||
const type = Number(order._status._type);
|
||||
let status = "";
|
||||
switch (type) {
|
||||
case 0:
|
||||
status = "待付款";
|
||||
break;
|
||||
case 1:
|
||||
status = "待发货";
|
||||
break;
|
||||
case 2:
|
||||
status = "待收货";
|
||||
break;
|
||||
case 3:
|
||||
status = "待评价";
|
||||
break;
|
||||
case 4:
|
||||
status = "已完成";
|
||||
break;
|
||||
case -1:
|
||||
status = "退款中";
|
||||
break;
|
||||
case -2:
|
||||
status = "已退款";
|
||||
break;
|
||||
case -3:
|
||||
status = "已驳回";
|
||||
break;
|
||||
}
|
||||
return status;
|
||||
},
|
||||
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() {
|
||||
},
|
||||
|
||||
toDelay(id) {
|
||||
this.delayId = id;
|
||||
this.showExtend = true;
|
||||
},
|
||||
doneDelay() {
|
||||
orderDelay(this.delayId).then(() => {
|
||||
this.showExtend = false;
|
||||
this.reload()
|
||||
});
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
!this.loading && this.getOrderList();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/deep/ .u-tabs {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
background-color: #fff;
|
||||
left: 0;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.list {
|
||||
.item {
|
||||
margin: 30rpx 0;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.shop-info {
|
||||
padding: 20rpx 16rpx;
|
||||
border-bottom: 2rpx solid #DADADA;
|
||||
|
||||
.name {
|
||||
margin-left: 6rpx;
|
||||
color: #333;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-left: 4rpx;
|
||||
color: #FD574B;
|
||||
font-size: 22rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
margin: 0 30rpx;
|
||||
padding: 22rpx 0 0;
|
||||
border-top: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.totalPrice {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
border-top: 2rpx solid #DADADA;
|
||||
|
||||
.bnt {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 160rpx;
|
||||
height: 56rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.service {
|
||||
border: 2rpx solid #0DC5C5;
|
||||
color: #0DC5C5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.noCart {
|
||||
margin-top: 0.17 * 100rpx;
|
||||
padding-top: 0.1 * 100rpx;
|
||||
}
|
||||
|
||||
.noCart .pictrue {
|
||||
width: 4 * 100rpx;
|
||||
height: 3 * 100rpx;
|
||||
overflow: hidden;
|
||||
margin: 0.7 * 100rpx auto 0.5 * 100rpx auto;
|
||||
}
|
||||
|
||||
.noCart .pictrue image {
|
||||
width: 4 * 100rpx;
|
||||
height: 3 * 100rpx;
|
||||
}
|
||||
|
||||
.statusTag {
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
padding: 0 20rpx;
|
||||
background: #0DC5C5;
|
||||
height: 38rpx;
|
||||
line-height: 38rpx;
|
||||
border-radius: 20rpx 0px 0px 20rpx;
|
||||
}
|
||||
|
||||
.group-btn {
|
||||
position: relative;
|
||||
|
||||
.btn-more {
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.group-float {
|
||||
position: absolute;
|
||||
width: 196rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16);
|
||||
padding: 0 20rpx;
|
||||
background: #fff;
|
||||
|
||||
.btn {
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 0;
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn-service {
|
||||
border-bottom: 1rpx solid #F0F0F0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,771 @@
|
||||
<template>
|
||||
<view class="order-details" style="padding: 30rpx;">
|
||||
<!-- 给header上与data上加on为退款订单-->
|
||||
<view class="header acea-row row-middle" :class="refundOrder ? 'on' : ''"
|
||||
style="background: #0DC5C5;border-radius: 24rpx;">
|
||||
<view class="status-img-box">
|
||||
<image class="status-img" :src="getStatusImg(orderInfo)" mode=""></image>
|
||||
</view>
|
||||
<view class="data" :class="refundOrder ? 'on' : ''">
|
||||
<view class="state" v-if="orderInfo.isTickets===1 && orderInfo._status._type == 2">待核销</view>
|
||||
<view class="state" v-else>{{ getStatus(orderInfo) }}</view>
|
||||
<view v-if="getStatus(orderInfo)!=='待付款'">{{ orderInfo._status._msg }}</view>
|
||||
<view class="pending-payments flex ai-center" v-else>
|
||||
<text>请在</text>
|
||||
<u-count-down :time="$global.diffSSS(this.orderInfo.paymentTimeout)"/>
|
||||
<text>内支付，逾期订单将自动取消</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="reject-reason" v-if="orderInfo._status._type==-3 && orderInfo.refundRejectReason">驳回原因：{{ orderInfo.refundRejectReason }}</view>
|
||||
|
||||
<template v-if="!refundOrder">
|
||||
<view class="code-box flex jc-center ai-center" v-if="orderInfo.isTickets===1 && orderInfo._status._type==2">
|
||||
<image class="code-img" :src="orderInfo.code"/>
|
||||
</view>
|
||||
<template v-else>
|
||||
<div class="writeOff" v-if="orderInfo.shippingType === 2 && orderInfo.paid === 1"
|
||||
style="margin-top: 30rpx;border-radius: 24rpx;">
|
||||
<div class="title">核销信息</div>
|
||||
<div class="grayBg">
|
||||
<div class="pictrue">
|
||||
<img :src="orderInfo.code"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gear">
|
||||
<img :src="webUrl+'/20230526114305172550.jpg'"/>
|
||||
</div>
|
||||
<div class="num">{{ orderInfo.verifyCode }}</div>
|
||||
<div class="rules">
|
||||
<div class="item">
|
||||
<div class="rulesTitle acea-row row-middle">
|
||||
<span class="iconfont icon-shijian"></span>核销时间
|
||||
</div>
|
||||
<div class="info">
|
||||
每日：
|
||||
<span class="time">{{ system_store.dayTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="rulesTitle acea-row row-middle">
|
||||
<span class="iconfont icon-shuoming1"></span>使用说明
|
||||
</div>
|
||||
<div class="info">可将二维码出示给店员扫描或提供数字核销码</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map acea-row row-between-wrapper" v-if="orderInfo.shippingType === 2 && orderInfo.paid === 1">
|
||||
<div>自提地址信息</div>
|
||||
<div class="place cart-color acea-row row-center-wrapper" @click="showChang(orderInfo.systemStore)">
|
||||
<span class="iconfont icon-weizhi"></span>查看位置
|
||||
</div>
|
||||
</div>
|
||||
<view class="address acea-row row-middle" style="margin-top: 30rpx;border-radius: 24rpx;flex-wrap: nowrap;"
|
||||
v-if="orderInfo.shippingType === 1">
|
||||
<view class="" style="flex-shrink: 0;margin-right: 20rpx;">
|
||||
<image style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20230304135530688212.png'" mode=""></image>
|
||||
</view>
|
||||
<view class="acea-row row-middle" style="flex-grow: 1;">
|
||||
<view class="name acea-row row-middle row-between" style="flex-wrap: nowrap;width: 100%;">
|
||||
<view class="acea-row row-middle">
|
||||
{{ orderInfo.realName }}
|
||||
<text class="phone">{{ orderInfo.userPhone }}</text>
|
||||
</view>
|
||||
<view class="acea-row row-middle">
|
||||
<image style="width: 32rpx;height: 32rpx;" :src="webUrl+'/20210808005541949297.png'" mode=""
|
||||
@click="call(orderInfo.userPhone)"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view>{{ orderInfo.userAddress }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<div class="address" v-else>
|
||||
<div class="name">
|
||||
{{ system_store.name }}
|
||||
<span class="phone">{{ system_store.phone }}</span>
|
||||
<span class="iconfont icon-tonghua font-color-red" :href="'tel:' + system_store.phone"></span>
|
||||
</div>
|
||||
<div>{{ system_store.address }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<view style="margin-top: 30rpx;border-radius:24rpx;overflow: hidden;">
|
||||
<OrderGoods :evaluate="status.type || 0" :cartInfo="orderInfo.cartInfo || []" title="商品信息"></OrderGoods>
|
||||
</view>
|
||||
|
||||
<view class="wrapper" style="margin-top: 30rpx;border-radius: 24rpx;">
|
||||
<view class="item acea-row row-middle"
|
||||
style="font-size: 40rpx;color: #080F1A;font-weight: bold;flex-wrap: nowrap;">
|
||||
<image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210808003431044270.png'"
|
||||
mode=""></image>
|
||||
<text style="font-size: 26rpx;color: #080F1A;">订单信息</text>
|
||||
</view>
|
||||
<view class="item acea-row row-between">
|
||||
<view class="flex-0">订单编号：</view>
|
||||
<view class="conter acea-row row-middle row-right">
|
||||
{{ orderInfo.orderId }}
|
||||
<image @click="copyClipboard(orderInfo.orderId)" style="width: 28rpx;height: 28rpx;margin-left: 10rpx;"
|
||||
:src="webUrl+'/20210808003517657208.png'" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between">
|
||||
<view class="flex-0">下单时间：</view>
|
||||
<view class="conter">
|
||||
<text>{{ orderInfo.createTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between">
|
||||
<view class="flex-0">订单类型：</view>
|
||||
<view class="conter">{{ orderTypeName }}</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between">
|
||||
<view class="flex-0">支付状态：</view>
|
||||
<view class="conter">{{ orderInfo.paid ? "已支付" : "未支付" }}</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between">
|
||||
<view class="flex-0">支付方式：</view>
|
||||
<view class="conter">{{ orderInfo._status._payType }}</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between" v-if="orderInfo.mark">
|
||||
<view class="flex-0">买家留言：</view>
|
||||
<view class="conter">{{ orderInfo.mark }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="orderInfo.status != 0">
|
||||
<view class="wrapper" v-if="true">
|
||||
<view class="item acea-row row-between">
|
||||
<view class="flex-0">配送方式：</view>
|
||||
<view class="conter">发货</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between">
|
||||
<view class="flex-0">快递公司：</view>
|
||||
<view class="conter">{{ orderInfo.deliveryName || "" }}</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between">
|
||||
<view class="flex-0">快递号：</view>
|
||||
<view class="conter">{{ orderInfo.deliveryId || "" }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="wrapper" v-else>
|
||||
<view class="item acea-row row-between">
|
||||
<view class="flex-0">配送方式：</view>
|
||||
<view class="conter">送货</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between">
|
||||
<view class="flex-0">配送人：</view>
|
||||
<view class="conter">{{ orderInfo.deliveryName || "" }}</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between">
|
||||
<view class="flex-0">配送电话：</view>
|
||||
<view class="conter acea-row row-middle row-right">
|
||||
{{ orderInfo.deliveryId || "" }}
|
||||
<text class="copy">拨打</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 退款订单详情 -->
|
||||
<view class="wrapper" v-if="refundOrder">
|
||||
<view class="item acea-row row-between">
|
||||
<view>收货人：</view>
|
||||
<view class="conter">{{ orderInfo.realName }}</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between">
|
||||
<view>联系电话：</view>
|
||||
<view class="conter">{{ orderInfo.userPhone }}</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between">
|
||||
<view>收货地址：</view>
|
||||
<view class="conter">{{ orderInfo.userAddress }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wrapper" style="margin-top: 30rpx;border-radius: 24rpx;">
|
||||
<view class="item acea-row row-between" style="flex-wrap: nowrap;">
|
||||
<view class="acea-row row-middle" style="font-size: 40rpx;color: #080F1A;font-weight: bold;flex-wrap: nowrap;">
|
||||
<image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210808003453973795.png'"
|
||||
mode=""></image>
|
||||
<text style="font-size: 26rpx;color: #080F1A;">支付金额：</text>
|
||||
</view>
|
||||
<view class="conter" style="width: auto !important;">￥{{ force2Decimal(orderInfo.totalPrice) }}</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between" v-if="orderInfo.couponPrice > 0">
|
||||
<view>优惠券抵扣：</view>
|
||||
<view class="conter">-￥{{ force2Decimal(orderInfo.couponPrice) }}</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between" v-if="orderInfo.useIntegral > 0">
|
||||
<view>积分抵扣：</view>
|
||||
<view class="conter">-￥{{ force2Decimal(orderInfo.deductionPrice) }}</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between" v-if="orderInfo.payPostage > 0">
|
||||
<view>运费：</view>
|
||||
<view class="conter">￥{{ force2Decimal(orderInfo.payPostage) }}</view>
|
||||
</view>
|
||||
<view class="actualPay acea-row row-right row-middle">
|
||||
<text style="font-size: 24rpx;">实付款：</text>
|
||||
<text class="money font-color-red">￥{{ force2Decimal(orderInfo.payPrice) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height:100rpx;" v-if="!refundOrder && offlineStatus"></view>
|
||||
<view class="footer acea-row row-right row-middle" v-if="!refundOrder && offlineStatus">
|
||||
<template v-if="status.type == 0">
|
||||
<view class="bnt cancel" @click="cancelOrder">取消订单</view>
|
||||
<view class="bnt bg-color-red" @click="subscribePay">立即付款</view>
|
||||
</template>
|
||||
<template v-if="status.type == 1">
|
||||
<view class="bnt cancel" @click="goGoodsReturn(orderInfo)">申请退款</view>
|
||||
</template>
|
||||
<template v-if="status.type == 2">
|
||||
<view class="bnt default"
|
||||
@click="$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})"
|
||||
v-if="orderInfo.isTickets!==1">查看物流
|
||||
</view>
|
||||
<view class="bnt bg-color-red" @click="takeOrder">确认收货</view>
|
||||
</template>
|
||||
<template v-if="status.type == 3">
|
||||
<view class="bnt default" @click="
|
||||
$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})
|
||||
" v-if="orderInfo.isTickets!==1">查看物流
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="status.type == 4">
|
||||
<view class="bnt cancel" @click="delOrder">删除订单</view>
|
||||
<view class="bnt default" @click="
|
||||
$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})
|
||||
" v-if="orderInfo.isTickets!==1">查看物流
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="status.type == 6">
|
||||
<view class="bnt bg-color-red" @click="goGroupRule(orderInfo)">查看拼团</view>
|
||||
</template>
|
||||
</view>
|
||||
<Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment>
|
||||
<view 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>
|
||||
</view>
|
||||
|
||||
<passkeyborad :money="orderInfo.payPrice" showMoney :show="isShowPayPwdPop" ref='payPwdPop' @close="pwdPopClose"
|
||||
@finish="pwdPopFinish"></passkeyborad>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard'
|
||||
import OrderGoods from "@/components/OrderGoods";
|
||||
import {orderDetail} from "@/api/order";
|
||||
import Payment from "@/components/Payment";
|
||||
import DataFormat from "@/components/DataFormat";
|
||||
import {copyClipboard} from "@/utils";
|
||||
import {mapGetters} from "vuex";
|
||||
import {cancelOrderHandle, delOrderHandle, payOrderHandle, takeOrderHandle, yuePayOrderHandle} from "@/libs/order";
|
||||
|
||||
const STATUS = [
|
||||
"待付款",
|
||||
"待发货",
|
||||
"待收货",
|
||||
"待评价",
|
||||
"已完成",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"待付款"
|
||||
];
|
||||
const NAME = "OrderDetails";
|
||||
|
||||
export default {
|
||||
name: NAME,
|
||||
components: {
|
||||
OrderGoods,
|
||||
Payment,
|
||||
DataFormat,
|
||||
passkeyborad
|
||||
},
|
||||
props: {},
|
||||
data: function () {
|
||||
return {
|
||||
isShowPayPwdPop: false,
|
||||
offlinePayStatus: 2,
|
||||
orderTypeName: "普通订单",
|
||||
orderTypeNameStatus: true,
|
||||
offlineStatus: true,
|
||||
id: "",
|
||||
orderInfo: {
|
||||
_status: {}
|
||||
},
|
||||
status: {},
|
||||
pay: false,
|
||||
payType: ["yue", "weixin"],
|
||||
from: this.$deviceType,
|
||||
system_store: {},
|
||||
mapKay: "",
|
||||
mapShow: false,
|
||||
payPassword: null,
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL
|
||||
};
|
||||
},
|
||||
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;
|
||||
},
|
||||
methods: {
|
||||
copyClipboard,
|
||||
force2Decimal(v) {
|
||||
return this.$force2Decimal(v);
|
||||
},
|
||||
getStatus(order) {
|
||||
const type = Number(order._status._type);
|
||||
let status = "";
|
||||
switch (type) {
|
||||
case 0:
|
||||
status = "待付款";
|
||||
break;
|
||||
case 1:
|
||||
status = "待发货";
|
||||
break;
|
||||
case 2:
|
||||
status = "待收货";
|
||||
break;
|
||||
case 3:
|
||||
status = "待评价";
|
||||
break;
|
||||
case 4:
|
||||
status = "已完成";
|
||||
break;
|
||||
case -1:
|
||||
status = "退款中";
|
||||
break;
|
||||
case -2:
|
||||
status = "已退款";
|
||||
break;
|
||||
case -3:
|
||||
status = "已驳回";
|
||||
break;
|
||||
}
|
||||
return status;
|
||||
},
|
||||
getStatusImg(order) {
|
||||
const type = parseInt(order._status._type);
|
||||
let imgUrl = "";
|
||||
switch (type) {
|
||||
case 0: //待付款
|
||||
case 9:
|
||||
imgUrl = this.webUrl + '/20230526114342425681.png';
|
||||
break;
|
||||
case 1: //待发货
|
||||
imgUrl = this.webUrl + '/20230526114347797204.png';
|
||||
break;
|
||||
case 2: //待收货
|
||||
imgUrl = this.webUrl + '/20230526114355462982.png';
|
||||
break;
|
||||
case 3: //待评价
|
||||
imgUrl = this.webUrl + '/20230526114414134581.png';
|
||||
break;
|
||||
case 4: //已完成
|
||||
imgUrl = this.webUrl + '/20230526114421118668.png';
|
||||
break;
|
||||
case -1: //退款中
|
||||
imgUrl = this.webUrl + '/20230526114324286938.png';
|
||||
break;
|
||||
case -2: //已退款
|
||||
imgUrl = this.webUrl + '/20230526114329894562.png';
|
||||
break;
|
||||
case -3: //已驳回
|
||||
imgUrl = this.webUrl + '/20230526114336281750.png';
|
||||
break;
|
||||
}
|
||||
return imgUrl;
|
||||
},
|
||||
subscribePay() {
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: ['7O3wKw7_D4t7yfSOlvecKuOQP8QEPY88uBx2FJg43HE', 'TSmTnGibZ8IxWCiRWOvLxha6-0u7tE-V1-WbDCiPkKU', '9Q6xLHe6HyjkU5Zn5k_2zxYPf2y4MxVyUbOSW8pcZRU'],
|
||||
complete: () => this.pay = true
|
||||
})
|
||||
},
|
||||
goGoodsReturn(orderInfo) {
|
||||
this.$yrouter.push({
|
||||
path: "/pages/order/GoodsReturn/index",
|
||||
query: {
|
||||
id: orderInfo.orderId
|
||||
}
|
||||
});
|
||||
},
|
||||
goGroupRule(orderInfo) {
|
||||
this.$yrouter.push({
|
||||
path: "/pages/activity/GroupRule/index",
|
||||
query: {
|
||||
id: orderInfo.pinkId
|
||||
}
|
||||
});
|
||||
},
|
||||
showChang: function (data) {
|
||||
// 这里判断是不是微信小程序
|
||||
this.$yrouter.push({
|
||||
path: "/pages/map/index",
|
||||
query: data
|
||||
});
|
||||
},
|
||||
async toYuePay(payPwd) {
|
||||
var that = this;
|
||||
//网络请求
|
||||
await yuePayOrderHandle(this.orderInfo.orderId, "yue", that.from, payPwd);
|
||||
that.getDetail();
|
||||
this.payPassword = "";
|
||||
},
|
||||
pwdPopClose() {
|
||||
this.isShowPayPwdPop = false;
|
||||
},
|
||||
pwdPopFinish(payPwd) {
|
||||
this.payPassword = payPwd;
|
||||
|
||||
this.toYuePay(payPwd);
|
||||
|
||||
this.isShowPayPwdPop = false;
|
||||
},
|
||||
call: function (phone) {
|
||||
uni.makePhoneCall({
|
||||
|
||||
// 手机号
|
||||
phoneNumber: phone,
|
||||
|
||||
// 成功回调
|
||||
success: (res) => {
|
||||
console.log('调用成功!')
|
||||
},
|
||||
|
||||
// 失败回调
|
||||
fail: (res) => {
|
||||
console.log('调用失败!')
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
goBack() {
|
||||
if (this.name === "MyOrder") {
|
||||
this.$yrouter.back();
|
||||
return;
|
||||
} else {
|
||||
console.log(this);
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/MyOrder/index"
|
||||
});
|
||||
return;
|
||||
}
|
||||
},
|
||||
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) {
|
||||
uni.showToast({
|
||||
title: "订单不存在",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
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.systemStore || {};
|
||||
this.mapKey = res.data.mapKay;
|
||||
this.setOfflinePayStatus(this.orderInfo.offlinePayStatus);
|
||||
})
|
||||
.catch(err => {
|
||||
uni.showToast({
|
||||
title: err.response.data.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
});
|
||||
},
|
||||
async toPay(type) {
|
||||
var that = this;
|
||||
console.log(type, "支付方式");
|
||||
|
||||
//余额支付需要输入支付密码
|
||||
if (type == "yue") {
|
||||
this.isShowPayPwdPop = true;
|
||||
return;
|
||||
} else {
|
||||
await payOrderHandle(this.orderInfo.orderId, type, that.from);
|
||||
that.getDetail();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.geoPage {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.order-details .writeOff {
|
||||
background-color: #fff;
|
||||
margin-top: 0.13 * 100rpx;
|
||||
padding-bottom: 0.3 * 100rpx;
|
||||
}
|
||||
|
||||
.order-details .writeOff .title {
|
||||
font-size: 0.3 * 100rpx;
|
||||
color: #282828;
|
||||
height: 0.87 * 100rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 0 0.3 * 100rpx;
|
||||
line-height: 0.87 * 100rpx;
|
||||
}
|
||||
|
||||
.order-details .writeOff .grayBg {
|
||||
background-color: #f2f5f7;
|
||||
width: 5.9 * 100rpx;
|
||||
height: 3.84 * 100rpx;
|
||||
border-radius: 0.2 * 100rpx 0.2 * 100rpx 0 0;
|
||||
margin: 0.5 * 100rpx auto 0 auto;
|
||||
padding-top: 0.55 * 100rpx;
|
||||
}
|
||||
|
||||
.order-details .writeOff .grayBg .pictrue {
|
||||
width: 2.9 * 100rpx;
|
||||
height: 2.9 * 100rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.order-details .writeOff .grayBg .pictrue img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.order-details .writeOff .gear {
|
||||
width: 5.9 * 100rpx;
|
||||
height: 0.3 * 100rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.order-details .writeOff .gear img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.order-details .writeOff .num {
|
||||
background-color: #f0c34c;
|
||||
width: 5.9 * 100rpx;
|
||||
height: 0.84 * 100rpx;
|
||||
color: #282828;
|
||||
font-size: 0.48 * 100rpx;
|
||||
margin: 0 auto;
|
||||
border-radius: 0 0 0.2 * 100rpx 0.2 * 100rpx;
|
||||
text-align: center;
|
||||
padding-top: 0.04 * 100rpx;
|
||||
}
|
||||
|
||||
.order-details .writeOff .rules {
|
||||
margin: 0.46 * 100rpx 0.3 * 100rpx 0 0.3 * 100rpx;
|
||||
border-top: 0.01 * 100rpx solid #f0f0f0;
|
||||
padding-top: 0.1 * 100rpx;
|
||||
}
|
||||
|
||||
.order-details .writeOff .rules .item {
|
||||
margin-top: 0.15 * 100rpx;
|
||||
}
|
||||
|
||||
.order-details .writeOff .rules .item .rulesTitle {
|
||||
font-size: 0.28 * 100rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.order-details .writeOff .rules .item .rulesTitle .iconfont {
|
||||
font-size: 0.3 * 100rpx;
|
||||
color: #333;
|
||||
margin-right: 0.08 * 100rpx;
|
||||
margin-top: 0.05 * 100rpx;
|
||||
}
|
||||
|
||||
.order-details .writeOff .rules .item .info {
|
||||
font-size: 0.28 * 100rpx;
|
||||
color: #999;
|
||||
margin-top: 0.05 * 100rpx;
|
||||
}
|
||||
|
||||
.order-details .writeOff .rules .item .info .time {
|
||||
margin-left: 0.2 * 100rpx;
|
||||
}
|
||||
|
||||
.order-details .map {
|
||||
height: 0.86 * 100rpx;
|
||||
font-size: 0.3 * 100rpx;
|
||||
color: #282828;
|
||||
line-height: 0.86 * 100rpx;
|
||||
border-bottom: 0.01 * 100rpx solid #f0f0f0;
|
||||
margin-top: 0.13 * 100rpx;
|
||||
background-color: #fff;
|
||||
padding: 0 0.3 * 100rpx;
|
||||
}
|
||||
|
||||
.order-details .map .place {
|
||||
font-size: 0.26 * 100rpx;
|
||||
width: 1.76 * 100rpx;
|
||||
height: 0.5 * 100rpx;
|
||||
border-radius: 0.25 * 100rpx;
|
||||
line-height: 0.5 * 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.order-details .map .place .iconfont {
|
||||
font-size: 0.27 * 100rpx;
|
||||
height: 0.27 * 100rpx;
|
||||
line-height: 0.27 * 100rpx;
|
||||
margin: 0.02 * 100rpx 0.03 * 100rpx 0 0;
|
||||
}
|
||||
|
||||
.order-details .address .name .iconfont {
|
||||
font-size: 0.34 * 100rpx;
|
||||
margin-left: 0.1 * 100rpx;
|
||||
}
|
||||
|
||||
.status-img-box {
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wrapper .item {
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.flex-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.code-box {
|
||||
margin-top: 30rpx;
|
||||
padding: 30rpx;
|
||||
background: #fff;
|
||||
|
||||
.code-img {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pending-payments {
|
||||
font-size: 26rpx;
|
||||
|
||||
.u-count-down__text {
|
||||
color: #FF5C5C;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.reject-reason {
|
||||
margin-top: 20rpx;
|
||||
padding: 20rpx 32rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #fff;
|
||||
color: #FE5261;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,925 @@
|
||||
<template>
|
||||
<view class="order-submission" style="padding: 30rpx;">
|
||||
<view class="allAddress" style="background-color: #f6f6f6;">
|
||||
<!-- <view class="nav acea-row">
|
||||
<view
|
||||
class="item font-color-red"
|
||||
:class="shipping_type === 0 ? 'on' : 'on2'"
|
||||
@click="addressType(0)"
|
||||
v-if="systemStore"
|
||||
></view>
|
||||
<view
|
||||
class="item font-color-red"
|
||||
:class="shipping_type === 1 ? 'on' : 'on2'"
|
||||
@click="addressType(1)"
|
||||
v-if="storeSelfMention"
|
||||
></view>
|
||||
</view> -->
|
||||
|
||||
<!-- <view class="acea-row" style="padding-left: 28rpx;">
|
||||
<view v-if="systemStore" class="item" style="position: relative;" @click="addressType(0)">
|
||||
<text :class="shipping_type === 0 ? 'on' :''" class="goods-detail-title">送货上门</text>
|
||||
<text v-if="shipping_type === 0" class="pink-dot"></text>
|
||||
</view>
|
||||
<view v-if="storeSelfMention" class="item" style="position: relative;margin-left: 40rpx;" @click="addressType(1)">
|
||||
<text :class="shipping_type === 1 ? 'on' :''" class="goods-detail-title">到店自取</text>
|
||||
<text v-if="shipping_type === 1" class="pink-dot"></text>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view
|
||||
class="address acea-row row-middle"
|
||||
style="flex-wrap: nowrap;margin: 0 0 30rpx 0;border-radius: 16rpx;"
|
||||
v-if="shipping_type === 0"
|
||||
@click="addressTap"
|
||||
>
|
||||
<image style="flex-shrink: 0;width: 48rpx;height: 48rpx;margin-right: 20rpx;"
|
||||
:src="webUrl+'/20230304135530688212.png'" mode=""></image>
|
||||
<view class="acea-row row-between-wrapper" style="flex-wrap: nowrap;flex-grow: 1;">
|
||||
<view class="addressCon" v-if="addressInfo.realName">
|
||||
<view class="name">
|
||||
{{ addressInfo.realName }}
|
||||
<text class="phone">{{ addressInfo.phone }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<!-- <text class="default font-color-lightred" v-if="addressInfo.isDefault">[默认]</text> -->
|
||||
{{ addressInfo.province }}{{ addressInfo.city }}{{ addressInfo.district }}{{ addressInfo.detail }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="addressCon" v-else>
|
||||
<view class="setaddress">设置收货地址</view>
|
||||
</view>
|
||||
<view class="iconfont icon-jiantou" style="flex-shrink: 0;"></view>
|
||||
</view>
|
||||
</view>
|
||||
<div style="flex-wrap: nowrap;" class="address acea-row row-middle" v-else @click="showStoreList">
|
||||
|
||||
<image style="flex-shrink: 0;width: 48rpx;height: 48rpx;margin-right: 20rpx;"
|
||||
:src="webUrl+'/20230304135530688212.png'" mode=""></image>
|
||||
<view class="acea-row row-between-wrapper" style="flex-wrap: nowrap;flex-grow: 1;">
|
||||
<div class="addressCon">
|
||||
<div class="name">
|
||||
{{ isNullOrEmpty(storeItems) ? systemStore.name : storeItems.name }}
|
||||
<span
|
||||
class="phone"
|
||||
>{{ isNullOrEmpty(storeItems) ? systemStore.phone : storeItems.phone }}</span>
|
||||
</div>
|
||||
<div>{{ isNullOrEmpty(storeItems) ? systemStore.address : storeItems.address }}</div>
|
||||
</div>
|
||||
<div class="iconfont icon-jiantou"></div>
|
||||
</view>
|
||||
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<OrderGoods :evaluate="0" :cartInfo="orderGroupInfo.cartInfo" title="商品列表"></OrderGoods>
|
||||
|
||||
|
||||
<view class="wrapper" style="margin: 30rpx 0;border-radius: 16rpx;">
|
||||
|
||||
<!-- 优惠券开始 -->
|
||||
<!-- <view class="item acea-row row-between-wrapper" @click="couponTap" v-if="deduction === false">
|
||||
<view>优惠券</view>
|
||||
<view class="discount">
|
||||
{{ usableCoupon.couponTitle || "请选择" }}
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 优惠券结束 -->
|
||||
|
||||
<!-- 积分抵扣开始 -->
|
||||
<!-- <view
|
||||
class="item acea-row row-between-wrapper"
|
||||
v-if="deduction === false && enableIntegral === true"
|
||||
>
|
||||
<view>积分抵扣</view>
|
||||
<view class="discount">
|
||||
<view class="select-btn">
|
||||
<view class="checkbox-wrapper">
|
||||
<checkbox-group @change="changeUseIntegral">
|
||||
<label class="well-check">
|
||||
<text class="integral">
|
||||
当前积分
|
||||
<text class="num font-color-red">{{ userInfo.integral || 0 }}</text>
|
||||
</text>
|
||||
<checkbox value="true" :checked="useIntegral ? true : false"></checkbox>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 积分抵扣结束 -->
|
||||
|
||||
<view class="item acea-row row-between-wrapper" style="flex-wrap: nowrap;" v-if="shipping_type === 0">
|
||||
<view class="acea-row row-middle" style="flex-wrap: nowrap;">
|
||||
<image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210807230820761721.png'"
|
||||
mode=""></image>
|
||||
<text class="">快递费用</text>
|
||||
</view>
|
||||
<!-- <view class="discount">
|
||||
{{
|
||||
orderGroupInfo.priceGroup.storePostage > 0
|
||||
? force2Decimal(orderGroupInfo.priceGroup.storePostage)
|
||||
: (orderPrice.payPostage>0?force2Decimal(orderPrice.payPostage):"免运费")
|
||||
}}
|
||||
</view> -->
|
||||
<view class="discount" style="width: auto !important;">
|
||||
{{ orderPrice.payPostage > 0 ? force2Decimal(orderPrice.payPostage) : "免运费" }}
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="item acea-row row-between-wrapper">
|
||||
<view>联系人</view>
|
||||
<view class="discount">
|
||||
<input type="text" placeholder="请填写您的联系姓名" v-model="contacts"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper">
|
||||
<view>联系电话</view>
|
||||
<view class="discount">
|
||||
<input type="text" placeholder="请填写您的联系电话" v-model="contactsTel"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="acea-row row-middle">
|
||||
<image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210807230836494421.png'"
|
||||
mode=""></image>
|
||||
<text class="">备注信息（150字以内</text>
|
||||
</view>
|
||||
<textarea v-model="mark"></textarea>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wrapper" style="margin: 30rpx 0;border-radius: 16rpx;">
|
||||
<view class="item">
|
||||
<!-- <view>支付方式</view> -->
|
||||
<view class="acea-row row-left row-middle">
|
||||
<view class="acea-row row-middle" style="position: relative;">
|
||||
<image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210807230846995104.png'"
|
||||
mode=""></image>
|
||||
<text class="pay-method-title">支付方式</text>
|
||||
<!-- <text class="pink-dot"></text> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view
|
||||
class="payItem acea-row row-middle"
|
||||
:class="active === 'weixin' ? 'on' : ''"
|
||||
@click="payItem('weixin')"
|
||||
v-show="isWeixin"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<view class="name acea-row">
|
||||
<view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view>
|
||||
微信支付
|
||||
</view>
|
||||
<view class="tip">微信快捷支付</view>
|
||||
<label class="radio">
|
||||
<radio style="transform: scale(0.7);" value="" :checked="active === 'weixin'" color="#FF0000"/>
|
||||
<text></text>
|
||||
</label>
|
||||
</view>
|
||||
<view
|
||||
class="payItem acea-row row-middle"
|
||||
:class="active === 'weixin' ? 'on' : ''"
|
||||
@click="payItem('weixin')"
|
||||
v-show="!isWeixin"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<view class="name acea-row ">
|
||||
<view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view>
|
||||
微信支付
|
||||
</view>
|
||||
<view class="tip"></view>
|
||||
<label class="radio">
|
||||
<radio style="transform: scale(0.7);" value="" :checked="active === 'weixin'" color="#FF0000"/>
|
||||
<text></text>
|
||||
</label>
|
||||
|
||||
</view>
|
||||
<view
|
||||
class="payItem acea-row row-middle"
|
||||
:class="active === 'yue' ? 'on' : ''"
|
||||
@click="payItem('yue')"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<view class="name acea-row ">
|
||||
<view style="background-color: #007AFF;" class="iconfont icon-icon-test"
|
||||
:class="active === 'yue' ? 'bounceIn' : ''"></view>
|
||||
余额支付
|
||||
</view>
|
||||
<view class="tip">可用余额：{{ userInfo.nowMoney ? force2Decimal(userInfo.nowMoney) : 0.00 }}</view>
|
||||
<label class="radio">
|
||||
<radio style="transform: scale(0.7);" value="" :checked="active === 'yue'" color="#FF0000"/>
|
||||
<text></text>
|
||||
</label>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="moneyList" style="margin-bottom:30rpx;border-radius: 16rpx;">
|
||||
<view class="item acea-row row-between-wrapper" v-if="orderPrice.totalPrice !== undefined">
|
||||
<view>商品总价：</view>
|
||||
<view class="money">￥{{ force2Decimal(orderPrice.totalPrice) }}</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper" v-if="orderPrice.payPostage > 0">
|
||||
<view>运费：</view>
|
||||
<view class="money">￥{{ force2Decimal(orderPrice.payPostage) }}</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper" v-if="orderPrice.couponPrice > 0">
|
||||
<view>优惠券抵扣：</view>
|
||||
<view class="money">-￥{{ force2Decimal(orderPrice.couponPrice) }}</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper" v-if="orderPrice.deductionPrice > 0">
|
||||
<view>积分抵扣：</view>
|
||||
<view class="money">-￥{{ force2Decimal(orderPrice.deductionPrice) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height:80rpx"></view>
|
||||
<view class="footer acea-row row-between-wrapper" style="height: 80rpx;">
|
||||
<view style="margin-left: 30rpx;">
|
||||
<text style="color: #000000;font-size: 24rpx;font-weight: bold;">合计:</text>
|
||||
<text class="" style="color: #FF564A;font-size: 28rpx;font-weight: bold;">￥{{
|
||||
force2Decimal(orderPrice.payPrice)
|
||||
}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="settlement acea-row row-middle row-center" @click="subscribePay">立即结算</view>
|
||||
</view>
|
||||
<CouponListWindow
|
||||
v-on:couponchange="changecoupon($event)"
|
||||
v-model="showCoupon"
|
||||
:price="orderPrice.totalPrice"
|
||||
:checked="usableCoupon.id"
|
||||
@checked="changeCoupon"
|
||||
:cartid="cartid"
|
||||
></CouponListWindow>
|
||||
<AddressWindow
|
||||
@checked="changeAddress"
|
||||
@redirect="addressRedirect"
|
||||
v-model="showAddress"
|
||||
:checked="addressInfo.id"
|
||||
ref="mychild"
|
||||
></AddressWindow>
|
||||
<!-- <uni-popup ref="popup" type="bottom">
|
||||
<blPaymentPasswordInput hideTopBorder ref="secrity" @input="onInput" @confirm="onConfirm">
|
||||
<block slot='header' style='width: 100%;'>
|
||||
<view style="font-size: 36rpx;color: #8B8F99;margin: 10rpx 0;">请输入支付密码</view>
|
||||
</block>
|
||||
</blPaymentPasswordInput>
|
||||
</uni-popup> -->
|
||||
<passkeyborad :money="orderPrice.payPrice" showMoney :show="isShowPayPwdPop" ref='payPwdPop' @close="pwdPopClose"
|
||||
@finish="pwdPopFinish"></passkeyborad>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard'
|
||||
import OrderGoods from "@/components/OrderGoods";
|
||||
import CouponListWindow from "@/components/CouponListWindow";
|
||||
import AddressWindow from "@/components/AddressWindow";
|
||||
import {createOrder, postOrderComputed, postOrderConfirm} from "@/api/order";
|
||||
import {mapGetters} from "vuex";
|
||||
import {weappPay} from "@/libs/wechat";
|
||||
import {isNullOrEmpty, isWeixin} from "@/utils";
|
||||
import blPaymentPasswordInput from '@/components/blPaymentPasswordInput.vue';
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||
|
||||
const NAME = "OrderSubmission",
|
||||
_isWeixin = isWeixin();
|
||||
export default {
|
||||
name: NAME,
|
||||
components: {
|
||||
OrderGoods,
|
||||
CouponListWindow,
|
||||
AddressWindow,
|
||||
blPaymentPasswordInput,
|
||||
uniPopup,
|
||||
passkeyborad
|
||||
},
|
||||
props: {},
|
||||
data: function () {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
isShowPayPwdPop: false,
|
||||
offlinePayStatus: 2,
|
||||
from: this.$deviceType,
|
||||
deduction: true,
|
||||
enableIntegral: true,
|
||||
enableIntegralNum: 0,
|
||||
isWeixin: _isWeixin,
|
||||
pinkId: 0,
|
||||
// active: _isWeixin ? "weixin" : "yue",
|
||||
active: "weixin",
|
||||
showCoupon: false,
|
||||
showAddress: false,
|
||||
addressInfo: {},
|
||||
couponId: 0,
|
||||
orderGroupInfo: {
|
||||
priceGroup: {}
|
||||
},
|
||||
usableCoupon: {},
|
||||
addressLoaded: false,
|
||||
useIntegral: false,
|
||||
orderPrice: {
|
||||
payPrice: "计算中"
|
||||
},
|
||||
mark: "",
|
||||
systemStore: {},
|
||||
shipping_type: 0,
|
||||
contacts: "",
|
||||
contactsTel: "",
|
||||
storeSelfMention: 0,
|
||||
cartid: "",
|
||||
payPassword: null
|
||||
};
|
||||
},
|
||||
computed: mapGetters(["userInfo", "storeItems"]),
|
||||
watch: {
|
||||
useIntegral() {
|
||||
this.computedPrice();
|
||||
},
|
||||
// $yroute(n) {
|
||||
// if (n.name === NAME){
|
||||
// this.getCartInfo();
|
||||
// // this.$store.dispatch("getUser", true);
|
||||
// }
|
||||
// },
|
||||
shipping_type() {
|
||||
this.computedPrice();
|
||||
}
|
||||
},
|
||||
// mounted: function() {
|
||||
// let that = this;
|
||||
// // this.$store.dispatch("getUser", true);
|
||||
// that.getCartInfo();
|
||||
// console.log(that.$yroute);
|
||||
// if (that.$yroute.query.pinkid !== undefined) {
|
||||
// that.pinkId = that.$yroute.query.pinkid;
|
||||
// }
|
||||
// if (that.$yroute.query.id !== undefined) {
|
||||
// that.cartid = that.$yroute.query.id;
|
||||
// console.log(that.cartid)
|
||||
// }
|
||||
// },
|
||||
onLoad: function () {
|
||||
//获取用户信息
|
||||
// this.$store.dispatch("getUser", true);
|
||||
let that = this;
|
||||
uni.$on('chooseAddress', (res) => {
|
||||
console.log('监听到选择收货地址:' + JSON.stringify(res));
|
||||
that.addressInfo = res;
|
||||
//地址切换也要重新计算一下
|
||||
that.computedPrice();
|
||||
})
|
||||
that.getCartInfo();
|
||||
console.log(that.$yroute);
|
||||
if (that.$yroute.query.pinkid !== undefined) {
|
||||
that.pinkId = that.$yroute.query.pinkid;
|
||||
}
|
||||
if (that.$yroute.query.id !== undefined) {
|
||||
that.cartid = that.$yroute.query.id;
|
||||
console.log(that.cartid)
|
||||
}
|
||||
},
|
||||
onUnload: function () {
|
||||
console.log('关闭监听选择收货地址');
|
||||
uni.$off('chooseAddress');
|
||||
},
|
||||
onShow: function () {
|
||||
//获取用户信息
|
||||
this.$store.dispatch("getUser", true);
|
||||
},
|
||||
methods: {
|
||||
isNullOrEmpty,
|
||||
showStoreList() {
|
||||
this.$store.commit("get_to", "orders");
|
||||
this.$yrouter.push({
|
||||
path: "/pages/shop/StoreList/index"
|
||||
});
|
||||
},
|
||||
force2Decimal(value) {
|
||||
return this.$force2Decimal(value);
|
||||
},
|
||||
addressType: function (index) {
|
||||
if (index && !this.systemStore.id) {
|
||||
uni.showToast({
|
||||
title: "暂无门店信息，您无法选择到店自提！",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
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/index",
|
||||
query: {
|
||||
id: data.result.orderId
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.orderPrice = data.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
getCartInfo() {
|
||||
var that = this;
|
||||
const cartIds = this.$yroute.query.id;
|
||||
if (!cartIds) {
|
||||
uni.showToast({
|
||||
title: "参数有误",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
return this.$yrouter.back();
|
||||
}
|
||||
postOrderConfirm(cartIds)
|
||||
.then(res => {
|
||||
that.offlinePayStatus = res.data.offline_pay_status;
|
||||
that.orderGroupInfo = res.data;
|
||||
that.deduction = res.data.deduction;
|
||||
that.usableCoupon = res.data.usableCoupon || {};
|
||||
that.addressInfo = res.data.addressInfo || {};
|
||||
that.systemStore = res.data.systemStore || {};
|
||||
that.storeSelfMention = res.data.storeSelfMention;
|
||||
that.computedPrice();
|
||||
})
|
||||
.catch(err => {
|
||||
uni.showToast({
|
||||
title: err.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
});
|
||||
},
|
||||
addressTap: function () {
|
||||
|
||||
// this.showAddress = true;
|
||||
// if (!this.addressLoaded) {
|
||||
// this.addressLoaded = true;
|
||||
// this.$refs.mychild.getAddressList();
|
||||
// }
|
||||
|
||||
//改用跳转页面方式
|
||||
this.$yrouter.push({
|
||||
path: "/pages/user/address/AddressManagement/index",
|
||||
query: {
|
||||
choosMode: 1
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
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;
|
||||
//地址切换也要重新计算一下
|
||||
this.computedPrice();
|
||||
},
|
||||
pwdPopClose() {
|
||||
this.isShowPayPwdPop = false;
|
||||
},
|
||||
pwdPopFinish(payPwd) {
|
||||
this.payPassword = payPwd;
|
||||
this.createOrder(true);
|
||||
},
|
||||
//支付密码输入监听
|
||||
onInput(e) {
|
||||
|
||||
},
|
||||
// 支付密码输入确认
|
||||
onConfirm(e) {
|
||||
let password = e.value;
|
||||
|
||||
// if(password)
|
||||
console.log('password:' + password);
|
||||
|
||||
this.payPassword = password;
|
||||
this.$refs.popup.close();//关闭支付密码弹窗
|
||||
this.$refs.secrity.clear();//清空支付密码
|
||||
this.createOrder(true);
|
||||
|
||||
|
||||
},
|
||||
subscribePay() {
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: ['7O3wKw7_D4t7yfSOlvecKuOQP8QEPY88uBx2FJg43HE', 'TSmTnGibZ8IxWCiRWOvLxha6-0u7tE-V1-WbDCiPkKU', '9Q6xLHe6HyjkU5Zn5k_2zxYPf2y4MxVyUbOSW8pcZRU'],
|
||||
complete: () => this.createOrder(false)
|
||||
})
|
||||
},
|
||||
createOrder(isyue) {
|
||||
let shipping_type = this.shipping_type;
|
||||
if (!this.active) {
|
||||
uni.showToast({
|
||||
title: "请选择支付方式",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!this.addressInfo.id && !this.shipping_type) {
|
||||
uni.showToast({
|
||||
title: "请选择收货地址",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.shipping_type) {
|
||||
if (
|
||||
(this.contacts === "" || this.contactsTel === "") &&
|
||||
this.shipping_type
|
||||
) {
|
||||
uni.showToast({
|
||||
title: "请填写联系人或联系人电话",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!/^1(3|4|5|7|8|9|6)\d{9}$/.test(this.contactsTel)) {
|
||||
uni.showToast({
|
||||
title: "请填写正确的手机号",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!/^[\u4e00-\u9fa5\w]{2,16}$/.test(this.contacts)) {
|
||||
uni.showToast({
|
||||
title: "请填写您的真实姓名",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
//判断如果是余额支付，先要输入支付密码
|
||||
if (this.active == 'yue' && !isyue) {
|
||||
//先判断用户是否绑定过手机
|
||||
if (this.userInfo.phone) {
|
||||
//再判断用户是否设置过支付密码
|
||||
if (this.userInfo.hasPwdPay) {
|
||||
//显示输入支付密码
|
||||
this.isShowPayPwdPop = true;
|
||||
} else {
|
||||
//设置支付密码
|
||||
this.$yrouter.push("/pkg_user/views/payPassword?isSetMode=true");
|
||||
}
|
||||
} else {
|
||||
//跳转到绑定手机
|
||||
this.$yrouter.push("/pkg_user/views/bindPhone");
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: "生成订单中"
|
||||
});
|
||||
let from = {};
|
||||
if (this.$deviceType == "app") {
|
||||
from.from = "app";
|
||||
}
|
||||
console.log(this.storeItems, this.systemStore);
|
||||
|
||||
var params = {
|
||||
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,
|
||||
storeId: this.storeItems ? this.storeItems.id : this.systemStore.id,
|
||||
...from
|
||||
}
|
||||
|
||||
//余额支付的支付密码
|
||||
if (this.active == 'yue') {
|
||||
params.passwordPay = this.payPassword;
|
||||
}
|
||||
|
||||
var that = this;
|
||||
createOrder(this.orderGroupInfo.orderKey, params)
|
||||
.then(res => {
|
||||
uni.hideLoading();
|
||||
const data = res.data;
|
||||
switch (data.status) {
|
||||
case "ORDER_EXIST":
|
||||
case "EXTEND_ORDER":
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/index",
|
||||
query: {
|
||||
id: data.result.orderId
|
||||
}
|
||||
});
|
||||
break;
|
||||
case "PAY_DEFICIENCY":
|
||||
break;
|
||||
|
||||
case "PAY_ERROR":
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/index",
|
||||
query: {
|
||||
id: data.result.orderId
|
||||
}
|
||||
});
|
||||
break;
|
||||
case "SUCCESS":
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/index",
|
||||
query: {
|
||||
id: data.result.orderId
|
||||
}
|
||||
});
|
||||
break;
|
||||
case "WECHAT_H5_PAY":
|
||||
// H5支付
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/index",
|
||||
query: {
|
||||
id: data.result.orderId
|
||||
}
|
||||
});
|
||||
setTimeout(() => {
|
||||
// location.href = data.result.jsConfig.mweb_url;
|
||||
}, 100);
|
||||
break;
|
||||
case "WECHAT_PAY":
|
||||
// 小程序支付
|
||||
weappPay(data.result.jsConfig).finally(() => {
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/index",
|
||||
query: {
|
||||
id: data.result.orderId
|
||||
}
|
||||
});
|
||||
});
|
||||
break;
|
||||
|
||||
case "WECHAT_APP_PAY":
|
||||
// APP支付
|
||||
weappPay(data.result.jsConfig).finally(() => {
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/index",
|
||||
query: {
|
||||
id: data.result.orderId
|
||||
}
|
||||
});
|
||||
});
|
||||
break;
|
||||
// 下面为原先微信支付方式，
|
||||
// pay(data.result.jsConfig).finally(() => {
|
||||
// this.$yrouter.replace({
|
||||
// path: "/pages/order/OrderDetails/index" ,query: { id: data.result.orderId}
|
||||
// });
|
||||
// });
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title:
|
||||
err.msg ||
|
||||
err.response.data.msg ||
|
||||
err.response.data.message ||
|
||||
"创建订单失败",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
}).finally(function () {
|
||||
that.isShowPayPwdPop = false;
|
||||
that.$refs.payPwdPop.clear();//清空支付密码
|
||||
that.$refs.payPwdPop.close();//关闭支付密码弹窗
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
|
||||
.pink-dot {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background: rgba(255, 86, 74, 0.4);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
bottom: 0;
|
||||
right: -12rpx;
|
||||
}
|
||||
|
||||
.pay-method-title {
|
||||
font-size: 26rpx;
|
||||
color: #080F1A;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.goods-detail-title {
|
||||
font-size: 36rpx;
|
||||
color: #C2C5CC;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.goods-detail-title.on {
|
||||
color: #080F1A;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.order-submission .footer {
|
||||
background: #fff;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-top: 1px solid #f6f6f6;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.order-submission .footer .settlement {
|
||||
background-color: #FF564A;
|
||||
color: #fff;
|
||||
width: 198rpx;
|
||||
height: 100%;
|
||||
border-radius: 0 !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.order-submission .wrapper .item .list .payItem {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.order-submission .wrapper .item .list .payItem.on {
|
||||
border-color: #eee !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
|
||||
.order-submission .wrapper .shipping select {
|
||||
color: #999;
|
||||
padding-right: 0.15 * 100rpx;
|
||||
}
|
||||
|
||||
.order-submission .wrapper .shipping .iconfont {
|
||||
font-size: 0.3 * 100rpx;
|
||||
color: #515151;
|
||||
}
|
||||
|
||||
.order-submission .allAddress {
|
||||
width: 100%;
|
||||
// background-image: linear-gradient(to bottom, #00c17b 0%, #00c17b 100%);
|
||||
// background-image: -webkit-linear-gradient(
|
||||
// to bottom,
|
||||
// #00c17b 0%,
|
||||
// #00c17b 100%
|
||||
// );
|
||||
// background-image: -moz-linear-gradient(to bottom, #00c17b 0%, #00c17b 100%);
|
||||
// padding-top: 1 * 100rpx;
|
||||
// padding-top: 40rpx;
|
||||
}
|
||||
|
||||
.order-submission .allAddress .nav {
|
||||
margin: 0 auto;
|
||||
padding: 0 30rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.order-submission .address .addressCon {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.order-submission .allAddress .nav .item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.order-submission .allAddress .nav .item.on {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.order-submission .allAddress .nav .item.on:before {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
content: "快递配送";
|
||||
font-size: 0.28 * 100rpx;
|
||||
display: block;
|
||||
height: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-width: 0.4 * 100rpx;
|
||||
border-style: solid;
|
||||
border-color: #fff;
|
||||
z-index: 9;
|
||||
text-align: center;
|
||||
line-height: 0.14 * 100rpx;
|
||||
}
|
||||
|
||||
.order-submission .allAddress .nav .item:nth-of-type(2).on:before {
|
||||
content: "到店自提";
|
||||
border-width: 0.4 * 100rpx;
|
||||
}
|
||||
|
||||
.order-submission .allAddress .nav .item.on2 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.order-submission .allAddress .nav .item.on2:before {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
content: "到店自提";
|
||||
font-size: 0.28 * 100rpx;
|
||||
display: block;
|
||||
height: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-width: 0.4 * 100rpx;
|
||||
border-style: solid;
|
||||
border-color: #d5e6e6;
|
||||
text-align: center;
|
||||
line-height: 0.14 * 100rpx;
|
||||
}
|
||||
|
||||
.order-submission .allAddress .nav .item:nth-of-type(1).on2:before {
|
||||
content: "快递配送";
|
||||
border-width: 0.4 * 100rpx;
|
||||
}
|
||||
|
||||
.order-submission .allAddress .address {
|
||||
width: 6.91 * 100rpx;
|
||||
height: 1.5 * 100rpx;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.order-submission .allAddress .line {
|
||||
width: 7.1 * 100rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.order-submission .wrapper .item .discount input::placeholder {
|
||||
color: #ccc;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<view class="payment-status">
|
||||
<!--失败时： 用icon-iconfontguanbi fail替换icon-duihao2 bg-color-red-->
|
||||
<view class="iconfont icon-duihao2 bg-color-red"></view>
|
||||
<!-- 失败时：订单支付失败 -->
|
||||
<view class="status">订单支付成功</view>
|
||||
<view class="wrapper">
|
||||
<view class="item acea-row row-between-wrapper">
|
||||
<view>订单编号</view>
|
||||
<view class="itemCom">wx3265361456134568</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper">
|
||||
<view>下单时间</view>
|
||||
<view class="itemCom">2019-01-09 18:05</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper">
|
||||
<view>支付方式</view>
|
||||
<view class="itemCom">微信支付</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper">
|
||||
<view>支付金额</view>
|
||||
<view class="itemCom">2222.00</view>
|
||||
</view>
|
||||
<!--失败时加上这个 -->
|
||||
<!--<view class='item acea-row row-between-wrapper'>-->
|
||||
<!--<view>失败原因</view>-->
|
||||
<!--<view class='itemCom'>账户余额不足</view>-->
|
||||
<!--</view>-->
|
||||
</view>
|
||||
<!--失败时： 重新购买 -->
|
||||
<view class="returnBnt bg-color-red">返回查看订单</view>
|
||||
<view class="returnBnt cart-color">返回首页</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<view class="return-list" ref="container">
|
||||
<view class="goodWrapper" v-for="(order,orderListIndex) in orderList" :key="orderListIndex">
|
||||
<view class="iconfont icon-tuikuanzhong powder" v-if="order._status._type === '-1'"></view>
|
||||
<view class="iconfont icon-yituikuan" v-if="order._status._type === '-2'"></view>
|
||||
<view class="orderNum">订单号：{{ order.orderId }}</view>
|
||||
<!-- <view class="acea-row row-between row-middle orderNum" style="flex-wrap: nowrap;">
|
||||
<view class="orderNum">订单号：{{ order.orderId }}</view>
|
||||
<view class="font-color-red" style="flex-shrink: 0;font-size: 28rpx;">{{order._status._title}}</view>
|
||||
</view> -->
|
||||
<view
|
||||
class="item acea-row row-between-wrapper"
|
||||
v-for="(cart,cartInfoIndex) in order.cartInfo"
|
||||
:key="cartInfoIndex"
|
||||
@click="goOrderDetails(order)"
|
||||
>
|
||||
<view class="pictrue">
|
||||
<image :src="cart.productInfo.image" class="image" @click.stop="goGoodsCon(cart)" />
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="acea-row row-between-wrapper">
|
||||
<view class="name line1">{{ cart.productInfo.storeName }}</view>
|
||||
<view class="num">x {{ cart.cartNum }}</view>
|
||||
</view>
|
||||
<view
|
||||
class="attr line1"
|
||||
v-if="cart.productInfo.attrInfo"
|
||||
>{{ cart.productInfo.attrInfo.sku }}</view>
|
||||
<view class="attr line1" v-else>{{ cart.productInfo.storeName }}</view>
|
||||
<view class="money">￥{{ cart.productInfo.price }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="totalSum">
|
||||
共{{ order.cartInfo.length || 0 }}件商品，总金额
|
||||
<text
|
||||
class="font-color-red price"
|
||||
>￥{{ order.payPrice }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="noCart" v-if="orderList.length === 0 && page > 1">
|
||||
<view class="pictrue">
|
||||
<image :src="webUrl+'/20210203155245713983.png'" />
|
||||
</view>
|
||||
</view>
|
||||
<Loading :loaded="loaded" :loading="loading"></Loading>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getOrderList } from "@/api/order";
|
||||
import Loading from "@/components/Loading";
|
||||
|
||||
export default {
|
||||
name: "ReturnList",
|
||||
components: {
|
||||
Loading
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl:this.$VUE_APP_RESOURCES_URL,
|
||||
orderList: [],
|
||||
page: 1,
|
||||
limit: 20,
|
||||
loading: false,
|
||||
loaded: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goGoodsCon(cart) {
|
||||
this.$yrouter.push({
|
||||
path: "/pages/shop/GoodsCon/index",
|
||||
query: { id: cart.productInfo.id }
|
||||
});
|
||||
},
|
||||
goOrderDetails(order) {
|
||||
this.$yrouter.push({
|
||||
path: "/pages/order/OrderDetails/index",
|
||||
query: { id: order.orderId }
|
||||
});
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user