|
|
@@ -1,174 +1,244 @@
|
|
|
+<!--
|
|
|
+ 售后详情页：展示退款申请信息、图片预览与审核操作
|
|
|
+ 供供货商在 ghsApp 查看/处理客户售后单
|
|
|
+-->
|
|
|
<template>
|
|
|
- <view class="app-content">
|
|
|
- <view class="flex refund-item">
|
|
|
- <view class="refund-label">退款方式：</view>
|
|
|
- <view class="flex list">
|
|
|
- <view class="flex" style="font-size:28upx;">{{refundType==1?'退货并退款':'只退款'}}</view>
|
|
|
+ <view class="refund-page">
|
|
|
+ <view class="refund-card">
|
|
|
+ <view class="refund-row">
|
|
|
+ <view class="refund-label">退款方式</view>
|
|
|
+ <view class="refund-value">{{ refundType == 1 ? '退货并退款' : '只退款' }}</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="refund-item-list" v-if="refundType==1">
|
|
|
- <view class="refund-label">退货商品：</view>
|
|
|
- <view>
|
|
|
- <view class="list" v-for="(res,i) in product" :key="i">
|
|
|
- <view class="flex list-title">
|
|
|
- {{res.name}} ￥{{parseFloat(res.xhUnitPrice)}}x{{res.xhNum}}{{res.xhUnitName}}=￥{{parseFloat(res.xhPrice)}}
|
|
|
+
|
|
|
+ <view class="refund-section" v-if="refundType == 1">
|
|
|
+ <view class="refund-label refund-section__title">退货商品</view>
|
|
|
+ <view class="refund-product-list">
|
|
|
+ <view class="refund-product-item" v-for="(res, i) in product" :key="i">
|
|
|
+ <view class="refund-product-item__name">
|
|
|
+ {{ res.name }} ￥{{ parseFloat(res.xhUnitPrice) }}×{{ res.xhNum }}{{ res.xhUnitName }}=￥{{ parseFloat(res.xhPrice) }}
|
|
|
+ </view>
|
|
|
+ <view class="refund-product-item__option" v-if="res.refundOptionId != 0">
|
|
|
+ {{ res.refundOptionName }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="flex list-title" v-if="res.refundOptionId!=0" style="color:#ad760d;height:auto;padding-bottom:8upx;font-size:24upx;">
|
|
|
- <text>{{ res.refundOptionName }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="refund-row">
|
|
|
+ <view class="refund-label">申请时间</view>
|
|
|
+ <view class="refund-value">{{ info.addTime ? info.addTime.substr(5, 11) : '' }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="refund-row">
|
|
|
+ <view class="refund-label">申请原因</view>
|
|
|
+ <view class="refund-value refund-value--inline">
|
|
|
+ <text>{{ causeText }}</text>
|
|
|
+ <text class="refund-link" @click="showChoice = true">修改</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <view class="refund-row" v-if="showChoice">
|
|
|
+ <view class="refund-label">选择原因</view>
|
|
|
+ <view class="refund-value refund-cause-btns">
|
|
|
+ <button class="admin-button-com mini-btn" @click="changeCause(0)">质量</button>
|
|
|
+ <button class="admin-button-com mini-btn refund-cause-btns__btn" @click="changeCause(1)">多开错开</button>
|
|
|
+ <button class="admin-button-com mini-btn refund-cause-btns__btn" @click="changeCause(2)">打包</button>
|
|
|
+ <button class="admin-button-com mini-btn refund-cause-btns__btn" @click="changeCause(3)">物流</button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="flex refund-item">
|
|
|
- <view class="refund-label"><text></text>申请时间：</view>
|
|
|
- <view class="list" style="font-size:28upx;">{{ info.addTime ? info.addTime.substr(5,11):'' }}</view>
|
|
|
- </view>
|
|
|
- <view class="flex refund-item">
|
|
|
- <view class="refund-label"><text></text>申请原因：</view>
|
|
|
- <view class="list" style="font-size:28upx;">
|
|
|
- {{ info.cause==0?'质量问题' : info.cause==1 ?'多开错开': info.cause==2 ? '打包原因' : info.cause==3 ? '物流原因' : '其它'}}
|
|
|
- <text style="margin-left:60upx;color:#3385FF;" @click="showChoice=true">修改</text>
|
|
|
+
|
|
|
+ <view class="refund-row">
|
|
|
+ <view class="refund-label">退款金额</view>
|
|
|
+ <view class="refund-value refund-value--inline">
|
|
|
+ <text class="refund-amount">¥{{ refundPrice }}</text>
|
|
|
+ <text class="refund-extra" v-if="Number(info.refundPackCost) > 0">（含退打包费{{ info.refundPackCost ? parseFloat(info.refundPackCost) : 0 }}元）</text>
|
|
|
+ <text class="refund-extra" v-if="Number(info.refundSendCost) > 0">（含退运费{{ info.refundSendCost ? parseFloat(info.refundSendCost) : 0 }}元）</text>
|
|
|
+ <text class="refund-link" @click="changeAmount()" v-if="info.status == 0">修改</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="flex refund-item" v-if="showChoice==true">
|
|
|
- <view class="refund-label"><text></text>选择原因：</view>
|
|
|
- <view class="list">
|
|
|
- <button class="admin-button-com mini-btn" @click="changeCause(0)">质量</button>
|
|
|
- <button class="admin-button-com mini-btn" style="margin-left:12upx;" @click="changeCause(1)">多开错开</button>
|
|
|
- <button class="admin-button-com mini-btn" style="margin-left:12upx;" @click="changeCause(2)">打包</button>
|
|
|
- <button class="admin-button-com mini-btn" style="margin-left:12upx;" @click="changeCause(3)">物流</button>
|
|
|
+
|
|
|
+ <view class="refund-row">
|
|
|
+ <view class="refund-label">退款状态</view>
|
|
|
+ <view class="refund-value">
|
|
|
+ <text :class="statusClass">{{ statusText }}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="flex refund-item">
|
|
|
- <view class="refund-label"><text></text>退款金额：</view>
|
|
|
- <view class="list" style="font-size:28upx;">
|
|
|
- ¥{{refundPrice}}
|
|
|
- <text style="margin-left:8upx;font-size:24upx;" v-if="Number(info.refundPackCost)>0">（含退打包费{{ info.refundPackCost?parseFloat(info.refundPackCost):0 }}元）</text>
|
|
|
- <text style="margin-left:8upx;font-size:24upx;" v-if="Number(info.refundSendCost)>0">（含退运费{{ info.refundSendCost?parseFloat(info.refundSendCost):0 }}元）</text>
|
|
|
- <text style="margin-left:80upx;color:#3385FF;" @click="changeAmount()" v-if="info.status == 0">修改</text>
|
|
|
+
|
|
|
+ <view class="refund-row">
|
|
|
+ <view class="refund-label">操作人员</view>
|
|
|
+ <view class="refund-value">{{ info.shopAdminName || '' }}</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="flex refund-item">
|
|
|
- <view class="refund-label"><text></text>退款状态：</view>
|
|
|
- <view class="list" style="font-size:28upx;">{{ info.status==0?'待审核':info.status==1?'已通过':info.status==2?'已驳回':info.status==3 ? '已取消':'' }}</view>
|
|
|
- </view>
|
|
|
- <view class="flex refund-item">
|
|
|
- <view class="refund-label"><text></text>操作人员：</view>
|
|
|
- <view class="list" style="font-size:28upx;">{{ info.shopAdminName||'' }}</view>
|
|
|
- </view>
|
|
|
- <view class=" refund-item" v-if="!$util.isEmpty(info.rejectReason)">
|
|
|
- <view class="refund-label">驳回原因：</view>
|
|
|
- <view class="list" style="font-size:28upx;">{{info.rejectReason?info.rejectReason:''}}</view>
|
|
|
- </view>
|
|
|
- <view class=" refund-item" v-if="!$util.isEmpty(info.remark)">
|
|
|
- <view class="refund-label">备注信息：</view>
|
|
|
- <view class="list" style="font-size:28upx;">{{info.remark?info.remark:''}}</view>
|
|
|
- </view>
|
|
|
- <view class=" refund-item" v-if="from == 1">
|
|
|
- <view class="refund-label">订单信息：</view>
|
|
|
- <view class="list" style="color:#3385FF;font-weight:800;font-size:28upx;" @click="goToOrder(info)">点击查看</view>
|
|
|
- </view>
|
|
|
- <view class=" refund-item" v-if="info.smallImgList && !$util.isEmpty(info.smallImgList)">
|
|
|
- <view class="refund-label">售后图片：</view>
|
|
|
- <view class="list">
|
|
|
- <block v-for="(itemImg, indexImg) in info.smallImgList" :key="indexImg">
|
|
|
- <image :src="itemImg" style="width:100upx;height:100upx;float:left;margin-left:20upx;margin-bottom:10upx;" @click="showBig(indexImg)" mode="widthFix"></image>
|
|
|
- </block>
|
|
|
+
|
|
|
+ <view class="refund-row refund-row--top" v-if="!$util.isEmpty(info.rejectReason)">
|
|
|
+ <view class="refund-label">驳回原因</view>
|
|
|
+ <view class="refund-value refund-value--multiline">{{ info.rejectReason || '' }}</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
|
- <view style="text-align:center;" v-if="info.status==0">
|
|
|
- <button class="admin-button-com big blue" style="margin:30upx auto 10upx auto;width:50%;background-color: green;border:1upx solid green;color:white;" @click="pass(0)">通过</button>
|
|
|
- </view>
|
|
|
- <view style="text-align:center;" v-if="info.status==0">
|
|
|
- <button class="admin-button-com big blue" style="margin:30upx auto 10upx auto;width:50%;background-color: red;border:1upx solid red;color:white;" @click="reject()">驳回</button>
|
|
|
- </view>
|
|
|
- <view style="text-align:center;" v-if="info.status==1">
|
|
|
- <button class="admin-button-com big blue" style="margin:20upx auto 10upx auto;width:50%;" @click="goWaste()">去报损</button>
|
|
|
- </view>
|
|
|
- <view style="text-align:center;" v-if="info.status==1">
|
|
|
- <button class="admin-button-com big blue" style="margin:20upx auto 10upx auto;width:50%;" @click="goWaste()">去减库存</button>
|
|
|
+ <view class="refund-row refund-row--top" v-if="!$util.isEmpty(info.remark)">
|
|
|
+ <view class="refund-label">备注信息</view>
|
|
|
+ <view class="refund-value refund-value--multiline">{{ info.remark || '' }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="refund-row" v-if="from == 1">
|
|
|
+ <view class="refund-label">订单信息</view>
|
|
|
+ <view class="refund-value">
|
|
|
+ <text class="refund-link refund-link--bold" @click="goToOrder(info)">点击查看</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="refund-section refund-section--images" v-if="info.smallImgList && !$util.isEmpty(info.smallImgList)">
|
|
|
+ <view class="refund-label refund-section__title">售后图片</view>
|
|
|
+ <view class="refund-img-grid">
|
|
|
+ <image
|
|
|
+ v-for="(itemImg, indexImg) in info.smallImgList"
|
|
|
+ :key="indexImg"
|
|
|
+ class="refund-img-item"
|
|
|
+ :src="itemImg"
|
|
|
+ mode="aspectFill"
|
|
|
+ @click="showBig(indexImg)"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view style="text-align:center;">
|
|
|
- <button class="admin-button-com big default" style="margin:30upx auto 10upx auto;width:50%;" @click="goBack()">返回</button>
|
|
|
+
|
|
|
+ <view class="refund-actions">
|
|
|
+ <button
|
|
|
+ v-if="info.status == 0"
|
|
|
+ class="admin-button-com big refund-actions__btn refund-actions__btn--pass"
|
|
|
+ @click="pass(0)"
|
|
|
+ >通过</button>
|
|
|
+ <button
|
|
|
+ v-if="info.status == 0"
|
|
|
+ class="admin-button-com big refund-actions__btn refund-actions__btn--reject"
|
|
|
+ @click="reject()"
|
|
|
+ >驳回</button>
|
|
|
+ <button
|
|
|
+ v-if="info.status == 1"
|
|
|
+ class="admin-button-com big blue refund-actions__btn"
|
|
|
+ @click="goWaste()"
|
|
|
+ >去报损</button>
|
|
|
+ <button
|
|
|
+ v-if="info.status == 1"
|
|
|
+ class="admin-button-com big blue refund-actions__btn"
|
|
|
+ @click="goWaste()"
|
|
|
+ >去减库存</button>
|
|
|
+ <button class="admin-button-com big default refund-actions__btn" @click="goBack()">返回</button>
|
|
|
</view>
|
|
|
|
|
|
<uni-popup ref="rejectRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
|
|
|
- <view style="padding:30upx;">
|
|
|
- <textarea v-model="rejectReason" style="border:1upx solid #cccccc;height:140upx;font-size:28upx;" placeholder="驳回原因..."></textarea>
|
|
|
- <view style="text-align:center;">
|
|
|
- <button class="admin-button-com big default" style="margin:30upx auto 10upx auto;width:45%;" @click="cancelReject()">取消</button>
|
|
|
- <button class="admin-button-com big blue" style="margin:30upx auto 10upx 20upx;width:45%;" @click="confirmReject()">确认</button>
|
|
|
+ <view class="refund-popup">
|
|
|
+ <textarea v-model="rejectReason" class="refund-popup__textarea" placeholder="驳回原因..."></textarea>
|
|
|
+ <view class="refund-popup__btns">
|
|
|
+ <button class="admin-button-com big default refund-popup__btn" @click="cancelReject()">取消</button>
|
|
|
+ <button class="admin-button-com big blue refund-popup__btn refund-popup__btn--confirm" @click="confirmReject()">确认</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
|
|
|
<uni-popup ref="modifyAmountRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
|
|
|
- <view style="padding:60upx;">
|
|
|
- <input type="digit" placeholder="请填写金额" v-model="refundAmount" @focus="refundAmount=''" placeholder-class="tui-placeholder"
|
|
|
- style="width:500upx;text-align:center;border:1upx solid #DDDDDD;height:90upx;line-height:90upx;font-size:26upx;"/>
|
|
|
- <view style="text-align:center;">
|
|
|
- <button class="admin-button-com big default" style="margin:30upx auto 10upx auto;width:45%;" @click="cancelChange()">取消</button>
|
|
|
- <button class="admin-button-com big blue" style="margin:30upx auto 10upx 20upx;width:45%;" @click="confirmChange()">确认</button>
|
|
|
+ <view class="refund-popup refund-popup--amount">
|
|
|
+ <input
|
|
|
+ type="digit"
|
|
|
+ placeholder="请填写金额"
|
|
|
+ v-model="refundAmount"
|
|
|
+ @focus="refundAmount = ''"
|
|
|
+ placeholder-class="tui-placeholder"
|
|
|
+ class="refund-popup__input"
|
|
|
+ />
|
|
|
+ <view class="refund-popup__btns">
|
|
|
+ <button class="admin-button-com big default refund-popup__btn" @click="cancelChange()">取消</button>
|
|
|
+ <button class="admin-button-com big blue refund-popup__btn refund-popup__btn--confirm" @click="confirmChange()">确认</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
-
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { refundDetail,passRefund,rejectRefund,modifyCause,modifyAmount } from "@/api/refund";
|
|
|
+import { refundDetail, passRefund, rejectRefund, modifyCause, modifyAmount } from '@/api/refund'
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- product:'',
|
|
|
- refundPrice:0,
|
|
|
- refundType:1,
|
|
|
- remark:'',
|
|
|
- info:[],
|
|
|
- rejectReason:'',
|
|
|
- from:0,
|
|
|
- refundAmount:'',
|
|
|
- showChoice:false
|
|
|
- };
|
|
|
+ product: '',
|
|
|
+ refundPrice: 0,
|
|
|
+ refundType: 1,
|
|
|
+ remark: '',
|
|
|
+ info: [],
|
|
|
+ rejectReason: '',
|
|
|
+ from: 0,
|
|
|
+ refundAmount: '',
|
|
|
+ showChoice: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ /** 申请原因文案 */
|
|
|
+ causeText() {
|
|
|
+ const causeMap = {
|
|
|
+ 0: '质量问题',
|
|
|
+ 1: '多开错开',
|
|
|
+ 2: '打包原因',
|
|
|
+ 3: '物流原因'
|
|
|
+ }
|
|
|
+ return causeMap[this.info.cause] || '其它'
|
|
|
+ },
|
|
|
+ /** 退款状态文案 */
|
|
|
+ statusText() {
|
|
|
+ const statusMap = {
|
|
|
+ 0: '待审核',
|
|
|
+ 1: '已通过',
|
|
|
+ 2: '已驳回',
|
|
|
+ 3: '已取消'
|
|
|
+ }
|
|
|
+ return statusMap[this.info.status] || ''
|
|
|
+ },
|
|
|
+ /** 退款状态样式 */
|
|
|
+ statusClass() {
|
|
|
+ const classMap = {
|
|
|
+ 0: 'refund-status refund-status--pending',
|
|
|
+ 1: 'refund-status refund-status--pass',
|
|
|
+ 2: 'refund-status refund-status--reject',
|
|
|
+ 3: 'refund-status refund-status--cancel'
|
|
|
+ }
|
|
|
+ return classMap[this.info.status] || 'refund-status'
|
|
|
+ }
|
|
|
},
|
|
|
onLoad() {
|
|
|
- if(this.option.from){
|
|
|
+ if (this.option.from) {
|
|
|
this.from = this.option.from
|
|
|
}
|
|
|
},
|
|
|
- onShow(){
|
|
|
+ onShow() {
|
|
|
this.init()
|
|
|
},
|
|
|
methods: {
|
|
|
- cancelChange(){
|
|
|
+ cancelChange() {
|
|
|
this.refundAmount = ''
|
|
|
this.$refs.modifyAmountRef.close()
|
|
|
},
|
|
|
- confirmChange(){
|
|
|
- if(Number(this.refundAmount)<=0){
|
|
|
+ confirmChange() {
|
|
|
+ if (Number(this.refundAmount) <= 0) {
|
|
|
this.$msg('请填写金额')
|
|
|
return false
|
|
|
}
|
|
|
- this.$util.confirmModal({content:'确认修改？'},() => {
|
|
|
+ this.$util.confirmModal({ content: '确认修改？' }, () => {
|
|
|
let that = this
|
|
|
this.$refs.modifyAmountRef.close()
|
|
|
- modifyAmount({id:this.info.id,amount:this.refundAmount}).then(res=>{
|
|
|
- if(res.code == 1){
|
|
|
+ modifyAmount({ id: this.info.id, amount: this.refundAmount }).then(res => {
|
|
|
+ if (res.code == 1) {
|
|
|
that.$msg(res.msg)
|
|
|
that.init()
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- changeAmount(){
|
|
|
+ changeAmount() {
|
|
|
this.$refs.modifyAmountRef.open('center')
|
|
|
},
|
|
|
- changeCause(cause){
|
|
|
- this.$util.confirmModal({content:'确认修改？'},() => {
|
|
|
+ changeCause(cause) {
|
|
|
+ this.$util.confirmModal({ content: '确认修改？' }, () => {
|
|
|
let that = this
|
|
|
- modifyCause({id:this.info.id,cause:cause}).then(res=>{
|
|
|
- if(res.code == 1){
|
|
|
+ modifyCause({ id: this.info.id, cause: cause }).then(res => {
|
|
|
+ if (res.code == 1) {
|
|
|
this.showChoice = false
|
|
|
this.info.cause = cause
|
|
|
that.$msg(res.msg)
|
|
|
@@ -176,22 +246,22 @@ export default {
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- goToOrder(info){
|
|
|
- this.$util.pageTo({ url: '/pagesOrder/detail?id='+info.relateOrderId})
|
|
|
+ goToOrder(info) {
|
|
|
+ this.$util.pageTo({ url: '/pagesOrder/detail?id=' + info.relateOrderId })
|
|
|
},
|
|
|
- cancelReject(){
|
|
|
+ cancelReject() {
|
|
|
this.$refs.rejectRef.close()
|
|
|
},
|
|
|
- reject(){
|
|
|
+ reject() {
|
|
|
this.$refs.rejectRef.open('center')
|
|
|
},
|
|
|
- confirmReject(){
|
|
|
+ confirmReject() {
|
|
|
let that = this
|
|
|
- this.$util.confirmModal({content:'确认驳回？'},() => {
|
|
|
- uni.showLoading({mask:true})
|
|
|
- rejectRefund({id: this.option.id,rejectReason:this.rejectReason}).then(res=>{
|
|
|
+ this.$util.confirmModal({ content: '确认驳回？' }, () => {
|
|
|
+ uni.showLoading({ mask: true })
|
|
|
+ rejectRefund({ id: this.option.id, rejectReason: this.rejectReason }).then(res => {
|
|
|
uni.hideLoading()
|
|
|
- if(res.code == 1){
|
|
|
+ if (res.code == 1) {
|
|
|
that.cancelReject()
|
|
|
that.$msg('操作成功')
|
|
|
that.init()
|
|
|
@@ -199,20 +269,20 @@ export default {
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- pass(confirm){
|
|
|
+ pass(confirm) {
|
|
|
let that = this
|
|
|
- this.$util.confirmModal({content:'确认通过？'},() => {
|
|
|
- uni.showLoading({mask:true})
|
|
|
- passRefund({id: this.option.id,version:1,confirm:confirm}).then(res=>{
|
|
|
+ this.$util.confirmModal({ content: '确认通过？' }, () => {
|
|
|
+ uni.showLoading({ mask: true })
|
|
|
+ passRefund({ id: this.option.id, version: 1, confirm: confirm }).then(res => {
|
|
|
uni.hideLoading()
|
|
|
- if(res.code == 1){
|
|
|
- if(res.data.error && res.data.error == 'notFirstApply'){
|
|
|
- that.$util.confirmModal({content:'本单第二次售后，确认要通过？'},() => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ if (res.data.error && res.data.error == 'notFirstApply') {
|
|
|
+ that.$util.confirmModal({ content: '本单第二次售后，确认要通过？' }, () => {
|
|
|
that.pass(1)
|
|
|
})
|
|
|
- }else if(res.data.error && res.data.error == 'hasUnClearOrder'){
|
|
|
+ } else if (res.data.error && res.data.error == 'hasUnClearOrder') {
|
|
|
that.needCancelRemind(res.data.clearId)
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
that.$msg('操作成功')
|
|
|
that.init()
|
|
|
}
|
|
|
@@ -220,119 +290,290 @@ export default {
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- needCancelRemind(id){
|
|
|
+ needCancelRemind(id) {
|
|
|
let that = this
|
|
|
- that.$util.confirmModal({content:'有结账单取消了才能审核？',okText:'去取消',cancelText:'不操作'},() => {
|
|
|
- that.$util.pageTo({url: '/admin/clear/customInfo?id='+id})
|
|
|
+ that.$util.confirmModal({ content: '有结账单取消了才能审核？', okText: '去取消', cancelText: '不操作' }, () => {
|
|
|
+ that.$util.pageTo({ url: '/admin/clear/customInfo?id=' + id })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 预览售后图片：urls 与列表缩略图同源，current 传 URL 避免 App 端滑动加载失败 */
|
|
|
+ showBig(index) {
|
|
|
+ const urls = this.getPreviewImageUrls()
|
|
|
+ if (!urls.length) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const safeIndex = index >= 0 && index < urls.length ? index : 0
|
|
|
+ uni.previewImage({
|
|
|
+ urls,
|
|
|
+ current: urls[safeIndex]
|
|
|
})
|
|
|
},
|
|
|
- showBig(index){
|
|
|
- if(this.info.bigImgList && !this.$util.isEmpty(this.info.bigImgList)){
|
|
|
- if(this.info.bigImgList[index]){
|
|
|
- uni.previewImage({ urls: [this.info.bigImgList[index]] })
|
|
|
- }
|
|
|
+ /** 与页面缩略图同源生成预览 URL，去掉 m_fill 裁切参数避免滑动时下一张一直加载 */
|
|
|
+ getPreviewImageUrls() {
|
|
|
+ const source = this.info.smallImgList && !this.$util.isEmpty(this.info.smallImgList)
|
|
|
+ ? this.info.smallImgList
|
|
|
+ : (this.info.bigImgList || [])
|
|
|
+ return source.map(url => this.normalizePreviewUrl(url)).filter(url => !!url)
|
|
|
+ },
|
|
|
+ normalizePreviewUrl(url) {
|
|
|
+ if (!url) {
|
|
|
+ return ''
|
|
|
}
|
|
|
+ const base = String(url).split('?')[0]
|
|
|
+ return base + '?x-oss-process=image/resize,w_1200'
|
|
|
},
|
|
|
- goBack(){
|
|
|
+ goBack() {
|
|
|
uni.navigateBack()
|
|
|
},
|
|
|
- goWaste(){
|
|
|
- this.$util.pageTo({ url: '/pagesOrder/refundSuccess?id='+this.option.id})
|
|
|
+ goWaste() {
|
|
|
+ this.$util.pageTo({ url: '/pagesOrder/refundSuccess?id=' + this.option.id })
|
|
|
},
|
|
|
init() {
|
|
|
- refundDetail({ id: this.option.id }).then(res=>{
|
|
|
- this.product = res.data.itemList||[];
|
|
|
- this.refundType = res.data.info.refundType||0;
|
|
|
+ refundDetail({ id: this.option.id }).then(res => {
|
|
|
+ this.product = res.data.itemList || []
|
|
|
+ this.refundType = res.data.info.refundType || 0
|
|
|
this.refundPrice = res.data.info.refundPrice ? parseFloat(res.data.info.refundPrice) : 0
|
|
|
- this.remark = res.data.info.remark;
|
|
|
+ this.remark = res.data.info.remark
|
|
|
this.info = res.data.info
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
-};
|
|
|
+}
|
|
|
</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-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ padding: 24upx 24upx 40upx;
|
|
|
+ background: #f5f7fa;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.refund-card {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 16upx;
|
|
|
+ padding: 8upx 24upx 24upx;
|
|
|
+ box-shadow: 0 2upx 12upx rgba(0, 0, 0, 0.04);
|
|
|
+}
|
|
|
+
|
|
|
+.refund-row {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ padding: 22upx 0;
|
|
|
+ border-bottom: 1upx solid #f0f2f5;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--top {
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.refund-label {
|
|
|
+ width: 168upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #909399;
|
|
|
+ line-height: 42upx;
|
|
|
+}
|
|
|
+
|
|
|
+.refund-value {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #303133;
|
|
|
+ line-height: 42upx;
|
|
|
+
|
|
|
+ &--inline {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--multiline {
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.refund-amount {
|
|
|
+ font-weight: 700;
|
|
|
+ color: #fa3534;
|
|
|
+}
|
|
|
+
|
|
|
+.refund-extra {
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #909399;
|
|
|
+ margin-left: 8upx;
|
|
|
+}
|
|
|
+
|
|
|
+.refund-link {
|
|
|
+ margin-left: 24upx;
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #3385ff;
|
|
|
+
|
|
|
+ &--bold {
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.refund-status {
|
|
|
+ font-weight: 700;
|
|
|
+
|
|
|
+ &--pending {
|
|
|
+ color: #ff9900;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--pass {
|
|
|
+ color: #19be6b;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--reject {
|
|
|
+ color: #fa3534;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--cancel {
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.refund-section {
|
|
|
+ padding: 22upx 0;
|
|
|
+ border-bottom: 1upx solid #f0f2f5;
|
|
|
+
|
|
|
+ &--images {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__title {
|
|
|
+ margin-bottom: 16upx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.refund-product-list {
|
|
|
+ padding-left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.refund-product-item {
|
|
|
+ padding: 12upx 16upx;
|
|
|
+ margin-top: 12upx;
|
|
|
+ background: #f7f9fc;
|
|
|
+ border-radius: 12upx;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__name {
|
|
|
+ font-size: 32upx;
|
|
|
+ color: #303133;
|
|
|
+ line-height: 40upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__option {
|
|
|
+ margin-top: 8upx;
|
|
|
+ font-size: 32upx;
|
|
|
+ color: #ad760d;
|
|
|
+ line-height: 40upx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.refund-cause-btns {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &__btn {
|
|
|
+ margin-left: 12upx;
|
|
|
+ margin-top: 8upx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.refund-img-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.refund-img-item {
|
|
|
+ width: 160upx;
|
|
|
+ height: 160upx;
|
|
|
+ border-radius: 12upx;
|
|
|
+ background: #f0f2f5;
|
|
|
+ margin-right: 16upx;
|
|
|
+ margin-top: 16upx;
|
|
|
+}
|
|
|
+
|
|
|
+.refund-actions {
|
|
|
+ margin-top: 32upx;
|
|
|
+ padding-bottom: 40upx;
|
|
|
+
|
|
|
+ &__btn {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ & + & {
|
|
|
+ margin-top: 20upx;
|
|
|
}
|
|
|
- .refund-item-list{
|
|
|
- display: flex;
|
|
|
- padding-bottom: 30upx;
|
|
|
- border-bottom: 1upx solid #dddddd;
|
|
|
- .refund-label{
|
|
|
- font-size:28upx;
|
|
|
- width: 200upx;
|
|
|
- text{color: red;}
|
|
|
- }
|
|
|
- .list{
|
|
|
- font-size:28upx;
|
|
|
- margin-bottom: 10upx;
|
|
|
- .list-title{
|
|
|
- height: 60upx;
|
|
|
- padding-bottom: 20upx;
|
|
|
- }
|
|
|
- .list-val{
|
|
|
- input{
|
|
|
- width: 150upx;
|
|
|
- border: 1upx solid #ddd;
|
|
|
- }
|
|
|
- text{
|
|
|
- padding: 0 30upx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ &--pass {
|
|
|
+ background-color: #19be6b;
|
|
|
+ border: 1upx solid #19be6b;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
- .refund-item{
|
|
|
- display: flex;
|
|
|
- padding: 20upx 0;
|
|
|
- .refund-label{
|
|
|
- font-size:28upx;
|
|
|
- width: 200upx;
|
|
|
- text{
|
|
|
- color: red;
|
|
|
- }
|
|
|
- }
|
|
|
- input{
|
|
|
- border: 1upx solid #ddd;
|
|
|
- }
|
|
|
- textarea{
|
|
|
- width: calc(100% - 210upx);
|
|
|
- border: 1upx solid #ddd;
|
|
|
- height:150upx;
|
|
|
- }
|
|
|
+
|
|
|
+ &--reject {
|
|
|
+ background-color: #fa3534;
|
|
|
+ border: 1upx solid #fa3534;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
- .btn-box{
|
|
|
- .btn{
|
|
|
- width: 200upx;
|
|
|
- height: 60upx;
|
|
|
- border: 1upx solid #666666;
|
|
|
- border-radius: 10upx;
|
|
|
- &.active{
|
|
|
- background: #3385ff;
|
|
|
- color: #fff;
|
|
|
- border: 1upx solid #3385ff;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.refund-popup {
|
|
|
+ padding: 30upx;
|
|
|
+
|
|
|
+ &--amount {
|
|
|
+ padding: 60upx 30upx 30upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__textarea {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1upx solid #dcdfe6;
|
|
|
+ border-radius: 12upx;
|
|
|
+ height: 160upx;
|
|
|
+ padding: 16upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__input {
|
|
|
+ width: 500upx;
|
|
|
+ text-align: center;
|
|
|
+ border: 1upx solid #dddddd;
|
|
|
+ border-radius: 12upx;
|
|
|
+ height: 90upx;
|
|
|
+ line-height: 90upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__btns {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 30upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__btn {
|
|
|
+ width: 45%;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ &--confirm {
|
|
|
+ margin-left: 24upx;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+}
|
|
|
+</style>
|
