carInfoModal.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <template>
  2. <div v-if="isShow">
  3. <a-modal
  4. centered
  5. class="carInfoDetail-modal"
  6. :footer="null"
  7. :maskClosable="false"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="800">
  11. <div>
  12. <div class="head-info-con">
  13. <p class="head-info-title">车型信息</p>
  14. <a-divider style="margin: 12px 0;" />
  15. </div>
  16. <a-descriptions bordered :column="2" size="small" class="head-info-main">
  17. <a-descriptions-item label="车型信息:">{{ infoData&&infoData.text || '--' }}</a-descriptions-item>
  18. <a-descriptions-item label="品牌:">{{ infoData&&infoData.brand_name || '--' }}</a-descriptions-item>
  19. <a-descriptions-item label="车型:">{{ infoData&&infoData.model_name || '--' }}</a-descriptions-item>
  20. <a-descriptions-item label="品牌LOGO:">
  21. <img :src="infoData&&infoData.icon?infoData.icon:defImg" width="30" height="30" style="border-radius: 50%;" />
  22. </a-descriptions-item>
  23. <a-descriptions-item label="排量:">{{ infoData&&infoData.sub_name || '--' }}</a-descriptions-item>
  24. <a-descriptions-item label="年款:">{{ infoData&&infoData.year || '--' }}</a-descriptions-item>
  25. <a-descriptions-item label="车型图:">
  26. <div v-if="infoData&&infoData.images.length>0">
  27. <img :src="infoData.images[0] || defImg" width="30" height="30" class="imageUrl" @click="inited(infoData.images)" />
  28. </div>
  29. <span v-else>--</span>
  30. </a-descriptions-item>
  31. <a-descriptions-item label="车系:">{{ infoData&&infoData.series_name || '--' }}</a-descriptions-item>
  32. </a-descriptions>
  33. <div class="head-info-con" v-if="infoData&&infoData.params">
  34. <p class="head-info-title">配置信息</p>
  35. <a-divider style="margin: 12px 0;" />
  36. </div>
  37. <a-descriptions bordered :column="2" size="small" v-if="infoData&&infoData.params" class="head-info-main">
  38. <a-descriptions-item v-for="item in infoData.params" :key="item.type_name" :label="item.type_name+':'">{{ item.value || '--' }}</a-descriptions-item>
  39. </a-descriptions>
  40. <div class="btn-cont"><a-button id="carInfoDetail-modal-back" @click="isShow = false">返回</a-button></div>
  41. </div>
  42. </a-modal>
  43. </div>
  44. </template>
  45. <script>
  46. import defImg from '@/assets/def_img@2x.png'
  47. export default {
  48. name: 'CarInfoDetailModal',
  49. props: {
  50. openModal: { // 弹框显示状态
  51. type: Boolean,
  52. default: false
  53. },
  54. infoData: { // 基本信息
  55. type: Object,
  56. default: () => {
  57. return {}
  58. }
  59. }
  60. },
  61. data () {
  62. return {
  63. isShow: this.openModal, // 是否打开弹框
  64. defImg // 默认图片
  65. }
  66. },
  67. methods: {
  68. // 预览图片
  69. inited (viewer) {
  70. if (viewer) {
  71. const imageUrl = []
  72. viewer.map(item => {
  73. imageUrl.push(item)
  74. })
  75. this.$viewerApi({
  76. images: imageUrl
  77. })
  78. }
  79. }
  80. },
  81. watch: {
  82. // 父页面传过来的弹框状态
  83. openModal (newValue, oldValue) {
  84. this.isShow = newValue
  85. },
  86. // 重定义的弹框状态
  87. isShow (newValue, oldValue) {
  88. if (!newValue) {
  89. this.$emit('close')
  90. }
  91. }
  92. }
  93. }
  94. </script>
  95. <style lang="less">
  96. .carInfoDetail-modal{
  97. .ant-modal-body {
  98. padding: 40px 40px 24px;
  99. }
  100. .ant-descriptions-item-label.ant-descriptions-item-colon{
  101. width: 117px;
  102. }
  103. .btn-cont {
  104. text-align: center;
  105. margin: 35px 0 10px;
  106. }
  107. .head-info-con{
  108. .head-info-title{
  109. font-size: 16px;
  110. margin: 0;
  111. }
  112. }
  113. .head-info-main{
  114. margin-bottom: 20px;
  115. }
  116. .imageUrl{
  117. cursor: pointer;
  118. }
  119. }
  120. </style>