update

mobile-code/src/components/app-coupon-sel.vue

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

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-font-color-1">优惠券</div>
+							<div class="app-color-1">优惠券</div>
 							<div>适用：全品类</div>
 							<div>有效至：2020-10-11</div>
 						</div>

mobile-code/src/components/plugin/alert.vue

@@ -0,0 +1,134 @@
+<template>
+	<view>
+		<view class="tui-alert-class tui-alert-box" :class="[show?'tui-alert-show':'']">
+			<view class="tui-alert-content" :style="{fontSize:size+'rpx',color:color}">
+				<slot></slot>
+			</view>
+			<view class="tui-alert-btn" :style="{color:btnColor}" hover-class="tui-alert-btn-hover" :hover-stay-time="150"
+			 @tap.stop="handleClick">{{btnText}}</view>
+		</view>
+		<view class="tui-alert-mask" :class="[show?'tui-alert-mask-show':'']" @tap.stop="handleClickCancel"></view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiAlert',
+	props: {
+		// 控制显示
+		show: {
+			type: Boolean,
+			default: false
+		},
+		// 提示信息字体大小
+		size: {
+			type: Number,
+			default: 30
+		},
+		// 提示信息字体颜色
+		color: {
+			type: String,
+			default: '#333'
+		},
+		// 按钮字体颜色
+		btnColor: {
+			type: String,
+			default: '#EB0909'
+		},
+		btnText: {
+			type: String,
+			default: '确定'
+		},
+		// 点击遮罩 是否可关闭
+		maskClosable: {
+			type: Boolean,
+			default: false
+		}
+	},
+	methods: {
+		handleClick(e) {
+			if (!this.show) return
+				this.$emit('click', {})
+			},
+		handleClickCancel() {
+			if (!this.maskClosable) return
+				this.$emit('cancel')
+			}
+	}
+}
+</script>
+
+<style>
+	.tui-alert-box {
+		position: fixed;
+		width: 560rpx;
+		left: 50%;
+		top: 50%;
+		background: #fff;
+		transition: all 0.3s ease-in-out;
+		transform: translate(-50%, -50%) scale(0);
+		opacity: 0;
+		border-radius: 6rpx;
+		overflow: hidden;
+		z-index: 99998;
+	}
+
+	.tui-alert-show {
+		transform: translate(-50%, -50%) scale(1);
+		opacity: 1;
+	}
+
+	.tui-alert-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.5);
+		z-index: 99996;
+		transition: all 0.3s ease-in-out;
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.tui-alert-mask-show {
+		visibility: visible;
+		opacity: 1;
+	}
+
+	.tui-alert-content {
+		text-align: center;
+		color: #333333;
+		padding: 98rpx 48rpx 92rpx 48rpx;
+		box-sizing: border-box;
+		word-break: break-all;
+	}
+
+	.tui-alert-btn {
+		width: 100%;
+		height: 90rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: #fff;
+		box-sizing: border-box;
+		position: relative;
+		font-size: 32rpx;
+		line-height: 32rpx;
+	}
+
+	.tui-alert-btn-hover {
+		background: #f7f7f7;
+	}
+
+	.tui-alert-btn::before {
+		width: 100%;
+		content: "";
+		position: absolute;
+		border-top: 1rpx solid #E0E0E0;
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+		left: 0;
+		top: 0;
+	}
+</style>

mobile-code/src/pages.json

