shopConfig.vue 39 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095
  1. <template>
  2. <el-tabs v-model = "activeName" @tab-click = "handleClick">
  3. <el-tab-pane label = "首页轮播" name = "first">
  4. <div style = "float: right;margin-right:2%;">
  5. <el-button style = "margin: 10px 0;" :disabled = "!isAuth('shopConfig:add')" size = "mini" type = "primary" icon = "document"
  6. @click = "advertNotice">添加轮播</el-button>
  7. </div>
  8. <el-table v-loading = "tableDataLoading" :data = "advertData">
  9. <el-table-column fixed prop = "id" label = "编号" width = "80">
  10. </el-table-column>
  11. <el-table-column prop = "imgUrl" label = "图片">
  12. <template slot-scope = "scope">
  13. <img :src = "scope.row.imgUrl" alt = "" width = "170px" height = "60">
  14. </template>
  15. </el-table-column>
  16. <el-table-column prop = "linkUrl" label = "跳转链接">
  17. </el-table-column>
  18. <el-table-column prop = "createAt" label = "创建时间">
  19. </el-table-column>
  20. <el-table-column fixed = "right" label = "操作" width = "150">
  21. <template slot-scope = "scope">
  22. <el-button size = "mini" type = "primary" :disabled = "!isAuth('shopConfig:update')"
  23. @click = "advertUpdates(scope.$index, scope.row)">修改
  24. </el-button>
  25. <el-button size = "mini" type = "danger" :disabled = "!isAuth('shopConfig:delete')" @click = "advertdeletes(scope.row)">删除
  26. </el-button>
  27. </template>
  28. </el-table-column>
  29. </el-table>
  30. <!-- 添加广告 -->
  31. <el-dialog title = "添加轮播" :visible.sync = "dialogFormVisible2" center>
  32. <div style = "margin-bottom: 10px;display: flex;">
  33. <span style = "width: 200px;display: inline-block;text-align: right;">图片地址:</span>
  34. <div style = " width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
  35. <el-upload class = "avatar-uploader" v-model = "imgUrl" action = "https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
  36. :show-file-list = "false" :on-success = "handleAvatarSuccess1">
  37. <img v-if = "imgUrl" :src = "imgUrl" class = "avatar" style = "border-radius: 6px;width:148px;height: 148px;"/>
  38. <i v-else class = "el-icon-plus avatar-uploader-icon"></i>
  39. </el-upload>
  40. </div>
  41. </div>
  42. <div style = "margin-bottom: 10px;">
  43. <span style = "width: 200px;display: inline-block;text-align: right;">跳转地址:</span>
  44. <el-input style = "width:50%;" v-model = "linkUrl" placeholder = "请输入跳转地址"></el-input>
  45. </div>
  46. <div slot = "footer" class = "dialog-footer">
  47. <el-button @click = "dialogFormVisible2 = false">取 消</el-button>
  48. <el-button type = "primary" @click = "advertNoticeTo()">确 定</el-button>
  49. </div>
  50. </el-dialog>
  51. <!-- 修改广告 -->
  52. <el-dialog title = "修改轮播" :visible.sync = "dialogFormVisible" center>
  53. <el-form :model = "form2">
  54. <el-form-item label = "图片地址:" :label-width = "formLabelWidth">
  55. <div style = " width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height:148px;">
  56. <el-upload class = "avatar-uploader" v-model = "imgUrl" action = "https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
  57. :show-file-list = "false" :on-success = "handleAvatarSuccess3">
  58. <img v-if = "form2.imgUrl" :src = "form2.imgUrl" class = "avatar" style = "border-radius: 6px;width:148px;height: 148px;"/>
  59. <i v-else class = "el-icon-plus avatar-uploader-icon"></i>
  60. </el-upload>
  61. </div>
  62. </el-form-item>
  63. <el-form-item label = "跳转地址:" :label-width = "formLabelWidth">
  64. <el-input v-model = "form2.linkUrl" style = "width:65%;"></el-input>
  65. </el-form-item>
  66. </el-form>
  67. <div slot = "footer" class = "dialog-footer">
  68. <el-button @click = "dialogFormVisible = false">取 消</el-button>
  69. <el-button type = "primary" @click = "amendadvertTo()">确 定</el-button>
  70. </div>
  71. </el-dialog>
  72. </el-tab-pane>
  73. <el-tab-pane label = "首页导航" name = "second">
  74. <div style = "float: right;margin-right:2%;">
  75. <el-button style = "margin: 10px 0;" :disabled = "!isAuth('shopConfig:add')" size = "mini" type = "primary" icon = "document"
  76. @click = "addNavigation">添加导航</el-button>
  77. </div>
  78. <el-table v-loading = "tableDataLoading" :data = "homeData">
  79. <el-table-column fixed prop = "id" label = "编号" width = "80">
  80. </el-table-column>
  81. <el-table-column prop = "title" label = "名称">
  82. </el-table-column>
  83. <el-table-column prop = "url" label = "路由">
  84. </el-table-column>
  85. <el-table-column prop = "content" label = "图片">
  86. <template slot-scope = "scope">
  87. <img :src = "scope.row.image_url" alt = "" width = "40" height = "40">
  88. </template>
  89. </el-table-column>
  90. <el-table-column prop = "createAt" label = "创建时间" width = "160">
  91. </el-table-column>
  92. <el-table-column label = "操作" width = "150">
  93. <template slot-scope = "scope">
  94. <el-button size = "mini" type = "primary" :disabled = "!isAuth('shopConfig:update')" @click = "compile(scope.$index, scope.row)">编辑
  95. </el-button>
  96. <el-button size = "mini" type = "danger" :disabled = "!isAuth('shopConfig:delete')" @click = "navdeletes(scope.row)">删除
  97. </el-button>
  98. </template>
  99. </el-table-column>
  100. </el-table>
  101. </div>
  102. <!-- 添加导航弹框 -->
  103. <el-dialog title = "添加导航" :visible.sync = "dialogFormVisible7" center>
  104. <div style = "margin-bottom: 10px;">
  105. <span style = "width: 200px;display: inline-block;text-align: right;">标题:</span>
  106. <el-input style = "width:50%;" v-model = "title" placeholder = "请输入导航标题"></el-input>
  107. </div>
  108. <div style = "margin-bottom: 10px;">
  109. <span style = "width: 200px;display: inline-block;text-align: right;">路由:</span>
  110. <el-input style = "width: 50%;" v-model = "url" placeholder = "请输入导航路由"></el-input>
  111. </div>
  112. <div style = "margin-bottom: 10px;">
  113. <span style = "width: 200px;display: inline-block;text-align: right;">分类:</span>
  114. <el-select v-model = "state" placeholder = "请选择类型" style = "width:50%;">
  115. <el-option v-for = "item in states" :key = "item.value" :label = "item.label" :value = "item.value">
  116. </el-option>
  117. </el-select>
  118. </div>
  119. <div style = "display: flex;">
  120. <span style = "width: 200px;display: inline-block;text-align: right;">图片:</span>
  121. <div style = " width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
  122. <el-upload class = "avatar-uploader" v-model = "image_url" action = "https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
  123. :show-file-list = "false" :on-success = "handleAvatarSuccess4">
  124. <img v-if = "image_url" :src = "image_url" class = "avatar" style = "border-radius: 6px;width: 86px;height: 86px;"/>
  125. <i v-else class = "el-icon-plus avatar-uploader-icon"></i>
  126. </el-upload>
  127. </div>
  128. </div>
  129. <div slot = "footer" class = "dialog-footer">
  130. <el-button @click = "dialogFormVisible7 = false">取 消</el-button>
  131. <el-button type = "primary" @click = "NagNoticeTo()">确 定</el-button>
  132. </div>
  133. </el-dialog>
  134. <!-- 首页编辑 -->
  135. <el-dialog title = "修改" :visible.sync = "dialogFormVisible1" center>
  136. <el-form :model = "form1">
  137. <el-form-item label = "标题:" :label-width = "formLabelWidth">
  138. <el-input v-model = "form1.title" style = "width:65%;"></el-input>
  139. </el-form-item>
  140. <el-form-item label = "路由:" :label-width = "formLabelWidth">
  141. <el-input v-model = "form1.url" style = "width:65%;"></el-input>
  142. </el-form-item>
  143. <el-form-item label = "分类:" :label-width = "formLabelWidth">
  144. <el-select v-model = "form1.state" placeholder = "请选择类型" style = "width:65%;">
  145. <el-option v-for = "item in states" :key = "item.value" :label = "item.label" :value = "item.value">
  146. </el-option>
  147. </el-select>
  148. </el-form-item>
  149. <el-form-item label = "图片:" :label-width = "formLabelWidth">
  150. <div style = " width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
  151. <el-upload class = "avatar-uploader" v-model = "image_url" action = "https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
  152. :show-file-list = "false" :on-success = "handleAvatarSuccess2">
  153. <img v-if = "form1.image_url" :src = "form1.image_url" class = "avatar" style = "border-radius: 6px;width: 86px;height: 86px;"/>
  154. <i v-else class = "el-icon-plus avatar-uploader-icon"></i>
  155. </el-upload>
  156. </div>
  157. </el-form-item>
  158. </el-form>
  159. <div slot = "footer" class = "dialog-footer">
  160. <el-button @click = "dialogFormVisible1 = false">取 消</el-button>
  161. <el-button type = "primary" @click = "compileNoticeTo()">确 定</el-button>
  162. </div>
  163. </el-dialog>
  164. </el-tab-pane>
  165. <el-tab-pane label = "精选商品" name = "fifth">
  166. <div style = "float: right;margin-right:2%;">
  167. <el-button style = "margin: 10px 0;" :disabled = "!isAuth('shopConfig:add')" size = "mini" type = "primary" icon = "document"
  168. @click = "choiaddNotice()">添加商品</el-button>
  169. <el-button style = "margin: 10px 0;" :disabled = "!isAuth('shopConfig:delete') || checkBoxData.length <= 0 " size = "mini"
  170. type = "danger" icon = "document" @click = "choideletes()">批量删除</el-button>
  171. </div>
  172. <el-table v-loading = "tableDataLoading" @selection-change = "changeFun" :data = "choicenData.content">
  173. <el-table-column type = "selection" fixed>
  174. </el-table-column>
  175. <el-table-column fixed prop = "id" label = "编号" width = "80">
  176. </el-table-column>
  177. <el-table-column fixed prop = "coverImg" label = "商品图片">
  178. <template slot-scope = "scope">
  179. <img :src = "scope.row.coverImg" alt = "" width = "60" height = "60">
  180. </template>
  181. </el-table-column>
  182. <el-table-column prop = "title" label = "商品标题" width = "200">
  183. </el-table-column>
  184. <el-table-column prop = "originalPrice" label = "商品原价">
  185. <template slot-scope = "scope">
  186. <span style = "color: #f56c6c;">{{ scope.row.originalPrice | numFilter }}</span>
  187. </template>
  188. </el-table-column>
  189. <el-table-column prop = "price" label = "商品价格">
  190. <template slot-scope = "scope">
  191. <span style = "color: #f56c6c;">{{ scope.row.price | numFilter }}</span>
  192. </template>
  193. </el-table-column>
  194. <el-table-column prop = "memberPrice" label = "会员价格">
  195. <template slot-scope = "scope">
  196. <span style = "color: #f56c6c;">{{ scope.row.memberPrice | numFilter }}</span>
  197. </template>
  198. </el-table-column>
  199. <el-table-column prop = "commissionPrice" label = "佣金">
  200. </el-table-column>
  201. <el-table-column prop = "sales" label = "商品销量">
  202. </el-table-column>
  203. <el-table-column prop = "createAt" label = "创建时间" width = "160">
  204. </el-table-column>
  205. <el-table-column fixed = "right" label = "操作" prop = "id" width = "120">
  206. <template slot-scope = "scope">
  207. <el-button size = "mini" type = "danger" :disabled = "!isAuth('shopConfig:delete')" @click = "choidelete(scope.row)">删除
  208. </el-button>
  209. </template>
  210. </el-table-column>
  211. </el-table>
  212. <div style = "text-align: center;margin-top: 10px;float:right">
  213. <el-pagination @size-change = "handleSizeChange3" @current-change = "handleCurrentChange3" :page-sizes = "[10, 20, 30, 50, 100]"
  214. :page-size = "size" :current-page = "page" layout = "total,sizes, prev, pager, next,jumper"
  215. :total = "choicenData.totalElements">
  216. </el-pagination>
  217. </div>
  218. <!-- 添加弹框 -->
  219. <el-dialog title = "添加商品" customClass = "customWidth" :visible.sync = "dialogFormVisible5" center>
  220. <div style = "position: relative;display: inline-block;float: right;">
  221. <el-input style = "width: 200px;" @keydown.enter.native = "shousuo" placeholder = "根据标题搜索商品" v-model = "title"></el-input>
  222. <span @click = "shousuo" style = "position: absolute;right: 0;top:8px;">
  223. <icon-svg name = "shousuo" class = "site-sidebar__menu-icon"></icon-svg></span>
  224. </div>
  225. <el-table v-loading = "tableDataLoading" height = "450" :data = "choicenData2.content">
  226. <el-table-column fixed prop = "id" label = "编号" width = "80">
  227. </el-table-column>
  228. <el-table-column fixed prop = "coverImg" label = "商品图片">
  229. <template slot-scope = "scope">
  230. <img :src = "scope.row.coverImg" alt = "" width = "60" height = "60">
  231. </template>
  232. </el-table-column>
  233. <el-table-column prop = "type.name" label = "商品类型">
  234. </el-table-column>
  235. <el-table-column prop = "title" label = "商品标题" width = "200">
  236. </el-table-column>
  237. <el-table-column prop = "originalPrice" label = "商品原价">
  238. <template slot-scope = "scope">
  239. <span style = "color: #f56c6c;">{{ scope.row.originalPrice | numFilter }}</span>
  240. </template>
  241. </el-table-column>
  242. <el-table-column prop = "price" label = "商品价格">
  243. <template slot-scope = "scope">
  244. <span style = "color: #f56c6c;">{{ scope.row.price | numFilter }}</span>
  245. </template>
  246. </el-table-column>
  247. <el-table-column prop = "memberPrice" label = "会员价格">
  248. <template slot-scope = "scope">
  249. <span style = "color: #f56c6c;">{{ scope.row.memberPrice | numFilter }}</span>
  250. </template>
  251. </el-table-column>
  252. <el-table-column prop = "commissionPrice" label = "佣金">
  253. </el-table-column>
  254. <el-table-column prop = "sales" label = "商品销量">
  255. </el-table-column>
  256. <el-table-column prop = "createAt" label = "创建时间" width = "160">
  257. </el-table-column>
  258. <el-table-column fixed = "right" label = "操作" prop = "id">
  259. <template slot-scope = "scope">
  260. <el-button size = "mini" type = "primary" @click = "releasNoticeTo(scope.row)">添加
  261. </el-button>
  262. </template>
  263. </el-table-column>
  264. </el-table>
  265. <div style = "text-align: center;margin-top: 10px;">
  266. <el-pagination @size-change = "handleSizeChange4" @current-change = "handleCurrentChange4" :page-sizes = "[10, 20, 30, 50, 100]"
  267. :page-size = "size" :current-page = "page" layout = "total,sizes, prev, pager, next,jumper"
  268. :total = "choicenData2.totalElements">
  269. </el-pagination>
  270. </div>
  271. </el-dialog>
  272. </el-tab-pane>
  273. <el-tab-pane label = "每日推荐" name = "sixth">
  274. <div style = "float: right;margin-right:2%;">
  275. <el-button style = "margin: 10px 0;" :disabled = "!isAuth('shopConfig:add')" size = "mini" type = "primary" icon = "document"
  276. @click = "recomNotice()">添加商品</el-button>
  277. <el-button style = "margin: 10px 0;" :disabled = "!isAuth('shopConfig:delete') || checkBoxData.length <= 0 " size = "mini"
  278. type = "danger" icon = "document" @click = "recomdeletes()">批量删除</el-button>
  279. </div>
  280. <el-table v-loading = "tableDataLoading" @selection-change = "changeFun" :data = "recomData.content">
  281. <el-table-column type = "selection" fixed>
  282. </el-table-column>
  283. <el-table-column fixed prop = "id" label = "编号" width = "80">
  284. </el-table-column>
  285. <el-table-column fixed prop = "coverImg" label = "商品图片">
  286. <template slot-scope = "scope">
  287. <img :src = "scope.row.coverImg" alt = "" width = "60" height = "60">
  288. </template>
  289. </el-table-column>
  290. <el-table-column prop = "title" label = "商品标题" width = "200">
  291. </el-table-column>
  292. <el-table-column prop = "originalPrice" label = "商品原价">
  293. <template slot-scope = "scope">
  294. <span style = "color: #f56c6c;">{{ scope.row.originalPrice | numFilter }}</span>
  295. </template>
  296. </el-table-column>
  297. <el-table-column prop = "price" label = "商品价格">
  298. <template slot-scope = "scope">
  299. <span style = "color: #f56c6c;">{{ scope.row.price | numFilter }}</span>
  300. </template>
  301. </el-table-column>
  302. <el-table-column prop = "memberPrice" label = "会员价格">
  303. <template slot-scope = "scope">
  304. <span style = "color: #f56c6c;">{{ scope.row.memberPrice | numFilter }}</span>
  305. </template>
  306. </el-table-column>
  307. <el-table-column prop = "commissionPrice" label = "佣金">
  308. </el-table-column>
  309. <el-table-column prop = "sales" label = "商品销量">
  310. </el-table-column>
  311. <el-table-column prop = "createAt" label = "创建时间" width = "160">
  312. </el-table-column>
  313. <el-table-column fixed = "right" label = "操作" prop = "id" width = "120">
  314. <template slot-scope = "scope">
  315. <el-button size = "mini" type = "danger" :disabled = "!isAuth('shopConfig:delete')" @click = "recomdelete(scope.row)">删除
  316. </el-button>
  317. </template>
  318. </el-table-column>
  319. </el-table>
  320. <div style = "text-align: center;margin-top: 10px;float:right">
  321. <el-pagination @size-change = "handleSizeChange5" @current-change = "handleCurrentChange5" :page-sizes = "[10, 20, 30, 50, 100]"
  322. :page-size = "size" :current-page = "page" layout = "total,sizes, prev, pager, next,jumper"
  323. :total = "recomData.totalElements">
  324. </el-pagination>
  325. </div>
  326. <!-- 添加弹框 -->
  327. <el-dialog title = "添加" customClass = "customWidth" :visible.sync = "dialogFormVisible6" center>
  328. <div style = "position: relative;display: inline-block;float: right;">
  329. <el-input style = "width: 200px;" @keydown.enter.native = "shousuo" placeholder = "根据标题搜索商品" v-model = "title"></el-input>
  330. <span @click = "shousuo" style = "position: absolute;right: 0;top:8px;"><icon-svg name = "shousuo"
  331. class = "site-sidebar__menu-icon"></icon-svg></span>
  332. </div>
  333. <el-table v-loading = "tableDataLoading" height = "450" :data = "choicenData2.content">
  334. <el-table-column fixed prop = "id" label = "编号" width = "80">
  335. </el-table-column>
  336. <el-table-column fixed prop = "coverImg" label = "商品图片">
  337. <template slot-scope = "scope">
  338. <img :src = "scope.row.coverImg" alt = "" width = "60" height = "60">
  339. </template>
  340. </el-table-column>
  341. <el-table-column prop = "type.name" label = "商品类型">
  342. </el-table-column>
  343. <el-table-column prop = "title" label = "商品标题" width = "200">
  344. </el-table-column>
  345. <el-table-column prop = "originalPrice" label = "商品原价">
  346. <template slot-scope = "scope">
  347. <span style = "color: #f56c6c;">{{ scope.row.originalPrice | numFilter }}</span>
  348. </template>
  349. </el-table-column>
  350. <el-table-column prop = "price" label = "商品价格">
  351. <template slot-scope = "scope">
  352. <span style = "color: #f56c6c;">{{ scope.row.price | numFilter }}</span>
  353. </template>
  354. </el-table-column>
  355. <el-table-column prop = "memberPrice" label = "会员价格">
  356. <template slot-scope = "scope">
  357. <span style = "color: #f56c6c;">{{ scope.row.memberPrice | numFilter }}</span>
  358. </template>
  359. </el-table-column>
  360. <el-table-column prop = "commissionPrice" label = "佣金">
  361. </el-table-column>
  362. <el-table-column prop = "sales" label = "商品销量">
  363. </el-table-column>
  364. <el-table-column prop = "createAt" label = "创建时间" width = "160">
  365. </el-table-column>
  366. <el-table-column fixed = "right" label = "操作" prop = "id">
  367. <template slot-scope = "scope">
  368. <el-button size = "mini" type = "primary" @click = "recomNoticeTo(scope.row)">添加
  369. </el-button>
  370. </template>
  371. </el-table-column>
  372. </el-table>
  373. <div style = "text-align: center;margin-top: 10px;">
  374. <el-pagination @size-change = "handleSizeChange4" @current-change = "handleCurrentChange4" :page-sizes = "[10, 20, 30, 50, 100]"
  375. :page-size = "size" :current-page = "page" layout = "total,sizes, prev, pager, next,jumper"
  376. :total = "choicenData2.totalElements">
  377. </el-pagination>
  378. </div>
  379. </el-dialog>
  380. </el-tab-pane>
  381. </el-tabs>
  382. </template>
  383. <script>
  384. export default {
  385. data () {
  386. return {
  387. size: 10,
  388. page: 1,
  389. id: '',
  390. img: '',
  391. title: '',
  392. type: '',
  393. sort: 'createAt',
  394. readonly: true,
  395. merchants: '',
  396. price: '',
  397. memberPrice: '',
  398. sales: 0,
  399. status: 0,
  400. status2: '',
  401. descrition: '',
  402. totalnum: 0,
  403. nav: '',
  404. imgUrl: '',
  405. linkUrl: '',
  406. image_url: '',
  407. url: '',
  408. checkBoxData: [],//多选框选择的值
  409. choicenData: [],
  410. choicenData2: [],
  411. recomData: [],
  412. recomData2: [],
  413. state: 1,
  414. states: [
  415. {
  416. value: '1',
  417. label: '首页导航'
  418. },
  419. {
  420. value: '2',
  421. label: '精选好物'
  422. },
  423. {
  424. value: '3',
  425. label: '热卖榜单'
  426. },
  427. {
  428. value: '4',
  429. label: '每日上新'
  430. },
  431. {
  432. value: '5',
  433. label: '拼团购'
  434. },
  435. {
  436. value: '6',
  437. label: '邀请图'
  438. },
  439. {
  440. value: '7',
  441. label: '首页邀请图'
  442. }
  443. ],
  444. form1: {
  445. id: '',
  446. image_url: '',
  447. title: '',
  448. url: '',
  449. state: '',
  450. createAt: ''
  451. },
  452. form2: {
  453. id: '',
  454. imgUrl: '',
  455. linkUrl: '',
  456. createAt: ''
  457. },
  458. statusmain: [
  459. {
  460. value: 0,
  461. label: '全部'
  462. },
  463. {
  464. value: 1,
  465. label: '上架'
  466. },
  467. {
  468. value: 2,
  469. label: '下架'
  470. }
  471. ],
  472. statusmain2: [
  473. {
  474. value: 1,
  475. label: '上架'
  476. },
  477. {
  478. value: 2,
  479. label: '下架'
  480. }
  481. ],
  482. formLabelWidth: '200px',
  483. activeName: 'first',
  484. tableDataLoading: false,
  485. dialogFormVisible1: false,
  486. dialogFormVisible: false,
  487. dialogFormVisible2: false,
  488. dialogFormVisible5: false,
  489. dialogFormVisible6: false,
  490. dialogFormVisible7: false,
  491. typeDatas: [],
  492. advertData: [],
  493. tableData: [],
  494. homeData: []
  495. }
  496. },
  497. filters: {
  498. numFilter (value) {
  499. let realVal = ''
  500. if (!isNaN(value) && value !== '') {
  501. // 截取当前数据到小数点后三位
  502. let tempVal = parseFloat(value).toFixed(3)
  503. realVal = tempVal.substring(0, tempVal.length - 1)
  504. } else {
  505. realVal = '--'
  506. }
  507. return realVal
  508. }
  509. },
  510. methods: {
  511. // 多选
  512. changeFun (val) {
  513. this.checkBoxData = val
  514. },
  515. handleAvatarSuccess (file) {
  516. this.img = file.data
  517. },
  518. handleAvatarSuccess2 (file) {
  519. this.form1.image_url = file.data
  520. },
  521. handleAvatarSuccess1 (file) {
  522. this.imgUrl = file.data
  523. },
  524. handleAvatarSuccess3 (file) {
  525. this.form2.imgUrl = file.data
  526. },
  527. handleAvatarSuccess4 (file) {
  528. this.image_url = file.data
  529. },
  530. handleSizeChange (val) {
  531. this.size = val
  532. this.dataSelect()
  533. },
  534. handleCurrentChange (val) {
  535. this.page = val
  536. this.dataSelect()
  537. },
  538. handleSizeChange1 (val) {
  539. this.size = val
  540. this.homeSelect()
  541. },
  542. handleCurrentChange1 (val) {
  543. this.page = val
  544. this.homeSelect()
  545. },
  546. handleSizeChange3 (val) {
  547. this.size = val
  548. this.choicenSelect()
  549. },
  550. handleCurrentChange3 (val) {
  551. this.page = val
  552. this.choicenSelect()
  553. },
  554. handleSizeChange4 (val) {
  555. this.size = val
  556. this.handpick()
  557. },
  558. handleCurrentChange4 (val) {
  559. this.page = val
  560. this.handpick()
  561. },
  562. handleSizeChange5 (val) {
  563. this.size = val
  564. this.recomSelect()
  565. },
  566. handleCurrentChange5 (val) {
  567. this.page = val
  568. this.recomSelect()
  569. },
  570. handleClick (tab, event) {
  571. if (tab._props.label == '首页轮播') {
  572. this.advertSelect()
  573. }
  574. if (tab._props.label == '首页导航') {
  575. this.state = ''
  576. this.homeSelect()
  577. }
  578. if (tab._props.label == '精选商品') {
  579. this.page = 1
  580. this.size = 5
  581. this.choicenSelect()
  582. this.handpick()
  583. }
  584. if (tab._props.label == '每日推荐') {
  585. this.page = 1
  586. this.size = 5
  587. this.recomSelect()
  588. this.handpick()
  589. }
  590. },
  591. // 添加首页导航弹框
  592. addNavigation () {
  593. this.dialogFormVisible7 = true
  594. },
  595. // 添加首页导航
  596. NagNoticeTo () {
  597. if (this.title == '') {
  598. this.$notify({
  599. title: '提示',
  600. duration: 1800,
  601. message: '请选择导航标题',
  602. type: 'warning'
  603. })
  604. return
  605. }
  606. if (this.url == '') {
  607. this.$notify({
  608. title: '提示',
  609. duration: 1800,
  610. message: '请选择导航路由',
  611. type: 'warning'
  612. })
  613. return
  614. }
  615. if (this.image_url == '') {
  616. this.$notify({
  617. title: '提示',
  618. duration: 1800,
  619. message: '请上传图片',
  620. type: 'warning'
  621. })
  622. return
  623. }
  624. this.$http({
  625. url: this.$http.adornUrl2('/selfActivity/save'),
  626. method: 'post',
  627. data: this.$http.adornData({
  628. 'state': this.state,
  629. 'url': this.url,
  630. 'title': this.title,
  631. 'image_url': this.image_url
  632. })
  633. }).then(({data}) => {
  634. this.dialogFormVisible7 = false
  635. this.$message({
  636. message: '操作成功',
  637. type: 'success',
  638. duration: 1500,
  639. onClose: () => {
  640. this.url = ''
  641. this.title = ''
  642. this.image_url = ''
  643. this.homeSelect()
  644. }
  645. })
  646. })
  647. },
  648. // 添加广告弹框
  649. advertNotice () {
  650. this.dialogFormVisible2 = true
  651. },
  652. // 添加广告
  653. advertNoticeTo () {
  654. if (this.linkUrl == '') {
  655. this.$notify({
  656. title: '提示',
  657. duration: 1800,
  658. message: '请输入跳转链接',
  659. type: 'warning'
  660. })
  661. return
  662. }
  663. if (this.imgUrl == '') {
  664. this.$notify({
  665. title: '提示',
  666. duration: 1800,
  667. message: '请上传图片',
  668. type: 'warning'
  669. })
  670. return
  671. }
  672. this.$http({
  673. url: this.$http.adornUrl2('/advert/save'),
  674. method: 'post',
  675. data: this.$http.adornData({
  676. 'imgUrl': this.imgUrl,
  677. 'linkUrl': this.linkUrl
  678. })
  679. }).then(({data}) => {
  680. this.dialogFormVisible2 = false
  681. this.$message({
  682. message: '操作成功',
  683. type: 'success',
  684. duration: 1500,
  685. onClose: () => {
  686. this.advertSelect()
  687. }
  688. })
  689. })
  690. },
  691. // 修改广告
  692. advertUpdates (index, rows) {
  693. this.dialogFormVisible = true
  694. this.form2.id = rows.id
  695. this.form2.imgUrl = rows.imgUrl
  696. this.form2.linkUrl = rows.linkUrl
  697. this.form2.createAt = rows.createAt
  698. },
  699. // 修改广告
  700. amendadvertTo () {
  701. this.$http({
  702. url: this.$http.adornUrl2('/advert/save'),
  703. method: 'post',
  704. data: this.$http.adornData({
  705. 'id': this.form2.id,
  706. 'imgUrl': this.form2.imgUrl,
  707. 'linkUrl': this.form2.linkUrl,
  708. 'createAt': this.form2.createAt
  709. })
  710. }).then(({data}) => {
  711. this.dialogFormVisible = false
  712. this.$message({
  713. message: '操作成功',
  714. type: 'success',
  715. duration: 1500,
  716. onClose: () => {
  717. this.advertSelect()
  718. }
  719. })
  720. })
  721. },
  722. // 删除广告
  723. advertdeletes (row) {
  724. this.$confirm(`确定删除此条信息?`, '提示', {
  725. confirmButtonText: '确定',
  726. cancelButtonText: '取消',
  727. type: 'warning'
  728. }).then(() => {
  729. this.$http({
  730. url: this.$http.adornUrl2('/advert/delete'),
  731. method: 'get',
  732. params: this.$http.adornParams({
  733. 'id': row.id
  734. })
  735. }).then(({data}) => {
  736. this.$message({
  737. message: '删除成功',
  738. type: 'success',
  739. duration: 1500,
  740. onClose: () => {
  741. this.advertSelect()
  742. }
  743. })
  744. })
  745. }).catch(() => {
  746. })
  747. },
  748. // 删除导航
  749. navdeletes (row) {
  750. this.$confirm(`确定删除此条信息?`, '提示', {
  751. confirmButtonText: '确定',
  752. cancelButtonText: '取消',
  753. type: 'warning'
  754. }).then(() => {
  755. this.$http({
  756. url: this.$http.adornUrl2('/selfActivity/delete'),
  757. method: 'get',
  758. params: this.$http.adornParams({
  759. 'id': row.id
  760. })
  761. }).then(({data}) => {
  762. this.$message({
  763. message: '删除成功',
  764. type: 'success',
  765. duration: 1500,
  766. onClose: () => {
  767. this.homeSelect()
  768. }
  769. })
  770. })
  771. }).catch(() => {
  772. })
  773. },
  774. // 编辑弹框
  775. compile (index, rows) {
  776. this.dialogFormVisible1 = true
  777. this.form1.url = rows.url
  778. this.form1.image_url = rows.image_url
  779. this.form1.id = rows.id
  780. this.form1.state = rows.state
  781. this.form1.createAt = rows.createAt
  782. this.form1.title = rows.title
  783. },
  784. // 修改商品类别
  785. compileNoticeTo () {
  786. this.$http({
  787. url: this.$http.adornUrl2('/selfActivity/update'),
  788. method: 'post',
  789. data: this.$http.adornData({
  790. 'id': this.form1.id,
  791. 'state': this.form1.state,
  792. 'title': this.form1.title,
  793. 'url': this.form1.url,
  794. 'image_url': this.form1.image_url,
  795. })
  796. }).then(({data}) => {
  797. this.dialogFormVisible1 = false
  798. this.$message({
  799. message: '操作成功',
  800. type: 'success',
  801. duration: 1500,
  802. onClose: () => {
  803. this.homeSelect()
  804. }
  805. })
  806. })
  807. },
  808. //添加精选商品
  809. choiaddNotice () {
  810. this.dialogFormVisible5 = true
  811. },
  812. // 添加商品
  813. releasNoticeTo (row) {
  814. this.$http({
  815. url: this.$http.adornUrl2('/goods/addSelectGoods'),
  816. method: 'get',
  817. params: this.$http.adornParams({
  818. 'id': row.id,
  819. })
  820. }).then(({data}) => {
  821. if (data && data.status === 0) {
  822. this.$message({
  823. message: '操作成功',
  824. type: 'success',
  825. duration: 1500,
  826. onClose: () => {
  827. this.choicenSelect()
  828. }
  829. })
  830. } else {
  831. this.$message.error(data.msg)
  832. }
  833. })
  834. },
  835. // 精选淘宝商品
  836. handpick () {
  837. let page = this.page - 1
  838. this.tableDataLoading = true
  839. this.$http({
  840. url: this.$http.adornUrl2('/goods/list'),
  841. method: 'get',
  842. params: this.$http.adornParams({
  843. 'page': page,
  844. 'size': this.size,
  845. 'title': this.title,
  846. 'type': this.type,
  847. 'status': this.status
  848. })
  849. }).then(({data}) => {
  850. if (data && data.status === 0) {
  851. this.tableDataLoading = false
  852. let returnData = data.data
  853. this.choicenData2 = returnData
  854. }
  855. })
  856. },
  857. // 搜索
  858. shousuo () {
  859. let page = this.page - 1
  860. this.tableDataLoading = true
  861. this.$http({
  862. url: this.$http.adornUrl2('/goods/list'),
  863. method: 'get',
  864. params: this.$http.adornParams({
  865. 'page': page,
  866. 'size': this.size,
  867. 'title': this.title,
  868. 'type': this.type,
  869. 'status': this.status
  870. })
  871. }).then(({data}) => {
  872. if (data && data.status === 0) {
  873. this.tableDataLoading = false
  874. let returnData = data.data
  875. this.choicenData2 = returnData
  876. }
  877. })
  878. },
  879. // 批量删除商品
  880. choideletes (id) {
  881. var ids = id ? [id] : this.checkBoxData.map(item => {
  882. return item.id
  883. })
  884. for (var i in ids) {
  885. this.$http({
  886. url: this.$http.adornUrl2('/goods/deleteSelectGoods'),
  887. method: 'get',
  888. params: this.$http.adornParams({
  889. 'ids': ids[i]
  890. })
  891. }).then(({data}) => {
  892. this.$message({
  893. message: '批量删除成功',
  894. type: 'success',
  895. duration: 1500,
  896. onClose: () => {
  897. this.choicenSelect()
  898. }
  899. })
  900. })
  901. }
  902. },
  903. // 删除商品
  904. choidelete (row) {
  905. let delid = row.id
  906. this.$confirm(`确定删除此条信息?`, '提示', {
  907. confirmButtonText: '确定',
  908. cancelButtonText: '取消',
  909. type: 'warning'
  910. }).then(() => {
  911. this.$http({
  912. url: this.$http.adornUrl2('/goods/deleteSelectGoods'),
  913. method: 'get',
  914. params: this.$http.adornParams({
  915. 'ids': delid
  916. })
  917. }).then(({data}) => {
  918. this.$message({
  919. message: '删除成功',
  920. type: 'success',
  921. duration: 1500,
  922. onClose: () => {
  923. this.choicenSelect()
  924. }
  925. })
  926. })
  927. }).catch(() => {
  928. })
  929. },
  930. // 精选商品列表
  931. choicenSelect () {
  932. let page = this.page - 1
  933. this.tableDataLoading = true
  934. this.$http({
  935. url: this.$http.adornUrl2('/goods/selectGoods'),
  936. method: 'get',
  937. params: this.$http.adornParams({
  938. 'page': page,
  939. 'size': this.size,
  940. 'sort': this.sort
  941. })
  942. }).then(({data}) => {
  943. this.tableDataLoading = false
  944. let returnData = data.data
  945. this.choicenData = returnData
  946. })
  947. },
  948. // 每日推荐列表
  949. recomSelect () {
  950. let page = this.page - 1
  951. this.tableDataLoading = true
  952. this.$http({
  953. url: this.$http.adornUrl2('/goods/recommend'),
  954. method: 'get',
  955. params: this.$http.adornParams({
  956. 'page': page,
  957. 'size': this.size,
  958. 'sort': this.sort
  959. })
  960. }).then(({data}) => {
  961. this.tableDataLoading = false
  962. let returnData = data.data
  963. this.recomData = returnData
  964. })
  965. },
  966. //添加每日推荐
  967. recomNotice () {
  968. this.dialogFormVisible6 = true
  969. },
  970. // 添加每日推荐
  971. recomNoticeTo (row) {
  972. this.$http({
  973. url: this.$http.adornUrl2('/goods/addRecommend'),
  974. method: 'get',
  975. params: this.$http.adornParams({
  976. 'id': row.id,
  977. })
  978. }).then(({data}) => {
  979. if (data && data.status === 0) {
  980. this.recomSelect()
  981. this.handpick()
  982. this.$message({
  983. message: '操作成功',
  984. type: 'success',
  985. duration: 1500,
  986. onClose: () => {
  987. this.choicenSelect()
  988. }
  989. })
  990. } else {
  991. this.$message.error(data.msg)
  992. }
  993. })
  994. },
  995. // 批量删除每日推荐商品
  996. recomdeletes (id) {
  997. var ids = id ? [id] : this.checkBoxData.map(item => {
  998. return item.id
  999. })
  1000. for (var i in ids) {
  1001. this.$http({
  1002. url: this.$http.adornUrl2('/goods/deleteRecommend'),
  1003. method: 'get',
  1004. params: this.$http.adornParams({
  1005. 'ids': ids[i]
  1006. })
  1007. }).then(({data}) => {
  1008. this.recomSelect()
  1009. this.handpick()
  1010. this.$message({
  1011. message: '批量删除成功',
  1012. type: 'success',
  1013. duration: 1500,
  1014. onClose: () => {
  1015. this.choicenSelect()
  1016. }
  1017. })
  1018. })
  1019. }
  1020. },
  1021. // 删除每日推荐商品
  1022. recomdelete (row) {
  1023. let delid = row.id
  1024. this.$confirm(`确定删除此条信息?`, '提示', {
  1025. confirmButtonText: '确定',
  1026. cancelButtonText: '取消',
  1027. type: 'warning'
  1028. }).then(() => {
  1029. this.$http({
  1030. url: this.$http.adornUrl2('/goods/deleteRecommend'),
  1031. method: 'get',
  1032. params: this.$http.adornParams({
  1033. 'ids': delid
  1034. })
  1035. }).then(({data}) => {
  1036. this.recomSelect()
  1037. this.handpick()
  1038. this.$message({
  1039. message: '删除成功',
  1040. type: 'success',
  1041. duration: 1500,
  1042. onClose: () => {
  1043. this.choicenSelect()
  1044. }
  1045. })
  1046. })
  1047. }).catch(() => {
  1048. })
  1049. },
  1050. // 获取首页导航列表
  1051. homeSelect () {
  1052. this.tableDataLoading = true
  1053. this.$http({
  1054. url: this.$http.adornUrl2(`/selfActivity/list?state=${this.state}`),
  1055. method: 'get',
  1056. params: this.$http.adornParams({})
  1057. }).then(({data}) => {
  1058. this.tableDataLoading = false
  1059. let returnData = data.data
  1060. this.homeData = returnData
  1061. })
  1062. },
  1063. // 获取广告位数据
  1064. advertSelect () {
  1065. this.tableDataLoading = true
  1066. this.$http({
  1067. url: this.$http.adornUrl2('/advert/list'),
  1068. method: 'get',
  1069. params: this.$http.adornParams({})
  1070. }).then(({data}) => {
  1071. this.tableDataLoading = false
  1072. let returnData = data.data
  1073. this.advertData = returnData
  1074. })
  1075. },
  1076. },
  1077. mounted () {
  1078. this.advertSelect()
  1079. }
  1080. }
  1081. </script>
  1082. <style>
  1083. .customWidth {
  1084. width: 80% !important;
  1085. }
  1086. .el-input--medium .el-input__inner{
  1087. padding: 0 24px 0 15px;
  1088. }
  1089. </style>