<template>
|
<div class="OserDetail">
|
<div class="header">
|
<span class="iconfont" @click="back"></span> 订单详情
|
</div>
|
<div class="content">
|
<div class="title">基本信息</div>
|
<div class="infoArea">
|
<div class="infoItem">
|
<div class="label">订单编号</div>
|
<div class="data">{{ orderInfo.sn }}</div>
|
</div>
|
<div class="infoItem">
|
<div class="label">创建时间</div>
|
<div class="data">{{ orderInfo.createTime }}</div>
|
</div>
|
<div class="infoItem">
|
<div class="label">创建人</div>
|
<div class="data">{{ orderInfo.createUserName }}</div>
|
</div>
|
<div class="infoItem">
|
<div class="label">付款方式</div>
|
<div class="data" v-if="orderInfo.payMethod == 0">线下付款</div>
|
<div class="data" v-if="orderInfo.payMethod == 1">支付宝</div>
|
<div class="data" v-if="orderInfo.payMethod == 2">微信</div>
|
</div>
|
<div class="infoItem">
|
<div class="label">订单状态</div>
|
<div class="data" v-if="orderInfo.orderStatus == -1">已取消</div>
|
<div class="data" v-if="orderInfo.orderStatus == 0">未下单</div>
|
<div class="data" v-if="orderInfo.orderStatus == 1">待支付</div>
|
<div class="data" v-if="orderInfo.orderStatus == 2">已支付</div>
|
<div class="data" v-if="orderInfo.orderStatus == 11">
|
支付凭证待审核
|
</div>
|
</div>
|
<div class="infoItem">
|
<div class="label">订单金额</div>
|
<div class="data">{{ orderInfo.orderMoney }}</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="content">
|
<div class="title">订单详情</div>
|
<div class="table-area">
|
<el-table
|
id="multipleTable"
|
ref="multipleTable"
|
:data="orderInfo.products"
|
tooltip-effect="dark"
|
:fit="true"
|
>
|
<el-table-column
|
prop="productName"
|
label="产品名称"
|
></el-table-column>
|
<el-table-column
|
prop="productTypeName"
|
label="产品类型"
|
></el-table-column>
|
<el-table-column prop="productVersion" label="版本号">
|
</el-table-column>
|
<el-table-column prop="setting" label="配置详情" min-width="133">
|
<template slot-scope="scope">
|
<div style="text-align: left">
|
<p
|
v-if="
|
scope.row.productType != 3 &&
|
scope.row.productType != 4 &&
|
scope.row.modules &&
|
scope.row.modules.length
|
"
|
>
|
模块：
|
<span v-for="item in scope.row.modules" :key="item">{{
|
item + " "
|
}}</span>
|
</p>
|
<p v-if="scope.row.productBaseDetail.hasChUnitPrice">
|
通道数量：
|
<span>{{ scope.row.ChCount }}</span>
|
</p>
|
<p v-if="scope.row.productBaseDetail.hasAuthPrice">
|
授权数量：
|
<span>{{ scope.row.authCount }}</span>
|
</p>
|
<p
|
v-if="
|
scope.row.productType != 3 &&
|
scope.row.productType != 4 &&
|
scope.row.sdks &&
|
scope.row.sdks.length
|
"
|
>
|
算法：
|
<span v-for="item in scope.row.sdks" :key="item">{{
|
item + " "
|
}}</span>
|
</p>
|
<p>
|
服务时长：
|
<span>{{ scope.row.serveYear + "年" }}</span>
|
</p>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="devCount" label="数量"></el-table-column>
|
<el-table-column label="服务起止时间" min-width="178">
|
<template slot-scope="scope">
|
<div class="row">起:{{ orderInfo.createTime }}</div>
|
<div class="row">止:{{ getEndYear(scope.row.serveYear) }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="productPrice"
|
label="产品金额"
|
></el-table-column>
|
<el-table-column label="划线金额">
|
<template slot-scope="scope">
|
{{ scope.row.productPrice * 1.2 }}
|
</template>
|
</el-table-column>
|
<el-table-column label="总计">
|
<template slot-scope="scope">
|
{{ scope.row.productPrice * scope.row.devCount }}
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
|
<div class="content">
|
<div class="title">支付信息</div>
|
<div class="table-area">
|
<el-table
|
id="multipleTable"
|
ref="multipleTable"
|
:data="payInfo"
|
tooltip-effect="dark"
|
:fit="true"
|
>
|
<el-table-column label="支付渠道">
|
<template slot-scope="scope">
|
<div v-if="scope.row.payMethod == 1">线下汇款</div>
|
<div v-if="scope.row.payMethod == 2">支付宝</div>
|
<div v-if="scope.row.payMethod == 3">微信</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="updateTime" label="付款时间"></el-table-column>
|
<el-table-column prop="payMoney" label="付款金额"></el-table-column>
|
<el-table-column prop="payAccount" label="付款账号"></el-table-column>
|
<el-table-column
|
prop="payUser"
|
label="付款单位/姓名"
|
></el-table-column>
|
<el-table-column label="付款凭证">
|
<template slot-scope="scope">
|
<div class="link" @click="openImg(scope.row.appendix)">
|
查看订单详情
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="status" label="审核状态">
|
<template> - </template>
|
</el-table-column>
|
<el-table-column label="操作">
|
<template> - </template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { devInfoStatistic } from "@/api/order";
|
export default {
|
created() {
|
this.getOrderInfo();
|
},
|
data() {
|
return {
|
orderInfo: {},
|
payInfo: [],
|
};
|
},
|
methods: {
|
back() {
|
this.$router.back();
|
},
|
async getOrderInfo() {
|
const res = await devInfoStatistic(this.$route.query.id);
|
if (res && res.success) {
|
this.orderInfo = res.data.orderInfo;
|
this.payInfo = res.data.orderInfo.payCerts.map((item) => {
|
return {
|
appendix: item.appendix,
|
payMethod: res.data.orderInfo.payMethod,
|
payTime: res.data.orderInfo.payTime,
|
updateTime: item.updateTime,
|
payAccount: item.payAccount,
|
payMoney: item.payMoney,
|
payUser: item.payUser,
|
tradeNo: res.data.orderInfo.tradeNo,
|
orderStatus: res.data.orderInfo.orderStatus,
|
};
|
});
|
}
|
},
|
getEndYear(years) {
|
let dateList = this.orderInfo.createTime.split("-");
|
dateList[0] = parseInt(dateList[0]) + parseInt(years);
|
return dateList.join("-");
|
},
|
openImg(url) {
|
var reg = /^[0-9]/;
|
if (!reg.test(url)) {
|
window.open(url);
|
return;
|
}
|
window.open("http://" + url);
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.OserDetail {
|
background-color: rgb(243, 245, 248);
|
.header {
|
margin-bottom: 24px;
|
padding: 0 24px;
|
height: 50px;
|
font-size: 16px;
|
color: #666666;
|
line-height: 50px;
|
background: #ffffff;
|
vertical-align: middle;
|
font-weight: 700;
|
|
.iconfont {
|
margin-right: 10px;
|
font-size: 18px;
|
cursor: pointer;
|
}
|
}
|
|
.content {
|
margin: 0 24px 24px 24px;
|
padding: 20px;
|
background-color: #fff;
|
|
.title {
|
padding-left: 10px;
|
height: 20px;
|
font-size: 16px;
|
font-weight: 700;
|
color: #3d3d3d;
|
border-left: 4px solid #0064ff;
|
}
|
|
.infoArea {
|
display: flex;
|
flex-wrap: wrap;
|
|
.infoItem {
|
display: flex;
|
margin-top: 30px;
|
width: 320px;
|
font-size: 14px;
|
color: #3d3d3d;
|
font-weight: 700;
|
|
.label {
|
width: 90px;
|
font-weight: 400;
|
color: #666666;
|
}
|
}
|
}
|
|
.link {
|
color: #0064ff;
|
cursor: pointer;
|
}
|
}
|
}
|
</style>
|
