<template>
<div>
<el-dialog
title="详细信息"
:visible.sync="dialogVisible"
width="60%"
:before-close="handleClose"
>
<div v-for="item in formList">
<table
border="1px solid #000000"
cellspacing="0"
cellpadding="0"
style="width: 100%; margin-bottom: 20px"
>
<tr>
<td style="text-align: center">投递信息:</td>
<td style="text-align: center">设备ID:</td>
<td style="text-align: center">{
{
item.deviceId }}</td>
</tr>
<tr>
<td rowspan="4" style="text-align: center">投递详情:</td>
<td colspan="2" style="text-align: center">
<el-image
v-show="item.imagePath"
style="width: 100px; height: 100px"
:src="item.imagePath"
:preview-src-list="[item.imagePath]"
@click="handleClose"
>
</el-image>
{
{
item.imagePath?"":'暂无图片~'}}
</td>
</tr>
<tr>
<td style="width: 15%; text-align: center">投递时间:</td>
<td style="text-align: center">
<span>{
{
item.createTime }}</span>
</td>
</tr>
<tr>
<td style="width: 15%; text-align: center">垃圾类型:</td>
<td style="text-align: center">
<span>{
{
item.innerTypeName }}</span>
</td>
</tr>
<tr>
<td style="width: 15%; text-align: center">投递重量:</td>
<td style="text-align: center">
<span>{
{
item.weight }}</span>
</td>
</tr>
<tr>
<td rowspan="4" style="text-align: center">奖励详情:</td>
<td style="text-align: center">订单编码:</td>
<td style="text-align: center">
<span>{
{
item.deliverOrderCode }}</span>
</td>
</tr>
<tr>
<td style="text-align: center">奖励金额:</td>
<td colspan="3" style="text-align: center">{
{
item.rewardMoney }}</td>
</tr>
<tr>
<td style="text-align: center">奖励分:</td>
<td style="text-align: center">
<span>{
{
item.rewardScore }}</span>
</td>
</tr>
<tr>
<td style="text-align: center">剩余金额:</td>
<td style="text-align: center">{
{
item.money }}</td>
</tr>
<tr>
<td rowspan="2" style="text-align: center">范围详情:</td>
<td style="text-align: center">范围:</td>
<td style="text-align: center">{
{
item.scope }}</td>
</tr>
<tr>
<td style="text-align: center">范围备注:</td>
<td style="text-align: center">{
{
item.scopeNote }}</td>
</tr>
</table>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="mini" @click="handleClose">关闭</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false, //弹框默认关闭
formList: [],
};
},
methods: {
handleClose(done) {
this.dialogVisible = false;
},
handleOpen(item) {
this.dialogVisible = true;
// console.log(item);
let deliverOrderId = {
deliverOrderId: item.id };
this.$http
.request("userPushDetailsList", deliverOrderId)
.then((data) => {
// console.log(data);
this.formList = data.data;
console.log(this.formList);
})
.catch((err) => {
});
},
},
};
</script>
<style scoped>
table td {
height: 50px;
border: #cccccc 1px solid;
}
img {
height: 110px;
}
</style>
效果图: