142 lines
4.5 KiB
Vue
142 lines
4.5 KiB
Vue
<template>
|
|
<el-dialog
|
|
title="订单详情"
|
|
:visible.sync="visible"
|
|
width="1000px"
|
|
append-to-body
|
|
@closed="onClosed"
|
|
>
|
|
<el-table
|
|
:show-header="false"
|
|
:data="orderDetailList"
|
|
border
|
|
:cell-style="columnStyle"
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column width="120" prop="attr_name_one"> </el-table-column>
|
|
<el-table-column prop="value_one">
|
|
<template slot-scope="scope">
|
|
<auto-hide-message
|
|
:data="scope.row.value_one == null ? '' : scope.row.value_one + ''"
|
|
:maxLength="20"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column width="120" prop="attr_name_two"></el-table-column>
|
|
<el-table-column prop="value_two">
|
|
<template slot-scope="scope">
|
|
<el-tag
|
|
v-if="scope.row.attr_name_two === '审核状态'"
|
|
:type="scope.row.value_two === 'yes' ? 'success' : 'danger'"
|
|
>
|
|
{{ scope.row.value_two === "yes" ? "已审核" : "未审核" }}
|
|
</el-tag>
|
|
<auto-hide-message
|
|
v-else
|
|
:data="scope.row.value_two == null ? '' : scope.row.value_two + ''"
|
|
:maxLength="20"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column width="120" prop="attr_name_three"></el-table-column>
|
|
<el-table-column prop="value_three">
|
|
<template slot-scope="scope">
|
|
<auto-hide-message
|
|
:data="
|
|
scope.row.value_three == null ? '' : scope.row.value_three + ''
|
|
"
|
|
:maxLength="20"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
import AutoHideMessage from "@/components/AutoHideMessage";
|
|
import { getInfoDetail } from "@/api/custom/order";
|
|
|
|
export default {
|
|
name: "OrderDialog",
|
|
components: {
|
|
"auto-hide-message": AutoHideMessage,
|
|
},
|
|
props: {},
|
|
data() {
|
|
return {
|
|
orderDetailList: [],
|
|
visible: false,
|
|
preSaleTitle: "售前",
|
|
preSaleValue: "preSale",
|
|
//订单详情的标题，按竖显示
|
|
orderTitleData: [
|
|
["订单类型","审核状态", "成交时间"],
|
|
["调理项目","姓名", "手机号"],
|
|
["金额","收款方式", "收款账号"],
|
|
["服务时长","赠送时长", "售前/商务"],
|
|
["售前推送","售中","售后"],
|
|
["营养师","助理营养师","策划"],
|
|
["策划助理","运营","运营助理"],
|
|
["开始时间","结束时间","备注"]
|
|
],
|
|
//订单详情的属性名称，与标题对应，按竖显示
|
|
orderValueData: [
|
|
["orderTypeName","reviewStatus", "orderTime"],
|
|
["conditioningProject","customer", "phone"],
|
|
["amount","payType", "account"],
|
|
["serveTime","giveServeDay", "preSale"],
|
|
["pushPreSale","onSale","afterSale"],
|
|
["nutritionist","nutriAssis","planner"],
|
|
["plannerAssis","operator","operatorAssis"],
|
|
["startTime","serverEndTime","remark"]
|
|
],
|
|
};
|
|
},
|
|
created() {},
|
|
methods: {
|
|
// 自定义列背景色
|
|
columnStyle({ row, column, rowIndex, columnIndex }) {
|
|
if (
|
|
columnIndex == 0 ||
|
|
columnIndex == 2 ||
|
|
columnIndex == 4 ||
|
|
columnIndex == 6
|
|
) {
|
|
//第三第四列的背景色就改变了2和3都是列数的下标
|
|
return "background:#f3f6fc;font-weight:bold";
|
|
} else {
|
|
return "background:#ffffff;";
|
|
}
|
|
},
|
|
showDialog(orderId) {
|
|
getInfoDetail({ orderId }).then((response) => {
|
|
response.data.weight = response.data.weight != null ? response.data.weight + "斤" : "";
|
|
response.data.giveServeDay = response.data.giveServeDay != null ? response.data.giveServeDay + "天" : "";
|
|
if(response.data.orderType == 4){
|
|
response.data.preSale = response.data.businessAffair;
|
|
}
|
|
for (let i = 0; i < this.orderTitleData.length; i++) {
|
|
this.orderDetailList.push({
|
|
attr_name_one: this.orderTitleData[i][0],
|
|
value_one: response.data[this.orderValueData[i][0]],
|
|
attr_name_two: this.orderTitleData[i][1],
|
|
value_two: response.data[this.orderValueData[i][1]],
|
|
attr_name_three: this.orderTitleData[i][2],
|
|
value_three: response.data[this.orderValueData[i][2]],
|
|
});
|
|
}
|
|
this.visible = true;
|
|
});
|
|
},
|
|
onClosed() {
|
|
this.orderDetailList = [];
|
|
},
|
|
},
|
|
watch: {
|
|
// visible: function (val, oldVal) {
|
|
// console.log({val, oldVal})
|
|
// }
|
|
},
|
|
};
|
|
</script>
|