You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
386 lines
11 KiB
386 lines
11 KiB
<template>
|
|
<view class="retail-container">
|
|
<view class="rc-header">
|
|
<view class="ra-header">
|
|
<image mode="aspectFit" src="/static/images/icon/retail/storeIcon.png"></image>
|
|
<text>{{ orderInfo.stadium_name || '-' }}</text>
|
|
<view></view>
|
|
</view>
|
|
<view class="rh-name">
|
|
<view class="rh-name-line">
|
|
<view>
|
|
<view>微信昵称：</view>
|
|
<text>{{ orderInfo.nickname || '-' }}</text>
|
|
</view>
|
|
<view :style="{color:getStatus(orderInfo.pay_status)==='已退款'?'#EA5061':'#9C9C9F'}">{{ getStatus(orderInfo.pay_status) }}</view>
|
|
</view>
|
|
<view class="rh-name-line">
|
|
<view>
|
|
<view>手机号码：</view>
|
|
<text>{{ orderInfo.mobile || '-' }}</text>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="rh-name-line">
|
|
<view>
|
|
<view>身份：</view>
|
|
<text>{{ orderInfo.sys_optuname || '-' }}</text>
|
|
</view>
|
|
</view> -->
|
|
<view class="rh-name-line">
|
|
<view>
|
|
<view>下单途径：</view>
|
|
<text>{{ orderInfo.retail_source || '-' }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="rc-goods-info" v-if="orderInfo.retail_order_goods&&orderInfo.retail_order_goods.length">
|
|
<view class="rgi-tit">商品详情</view>
|
|
<view class="rgi-goods-ls">
|
|
<view class="rgl-item" v-for="(e, i) in orderInfo.retail_order_goods" :key="i">
|
|
<view class="rgl-item-desc">
|
|
<view>{{ e.erp_retail_goods ? (e.erp_retail_goods.goods_name || '-') : (e.name || '-') }}</view>
|
|
<view>￥{{ e.price || 0 }}</view>
|
|
</view>
|
|
<view class="rgl-item-sku">sku：{{ e.erp_retail_goods ? (e.erp_retail_goods.erp_goods ? e.erp_retail_goods.erp_goods.erp_goods_sku : '-') : '-' }}</view>
|
|
<view class="rgl-item-type-spec">
|
|
<view>型号：{{ e.erp_retail_goods ? (e.erp_retail_goods.erp_goods ? e.erp_retail_goods.erp_goods.erp_goods_type : '-') : '-' }} 规格：{{ e.spec || '-' }}</view>
|
|
<text>x{{ e.nums || 0 }}</text>
|
|
</view>
|
|
<view v-if="orderInfo.retail_order_goods.length - 1 == i ? false : true" class="rgl-item-bottom-line"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="rc-total-amount-info">
|
|
<view class="rc-total-amount-line">
|
|
<view>金额小计</view>
|
|
<text>￥{{ orderInfo.amount || 0 }}</text>
|
|
</view>
|
|
<view class="rc-total-amount-line">
|
|
<view>积分抵扣</view>
|
|
<text>￥{{ orderInfo.deduction_amount || 0 }}</text>
|
|
</view>
|
|
<view class="rc-total-amount-line">
|
|
<view>折扣金额</view>
|
|
<text>-￥{{ orderInfo.discount_amount || 0 }}</text>
|
|
</view>
|
|
<view class="rc-total-amount-line">
|
|
<view>优惠券优惠</view>
|
|
<text>-￥{{ orderInfo.coupons_amount || 0 }}</text>
|
|
</view>
|
|
<view class="rgi-total"><text>合计支付：</text>￥{{ orderInfo.pay_amount || 0 }}</view>
|
|
</view>
|
|
<view class="rc-pay-info">
|
|
<!-- 订单编号 -->
|
|
<view class="rpi-tit">支付详情</view>
|
|
<p-line :keyname="'订单编号'" :value="orderInfo.order_no || '-'" isbtn></p-line>
|
|
<!-- <p-line :keyname="'支付方式'" :value="payTypeTxt(orderInfo.pay_type, orderInfo.card_no)"></p-line> -->
|
|
<p-line :keyname="'支付方式'" :value="orderInfo.extension ? orderInfo.extension.pay_type_text || '-' : '-'"></p-line>
|
|
<p-line :keyname="'支付时间'" :value="orderInfo.pay_time || '-'"></p-line>
|
|
</view>
|
|
|
|
<!-- 退款列表 -->
|
|
<view v-for="(e, i) in refundList" :key="i" style="padding: 24rpx 0 0;">
|
|
<order-refund-info
|
|
:refund_price="e.amount || 0"
|
|
:refund_no="e.refund_no || '-'"
|
|
:refund_time="e.refund_time || '-'"
|
|
:refund_reason="e.reason || '-'"
|
|
:nameKey="i + 1"
|
|
></order-refund-info>
|
|
</view>
|
|
|
|
<order-refund-fixed
|
|
:pay_amount="orderInfo.pay_amount || 0"
|
|
:refund_amount="orderInfo.refund_amount || 0"
|
|
:refund_times="refundList&&refundList.length"
|
|
@click:button="refunndBtn"
|
|
></order-refund-fixed>
|
|
|
|
<order-refund-modal
|
|
ref="orderRefundModal"
|
|
></order-refund-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { ORDER_API } from '../../../js/api';
|
|
import server from '../../../js/server';
|
|
import util from '../../../../../utils/util';
|
|
import s_line from '../../../components/s_line/s_line.vue';
|
|
import p_line from '../../../components/p_line/p_line.vue';
|
|
import orderRefundFixed from '@/components/order_refund/fixed.vue'
|
|
import orderRefundModal from '@/components/order_refund/modal.vue';
|
|
import orderRefundInfo from '@/components/order_refund/info.vue';
|
|
import { mapState } from 'vuex';
|
|
export default {
|
|
components: {
|
|
's-line': s_line,
|
|
'p-line': p_line,
|
|
'order-refund-fixed': orderRefundFixed,
|
|
'order-refund-modal': orderRefundModal,
|
|
'order-refund-info': orderRefundInfo
|
|
},
|
|
data(){
|
|
return {
|
|
orderInfo: {},
|
|
refundList: []
|
|
}
|
|
},
|
|
computed:{
|
|
...mapState([ 'brandInfo',])
|
|
},
|
|
onLoad(options){
|
|
this.getOrderInfo(options.order_no);
|
|
this.retailOrderInfoRefundList({
|
|
order_no: options.order_no,
|
|
brand_id: this.brandInfo.brand.id
|
|
})
|
|
},
|
|
methods: {
|
|
refunndBtn(){
|
|
let { orderInfo, refundList } = this;
|
|
this.$refs.orderRefundModal.show({
|
|
stadium_name: orderInfo?.stadium_name ?? '',
|
|
order_no: orderInfo?.order_no ?? '',
|
|
mobile: orderInfo?.mobile ?? '',
|
|
refundable_amount: orderInfo?.extension?.refundable_amount ?? 0,
|
|
refundable_integral: orderInfo?.extension?.refundable_integral ?? 0,
|
|
refund_times: refundList?.length || 0,
|
|
confirm: e => {
|
|
console.log('refund' , e)
|
|
// this.venueCourseOrderRefund({
|
|
// order_no: orderInfo?.order_no ?? '',
|
|
// amount: e.refund_amount || 0,
|
|
// integral: e.refund_integral || 0
|
|
// })
|
|
this.confirmRefundReq({
|
|
order_no: orderInfo?.order_no || '',
|
|
amount: e.refund_amount || 0,
|
|
integral: e.refund_integral || 0
|
|
})
|
|
}
|
|
});
|
|
},
|
|
confirmRefundReq({ order_no = '', amount = 0, integral = 0}){
|
|
util.showLoad();
|
|
server.get({
|
|
url: ORDER_API.orderRefund,
|
|
data: { order_no, amount, integral },
|
|
isDefaultGet: false
|
|
})
|
|
.then(res=>{
|
|
util.hideLoad();
|
|
if(res.data.code == 0){
|
|
util.showNone(res.data.message || '操作成功！');
|
|
}else{
|
|
util.showNone(res.data.message || '操作失败！');
|
|
}
|
|
})
|
|
.then(_=>{
|
|
setTimeout(_=>{
|
|
let { orderInfo } = this;
|
|
this.getOrderInfo(orderInfo?.order_no || '');
|
|
this.retailOrderInfoRefundList({
|
|
order_no: orderInfo?.order_no || '',
|
|
brand_id: orderInfo?.brand_id || ''
|
|
})
|
|
}, 1200);
|
|
})
|
|
.catch(util.hideLoad)
|
|
},
|
|
// payTypeTxt: util.order_pay_type_txt,
|
|
payTypeTxt(payType, cardNo) {
|
|
let _obj = {
|
|
0: '微信支付',
|
|
1: '支付宝支付',
|
|
2: `储值卡支付 ${cardNo ? '(' + cardNo + ')' : ''}`,
|
|
3: '现金支付',
|
|
4: '其他'
|
|
};
|
|
return _obj[payType] || '-'
|
|
},
|
|
getStatus(status){
|
|
let _obj = {
|
|
1: '交易成功',
|
|
4: '已退款'
|
|
}
|
|
return _obj[status] || '-'
|
|
},
|
|
getOrderInfo(order_no){
|
|
util.showLoad();
|
|
server.get({
|
|
url: ORDER_API.retailOrderInfo,
|
|
data: { order_no, brand_id: this.brandInfo.brand.id },
|
|
failMsg: '加载失败！'
|
|
})
|
|
.then(res=>{
|
|
this.orderInfo = res || {};
|
|
// this.orderInfo.refunds = [
|
|
// { refund_amount: this.orderInfo.refund_amount, refund_no: this.orderInfo.refund_no, refund_time: this.orderInfo.refund_time, refund_reason: this.orderInfo.refund_reason },
|
|
// { refund_amount: this.orderInfo.refund_amount, refund_no: this.orderInfo.refund_no, refund_time: this.orderInfo.refund_time, refund_reason: this.orderInfo.refund_reason }
|
|
// ];
|
|
|
|
});
|
|
},
|
|
retailOrderInfoRefundList({ order_no, brand_id }){
|
|
server.get({
|
|
url: ORDER_API.retailOrderInfoRefundList,
|
|
data: { order_no, brand_id },
|
|
failMsg: '加载失败！'
|
|
})
|
|
.then(res=>{
|
|
util.hideLoad();
|
|
this.refundList = res?.list || [];
|
|
});
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~style/public.scss';
|
|
.retail-container{
|
|
|
|
}
|
|
.rc-header{
|
|
margin-bottom: 26upx;
|
|
padding: 0 24upx;
|
|
background-color: #fff;
|
|
.ra-header {
|
|
position: relative;
|
|
padding: 30upx 0;
|
|
@include centerFlex(flex-start);
|
|
>image {
|
|
width: 32upx;
|
|
height: 30upx;
|
|
margin-right: 14upx;
|
|
}
|
|
>text {
|
|
font-size: 28upx;
|
|
font-weight: 500;
|
|
color: #1A1A1A;
|
|
}
|
|
>view {
|
|
position: absolute;
|
|
bottom: 0%;
|
|
width: 100%;
|
|
height: 2upx;
|
|
background-color: #D8D8D8;
|
|
}
|
|
}
|
|
.rh-name{
|
|
padding: 18upx 0;
|
|
.rh-name-line {
|
|
@include centerFlex(space-between);
|
|
font-size: 28upx;
|
|
font-weight: 400;
|
|
margin-bottom: 10upx;
|
|
|
|
>view {
|
|
&:first-child {
|
|
color: #9C9C9F;
|
|
@include centerFlex(flex-start);
|
|
flex-grow: 1;
|
|
|
|
>view {
|
|
width: 152upx;
|
|
flex-shrink: 0;
|
|
}
|
|
>text {
|
|
color: #1A1A1A;
|
|
@include textHide(1);
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.rc-goods-info{
|
|
margin-bottom: 24upx;
|
|
padding: 30upx 24upx 46upx 24upx;
|
|
background-color: #fff;
|
|
font-weight: 500;
|
|
.rgi-tit{
|
|
font-size: 32upx;
|
|
font-weight: 500;
|
|
color: #1a1a1a;
|
|
}
|
|
.rgi-goods-ls{
|
|
.rgl-item{
|
|
padding-top: 30upx;
|
|
// border-bottom: 2upx solid #D8D8D8;
|
|
color: #9C9C9F;
|
|
font-size: 28upx;
|
|
|
|
.rgl-item-desc {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 20upx;
|
|
color: #1A1A1A;
|
|
}
|
|
.rgl-item-sku {
|
|
margin-bottom: 10upx;
|
|
}
|
|
.rgl-item-type-spec {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
>text {
|
|
color: #1A1A1A;
|
|
}
|
|
}
|
|
.rgl-item-bottom-line {
|
|
width: 100%;
|
|
height: 2upx;
|
|
background-color: #D8D8D8;
|
|
margin-top: 18upx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.rc-total-amount-info{
|
|
margin-bottom: 24upx;
|
|
padding: 0 24upx;
|
|
padding-top: 1upx;
|
|
background-color: #fff;
|
|
font-size: 28upx;
|
|
|
|
.rc-total-amount-line {
|
|
margin-top: 26upx;
|
|
@include centerFlex(space-between);
|
|
>text {
|
|
font-size: 24upx;
|
|
}
|
|
}
|
|
.rgi-total{
|
|
text-align: right;
|
|
line-height: 106upx;
|
|
font-weight: 500;
|
|
font-size: 28upx;
|
|
color: #1a1a1a;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
>text{
|
|
color: #9a9a9d;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
.rc-pay-info{
|
|
padding: 30upx;
|
|
background-color: #fff;
|
|
.rpi-tit{
|
|
margin-bottom: 16upx;
|
|
line-height: 44upx;
|
|
font-size: 32upx;
|
|
color: #1A1A1A;
|
|
}
|
|
}
|
|
</style>
|