<template>
|
<div class="invoiceInfo inner-bg-style">
|
<el-form ref="form" size="mini" :rules="formRules" :model="form" label-width="140px">
|
<p class="formTitle">买家信息</p>
|
<el-form-item label="买家名称/开票人：">{{form.orderInfo&&form.orderInfo.creatorName}}</el-form-item>
|
<el-form-item label="买家电话：">{{form.orderInfo&&form.orderInfo.memberInfoResult&&form.orderInfo.memberInfoResult.memberPhone? form.orderInfo.memberInfoResult.memberPhone : '-'}}</el-form-item>
|
<el-form-item label="下单时间：">{{form.orderInfo&&form.orderInfo.orderTime}}</el-form-item>
|
<el-form-item label="订单完成时间：">{{form.orderInfo&&form.orderInfo.modifyTime}}</el-form-item>
|
<el-form-item label="原始订单编号：">
|
{{(form.orderInfo && form.orderInfo.expInfo && JSON.parse(form.orderInfo.expInfo).sourceOrderCode) ? JSON.parse(form.orderInfo.expInfo).sourceOrderCode : '-'}}
|
</el-form-item>
|
<el-form-item label="订单号：">{{form.orderId}}</el-form-item>
|
<el-form-item label="订单状态：">{{form.orderInfo ? getLabel(orderStatus,form.orderInfo.orderStatus) : '-'}}</el-form-item>
|
<p class="formTitle">发票信息</p>
|
<el-form-item label="开票金额："><span class="emphasize">{{form.invoiceAmount ? '￥' + form.invoiceAmount : ''}}</span></el-form-item>
|
<el-form-item label="开票来源：">{{form.orderInfo&&getLabel(orderSourceArr, form.orderInfo.orderSource)}}</el-form-item>
|
<el-form-item label="开票类型：">{{form.invoiceTypeDetail === '0' ? '增值税电子普通发票' : '增值税电子专用发票'}}</el-form-item>
|
<el-form-item label="开票时间：">{{form.invoiceTime}}</el-form-item>
|
<el-form-item label="发票接收邮箱：">{{form.email}}</el-form-item>
|
<el-form-item label="抬头类型：">{{form.invoiceType === '0' ? '个人' : '企业'}}</el-form-item>
|
<el-form-item label="发票抬头：">{{form.invoiceTitle}}</el-form-item>
|
<el-form-item label="发票代码-发票号：">{{form.fpqqlsh}}</el-form-item>
|
<!-- <el-form-item label="发票代码：">{{form.invoiceCode}}</el-form-item> -->
|
<div v-show="form.invoiceType !== '0'">
|
<el-form-item label="单位税号：">{{form.itins}}</el-form-item>
|
<el-form-item label="注册电话：">{{form.telephone}}</el-form-item>
|
<el-form-item label="开户银行：">{{form.bank}}</el-form-item>
|
<el-form-item label="银行账号：">{{form.accno}}</el-form-item>
|
</div>
|
<el-form-item label="开票状态：">{{getInvoiceStatus(form.status)}}</el-form-item>
|
<el-form-item v-show="form.pdfUrl" label="发票地址：">
|
<el-link class="urlLink" :href="form.pdfUrl" target="_blank">{{form.pdfUrl}}</el-link>
|
</el-form-item>
|
<el-form-item v-show="form.status === '2'" label="失败原因：">
|
{{form.expInfo&&JSON.parse(form.expInfo).invoiceFailMsg}}
|
</el-form-item>
|
<p class="formTitle">商品信息</p>
|
<div id="productdetails">
|
<el-table :data="form.orderInfo.omsOrderItems" border v-if="form.orderInfo">
|
<el-table-column type="index" align="center" label="序号" width="80px"></el-table-column>
|
<el-table-column label="商品图片" align="center">
|
<template slot-scope="scope">
|
<product-img :imgUrl="scope.row.imgUrl"></product-img>
|
</template>
|
</el-table-column>
|
<el-table-column label="商品名称" prop="spuName" show-overflow-tooltip>
|
<template slot-scope="scope">
|
<span class="giftStyle" v-if="scope.row.promotionType === '2'">赠</span><span>{{scope.row.spuName}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="商品规格">
|
<template slot-scope="scope">
|
{{scope.row.skuProps && JSON.parse(scope.row.skuProps).length ? JSON.parse(scope.row.skuProps).map(item=>item.propValueName).join('/') : '-'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="数量">
|
<template slot-scope="scope">
|
{{scope.row.buyQuantity}} * {{scope.row.expInfo ? JSON.parse(scope.row.expInfo).skuReduceStorage : scope.row.skuReduceStorage}} ({{scope.row.spuUnit ? scope.row.spuUnit : '瓶'}})
|
</template>
|
</el-table-column>
|
<el-table-column label="销售金额（元）">
|
<template slot-scope="scope">
|
<span v-if="scope.row.promotionType !== '2'">
|
￥ {{scope.row.totelAmt ? scope.row.totelAmt.toFixed(2) : 0}}
|
</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="实收金额（元）">
|
<template slot-scope="scope">
|
<span v-if="scope.row.promotionType !== '2'">
|
￥ {{scope.row.totelAmtAct ? scope.row.totelAmtAct.toFixed(2) : 0}}
|
</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="优惠金额">
|
<template slot-scope="scope">
|
<div v-if="scope.row.promotionType !== '2'">
|
<div>优惠券：￥ {{scope.row.consumeCoupon ? scope.row.consumeCoupon.toFixed(2) : 0}}</div>
|
<div>活动优惠金额：￥ {{scope.row.consumePromotion ? scope.row.consumePromotion.toFixed(2) : 0}}</div>
|
</div>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="运费（元）">
|
<template slot-scope="scope">
|
<span v-if="scope.row.promotionType !== '2'">
|
￥ {{scope.row.freight ? scope.row.freight.toFixed(2) : 0}}
|
</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="couponInfo">
|
<div class="couponInfoItem">
|
<el-form-item label="商品金额：">￥ {{form.orderInfo && form.orderInfo.orderPrice ? form.orderInfo.orderPrice.toFixed(2) : 0}}</el-form-item>
|
<el-form-item label="优惠券：">￥ {{form.orderInfo && form.orderInfo.consumeCoupon ? form.orderInfo.consumeCoupon.toFixed(2) : 0}}</el-form-item>
|
<el-form-item label="活动优惠金额：">￥ {{form.orderInfo && form.orderInfo.consumePromotion ? form.orderInfo.consumePromotion.toFixed(2) : 0}}</el-form-item>
|
<el-form-item label="运费：">￥ {{form.orderInfo && form.orderInfo.freight ? form.orderInfo.freight.toFixed(2) : 0}}</el-form-item>
|
<el-form-item label="其他优惠：">￥ {{form.orderInfo && form.orderInfo.otherDiscount ? form.orderInfo.otherDiscount.toFixed(2) : 0}}</el-form-item>
|
<el-form-item label="订单总价：">￥ {{form.orderInfo && form.orderInfo.orderTotalPayPrice ? form.orderInfo.orderTotalPayPrice.toFixed(2) : 0}}</el-form-item>
|
<hr/>
|
<el-form-item label="实付金额："><span class="emphasize">￥ {{form.orderInfo && form.orderInfo.orderPayPrice ? form.orderInfo.orderPayPrice.toFixed(2) : 0}}</span></el-form-item>
|
</div>
|
</div>
|
</div>
|
<!-- 手动开票显示创建信息 -->
|
<div v-if="form.invoiceSource === '1'">
|
<p class="formTitle">创建信息</p>
|
<el-form-item label="创建人：">{{form.creatorName ? form.creatorName : ' '}}</el-form-item>
|
<el-form-item label="创建时间：">{{form.applyTime ? form.applyTime : ' '}}</el-form-item>
|
<el-form-item label="备注：">{{form.creatorRemark}}</el-form-item>
|
<el-form-item label="图片：" v-if="form.creatorFileUrlList && form.creatorFileUrlList.length">
|
<el-row>
|
<el-col class="applyImg" v-for="(item,index) in form.creatorFileUrlList" :key="index">
|
<el-image
|
style="width: 100px;height:100px;"
|
:src="item"
|
fit="contain"
|
:preview-src-list="form.creatorFileUrlList">
|
</el-image>
|
</el-col>
|
</el-row>
|
</el-form-item>
|
</div>
|
<slot name="aduitInfo" :data="form"></slot>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import orderSourceArr from '@/utils/constant/orderSourceArr'
|
import invoiceApi from '@/api/invoice/invoiceapi.js'
|
import orderStatus from '@/utils/constant/orderStatus'
|
import productImg from '@/views/product/components/productImg.vue'
|
|
export default {
|
components: { productImg },
|
data () {
|
return {
|
formRules: {
|
auditRemarke: [
|
{ required: true, message: '请输入备注', trigger: 'change' },
|
{ max: 300, message: '备注最多只能输入 300 个字', trigger: 'change' }
|
]
|
},
|
orderSourceArr: [],
|
form: {},
|
orderStatus
|
}
|
},
|
mounted () {
|
document.body.scroll(0, 0) // 设置滚动条回到顶部
|
if (this.$route.query.name === 'productdetails') {
|
const dom = document.getElementById('productdetails')
|
if (dom) {
|
dom.scrollIntoView()
|
}
|
}
|
this.orderSourceArr = orderSourceArr
|
this.getDetails()
|
},
|
methods: {
|
/**
|
* 获取发票状态
|
*/
|
getInvoiceStatus (status) {
|
switch (status) {
|
case '0': return '未开票'
|
case '1': return '已开票'
|
case '2': return '开票失败'
|
default:break
|
}
|
},
|
// 获取详情
|
async getDetails () {
|
try {
|
const res = await invoiceApi.detailsInfo(this.$route.query.orderId)
|
if (res.code === '0') {
|
res.data.content = null
|
this.form = res.data
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
* 获取数组的label
|
*/
|
getLabel (array, id) {
|
var lableText = array.find((item) => {
|
return item.id === id
|
})
|
if (lableText) {
|
return lableText.name
|
}
|
return ''
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
$color: #ebeef5;
|
.invoiceInfo {padding: 10px;}
|
.emphasize {
|
font-weight: bold;
|
color: #d70012;
|
}
|
.formTitle {
|
border-bottom: 1px solid #ccc;
|
padding-bottom: 10px;
|
margin-bottom: 20px;
|
}
|
.applyImg{
|
width: 100px;
|
margin-right: 10px;
|
}
|
.couponInfo{
|
border: solid $color;
|
border-width: 0 1px 1px 1px;
|
padding-top: 20px;
|
display: -webkit-flex; /* Safari */
|
display: flex;
|
flex-direction: row-reverse;
|
margin-bottom: 15px;
|
.couponInfoItem {
|
right: 0;
|
width: 300px;
|
}
|
hr {
|
border: none;
|
height: 1px;
|
background-color: $color;
|
}
|
}
|
</style>
|
