promotionShowModal.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <template>
  2. <a-modal
  3. centered
  4. class="promotionDesc-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="modalTit"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="500">
  11. <div class="promotionDesc-con">
  12. <img src="@/assets/iphone.png" alt="图片走丢了" srcset="">
  13. <div class="promotionDescCon" v-show="showType=='IMAGE_CONTENT'" v-html="mainContent"></div>
  14. <div class="promotionDescCon" v-show="showType=='VIDEO'">
  15. <video width="100%" height="auto">
  16. <source :src="mainContent" type="video/mp4"></source>
  17. </video>
  18. </div>
  19. </div>
  20. <div class="btn-cont">
  21. <!-- <a-button id="promotionDesc-modal-back" @click="isShow = false" style="margin-right:10px;">下载图片</a-button> -->
  22. <a-button type="primary" id="promotionDesc-modal-back" @click="isShow = false">关闭</a-button>
  23. </div>
  24. </a-modal>
  25. </template>
  26. <script>
  27. import { commonMixin } from '@/utils/mixin'
  28. import { promoTerminalDetail } from '@/api/promoTerminal'
  29. export default {
  30. name: 'PromotionDescModal',
  31. mixins: [commonMixin],
  32. props: {
  33. openModal: { // 弹框显示状态
  34. type: Boolean,
  35. default: false
  36. }
  37. },
  38. data () {
  39. return {
  40. modalTit: '促销展示',
  41. isShow: this.openModal, // 是否打开弹框
  42. mainContent: '', // 主要显示内容
  43. showType: undefined//
  44. }
  45. },
  46. methods: {
  47. getDetail (con) {
  48. const ajaxData = {
  49. id: con.id
  50. }
  51. this.showType = con.showType
  52. promoTerminalDetail(ajaxData).then(res => {
  53. if (res.status == 200) {
  54. this.mainContent = res.data.content
  55. }
  56. })
  57. }
  58. },
  59. watch: {
  60. // 父页面传过来的弹框状态
  61. openModal (newValue, oldValue) {
  62. this.isShow = newValue
  63. },
  64. // 重定义的弹框状态
  65. isShow (newValue, oldValue) {
  66. if (!newValue) {
  67. this.$emit('close')
  68. }
  69. }
  70. }
  71. }
  72. </script>
  73. <style lang="less" scoped>
  74. .promotionDesc-modal{
  75. /deep/.ant-modal-body{
  76. text-algin:center !important;
  77. }
  78. .promotionDesc-con{
  79. width:340px;
  80. margin:0 auto;
  81. position:relative;
  82. img{
  83. width:81%;
  84. height:auto;
  85. }
  86. .promotionDescCon{
  87. position: absolute;
  88. left:15%;
  89. top:12.5%;
  90. width: 70%;
  91. max-height:420px;
  92. overflow-y: scroll;
  93. scrollbar-width:none;
  94. -ms-overflow-style: none;
  95. }
  96. .promotionDescCon::-webkit-scrollbar{
  97. display:none;
  98. }
  99. }
  100. .btn-cont {
  101. text-align: center;
  102. margin: 30px 0 0px;
  103. }
  104. }
  105. </style>