@@ -105,6 +105,18 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "pages/interest",
+			"pages": [
+				{
+					"path": "invite",
+					"style": {
+						"navigationBarTitleText": "邀请排行",
+						"enablePullDownRefresh": true
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {

mobile-code/src/pages/callback/index.vue

@@ -20,8 +20,8 @@
 					<span>￥</span>
 					<span class="app-size-36 app-bold">3251.00</span>
 				</div>
-				<div class="surplus app-font-color-3">剩余￥3515.00</div>
-				<div class="order-num app-font-color-3">订单号: 515155151515151551</div>
+				<div class="surplus app-color-3">剩余￥3515.00</div>
+				<div class="order-num app-color-3">订单号: 515155151515151551</div>
 				<!-- 一个主按钮 -->
 				<template v-if="false">
 					<div class="call-btn-com call-one-btn">

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

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

mobile-code/src/pages/goods/detail.vue

@@ -18,7 +18,7 @@
 					</app-tag>
 				</button>
 			</div>
-			<div class="shop-express app-font-color-3">
+			<div class="shop-express app-color-3">
 				<div>快递：0.00</div>
 				<div>月销2000</div>
 				<div>浙江杭州</div>

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

@@ -0,0 +1,141 @@
+<template>
+	<div class="app-content">
+		<!-- <div class="invite-top-img">
+			<img src="../../static/images/interest/invite.png" alt mode="widthFix" />
+		</div> -->
+		<div class="list-content">
+			<!-- <div class="invite-tabs">
+				<div class="tabs-list">
+					<div class="tabs-img">
+						<img src="../../static/images/user/attr-default.png" alt />
+					</div>
+					<div class="tab-list-right">
+						<div class>已邀请(人)</div>
+						<div class="tabs-num">29</div>
+					</div>
+				</div>
+				<div class="tabs-list">
+					<div class="tabs-img">
+						<img src="../../static/images/user/attr-default.png" alt />
+					</div>
+					<div class="tabs-list-right">
+						<div class>已下单(人)</div>
+						<div class="tabs-num">6</div>
+					</div>
+				</div>
+			</div> -->
+			<!-- 邀请记录 -->
+			<!-- <div class="invite-list-blo">
+				<div class="invite-list-tit flex-center-between">
+					<div class="app-size-30">邀请记录</div>
+					<div class="flex-center-end app-color-3">
+						<span>规则说明</span>
+						<i class="iconfont iconxiaoxi"></i>
+					</div>
+				</div>
+				<div class="invite-list-wrap">
+					<div class="invite-list flex-center-between" v-for="(item, index) in 6" :key="index">
+						<div class="list-left flex-center-start">
+							<div class="list-img">
+								<img src="../../static/images/user/attr-default.png" alt />
+							</div>
+							<div class>
+								<div class="app-size-30">冯宝宝</div>
+								<div class="app-color-3">
+									<span>2019-10-10 10:00 下单</span>
+									<span class="app-price">¥198</span>
+								</div>
+							</div>
+						</div>
+						<div class="app-size-26">已兑奖</div>
+					</div>
+					<div class="load-more flex-center-center app-color-3">加载更多...</div>
+				</div>
+			</div> -->
+		</div>
+        <!-- 弹窗 -->
+        <alert-module :show="showAlert" @click="hideAlert" @cancel="hideAlert" :maskClosable="hideAlert" >
+
+        </alert-module>
+	</div>
+</template>
+
+<script>
+import alertModule from '@/components/plugin/alert'
+export default {
+	name: 'invite',
+	components: {
+		alertModule
+	},
+	data() {
+		return {
+			showAlert: true
+		}
+	},
+	methods: {
+		hideAlert() {
+			this.showAlert = false
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.app-content {
+        width: 100%;
+		// position: relative;
+    }
+    .list-content {
+		position: relative;
+		top: -100px;
+		width: 96%;
+		margin: 0 auto;
+    }
+	.invite-tabs {
+        padding: 20px 60px 24px;
+        // border-bottom: 20px solid #f5f5f5;
+        margin-bottom: 20px;
+		color: $fontColor3;
+		border-radius: 10px;
+		background-color: #fff;
+		@include disFlex(center, space-between);
+		.tabs-list {
+			@include disFlex(center, flex-end);
+		}
+		.tabs-img {
+			width: 90px;
+			margin-right: 20px;
+		}
+		.tabs-num {
+            font-size: 40px;
+            color: #FF5400;
+            margin-top: 8px;
+		}
+	}
+	.invite-list-blo {
+		padding: 20px 20px 24px;
+		border-radius: 10px;
+		background-color: #fff;
+		.invite-list-tit {
+			margin-bottom: 20px;
+			.iconfont {
+				margin-left: 10px;
+				font-size: 34px;
+			}
+		}
+		.invite-list-wrap {
+			.invite-list {
+				padding: 14px 0;
+				border-bottom: 1px solid $borderColor;
+			}
+			.list-img {
+				width: 80px;
+				margin-right: 20px;
+			}
+			// 加载更多
+			.load-more {
+				padding: 24px 0 6px;
+			}
+		}
+	}
+</style>

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

@@ -2,7 +2,7 @@
 	<div class="app-content">
 		<div class="list-wrap" v-for="(item, index) in 4" :key="index" @click="$util.pageTo('/pages/order/detail')">
 			<div class="list-top flex-center-between">
-				<div class="app-font-color-3">订单编号：3261515151</div>
+				<div class="app-color-3">订单编号：3261515151</div>
 				<div class="app-price">等待支付</div>
 			</div>
 			<div class="list-blo">

mobile-code/src/pages/user/index.vue

@@ -69,7 +69,7 @@
 						<div class="list-label">支付密码设置</div>
 					</div>
 				</tui-list-cell>
-				<tui-list-cell class="tui-list" @click="detail">
+				<tui-list-cell class="tui-list" @click="$util.pageTo('/pages/interest/invite')">
 					<div class="list-wrap">
 						<div class="list-label">会员权益</div>
 					</div>
@@ -116,7 +116,7 @@
 				<!-- 关注公众号 -->
 				<template v-if="stepIndex == 2">
 					<div class="wx-public-wrap">
-						<div class="app-font-color-3">国兰华尚关联的公众号</div>
+						<div class="app-color-3">国兰华尚关联的公众号</div>
 						<div class="flex-center-between">
 							<div class="wx-public-left">
 								<div class="wx-public-img">

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

@@ -105,15 +105,15 @@
 	padding: 0 30px;
 }
 
-.app-font-color-1 {
+.app-color-1 {
     color: $fontColorMain;
 }
 
-.app-font-color-2 {
+.app-color-2 {
     color: $fontColor2;
 }
 
-.app-font-color-3 {
+.app-color-3 {
     color: $fontColor3;
 }