add.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  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. <script src="/assets/libs/jquery/dist/jquery.min.js"></script>
  12. <style type="text/css">
  13. [v-cloak]{
  14. display: none;
  15. }
  16. .add-img {
  17. width: 60px;
  18. height: 60px;
  19. border: 1px dashed #E6E6E6;
  20. border-radius: 4px;
  21. justify-content: center;
  22. }
  23. .display-flex {
  24. display: flex;
  25. align-items: center;
  26. }
  27. .goods-images {
  28. width: 60px;
  29. height: 60px;
  30. border-radius: 4px;
  31. position: relative;
  32. border: 1px solid #7438D5;
  33. margin-right: 10px;
  34. margin-bottom: 10px;
  35. }
  36. .label-auto {
  37. width: 100%;
  38. height: 100%;
  39. }
  40. .del-image-btn {
  41. position: absolute;
  42. width: 14px;
  43. height: 14px;
  44. line-height: 14px;
  45. text-align: center;
  46. border-radius: 50%;
  47. font-size: 12px;
  48. font-weight: 600;
  49. background: #7438D5;
  50. color: #fff;
  51. top: -7px;
  52. right: -7px;
  53. }
  54. .sInput{
  55. width: 200px;
  56. }
  57. .smInput{
  58. width: 100px;
  59. }
  60. .sizeSpecItem{
  61. width: 260px;
  62. display: inline-block;
  63. }
  64. .mgtb10{
  65. margin-top: 5px;
  66. }
  67. </style>
  68. </head>
  69. <body>
  70. <div id="app" v-cloak>
  71. <el-form :model="form" ref="form" size="mini" label-width="120px" :rules="rules">
  72. <el-form-item label="商品名称" prop="name">
  73. <el-input v-model="form.name" maxlength="30" show-word-limit></el-input>
  74. </el-form-item>
  75. <el-form-item label="商品分类" prop="category_id">
  76. <el-select v-model="form.category_id">
  77. <el-option v-for="item in category" :key="item.id" :value="item.id" :label="item.name"/>
  78. </el-select>
  79. </el-form-item>
  80. <el-form-item label="商品品牌" prop="brand">
  81. <el-input v-model="form.brand" maxlength="20" show-word-limit></el-input>
  82. </el-form-item>
  83. <el-form-item label="商品描述" prop="describe">
  84. <el-input v-model="form.describe" maxlength="50" show-word-limit></el-input>
  85. </el-form-item>
  86. <el-form-item label="是否需要安装" prop="is_ni">
  87. <el-radio v-model="form.is_ni" :label="0">否</el-radio>
  88. <el-radio v-model="form.is_ni" :label="1">是</el-radio>
  89. </el-form-item>
  90. <el-form-item label="是否热销" prop="is_hot">
  91. <el-radio v-model="form.is_hot" :label="0">否</el-radio>
  92. <el-radio v-model="form.is_hot" :label="1">是</el-radio>
  93. </el-form-item>
  94. <el-form-item label="是否秒杀" prop="is_kill">
  95. <el-radio v-model="form.is_kill" :label="0">否</el-radio>
  96. <el-radio v-model="form.is_kill" :label="1">是</el-radio>
  97. </el-form-item>
  98. <el-form-item label="参与会员折扣" prop="is_level_discount">
  99. <el-radio v-model="form.is_level_discount" :label="0">否</el-radio>
  100. <el-radio v-model="form.is_level_discount" :label="1">是</el-radio>
  101. </el-form-item>
  102. <el-form-item label="状态" prop="status">
  103. <el-radio v-model="form.status" :label="parseInt(idx)" v-for="(item,idx) in status" :key="idx">{{item}}</el-radio>
  104. </el-form-item>
  105. <el-form-item label="是否维修商品" prop="is_kill">
  106. <el-radio v-model="form.is_fix" :label="0">否</el-radio>
  107. <el-radio v-model="form.is_fix" :label="1">是</el-radio>
  108. </el-form-item>
  109. <el-form-item label="轮播图" prop="logo">
  110. <div class="display-flex" style="flex-wrap: wrap;">
  111. <div class="goods-image-box display-flex" style="flex-wrap: wrap;"
  112. v-if="form.logo">
  113. <div class="goods-images" v-for="(it,index) in form.logo">
  114. <img class="label-auto" :src="Fast.api.cdnurl(it)" style="border-radius: 4px;">
  115. <div class="del-image-btn" @click="delImg(index)">
  116. <img class="label-auto" src="/images/close.png">
  117. </div>
  118. </div>
  119. </div>
  120. <div class="add-img display-flex" @click="addImg('image',null,true)"
  121. v-if="form.logo.length<this.logoLength">
  122. <i class="el-icon-plus"></i>
  123. </div>
  124. </div>
  125. </el-form-item>
  126. <el-form-item label="视频" prop="video">
  127. <div class="display-flex" style="flex-wrap: wrap;">
  128. <div class="goods-image-box display-flex" style="flex-wrap: wrap;"
  129. v-if="form.video">
  130. <div class="goods-images">
  131. <video class="label-auto" :src="Fast.api.cdnurl(form.video)" style="border-radius: 4px;position: relative"></video>
  132. <div class="del-image-btn" @click="delVideo">
  133. <img class="label-auto" src="/images/close.png">
  134. </div>
  135. </div>
  136. </div>
  137. <div class="add-img display-flex" @click="addImg('video',null,false)"
  138. v-if="!form.video">
  139. <i class="el-icon-plus"></i>
  140. </div>
  141. </div>
  142. </el-form-item>
  143. <el-form-item label="规格" prop="size">
  144. <el-button size="mini" @click="addMain()">添加规格</el-button>
  145. <div v-for="(spec,idx) in form.size" :key="idx" style="margin-top: 10px;background: #F2F6FC;padding: 10px;">
  146. <div class="">
  147. 规格名:<el-input v-model="spec.type" class="smInput" placeholder="规格名"></el-input>
  148. <el-button @click="delMain(idx)" size="mini" type="text">删除</el-button>
  149. </div>
  150. <el-button size="mini" @click="addName(spec)" class="mgtb10">添加规格值</el-button>
  151. <div style="padding-left: 1px;" class="mgtb10">
  152. <template v-for="(item,item_idx) in spec.names" :key="item_idx" class="">
  153. <el-tag readonly @click="changeName(item,idx,item_idx)" closable @close="delSize(spec,item_idx)">{{item.name}}</el-tag>
  154. </template>
  155. </div>
  156. </div>
  157. </el-form-item>
  158. <el-form-item label="参数" prop="sku">
  159. <div>
  160. <div v-for="(sku,sizeIdx) in form.sku" :key="sizeIdx">
  161. <div>
  162. <div class="name">
  163. <el-tag v-for="(item,idx) in sku" :key="idx" v-if="idx.indexOf('sku-')===0 && item">{{item}}</el-tag>
  164. <el-button size="mini" type="info" v-if="sku.is_down" @click="makeDown(sku)">上架</el-button>
  165. <el-button size="mini" type="success" v-else @click="makeDown(sku)">下架</el-button>
  166. </div>
  167. 库存:<el-input :controls="false" :min="0" :step="1" v-model="sku.num_stock" class="smInput" placeholder="库存"></el-input>
  168. 秒杀库存:<el-input :controls="false" :min="0" :step="1" v-model="sku.num_stock_kill" class="smInput" placeholder="秒杀库存"></el-input>
  169. 成本价:<el-input :controls="false" :min="0" v-model="sku.amount_cost" class="smInput" placeholder="成本价"></el-input>
  170. 单ID限量购买:<el-input :controls="false" :min="0" v-model="sku.num_max" class="smInput" placeholder="单ID限量购买数量"></el-input>
  171. </div>
  172. </div>
  173. </div>
  174. </el-form-item>
  175. <el-form-item label="售价">
  176. <div>
  177. <div v-for="(sku,sizeIdx) in form.sku" :key="sizeIdx">
  178. <div v-show="sku.is_down===0">
  179. <div class="name">
  180. <el-tag v-for="(item,idx) in sku" :key="idx" v-if="idx.indexOf('sku-')===0 && item">{{item}}</el-tag>
  181. <el-button size="mini" @click="addLadder(sku.amount_ladder)">添加</el-button>
  182. </div>
  183. <div v-for="(item,ladderIdx) in sku.amount_ladder">
  184. <el-input :controls="false" :min="0" :step="1" v-model="item.min" class="smInput" placeholder="数量区间"></el-input>
  185. <el-input :controls="false" :min="0" :step="1" v-model="item.max" class="smInput" placeholder="数量区间"></el-input>
  186. <el-input :controls="false" :min="0" v-model="item.amount" class="smInput" placeholder="价格"></el-input>
  187. <el-button @click="delLadder(sku.amount_ladder,ladderIdx)" size="mini" type="link">删除</el-button>
  188. </div>
  189. </div>
  190. </div>
  191. </div>
  192. </el-form-item>
  193. <el-form-item label="秒杀价" v-show="form.is_kill===1">
  194. <div>
  195. <div v-for="(sku,sizeIdx) in form.sku" :key="sizeIdx">
  196. <div v-show="sku.is_down===0">
  197. <div class="name">
  198. <el-tag v-for="(item,idx) in sku" :key="idx" v-if="idx.indexOf('sku-')===0 && item">{{item}}</el-tag>
  199. <el-button size="mini" @click="addLadder(sku.amount_kill_ladder)">添加</el-button>
  200. </div>
  201. <div v-for="(item,ladderIdx) in sku.amount_kill_ladder">
  202. <el-input :controls="false" :min="0" :step="1" v-model="item.min" class="smInput" placeholder="数量区间"></el-input>
  203. <el-input :controls="false" :min="0" :step="1" v-model="item.max" class="smInput" placeholder="数量区间"></el-input>
  204. <el-input :controls="false" :min="0" v-model="item.amount" class="smInput" placeholder="价格"></el-input>
  205. <el-button @click="delLadder(sku.amount_kill_ladder,ladderIdx)" size="mini" type="link">删除</el-button>
  206. </div>
  207. </div>
  208. </div>
  209. </div>
  210. </el-form-item>
  211. <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST">
  212. <div class="display-flex" style="margin: 0;align-items: flex-start;">
  213. <label class="control-label" style="width: 100px;
  214. padding-right: 20px;
  215. font-weight: 600;
  216. font-size: 14px;
  217. color: #606266;">{:__('Content')}:</label>
  218. <div style="flex: 1;">
  219. <textarea id="c-content" class="form-control editor" rows="5" name="row[content]" cols="50">{$row.content|default=''}</textarea>
  220. </div>
  221. </div>
  222. </form>
  223. <el-form-item label="规格介绍">
  224. <div>
  225. <div v-for="(size,sizeIdx) in form.sku" :key="sizeIdx">
  226. <div class="name">
  227. <el-tag v-for="(item,idx) in size" :key="idx" v-if="idx.indexOf('sku-')===0 && item">{{item}}</el-tag>
  228. <el-button size="mini" @click="addDetail(size.detail)">添加</el-button>
  229. </div>
  230. <div v-for="(item,idx) in size.detail" :key="idx">
  231. <el-input v-model="item.name" class="sInput" placeholder="参数名"></el-input>
  232. <el-input v-model="item.value" class="sInput" placeholder="参数值"></el-input>
  233. <el-button @click="delDetail(size.detail,idx)" size="mini" type="danger">删除</el-button>
  234. </div>
  235. </div>
  236. </div>
  237. </el-form-item>
  238. <el-form-item label="售后服务">
  239. <div>
  240. <div>
  241. <el-button size="mini" @click="addService()">添加</el-button>
  242. <div v-for="(size,idx) in form.service" :key="idx">
  243. <el-input v-model="size.name" class="sInput" placeholder="参数名"></el-input>
  244. <el-input v-model="size.value" class="sInput" placeholder="参数值"></el-input>
  245. <el-button @click="delService(idx)" size="mini" type="danger">删除</el-button>
  246. </div>
  247. </div>
  248. </div>
  249. </el-form-item>
  250. </el-form>
  251. <div style="text-align: center">
  252. <el-button type="primary" :loading="isLoad" @click="saveGoods">保存商品</el-button>
  253. </div>
  254. </div>
  255. <script>
  256. let category={$category|json_encode};
  257. let status={$status|json_encode};
  258. let row={$row|json_encode};
  259. </script>
  260. </body>
  261. </html>