473 行
26 KiB
JavaScript
可执行文件
473 行
26 KiB
JavaScript
可执行文件
/**
|
||
* 订单详情
|
||
* 当前脚本中使用到了串号修改和修改记录两个组件
|
||
* 需要在引入当前脚本的页面同时引入（不引入会报错）：
|
||
* Public\js\component-serial.js
|
||
* Public\js\component-serial-modify-record.js
|
||
* Public\css\component-serial.css
|
||
* Public\css\component-serial-modify-record.css
|
||
*/
|
||
Vue.component('order-details', {
|
||
template: `<div id="order-details">
|
||
<retail-drawer :show="show" :z-index="2000" :title="'订单详情'" :height="drawerHeight" @close="closeDetails" min-width="600px">
|
||
<div slot="body">
|
||
<el-table class="order-details-table" size="mini" :data="detailsData.goodsList" style="width: 100%">
|
||
<el-table-column prop="goods_name" align="center" label="名称" min-width="110">
|
||
<template slot-scope="scope">
|
||
<p>
|
||
<span v-if="scope.row.goods_gifts_id>0&&scope.row.goods_gifts_type==0"
|
||
style="color: #333;font-weight: bold;"
|
||
>【赠】</span>
|
||
<span v-if="scope.row.goods_gifts_id>0&&scope.row.goods_gifts_type>0"
|
||
style="color: #333;font-weight: bold;"
|
||
>【送】</span>
|
||
<span>{{scope.row.goods_name}}</span>
|
||
</p>
|
||
<P style='font-size:12px;color:#999;' v-if='scope.row.sku_name'>{{scope.row.sku_name}}</P>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="价格" align="center" min-width="150">
|
||
<template slot-scope="scope">
|
||
<div style="display: inline-block;text-align: left">
|
||
<div v-if="scope.row.integral_marketing==1">单价:￥{{scope.row.price}}</div>
|
||
<div v-if="scope.row.integral_marketing==2">单价:￥{{scope.row.price+(scope.row.mem_integral*1>0?('+'+scope.row.mem_integral+'积分'):'')}}</div>
|
||
<div>原价:￥{{scope.row.original_price}}</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="优惠信息" align="center" min-width="180">
|
||
<template slot-scope="scope">
|
||
<div v-if="scope.row.vip_discount==1&&scope.row.cashier_manual_discount==1&&scope.row.coupon_money==0&&scope.row.cashier_dis_money==0&&scope.row.small_changes_money==0">无</div>
|
||
<div v-else style="display: inline-block;text-align: left">
|
||
<div v-if="scope.row.vip_discount<1">会员折扣:￥{{scope.row.vip_dis_money}}【{{scope.row.vip_discount}}】</div>
|
||
<div v-if="scope.row.cashier_manual_discount<1">单品折扣:￥{{scope.row.cashier_manual_discount_money}}【{{scope.row.cashier_manual_discount}}】</div>
|
||
<div v-if="scope.row.coupon_money>0">优惠券:￥{{scope.row.coupon_money}}</div>
|
||
<div v-if="scope.row.cashier_dis_money>0">整单折扣:￥{{scope.row.cashier_dis_money}}</div>
|
||
<div v-if="scope.row.small_changes_money>0">抹零:￥{{scope.row.small_changes_money}}</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="num" label="数量" min-width="80px">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.serial_number_state==1">
|
||
<el-button @click="seeSerialNumber(scope.row)" size="mini" type="text">{{scope.row.num}}</el-button>
|
||
</span>
|
||
<span v-else>{{scope.row.num}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="小计" min-width="100px">
|
||
<template slot-scope="scope">
|
||
￥{{scope.row.integral_marketing==1?scope.row.all_money:(scope.row.all_money+(scope.row.use_integral>0?('+'+scope.row.use_integral+'积分'):''))}}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<ul class="order-details-info">
|
||
<li class="order-details-info-list" v-if="detailsData.guide_name&&detailsData.guide_name!=''">
|
||
<span>导购:</span>
|
||
<span>{{detailsData.guide_name}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if="detailsData.refund_no>0">
|
||
<span>原订单号:</span>
|
||
<span>{{detailsData.refund_no}}</span>
|
||
</li>
|
||
<li class="order-details-info-list">
|
||
<span>合计:</span>
|
||
<span>￥{{detailsData.all_money}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if="detailsData.integral_marketing==2&&detailsData.money_dis_integral>0">
|
||
<span>使用积分:</span>
|
||
<span>￥{{detailsData.money_dis_integral}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if="detailsData.integral_marketing==2&&detailsData.integral_dis_money>0">
|
||
<span>购买积分:</span>
|
||
<span>￥{{detailsData.integral_dis_money}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if='detailsData.all_earnest_price>0'>
|
||
<span>支付定金:</span>
|
||
<span>￥{{detailsData.all_earnest_price}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if='detailsData.all_arrive_price>0'>
|
||
<span>定金抵现:</span>
|
||
<span>￥{{detailsData.all_arrive_price}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if='detailsData.tail_pay_money>0 && detailsData.state==2 && detailsData.advance_type==2'>
|
||
<span>支付尾款:</span>
|
||
<span>{{detailsData.tail_pay_money>0?'￥'+detailsData.tail_pay_money:detailsData.tail_pay_money}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if='detailsData.earnest_pay_time'>
|
||
<span>定金支付时间:</span>
|
||
<span>{{detailsData.earnest_pay_time}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if='detailsData.finish_time && detailsData.state==2 && detailsData.advance_type==2'>
|
||
<span>尾款支付时间:</span>
|
||
<span>{{detailsData.trade_date}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if='detailsData.advance_type==1'>
|
||
<span>支付时间:</span>
|
||
<span>{{detailsData.trade_date}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if="detailsData.coupon_money>0">
|
||
<span>优惠券:</span>
|
||
<span>￥{{detailsData.coupon_money}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if="detailsData.v_discount!=1&&detailsData.vip_dis_money>0">
|
||
<span>会员折扣:</span>
|
||
<span>￥{{detailsData.vip_dis_money}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if="detailsData.cashier_dis_money>0">
|
||
<span>自定义折扣:</span>
|
||
<span>￥{{detailsData.cashier_dis_money}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if="detailsData.cashier_manual_money>0">
|
||
<span>单品打折:</span>
|
||
<span>￥{{detailsData.cashier_manual_money}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if="detailsData.integral_marketing==1&&detailsData.integral_dis_money>0">
|
||
<span>积分抵扣:</span>
|
||
<span>￥{{detailsData.integral_dis_money}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if="detailsData.small_changes_money>0">
|
||
<span>抹零:</span>
|
||
<span>￥{{detailsData.small_changes_money}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if="detailsData.user_select_time">
|
||
<span>{{detailsData.pickup_type==1?'自提':'配送'}}时间:</span>
|
||
<span>{{detailsData.user_select_time}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if="detailsData.user_name">
|
||
<span>联系人:</span>
|
||
<span>{{detailsData.user_name}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if="detailsData.user_phone">
|
||
<span>联系电话:</span>
|
||
<span>{{detailsData.user_phone}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if="detailsData.user_address">
|
||
<span>联系地址:</span>
|
||
<span>{{detailsData.user_address}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if="detailsData.remark">
|
||
<span>备注:</span>
|
||
<span>{{detailsData.remark}}</span>
|
||
</li>
|
||
<template v-if="detailsData.vid>0">
|
||
<li class="order-details-info-list">
|
||
<span>会员姓名|昵称:</span>
|
||
<span>{{detailsData.vip_info.name||'-'}}|{{detailsData.vip_info.nickname||'-'}}</span>
|
||
</li>
|
||
<li class="order-details-info-list">
|
||
<span>会员手机:</span>
|
||
<span>{{detailsData.vip_info.mobile_phone}}</span>
|
||
</li>
|
||
</template>
|
||
<template v-if="detailsData.third_vip_code">
|
||
<li class="order-details-info-list">
|
||
<span>会员名称:</span>
|
||
<span>{{detailsData.third_vip_name}}</span>
|
||
</li>
|
||
<li class="order-details-info-list">
|
||
<span>会员ID:</span>
|
||
<span>{{detailsData.third_vip_code}}</span>
|
||
</li>
|
||
<li class="order-details-info-list">
|
||
<span>村镇ID:</span>
|
||
<span>{{detailsData.villageId}}</span>
|
||
</li>
|
||
</template>
|
||
<li class="order-details-info-list" v-if="detailsData.advance_type==2 && detailsData.state==1">
|
||
<span>待付尾款:</span>
|
||
<span>{{detailsData.tail_pay_money>0?'￥'+detailsData.tail_pay_money:detailsData.tail_pay_money}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if="detailsData.delivery_fee>0 && detailsData.pickup_type!=1">
|
||
<span>配送费:</span>
|
||
<span>￥{{detailsData.delivery_fee}}</span>
|
||
</li>
|
||
<template v-if="detailsData.type==2">
|
||
<li class="order-details-info-list" v-if="detailsData.amount_received>0">
|
||
<span>应收:</span>
|
||
<span>￥{{detailsData.amount_received}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if="detailsData.zero_storage>0">
|
||
<span>存零:</span>
|
||
<span>￥{{detailsData.zero_storage}}</span>
|
||
</li>
|
||
<li class="order-details-info-list" v-if="detailsData.give_change>0">
|
||
<span>找零:</span>
|
||
<span>￥{{detailsData.give_change}}</span>
|
||
</li>
|
||
</template>
|
||
<li class="order-details-info-list" v-if="detailsData.extraction_code">
|
||
<span>祝福码:</span>
|
||
<span>{{detailsData.extraction_code}}</span>
|
||
</li>
|
||
<li class="order-details-actually-paid" style="font-size:17px;" v-if="detailsData.advance_type==1">
|
||
<span>实付: <span style="color: #dd6161;">￥ {{detailsData.all_money}}</span></span>
|
||
</li>
|
||
<li class="order-details-actually-paid" style="font-size:17px;" v-else-if="detailsData.advance_type==2 && detailsData.state==1 && detailsData.all_earnest_price>0">
|
||
<span>实付: <span style="color: #dd6161;">￥ {{detailsData.all_earnest_price}}</span></span>
|
||
</li>
|
||
<li class="order-details-actually-paid" style="font-size:17px;" v-else>
|
||
<span>实付: <span style="color: #dd6161;">￥ {{detailsData.all_money}}</span></span>
|
||
</li>
|
||
<li class="order-details-order-details-info-list" v-if="detailsData.business_remark">
|
||
<span>收银备注:</span>
|
||
<span>{{detailsData.business_remark}}</span>
|
||
</li>
|
||
</ul>
|
||
|
||
<retail-drawer :show.sync="showSerialNumber" width="700px" :height="drawerHeight"
|
||
title="串码详情" close-type="left">
|
||
<div slot="body">
|
||
<p class="order-details-serial-title">商品信息</p>
|
||
<div class="order-details-serial-goods">
|
||
<p>商品名称：{{serialNumberData.goods_name}}</p>
|
||
<p>规格：{{serialNumberData.sku_name}}</p>
|
||
<p>数量：{{serialNumberData.num}}</p>
|
||
</div>
|
||
<div class="order-details-serial-title">串码信息</div>
|
||
<el-table class="order-details-serial-table" :data="serialNumberData.serial_list" size="mini" :show-header="false">
|
||
<el-table-column type="index" width="50" align="center"></el-table-column>
|
||
<el-table-column>
|
||
<template slot-scope="scope">主串码： {{scope.row.main_serial_number}}</template>
|
||
</el-table-column>
|
||
<el-table-column>
|
||
<template slot-scope="scope">辅助串码1： {{scope.row.auxiliary_serial_number_one || '---'}}</template>
|
||
</el-table-column>
|
||
<el-table-column>
|
||
<template slot-scope="scope">辅助串码2： {{scope.row.auxiliary_serial_number_two || '---'}}</template>
|
||
</el-table-column>
|
||
<el-table-column width="90">
|
||
<template slot-scope="scope">
|
||
<el-button v-if="changeSerialNumber && scope.row.edit_type != 2" type="text" size="mini" style="color: rgb(103, 194, 58)" @click="selectSerial(scope.$index, scope.row.id)">修改</el-button>
|
||
<el-button type="text" size="mini" @click="openSerialModifyRecord(scope.row.id)">记录</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</retail-drawer>
|
||
</div>
|
||
</retail-drawer>
|
||
<component-serial :visible.sync="serialVisible" dialog-type="single" data-process-method="increase" :parent-data="serialNumberData" get-data-type="storeAllowSalesSerial" @serial-change="serialChange"></component-serial>
|
||
<component-serial-modify-record :visible.sync="serialModifyRecordVisible" :id="serialId"></component-serial-modify-record>
|
||
</div>
|
||
`,
|
||
props: {
|
||
'show': {
|
||
type: Boolean,
|
||
default: false,
|
||
},//是否展示
|
||
'details': {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
},
|
||
},
|
||
'orderNo': {
|
||
type: String,
|
||
default: '',
|
||
},//订单号
|
||
'changeSerialNumber': {
|
||
type: Boolean,
|
||
default: true,
|
||
},//是否可以修改串码
|
||
'drawerHeight': {
|
||
type: String,
|
||
default: 'calc(100vh - 65px)',
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
detailsData: {},
|
||
serialNumberData: {},//串码详情
|
||
sell_id: '',//当前查看串码的sell表的ID
|
||
showSerialNumber: false,//显示串码列表
|
||
serialVisible: false, //串号修改弹窗是否显示
|
||
serialModifyRecordVisible: false, //串号修改记录弹出是否显示
|
||
serialIndex: '', //当前修改的串号列表索引
|
||
serialId: '', //当前查看的修改记录串号主键ID
|
||
}
|
||
},
|
||
methods: {
|
||
handleData() {
|
||
if (this.orderNo) {
|
||
$.ajax({
|
||
url: '/index.php/Retail/Component/getOrderDetails',
|
||
type: 'post',
|
||
data: {
|
||
order_no: this.orderNo,
|
||
},
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.detailsData = res.data;
|
||
} else {
|
||
this.$alert(res.msg ? res.msg : '请求发生错误，请稍后重试！', '错误提示', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
|
||
}
|
||
});
|
||
}
|
||
},
|
||
error: (res) => {
|
||
console.log(res);
|
||
this.$alert('请求发生错误，请稍后重试！', '错误提示', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
|
||
}
|
||
});
|
||
}
|
||
})
|
||
} else if (!this.detailsData.id) {
|
||
this.$message({
|
||
message: '调用模板参数错误，请传入订单号或订单详细数据',
|
||
type: 'error'
|
||
})
|
||
} else {
|
||
this.detailsData = JSON.parse(JSON.stringify(this.details));
|
||
}
|
||
},
|
||
//关闭订单详情
|
||
closeDetails() {
|
||
this.detailsData = {};
|
||
this.$emit('update:show', false);
|
||
this.$emit('close');
|
||
},
|
||
//查看串码
|
||
seeSerialNumber(data) {
|
||
this.sell_id = data.id;
|
||
this.serialNumberData = {...data};
|
||
this.showSerialNumber = true;
|
||
},
|
||
//关闭串码显示
|
||
closeSerialNumber() {
|
||
this.showSerialNumber = false;
|
||
},
|
||
/**
|
||
* @description: 打开串号选择窗口
|
||
* @param {Number} index: 当前串号的索引
|
||
* @param {Number} id: 当前串号的主键ID
|
||
*/
|
||
selectSerial(index, id) {
|
||
this.serialVisible = true
|
||
this.serialIndex = index
|
||
this.serialId = id
|
||
},
|
||
/**
|
||
* @description: 串号子组件通道
|
||
* @param {Number} newId: 新串号的主键ID
|
||
*/
|
||
serialChange(data) {
|
||
const newData = {
|
||
id: this.serialId,
|
||
main_serial_number: data.mainSerial,
|
||
auxiliary_serial_number_one: data.assistSerial1,
|
||
auxiliary_serial_number_two: data.assistSerial2
|
||
}
|
||
this.$confirm('确认使用当前选择的串号替换原串号吗？', '提醒').then(() => {
|
||
this.serialVisible = false
|
||
this.sendRequest('Retail/Customer/serialModify', {
|
||
data: {
|
||
id: this.serialId,
|
||
warehouse_goods_id: data.id
|
||
},
|
||
success: (response) => {
|
||
if (response.status == 1) {
|
||
this.$set(this.serialNumberData.serial_list, this.serialIndex, newData)
|
||
this.$message.success(response.message)
|
||
this.handleData()
|
||
} else {
|
||
this.$message.error(response.message)
|
||
}
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
|
||
})
|
||
},
|
||
/**
|
||
* @description: 打开串号修改记录
|
||
* @param {Number} newId: 串号的主键ID
|
||
*/
|
||
openSerialModifyRecord(id) {
|
||
this.serialId = id
|
||
this.serialModifyRecordVisible = true
|
||
}
|
||
},
|
||
watch: {
|
||
show(n) {
|
||
if (n) {
|
||
this.handleData();
|
||
}
|
||
}
|
||
},
|
||
});
|
||
|
||
|
||
/**
|
||
* 查看订单的支付详情
|
||
*/
|
||
Vue.component('pay-order-details', {
|
||
template: `<el-dialog title="支付详情" :append-to-body="true" :visible.sync="showDialog" :before-close="closeDialog" width="600">
|
||
<el-table :data="dataList" border size="mini" width="120">
|
||
<el-table-column align="center" v-if="orderGenre==4" prop="advance_name" label="类型" width="60"
|
||
show-overflow-tooltip></el-table-column>
|
||
<el-table-column align="center" prop="pay_name" label="支付方式" min-width="80"
|
||
show-overflow-tooltip></el-table-column>
|
||
<el-table-column align="center" prop="trade_amount" label="金额(元)" show-overflow-tooltip></el-table-column>
|
||
<el-table-column align="center" prop="out_trade_no" label="内部流水号" show-overflow-tooltip></el-table-column>
|
||
<el-table-column align="center" prop="trade_no" label="外部流水号" show-overflow-tooltip></el-table-column>
|
||
</el-table>
|
||
</el-dialog>`,
|
||
props: {
|
||
'show': {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
'orderGenre': {
|
||
type: String,
|
||
default: '1',
|
||
},//0店内订单 1商城普通订单 2拼团 3秒杀 4预售
|
||
'orderNo': {
|
||
type: String,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
showDialog: false,
|
||
dataList: [],// 数据
|
||
};
|
||
},
|
||
methods: {
|
||
closeDialog() {
|
||
this.$emit('update:show', false);
|
||
this.$emit('close');
|
||
},
|
||
//获取支付详情列表
|
||
getOrderPayDetails() {
|
||
this.dataList = [];
|
||
this.sendRequest('Retail/Sale/getOrderPayDetails', {
|
||
data: {
|
||
order_no: this.orderNo,
|
||
},
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.dataList = res.data;
|
||
}
|
||
},
|
||
})
|
||
}
|
||
},
|
||
created() {
|
||
if (this.show) {
|
||
this.showDialog = this.show;
|
||
this.getOrderPayDetails();
|
||
}
|
||
},
|
||
watch: {
|
||
show(n, o) {
|
||
this.showDialog = n;
|
||
n && this.getOrderPayDetails();
|
||
}
|
||
}
|
||
}); |