update

mobile-code/src/pages.json

@@ -167,6 +167,12 @@
 					"style": {
 						"navigationBarTitleText": "会员等级设置"
 					}
+				},
+				{
+					"path": "password",
+					"style": {
+						"navigationBarTitleText": "密码设置"
+					}
 				}
 			]
 		}

mobile-code/src/pages/admin/components/module/operate-line.vue

@@ -0,0 +1,86 @@
+<template>
+	<div class="operate-line-module" :class="[isModify ? 'witer' : 'back']" :style="{top: top + 'rpx', right: right + 'rpx'}">
+		<div class="operate-list" :style="{height: listHei + 'rpx'}" v-for="(item, index) in btnData" :key="index" @click="item.click()">
+			<i v-if="isModify" class="iconfont iconguanbi icon-del"></i>
+			<div class="btn-text">{{ item.text }}</div>
+		</div>
+		<div v-if="isModify" class="operate-list" :style="{height: listHei + 'rpx'}">
+			<i class="iconfont icontupiantianjia icon-add"></i>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'operate-line-module',
+	props: {
+		// 是否可以操作
+		isModify: {
+			type: Boolean,
+			default: false
+		},
+		top: {
+			type: Number,
+			default: 350
+		},
+		right: {
+			type: Number,
+			default: 40
+		},
+		// 按钮列表
+		btnData: {
+			type: Array,
+			default: () => []
+		},
+		// 按钮列表高度
+		listHei: {
+			type: Number,
+			default: 100
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.operate-line-module {
+		position: absolute;
+		border-radius: 10px;
+		padding: 0 10px;
+		width: 170px;
+		&.witer {
+			background-color: #fff;
+		}
+		&.back {
+			background: rgba(0, 0, 0, 0.8);
+			box-shadow: 0px 3px 6px 0px rgba(29, 29, 29, 0.7);
+		}
+		&::after {
+			content: '';
+            position: absolute;
+            bottom: -28px;
+            left: 80px;
+			width: 0;
+			height: 0;
+			// top: 16px;
+			border: 14px solid #fff;
+			border-color: #fff transparent transparent transparent !important;
+		}
+		// 操作列表
+		.operate-list {
+			@include disFlex(center, center);
+			border-top: 1px solid $borderColor;
+			position: relative;
+			.icon-del {
+				position: absolute;
+				top: 14px;
+				right: 0;
+				font-size: 24px;
+				transform: scale(0.6);
+			}
+			.icon-add {
+				color: #09bb07;
+				font-size: 24px;
+			}
+		}
+	}
+</style>

mobile-code/src/pages/admin/components/module/operate.vue

@@ -54,7 +54,7 @@ export default {
 			background: rgba(0, 0, 0, 0.8);
 			box-shadow: 0px 3px 6px 0px rgba(29, 29, 29, 0.7);
 			border-radius: 10px;
-			width: max-content;
+			// width: max-content;
 			height: 100px;
 			@include disFlex(center, space-between);
 			// padding: 14px 0;

mobile-code/src/pages/setting/password.vue

@@ -0,0 +1,79 @@
+<template>
+	<div class="app-content">
+		<!-- tabs -->
+		<div class="tabs-wrap">
+			<button class="admin-button-com blue">账户设置</button>
+			<button class="admin-button-com">确认密码设置</button>
+		</div>
+		<!-- 输入框 - block -->
+		<div class="input-line-wrap">
+			<tui-list-cell class="line-cell" :hover="false">
+				<div class="tui-title">旧密码</div>
+				<input placeholder-class="phcolor" class="tui-input" name="name" placeholder="首次设置不需要填写" maxlength="50" type="number" />
+			</tui-list-cell>
+			<tui-list-cell class="line-cell" :hover="false">
+				<div class="tui-title">密码</div>
+				<input placeholder-class="phcolor" class="tui-input" name="phone" placeholder="防止别人登录，密码设复杂点" maxlength="50" type="number" />
+			</tui-list-cell>
+			<tui-list-cell class="line-cell" :hover="false">
+				<div class="tui-title">确认密码</div>
+				<input placeholder-class="phcolor" class="tui-input" name="phone" placeholder="请输入确认密码" maxlength="50" type="number" />
+			</tui-list-cell>
+			<div class="btn-wrap">
+				<button class="admin-button-com blue big">提交</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import TuiListCell from '@/components/plugin/list-cell'
+export default {
+	name: 'password-setting',
+	components: {
+		TuiListCell
+	},
+	data() {
+		return {
+			tabIndex: 0,
+			tabs: [
+				{
+					name: '账户设置'
+				},
+				{
+					name: '确认密码设置'
+				}
+			]
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.tabs-wrap {
+		width: calc(100% - 60px);
+		padding: 20px 30px;
+		.admin-button-com {
+			width: 50%;
+			padding-top: 16px;
+			padding-bottom: 16px;
+			&:first-child {
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+			&:last-child {
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+			}
+		}
+	}
+	// 按钮
+	.btn-wrap {
+		width: calc(100% - 60px);
+		margin: 60px 30px 0;
+		.admin-button-com {
+			width: 100%;
+			margin: 0 auto;
+		}
+	}
+</style>

mobile-code/src/pages/setting/wx-menu.vue

@@ -2,12 +2,12 @@
 	<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>
 			<!-- 中间快 -->
 			<div class="wx-content"></div>
 			<!-- 按钮 -->
@@ -24,20 +24,70 @@
 			</div>
 		</div>
 		<!-- 提示 -->
-		<!-- <div class="prompt-text">菜单最多只能添加5个，可以没有字菜单。</div> -->
+		<div class="prompt-text">菜单最多只能添加5个，可以没有字菜单。</div>
 		<!-- 按钮 -->
-		<!-- <div class="btn-wrap">
-			<div class="admin-button-com big">添加</div>
+		<div class="btn-wrap">
+			<div class="admin-button-com big" @click="addModule = true">添加</div>
 			<div class="admin-button-com blue big">提交</div>
-		</div> -->
+		</div>
+		<!-- 操作弹窗 -->
+		<operate-line-module v-if="operateShow" :btnData="btnData" :isModify="true" />
+		<!-- 添加弹窗 -->
+		<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" 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" />
+								<span class="checkbox-text">常用网址</span>
+							</label>
+							<label class="list" for="goodsLink">
+								<radio id="goodsLink" value="链接商品" />
+								<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>
+						<div class="inp-list-line">
+							<div class="line-input">
+								<input type="text" placeholder="必须以http开头的网址" :adjust-position="false" class="inp-input" />
+							</div>
+						</div>
+					</block>
+				</div>
+			</template>
+		</modal-module>
 	</div>
 </template>
 
 <script>
+import ModalModule from '@/components/plugin/modal'
+import OperateLineModule from '@/pages/admin/components/module/operate-line'
 export default {
 	name: 'wx-menu-setting',
+	components: {
+		ModalModule,
+		OperateLineModule
+	},
 	data() {
 		return {
+			addModule: false,
+			operateShow: false,
 			activeIndex: 2,
 			menuData: [
 				{
@@ -49,8 +99,29 @@ export default {
 				{
 					name: '小清清清3'
 				}
+			],
+			// 按钮列表
+			btnData: [
+				{
+					text: '名师风采'
+				},
+				{
+					text: '培训课堂'
+				},
+				{
+					text: '学员天地'
+				},
+				{
+					text: '首页'
+				}
 			]
 		}
+	},
+	methods: {
+		modalCancel() {
+			this.addModule = false
+		},
+		radioChange() {}
 	}
 }
 </script>
@@ -60,6 +131,7 @@ export default {
 		padding-top: 30px;
 		min-height: calc(100vh - 30px);
 		background-color: #fff;
+		position: relative;
 	}
 	// wx 容器
 	.wx-wrap {
@@ -80,7 +152,7 @@ export default {
 		.wx-content {
 			width: 100%;
 			height: 724px;
-			background-color: #EDEDED;
+			background-color: #ededed;
 		}
 		// 按钮
 		.wx-btn {
@@ -100,9 +172,9 @@ export default {
 				@include disFlex(center, center);
 				border-left: 2px solid $borderColor;
 				&.active {
-					color: #09BB07;
+					color: #09bb07;
 					.iconfont {
-						color: #09BB07;
+						color: #09bb07;
 					}
 				}
 				.iconfont-blo {
@@ -129,4 +201,32 @@ export default {
 			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>