|
|
@@ -1,40 +1,58 @@
|
|
|
<template>
|
|
|
<view class="app-content">
|
|
|
- <view class="flex refund-item">
|
|
|
- <view class="refund-label">退款方式：</view>
|
|
|
- <view class="flex list">
|
|
|
- <view class="flex" >{{refundType==1?'退货并退款':'只退款'}}</view>
|
|
|
+ <!-- 库存变化 -->
|
|
|
+ <view class="info-section">
|
|
|
+ <view class="section-title">库存变化</view>
|
|
|
+ <view class="section-content">
|
|
|
+ <view class="status-tag" :class="refundType==1 ? 'return-stock' : 'no-return'">
|
|
|
+ {{refundType==1?'退回库存':'不退库存'}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="refund-item-list" v-if="refundType==1">
|
|
|
- <view class="refund-label">退货商品：</view>
|
|
|
- <view>
|
|
|
+
|
|
|
+ <!-- 退货商品 -->
|
|
|
+ <view class="info-section">
|
|
|
+ <view class="section-title">退货商品</view>
|
|
|
+ <view class="section-content">
|
|
|
<template v-if="!$util.isEmpty(itemList)">
|
|
|
- <view class="list" v-for="(res,i) in itemList" :key="i">
|
|
|
- <view class="flex list-title" >
|
|
|
- {{res.name}} {{res.num}}{{res.unitName}} X ￥{{parseFloat(res.unitPrice)}} = ￥{{parseFloat(res.price)}}
|
|
|
+ <view class="goods-item" v-for="(res,i) in itemList" :key="'item-'+i">
|
|
|
+ <view class="goods-name">{{res.name}}</view>
|
|
|
+ <view class="goods-detail">
|
|
|
+ <text>{{res.num}}{{res.unitName}} × ￥{{parseFloat(res.unitPrice)}} = </text>
|
|
|
+ <text class="price">￥{{parseFloat(res.price)}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<template v-if="!$util.isEmpty(goodsList)">
|
|
|
- <view class="list" v-for="(res,i) in goodsList" :key="i">
|
|
|
- <view class="flex list-title" >
|
|
|
- {{res.name}} {{res.num}}份 X ￥{{parseFloat(res.unitPrice)}} = ￥{{parseFloat(res.price)}}
|
|
|
+ <view class="goods-item" v-for="(res,i) in goodsList" :key="'goods-'+i">
|
|
|
+ <view class="goods-name">{{res.name}}</view>
|
|
|
+ <view class="goods-detail">
|
|
|
+ <text>{{res.num}}份 × ￥{{parseFloat(res.unitPrice)}} = </text>
|
|
|
+ <text class="price">￥{{parseFloat(res.price)}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="flex refund-item">
|
|
|
- <view class="refund-label"><text></text>退款金额：</view>
|
|
|
- <view class="list">{{parseFloat(refundPrice)}}</view>
|
|
|
+
|
|
|
+ <!-- 退款金额 -->
|
|
|
+ <view class="info-section">
|
|
|
+ <view class="section-title">退款金额</view>
|
|
|
+ <view class="section-content">
|
|
|
+ <view class="amount">￥{{parseFloat(refundPrice)}}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class=" refund-item">
|
|
|
- <view class="refund-label">备注信息：</view>
|
|
|
- <view class="list">{{remak}}</view>
|
|
|
+
|
|
|
+ <!-- 备注信息 -->
|
|
|
+ <view class="info-section">
|
|
|
+ <view class="section-title">备注信息</view>
|
|
|
+ <view class="section-content">
|
|
|
+ <view class="remark">{{remark || '无'}}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
import { refundDetail } from "@/api/refund/index";
|
|
|
export default {
|
|
|
@@ -62,79 +80,85 @@ export default {
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
<style lang="scss" scoped>
|
|
|
-.app-content{
|
|
|
- height: calc(100vh - 30upx * 2);
|
|
|
- padding: 30upx;
|
|
|
- background: #FFFFFF;
|
|
|
- .radioBtn{
|
|
|
- width: 30upx;
|
|
|
- height: 30upx;
|
|
|
- margin-right: 10upx;
|
|
|
- border: 1upx solid #ddd;
|
|
|
- border-radius: 50%;
|
|
|
- &.active{
|
|
|
- position: relative;
|
|
|
- border: 1upx solid #3385ff;
|
|
|
- &:after{
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 18upx;
|
|
|
- height: 18upx;
|
|
|
- background: #3385ff;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .refund-item-list{
|
|
|
- display: flex;
|
|
|
- padding-bottom: 30upx;
|
|
|
- border-bottom: 1upx solid #dddddd;
|
|
|
- .refund-label{
|
|
|
- width: 200upx;
|
|
|
- text{color: red;}
|
|
|
+.app-content {
|
|
|
+ padding: 20upx;
|
|
|
+ background: #f8f8f8;
|
|
|
+ min-height: calc(100vh - 40upx);
|
|
|
+
|
|
|
+ .info-section {
|
|
|
+ background: #ffffff;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ border-radius: 8upx;
|
|
|
+ border: 1upx solid #e8e8e8;
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ padding: 24upx 30upx 16upx;
|
|
|
+ font-size: 30upx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ border-bottom: 1upx solid #f0f0f0;
|
|
|
}
|
|
|
- .list{
|
|
|
- margin-bottom: 10upx;
|
|
|
- .list-title{
|
|
|
- height: 60upx;
|
|
|
- padding-bottom: 20upx;
|
|
|
-
|
|
|
+
|
|
|
+ .section-content {
|
|
|
+ padding: 24upx 30upx;
|
|
|
+
|
|
|
+ .status-tag {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 8upx 16upx;
|
|
|
+ border-radius: 4upx;
|
|
|
+ font-size: 26upx;
|
|
|
+
|
|
|
+ &.return-stock {
|
|
|
+ background: #f6ffed;
|
|
|
+ color: #52c41a;
|
|
|
+ border: 1upx solid #d9f7be;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.no-return {
|
|
|
+ background: #fff7e6;
|
|
|
+ color: #fa8c16;
|
|
|
+ border: 1upx solid #ffd591;
|
|
|
+ }
|
|
|
}
|
|
|
- .list-val{
|
|
|
- input{
|
|
|
- width: 150upx;
|
|
|
- border: 1upx solid #ddd;
|
|
|
+
|
|
|
+ .goods-item {
|
|
|
+ padding: 16upx 0;
|
|
|
+ border-bottom: 1upx solid #f5f5f5;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
}
|
|
|
- text{
|
|
|
- padding: 0 30upx;
|
|
|
+
|
|
|
+ .goods-name {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-detail {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #666;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ color: #ff4d4f;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .refund-item{
|
|
|
- display: flex;
|
|
|
- padding: 20upx 0;
|
|
|
- .refund-label{width: 200upx;text{color: red;}}
|
|
|
- input{
|
|
|
- border: 1upx solid #ddd;
|
|
|
- }
|
|
|
- textarea{
|
|
|
- width: calc(100% - 210upx);
|
|
|
- border: 1upx solid #ddd;
|
|
|
- height:150upx;
|
|
|
- }
|
|
|
- }
|
|
|
- .btn-box{
|
|
|
- .btn{
|
|
|
- width: 200upx;
|
|
|
- height: 60upx;
|
|
|
- border: 1upx solid #666666;
|
|
|
- border-radius: 10upx;
|
|
|
- &.active{
|
|
|
- background: #3385ff;
|
|
|
- color: #fff;
|
|
|
- border: 1upx solid #3385ff;
|
|
|
+
|
|
|
+ .amount {
|
|
|
+ font-size: 36upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ff4d4f;
|
|
|
+ }
|
|
|
+
|
|
|
+ .remark {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #333;
|
|
|
+ line-height: 1.5;
|
|
|
}
|
|
|
}
|
|
|
}
|
