<template>
|
<div class="content">
|
<v-header title="审核详情"></v-header>
|
<div class="add">
|
<!-- <el-button
|
type="primary"
|
size="small"
|
>返回上一级</el-button> -->
|
<span class="back-color" @click="$router.back()"
|
><i class="el-icon-arrow-left"></i>返回上一级</span
|
>
|
</div>
|
<template v-for="(item, index) in list">
|
<!-- 居住地址 五级联动 -->
|
<div class="item" :key="index" v-if="item.type == 14">
|
<div :class="{ required: item.required }" class="label">
|
{{ `${item.label}` }}
|
</div>
|
<picker
|
range-key="name"
|
:range="addressList"
|
@change="pickerChange"
|
@cancel="closePicker"
|
:focus="true"
|
ref="mpvuePicker"
|
disabled
|
>
|
<div class="picker-box-in">
|
<div style="padding: 0 6rpx">
|
{{ item.placeholder }}
|
<!-- <span
|
style="font-size: 28rpx; color: #999"
|
v-if="!addressText || addressText == ''"
|
>请选择居住地址</span
|
> -->
|
</div>
|
</div>
|
</picker>
|
</div>
|
<!--图片上传-->
|
<div class="item" :key="index" v-if="item.type == 11">
|
<div :class="{ required: item.required }" class="label">
|
{{ `${item.label}` }}
|
</div>
|
<div class="">
|
<img
|
mode="aspectFill"
|
v-if="isok"
|
class="upimage"
|
:src="item.values"
|
/>
|
</div>
|
</div>
|
<!-- 签名 -->
|
<div class="item" :key="index" v-if="item.type == 12">
|
<div :class="{ required: item.required }" class="label">
|
{{ `${item.label}` }}
|
</div>
|
<div class="sig-box">
|
<img
|
v-if="isok"
|
style="width: 100%; height: 100%"
|
:src="item.values"
|
/>
|
</div>
|
</div>
|
<!-- 省市区 -->
|
<div class="item" :key="index" v-if="item.type == 13">
|
<div :class="{ required: item.required }" class="label">
|
{{ `${item.label}` }}
|
</div>
|
<div class="check-city2" v-if="item.values">
|
<div class="check-city">
|
<span>{{ item.values }}</span>
|
</div>
|
</div>
|
</div>
|
<!--图片选择-->
|
<div class="item" :key="index" v-if="item.type == 10">
|
<div :class="{ required: item.required }" class="label">
|
{{ `${item.label}` }}
|
</div>
|
<div class="image-box">
|
<div class="image-list" v-for="(li, i) in item.options" :key="i">
|
<img @tap="predivImage(li.url)" mode="aspectFill" :src="li.url" />
|
<div class="image-text" @tap="imageChe(li, item.options, index, i)">
|
<div class="image-che" :class="{ 'image-che1': li.value }">
|
<el-icon
|
color="white"
|
v-if="li.value"
|
name="checkbox-mark"
|
></el-icon>
|
</div>
|
<text>{{ li.label }}</text>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!--输入框-->
|
<div class="item" :key="index" v-if="item.type == 9">
|
<div :class="{ required: item.required }" class="label">
|
{{ `${item.label}` }}
|
</div>
|
<!-- isok 数据回显 -->
|
<el-input
|
disabled
|
:placeholder="item.placeholder"
|
v-if="isok"
|
border
|
v-model="item.values"
|
/>
|
</div>
|
<!--多行输入-->
|
<div class="item" :key="index" v-if="item.type == 8">
|
<div :class="{ required: item.required }" class="label">
|
{{ `${item.label}` }}
|
</div>
|
<!-- isok 数据回显 -->
|
<el-input
|
disabled
|
:placeholder="item.placeholder"
|
type="textarea"
|
v-if="isok"
|
border
|
v-model="item.values"
|
/>
|
</div>
|
<!--时间选择-->
|
<div class="item" :key="index" v-if="item.type == 7">
|
<div :class="{ required: item.required }" class="label">
|
{{ `${item.label}` }}
|
</div>
|
<picker
|
disabled
|
class="picker-box"
|
mode="time"
|
@change="bindDateChange($event, index)"
|
>
|
<div class="picker">
|
<text v-if="isok">{{ item.values }}</text>
|
</div>
|
</picker>
|
</div>
|
<!--日期选择-->
|
<div class="item" :key="index" v-if="item.type == 6">
|
<div :class="{ required: item.required }" class="label">
|
{{ `${item.label}` }}
|
</div>
|
<picker
|
disabled
|
class="picker-box"
|
mode="date"
|
@change="bindDateChange($event, index)"
|
>
|
<div class="picker">
|
<text v-if="isok">{{ item.values }}</text>
|
</div>
|
</picker>
|
</div>
|
<!--文字描述-->
|
<div class="item" :key="index" v-if="item.type == 5">
|
<div class="text">
|
{{ item.values || "" }}
|
</div>
|
</div>
|
<!--身份证号-->
|
<div class="item" :key="index" v-if="item.type == 4">
|
<div :class="{ required: item.required }" class="label">
|
{{ `${item.label}` }}
|
</div>
|
<!-- isok 数据回显 -->
|
<el-input
|
disabled
|
:placeholder="item.placeholder"
|
v-if="isok"
|
border
|
v-model="item.values"
|
/>
|
</div>
|
<!--手机号-->
|
<div class="item" :key="index" v-if="item.type == 3">
|
<div :class="{ required: item.required }" class="label">
|
{{ `${item.label}` }}
|
</div>
|
<!-- isok 数据回显 -->
|
<el-input
|
disabled
|
:placeholder="item.placeholder"
|
v-if="isok"
|
border
|
v-model="item.values"
|
/>
|
</div>
|
<!--输入框-->
|
<div class="item" :key="index" v-if="item.type == 2">
|
<div :class="{ required: item.required }" class="label">
|
{{ `${item.label}` }}
|
</div>
|
<!-- isok 数据回显 -->
|
<el-input
|
disabled
|
:placeholder="item.placeholder"
|
v-if="isok"
|
border
|
v-model="item.values"
|
/>
|
</div>
|
<!--多选-->
|
<div class="item" :key="index" v-if="item.type == 1">
|
<div :class="{ required: item.required }" class="label">
|
{{ `${item.label}` }}
|
</div>
|
<el-checkbox
|
disabled
|
v-for="(li, i) in item.options"
|
v-model="li.value"
|
:label="li.label"
|
:key="i"
|
>
|
{{ li.label }}
|
</el-checkbox>
|
</div>
|
<!--单选-->
|
<!-- 单选组件存在问题 用多选代替 需要手动处理单选逻辑 -->
|
<div class="item" :key="index" v-if="item.type == 0">
|
<div :class="{ required: item.required }" class="label">
|
{{ `${item.label}` }}
|
</div>
|
|
<el-checkbox
|
disabled
|
v-for="(li, i) in item.options"
|
v-model="li.value"
|
:label="li.label"
|
:key="i"
|
>
|
{{ li.label }}
|
</el-checkbox>
|
</div>
|
</template>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
item: {},
|
id: "",
|
isok: true,
|
list: [],
|
addressText: ""
|
};
|
},
|
computed: {},
|
methods: {
|
// 获取数据
|
init() {
|
let v = {
|
id: this.id
|
};
|
this.$api.get("Jinhui/answer/getDetails", v, e => {
|
console.log(e);
|
this.list = JSON.parse(e.jsonObject);
|
console.log(this.list);
|
});
|
}
|
},
|
mounted() {
|
this.id = this.$route.params.id;
|
this.init();
|
}
|
};
|
</script>
|
|
<style scoped>
|
.content {
|
overflow: scroll;
|
}
|
.sig-box {
|
width: 100%;
|
border: 1px solid #999;
|
/* z-index: 9999; */
|
overflow: hidden;
|
height: 400rpx;
|
}
|
|
.label {
|
line-height: 50px;
|
}
|
.add {
|
text-align: right;
|
}
|
|
.line-style {
|
width: 582rpx;
|
height: 2rpx;
|
background-color: rgba(0, 0, 0, 0.1);
|
}
|
|
.fz-15 {
|
font-size: 30rpx !important;
|
}
|
|
.fz-16 {
|
font-size: 32rpx !important;
|
}
|
|
.fz-18 {
|
font-size: 36rpx !important;
|
font-weight: 800;
|
}
|
|
.fw-500 {
|
font-weight: 500;
|
}
|
|
.lh-style {
|
padding: 0 96rpx;
|
line-height: 1.4;
|
}
|
|
.fc-629 {
|
color: #629dfd;
|
}
|
|
.fc-cd2 {
|
color: #cd2611;
|
}
|
|
.mr-t-30 {
|
margin-top: 30rpx;
|
}
|
|
.mr-t-50 {
|
margin-top: 50rpx;
|
}
|
|
.check-city2 {
|
width: 100%;
|
height: 70rpx;
|
border-radius: 10rpx;
|
z-index: 201;
|
}
|
|
.check-city {
|
width: 100%;
|
height: 70rpx;
|
border-radius: 10rpx;
|
z-index: 201;
|
color: #303133;
|
border: 1px solid #e6e6e6;
|
}
|
|
.check-city span {
|
margin-left: 10rpx;
|
font-size: 24rpx;
|
}
|
|
.price-img {
|
width: 150rpx;
|
height: 150rpx;
|
position: relative;
|
}
|
|
.delete-img {
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
width: 100%;
|
height: 40rpx;
|
background-color: rgba(0, 0, 0, 0.6);
|
color: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 28rpx;
|
}
|
|
.picker-box-in {
|
width: 670rpx;
|
min-height: 60rpx;
|
border: 1px solid #e6e6e6;
|
border-radius: 6rpx;
|
}
|
|
.upimage {
|
width: 200px;
|
height: 200px;
|
}
|
</style>
|
