detailModal.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <a-modal
  3. centered
  4. class="productBrandDetail-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="产品详情"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="960">
  11. <div class="modalContext">
  12. <a-descriptions bordered size="small" :column="1">
  13. <a-descriptions-item label="品牌名称:">{{ detailsData&&detailsData.brandName || '--' }}</a-descriptions-item>
  14. <a-descriptions-item label="品牌分类:">{{ detailsData&&detailsData.brandTypeDictValue || '--' }}</a-descriptions-item>
  15. <a-descriptions-item label="排序字母:">{{ detailsData&&detailsData.sortChar || '--' }}</a-descriptions-item>
  16. <a-descriptions-item label="品牌图片:">
  17. <img v-if="detailsData&&detailsData.imageUrl" :src="detailsData.imageUrl" title="点击查看大图" class="productPic" @click="getPreview(detailsData.imageUrl)" />
  18. <span v-else>--</span>
  19. </a-descriptions-item>
  20. <a-descriptions-item label="品牌介绍:">
  21. <div v-if="detailsData&&detailsData.brandIntroduce" v-html="detailsData.brandIntroduce"></div>
  22. <span v-else>--</span>
  23. </a-descriptions-item>
  24. </a-descriptions>
  25. </div>
  26. <div class="btn-cont"><a-button id="productBrandDetail-modal-back" @click="isShow = false">返回列表</a-button></div>
  27. <a-modal :visible="previewVisible" :footer="null" centered :maskClosable="false" @cancel="previewVisible=false">
  28. <img alt="example" style="width: 100%;" :src="previewImage" />
  29. </a-modal>
  30. </a-modal>
  31. </template>
  32. <script>
  33. import { productBrandSnDetail } from '@/api/productBrand'
  34. export default {
  35. name: 'ProductBrandDetailModal',
  36. props: {
  37. openModal: { // 弹框显示状态
  38. type: Boolean,
  39. default: false
  40. },
  41. itemSn: {
  42. type: [Number, String],
  43. default: ''
  44. }
  45. },
  46. data () {
  47. return {
  48. isShow: this.openModal, // 是否打开弹框
  49. detailsData: null, // 详情数据
  50. previewVisible: false,
  51. previewImage: ''
  52. }
  53. },
  54. methods: {
  55. // 获取详情
  56. getDetail () {
  57. productBrandSnDetail({ sn: this.itemSn }).then(res => {
  58. if (res.status == 200) {
  59. this.detailsData = res.data
  60. } else {
  61. this.detailsData = null
  62. }
  63. })
  64. },
  65. // 查看大图
  66. getPreview (url) {
  67. this.previewImage = url
  68. this.previewVisible = true
  69. }
  70. },
  71. watch: {
  72. // 父页面传过来的弹框状态
  73. openModal (newValue, oldValue) {
  74. this.isShow = newValue
  75. },
  76. // 重定义的弹框状态
  77. isShow (newValue, oldValue) {
  78. if (!newValue) {
  79. this.$emit('close')
  80. this.detailsData = null
  81. }
  82. },
  83. itemSn (newValue, oldValue) {
  84. if (this.isShow && newValue) {
  85. this.getDetail()
  86. }
  87. }
  88. }
  89. }
  90. </script>
  91. <style lang="less">
  92. .productBrandDetail-modal{
  93. .productPic{
  94. cursor: pointer;
  95. max-width: 100px;
  96. max-height: 100px;
  97. margin-right: 10px;
  98. }
  99. .btn-cont {
  100. text-align: center;
  101. margin: 35px 0 10px;
  102. }
  103. .ant-descriptions-item-label.ant-descriptions-item-colon{
  104. width: 120px;
  105. }
  106. .modalContext{
  107. padding: 0 40px;
  108. max-height:630px;
  109. overflow-y: scroll;
  110. }
  111. }
  112. </style>