mall_set.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597
  1. <template>
  2. <div class="app-container">
  3. <div v-if="!isAdmin">
  4. <el-tabs v-model="step">
  5. <el-tab-pane label="首页模版配置" name="first"></el-tab-pane>
  6. <el-tab-pane label="商城logo配置" name="second"></el-tab-pane>
  7. </el-tabs>
  8. <div v-show="step == 'first'">
  9. <el-form label-width="120px" label-position="right">
  10. <el-form-item label="选择模版:" style="margin-bottom: 40px">
  11. <el-radio-group v-model="currentTemplate" @change="changeTemplate()">
  12. <div class="item">
  13. <el-radio :label="1">模版一</el-radio>
  14. <el-image :src="require('@/assets/template/tmp_1_thumb.png')" :preview-src-list="[require('@/assets/template/tmp_1.png')]" fit="cover"></el-image>
  15. </div>
  16. <div class="item">
  17. <el-radio :label="2">模版二</el-radio>
  18. <el-image :src="require('@/assets/template/tmp_2_thumb.png')" :preview-src-list="[require('@/assets/template/tmp_2.png')]" fit="cover"></el-image>
  19. </div>
  20. </el-radio-group>
  21. </el-form-item>
  22. <el-form-item label="首页模块设置:" v-show="currentTemplate === 1">
  23. <div class="diy-table">
  24. <div class="item head">
  25. <div class="label">模块名称</div>
  26. <div class="value">状态</div>
  27. </div>
  28. <div class="item">
  29. <div class="label">分类</div>
  30. <div class="value">
  31. <el-switch v-model="switch_classify" disabled></el-switch>
  32. <span :class="switch_classify ? 'on':''">{{switch_classify ? '开启':'隐藏'}}</span>
  33. </div>
  34. </div>
  35. <div class="item">
  36. <div class="label">轮播图</div>
  37. <div class="value">
  38. <el-switch v-model="switch_banner"></el-switch>
  39. <span :class="switch_banner ? 'on':''">{{switch_banner ? '开启':'隐藏'}}</span>
  40. </div>
  41. </div>
  42. <div class="item">
  43. <div class="label">公告</div>
  44. <div class="value">
  45. <el-switch v-model="switch_notice"></el-switch>
  46. <span :class="switch_notice ? 'on':''">{{switch_notice ? '开启':'隐藏'}}</span>
  47. </div>
  48. </div>
  49. <div class="item">
  50. <div class="label">专属优惠券</div>
  51. <div class="value">
  52. <el-switch v-model="switch_coupon"></el-switch>
  53. <span :class="switch_coupon ? 'on':''">{{switch_coupon ? '开启':'隐藏'}}</span>
  54. </div>
  55. </div>
  56. <div class="item">
  57. <div class="label">客户经理</div>
  58. <div class="value">
  59. <el-switch v-model="switch_manager"></el-switch>
  60. <span :class="switch_manager ? 'on':''">{{switch_manager ? '开启':'隐藏'}}</span>
  61. </div>
  62. </div>
  63. <div class="item">
  64. <div class="label">秒杀专区</div>
  65. <div class="value">
  66. <el-switch v-model="switch_seckill"></el-switch>
  67. <span :class="switch_seckill ? 'on':''">{{switch_seckill ? '开启':'隐藏'}}</span>
  68. </div>
  69. </div>
  70. <div class="item">
  71. <div class="label">好物推荐</div>
  72. <div class="value">
  73. <el-switch v-model="switch_recom" disabled></el-switch>
  74. <span :class="switch_recom ? 'on':''">{{switch_recom ? '开启':'隐藏'}}</span>
  75. </div>
  76. </div>
  77. </div>
  78. </el-form-item>
  79. <el-form-item label="首页模块设置:" v-show="currentTemplate === 2">
  80. <div class="diy-table">
  81. <div class="item head">
  82. <div class="label">模块名称</div>
  83. <div class="value">状态</div>
  84. </div>
  85. <div class="item">
  86. <div class="label">首页弹窗</div>
  87. <div class="value">
  88. <el-switch v-model="switch_dialog"></el-switch>
  89. <span :class="switch_dialog ? 'on':''">{{switch_dialog ? '开启':'隐藏'}}</span>
  90. </div>
  91. </div>
  92. <div class="item">
  93. <div class="label">轮播图</div>
  94. <div class="value">
  95. <el-switch v-model="switch_banner"></el-switch>
  96. <span :class="switch_banner ? 'on':''">{{switch_banner ? '开启':'隐藏'}}</span>
  97. </div>
  98. </div>
  99. <div class="item">
  100. <div class="label">活动专区1</div>
  101. <div class="value">
  102. <el-switch v-model="switch_activity1"></el-switch>
  103. <span :class="switch_activity1 ? 'on':''">{{switch_activity1 ? '开启':'隐藏'}}</span>
  104. </div>
  105. </div>
  106. <div class="item">
  107. <div class="label">分类</div>
  108. <div class="value">
  109. <el-switch v-model="switch_classify" disabled></el-switch>
  110. <span :class="switch_classify ? 'on':''">{{switch_classify ? '开启':'隐藏'}}</span>
  111. </div>
  112. </div>
  113. <div class="item">
  114. <div class="label">活动专区2</div>
  115. <div class="value">
  116. <el-switch v-model="switch_activity2"></el-switch>
  117. <span :class="switch_activity2 ? 'on':''">{{switch_activity2 ? '开启':'隐藏'}}</span>
  118. </div>
  119. </div>
  120. <div class="item">
  121. <div class="label">专场专区</div>
  122. <div class="value">
  123. <el-switch v-model="switch_special"></el-switch>
  124. <span :class="switch_special ? 'on':''">{{switch_special ? '开启':'隐藏'}}</span>
  125. </div>
  126. </div>
  127. <div class="item">
  128. <div class="label">秒杀专区</div>
  129. <div class="value">
  130. <el-switch v-model="switch_seckill"></el-switch>
  131. <span :class="switch_seckill ? 'on':''">{{switch_seckill ? '开启':'隐藏'}}</span>
  132. </div>
  133. </div>
  134. <div class="item">
  135. <div class="label">专属优惠券</div>
  136. <div class="value">
  137. <el-switch v-model="switch_coupon"></el-switch>
  138. <span :class="switch_coupon ? 'on':''">{{switch_coupon ? '开启':'隐藏'}}</span>
  139. </div>
  140. </div>
  141. <div class="item">
  142. <div class="label">客户经理</div>
  143. <div class="value">
  144. <el-switch v-model="switch_manager"></el-switch>
  145. <span :class="switch_manager ? 'on':''">{{switch_manager ? '开启':'隐藏'}}</span>
  146. </div>
  147. </div>
  148. <div class="item">
  149. <div class="label">公告</div>
  150. <div class="value">
  151. <el-switch v-model="switch_notice"></el-switch>
  152. <span :class="switch_notice ? 'on':''">{{switch_notice ? '开启':'隐藏'}}</span>
  153. </div>
  154. </div>
  155. <div class="item">
  156. <div class="label">新维度分类专区</div>
  157. <div class="value">
  158. <el-switch v-model="switch_newclassify" disabled></el-switch>
  159. <span :class="switch_newclassify ? 'on':''">{{switch_newclassify ? '开启':'隐藏'}}</span>
  160. </div>
  161. </div>
  162. </div>
  163. </el-form-item>
  164. </el-form>
  165. </div>
  166. <div v-show="step == 'second'">
  167. <el-form label-width="120px" label-position="right">
  168. <el-upload
  169. class="avatar-uploader"
  170. :action="baseURL + 'common/upload'"
  171. :headers="myHeaders"
  172. :show-file-list="false"
  173. :on-success="uploadSuccess"
  174. :before-upload="beforeUpload">
  175. </el-upload>
  176. <el-form-item label="主logo:" prop="imgUrl">
  177. <div class="images">
  178. <div class="main-img">
  179. <div class="img" v-if="img1_url" @mouseover="img1_hover = true;" @mouseout="img1_hover = false;">
  180. <el-image ref="img1" :src="img1_url" :preview-src-list="[img1_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
  181. <div class="mask" v-show="img1_hover">
  182. <i class="el-icon-zoom-in" @click="previewImage('img1')"></i>
  183. <i class="el-icon-upload2" @click="uploadImage('img1')"></i>
  184. </div>
  185. </div>
  186. <div class="add" v-else @click="uploadImage('img1')">
  187. <i class="el-icon-plus avatar-uploader-icon"></i>
  188. </div>
  189. </div>
  190. <div class="tmp-img">
  191. <el-image :src="require('@/assets/template/template_1.png')" :preview-src-list="[require('@/assets/template/template_1.png')]" style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
  192. <div class="tmp">示例图</div>
  193. </div>
  194. </div>
  195. <div class="tips">
  196. <span>建议尺寸:400*400</span>
  197. </div>
  198. </el-form-item>
  199. <el-form-item label="通用logo:" prop="imgUrl">
  200. <div class="images">
  201. <div class="main-img">
  202. <div class="img" v-if="img2_url" @mouseover="img2_hover = true;" @mouseout="img2_hover = false;">
  203. <el-image ref="img2" :src="img2_url" :preview-src-list="[img2_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
  204. <div class="mask" v-show="img2_hover">
  205. <i class="el-icon-zoom-in" @click="previewImage('img2')"></i>
  206. <i class="el-icon-upload2" @click="uploadImage('img2')"></i>
  207. </div>
  208. </div>
  209. <div class="add" v-else @click="uploadImage('img2')">
  210. <i class="el-icon-plus avatar-uploader-icon"></i>
  211. </div>
  212. </div>
  213. <div class="tmp-img">
  214. <el-image :src="require('@/assets/template/template_2.png')" :preview-src-list="[require('@/assets/template/template_2.png')]" style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
  215. <div class="tmp">示例图</div>
  216. </div>
  217. </div>
  218. <div class="tips">
  219. <span>建议尺寸:280*60</span>
  220. </div>
  221. </el-form-item>
  222. <el-form-item label="头像logo:" prop="imgUrl">
  223. <div class="images">
  224. <div class="main-img">
  225. <div class="img" v-if="img3_url" @mouseover="img3_hover = true;" @mouseout="img3_hover = false;">
  226. <el-image ref="img3" :src="img3_url" :preview-src-list="[img3_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
  227. <div class="mask" v-show="img3_hover">
  228. <i class="el-icon-zoom-in" @click="previewImage('img3')"></i>
  229. <i class="el-icon-upload2" @click="uploadImage('img3')"></i>
  230. </div>
  231. </div>
  232. <div class="add" v-else @click="uploadImage('img3')">
  233. <i class="el-icon-plus avatar-uploader-icon"></i>
  234. </div>
  235. </div>
  236. <div class="tmp-img">
  237. <el-image :src="require('@/assets/template/template_3.png')" :preview-src-list="[require('@/assets/template/template_3.png')]" style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
  238. <div class="tmp">示例图</div>
  239. </div>
  240. </div>
  241. <div class="tips">
  242. <span>建议尺寸:400*400</span>
  243. </div>
  244. </el-form-item>
  245. </el-form>
  246. </div>
  247. <div class="page-footer">
  248. <div class="footer" :class="classObj">
  249. <el-button type="primary" @click="submitStep1Form" :loading="formLoading" v-if="step == 'first'">{{ formLoading ? '保存中 ...' : '保 存' }}</el-button>
  250. <el-button type="primary" @click="submitStep2Form" :loading="formLoading" v-if="step == 'second'">{{ formLoading ? '保存中 ...' : '保 存' }}</el-button>
  251. </div>
  252. </div>
  253. </div>
  254. <div v-else>
  255. <div class="nodata">超级管理员无法进行商城配置</div>
  256. </div>
  257. </div>
  258. </template>
  259. <script>
  260. import { getToken, getUserid } from '@/utils/auth';
  261. import { getTemplate, editAccount, editTemplate, getDetail } from "@/api/merchant";
  262. import { findElem } from '@/utils/util';
  263. import { getInfo } from '@/api/user'
  264. export default {
  265. data() {
  266. return {
  267. isAdmin: JSON.parse(localStorage.getItem("supply_user")).type === 2,
  268. baseURL: process.env.VUE_APP_BASE_API,
  269. myHeaders: {'x-token': getToken()},
  270. step: 'first',
  271. companyId: JSON.parse(localStorage.getItem("supply_user")).companyWechatId,
  272. currentTemplate: JSON.parse(localStorage.getItem("supply_user")).useTemplate,
  273. switch_dialog: true,
  274. switch_banner: true,
  275. switch_activity1: true,
  276. switch_classify: true,
  277. switch_activity2: true,
  278. switch_special: true,
  279. switch_seckill: true,
  280. switch_coupon: true,
  281. switch_manager: true,
  282. switch_notice: true,
  283. switch_newclassify: true,
  284. switch_recom: true,
  285. templateList: [],
  286. uploadImageType: null,
  287. img1_url: '',
  288. img1_hover: false,
  289. img2_url: '',
  290. img2_hover: false,
  291. img3_url: '',
  292. img3_hover: false,
  293. formLoading: false
  294. }
  295. },
  296. computed: {
  297. sidebar() {
  298. return this.$store.state.app.sidebar
  299. },
  300. classObj() {
  301. return {
  302. hideSidebar: !this.sidebar.opened,
  303. openSidebar: this.sidebar.opened
  304. }
  305. },
  306. },
  307. created() {
  308. if(this.isAdmin) return false;
  309. this.getTemplate();
  310. },
  311. watch: {
  312. step() {
  313. if(this.step === 'first') {
  314. this.getTemplate();
  315. }else {
  316. this.getLogoDetail();
  317. }
  318. }
  319. },
  320. methods: {
  321. // 获取模版列表
  322. getTemplate() {
  323. getTemplate({
  324. companyId: this.companyId
  325. }).then(res => {
  326. this.templateList = res.data;
  327. this.initHome();
  328. })
  329. },
  330. // 切换模版
  331. changeTemplate() {
  332. this.initHome();
  333. },
  334. // 初始化配置
  335. initHome() {
  336. let index = findElem(this.templateList, 'templateType', this.currentTemplate);
  337. this.switch_dialog = this.templateList[index].popupStatus;
  338. this.switch_banner = this.templateList[index].carouseStatus;
  339. this.switch_activity1 = this.templateList[index].active1Status;
  340. this.switch_classify = this.templateList[index].categoryStatus;
  341. this.switch_activity2 = this.templateList[index].active2Status;
  342. this.switch_special = this.templateList[index].onlyStatus;
  343. this.switch_seckill = this.templateList[index].killStatus;
  344. this.switch_coupon = this.templateList[index].couponStatus;
  345. this.switch_manager = this.templateList[index].customerStatus;
  346. this.switch_notice = this.templateList[index].notiveStatus;
  347. this.switch_newclassify = this.templateList[index].newsStatus;
  348. this.switch_recom = this.templateList[index].okStatus;
  349. },
  350. // 保存首页配置
  351. submitStep1Form() {
  352. let index = findElem(this.templateList, 'templateType', this.currentTemplate);
  353. let params = {
  354. companyWechatId: this.companyId,
  355. useTemplate: this.currentTemplate,
  356. companyWechatTemplatesList: [{
  357. companyWechatTemplateId: this.templateList[index].companyWechatTemplateId,
  358. templateType: this.templateList[index].templateType,
  359. popupStatus: this.switch_dialog,
  360. carouseStatus: this.switch_banner,
  361. active1Status: this.switch_activity1,
  362. categoryStatus: this.switch_classify,
  363. active2Status: this.switch_activity2,
  364. onlyStatus: this.switch_special,
  365. killStatus: this.switch_seckill,
  366. couponStatus: this.switch_coupon,
  367. customerStatus: this.switch_manager,
  368. notiveStatus: this.switch_notice,
  369. newsStatus: this.switch_newclassify,
  370. okStatus: this.switch_recom,
  371. }],
  372. }
  373. this.formLoading = true;
  374. editTemplate(params).then(res => {
  375. this.getTemplate();
  376. this.$successMsg('保存成功');
  377. getInfo(getUserid()).then(response => {
  378. localStorage.setItem("supply_user", JSON.stringify(response.data));
  379. })
  380. }).finally(res => {
  381. this.formLoading = false;
  382. })
  383. },
  384. // 获取logo信息
  385. getLogoDetail() {
  386. getDetail({adminUserId: getUserid()}).then(res => {
  387. this.img1_url = res.data.minLogo1;
  388. this.img2_url = res.data.minLogo2;
  389. this.img3_url = res.data.minLogo3;
  390. })
  391. },
  392. uploadImage(type) {
  393. this.uploadImageType = type;
  394. document.querySelector('.avatar-uploader input').click();
  395. },
  396. // 上传图片
  397. uploadSuccess(res, file) {
  398. this[this.uploadImageType + '_url'] = res.data.url;
  399. },
  400. beforeUpload(file) {
  401. const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
  402. const whiteList = ['jpg', 'jpeg', 'png'];
  403. if (whiteList.indexOf(fileSuffix) === -1) {
  404. this.$errorMsg('只支持上传jpg/jpeg/png文件!');
  405. return false;
  406. }
  407. },
  408. // 预览图片
  409. previewImage(type) {
  410. this.$refs[type].showViewer = true;
  411. },
  412. submitStep2Form() {
  413. if(!this.img1_url) {
  414. return this.$errorMsg('请上传主logo');
  415. }
  416. if(!this.img2_url) {
  417. return this.$errorMsg('请上传通用logo');
  418. }
  419. if(!this.img3_url) {
  420. return this.$errorMsg('请上传头像logo');
  421. }
  422. this.formLoading = true;
  423. let params = {
  424. companyWechatId: this.companyId,
  425. mainLog: this.img1_url,
  426. commonLog: this.img2_url,
  427. minLogo: this.img3_url,
  428. }
  429. editTemplate(params).then(res => {
  430. this.getLogoDetail();
  431. this.$successMsg('保存成功');
  432. }).finally(res => {
  433. this.formLoading = false;
  434. })
  435. },
  436. }
  437. }
  438. </script>
  439. <style lang="scss" scoped>
  440. ::v-deep .el-radio-group {
  441. display: flex;
  442. .item {
  443. margin-right: 20px;
  444. .el-radio {
  445. height: 40px;
  446. line-height: 40px;
  447. }
  448. .el-image {
  449. width: 120px;
  450. height: 200px;
  451. display: block;
  452. }
  453. }
  454. }
  455. .images {
  456. display: flex;
  457. flex-wrap: wrap;
  458. .main-img {
  459. display: flex;
  460. flex-direction: column;
  461. justify-content: center;
  462. align-items: center;
  463. width: 120px;
  464. margin-right: 20px;
  465. .img {
  466. border: 1px dashed #eaeaea;
  467. border-radius: 5px;
  468. overflow: hidden;
  469. position: relative;
  470. .el-image {
  471. display: block;
  472. }
  473. .mask {
  474. position: absolute;
  475. left: 0;
  476. top: 0;
  477. width: 120px;
  478. height: 120px;
  479. background: rgba($color: #000000, $alpha: 0.3);
  480. display: flex;
  481. align-items: center;
  482. justify-content: center;
  483. i {
  484. font-size: 20px;
  485. color: #ffffff;
  486. cursor: pointer;
  487. margin: 0 8px;
  488. }
  489. }
  490. }
  491. .text {
  492. font-size: 14px;
  493. color: #666666;
  494. }
  495. }
  496. .add {
  497. width: 120px;
  498. height: 120px;
  499. border: 1px dashed #eaeaea;
  500. border-radius: 5px;
  501. cursor: pointer;
  502. display: flex;
  503. align-items: center;
  504. justify-content: center;
  505. i {
  506. font-size: 30px;
  507. color: #999;
  508. }
  509. }
  510. .tmp-img {
  511. position: relative;
  512. .tmp {
  513. position: absolute;
  514. left: 0;
  515. top: 0;
  516. line-height: 20px;
  517. padding: 0 8px;
  518. background: #f66460;
  519. border-radius: 0 0 10px 0;
  520. font-size: 12px;
  521. color: #ffffff;
  522. }
  523. }
  524. }
  525. .tips {
  526. margin-top: 10px;
  527. span {
  528. display: inline-block;
  529. width: 300px;
  530. text-align: center;
  531. line-height: 32px;
  532. background: #ffefef;
  533. font-size: 14px;
  534. color: #f66460;
  535. }
  536. }
  537. .diy-table {
  538. width: 400px;
  539. .item {
  540. display: flex;
  541. border: 1px solid #eaeaea;
  542. border-bottom: none;
  543. &.head {
  544. font-weight: bold;
  545. }
  546. &:last-child {
  547. border-bottom: 1px solid #eaeaea;
  548. }
  549. >div {
  550. flex: 1;
  551. display: flex;
  552. align-items: center;
  553. justify-content: center;
  554. }
  555. .label {
  556. border-right: 1px solid #eaeaea;
  557. }
  558. .value {
  559. span {
  560. margin-left: 10px;
  561. color: #666666;
  562. &.on {
  563. color: #409EFF;
  564. }
  565. }
  566. }
  567. }
  568. }
  569. .nodata {
  570. font-size: 18px;
  571. color: #666666;
  572. }
  573. </style>