shopAmend.vue 40 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368
  1. <template>
  2. <div class="components-container main-cont">
  3. <div style="display: inline-block;font-size:18px;margin-bottom: 15px;">
  4. <a href="#" @click="prev" style="text-decoration:none;font-size: 14px;">
  5. <icon-svg name="jiantou" style="width: 1.2em;height: 1.2em;position: relative;top: 0.3em;"></icon-svg>
  6. 返回
  7. </a>
  8. <span style="display: inline-block;margin: 0 15px;color: #D9D9D9;">|</span>
  9. <span>商品修改</span>
  10. </div>
  11. <div v-loading="tableDataLoading">
  12. <div style="position: relative;">
  13. <el-row>
  14. <el-col :span="8">
  15. <span>商品名称:</span>
  16. <el-input style="width: 200px;" class="margin15" placeholder="请输入商品标题" v-model="goodsName"
  17. autosize></el-input>
  18. </el-col>
  19. <el-col :span="8">
  20. <span>商品分类:</span>
  21. <el-select v-model="classifyId" class="margin15" placeholder="请选择商品类型" style="width:200px;"
  22. @change="handleChange1">
  23. <el-option v-for="(item,index) in typeDatas" :key="index" :label="item.classifyName"
  24. :value="item.classifyId">
  25. </el-option>
  26. </el-select>
  27. </el-col>
  28. <el-col :span="8">
  29. <span>商品原价:</span>
  30. <el-input style="width:200px;" class="margin15" placeholder="请输入商品原价" type="number" :min="0"
  31. :controls="false" v-model="originalMoney" autosize></el-input>
  32. </el-col>
  33. <el-col :span="8">
  34. <span>折扣价格:</span>
  35. <el-input style="width:200px;" class="margin15" placeholder="请输入折扣价格" type="number" :min="0"
  36. :controls="false" v-model="goodsMoney" autosize></el-input>
  37. </el-col>
  38. <el-col :span="8">
  39. <span>打包费:</span>
  40. <el-input style="width:200px;" class="margin15" placeholder="请输入打包费" type="number" :min="0"
  41. :controls="false" v-model="packMoney" autosize></el-input>
  42. </el-col>
  43. <el-col :span="8">
  44. <span>商品销量:</span>
  45. <el-input style="width:200px;" class="margin15" placeholder="请输入商品销量" type="number" :min="0"
  46. :controls="false" v-model="sales" autosize></el-input>
  47. </el-col>
  48. <!-- <el-col :span="8">
  49. <span>库存:</span>
  50. <el-input style="width:200px;" class="margin15" placeholder="请输入库存" type="number" :min="0" :controls="false"
  51. v-model="inventory" autosize></el-input>
  52. </el-col> -->
  53. <el-col :span="8">
  54. <span>商品状态:</span>
  55. <el-select v-model="status" class="margin15" placeholder="请选择商品状态" style="width:200px;">
  56. <el-option v-for="(item,index) in statusmain2" :key="item.index" :label="item.label"
  57. :value="item.value">
  58. </el-option>
  59. </el-select>
  60. </el-col>
  61. <el-col :span="8">
  62. <span>商品简介:</span>
  63. <el-input style="width:200px;" class="margin15" placeholder="请输入商品简介" type="text"
  64. :controls="false" v-model="goodsDescribe" autosize></el-input>
  65. </el-col>
  66. </el-row>
  67. <el-row>
  68. <el-col :span="24">
  69. <div style="margin-top: 10px;">
  70. <span>商品标签:</span>
  71. <span class="bqList" v-for="(item,index) in labels" :key="index">{{item}}
  72. <span class="delss">
  73. <i class="el-icon-delete" @click="dels1(index)"></i>
  74. </span>
  75. </span>
  76. <el-input v-model="bq" style="width:200px;" placeholder="请输入标签"
  77. onkeyup="this.value=this.value.replace(/[, ]/g,'')"></el-input>
  78. <!-- <button class="tj" @click="btnTj">添加标签</button> -->
  79. <el-button type="primary" class="tj" size="mini" icon="el-icon-edit" circle @click="btnTj">
  80. </el-button>
  81. </div>
  82. </el-col>
  83. </el-row>
  84. <div style="display: flex;align-items: center;margin: 2% 0;">
  85. <span style="display: inline-block;text-align: right;">商品封面图:</span>
  86. <div
  87. style=" width:148px;height:148px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
  88. <el-upload class="avatar-uploader" v-model="goodsCover"
  89. action="https://www.daweilinli.com/sqx_fast/alioss/upload" :show-file-list="false"
  90. :on-success="handleAvatarSuccess1">
  91. <img v-if="goodsCover" :src="goodsCover" class="avatar"
  92. style="width: 148px;height: 148px;" />
  93. <i v-else class="el-icon-plus avatar-uploader-icon"
  94. style="font-size: 28px;color: #8c939d"></i>
  95. </el-upload>
  96. </div>
  97. </div>
  98. <div style="display: flex;align-items: center;margin: 2% 0;flex-flow: wrap;">
  99. <span style="display: inline-block;text-align: right;">商品轮播图:</span>
  100. <div v-for="(item,index) of imgs">
  101. <div style="position: relative;margin: 5px;">
  102. <img :src="item" class="avatar" style="width:148px;height: 148px;" />
  103. <div @click="clear(index)" class="divhove">
  104. <i class="el-icon-delete" style="margin: 0;font-size: 18px;color: #fff;"></i>
  105. </div>
  106. </div>
  107. </div>
  108. <div>
  109. <el-upload action="https://www.daweilinli.com/sqx_fast/alioss/upload"
  110. list-type="picture-card" :on-success="handleUploadSuccess" :on-change="handleChange"
  111. :on-remove="handleRemove">
  112. <i class="el-icon-plus"></i>
  113. </el-upload>
  114. </div>
  115. </div>
  116. <div style="display: flex;align-items: center;margin: 2% 0;">
  117. <span style="display: inline-block;text-align: right;">商品规格:</span>
  118. <el-radio-group v-model="guige" @change="guigeChange">
  119. <el-radio :label="0">单规格</el-radio>
  120. <el-radio :label="1">多规格</el-radio>
  121. </el-radio-group>
  122. <div v-if="guigeshow" style="margin-left: 20px;">
  123. <el-select v-model="ruleId" placeholder="请选择商品规格" style="width:200px;"
  124. @change="selectTrigger(ruleId)">
  125. <el-option v-for="(item,index) in specifdata" :key="item.index" :label="item.ruleName"
  126. :value="item.id">
  127. </el-option>
  128. </el-select>
  129. </div>
  130. </div>
  131. <div v-if="ruleValue" style="margin-left: 70px;">
  132. <div class="ruleitem" v-for="(item,index) in ruleValue" :key="index">
  133. <div>{{item.value}} <span @click="deleterule(index)">
  134. <icon-svg name="schu" class="ruleicon"></icon-svg>
  135. </span></div>
  136. <div>
  137. <el-tag :key="tag" v-for="(tag,j) in item.detail.split(',')" closable
  138. :disable-transitions="false" @close="handleClose(tag,j,item)">
  139. {{tag}}
  140. </el-tag>
  141. <el-input class="input-new-tag" v-model="inputValues[index]" ref="saveTagInput" size="small"
  142. style="width:120px;" placeholder="请输入属性名"
  143. @keyup.enter.native="handleInputConfirm(index,item)">
  144. </el-input>
  145. <el-button class="button-new-tag" size="small" @click="handleInputConfirm(index,item)">添加
  146. </el-button>
  147. </div>
  148. </div>
  149. <div style="margin-top:20px;" v-if="ruleshow">
  150. <div v-if="isshow" class="btn_specif">
  151. <el-button type="primary" @click="btnToclick()">添加新规格</el-button>
  152. <el-button type="success" @click="create()">立即生成</el-button>
  153. </div>
  154. </div>
  155. <div style="margin-top:10px;">
  156. <div v-if="!isshow" style="margin-top: 20px;">
  157. <div style="display: inline-block;">
  158. <span style="width:80px;display: inline-block;text-align: right;">规格:</span>
  159. <el-input style="width:50%;" v-model="releobject.value" placeholder="例:颜色"></el-input>
  160. </div>
  161. <div style="display: inline-block;">
  162. <span style="width:80px;display: inline-block;text-align: right;">规格值:</span>
  163. <el-input style="width:50%;" v-model="releobject.detail" placeholder="例:黑色"></el-input>
  164. </div>
  165. <div style="display: inline-block;">
  166. <el-button type="primary" @click="speciTo()">确 定</el-button>
  167. <el-button @click="speciTotwo()">取 消</el-button>
  168. </div>
  169. </div>
  170. </div>
  171. </div>
  172. <div style="display: flex;margin-top: 20px;" v-if="valueshow">
  173. <span>商品属性:</span>
  174. <div class="property_table">
  175. <table style="width: 100%;">
  176. <tr style="display:flex;">
  177. <th style="width:120px;text-align: left;" v-for="item in headerData" v-if="item!='图片'">
  178. {{item}}</th>
  179. </tr>
  180. </table>
  181. <el-table :data="valueData">
  182. <el-table-column v-if="detailJson.length == 1" prop="value0" width="120">
  183. </el-table-column>
  184. <el-table-column v-if="detailJson.length == 2" prop="value0" width="120">
  185. </el-table-column>
  186. <el-table-column v-if="detailJson.length == 2" prop="value1" width="120">
  187. </el-table-column>
  188. <el-table-column v-if="detailJson.length == 3" prop="value0" width="120">
  189. </el-table-column>
  190. <el-table-column v-if="detailJson.length == 3" prop="value1" width="120">
  191. </el-table-column>
  192. <el-table-column v-if="detailJson.length == 3" prop="value2" width="120">
  193. </el-table-column>
  194. <el-table-column v-if="detailJson.length == 4" prop="value0" width="120">
  195. </el-table-column>
  196. <el-table-column v-if="detailJson.length == 4" prop="value1" width="120">
  197. </el-table-column>
  198. <el-table-column v-if="detailJson.length == 4" prop="value2" width="120">
  199. </el-table-column>
  200. <el-table-column v-if="detailJson.length == 4" prop="value3" width="120">
  201. </el-table-column>
  202. <el-table-column v-if="detailJson.length == 5" prop="value0" width="120">
  203. </el-table-column>
  204. <el-table-column v-if="detailJson.length == 5" prop="value1" width="120">
  205. </el-table-column>
  206. <el-table-column v-if="detailJson.length == 5" prop="value2" width="120">
  207. </el-table-column>
  208. <el-table-column v-if="detailJson.length == 5" prop="value3" width="120">
  209. </el-table-column>
  210. <el-table-column v-if="detailJson.length == 5" prop="value4" width="120">
  211. </el-table-column>
  212. <!-- <el-table-column prop="skuImg" width="100">
  213. <template slot-scope="scope">
  214. <div class="imgWrap"
  215. style=" width:60px;height:60px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 60px;">
  216. <el-upload style="width: 60px;height: 60px;" class="avatar-uploader" v-model="scope.row.skuImg"
  217. action="https://www.daweilinli.com/sqx_fast/alioss/upload" :show-file-list="false"
  218. :on-success="handleAvatarSuccess">
  219. <img v-if="scope.row.skuImg" :src="scope.row.skuImg" class="avatar"
  220. style="border-radius: 6px;width:60px;height: 60px;" @click="curRowIndex=scope.$index"/>
  221. <i v-else class="el-icon-plus avatar-uploader-icon" @click="curRowIndex=scope.$index"></i>
  222. </el-upload>
  223. </div>
  224. </template>
  225. </el-table-column> -->
  226. <el-table-column prop="skuOriginalPrice" width="120">
  227. <template slot-scope="scope">
  228. <div>
  229. <el-input type="text" v-model="scope.row.skuOriginalPrice"
  230. style="width:80px;font-size:14px;">
  231. </el-input>
  232. </div>
  233. </template>
  234. </el-table-column>
  235. <el-table-column prop="skuPrice" width="120">
  236. <template slot-scope="scope">
  237. <div>
  238. <el-input type="text" v-model="scope.row.skuPrice"
  239. style="width:80px;font-size:14px;">
  240. </el-input>
  241. </div>
  242. </template>
  243. </el-table-column>
  244. <!-- <el-table-column prop="sales" width="120">
  245. <template slot-scope="scope">
  246. <div>
  247. <el-input type="text" v-model="scope.row.sales" style="width:80px;font-size:14px;">
  248. </el-input>
  249. </div>
  250. </template>
  251. </el-table-column> -->
  252. <el-table-column width="120">
  253. <template slot-scope="scope">
  254. <el-button size="mini" type="danger"
  255. @click="deleter(scope.$index)">删除
  256. </el-button>
  257. </template>
  258. </el-table-column>
  259. </el-table>
  260. </div>
  261. </div>
  262. <div style="display: flex;margin-top: 20px;" v-if="valueshow1">
  263. <span>商品属性:</span>
  264. <div class="property_table">
  265. <table style="width: 100%;">
  266. <tr style="display:flex;">
  267. <th style="width:150px;text-align: left;" v-for="item in headerData2" v-if="item!='图片'">
  268. {{item}}</th>
  269. </tr>
  270. </table>
  271. <el-table :data="valueData2">
  272. <!-- <el-table-column prop="skuImg" width="150">
  273. <template slot-scope="scope">
  274. <div class="imgWrap"
  275. style=" width:60px;height:60px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 60px;">
  276. <el-upload style="width: 60px;height: 60px;" class="avatar-uploader" v-model="scope.row.skuImg"
  277. action="https://www.daweilinli.com/sqx_fast/alioss/upload" :show-file-list="false"
  278. :on-success="handleAvatarSuccess3">
  279. <img v-if="scope.row.skuImg" :src="scope.row.skuImg" class="avatar"
  280. style="border-radius: 6px;width:60px;height: 60px;" @click="curRowIndex=scope.$index"/>
  281. <i v-else class="el-icon-plus avatar-uploader-icon" @click="curRowIndex=scope.$index"></i>
  282. </el-upload>
  283. </div>
  284. </template>
  285. </el-table-column> -->
  286. <el-table-column prop="skuOriginalPrice" width="150">
  287. <template slot-scope="scope">
  288. <div>
  289. <el-input type="text" v-model="scope.row.skuOriginalPrice"
  290. style="width:80px;font-size:14px;">
  291. </el-input>
  292. </div>
  293. </template>
  294. </el-table-column>
  295. <el-table-column prop="skuPrice" width="150">
  296. <template slot-scope="scope">
  297. <div>
  298. <el-input type="text" v-model="scope.row.skuPrice"
  299. style="width:80px;font-size:14px;">
  300. </el-input>
  301. </div>
  302. </template>
  303. </el-table-column>
  304. <!-- <el-table-column prop="sales" width="150">
  305. <template slot-scope="scope">
  306. <div>
  307. <el-input type="text" v-model="scope.row.sales" style="width:80px;font-size:14px;">
  308. </el-input>
  309. </div>
  310. </template>
  311. </el-table-column> -->
  312. </el-table>
  313. </div>
  314. </div>
  315. </div>
  316. <div class="tinymce-content" style="display: flex;padding-top: 30px;">
  317. <div style="width:90px;">商品详情:</div>
  318. <!-- <quill-editor ref="myTextEditor" v-model="goodsSynopsis" :options="quillOption"
  319. style="padding-bottom: 50px;height: 300px;width: 72%;display: inline-table;margin-bottom: 60px;">
  320. </quill-editor> -->
  321. <div v-for="(item,index) of goodsParticularsPicture">
  322. <div style="position: relative;margin: 5px;">
  323. <img :src="item" class="avatar" style="width:148px;height: 148px;" />
  324. <div @click="clearXq(index)" class="divhove">
  325. <i class="el-icon-delete" style="margin: 0;font-size: 18px;color: #fff;"></i>
  326. </div>
  327. </div>
  328. </div>
  329. <div class="imgs" style="width: 50%;">
  330. <el-upload action="https://www.daweilinli.com/sqx_fast/alioss/upload"
  331. list-type="picture-card" :show-file-list="false" :on-success="handleUploadSuccessXq"
  332. :on-progress="onprogress1">
  333. <el-progress v-if="percentage1>0 && percentage1<100" type="circle" :percentage="percentage1">
  334. </el-progress>
  335. <i v-else class="el-icon-plus"></i>
  336. </el-upload>
  337. <el-dialog :visible.sync="dialogVisible">
  338. <img width="100%" :src="dialogImageUrl" alt="">
  339. </el-dialog>
  340. </div>
  341. </div>
  342. <div style="text-align: center;margin-top:30px;">
  343. <el-button style='margin:0 20px 0 0;' size="mini" type="primary" icon="document" @click="prev">返回上一页
  344. </el-button>
  345. <el-button size="mini" type="primary" icon="document" @click="artiReleass">保存
  346. </el-button>
  347. </div>
  348. </div>
  349. </div>
  350. </template>
  351. <script>
  352. import {
  353. quillEditor
  354. } from 'vue-quill-editor'
  355. import 'quill/dist/quill.core.css'
  356. import 'quill/dist/quill.snow.css'
  357. import 'quill/dist/quill.bubble.css'
  358. import quillConfig from './quill-config.js'
  359. export default {
  360. components: {
  361. quillEditor
  362. },
  363. name: 'Tinymce',
  364. data() {
  365. return {
  366. tableDataLoading: true,
  367. originalPrice: '',
  368. price: '',
  369. sales: '',
  370. imgs: [],
  371. value: [],
  372. potost: [],
  373. statusmain2: [{
  374. value: 0,
  375. label: '上架'
  376. },
  377. {
  378. value: 1,
  379. label: '下架'
  380. }
  381. ],
  382. valueshow: true,
  383. valueshow1: true,
  384. // 富文本内容
  385. descrition: '',
  386. // curRowIndex: null,
  387. // ···········································
  388. specif: '',
  389. goodsId: '',
  390. goodsName: '',
  391. classifyId: '',
  392. merchants: '',
  393. originalMoney: '',
  394. goodsMoney: '',
  395. packMoney: '',
  396. memberPrice: '',
  397. labels: [], //标签集合
  398. bq: '', //输入的标签名
  399. createTime: '',
  400. positage: 0,
  401. guige: 1,
  402. skuImg: '',
  403. ruleId: '',
  404. postagePrice: '',
  405. priceshow: false,
  406. isshow: true,
  407. commissionPrice: '',
  408. buyReason: '',
  409. ruleshow: false,
  410. propshow: false,
  411. guigeshow: true,
  412. propshow1: false,
  413. ruleValue: [],
  414. attr: [],
  415. attrs: [],
  416. headerData: [],
  417. valueData: [],
  418. detailJson: [],
  419. inputValues: {
  420. inputValue0: '',
  421. inputValue1: '',
  422. inputValue2: '',
  423. inputValue3: '',
  424. inputValue4: '',
  425. inputValue5: ''
  426. },
  427. sku: [],
  428. img: '',
  429. salesVolume: '',
  430. inventory: '',
  431. goodsSynopsis: '',
  432. status: 0,
  433. goodsPicture: '',
  434. typeDatas: [],
  435. value: [],
  436. isSelect: 1,
  437. homeGoods: 1,
  438. isRecommend: 1,
  439. isExpress: '',
  440. goodsCover: '',
  441. valueData2: [],
  442. headerData2: [],
  443. isExpressmain: [{
  444. value: 1,
  445. label: '普通商品需要发货'
  446. },
  447. {
  448. value: 2,
  449. label: '虚拟商品无需发货'
  450. },
  451. {
  452. value: 3,
  453. label: '商铺核销无需发货'
  454. }
  455. ],
  456. attrName: '',
  457. ruleName: '',
  458. attrValue: [],
  459. releobject: {
  460. value: '',
  461. detail: ''
  462. },
  463. brandId: '',
  464. brandIds: [],
  465. specifdata: [],
  466. dialogVisible: false,
  467. isShow: false,
  468. hideUpload: false,
  469. limit: 1,
  470. id: '',
  471. hasChange: false,
  472. hasInit: false,
  473. tinymceId: 'tinymceId',
  474. height: 435,
  475. toolbar: [],
  476. menubar: 'file edit insert view format table',
  477. languageTypeList: {
  478. 'en': 'en',
  479. 'zh': 'zh_CN'
  480. },
  481. artiCletypes: [],
  482. // 富文本内容
  483. quillOption: quillConfig,
  484. goodsDescribe: '',
  485. shopId: '',
  486. goodsParticularsPicture: [], //商品详情图
  487. percentage1: 0, //进度条
  488. dialogImageUrl: [],
  489. dialogVisible: false,
  490. }
  491. },
  492. methods: {
  493. // 返回上一级
  494. prev() {
  495. this.$router.back()
  496. },
  497. // 图标上传
  498. handleAvatarSuccess(file) {
  499. if (this.curRowIndex == 0) {
  500. this.skuImg = file.data;
  501. this.valueData[0].skuImg = this.skuImg
  502. return
  503. } else {
  504. this.skuImg = file.data;
  505. this.valueData[this.curRowIndex].skuImg = this.skuImg
  506. }
  507. },
  508. // 图标上传
  509. handleAvatarSuccess3(file) {
  510. this.skuImg = file.data;
  511. this.sku[0].skuImg = this.skuImg
  512. },
  513. // 是否包邮
  514. agreeChange(val) {
  515. if (val == 1) {
  516. this.priceshow = true
  517. this.postagePrice = ''
  518. } else {
  519. this.priceshow = false
  520. this.postagePrice = 0
  521. }
  522. },
  523. // 是否多规格
  524. guigeChange(val) {
  525. if (val == 0) {
  526. this.ruleId = 0
  527. this.valueshow = false
  528. this.valueshow1 = true
  529. this.guigeshow = false
  530. this.attr = []
  531. this.ruleshow = false
  532. this.ruleValue = []
  533. this.dansku()
  534. }
  535. if (val == 1) {
  536. this.ruleId = ''
  537. this.sku = []
  538. this.guigeshow = true
  539. this.valueshow1 = false
  540. }
  541. },
  542. // 获取单规格的sku
  543. dansku() {
  544. if (this.originalMoney == '') {
  545. this.originalMoney = '0'
  546. }
  547. if (this.goodsMoney == '') {
  548. this.goodsMoney = '0'
  549. }
  550. this.$http({
  551. url: this.$http.adornUrl('admin/goods/onlyFormatAttr'),
  552. method: 'get',
  553. params: this.$http.adornParams({
  554. 'originalPrice': this.originalMoney,
  555. 'price': this.goodsMoney,
  556. // 'coverImg': this.goodsCover,
  557. })
  558. }).then(({
  559. data
  560. }) => {
  561. let returnData = data.data;
  562. this.valueData2 = returnData.value
  563. this.headerData2 = returnData.header
  564. this.valueshow1 = true
  565. this.valueshow = false
  566. this.guigeshow = false
  567. // this.attr = returnData.value
  568. // this.sku = []
  569. this.sku = returnData.value
  570. })
  571. },
  572. // 回显规格
  573. echo(goodsId) {
  574. this.$http({
  575. url: this.$http.adornUrl('admin/goods/formatAttr'),
  576. method: 'get',
  577. params: this.$http.adornParams({
  578. 'goodsId': goodsId,
  579. })
  580. }).then(({
  581. data
  582. }) => {
  583. let returnData = data.data;
  584. this.valueData2 = returnData.value
  585. this.headerData2 = returnData.header
  586. this.valueshow1 = true
  587. this.valueshow = false
  588. this.guigeshow = false
  589. })
  590. },
  591. handleChange1(value) {
  592. this.classifyId = value;
  593. },
  594. // 删除
  595. clear(index) {
  596. this.imgs.splice(index, 1);
  597. },
  598. handleChange(file, fileList) {
  599. this.hideUpload = fileList.length >= this.limit;
  600. },
  601. handleRemove(file, fileList) {
  602. this.hideUpload = fileList.length >= this.limit;
  603. for (var i in this.potost) {
  604. if (this.potost[i] == file.response.data) {
  605. this.potost.splice(i, 1);
  606. }
  607. }
  608. },
  609. handleAvatarSuccess1(file, fileList) {
  610. this.goodsCover = file.data
  611. },
  612. //上传成功
  613. handleUploadSuccess(file, fileList) {
  614. console.log('file.data:', file.data, 'this.goodsPicture', this.goodsPicture)
  615. // this.potost += file.data + ','
  616. this.potost.push(file.data)
  617. },
  618. init() {
  619. this.tableDataLoading = true
  620. let goodsId = this.$route.query.goodsId
  621. this.$http({
  622. url: this.$http.adornUrl('admin/goods/selectGoodsById'),
  623. method: 'get',
  624. params: this.$http.adornParams({
  625. 'goodsId': goodsId
  626. })
  627. }).then(({
  628. data
  629. }) => {
  630. let returnData = data.data;
  631. if (returnData.goodsPicture) {
  632. let imgs = returnData.goodsPicture.split(',')
  633. this.imgs = imgs;
  634. console.log('this.imgs', this.imgs)
  635. }
  636. if (returnData.goodsLabel && returnData.goodsLabel != '') {
  637. let goodsLabel = returnData.goodsLabel.split(',')
  638. this.labels = goodsLabel
  639. }
  640. if (returnData.goodsParticularsPicture) {
  641. this.goodsParticularsPicture = returnData.goodsParticularsPicture.split(',')
  642. this.dialogImageUrl = this.goodsParticularsPicture
  643. }
  644. this.goodsName = returnData.goodsName
  645. this.goodsId = returnData.goodsId;
  646. // this.goodsPicture = goodsPicture;
  647. this.goodsCover = returnData.goodsCover
  648. this.goodsMoney = returnData.goodsMoney
  649. this.originalMoney = returnData.originalMoney;
  650. this.packMoney = returnData.packMoney
  651. this.salesVolume = returnData.salesVolume;
  652. this.sales = returnData.sales;
  653. this.inventory = returnData.inventory;
  654. this.classifyId = returnData.classifyId;
  655. this.goodsDescribe = returnData.goodsDescribe;
  656. this.goodsSynopsis = returnData.goodsSynopsis
  657. this.status = returnData.status;
  658. this.createTime = returnData.createTime;
  659. this.shopId = returnData.shopId
  660. // this.memberPrice = returnData.memberPrice;
  661. // this.descrition = returnData.descrition;
  662. // this.status = returnData.status;
  663. // this.createAt = returnData.createAt;
  664. // this.isSelect = returnData.isSelect;
  665. // this.homeGoods = returnData.homeGoods;
  666. // this.isRecommend = returnData.isRecommend;
  667. // this.isExpress = returnData.isExpress;
  668. // this.createAt = returnData.createAt;
  669. // this.brandId = returnData.brandId;
  670. // let label = JSON.parse(returnData.type.parentId)
  671. // let value = JSON.parse(returnData.type.id)
  672. // this.value = [label, value]
  673. this.postagePrice = returnData.postagePrice
  674. if (this.postagePrice > 0) {
  675. this.positage = 1
  676. this.priceshow = true
  677. } else {
  678. this.positage = 0
  679. this.priceshow = false
  680. }
  681. this.attr = returnData.attr
  682. if (this.attr.length > 0) {
  683. this.guige = 1
  684. this.Triggerselect()
  685. this.create2()
  686. this.attrName = returnData.attr[0].attrName
  687. this.attrValue = returnData.attr[0].attrValue
  688. this.ruleId = returnData.attr[0].ruleId
  689. this.goodsId = returnData.attr[0].goodsId
  690. this.id = returnData.attr[0].id
  691. } else {
  692. this.guige = 0
  693. this.echo(this.goodsId)
  694. this.ruleId = 0
  695. this.sku = returnData.sku
  696. }
  697. this.specifSelect()
  698. this.dataSelect()
  699. this.tableDataLoading = false
  700. })
  701. },
  702. // 修改商品
  703. artiReleass() {
  704. // let id = this.$route.query.id
  705. var potost = this.potost.toString()
  706. if (this.imgs == '') {
  707. this.img = this.potost
  708. // this.img = this.img.substr(0, this.img.length - 1)
  709. } else {
  710. if (this.potost.length != 0) {
  711. this.img = this.imgs + ',' + this.potost
  712. } else {
  713. this.img = this.imgs
  714. // this.img = this.img.substr(0, this.img.length - 1)
  715. }
  716. }
  717. console.log('this.imgs', this.imgs)
  718. console.log('this.img', this.img)
  719. console.log('this.potost:', this.potost)
  720. // let photost = this.goodsPicture.toString()
  721. let goodsLabel = this.labels.toString()
  722. if (this.goodsName == '') {
  723. this.$notify({
  724. title: '提示',
  725. duration: 1800,
  726. message: '请输入商品标题',
  727. type: 'warning'
  728. });
  729. return
  730. }
  731. if (this.classifyId === '') {
  732. this.$notify({
  733. title: '提示',
  734. duration: 1800,
  735. message: '请选择商品类型',
  736. type: 'warning'
  737. });
  738. return
  739. }
  740. if (this.originalMoney === '') {
  741. this.$notify({
  742. title: '提示',
  743. duration: 1800,
  744. message: '请输入商品原价',
  745. type: 'warning'
  746. });
  747. return
  748. }
  749. if (this.goodsMoney === '') {
  750. this.$notify({
  751. title: '提示',
  752. duration: 1800,
  753. message: '请输入折扣价格',
  754. type: 'warning'
  755. });
  756. return
  757. }
  758. if (this.packMoney === '') {
  759. this.$notify({
  760. title: '提示',
  761. duration: 1800,
  762. message: '请输入打包费',
  763. type: 'warning'
  764. });
  765. return
  766. }
  767. if (this.sales === '') {
  768. this.$notify({
  769. title: '提示',
  770. duration: 1800,
  771. message: '请输入商品销量',
  772. type: 'warning'
  773. });
  774. return
  775. }
  776. if (this.inventory === '') {
  777. this.$notify({
  778. title: '提示',
  779. duration: 1800,
  780. message: '请输入商品库存',
  781. type: 'warning'
  782. });
  783. return
  784. }
  785. if (this.goodsCover == '') {
  786. this.$notify({
  787. title: '提示',
  788. duration: 1800,
  789. message: '请选择商品封面图',
  790. type: 'warning'
  791. });
  792. return
  793. }
  794. if (this.img.length == 0) {
  795. this.$notify({
  796. title: '提示',
  797. duration: 1800,
  798. message: '请上传商品轮播图',
  799. type: 'warning'
  800. });
  801. return
  802. }
  803. if (this.goodsDescribe == '') {
  804. this.$notify({
  805. title: '提示',
  806. duration: 1800,
  807. message: '请输入商品详情',
  808. type: 'warning'
  809. });
  810. return
  811. }
  812. // if (this.sku.length == 0) {
  813. // this.$notify({
  814. // title: '提示',
  815. // duration: 1800,
  816. // message: '请选择商品规格',
  817. // type: 'warning'
  818. // });
  819. // return
  820. // }
  821. if (this.goodsParticularsPicture.length == 0) {
  822. this.$notify({
  823. title: '提示',
  824. duration: 1800,
  825. message: '请上传商品详情图',
  826. type: 'warning'
  827. });
  828. return
  829. }
  830. if (this.guige == 0) {
  831. if (this.valueData2.length > 0) {
  832. if (this.valueData2[0].skuOriginalPrice == null || this.valueData2[0].skuOriginalPrice === '') {
  833. this.$notify({
  834. title: '提示',
  835. duration: 1800,
  836. message: '商品属性原价不能为空',
  837. type: 'warning'
  838. });
  839. return
  840. }
  841. if (this.valueData2[0].skuPrice == null || this.valueData2[0].skuPrice === '') {
  842. this.$notify({
  843. title: '提示',
  844. duration: 1800,
  845. message: '商品属性售价不能为空',
  846. type: 'warning'
  847. });
  848. return
  849. }
  850. }
  851. this.sku = this.valueData2
  852. console.log('----', this.valueData2)
  853. } else {
  854. this.sku = this.valueData
  855. }
  856. this.tableDataLoading = true
  857. this.$http({
  858. url: this.$http.adornUrl('admin/goods/update'),
  859. method: 'post',
  860. data: this.$http.adornData({
  861. 'goodsId': this.goodsId,
  862. 'goodsPicture': this.img.toString(),
  863. 'goodsName': this.goodsName,
  864. 'classifyId': this.classifyId,
  865. 'originalMoney': this.originalMoney,
  866. 'goodsMoney': this.goodsMoney,
  867. 'packMoney': this.packMoney,
  868. 'memberPrice': this.memberPrice,
  869. 'salesVolume': this.salesVolume,
  870. 'sales': this.sales,
  871. 'inventory': this.inventory,
  872. 'goodsSynopsis': this.goodsSynopsis,
  873. 'status': this.status,
  874. 'goodsCover': this.goodsCover,
  875. 'goodsDescribe': this.goodsDescribe,
  876. 'postagePrice': this.postagePrice,
  877. 'sku': this.sku,
  878. 'attr': this.attr,
  879. 'goodsLabel': goodsLabel,
  880. 'createTime': this.createTime,
  881. 'goodsParticularsPicture': this.goodsParticularsPicture.toString()
  882. })
  883. }).then(({
  884. data
  885. }) => {
  886. if (data.code == 0) {
  887. this.tableDataLoading = false
  888. this.$message({
  889. message: '操作成功',
  890. type: 'success',
  891. duration: 1500,
  892. onClose: () => {
  893. // this.$router.push({
  894. // path: '/shopAdmin'
  895. // })
  896. this.$router.back()
  897. }
  898. })
  899. } else {
  900. this.tableDataLoading = false
  901. this.$message({
  902. message: data.msg,
  903. type: 'warning',
  904. duration: 1500,
  905. onClose: () => {
  906. }
  907. })
  908. }
  909. })
  910. },
  911. // 商品规格
  912. specifSelect() {
  913. this.shopId = this.$cookie.get('shopId')
  914. this.$http({
  915. url: this.$http.adornUrl('selfGoodsRule/list'),
  916. method: 'get',
  917. params: this.$http.adornParams({
  918. 'shopId': this.shopId
  919. })
  920. }).then(({
  921. data
  922. }) => {
  923. let returnData = data.data;
  924. this.specifdata = returnData;
  925. })
  926. },
  927. // 商品规格
  928. Triggerselect() {
  929. let goodsId = this.$route.query.goodsId
  930. this.$http({
  931. url: this.$http.adornUrl('admin/goods/findAttrValue'),
  932. method: 'get',
  933. params: this.$http.adornParams({
  934. 'goodsId': goodsId
  935. })
  936. }).then(({
  937. data
  938. }) => {
  939. let returnData = data.data;
  940. this.ruleValue = returnData.attrValue
  941. this.attrName = returnData.attrName
  942. this.ruleshow = true
  943. })
  944. },
  945. // 删除商品属性
  946. deleter(index) {
  947. let length = this.sku.length
  948. if (length == 1) {
  949. this.$message({
  950. title: '提示',
  951. type: 'error',
  952. duration: 1800,
  953. message: '属性至少要有一个',
  954. type: 'warning'
  955. });
  956. return
  957. } else {
  958. this.sku.splice(index, 1);
  959. }
  960. },
  961. // 查询商品规格
  962. selectTrigger(val) {
  963. this.$http({
  964. url: this.$http.adornUrl('selfGoodsRule/find'),
  965. method: 'get',
  966. params: this.$http.adornParams({
  967. 'id': val
  968. })
  969. }).then(({
  970. data
  971. }) => {
  972. let returnData = data.data;
  973. this.ruleValue = returnData.ruleValue
  974. this.attrName = returnData.ruleName
  975. this.ruleshow = true
  976. this.ruleId = returnData.id
  977. this.create()
  978. })
  979. },
  980. deleterule(index) {
  981. this.ruleValue.splice(index, 1);
  982. },
  983. btnToclick() {
  984. this.isshow = false
  985. this.releobject.value = ''
  986. this.releobject.detail = ''
  987. },
  988. speciTotwo() {
  989. this.isshow = true
  990. this.releobject.value = ''
  991. this.releobject.detail = ''
  992. },
  993. speciTo() {
  994. if (this.releobject.value == '') {
  995. this.$message({
  996. title: '提示',
  997. type: 'error',
  998. duration: 1800,
  999. message: '请输入规格',
  1000. type: 'warning'
  1001. });
  1002. return
  1003. }
  1004. if (this.releobject.detail == '') {
  1005. this.$message({
  1006. title: '提示',
  1007. duration: 1800,
  1008. type: 'error',
  1009. message: '请输入规格值',
  1010. type: 'warning'
  1011. });
  1012. return
  1013. }
  1014. this.ruleValue.push({
  1015. value: this.releobject.value,
  1016. detail: this.releobject.detail
  1017. });
  1018. this.isshow = true
  1019. this.releobject.value = ''
  1020. this.releobject.detail = ''
  1021. },
  1022. handleClose(tag, j, item) {
  1023. var detailarr = item.detail.split(',')
  1024. detailarr.splice(j, 1);
  1025. if (detailarr.length < 1) {
  1026. this.$message({
  1027. title: '提示',
  1028. type: 'error',
  1029. duration: 1800,
  1030. message: '规格值至少要有一个',
  1031. type: 'warning'
  1032. });
  1033. return
  1034. } else {
  1035. item.detail = String(detailarr)
  1036. }
  1037. },
  1038. handleInputConfirm(index, item) {
  1039. let inputValue = this.inputValues[index];
  1040. if (inputValue) {
  1041. var detailarr = item.detail.split(',')
  1042. detailarr.push(inputValue)
  1043. for (var i = 0; i < detailarr.length; i++) {
  1044. for (var j = 0; j < detailarr.length; j++) {
  1045. if (detailarr[i] == detailarr[j] && i != j) {
  1046. detailarr.splice(j, 1);
  1047. }
  1048. }
  1049. }
  1050. item.detail = String(detailarr)
  1051. this.inputValues[index] = '';
  1052. }
  1053. this.inputVisible = false;
  1054. },
  1055. // 初始化立即生成
  1056. create2() {
  1057. let goodsId = this.$route.query.goodsId
  1058. this.$http({
  1059. url: this.$http.adornUrl('admin/goods/formatAttr'),
  1060. method: 'get',
  1061. params: this.$http.adornParams({
  1062. 'goodsId': goodsId
  1063. })
  1064. }).then(({
  1065. data
  1066. }) => {
  1067. let returnData = data.data;
  1068. this.headerData = returnData.header
  1069. this.valueData = returnData.value
  1070. this.valueshow = true
  1071. this.valueshow1 = false
  1072. this.sku = returnData.value
  1073. this.detailJson = returnData.value[0].detailJson.split(',')
  1074. })
  1075. },
  1076. // 立即生成
  1077. create() {
  1078. this.attr = []
  1079. this.attr.push({
  1080. attrName: this.attrName,
  1081. attrValue: this.ruleValue,
  1082. ruleId: this.ruleId
  1083. })
  1084. if (this.originalMoney == '') {
  1085. this.originalMoney = '0'
  1086. }
  1087. if (this.goodsMoney == '') {
  1088. this.goodsMoney = '0'
  1089. }
  1090. if (this.memberPrice == '') {
  1091. this.memberPrice = '0'
  1092. }
  1093. this.$http({
  1094. url: this.$http.adornUrl(
  1095. // `admin/goods/isFormatAttr?coverImg=${this.goodsCover}&originalPrice=${this.originalMoney}&price=${this.goodsMoney}`
  1096. `admin/goods/isFormatAttr?originalPrice=${this.originalMoney}&price=${this.goodsMoney}`
  1097. ),
  1098. method: 'post',
  1099. data: this.attr[0]
  1100. }).then(({
  1101. data
  1102. }) => {
  1103. let returnData = data.data;
  1104. this.headerData = returnData.header
  1105. this.valueData = returnData.value
  1106. this.valueshow = true
  1107. this.valueshow1 = false
  1108. this.sku = returnData.value
  1109. this.detailJson = returnData.value[0].detailJson.split(',')
  1110. })
  1111. },
  1112. // 获取品牌
  1113. brandSelect() {
  1114. let page = this.page - 1
  1115. this.tableDataLoading = true
  1116. this.$http({
  1117. url: this.$http.adornUrl('selfGoodsBrand/result'),
  1118. method: 'get',
  1119. params: this.$http.adornParams({})
  1120. }).then(({
  1121. data
  1122. }) => {
  1123. this.tableDataLoading = false
  1124. let returnData = data.data;
  1125. this.brandIds = returnData
  1126. })
  1127. },
  1128. // 商品分类
  1129. dataSelect() {
  1130. this.tableDataLoading = true
  1131. this.$http({
  1132. url: this.$http.adornUrl('admin/goods/selectAllClassify'),
  1133. method: 'get',
  1134. params: this.$http.adornParams({
  1135. 'shopId': this.shopId
  1136. })
  1137. }).then(({
  1138. data
  1139. }) => {
  1140. this.tableDataLoading = false
  1141. let returnData = data.data;
  1142. this.typeDatas = returnData
  1143. })
  1144. },
  1145. // 添加标签
  1146. btnTj() {
  1147. if (this.bq == '' || this.bq == ' ') {
  1148. this.$notify({
  1149. title: '提示',
  1150. duration: 1800,
  1151. message: '请输入标签名',
  1152. type: 'warning'
  1153. });
  1154. return
  1155. } else {
  1156. console.log('this.bq', this.bq)
  1157. this.labels.push(this.bq)
  1158. this.bq = ''
  1159. }
  1160. },
  1161. // 删除标签
  1162. dels1(index) {
  1163. this.labels.splice(index, 1);
  1164. console.log(this.labels)
  1165. },
  1166. // 删除详情图
  1167. clearXq(index) {
  1168. this.goodsParticularsPicture.splice(index, 1);
  1169. },
  1170. //上传成功
  1171. handleUploadSuccessXq(file, fileList) {
  1172. this.goodsParticularsPicture.push(file.data)
  1173. },
  1174. onprogress1(event, file, fileList) {
  1175. console.log('详情图上传进度', parseInt(event.percent))
  1176. this.percentage1 = parseInt(event.percent)
  1177. },
  1178. },
  1179. mounted() {
  1180. this.init()
  1181. this.specifSelect()
  1182. window.scrollTo(0, 0)
  1183. // this.brandSelect()
  1184. },
  1185. watch: {
  1186. '$route': 'init'
  1187. }
  1188. }
  1189. </script>
  1190. <style scoped="scoped">
  1191. .main-cont {
  1192. max-width: 100%;
  1193. min-width: 80%;
  1194. padding-bottom: 5%;
  1195. background-color: #fff;
  1196. }
  1197. .tinymce-container {
  1198. position: relative;
  1199. line-height: normal;
  1200. }
  1201. .tinymce-container>>>.mce-fullscreen {
  1202. z-index: 10000;
  1203. }
  1204. .tinymce-textarea {
  1205. visibility: hidden;
  1206. z-index: -1;
  1207. }
  1208. .hide .el-upload--picture-card {
  1209. display: none;
  1210. }
  1211. .margin15 {
  1212. margin-right: 15px;
  1213. margin-top: 10px;
  1214. }
  1215. .divhove {
  1216. position: absolute;
  1217. width: 100%;
  1218. height: 100%;
  1219. left: 0;
  1220. top: 0;
  1221. opacity: 0;
  1222. cursor: default;
  1223. text-align: center;
  1224. padding-top: 50%;
  1225. border-radius: 6px;
  1226. background-color: rgba(0, 0, 0, .5);
  1227. -webkit-transition: opacity .3s;
  1228. transition: opacity .3s;
  1229. }
  1230. .el-tag--medium {
  1231. margin-right: 10px;
  1232. }
  1233. .divhove:hover {
  1234. opacity: 0.8;
  1235. }
  1236. .ruleitem {
  1237. padding-left: 10px;
  1238. margin-top: 15px;
  1239. }
  1240. .ruleitem .ruleicon {
  1241. position: relative;
  1242. top: 3px;
  1243. left: 2px;
  1244. width: 1.2em;
  1245. height: 1.2em;
  1246. }
  1247. .el-tag+.el-tag {
  1248. margin-left: 10px;
  1249. }
  1250. .button-new-tag {
  1251. height: 32px;
  1252. line-height: 31px;
  1253. padding-top: 0;
  1254. padding-bottom: 0;
  1255. border-radius: 4px;
  1256. border-top-left-radius: 0;
  1257. border-bottom-left-radius: 0;
  1258. background-color: #f5f7fa;
  1259. position: relative;
  1260. left: -5px;
  1261. border-color: #dcdfe6;
  1262. border: 1px solid #dcdfe6;
  1263. }
  1264. .input-new-tag {
  1265. width: 90px;
  1266. margin-left: 10px;
  1267. vertical-align: bottom;
  1268. }
  1269. .el-input--small .el-input__inner {
  1270. border-top-right-radius: 0;
  1271. border-bottom-right-radius: 0;
  1272. }
  1273. .el-table--enable-row-transition .el-table__body td {
  1274. text-align: center;
  1275. }
  1276. .imgWrap .avatar-uploader .el-upload {
  1277. width: 60px;
  1278. }
  1279. .el-table .cell {
  1280. text-align: center !important;
  1281. }
  1282. .el-tag--medium {
  1283. margin-right: 10px;
  1284. }
  1285. .bqList {
  1286. padding: 4px 14px;
  1287. margin: 4px;
  1288. border: 1px solid #efefef;
  1289. font-size: 12px;
  1290. color: #999;
  1291. border-radius: 4px;
  1292. margin-right: 15px;
  1293. }
  1294. .delss {
  1295. display: none;
  1296. position: relative;
  1297. }
  1298. .delss .el-icon-delete {
  1299. position: absolute;
  1300. top: 0;
  1301. }
  1302. .bqList:hover .delss {
  1303. display: initial;
  1304. opacity: 0.5;
  1305. }
  1306. .tj {
  1307. padding: 6px !important;
  1308. margin: 4px;
  1309. font-size: 12px;
  1310. border: 1px solid #ccc;
  1311. border-radius: 4px;
  1312. }
  1313. </style>