|
|
@@ -2,20 +2,20 @@
|
|
|
<div class="app-content">
|
|
|
<!-- 微信菜单 -->
|
|
|
<div class="wx-wrap">
|
|
|
- <div class="wx-bar">
|
|
|
+ <!-- <div class="wx-bar">
|
|
|
<div class="bar-img">
|
|
|
<img src="../../static/images/setting/wx-bar-bg.png" alt="">
|
|
|
</div>
|
|
|
- <div class="bar-text">江肖清</div>
|
|
|
- </div>
|
|
|
+ <div class="bar-text">{{userInfo.merchantName}}</div>
|
|
|
+ </div> -->
|
|
|
<!-- 中间快 -->
|
|
|
- <div class="wx-content"></div>
|
|
|
+ <div class="wx-content" @click="operateShow = false"></div>
|
|
|
<!-- 按钮 -->
|
|
|
<div class="wx-btn">
|
|
|
<div class="key-btn">
|
|
|
<img class="key-btn-img" src="../../static/images/setting/wx-menu.png" alt mode="widthFix" />
|
|
|
</div>
|
|
|
- <div class="menu-btn" :class="[activeIndex == index ? 'active' : '']" v-for="(item, index) in menuData" :key="index">
|
|
|
+ <div class="menu-btn" :class="[activeIndex == index ? 'active' : '']" v-for="(item, index) in menuData" :key="index" @click="menuClickFn(item, index)">
|
|
|
<div class="iconfont-blo">
|
|
|
<i class="iconfont iconcaidanlan"></i>
|
|
|
</div>
|
|
|
@@ -24,14 +24,14 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 提示 -->
|
|
|
- <div class="prompt-text">菜单最多只能添加5个，可以没有字菜单。</div>
|
|
|
+ <div class="prompt-text">菜单最多只能添加5个，可以没有子菜单。</div>
|
|
|
<!-- 按钮 -->
|
|
|
<div class="btn-wrap">
|
|
|
<div class="admin-button-com big" @click="addModule = true">添加</div>
|
|
|
- <div class="admin-button-com blue big">提交</div>
|
|
|
+ <div class="admin-button-com blue big" @click="submitFn">提交</div>
|
|
|
</div>
|
|
|
<!-- 操作弹窗 -->
|
|
|
- <operate-line-module v-if="operateShow" :btnData="btnData" :isModify="true" />
|
|
|
+ <operate-line-module v-if="operateShow" :left="operateLeft" :btnData="btnData" :isModify="true" @clickFn="operateFn" @add="operateAddFn" @del="operateDelFn" />
|
|
|
<!-- 添加弹窗 -->
|
|
|
<modal-module :show="addModule" @cancel="modalCancel" @click="modalClick" title="添加菜单" padding="30rpx 30rpx">
|
|
|
<template v-slot:content>
|
|
|
@@ -39,36 +39,36 @@
|
|
|
<div class="inp-list-line">
|
|
|
<div class="line-label">名称</div>
|
|
|
<div class="line-input">
|
|
|
- <input type="text" placeholder="请输入" :adjust-position="false" class="inp-input" />
|
|
|
+ <input type="text" v-model="form.name" placeholder="请输入" :adjust-position="false" class="inp-input" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="inp-list-line">
|
|
|
<div class="line-label">分类</div>
|
|
|
<radio-group class="tui-input flex-center-between" @change="radioChange">
|
|
|
<label class="list" for="customLink">
|
|
|
- <radio id="customLink" value="自定义链接" checked="checked" />
|
|
|
+ <radio id="customLink" value="0" checked="checked" />
|
|
|
<span class="checkbox-text">常用网址</span>
|
|
|
</label>
|
|
|
<label class="list" for="goodsLink">
|
|
|
- <radio id="goodsLink" value="链接商品" />
|
|
|
+ <radio id="goodsLink" value="1" />
|
|
|
<span class="checkbox-text">自定义网址</span>
|
|
|
</label>
|
|
|
</radio-group>
|
|
|
</div>
|
|
|
<!-- 常用网址 -->
|
|
|
- <block v-if="false">
|
|
|
- <div class="inp-list-line button-wrap">
|
|
|
- <div class="admin-button-com" :class="[index == 0 ? 'blue' : 'default']" v-for="(item, index) in 5" :key="index">商城首页</div>
|
|
|
- </div>
|
|
|
- </block>
|
|
|
- <!-- 常用网址 -->
|
|
|
- <block v-else>
|
|
|
+ <block v-if="form.menuOption == 0">
|
|
|
<div class="inp-list-line">
|
|
|
<div class="line-input">
|
|
|
- <input type="text" placeholder="必须以http开头的网址" :adjust-position="false" class="inp-input" />
|
|
|
+ <input v-model="form.replyUrl" type="text" placeholder="必须以http开头的网址" :adjust-position="false" class="inp-input" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</block>
|
|
|
+ <!-- 自定义网址 -->
|
|
|
+ <block v-else>
|
|
|
+ <div class="inp-list-line button-wrap">
|
|
|
+ <div class="admin-button-com" :class="[index == 0 ? 'blue' : 'default']" v-for="(item, index) in 5" :key="index">商城首页</div>
|
|
|
+ </div>
|
|
|
+ </block>
|
|
|
</div>
|
|
|
</template>
|
|
|
</modal-module>
|
|
|
@@ -76,8 +76,10 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
import ModalModule from '@/components/plugin/modal'
|
|
|
import OperateLineModule from '@/pages/admin/components/module/operate-line'
|
|
|
+import { getMenu, updateMenu } from '@/api/menu'
|
|
|
export default {
|
|
|
name: 'wx-menu-setting',
|
|
|
components: {
|
|
|
@@ -86,42 +88,99 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ form: {
|
|
|
+ name: '',
|
|
|
+ menuOption: 0,
|
|
|
+ replyUrl: '',
|
|
|
+ targetId: 0
|
|
|
+ },
|
|
|
addModule: false,
|
|
|
operateShow: false,
|
|
|
- activeIndex: 2,
|
|
|
- menuData: [
|
|
|
- {
|
|
|
- name: '小清清清1'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '小清清清2'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '小清清清3'
|
|
|
- }
|
|
|
- ],
|
|
|
+ activeIndex: null,
|
|
|
+ menuData: [],
|
|
|
+ // 操作菜单
|
|
|
+ optionMenuData: null,
|
|
|
+ operateLeft: 130,
|
|
|
// 按钮列表
|
|
|
- btnData: [
|
|
|
- {
|
|
|
- text: '名师风采'
|
|
|
- },
|
|
|
- {
|
|
|
- text: '培训课堂'
|
|
|
- },
|
|
|
- {
|
|
|
- text: '学员天地'
|
|
|
- },
|
|
|
- {
|
|
|
- text: '首页'
|
|
|
- }
|
|
|
- ]
|
|
|
+ btnData: []
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({ userInfo: 'getUser' })
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this._getDet()
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ // api
|
|
|
+ _getDet() {
|
|
|
+ getMenu().then(res => {
|
|
|
+ this.menuData = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ submitFn() {
|
|
|
+ updateMenu(this.menuData).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ this.$msg('修改成功!')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 按钮操作
|
|
|
+ menuClickFn(item, index) {
|
|
|
+ this.operateLeft = index * 192 + 130
|
|
|
+ this.activeIndex = index
|
|
|
+ this.optionMenuData = item
|
|
|
+ this.btnData = item.children
|
|
|
+ this.operateShow = true
|
|
|
+ },
|
|
|
modalCancel() {
|
|
|
this.addModule = false
|
|
|
+ this.resetForm()
|
|
|
+ },
|
|
|
+ // 重置表单
|
|
|
+ resetForm() {
|
|
|
+ this.form = {
|
|
|
+ name: '',
|
|
|
+ menuOption: 0,
|
|
|
+ replyUrl: '',
|
|
|
+ targetId: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 添加菜单弹窗操作 ================
|
|
|
+ radioChange(e) {
|
|
|
+ this.form.menuOption = e.detail.value
|
|
|
+ },
|
|
|
+ // 自定义网址
|
|
|
+ targetFn() {
|
|
|
+
|
|
|
},
|
|
|
- radioChange() {}
|
|
|
+ modalClick(e) {
|
|
|
+ let index = e.index
|
|
|
+ if (index === 0) {
|
|
|
+ this.modalCancel()
|
|
|
+ } else {
|
|
|
+ if (this.form.menuOption == 0) {
|
|
|
+ this.form.replyUrl = ''
|
|
|
+ } else {
|
|
|
+ this.form.targetId = ''
|
|
|
+ }
|
|
|
+ this.btnData.push(this.form)
|
|
|
+ this.modalCancel()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // operate组件 ======================
|
|
|
+ operateFn(index) {
|
|
|
+ console.log('我点击了！', index)
|
|
|
+ },
|
|
|
+ operateDelFn(index) {
|
|
|
+ console.log('我删除了！', index)
|
|
|
+ },
|
|
|
+ operateAddFn() {
|
|
|
+ if (this.btnData.length > 5) {
|
|
|
+ this.$msg('子菜单不能超过五个!')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.addModule = true
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -178,7 +237,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.iconfont-blo {
|
|
|
- margin-right: 10px;
|
|
|
+ margin-right: 6px;
|
|
|
}
|
|
|
.iconfont {
|
|
|
color: $fontColor3;
|
liujd