add.html 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport"
  5. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. <script crossorigin="anonymous" integrity="sha512-PhuYrdDBtBeUjY7KTmjRYFFadw8uXXdTmzZyhCHZewYsqZJ0pxFCwU528jRoil42LXMW3ksegQT5zdjkfiR1IA==" src="https://lib.baomitu.com/vue/2.7.7/vue.min.js"></script>
  9. <script crossorigin="anonymous" integrity="sha512-hybks56be1W1sC5RgFWfH7pn+uUlfCi6bPD8AbNvNlc7b1k69wwIxwhF05wobYemsndUkdoNWomx/kBD94xpgA==" src="https://lib.baomitu.com/element-ui/2.15.10/index.min.js"></script>
  10. <link crossorigin="anonymous" integrity="sha512-2by4R3Ml3Olue9XwB86eM7YLPqZr1pOBFfdsSOFs/1SJ7NIOCz0QhK99lR7d4+B/aOYXOWnghUUV/gjaITrL1g==" href="https://lib.baomitu.com/element-ui/2.15.10/theme-chalk/index.min.css" rel="stylesheet">
  11. <style type="text/css">
  12. [v-cloak]{
  13. display: none;
  14. }
  15. .add-img {
  16. width: 60px;
  17. height: 60px;
  18. border: 1px dashed #E6E6E6;
  19. border-radius: 4px;
  20. justify-content: center;
  21. }
  22. .display-flex {
  23. display: flex;
  24. align-items: center;
  25. }
  26. .goods-images {
  27. width: 60px;
  28. height: 60px;
  29. border-radius: 4px;
  30. position: relative;
  31. border: 1px solid #7438D5;
  32. margin-right: 10px;
  33. margin-bottom: 10px;
  34. }
  35. .label-auto {
  36. width: 100%;
  37. height: 100%;
  38. }
  39. .del-image-btn {
  40. position: absolute;
  41. width: 14px;
  42. height: 14px;
  43. line-height: 14px;
  44. text-align: center;
  45. border-radius: 50%;
  46. font-size: 12px;
  47. font-weight: 600;
  48. background: #7438D5;
  49. color: #fff;
  50. top: -7px;
  51. right: -7px;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <div id="app">
  57. <el-form :model="form" ref="form" size="mini" v-cloak>
  58. <el-form-item label="商品名称" prop="name">
  59. <el-input v-model="form.name" maxlength="30" show-word-limit></el-input>
  60. </el-form-item>
  61. <el-form-item label="商品分类" prop="category_id">
  62. <el-select v-model="form.category_id">
  63. <el-option v-for="item in category" :key="item.id" :value="item.id" :label="item.name"/>
  64. </el-select>
  65. </el-form-item>
  66. <el-form-item label="商品品牌" prop="brand">
  67. <el-input v-model="form.brand" maxlength="20" show-word-limit></el-input>
  68. </el-form-item>
  69. <el-form-item label="商品描述" prop="describe">
  70. <el-input v-model="form.describe" maxlength="50" show-word-limit></el-input>
  71. </el-form-item>
  72. <el-form-item label="是否热销" prop="is_hot">
  73. <el-radio v-model="form.is_hot" :label="0">否</el-radio>
  74. <el-radio v-model="form.is_hot" :label="1">是</el-radio>
  75. </el-form-item>
  76. <el-form-item label="是否秒杀" prop="is_kill">
  77. <el-radio v-model="form.is_kill" :label="0">否</el-radio>
  78. <el-radio v-model="form.is_kill" :label="1">是</el-radio>
  79. </el-form-item>
  80. <el-form-item label="状态" prop="status">
  81. <el-radio v-model="form.status" :label="parseInt(idx)" v-for="(item,idx) in status" :key="idx">{{item}}</el-radio>
  82. </el-form-item>
  83. <el-form-item label="是否维修商品" prop="is_kill">
  84. <el-radio v-model="form.is_fix" :label="0">否</el-radio>
  85. <el-radio v-model="form.is_fix" :label="1">是</el-radio>
  86. </el-form-item>
  87. <el-form-item label="轮播图" prop="logo">
  88. <div class="display-flex" style="flex-wrap: wrap;">
  89. <div class="goods-image-box display-flex" style="flex-wrap: wrap;"
  90. v-if="form.logo">
  91. <div class="goods-images" v-for="(it,index) in form.logo">
  92. <img class="label-auto" :src="Fast.api.cdnurl(it)" style="border-radius: 4px;">
  93. <div class="del-image-btn" @click="delImg(index)">
  94. <img class="label-auto" src="/images/close.png">
  95. </div>
  96. </div>
  97. </div>
  98. <div class="add-img display-flex" @click="addImg('image',null,false)"
  99. v-if="form.logo.length<6">
  100. <i class="el-icon-plus"></i>
  101. </div>
  102. </div>
  103. </el-form-item>
  104. <el-form-item label="视频" prop="logo">
  105. <div class="display-flex" style="flex-wrap: wrap;">
  106. <div class="goods-image-box display-flex" style="flex-wrap: wrap;"
  107. v-if="form.video">
  108. <div class="goods-images">
  109. <video class="label-auto" :src="Fast.api.cdnurl(form.video)" style="border-radius: 4px;">
  110. <div class="del-image-btn" @click="delVideo">
  111. <img class="label-auto" src="/images/close.png">
  112. </div>
  113. </div>
  114. </div>
  115. <div class="add-img display-flex" @click="addImg('video',null,false)"
  116. v-if="!form.video">
  117. <i class="el-icon-plus"></i>
  118. </div>
  119. </div>
  120. </el-form-item>
  121. </el-form>
  122. </div>
  123. <script>
  124. let category={$category|json_encode};
  125. let status={$status|json_encode};
  126. </script>
  127. </body>
  128. </html>