2a425a826d
【原 因】：1.不管是否已经申请退款了 始终显示已发货的订单 目的是一定要处理已发货订单 让其变成已送达 或者回滚之前的状态 【过 程】：2.改掉订单抽屉的过滤方式 加一个type参数来判断 【影 响】：
291 lines
12 KiB
Vue
291 lines
12 KiB
Vue
<template>
|
||
<div class="p-15">
|
||
<!-- 退款设置弹出框 -->
|
||
<el-dialog :title="'设置退款金额'" :visible.sync="dialogVisible" :append-to-body="true" width="30%">
|
||
<el-form label-position="left">
|
||
<el-form-item label="退款金额" label-width="80px">
|
||
<el-input placeholder="输入金额，不可超过订单总金额" v-model="refundPrice">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
<div class="fc-w">{{ refundType === 'buyer' ? `买家申请退款金额${refundApply_price}元,此订单总额为${refundTotal_price}元` :
|
||
`此订单总额为${refundTotal_price}元`
|
||
}}</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button size="medium" @click="dialogVisible = false">关闭</el-button>
|
||
<el-button size="medium" type="danger"
|
||
@click="refund">确认退款</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<!-- 任务tab -->
|
||
<el-collapse v-model="activeNames" accordion>
|
||
<template v-if="list.length != 0">
|
||
<el-collapse-item class="mainFontColor" v-for="(item, index) in list" :key="index" :name="item.id">
|
||
<template slot="title">
|
||
<div class="clearB w-100" :class="activeNames === item.id ? 'fc-b fb' : ''">
|
||
<div class="l w-30">
|
||
订单ID：{{ item.id }}
|
||
</div>
|
||
<div v-if="type == '未接单'" class="r w-70 fr p-r-15">
|
||
下单时间：{{ parseTime(item.order_time) }}
|
||
</div>
|
||
<div v-else-if="type == '已接单'" class="r w-70 fr p-r-15">
|
||
接单时间：{{ parseTime(item.received_time) }}
|
||
</div>
|
||
<div v-else-if="type == '已发货'" class="r w-70 fr p-r-15">
|
||
发货时间：{{ parseTime(item.shipped_time) }}
|
||
</div>
|
||
<div v-else-if="type == '退款申请中'" class="r w-70 fr p-r-15">
|
||
申请时间：{{ parseTime(item.refundapply_time) }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<el-descriptions direction=" vertical" :column="3" border>
|
||
<el-descriptions-item label="状态">{{ item.shipment_status }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="订单号">{{ item.order_sn }}</el-descriptions-item>
|
||
<el-descriptions-item label="取餐号">{{ item.food_sn }}</el-descriptions-item>
|
||
<el-descriptions-item label="收货人">{{ item.receiver }}</el-descriptions-item>
|
||
<el-descriptions-item label="手机号">{{ item.tel }}</el-descriptions-item>
|
||
<el-descriptions-item label="收货站点">{{ item.receive_site_name }}</el-descriptions-item>
|
||
<el-descriptions-item label="总重量">{{ item.total_weight }}克</el-descriptions-item>
|
||
<el-descriptions-item label="总价">{{ item.total_price }}元</el-descriptions-item>
|
||
<el-descriptions-item label="货品总数">{{ item.total_num }}件</el-descriptions-item>
|
||
<el-descriptions-item label="订单详情" span="3">
|
||
<el-table v-for="spu, index in item.product_snapshot" :key="index" :data="spu.sku_arr" class="w-100">
|
||
<el-table-column prop="sku_name" :label="spu.spu_name">
|
||
</el-table-column>
|
||
<el-table-column label="编号">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.sku_number }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="数量">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.sku_totol }}{{ scope.row.sku_unit }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="详情" width="80">
|
||
<el-button type="primary" size="small">查看</el-button>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item :label="item.refund_status == '未申请' ? '客户备注' : '退货缘由'" span="3">
|
||
{{ item.refund_status == '未申请' ? (item.refund_remark || '无') : (item.remark || '无') }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="操作" span="3">
|
||
<el-button-group v-if="type == '退款申请中'">
|
||
<el-button @click="setRefundItem(item, index, 'buyer'); dialogVisible = true"
|
||
:loading="refundIndex === index" :disabled="refundIndex === index" type="danger"
|
||
icon="iconfont icon-cuowu">
|
||
<font class="m-l-5">{{ refundIndex === index ? '退款中...' : '同意退款' }}</font>
|
||
</el-button>
|
||
<el-button @click="questAss(item.id, 'refund_status', '拒绝退')" type="warning" icon="iconfont icon-cuowu">
|
||
<font class="m-l-5">拒绝退款</font>
|
||
</el-button>
|
||
</el-button-group>
|
||
<el-button-group v-else-if="type == '未接单'">
|
||
<el-button @click="setRefundItem(item, index, 'seller'); dialogVisible = true"
|
||
:loading="refundIndex === index" :disabled="refundIndex === index" type="danger"
|
||
icon="iconfont icon-cuowu">
|
||
<font class="m-l-5">{{ refundIndex === index ? '退款中...' : '取消订单' }}</font>
|
||
</el-button>
|
||
<el-button @click="orderPrint(index)" type="info" icon="iconfont icon-dayin">
|
||
<font class="m-l-5">打印小票</font>
|
||
</el-button>
|
||
<el-button @click="questAss(item.id, 'shipment_status', '已接单')" type="primary"
|
||
icon="iconfont icon-chengjie">
|
||
<font class="m-l-5">确认接单</font>
|
||
</el-button>
|
||
</el-button-group>
|
||
<el-button-group v-else-if="type == '已接单'">
|
||
<el-button @click="setRefundItem(item, index, 'seller'); dialogVisible = true"
|
||
:loading="refundIndex === index" :disabled="refundIndex === index" type="danger"
|
||
icon="iconfont icon-cuowu">
|
||
<font class="m-l-5">{{ refundIndex === index ? '退款中...' : '取消订单' }}</font>
|
||
</el-button>
|
||
<el-button @click="orderPrint(index)" type="info" icon="iconfont icon-dayin">
|
||
<font class="m-l-5">打印小票</font>
|
||
</el-button>
|
||
</el-button-group>
|
||
<el-button-group v-else-if="type == '已发货'">
|
||
<el-button type="danger" icon="iconfont icon-cuowu">
|
||
<font class="m-l-5">取消任务</font>
|
||
</el-button>
|
||
<el-button type="success" icon="iconfont icon-qiandai">
|
||
<font class="m-l-5">已送达</font>
|
||
</el-button>
|
||
</el-button-group>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-collapse-item>
|
||
</template>
|
||
<div v-else class="p-t-60 p-b-60 seatFontColor fc">
|
||
<i class="iconfont icon-meiyoushuju f-s-100"></i>
|
||
<div>空空如也</div>
|
||
</div>
|
||
</el-collapse>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { parseTime } from '@/utils/index'
|
||
import { questAss, refund } from '@/utils/api/table'
|
||
|
||
export default {
|
||
data () {
|
||
return {
|
||
activeNames: [],
|
||
dialogVisible: false, // 弹出窗口 显隐
|
||
refundIndex: null, // 标记 索引 操作对应索引的按钮ui样式等
|
||
tempRefundIndex: null,
|
||
refundTotal_price: null, // 退款订单的总额
|
||
refundApply_price: null, // 客户申请退款 的金额
|
||
refundPrice: null, // 退款额 ps:传订单总价 为退款的默认值
|
||
refundOrder_sn: null, // 退款订单号
|
||
refundShop_id: null, // 退款商铺id
|
||
refundType: null // 退款类型
|
||
}
|
||
},
|
||
props: {
|
||
list: {
|
||
type: Array,
|
||
required: true
|
||
},
|
||
type: {
|
||
type: String,
|
||
required: true,
|
||
default: ''
|
||
}
|
||
},
|
||
computed: {
|
||
},
|
||
methods: {
|
||
parseTime, // 时间戳格式化
|
||
questAss, // 修改订单
|
||
/**
|
||
* 封装退款函数 同步后续操作
|
||
*/
|
||
async refund () {
|
||
const res = await refund(this.refundOrder_sn, this.refundShop_id, this.refundPrice, this.refundType)
|
||
if (res.data.status === 1) { // 退款申请成功时
|
||
this.dialogVisible = false // 退款弹出框 关闭
|
||
this.refundIndex = this.tempRefundIndex // 标记退款订单 的索引 方便做ui样式
|
||
}
|
||
},
|
||
/**
|
||
* 退款事件 设置对应订单信息 到“标记退款订单”
|
||
* @param item 订单信息
|
||
* @param index 订单索引
|
||
* @param refundType 退款类型 'buyer'买家申请 'seller'卖家主动
|
||
*/
|
||
setRefundItem (item, index, refundType) {
|
||
this.tempRefundIndex = index
|
||
this.refundTotal_price = item.total_price
|
||
this.refundApply_price = item.apply_price
|
||
if (refundType === 'buyer') { // 如果买家申请 默认退款表单显示买家申请值
|
||
this.refundPrice = item.apply_price
|
||
} else { // 否则 主动退 默认退款表单 显示为退款额上限 即订单总价
|
||
this.refundPrice = item.total_price
|
||
}
|
||
this.refundOrder_sn = item.order_sn
|
||
this.refundShop_id = item.shop_id
|
||
this.refundType = refundType
|
||
},
|
||
/**
|
||
* @description: 通过蓝牙打印机并打印小票
|
||
* @param {number} index 订单列表下标索引
|
||
*/
|
||
orderPrint (index) {
|
||
// 订单文本编辑
|
||
// console.log(this.list[index])
|
||
// let con
|
||
// con = '无人机外卖送餐#' + this.list[index].food_sn + '\n\n'
|
||
// this.btPrint(con, '10', '1')
|
||
// con = ''
|
||
// con += '------------客户信息------------\n'
|
||
// con += '昵称：' + this.list[index].name + '\n'
|
||
// const tel = this.list[index].tel.substr(0, 3) + '****' + this.list[index].tel.substr(7)
|
||
// con += '电话：' + tel + '\n\n'
|
||
// con += '------------订单信息------------\n'
|
||
// this.btPrint(con, '0', '0')
|
||
// con = ''
|
||
// con += '取餐号：' + this.list[index].food_sn + '\n'
|
||
// this.btPrint(con, '31', '0')
|
||
// con = ''
|
||
// con += '单号：' + this.list[index].order_sn + '\n'
|
||
// con += '收货站点：' + this.list[index].receive_site_name + '\n'
|
||
// con += '下单时间：' + this.parseTime(this.list[index].addtime) + '\n\n'
|
||
// if (this.list[index].remark !== '') {
|
||
// con += '------------客户备注------------\n'
|
||
// con += this.list[index].remark + '\n\n'
|
||
// }
|
||
// con += '--------------商品--------------\n'
|
||
// this.list[index].products.forEach(element => {
|
||
// con += 'ID：' + element.pid + '\n'
|
||
// con += '品名：' + element.name + '\n'
|
||
// if (element.pro_buff !== '') {
|
||
// con += '规格: ' + element.pro_buff + '\n'
|
||
// }
|
||
// con += '数量：' + element.num + '\n'
|
||
// con += '单价：' + element.price + '\n'
|
||
// con += '················\n'
|
||
// })
|
||
// con += '货品总数：' + this.list[index].product_num + '\n'
|
||
// con += '货品总额：' + this.list[index].price + '\n\n'
|
||
// con += '---------加盟无人机送餐---------\n'
|
||
// this.btPrint(con, '0', '0')
|
||
// con = ''
|
||
// var data = 'https://flicube.com'
|
||
// var align = 1
|
||
// var model = 49
|
||
// var size = 32
|
||
// var eclevel = 50
|
||
// BTPrinter.printQRCode(function (data) {
|
||
// console.log('Success')
|
||
// console.log(data)
|
||
// }, function (err) {
|
||
// console.log('Error')
|
||
// console.log(err)
|
||
// }, data, align, model, size, eclevel)
|
||
// con += '\n请扫上列二维码关注我们\n\n\n'
|
||
// this.btPrint(con, '0', '1')
|
||
},
|
||
/**
|
||
* @description: cordova 打印api接口
|
||
* @param {string} str 内容
|
||
* @param {string} size 字体大小预设
|
||
* @param {string} algin 对齐
|
||
*/
|
||
btPrint (str, size = '0', align = '0') {
|
||
// BTPrinter.printTitle(function (data) {
|
||
// console.log('Success')
|
||
// console.log(data)
|
||
// }, function (err) {
|
||
// console.log('Error')
|
||
// console.log(err)
|
||
// }, str, size, align)// string, size, align
|
||
}
|
||
},
|
||
watch: {
|
||
list () {
|
||
this.refundIndex = null
|
||
this.tempRefundIndex = null
|
||
}
|
||
},
|
||
created () {
|
||
console.log(this.list)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/styles/theme.scss";
|
||
|
||
.orterTit {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
</style>
|