edit.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
  2. <link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
  3. <style>
  4. #replyDetail {
  5. background: #fff;
  6. border-radius: 6px;
  7. font-size: 14px;
  8. padding: 0 20px 20px;
  9. color: #444;
  10. }
  11. .del-image-btn {
  12. position: absolute;
  13. width: 14px;
  14. height: 14px;
  15. line-height: 14px;
  16. text-align: center;
  17. border-radius: 50%;
  18. font-size: 12px;
  19. font-weight: 600;
  20. background: #7438D5;
  21. color: #fff;
  22. top: -7px;
  23. right: -7px;
  24. }
  25. .goods-images {
  26. width: 60px;
  27. height: 60px;
  28. border-radius: 4px;
  29. position: relative;
  30. border: 1px solid #7438D5;
  31. margin-right: 10px;
  32. margin-bottom: 10px;
  33. }
  34. .label-auto {
  35. width: 100%;
  36. height: 100%;
  37. }
  38. .add-img {
  39. width: 60px;
  40. height: 60px;
  41. border: 1px dashed #E6E6E6;
  42. border-radius: 4px;
  43. justify-content: center;
  44. }
  45. .el-textarea{
  46. height: 54px;
  47. }
  48. [v-cloak] {
  49. display: none
  50. }
  51. </style>
  52. <script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
  53. <script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
  54. <div id="materialDetail" v-cloak>
  55. <div v-if="sourceType=='text'">
  56. <el-form :model="detailForm" ref="detailForm" :rules="rules" label-width="100px" class="demo-detailForm">
  57. <el-form-item label="标题:" prop="name">
  58. <el-input v-model="detailForm.name" placeholder="请输入内容"></el-input>
  59. </el-form-item>
  60. <el-form-item label="内容:" prop="content">
  61. <el-input type="textarea" v-model="detailForm.content" placeholder="请输入内容"></el-input>
  62. </el-form-item>
  63. </el-form>
  64. </div>
  65. <div v-if="sourceType=='link'">
  66. <el-form :model="detailForm" ref="detailForm" :rules="rules" label-width="100px" class="demo-detailForm">
  67. <el-form-item label="标题:" prop="name">
  68. <el-input v-model="detailForm.name" placeholder="请输入内容"></el-input>
  69. </el-form-item>
  70. <el-form-item label="描述:" prop="description">
  71. <el-input type="textarea" v-model="detailForm.description" placeholder="请输入内容"></el-input>
  72. </el-form-item>
  73. <el-form-item label="图片:" prop="image">
  74. <div class="display-flex">
  75. <div class="goods-image-box display-flex" v-if="detailForm.image">
  76. <div class="goods-images" style="margin-right: 0;">
  77. <img class="label-auto" :src="Fast.api.cdnurl(detailForm.image)"
  78. style="border-radius: 4px;">
  79. <div class="del-image-btn" @click="delImg('image',null)">
  80. <img class="label-auto" src="/assets/addons/shopro/img/goods/close.png">
  81. </div>
  82. </div>
  83. </div>
  84. <div class="add-img display-flex" @click="addImg('image',null,false)"
  85. v-if="!detailForm.image">
  86. <i class="el-icon-plus"></i>
  87. </div>
  88. <!-- <div class="msg-tip"></div> -->
  89. </div>
  90. </el-form-item>
  91. <el-form-item label="链接地址:" prop="url">
  92. <el-input v-model="detailForm.url" placeholder="http(s)://"></el-input>
  93. </el-form-item>
  94. </el-form>
  95. </div>
  96. <div class="dialog-footer" style="justify-content: space-between;">
  97. <el-popover placement="top" width="270" v-model="visible">
  98. <div class="popover-container">
  99. <p>文本内容</p>
  100. <p>
  101. <el-input v-model="hrefMsg"></el-input>
  102. </p>
  103. <p>链接地址</p>
  104. <p>
  105. <el-input v-model="hrefA" placeholder="http(s)://"></el-input>
  106. </p>
  107. </div>
  108. <div style="text-align: right; margin: 0">
  109. <el-button size="mini" @click="addHref()">取消</el-button>
  110. <el-button type="primary" size="mini" @click="addHref('yes')">确定</el-button>
  111. </div>
  112. <div style="margin-left: 100px;" v-if="sourceType=='text'" class="theme-color cursor-pointer" slot="reference">插入超链接</div>
  113. </el-popover>
  114. <div class="display-flex">
  115. <div @click="dispatchSub" class="dialog-cancel-btn display-flex-c cursor-pointer">取消</div>
  116. <div @click="dispatchSub('yes','detailForm')" class="dialog-define-btn display-flex-c cursor-pointer">确定
  117. </div>
  118. </div>
  119. </div>
  120. </div>