carInfoModal.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  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.brandName || '--' }}</a-descriptions-item>
  19. <a-descriptions-item label="车型:">{{ infoData&&infoData.modelName || '--' }}</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.displacement || '--' }}</a-descriptions-item>
  24. <a-descriptions-item label="年款:">{{ infoData&&infoData.modelYear || '--' }}</a-descriptions-item>
  25. <a-descriptions-item label="配置信息:">{{ infoData&&infoData.confLevel || '--' }}</a-descriptions-item>
  26. </a-descriptions>
  27. <div class="btn-cont"><a-button id="carInfoDetail-modal-back" @click="isShow = false">返回</a-button></div>
  28. </div>
  29. </a-modal>
  30. </div>
  31. </template>
  32. <script>
  33. import defImg from '@/assets/def_img@2x.png' // 默认图片
  34. export default {
  35. name: 'CarInfoDetailModal',
  36. props: {
  37. openModal: { // 弹框显示状态
  38. type: Boolean,
  39. default: false
  40. },
  41. infoData: { // 基本信息
  42. type: Object,
  43. default: () => {
  44. return {}
  45. }
  46. }
  47. },
  48. data () {
  49. return {
  50. isShow: this.openModal, // 是否打开弹框
  51. defImg
  52. }
  53. },
  54. methods: {
  55. // 预览图片
  56. inited (viewer) {
  57. if (viewer) {
  58. const imageUrl = []
  59. viewer.map(item => {
  60. imageUrl.push(item)
  61. })
  62. this.$viewerApi({
  63. images: imageUrl
  64. })
  65. }
  66. }
  67. },
  68. watch: {
  69. // 父页面传过来的弹框状态
  70. openModal (newValue, oldValue) {
  71. this.isShow = newValue
  72. },
  73. // 重定义的弹框状态
  74. isShow (newValue, oldValue) {
  75. if (!newValue) {
  76. this.$emit('close')
  77. }
  78. }
  79. }
  80. }
  81. </script>
  82. <style lang="less">
  83. .carInfoDetail-modal{
  84. .ant-modal-body {
  85. padding: 40px 40px 24px;
  86. }
  87. .ant-descriptions-item-label.ant-descriptions-item-colon{
  88. width: 117px;
  89. }
  90. .btn-cont {
  91. text-align: center;
  92. margin: 35px 0 10px;
  93. }
  94. .head-info-con{
  95. .head-info-title{
  96. font-size: 16px;
  97. margin: 0;
  98. }
  99. }
  100. .head-info-main{
  101. margin-bottom: 20px;
  102. }
  103. .imageUrl{
  104. cursor: pointer;
  105. }
  106. }
  107. </style>