update

mobile-code/src/components/module/app-activily-coupon.vue

@@ -19,7 +19,7 @@
 					</div>
 					<div class="list-det-right">
 						<div class="coupon-message">
-							<div class="app-color-1">优惠券</div>
+							<div class="app-color-0">优惠券</div>
 							<div>适用：全品类</div>
 							<div>有效至：2020-10-11</div>
 						</div>

mobile-code/src/pages.json

@@ -73,7 +73,7 @@
 				{
 					"path": "admin/my-invite",
 					"style": {
-						"navigationBarTitleText": "邀请列表"
+						"navigationBarTitleText": "我的邀请"
 					}
 				},
 				{
@@ -140,6 +140,35 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "pages/setting",
+			"pages": [
+				{
+					"path": "list",
+					"style": {
+						"navigationBarTitleText": "设置"
+					}
+				},
+				{
+					"path": "wx-menu",
+					"style": {
+						"navigationBarTitleText": "微信菜单设置"
+					}
+				},
+				{
+					"path": "coupon",
+					"style": {
+						"navigationBarTitleText": "新人领券设置"
+					}
+				},
+				{
+					"path": "level",
+					"style": {
+						"navigationBarTitleText": "会员等级设置"
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {

mobile-code/src/pages/admin/workbench.vue

@@ -149,21 +149,17 @@ export default {
 				{
 					name: '员工管理',
 					img: tabIcon6,
-					funtion: () => {
-						this.passwordModal = true
-					}
+					url: '/pages/staff/list'
 				},
 				{
 					name: '我的邀请',
 					img: tabIcon7,
-					funtion: () => {
-						this.upgradeModal = true
-					}
+					url: '/pages/interest/admin/my-invite'
 				},
 				{
 					name: '设置',
 					img: tabIcon8,
-					url: '/pages/coupon/list'
+					url: '/pages/setting/list'
 				}
 			],
 			// 总览

mobile-code/src/pages/interest/admin/my-invite.vue

@@ -1,12 +1,177 @@
 <template>
-	<div class="app-content"></div>
+	<div class="app-content">
+		<div class="rank-wrap">
+			<div class="user-blo">
+				<div class="user-wrap">
+					<div class="user-wrap-left">
+						<app-avatar-module :width="100" />
+						<div class="user-det">
+							<div class="user-name">果篮画上</div>
+							<div class="app-color-3">三级代理</div>
+						</div>
+					</div>
+					<div class="user-wrap-right">
+						<img src="../../../static/images/interest/invite-store.png" alt mode="widthFix" />
+					</div>
+				</div>
+				<!-- 数据 -->
+				<div class="user-data">
+					<div class="data-list" v-for="(item, index) in userData" :key="index">
+						<div class="app-size-30 app-bold">{{ item.value }}</div>
+						<div class="app-color-3">{{ item.name }}</div>
+						<div class="app-color-1" v-if="item.btn">{{ item.btn }}</div>
+					</div>
+				</div>
+			</div>
+			<div class="prompt-text">花店列表</div>
+			<app-tabs :tabs="tabs" :currentTab="tabIndex" @change="change" itemWidth="20%" :padding="0" />
+		</div>
+		<!-- list -->
+		<div class="rank-list">
+			<div class="list" v-for="(item, index) in 4" :key="index">
+				<app-avatar-module :width="80" />
+				<div class="list-det">
+					<div class="list-det-right">
+						<div class="list-name">冯宝宝</div>
+						<div>
+							<span>菲菲</span>
+							<span>15606970212</span>
+							<span class="app-price">￥1998</span>
+						</div>
+					</div>
+					<div>
+						<span v-if="index == 2" class="app-price">待付款</span>
+						<i v-else class="iconfont icondagou"></i>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
+import AppTabs from '@/components/plugin/tabs'
+import AppAvatarModule from '@/components/module/app-avatar'
 export default {
-	name: 'my-invite-list'
+	name: 'my-invite-list',
+	components: {
+		AppTabs,
+		AppAvatarModule
+	},
+	data() {
+		return {
+			tabIndex: 0,
+			tabs: [
+				{
+					name: '全部'
+				},
+				{
+					name: '待审核'
+				},
+				{
+					name: '试用中'
+				},
+				{
+					name: '已付费'
+				},
+				{
+					name: '已到期'
+				}
+			],
+			// 用户数据
+			userData: [
+				{
+					name: '账号余额(￥)',
+					value: 3089,
+					btn: '提现'
+				},
+				{
+					name: '邀请花店',
+					value: 328.6
+				},
+				{
+					name: '付费花店',
+					value: 1387
+				},
+				{
+					name: '累计收益(¥)',
+					value: 991024.27
+				}
+			]
+		}
+	}
 }
 </script>
 
 <style lang="scss" scoped>
+	.app-content {
+		// min-height: calc(100vh - 100px);
+		// padding-top: 100px;
+	}
+	// 头部
+	.rank-wrap {
+		background-color: #fff;
+		.user-blo {
+			padding: 40px 30px 28px 30px;
+		}
+		.user-wrap {
+			@include disFlex(center, space-between);
+			margin-bottom: 60px;
+			.user-wrap-left {
+				@include disFlex(center, flex-start);
+				.user-det {
+					margin-left: 20px;
+				}
+				.user-name {
+					font-size: 32px;
+					margin-bottom: 10px;
+				}
+			}
+			.user-wrap-right {
+				width: 230px;
+			}
+		}
+		.user-data {
+			@include disFlex(flex-start, space-between);
+			.data-list {
+				text-align: center;
+				& > div {
+					margin-top: 10px;
+					&:first-child {
+						margin-top: 0;
+					}
+				}
+			}
+		}
+		.prompt-text {
+			color: $fontColor3;
+			padding: 26px 0 16px 30px;
+			background-color: $backColor;
+		}
+	}
+	// list
+	.rank-list {
+		background-color: #fff;
+		.list {
+			@include disFlex(center, flex-start);
+			margin: 0 30px;
+			padding: 24px 0;
+			.list-det {
+				@include disFlex(center, space-between);
+				width: calc(100% - 100px);
+				margin-left: 20px;
+				.list-det-right {
+					color: $fontColor3;
+					.list-name {
+						color: #333;
+						font-size: 30px;
+						margin-bottom: 6px;
+					}
+				}
+				.icondagou {
+					color: $mainColor;
+				}
+			}
+		}
+	}
 </style>

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

@@ -0,0 +1,93 @@
+<template>
+	<div class="app-content">
+		<div class="module-com flex-center-between switch-blo">
+			<div class="app-size-32">开启自动涨价</div>
+			<div>
+				<switch checked @change="switchChangeFn" />
+			</div>
+		</div>
+		<div class="module-com new_wrap">
+			<div class="module-det">
+				<div>
+					<span>新人注册会员赠送</span>
+					<input type="text" class="setting-inp" />
+					<span>元优惠券，满</span>
+					<input type="text" class="setting-inp" />
+				</div>
+                <div>
+                    <span>元可以使用，</span>
+					<input type="text" class="setting-inp" />
+                    <span>天内有效。</span>
+                </div>
+			</div>
+		</div>
+		<div class="prompt-text">提示：在节日的前一天和当天, 商城设置自动涨价的商品将会全部 统一涨价。过后自动恢复原价。</div>
+		<div class="admin-button-com blue big">确定</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'setting-coupon',
+	data() {
+		return {}
+	},
+	methods: {
+		switchChangeFn(e) {
+			console.log('switch1 发生 change 事件，携带值为', e.target.value)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+    .prompt-text {
+        color: $fontColor3;
+        padding-bottom: 20px;
+        padding-left: 30px;
+    }
+	.module-com {
+        margin-bottom: 20px;
+        padding: 30px;
+        background-color: #fff;
+        color: $fontColor2;
+        .module-tit {
+            font-size: 28px;
+        }
+    }
+    .admin-button-com {
+        width: calc(100% - 100px);
+        margin: 60px 30px 0;
+    }
+    .switch-blo {
+        padding: 15px 30px;
+    }
+    .new_wrap {
+        .module-det {
+            color: $fontColor2;
+            font-size: 28px;
+            & > div {
+                @include disFlex(center, flex-start);
+                flex-wrap: wrap;
+                margin-bottom: 20px;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+            .setting-inp {
+                width: 120px;
+                height: 70px;
+                border: 2px solid $borderColor;
+                border-radius: 10px;
+                margin: 0 16px;
+                text-align: center;
+                &:first-child {
+                    margin-left: 0;
+                }
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+</style>

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

@@ -0,0 +1,114 @@
+<template>
+	<div class="app-content">
+		<!-- list -->
+		<div class="list-wrap">
+			<div class="list-tit">
+				<div>客户级别</div>
+				<div :class="[isModify ? 'list-tit-inp' : '']">成长值</div>
+				<div :class="[isModify ? 'list-tit-inp' : '']">折扣</div>
+				<div v-if="isModify">操作</div>
+			</div>
+			<div class="list" v-for="(item, index) in list" :key="index">
+				<div class="list-vip">
+					<app-vip-module class="level-img" :text="`VIP ${item.level}`" />
+				</div>
+				<div class="list-growth">
+					<input v-if="isModify" type="text" class="setting-inp" v-model="item.growth" />
+					<span v-else class="setting-span">{{ item.growth }}</span>
+				</div>
+				<div class="list-discount">
+					<input v-if="isModify" type="text" class="setting-inp" v-model="item.discount" />
+					<span v-else class="setting-span">{{ item.discount }}</span>
+				</div>
+				<div class="list-option" v-if="isModify">
+					<i class="iconfont iconshanchu1"></i>
+				</div>
+			</div>
+		</div>
+		<!-- 提示 -->
+		<div v-if="isModify" class="prompt-text">提示：点此上方的数字即可直接进行修改。提交后不能再修改, 请 谨慎操作。</div>
+		<!-- 按钮 -->
+		<div v-if="isModify" class="btn-wrap">
+			<div class="admin-button-com big">添加</div>
+			<div class="admin-button-com blue big">提交</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import appVipModule from '@/components/module/app-vip'
+export default {
+	name: 'level-setting',
+	components: {
+		appVipModule
+	},
+	data() {
+		return {
+			isModify: true,
+			list: [
+				{
+					level: 3,
+					growth: 22,
+					discount: 350
+				},
+				{
+					level: 2,
+					growth: 55,
+					discount: 351
+				}
+			]
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.list-wrap {
+		background-color: #fff;
+		.list-tit {
+			@include disFlex(center, space-between);
+			color: $fontColor3;
+			background-color: $backColor;
+			padding: 30px 30px 20px 30px;
+			.list-tit-inp {
+				width: 230px;
+				text-align: center;
+			}
+		}
+		.list {
+			@include disFlex(center, space-between);
+			height: 100px;
+			padding: 0 30px;
+			border-bottom: 2px solid $borderColor;
+			.setting-inp {
+				width: 230px;
+				height: 70px;
+				border: 2px solid $borderColor;
+				border-radius: 4px;
+				text-align: center;
+			}
+			.setting-span {
+				font-size: 32px;
+			}
+			.list-option {
+				.iconfont {
+					color: $fontColor3;
+					font-size: 36px;
+				}
+			}
+		}
+	}
+	.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);
+		}
+	}
+</style>

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

@@ -0,0 +1,55 @@
+<template>
+	<div class="app-content">
+		<tui-list-cell :arrow="true" v-for="(item, index) in data" :key="index" @click="$util.pageTo(item)">
+			<div class="list">
+				<i class="iconfont" :class="[item.icon]"></i>
+				<span>{{ item.name }}</span>
+			</div>
+		</tui-list-cell>
+	</div>
+</template>
+
+<script>
+import TuiListCell from '@/components/plugin/list-cell'
+export default {
+	name: 'setting-list',
+	components: {
+		TuiListCell
+	},
+	data() {
+		return {
+			data: [
+				{
+					name: '微信菜单设置',
+					icon: 'iconweixin',
+					url: '/pages/setting/wx-menu'
+				},
+				{
+					name: '新人领券设置',
+					icon: 'iconxinrenlingquanshezhi',
+					url: '/pages/setting/coupon'
+				},
+				{
+					name: '会员等级设置',
+					icon: 'iconhuiyuandengjishezhi',
+					url: '/pages/setting/level'
+				}
+			]
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.app-content {
+		min-height: calc(100vh - 20px);
+		padding-top: 20px;
+		.list {
+			font-size: 32px;
+			.iconfont {
+                font-size: 50px;
+                margin-right: 20px;
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,132 @@
+<template>
+	<div class="app-content">
+		<!-- 微信菜单 -->
+		<div class="wx-wrap">
+			<!-- <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="wx-content"></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="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">添加</div>
+			<div class="admin-button-com blue big">提交</div>
+		</div> -->
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'wx-menu-setting',
+	data() {
+		return {
+			activeIndex: 2,
+			menuData: [
+				{
+					name: '小清清清1'
+				},
+				{
+					name: '小清清清2'
+				},
+				{
+					name: '小清清清3'
+				}
+			]
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.app-content {
+		padding-top: 30px;
+		min-height: calc(100vh - 30px);
+		background-color: #fff;
+	}
+	// 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: 10px;
+				}
+				.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);
+		}
+	}
+</style>

mobile-code/src/static/css/base.scss

@@ -106,11 +106,11 @@
 }
 
 .app-color-0 {
-    color: #333;
+    color: $fontColorMain;
 }
 
 .app-color-1 {
-    color: $fontColorMain;
+    color: $mainColor;
 }
 
 .app-color-2 {

mobile-code/src/static/iconfont/iconfont.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'iconfont';  /* project id 1525256 */
-  src: url('//at.alicdn.com/t/font_1525256_besmbigfzj.eot');
-  src: url('//at.alicdn.com/t/font_1525256_besmbigfzj.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_1525256_besmbigfzj.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_1525256_besmbigfzj.woff') format('woff'),
-  url('//at.alicdn.com/t/font_1525256_besmbigfzj.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_1525256_besmbigfzj.svg#iconfont') format('svg');
+  src: url('https://at.alicdn.com/t/font_1525256_5tb21npupq.eot');
+  src: url('https://at.alicdn.com/t/font_1525256_5tb21npupq.eot?#iefix') format('embedded-opentype'),
+  url('https://at.alicdn.com/t/font_1525256_5tb21npupq.woff2') format('woff2'),
+  url('https://at.alicdn.com/t/font_1525256_5tb21npupq.woff') format('woff'),
+  url('https://at.alicdn.com/t/font_1525256_5tb21npupq.ttf') format('truetype'),
+  url('https://at.alicdn.com/t/font_1525256_5tb21npupq.svg#iconfont') format('svg');
 }
 
 .iconfont {
@@ -20,6 +20,18 @@
   content: "\e679";
 }
 
+.icondagou:before {
+  content: "\e607";
+}
+
+.iconcaidan:before {
+  content: "\e65d";
+}
+
+.iconshezhi:before {
+  content: "\e645";
+}
+
 .icondaizhifu:before {
   content: "\e733";
 }