viewLogisticsModal.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <a-modal
  3. centered
  4. class="viewLogistics-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="物流单号"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="360">
  11. <div class="viewLogistics-con">
  12. <div class="viewLogistics-main">
  13. 物流单号:{{ itemNo||'--' }}
  14. </div>
  15. <!-- 按钮 -->
  16. <div class="btn-con">
  17. <a-button
  18. v-if="itemNo"
  19. id="viewLogistics-cancel"
  20. class="button-cancel"
  21. @click="handleCopy">复制</a-button>
  22. <a-button
  23. v-else
  24. id="viewLogistics-cancel"
  25. class="button-cancel"
  26. @click="isShow=false">关闭</a-button>
  27. </div>
  28. </div>
  29. </a-modal>
  30. </template>
  31. <script>
  32. import { Upload } from '@/components'
  33. export default {
  34. name: 'ViewLogisticsModal',
  35. components: { Upload },
  36. props: {
  37. openModal: { // 弹框显示状态
  38. type: Boolean,
  39. default: false
  40. },
  41. itemNo: {
  42. type: String,
  43. default: ''
  44. }
  45. },
  46. data () {
  47. return {
  48. isShow: this.openModal // 是否打开弹框
  49. }
  50. },
  51. methods: {
  52. async handleCopy () {
  53. const _this = this
  54. try {
  55. await navigator.clipboard.writeText(_this.itemNo)
  56. _this.$message.success('内容已复制到剪贴板')
  57. } catch (err) {
  58. _this.$message.error('复制到剪贴板失败', err)
  59. }
  60. }
  61. },
  62. watch: {
  63. // 父页面传过来的弹框状态
  64. openModal (newValue, oldValue) {
  65. this.isShow = newValue
  66. },
  67. // 重定义的弹框状态
  68. isShow (newValue, oldValue) {
  69. if (!newValue) {
  70. this.$emit('close')
  71. }
  72. }
  73. }
  74. }
  75. </script>
  76. <style lang="less" scoped>
  77. .viewLogistics-modal{
  78. .viewLogistics-con{
  79. .viewLogistics-main{
  80. padding:10px 20px 20px;
  81. }
  82. .btn-con{
  83. margin: 10px 0 20px;
  84. text-align: center;
  85. .button-cancel{
  86. font-size: 12px;
  87. }
  88. }
  89. }
  90. }
  91. </style>