detailModal.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <template>
  2. <a-modal
  3. centered
  4. class="productInfoDetail-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="产品详情"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. width="80%">
  11. <!-- 产品详情 -->
  12. <div>
  13. <a-descriptions bordered size="default">
  14. <a-descriptions-item label="产品图片:">
  15. <img
  16. v-for="(item,index) in fileList"
  17. :key="index"
  18. :src="item.url"
  19. title="点击查看大图"
  20. class="productPic"
  21. @click="getPreview(item.url)" />
  22. </a-descriptions-item>
  23. <!-- <a-descriptions-item label="产品名称:">{{ detailsData.productName || '--' }}</a-descriptions-item>
  24. <a-descriptions-item label="产品编码:">{{ detailsData.productCode || '--' }}</a-descriptions-item>
  25. <a-descriptions-item label="原厂编码:">{{ detailsData.origCode || '--' }}</a-descriptions-item>
  26. <a-descriptions-item label="其他编码:">{{ detailsData.origCode || '--' }}</a-descriptions-item>
  27. <a-descriptions-item label="包装规格:">{{ detailsData.origCode || '--' }}</a-descriptions-item>
  28. <a-descriptions-item label="箭冠产品:">{{ detailsData.origCode || '--' }}</a-descriptions-item>
  29. <a-descriptions-item label="单位:">{{ detailsData.unit || '--' }}</a-descriptions-item>
  30. <a-descriptions-item label="产品品牌:">{{ detailsData.productBrandName || '--' }}</a-descriptions-item>
  31. <a-descriptions-item label="产品类别:">{{ productTypeName || '--' }}</a-descriptions-item>
  32. <a-descriptions-item label="产品尺寸:">{{ (detailsData.wholesalePrice || detailsData.wholesalePrice==0) ? detailsData.wholesalePrice : '--' }}</a-descriptions-item>
  33. <a-descriptions-item label="产品重量:">{{ (detailsData.terminalPrice || detailsData.terminalPrice==0) ? detailsData.terminalPrice : '--' }}</a-descriptions-item>
  34. <a-descriptions-item label="颜色:">{{ detailsData.productBrandName || '--' }}</a-descriptions-item>
  35. <a-descriptions-item label="产品说明:">{{ detailsData.productBrandName || '--' }}</a-descriptions-item>
  36. <a-descriptions-item label="其他说明:">{{ detailsData.productBrandName || '--' }}</a-descriptions-item> -->
  37. </a-descriptions>
  38. <div class="btn-cont"><a-button id="product-management-detail-modal-back" @click="isShow = false">返回列表</a-button></div>
  39. </div>
  40. <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible=false">
  41. <img alt="example" style="width: 100%" :src="previewImage" />
  42. </a-modal>
  43. </a-modal>
  44. </template>
  45. <script>
  46. // import { dealerProductDetail } from '@/api/dealerProduct'
  47. export default {
  48. name: 'ProductInfoDetailModal',
  49. props: {
  50. openModal: { // 弹框显示状态
  51. type: Boolean,
  52. default: false
  53. },
  54. itemId: {
  55. type: [Number, String],
  56. default: ''
  57. }
  58. },
  59. computed: {
  60. productTypeName () {
  61. const productTypeName1 = this.detailsData.productTypeName1 ? this.detailsData.productTypeName1 : ''
  62. const productTypeName2 = this.detailsData.productTypeName2 ? ' > ' + this.detailsData.productTypeName2 : ''
  63. const productTypeName3 = this.detailsData.productTypeName3 ? ' > ' + this.detailsData.productTypeName3 : ''
  64. return productTypeName1 + productTypeName2 + productTypeName3
  65. }
  66. },
  67. data () {
  68. return {
  69. isShow: this.openModal, // 是否打开弹框
  70. detailsData: null, // 详情数据
  71. previewVisible: false,
  72. previewImage: '',
  73. fileList: [
  74. {
  75. uid: '-1',
  76. name: 'image.png',
  77. status: 'done',
  78. url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
  79. },
  80. {
  81. uid: '-2',
  82. name: 'image.png',
  83. status: 'done',
  84. url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
  85. },
  86. {
  87. uid: '-3',
  88. name: 'image.png',
  89. status: 'done',
  90. url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
  91. }
  92. ]
  93. }
  94. },
  95. methods: {
  96. // 获取详情
  97. getDetail () {
  98. // dealerProductDetail({ id: this.itemId }).then(res => {
  99. // if (res.status == 200) {
  100. // this.detailsData = res.data
  101. // } else {
  102. // this.detailsData = null
  103. // }
  104. // })
  105. },
  106. // 查看大图
  107. getPreview (url) {
  108. this.previewImage = url
  109. this.previewVisible = true
  110. }
  111. },
  112. watch: {
  113. // 父页面传过来的弹框状态
  114. openModal (newValue, oldValue) {
  115. this.isShow = newValue
  116. },
  117. // 重定义的弹框状态
  118. isShow (newValue, oldValue) {
  119. if (!newValue) {
  120. this.$emit('close')
  121. }
  122. },
  123. itemId (newValue, oldValue) {
  124. if (this.isShow && newValue) {
  125. this.getDetail()
  126. }
  127. }
  128. }
  129. }
  130. </script>
  131. <style lang="less">
  132. .productInfoDetail-modal{
  133. .ant-modal-body {
  134. padding: 40px 40px 24px;
  135. }
  136. .productPic{
  137. cursor: pointer;
  138. width: 100px;
  139. margin-right: 10px;
  140. }
  141. .btn-cont {
  142. text-align: center;
  143. margin: 35px 0 10px;
  144. }
  145. }
  146. </style>