项目分开

mobile-code/src/components/App_header_nav.vue

@@ -1,111 +0,0 @@
-<template>
-    <div class="navBox">
-        <ul
-        :class="['nav',isFixed?'isFixed':'']">
-            <li
-                v-for="(item,index) in navTab"
-                :key="index"
-                :class="active == (index) ? 'navactive' : '' "
-                @click="switchtab(index, item)">
-                <div class="tab_body">
-                    <span class="tab_title" >{{ $util.isEmpty(item)?'' : item.text }}</span>
-                </div>
-            </li>
-        </ul>
-    </div>
-</template>
-
-<script>
-export default {
-	name: 'AppHeaderNav',
-	props: {
-		navTab: {
-			type: Array,
-			default: () => []
-		},
-		value: {
-			type: [Number, String],
-			default: 0
-		},
-		isFixed: {
-			type: Boolean,
-			default: false
-		}
-	},
-	data() {
-		return {
-			active: 0
-		}
-	},
-	created() {
-		this.active = +this.value
-	},
-	methods: {
-		switchtab(index, selector) {
-			this.active = index
-			this.$emit('sliderClick', {
-				...selector,
-				idx: index
-			})
-		}
-	},
-	watch: {
-		value(val) {
-			this.active = val
-			this.$emit('input', val)
-		},
-		active(val) {
-			this.$emit('input', val)
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-	 .navBox {
-		  height: 90px;
-		  width: 100%;
-          box-sizing: border-box;
-            background: #FFFFFF;
-            position: relative;
-	 }
-     .nav {
-            height: 90px;
-            width: 100%;
-            position: fixed;
-            z-index: 9;
-            background: #FFFFFF;
-            border-bottom: 1px solid #dddddd;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            line-height: 90px;
-            &.isFixed{
-                position: relative;
-            }
-            li {
-                text-align: center;
-                flex: 1;
-                font-size: 30px;
-                color: #999999;
-                position: relative;
-                height: 100%;
-            }
-            .navactive {
-                font-size: 34px;
-				color: #333333;
-            }
-            .navactive::after {
-                content: "";
-                display: block;
-                position: absolute;
-                bottom: 0;
-                left: 50%;
-                width: 60px;
-                height: 6px;
-                border-radius: 2.5px;
-				background-color: #ffd11a;
-				transform: translate(-50%, 0);
-            }
-        }
-</style>

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

@@ -1,5 +1,5 @@
 <template>
-	<modal :show="show" @cancel="modalCancel" :custom="true" padding="0 0" bgcolor="none">
+	<modal-module :show="show" @cancel="modalCancel" :custom="true" padding="0 0" bgcolor="none">
 		<div class="app-activily-coupon" @click="receive">
 			<div class="sctivliy-bg">
 				<img src="../../static/images/coupon/new-bg.png" alt mode="widthFix" />
@@ -27,15 +27,15 @@
 				</div>
 			</div>
 		</div>
-	</modal>
+	</modal-module>
 </template>
 
 <script>
-import modal from '@/components/plugin/modal'
+import modalModule from '@/components/plugin/modal'
 export default {
 	name: 'app-activily-coupon',
 	components: {
-		modal
+		modalModule
 	},
 	props: {
 		show: {

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

@@ -1,7 +1,7 @@
 <template>
-	<div class="app-search-module">
-        <div class="icon-wrap">
-            <i class="iconfont iconsearch"></i>
+	<div class="app-search-module" :style="{backgroundColor: backColor}">
+        <div class="icon-wrap" v-if="isIcon">
+            <i class="iconfont" :class="[icon]" ></i>
         </div>
         <div class="input-wrap">
             <input type="text" :placeholder="placeholder" placeholder-class="placeholder">
@@ -16,6 +16,21 @@ export default {
 		placeholder: {
 			type: String,
 			default: '请输入'
+		},
+		// 是否有icon
+		isIcon: {
+			type: Boolean,
+			default: true
+		},
+		// 显示的icon
+		icon: {
+			type: String,
+			default: 'iconsearch'
+		},
+		// 背景色
+		backColor: {
+			type: String,
+			default: '#F0F2F6'
 		}
 	}
 }
@@ -26,10 +41,9 @@ export default {
     @include disFlex(center, flex-start);
     height: 66px;
     width: 100%;
-    background-color: #F0F2F6;
     border-radius: 10px;
     .icon-wrap {
-        margin: 0 14px 0 20px;
+        margin-left: 20px;
         width: 40px;
         .iconfont {
             color: #ccc;
@@ -37,8 +51,10 @@ export default {
     }
     .input-wrap {
         width: calc(100% - 90px);
+        margin-left: 14px;
         input {
             font-size: 26px;
+            text-align: left;
         }
         .placeholder {
             color: #ccc;

mobile-code/src/pages.json

@@ -25,13 +25,13 @@
 			}
 		},
 		{
-			"path": "pages/home/redirect",
+			"path": "pages/common/redirect",
 			"style": {
 				"navigationBarTitleText": "加载中..."
 			}
 		},
 		{
-			"path": "pages/home/webview/index",
+			"path": "pages/common/webview",
 			"style": {
 				"navigationBarBackgroundColor": "#ffffff",
 				"navigationBarTextStyle": "black"

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

@@ -9,10 +9,10 @@
 						<div class="list-attr" v-if="index == 2">
 							<img src="../../static/images/user/attr-default.png" alt />
 						</div>
-						<div class="list-content" v-if="index == 2">花之物语~ 红色系列 贼啦美丽贼 啦魅力贼拉有品德高尚的情操，快 客来拉拉~</div>
+						<div class="list-content" v-if="index == 2">哇哈哈哈~ 苏伟强是个大骗子， 苏伟强是个大骗子，拉~</div>
 						<div class="list-content list-img" v-else>
 							<div class="list-content-img">
-								<img src="../../static/images/logout.png" alt mode="center" />
+								<img src="../../static/images/extension.png" alt mode="center" />
 							</div>
 							<div class="list-img-text">注册会员</div>
 						</div>
@@ -29,35 +29,55 @@
 			<!-- 快捷 -->
 			<div class="tool-wrap">
 				<div class="tool-tit">我想</div>
-				<div class="tool-list">发链接</div>
+				<div class="tool-list" @click="linkShow = true">发链接</div>
 				<div class="tool-list">发商品图</div>
 				<div class="tool-list">发照片</div>
 			</div>
+			<div class="input-wrap">
+				<div class="map-search">
+					<app-search-module placeholder="输入消息..." :isIcon="false" backColor="#fff" />
+				</div>
+				<button class="button-com red">发送</button>
+			</div>
 		</div>
+		<!-- 发链接弹窗 -->
+		<modal-module :show="linkShow" @cancel="modalCancel" :custom="true" padding="20px 44px">
+			<div class="link-modal-wrap">
+				<div class="link-tit">发链接</div>
+				<div class="btn-wrap">
+					<button class="button-com default big">注册会员</button>
+					<button class="button-com default big">快速付款</button>
+					<button class="button-com default big">商城</button>
+				</div>
+			</div>
+		</modal-module>
 	</div>
 </template>
 
 <script>
+import appSearchModule from '@/components/module/app-search'
+import modalModule from '@/components/plugin/modal'
 export default {
 	name: 'chat-index',
+	components: {
+		appSearchModule,
+		modalModule
+	},
 	data() {
 		return {
-			height: 667
+			linkShow: false
 		}
 	},
-	onLoad(option) {
-		// setTimeout(() => {
-		// 	uni.getSystemInfo({
-		// 		success: res => {
-		// 			this.height = res.windowHeight
-		// 		}
-		// 	})
-		// }, 50)
-	},
+	onLoad(option) {},
 	computed: {
 		scrollHei() {
 			return uni.upx2px(1334 - 170) + 'px'
 		}
+	},
+	methods: {
+		modalCancel() {
+			this.linkShow = false
+		}
 	}
 }
 </script>
@@ -152,14 +172,59 @@ export default {
 		}
 	}
 	.chat-bottom-wrap {
-        width: calc(100% - 40px);
-        height: 170px;
+		width: calc(100% - 40px);
+		height: 170px;
 		padding: 0 20px;
+		background-color: $backColor;
+		display: block;
 		// 快捷
 		.tool-wrap {
 			@include disFlex(center, flex-start);
+			padding-top: 14px;
+			padding-bottom: 26px;
+			margin-left: 4px;
 			.tool-tit {
 			}
+			.tool-list {
+				height: 44px;
+				line-height: 44px;
+				border: 1px solid $borderColor;
+				border-radius: 50px;
+				padding: 0 14px;
+				margin-left: 10px;
+				background-color: #fff;
+			}
 		}
+		// 输入框
+		.input-wrap {
+			@include disFlex(center, space-between);
+			.map-search {
+				width: 74%;
+			}
+			.button-com {
+				width: 24%;
+				border-radius: 10px;
+			}
+			/deep/.app-search-module {
+				height: 70px;
+				input {
+					font-size: 32px;
+				}
+			}
+        }
 	}
+        // 发链接弹窗
+        .link-modal-wrap {
+            .link-tit {
+                text-align: center;
+                font-size: 40px;
+                margin-bottom: 40px;
+            }
+            .btn-wrap {
+                .button-com {
+                    display: block;
+                    margin-bottom: 20px;
+                }
+            }
+        }
 </style>

mobile-code/src/pages/goods/components/sel-popup.vue

@@ -102,8 +102,8 @@ export default {
         .button-com {
             width: 80%;
             font-size: 32px;
-            padding-top: 12px;
-            padding-bottom: 12px;
+            // padding-top: 12px;
+            // padding-bottom: 12px;
         }
 	}
 

mobile-code/src/pages/home/components/login-popup.vue

@@ -0,0 +1,165 @@
+<template>
+	<bottom-popup class="popup-wrap" :show="show" @close="hidePopup">
+		<app-close @close="hidePopup" />
+		<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">
+					<button class="button-com red big">点击创建头像</button>
+				</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">
+					<button class="button-com red big">点击创建头像</button>
+				</div>
+			</template>
+			<!-- 关注公众号 -->
+			<template v-if="stepIndex == 2">
+				<div class="wx-public-wrap">
+					<div class="app-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>
+						<button class="button-com wx-public-btn">查看</button>
+					</div>
+				</div>
+			</template>
+		</div>
+	</bottom-popup>
+</template>
+
+<script>
+import appStep from '@/components/app-step'
+import bottomPopup from '@/components/plugin/bottom-popup'
+import appClose from '@/components/module/app-close'
+export default {
+	name: 'login-popup-module',
+	components: {
+		appStep,
+		bottomPopup,
+		appClose
+	},
+	props: {
+		stepIndex: {
+			type: Number,
+			default: 0
+		},
+		show: {
+			type: Boolean,
+			default: false
+		}
+	},
+	methods: {
+		hidePopup() {
+			this.$emit('hide')
+		}
+	}
+}
+</script>
+
+<style lang='scss' scoped>
+	// 弹窗
+	.popup-wrap {
+		/deep/.tui-popup-class {
+			border-top-left-radius: 20px;
+			border-top-right-radius: 20px;
+			// 适配iphoneX
+			padding-bottom: env(safe-area-inset-bottom);
+		}
+		.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: 100%;
+					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/pages/home/user.vue

@@ -85,53 +85,7 @@
 			</tui-list-view>
 		</div>
 		<!-- 登录弹窗 -->
-		<bottom-popup class="popup-wrap" :show="popupShow" @close="hidePopup">
-			<app-close @close="hidePopup" />
-			<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">
-						<button class="button-com red big">点击创建头像</button>
-					</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">
-						<button class="button-com red big">点击创建头像</button>
-					</div>
-				</template>
-				<!-- 关注公众号 -->
-				<template v-if="stepIndex == 2">
-					<div class="wx-public-wrap">
-						<div class="app-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>
-							<button class="button-com wx-public-btn">查看</button>
-						</div>
-					</div>
-				</template>
-			</div>
-		</bottom-popup>
+		<login-popup :show="popupShow" @hide="hidePopup" />
 		<!-- 登录弹窗 -->
 		<app-trademark />
 		<!-- <app-footer :activeIndex="3" /> -->
@@ -142,20 +96,16 @@
 // 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 loginPopup from '@/pages/home/components/login-popup'
 import appTrademark from '@/components/module/app-trademark'
-import appClose from '@/components/module/app-close'
 export default {
 	name: 'user',
 	components: {
 		// appFooter
 		tuiListView,
 		tuiListCell,
-		bottomPopup,
-		appStep,
-		appTrademark,
-		appClose
+		loginPopup,
+		appTrademark
 	},
 	data() {
 		return {
@@ -270,88 +220,4 @@ export default {
 			}
 		}
 	}
-	// 弹窗
-	/deep/.popup-wrap {
-		.tui-popup-class {
-			border-top-left-radius: 20px;
-			border-top-right-radius: 20px;
-			// 适配iphoneX
-			padding-bottom: env(safe-area-inset-bottom);
-		}
-		.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: 100%;
-					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/pages/user/register.vue

@@ -34,7 +34,8 @@ export default {
 	},
 	data() {
 		return {}
-	}
+	},
+	methods: {}
 }
 </script>