front-end/mobile-code/src/admin/setting/wx-menu.vue

<template>
	<div class="app-content">
		<!-- 微信菜单 -->
		<div class="wx-wrap">
			<div class="wx-bar">
				<div class="bar-img">
					<img :src="`${constant.imgUrl}/retail/setting/wx-bar-bg.png`" alt="">
				</div>
				<div class="bar-text">{{userInfo.merchantName}}</div>
			</div>
			<!-- 中间快 -->
			<div class="wx-content" @click="menuCancelFn"></div>
			<!-- 按钮 -->
			<div class="wx-btn">
				<div class="key-btn">
					<img class="key-btn-img" :src="`${constant.imgUrl}/retail/setting/wx-menu.png`" alt mode="widthFix" />
				</div>
				<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>
					<span>{{ item.name }}</span>
				</div>
			</div>
		</div>
		<!-- 提示 -->
		<div class="prompt-text">菜单最多只能添加5个，可以没有子菜单。</div>
		<!-- 按钮 -->
		<div class="btn-wrap">
			<div class="admin-button-com big default" @click="pageTo(1)">返回</div>
			<div class="admin-button-com blue big" @click="submitFn">提交</div>
		</div>
		<!-- 操作弹窗 -->
		<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>
				<div class="app-modal-input-wrap add-module-wrap">
					<div class="inp-list-line">
						<div class="line-label">名称</div>
						<div class="line-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="0" checked="checked" />
								<span class="checkbox-text">常用网址</span>
							</label>
							<label class="list" for="goodsLink">
								<radio id="goodsLink"  value="1" />
								<span class="checkbox-text">自定义网址</span>
							</label>
						</radio-group>
					</div>
					<!-- 常用网址 -->
					<block v-if="form.menuOption == 0">
						<div class="inp-list-line">
							<div class="line-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 == urlIndex ? 'blue' : 'default']" v-for="(item, index) in commonUrlData" :key="index" @click="selUrlFn(item, index)">{{ item.name }}</div>
						</div>
					</block>
				</div>
			</template>
		</modal-module>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import ModalModule from '@/components/plugin/modal'
import OperateLineModule from '@/admin/home/components/module/operate-line'
import { getMenu, updateMenu } from '@/api/menu'
import { commonUrl } from '@/api/common'
export default {
	name: 'wx-menu-setting',
	components: {
		ModalModule,
		OperateLineModule
	},
	data() {
		return {
			constant: this.$constant,
			form: {
				name: '',
				menuOption: 0,
				replyUrl: '',
				targetId: 0
			},
			addModule: false,
			operateShow: false,
			activeIndex: null,
			menuData: [],
			// 常用链接
			urlIndex: null,
			commonUrlData: [],
			// 操作菜单
			optionMenuData: null,
			operateLeft: 130,
			// 按钮列表
			btnData: []
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	onLoad() {
		// this.init()
	},
	methods: {
		init() {
			this._getDet()
			this._getUrl()
		},
		// api
		_getDet() {
			getMenu().then(res => {
				this.menuData = res.data
			})
		},
		_getUrl() {
			commonUrl().then(res => {
				this.commonUrlData = res.data
			})
		},
		submitFn() {
			console.log(this.menuData)
			// return false
			updateMenu(this.menuData).then(res => {
				console.log(res)
				this.$msg(res.msg)
			})
		},
		// 按钮操作
		addMenuFn() {
			if (this.menuData.length > 2) {
				this.$msg('主菜单最多只能三个！')
			}
		},
		menuClickFn(item, index) {
			this.operateLeft = index * 192 + 130
			this.activeIndex = index
			this.optionMenuData = item
			this.optionMenuData.children = this.optionMenuData.children ? this.optionMenuData.children : []
			this.btnData = item.children || []
			// this.optionMenuData = JSON.parse(JSON.stringify(item))
			// this.btnData = JSON.parse(JSON.stringify(item.children))
			this.operateShow = true
		},
		menuCancelFn() {
			this.operateShow = false
			this.optionMenuData = null
			this.menuClickFn = null
		},
		modalCancel() {
			this.addModule = false
			this.urlIndex = null
			this.resetForm()
		},
		// 常用链接
		selUrlFn(item, index) {
			this.form.targetId = item.id
			this.urlIndex = index
		},
		// 重置表单
		resetForm() {
			this.form = {
				name: '',
				menuOption: 0,
				replyUrl: '',
				targetId: 0
			}
		},
		// 添加菜单弹窗操作 ================
		radioChange(e) {
			this.form.menuOption = e.detail.value
		},
		// 自定义网址
		targetFn() {

		},
		modalClick(e) {
			let index = e.index
			if (index === 0) {
				this.modalCancel()
			} else {
				if (this.form.menuOption == 0) {
					this.form.targetId = ''
				} else {
					this.form.replyUrl = ''
				}
				this.btnData.push(this.form)
				this.modalCancel()
			}
		},
		// operate组件 ======================
		operateFn(index) {
			console.log('我点击了！', index)
		},
		operateDelFn(index) {
			console.log('我删除了！', index)
		},
		operateAddFn() {
			if (this.btnData && this.btnData.length > 4) {
				this.$msg('子菜单不能超过五个!')
				return false
			}
			this.addModule = true
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		padding-top: 30px;
		min-height: calc(100vh - 30px);
		background-color: #fff;
		position: relative;
	}
	// wx 容器
	.wx-wrap {
		margin: 0 30px;
		// 头部
		.wx-bar {
			position: relative;
			.bar-text {
				position: absolute;
				top: 50px;
				font-size: 34px;
				font-weight: 500;
				color: #fff;
				width: 100%;
				text-align: center;
			}
		}
		.wx-content {
			width: 100%;
			height: 724px;
			background-color: #ededed;
		}
		// 按钮
		.wx-btn {
			@include disFlex(center, space-between);
			background-color: #f7f7f7;
			padding: 0 20px 10px 10px;
			height: 90px;
			.key-btn {
				width: 13%;
				.key-btn-img {
					width: 58px;
				}
			}
			.menu-btn {
				width: 29%;
				height: calc(100% - 30px);
				@include disFlex(center, center);
				border-left: 2px solid $borderColor;
				&.active {
					color: #09bb07;
					.iconfont {
						color: #09bb07;
					}
				}
				.iconfont-blo {
					margin-right: 6px;
				}
				.iconfont {
					color: $fontColor3;
					font-size: 24px;
					transform: scale(0.6);
				}
			}
		}
	}
	.prompt-text {
		padding: 30px 30px 60px 30px;
		color: $fontColor3;
	}
	// 按钮
	.btn-wrap {
		width: calc(100% - 60px);
		margin: 0 30px;
		@include disFlex(center, space-between);
		.admin-button-com {
			width: calc(48% - 40px);
		}
	}
	// 添加弹窗
	.add-module-wrap {
		.inp-list-line {
			margin-top: 40px;
			&:first-child {
				margin-top: 0;
			}
		}
		.button-wrap {
			justify-content: flex-start;
			flex-wrap: wrap;
			// width: 100%;
			.admin-button-com {
				width: 130px;
				border-radius: 4px;
				padding-top: 16px;
				padding-bottom: 16px;
				flex-shrink: 0;
				margin-left: 20px;
				&:nth-child(3n + 1) {
					margin-left: 0;
				}
				&:nth-child(n + 4) {
					margin-top: 20px;
				}
			}
		}
	}
</style>