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.
306 lines
9.0 KiB
306 lines
9.0 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.source || '-' }}</text>
|
|
<view></view>
|
|
</view>
|
|
<view class="rh-name">
|
|
<view class="rh-name-line">
|
|
<view>
|
|
<view>微信昵称：</view>
|
|
<text>{{ orderInfo.sys_optuname || '-' }}</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.operator || '-' }}</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.name || '-' }}</view>
|
|
<view>￥{{ e.price || 0 }}</view>
|
|
</view>
|
|
<view class="rgl-item-sku">sku：{{ e.sku || '-' }}</view>
|
|
<view class="rgl-item-type-spec">
|
|
<view>型号：{{ e.unit || '-' }} 规格：{{ 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_integral || 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.pay_time || '-'"></p-line>
|
|
</view>
|
|
<view v-if="orderInfo.refunds&&orderInfo.refunds.length">
|
|
<view class="rc-refund-info" v-for="(item, index) in orderInfo.refunds" :key="index">
|
|
<view class="rpi-tit">退款信息{{ index + 1 }}</view>
|
|
<p-line :keyname="'退款金额：'" :value="item.refund_amount ? '￥' + item.refund_amount : '0'"></p-line>
|
|
<p-line :keyname="'退款单号：'" :value="item.refund_no || '-'"></p-line>
|
|
<p-line :keyname="'退款时间：'" :value="item.refund_time || '-'"></p-line>
|
|
<p-line :keyname="'退款原因：'" :value="item.refund_reason || '-'"></p-line>
|
|
</view>
|
|
</view>
|
|
</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';
|
|
export default {
|
|
components: {
|
|
's-line': s_line,
|
|
'p-line': p_line,
|
|
},
|
|
data(){
|
|
return {
|
|
orderInfo: {}
|
|
}
|
|
},
|
|
onLoad(options){
|
|
this.getOrderInfo(options.order_no);
|
|
},
|
|
methods: {
|
|
// 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 },
|
|
failMsg: '加载失败！'
|
|
})
|
|
.then(res=>{
|
|
util.hideLoad();
|
|
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 }
|
|
// ];
|
|
})
|
|
},
|
|
|
|
}
|
|
}
|
|
</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: #333;
|
|
@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: #333;
|
|
}
|
|
.rgl-item-sku {
|
|
margin-bottom: 10upx;
|
|
}
|
|
.rgl-item-type-spec {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
>text {
|
|
color: #333;
|
|
}
|
|
}
|
|
.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: #333;
|
|
}
|
|
}
|
|
.rc-refund-info{
|
|
padding: 30upx;
|
|
margin-top: 24upx;
|
|
background-color: #fff;
|
|
.rpi-tit{
|
|
margin-bottom: 16upx;
|
|
line-height: 44upx;
|
|
font-size: 28upx;
|
|
color: #9C9C9F;
|
|
}
|
|
}
|
|
</style>
|