carInfoModal.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  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. @cancle="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" :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. inited (viewer) {
  69. if (viewer) {
  70. const imageUrl = []
  71. viewer.map(item => {
  72. imageUrl.push(item)
  73. })
  74. this.$viewerApi({
  75. images: imageUrl
  76. })
  77. }
  78. }
  79. },
  80. watch: {
  81. // 父页面传过来的弹框状态
  82. openModal (newValue, oldValue) {
  83. this.isShow = newValue
  84. },
  85. // 重定义的弹框状态
  86. isShow (newValue, oldValue) {
  87. if (!newValue) {
  88. this.$emit('close')
  89. }
  90. }
  91. }
  92. }
  93. </script>
  94. <style lang="less">
  95. .carInfoDetail-modal{
  96. .ant-modal-body {
  97. padding: 40px 40px 24px;
  98. }
  99. .ant-descriptions-item-label.ant-descriptions-item-colon{
  100. width: 117px;
  101. }
  102. .btn-cont {
  103. text-align: center;
  104. margin: 35px 0 10px;
  105. }
  106. .head-info-con{
  107. .head-info-title{
  108. font-size: 16px;
  109. margin: 0;
  110. }
  111. }
  112. .head-info-main{
  113. margin-bottom: 20px;
  114. }
  115. .imageUrl{
  116. cursor: pointer;
  117. }
  118. }
  119. </style>