update

mobile-code/src/components/app-footer.vue

@@ -91,7 +91,7 @@ export default {
 	z-index: 100;
     .btn-list-wrap {
         width: 100%;
-        @include direction(center, space-around);
+        @include disFlex(center, space-around);
         .btn_list {
             width: 30%;
         }

mobile-code/src/components/app-step.vue

@@ -0,0 +1,84 @@
+<template>
+	<div class="app-step">
+		<div class="step-list" :class="{'active' : index == i || index > i}" v-for="(item, i) in data" :key="i">
+			<div class="step-num">{{ i + 1 }}</div>
+			<div class="step-text">{{ item.text }}</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'app-step',
+	props: {
+		data: {
+			type: Array,
+			default: () => {
+				return [
+					{
+						text: '创建头像'
+					},
+					{
+						text: '生成手机号'
+					},
+					{
+						text: '关注公众号'
+					}
+				]
+			}
+		},
+		// 当前步骤
+		index: {
+			type: Number,
+			default: 0
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.app-step {
+		@include disFlex(center, space-between);
+		width: 100%;
+		.step-list {
+			position: relative;
+			flex: 1;
+			&.active {
+				.step-num {
+					color: #fff;
+					background-color: $mainColor;
+				}
+				.step-text {
+					color: $mainColor;
+				}
+			}
+			.step-num {
+				width: 32px;
+				height: 32px;
+				line-height: 30px;
+				text-align: center;
+				border-radius: 50%;
+				color: $fontColor3;
+				background-color: #eeeeec;
+				margin: 0 auto 14px;
+			}
+			.step-text {
+                color: $fontColor3;
+                text-align: center;
+			}
+			&::before {
+				position: absolute;
+				left: calc(50% + 16px);
+				top: 16px;
+				display: inline-block;
+				content: '';
+				width: 100%;
+				height: 2px;
+				background-color: #eeeeec;
+			}
+		    &:last-child::before {
+                width: 0;
+		    }
+		}
+	}
+</style>

mobile-code/src/components/module/app-trademark.vue

@@ -17,7 +17,7 @@ export default {
 .app-trademark {
 	width: 100%;
 	padding: 40px 0;
-	@include direction(center, center);
+	@include disFlex(center, center);
 	background-color: $backColor;
 	.img-wrap {
 		width: 138px;

mobile-code/src/components/plugin/bottom-popup.vue

@@ -0,0 +1,83 @@
+<template>
+	<view @touchmove.stop.prevent>
+		<view class="tui-popup-class tui-bottom-popup" :class="{'tui-popup-show':show}" :style="{background:bgcolor,height:height?height+'rpx':'auto'}">
+			<slot></slot>
+		</view>
+		<view class="tui-popup-mask" :class="[show?'tui-mask-show':'']" v-if="mask" @tap="handleClose"></view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiBottomPopup',
+	props: {
+		// 是否需要mask
+		mask: {
+			type: Boolean,
+			default: true
+		},
+		// 控制显示
+		show: {
+			type: Boolean,
+			default: false
+		},
+		// 背景颜色
+		bgcolor: {
+			type: String,
+			default: '#fff'
+		},
+		// 高度 rpx
+		height: {
+			type: Number,
+			default: 0
+		}
+	},
+	methods: {
+		handleClose() {
+			if (!this.show) {
+				return
+			}
+			this.$emit('close', {})
+		}
+	}
+}
+</script>
+
+<style>
+	.tui-bottom-popup {
+		width: 100%;
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 999;
+		visibility: hidden;
+		transform: translate3d(0, 100%, 0);
+		transform-origin: center;
+		transition: all 0.3s ease-in-out;
+		min-height: 20rpx;
+	}
+
+	.tui-popup-show {
+		transform: translate3d(0, 0, 0);
+		visibility: visible;
+	}
+
+	.tui-popup-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.6);
+		z-index: 996;
+		transition: all 0.3s ease-in-out;
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.tui-mask-show {
+		opacity: 1;
+		visibility: visible;
+	}
+</style>

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

@@ -139,7 +139,7 @@ export default {
 			box-sizing: border-box;
 			padding-bottom: env(safe-area-inset-bottom);
 			.goods-list {
-				@include direction(flex-start, flex-start);
+				@include disFlex(flex-start, flex-start);
 				margin: 40px 0;
 				.img-blo {
 					width: 200px;

mobile-code/src/pages/goods/components/buy-foot.vue

@@ -22,9 +22,9 @@ export default {}
 
 <style lang="scss" scoped>
 .app-footer {
-    @include direction(center, space-between);
+    @include disFlex(center, space-between);
     .btn-left {
-        @include direction(center, space-evenly);
+        @include disFlex(center, space-evenly);
         width: 36%;
         .iconfont {
             font-size: 44px;
@@ -37,7 +37,7 @@ export default {}
     }
     .btn-right {
         width: 62%;
-        @include direction(center, center);
+        @include disFlex(center, center);
         .button-com {
             width: calc(90% - 30px);
             height: 50px;

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

@@ -85,7 +85,7 @@ export default {
 		padding: 30px 0 30px 30px;
 		.tui-pro-titbox {
 			margin: 30px 0 20px;
-			@include direction(center, space-between);
+			@include disFlex(center, space-between);
 			.tui-pro-title {
 				width: 80%;
 			}
@@ -103,7 +103,7 @@ export default {
 		}
 		.shop-express {
 			padding-right: 30px;
-			@include direction(center, space-between);
+			@include disFlex(center, space-between);
 		}
 	}
 	.shop-desc {

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

@@ -76,12 +76,12 @@ export default {
 	.list-content {
 		background-color: #fff;
 		.tui-list {
-			@include direction(center, space-between);
+			@include disFlex(center, space-between);
 			padding-left: 0 !important;
 			margin-left: 20px;
 			.list-wrap {
 				width: calc(100% - 90px);
-				@include direction(center, flex-start);
+				@include disFlex(center, flex-start);
 				color: $fontColor3;
 				.list-label {
 					width: 150px;

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

@@ -2,12 +2,12 @@
 	<div class="app-content">
 		<div class="user-wrap">
 			<!-- 未登录 -->
-			<template v-if="false">
+			<template v-if="true">
 				<div class="no-login-attr login-attr-wrap">
 					<img src="../../static/images/user/attr-default.png" alt mode="widthFix" />
 				</div>
 				<div class="button-wrap">
-					<div class="button-com">申请会员</div>
+					<div class="button-com" @click="showPopup">申请会员</div>
 				</div>
 			</template>
 			<!-- 未登录 -->
@@ -85,7 +85,58 @@
 				</tui-list-cell>
 			</tui-list-view>
 		</div>
-
+		<!-- 登录弹窗 -->
+		<bottom-popup class="popup-wrap" :show="popupShow" @close="hidePopup">
+			<div class="app-close" @click="hidePopup">
+				<i class="iconfont iconclose"></i>
+			</div>
+			<div class="popup-content">
+				<div class="step-wrap">
+					<app-step :index="stepIndex" />
+				</div>
+				<!-- 获取手机号 -->
+				<template v-if="stepIndex == 0">
+					<div class="popup-attr-wrap">
+						<img src="../../static/images/user/attr-default.png" alt />
+					</div>
+					<div class="creat-account-btn">
+						<div class="button-com success">点击创建头像</div>
+					</div>
+				</template>
+				<!-- 注册完成 -->
+				<template v-if="stepIndex == 1">
+					<div class="popup-phone-wrap">
+						<div class="phone-icon">
+							<i class="iconfont iconshoujihao"></i>
+						</div>
+						<div class="phone-num font-bold">13285979347</div>
+					</div>
+					<div class="creat-account-btn">
+						<div class="button-com success">点击创建头像</div>
+					</div>
+				</template>
+				<!-- 关注公众号 -->
+				<template v-if="stepIndex == 2">
+					<div class="wx-public-wrap">
+						<div class="app-font-color-3">国兰华尚关联的公众号</div>
+						<div class="flex-center-between">
+							<div class="wx-public-left">
+								<div class="wx-public-img">
+									<img src="../../static/images/user/attr-default.png" alt="">
+								</div>
+								<div class="wx-public-det">
+									<div class="wx-public-tit">国兰华尚</div>
+									<div>花艺.品味.生活</div>
+								</div>
+							</div>
+							<div class="button-com wx-public-btn">查看</div>
+						</div>
+					</div>
+				</template>
+			</div>
+		</bottom-popup>
+		<!-- 登录弹窗 -->
+		<app-trademark />
 		<!-- <app-footer :activeIndex="3" /> -->
 	</div>
 </template>
@@ -94,17 +145,34 @@
 // import appFooter from '@/components/app-footer'
 import tuiListView from '@/components/plugin/list-view'
 import tuiListCell from '@/components/plugin/list-cell'
+import bottomPopup from '@/components/plugin/bottom-popup'
+import appStep from '@/components/app-step'
+import appTrademark from '@/components/module/app-trademark'
 export default {
 	name: 'user',
 	components: {
 		// appFooter
 		tuiListView,
-		tuiListCell
+		tuiListCell,
+		bottomPopup,
+		appStep,
+		appTrademark
 	},
 	data() {
-		return {}
+		return {
+			popupShow: false,
+			stepIndex: 0
+		}
 	},
-	onLoad(option) {}
+	onLoad(option) {},
+	methods: {
+		showPopup() {
+			this.popupShow = true
+		},
+		hidePopup() {
+			this.popupShow = false
+		}
+	}
 }
 </script>
 
@@ -127,7 +195,7 @@ export default {
 		.is-login-attr {
 			padding: 0 20px 0 48px;
 			.user-wrap-top {
-				@include direction(center, space-between);
+				@include disFlex(center, space-between);
 				.user-name {
 					font-size: 36px;
 					font-weight: 500;
@@ -135,7 +203,7 @@ export default {
 					color: #fff;
 				}
 				.user-level {
-					@include direction(center, center);
+					@include disFlex(center, center);
 				}
 				.user-blo-right {
 					margin-right: 30px;
@@ -154,7 +222,7 @@ export default {
 						left: 0;
 						display: inline-block;
 						content: '';
-						background-color: #FFE4BD;
+						background-color: #ffe4bd;
 						width: 200px;
 						height: 4px;
 						border-radius: 4px;
@@ -163,11 +231,11 @@ export default {
 			}
 		}
 		.button-wrap {
-			@include direction(center, center);
+			@include disFlex(center, center);
 		}
 	}
 	.surplus-wrap {
-		@include direction(flex-end, space-between);
+		@include disFlex(flex-end, space-between);
 		padding: 10px 50px 34px;
 		background-color: #fff;
 		.surplus-left {
@@ -195,9 +263,88 @@ export default {
 			padding-right: 50px;
 		}
 	}
-	img {
-		width: 100%;
-		height: 100%;
-		display: inline-block;
+	// 弹窗
+	/deep/.popup-wrap {
+		.tui-popup-class {
+			border-top-left-radius: 20px;
+			border-top-right-radius: 20px;
+		}
+		.popup-content {
+			padding-top: 60px;
+			.step-wrap {
+				width: 80%;
+				margin: 0 auto;
+			}
+			// 第一步
+			.popup-attr-wrap {
+				width: 160px;
+				height: 160px;
+				margin: 80px auto 60px;
+			}
+			.creat-account-btn {
+				width: 600px;
+				padding-bottom: 80px;
+				margin: 0 auto;
+				.button-com {
+					width: calc(100% - 60px);
+					height: 70px;
+					line-height: 70px;
+					text-align: center;
+					font-size: 32px;
+				}
+			}
+			// 第二步
+			.popup-phone-wrap {
+				@include disFlex(center, flex-start);
+				width: 600px;
+				// height: 94px;
+				margin: 142px auto 62px;
+				padding-left: 40px;
+				padding-bottom: 40px;
+				border-bottom: 1px solid $borderColor;
+				.phone-icon {
+					i {
+						font-size: 44px;
+					}
+				}
+				.phone-num {
+					font-size: 60px;
+					margin-left: 42px;
+					letter-spacing: 3px;
+				}
+			}
+			// 第三步
+			.wx-public-wrap {
+				width: 90%;
+				padding: 10px 16px 28px;
+				box-shadow: 2px 2px 10px #eee;
+				margin: 118px auto 194px;
+				border-radius: 10px;
+				.flex-center-between {
+					margin-top: 22px;
+					.wx-public-left {
+						@include disFlex(center, flex-start);
+						.wx-public-img {
+							width: 78px;
+							height: 78px;
+						}
+						.wx-public-det {
+							color: #7C7E7D;
+							margin-left: 20px;
+							.wx-public-tit {
+								color: #333;
+								font-size: 32px;
+								margin-bottom: 6px;
+							}
+						}
+					}
+					.wx-public-btn {
+						color: $mainColor1;
+						border-color: $borderColor1;
+						border-radius: 10px;
+					}
+				}
+			}
+		}
 	}
 </style>

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

@@ -42,45 +42,58 @@
 }
 
 .flex {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     display: flex;
 }
 
-.flex-v {
-    -webkit-box-orient: vertical;
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
+.flex-center-center {
+    @extend .flex;
+    align-items: center;
+    justify-content: center;
 }
 
-.flex-rr {
-    -webkit-box-orient: revert;
-    -webkit-flex-direction: row-reverse;
-    -ms-flex-direction: row-reverse;
-    flex-direction: row-reverse;
+.flex-center {
+    display: flex;
+    align-items: center;
 }
 
-.flex-vr {
-    -webkit-box-orient: revert;
-    -webkit-flex-direction: column-reverse;
-    -ms-flex-direction: column-reverse;
-    flex-direction: column-reverse;
+.flex-start {
+    @extend .flex;
+    align-items: flex-start;
 }
 
-.flex-pack-justify {
-    -webkit-box-pack: justify;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
+.flex-end {
+    @extend .flex;
+    align-items: flex-end;
+}
+
+.flex-center-between {
+    @extend .flex;
+    align-items: center;
     justify-content: space-between;
 }
 
-.flex-pack-justify-center {
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
+.flex-center-around {
+    @extend .flex;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.flex-center-evenly {
+    @extend .flex;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+.flex-center-start {
+    @extend .flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.flex-center-end {
+    @extend .flex;
+    align-items: center;
+    justify-content: flex-end;
 }
 
 .flex-pack-justify-start {

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

@@ -42,6 +42,16 @@ page, body {
     box-sizing: border-box;
 }
 
+// 公告关闭按钮
+.app-close {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	color: $fontColor3;
+	background-color: #fff;
+	padding: 20px;
+}
+
 // 按钮公共样式
 .button-com {
 	display: inline-block;
@@ -51,6 +61,7 @@ page, body {
 	background-color: #fff;
 	border-radius: 60px;
 	border: 1px solid $mainColor;
+	text-align: center;
 }
 .button-com.success {
 	color: #fff;
@@ -131,7 +142,7 @@ page, body {
     display: flex;
     justify-content: center;
     align-items: center;
-    letter-spacing: 3px;
+    // letter-spacing: 3px;
     & .add {
         width: 38px;
         height: 38px;

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

@@ -49,7 +49,7 @@
     display:-webkit-box !important;
 }
 
-@mixin direction($items: center,$justify: center){//位置
+@mixin disFlex($items: center,$justify: center){//位置
     display:flex;
     display:-webkit-flex;
     align-items: $items;

mobile-code/src/uni.scss

@@ -11,11 +11,11 @@ $imgUrl: 'https://wximg.meijiabang.com/hkds/miniapp/images/';
 // 所有样式为公共样式，已在全局引用可直接使用
 // 主色
 $mainColor: #FF2842;
-$auxiliaryColor1: #3a1b06;
+$mainColor1: #3A8840;
 $auxiliaryColor2: #ff6900;
 
 $blueColor: #2965fe;
-$greenColor: #09bb07;
+$greenColor: #3A8840;
 $redColor: #ff3841;
 // 字体色
 $fontColorMain: #333333;
@@ -25,6 +25,7 @@ $fontColor4: #bbbbbb;
 $fontColor5: #cccccc;
 // 边框
 $borderColor: #eee;
+$borderColor1: #46963E;
 // 背景色
 $backColor: #f5f5f5;