|
|
@@ -1,63 +1,108 @@
|
|
|
<template>
|
|
|
<view class="details clearfix">
|
|
|
- <!-- <cu-custom :navbar-data='nvabarData'></cu-custom> -->
|
|
|
<view class="container-details" v-show="isRequest">
|
|
|
- <!-- 订单信息 -->
|
|
|
- <view class="information-content">
|
|
|
- <view class="info-item"><view class="item-view"><text class="label">供应商：{{orderInfo.shopName ? orderInfo.shopName :''}}</text></view></view>
|
|
|
- <view class="info-item"><view class="item-view"><text class="label">订单号：{{orderInfo.shopOrderNo}}</text></view></view>
|
|
|
- <view class="info-item"><view class="item-view"><text class="label">下单时间：{{orderInfo.orderTime}}</text></view></view>
|
|
|
- <view class="info-item">
|
|
|
- <view class="item-view"><text class="label">收款状态：<text :style="{color:setStatusText(orderInfo.receiptStatus)}">{{setStatusTextHtml(orderInfo.receiptStatus)}}</text></text></view>
|
|
|
- <view class="item-view"><text class="label">结算状态：<text :style="{color:setStatusText(orderInfo.payStatus)}">{{setStatusTextHtml1(orderInfo.payStatus)}}</text></text></view>
|
|
|
- </view>
|
|
|
- <view class="info-item">
|
|
|
- <view class="item-view"><text class="label">发货状态：<text :style="{color:setStatusText(orderInfo.sendOutStatus)}">{{setStatusTextHtml2(orderInfo.sendOutStatus)}}</text></text></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
<!-- 地址信息 -->
|
|
|
- <view class="address-content">
|
|
|
- <view class="info-item"><text class="label">收货人：{{orderInfo.userInfo.shouHuoRen}}</text></view>
|
|
|
- <view class="info-item"><text class="label">联系方式：{{orderInfo.userInfo.mobile}}</text></view>
|
|
|
- <view class="info-item"><text class="label">收货地址：<text style="color: #666666;">{{orderInfo.userInfo.address}}</text></text></view>
|
|
|
+ <view class="address-section clearfix">
|
|
|
+ <view class="address-content">
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="label">买家名称：{{orderInfo.userInfo.name}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="label">收货人：{{orderInfo.userInfo.shouHuoRen}}</text>
|
|
|
+ <text class="label" :style="{marginLeft:40+'rpx'}">联系方式：{{orderInfo.userInfo.mobile}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="label">收货地址：<text style="color: #666666;">{{orderInfo.userInfo.address}}</text></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image src="../../../static/temp/line@3x.png" mode=""></image>
|
|
|
</view>
|
|
|
<!-- 商品 -->
|
|
|
<view class="goods-list">
|
|
|
<view class="goods-item clearfix">
|
|
|
<view class="productlist" v-for="(pros,idx) in orderInfo.orderProductList" :key="idx">
|
|
|
- <view class="goods-pros-t" @click="hanldOperationConfim(pros)">
|
|
|
+ <view class="goods-pros-t">
|
|
|
<view class="pros-left">
|
|
|
<view class="pros-img"><image :src="pros.productImage" alt="" mode="aspectFill"/></view>
|
|
|
</view>
|
|
|
<view class="pros-product">
|
|
|
<view class="producttitle">{{pros.aliasName ? pros.aliasName : ''}}</view>
|
|
|
<view class="productspec">规格：{{pros.productUnit ? pros.productUnit : ''}}</view>
|
|
|
- <view class="productspec">商品编码：{{pros.productNo ? pros.productNo : ''}}</view>
|
|
|
<view class="product-view">
|
|
|
- <view class="view-num">数量：{{pros.num+pros.presentNum}}</view>
|
|
|
+ <view class="view-num price">¥{{ pros.price1 | NumFormat }}</view>
|
|
|
+ <view class="view-num num"> <text class="small">X</text> {{pros.num+pros.presentNum}}</view>
|
|
|
</view>
|
|
|
<view class="product-view">
|
|
|
<view class="view-num">已发货：{{pros.shipmentsNum}}</view>
|
|
|
- <view class="view-num">未发货：{{pros.notOutStore-pros.actualCancelNum}}</view>
|
|
|
- </view>
|
|
|
- <view class="product-view">
|
|
|
- <view class="view-num" v-if="pros.returnedNum>0">已退货：{{pros.returnedNum}}</view>
|
|
|
- <view class="view-num" v-if="pros.actualCancelNum>0">已取消：{{pros.actualCancelNum}}</view>
|
|
|
+ <view class="view-num">已退货：{{pros.returnedNum}}</view>
|
|
|
+ <view class="view-num">已退货：{{pros.actualCancelNum}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="product-total">
|
|
|
+ <view class="total">
|
|
|
+ 合计： <text>¥{{ pros.totalAmount | NumFormat }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="goods-pros-m" v-show="orderInfo.note!=null">
|
|
|
- <view class="m-text">留言:</view>
|
|
|
+
|
|
|
+ <view class="goods-pros-m" v-if="orderInfo.note">
|
|
|
+ <view class="m-text">留言：</view>
|
|
|
<view class="m-input">
|
|
|
<view class="text">{{orderInfo.note ? orderInfo.note : ''}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="goods-pros-b">
|
|
|
<view class="count">共{{orderInfo.itemCount}}件商品</view>
|
|
|
+ <view class="money">商品总额：<text class="red">¥{{orderInfo.productAmount | NumFormat}}</text> </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 订单信息 -->
|
|
|
+ <view class="information-content clearfix">
|
|
|
+ <view class="order-title">
|
|
|
+ <view class="order-title-t">
|
|
|
+ <view class="order-title-num">订单编号：{{ orderInfo.shopOrderNo }}</view>
|
|
|
+ <view class="order-title-tip">结算状态：<text :style="{color:setStatusText(orderInfo.payStatus)}">{{ orderInfo.payStatus | payStatusType }}</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="order-title-t">
|
|
|
+ <view class="order-title-num">下单时间：{{ orderInfo.orderTime }}</view>
|
|
|
+ <view class="order-title-tip">发货状态：<text class="status" :style="{color:setStatusText(orderInfo.receiptStatus)}">{{ orderInfo.sendOutStatus | sendOutStatusType }}</text></view>
|
|
|
</view>
|
|
|
+ <template v-if="isOpenInfoFlag">
|
|
|
+ <view class="order-title-t">
|
|
|
+ <view class="order-title-num">结算商品金额：<text class="red">¥{{orderInfo.shopProductAmount | NumFormat}}</text></view>
|
|
|
+ <view class="order-title-tip">结算税费：<text class="red">¥{{orderInfo.shopTaxFee | NumFormat}}</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="order-title-t">
|
|
|
+ <view class="order-title-num">结算运费：<text class="red">¥{{orderInfo.shopPostFee | NumFormat}}</text></view>
|
|
|
+ <view class="order-title-tip">总结算金额：<text class="red">¥{{orderInfo.shouldPayShopAmount | NumFormat}}</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="order-title-t">
|
|
|
+ <view class="order-title-num">已结算金额：<text class="red">¥{{orderInfo.payedShopAmount | NumFormat}}</text></view>
|
|
|
+ <view class="order-title-tip"></view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view class="order-more" v-if="isOpenFlag">
|
|
|
+ <view class="btnInfo" @click="OpenFlagShow">查看更多<label class="iconfont icon-xiangxiajiantou"></label></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- 结算记录 -->
|
|
|
+ <view class="information-record clearfix">
|
|
|
+ <view class="record-title">
|
|
|
+ <view class="record-title-l">结算记录</view>
|
|
|
+ </view>
|
|
|
+ <view class="record-list" v-if="payShopRecord.length>0">
|
|
|
+ <view class="record-item" v-for="(item,index) in payShopRecord" :key="index">
|
|
|
+ <view class="item-time mm">￥{{item.payAmount | NumFormat}}</view>
|
|
|
+ <view class="item-time tt">{{item.payTime}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="record-empty" v-else>
|
|
|
+ <text>暂无结算记录</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<!-- 底部button -->
|
|
|
<order-button ref="orderButton"
|
|
|
v-if= "isRequest"
|
|
|
@@ -109,6 +154,9 @@
|
|
|
isOrderShare:false,
|
|
|
isShareModal:false,
|
|
|
orderInfo:{}, //订单信息
|
|
|
+ payShopRecord:[], //结算记录
|
|
|
+ isOpenInfoFlag:false,
|
|
|
+ isOpenFlag:true
|
|
|
|
|
|
}
|
|
|
},
|
|
|
@@ -117,11 +165,37 @@
|
|
|
this.shopOrderId = option.shopOrderId;
|
|
|
this.initShopOrderDetails()
|
|
|
},
|
|
|
+ filters:{
|
|
|
+ sendOutStatusType(value) {
|
|
|
+ if (value === null) {
|
|
|
+ return '未发货';
|
|
|
+ } else if(value === '1') {
|
|
|
+ return '待发货';
|
|
|
+ } else if(value === '2') {
|
|
|
+ return '部分发货';
|
|
|
+ } else{
|
|
|
+ return '已发货';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ payStatusType(value) {
|
|
|
+ if (value === '1') {
|
|
|
+ return '待结算';
|
|
|
+ } else if (value === '2') {
|
|
|
+ return '部分结算';
|
|
|
+ } else {
|
|
|
+ return '已结算';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ NumFormat(value) {//处理金额
|
|
|
+ return Number(value).toFixed(2);
|
|
|
+ },
|
|
|
+ },
|
|
|
methods: {
|
|
|
initShopOrderDetails(){//初始化页面数据@参数：订单ID
|
|
|
- this.ShopService.GetShopOrderDetails({ shopOrderId : this.shopOrderId }).then(res =>{
|
|
|
- this.orderInfo = res.data.shopOrder
|
|
|
+ this.ShopService.GetShopOrderDetails({ shopOrderId : this.shopOrderId }).then(response =>{
|
|
|
+ this.orderInfo = response.data.shopOrder
|
|
|
this.btnStatus = this.orderInfo.sendOutStatus
|
|
|
+ this.payShopRecord = response.data.payShopRecord
|
|
|
this.isRequest = true
|
|
|
}).catch(err =>{
|
|
|
this.$util.msg(err.msg,2000);
|
|
|
@@ -201,6 +275,10 @@
|
|
|
}
|
|
|
return textColor
|
|
|
},
|
|
|
+ OpenFlagShow(){//查看更多
|
|
|
+ this.isOpenInfoFlag = true
|
|
|
+ this.isOpenFlag = false
|
|
|
+ },
|
|
|
onShareCode(){
|
|
|
this.isShareModal = true
|
|
|
},
|
|
|
@@ -243,7 +321,72 @@
|
|
|
height: auto;
|
|
|
padding:10rpx 24rpx;
|
|
|
background: #FFFFFF;
|
|
|
- margin-bottom: 24rpx;
|
|
|
+ margin: 24rpx 0;
|
|
|
+ .order-more{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ .btnInfo{
|
|
|
+ width: 140rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border: 2rpx solid #e1e1e1;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ padding: 5rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #b2b2b2;
|
|
|
+ margin: 20rpx auto;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ .iconfont{
|
|
|
+ position: relative;
|
|
|
+ top: 5rpx;
|
|
|
+ right: -3rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order-title{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ .order-title-t{
|
|
|
+ width: 100%;
|
|
|
+ height: 58rpx;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ line-height: 58rpx;
|
|
|
+ .order-title-num{
|
|
|
+ float: left;
|
|
|
+ text-align: left;
|
|
|
+ color: #666666;
|
|
|
+ .red{
|
|
|
+ color: #f94b4b;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order-title-tip{
|
|
|
+ float: right;
|
|
|
+ text-align: right;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #666666;
|
|
|
+ .red{
|
|
|
+ color: #f94b4b;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .status{
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order-title-b{
|
|
|
+ width: 100%;
|
|
|
+ height: 40rpx;
|
|
|
+ float: left;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: #999999;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
.info-item{
|
|
|
height: 58rpx;
|
|
|
width: 100%;
|
|
|
@@ -256,20 +399,31 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .address-content{
|
|
|
- width: 702rpx;
|
|
|
- height: auto;
|
|
|
- padding:10rpx 24rpx;
|
|
|
- background: #FFFFFF;
|
|
|
+ .address-section{
|
|
|
+ width: 100%;
|
|
|
margin-bottom: 24rpx;
|
|
|
- .info-item{
|
|
|
+ .address-content{
|
|
|
width: 100%;
|
|
|
- display: flex;
|
|
|
- line-height: 50rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: #333333;
|
|
|
+ height: auto;
|
|
|
+ padding:10rpx 24rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: left;
|
|
|
+ .info-item{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ line-height: 50rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ image{
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+ height: 6rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.goods-list{
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
@@ -310,6 +464,22 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .product-total{
|
|
|
+ width: 100%;
|
|
|
+ height: 60rpx;
|
|
|
+ float: left;
|
|
|
+ border-bottom: 1px solid #E1E1E1;
|
|
|
+ .total{
|
|
|
+ float: right;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: bold;
|
|
|
+ text{
|
|
|
+ color: #f94b4b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.pros-product{
|
|
|
width: 468rpx;
|
|
|
height: 100%;
|
|
|
@@ -333,6 +503,19 @@
|
|
|
font-size: $font-size-26;
|
|
|
color: #666666;
|
|
|
line-height: 44rpx;
|
|
|
+ .small{
|
|
|
+ font-size: $font-size-20;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ &.price{
|
|
|
+ flex: 9;
|
|
|
+ color: #f94b4b;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ &.num{
|
|
|
+ flex: 1;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.producttitle{
|
|
|
@@ -346,6 +529,7 @@
|
|
|
-webkit-line-clamp: 2;
|
|
|
overflow: hidden;
|
|
|
margin-bottom: 8rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
}
|
|
|
.productspec{
|
|
|
height: 44rpx;
|
|
|
@@ -361,7 +545,7 @@
|
|
|
line-height: 48rpx;
|
|
|
font-size: $font-size-28;
|
|
|
width: 48%;
|
|
|
- color: #FF2A2A;
|
|
|
+ color: #f94b4b;
|
|
|
float: left;
|
|
|
}
|
|
|
.count{
|
|
|
@@ -382,10 +566,9 @@
|
|
|
color: $text-color;
|
|
|
float: left;
|
|
|
padding: 10rpx 0;
|
|
|
- border-top: 1px solid #F7F7F7;
|
|
|
border-bottom: 1px solid #F7F7F7;
|
|
|
.m-text{
|
|
|
- width: 62rpx;
|
|
|
+ width: 82rpx;
|
|
|
float: left;
|
|
|
padding-right: 20rpx;
|
|
|
font-weight:bold;
|
|
|
@@ -398,7 +581,7 @@
|
|
|
-webkit-align-items: center;
|
|
|
align-items: center;
|
|
|
position: relative;
|
|
|
- width: 620rpx;
|
|
|
+ width: 600rpx;
|
|
|
height: auto;
|
|
|
padding: 20rpx 0 10rpx 0;
|
|
|
background: #FFFFFF;
|
|
|
@@ -417,12 +600,86 @@
|
|
|
margin-top: 12rpx;
|
|
|
float: left;
|
|
|
.count{
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: $text-color;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ .money{
|
|
|
float: right;
|
|
|
font-size: $font-size-28;
|
|
|
line-height: 40rpx;
|
|
|
color: $text-color;
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
+ .red{
|
|
|
+ color: #f94b4b;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .information-record{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ .record-title{
|
|
|
+ width: 100%;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ float: left;
|
|
|
+ .record-title-l{
|
|
|
+ font-weight: bold;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .record-title-r{
|
|
|
+ float: right;
|
|
|
+ .red{
|
|
|
+ color: #FF2A2A;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .record-empty{
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #999999;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ .record-list{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ margin-top: 12rpx;
|
|
|
+ .record-item{
|
|
|
+ height: 40rpx;
|
|
|
+ width: 100%;
|
|
|
+ padding: 12rpx 0;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ line-height: 40rpx;
|
|
|
+ float: left;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: row;
|
|
|
+ .item-time{
|
|
|
+ &.mm{
|
|
|
+ flex: 1;
|
|
|
+ color: $text-color;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ &.tt{
|
|
|
+ flex: 1;
|
|
|
+ color: #999999;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
Administrator