140 lines
3.7 KiB
Vue
140 lines
3.7 KiB
Vue
<template>
|
|
<ai-detail class="detail">
|
|
<template slot="title">
|
|
<ai-title title="档案详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
|
</template>
|
|
<template slot="content">
|
|
<ai-card title="基本信息">
|
|
<template #content>
|
|
<ai-wrapper>
|
|
<ai-info-item label="经营者姓名：" isLine :value="form.name"></ai-info-item>
|
|
<ai-info-item label="身份证号：" :value="form.idNumber"></ai-info-item>
|
|
<ai-info-item label="性别：" :value="$dict.getLabel('sex', form.sex)"></ai-info-item>
|
|
<ai-info-item label="联系电话：" :value="form.phone"></ai-info-item>
|
|
<ai-info-item label="出生日期：" :value="form.birthday"></ai-info-item>
|
|
<ai-info-item label="年龄：" :value="form.age"></ai-info-item>
|
|
</ai-wrapper>
|
|
</template>
|
|
</ai-card>
|
|
<ai-card title="门店信息">
|
|
<template #content>
|
|
<ai-wrapper label-width="100px">
|
|
<ai-info-item label="门店名称：" isLine :value="form.shopName"></ai-info-item>
|
|
<ai-info-item label="门店照片：" isLine>
|
|
<div class="files">
|
|
<ai-uploader
|
|
:instance="instance"
|
|
fileType="img"
|
|
acceptType=".jpg,.png,.jpeg,.JPG,.PNG,.JPEG"
|
|
v-model="form.fileUrl"
|
|
:limit="1" :disabled="true">
|
|
</ai-uploader>
|
|
</div>
|
|
</ai-info-item>
|
|
<ai-info-item label="经营类型：" isLine :value="$dict.getLabel('operatorType',form.operatorType)"></ai-info-item>
|
|
<ai-info-item label="所属片区：" isLine :value="form.girdName"></ai-info-item>
|
|
<ai-info-item label="社会信用代码：" isLine :value="form.creditCode"></ai-info-item>
|
|
<ai-info-item label="门店住址：" isLine :value="form.address"></ai-info-item>
|
|
<ai-info-item label="门店描述：" isLine :value="form.description"></ai-info-item>
|
|
</ai-wrapper>
|
|
</template>
|
|
</ai-card>
|
|
</template>
|
|
</ai-detail>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Detail',
|
|
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
params: Object
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
form: {
|
|
name: '',
|
|
idNumber: '',
|
|
sex: '',
|
|
phone: '',
|
|
birthday: '',
|
|
age: '',
|
|
shopName: '',
|
|
operatorTypes: '',
|
|
creditCode: '',
|
|
girdName: '',
|
|
address: '',
|
|
description: '',
|
|
fileUrl:[]
|
|
},
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.$dict.load('sex','operatorType').then(()=>{
|
|
this.getDetail()
|
|
})
|
|
},
|
|
|
|
methods: {
|
|
async getDetail() {
|
|
try {
|
|
const {code, data} = await this.instance.post('/app/appshoparchives/queryDetailById', null, {
|
|
params: {
|
|
id: this.params.id
|
|
}
|
|
})
|
|
if (code === 0) {
|
|
this.form = {...data}
|
|
this.form.fileUrl = [{
|
|
url: data.fileUrl
|
|
}]
|
|
}
|
|
} catch (e) {
|
|
console.error(e)
|
|
}
|
|
},
|
|
cancel() {
|
|
this.$emit('change', {
|
|
type: 'List',
|
|
isRefresh: true
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.detail {
|
|
.files {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.file-item {
|
|
width: 118px;
|
|
height: 118px;
|
|
margin: 0 20px 20px 0;
|
|
|
|
img, video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
img {
|
|
cursor: pointer;
|
|
transition: all ease 0.3s;
|
|
|
|
&:hover {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|