完善UI

common/styles/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "lf-iconfont"; /* Project id 2731103 */
-  src: url('//at.alicdn.com/t/font_2731103_jdpc6xie5ss.woff2?t=1629108236427') format('woff2'),
-       url('//at.alicdn.com/t/font_2731103_jdpc6xie5ss.woff?t=1629108236427') format('woff'),
-       url('//at.alicdn.com/t/font_2731103_jdpc6xie5ss.ttf?t=1629108236427') format('truetype');
+  src: url('//at.alicdn.com/t/font_2731103_1v4te6shb66.woff2?t=1629353364965') format('woff2'),
+       url('//at.alicdn.com/t/font_2731103_1v4te6shb66.woff?t=1629353364965') format('woff'),
+       url('//at.alicdn.com/t/font_2731103_1v4te6shb66.ttf?t=1629353364965') format('truetype');
 }
 
 .lf-iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-more:before {
+  content: "\e604";
+}
+
+.icon-shanchu:before {
+  content: "\e674";
+}
+
 .icon-fenxiang:before {
   content: "\e600";
 }

components/lf-userList/lf-userList.vue

@@ -1,11 +1,12 @@
 <template>
 	<view class="content" :style="padding ? 'padding: 0rpx 32rpx' : 'padding: 0rpx'">
-		<view class="list" v-for="(item, index) in list" :key="index">
+		<view class="list" v-for="(item, index) in list" :key="index" @click="$url('/pages/my/memberDetails')">
 			<lf-image class="avatar" src="@/static/logo.png"></lf-image>
 			<view class="info">
 				<view class="lf-flex-1">
 					<text>编号：83927</text>
-					<u-icon name="tags" class="lf-m-l-10"></u-icon>
+					<text class="lf-iconfont icon-nv lf-m-l-10 lf-color-primary" v-if="index % 2"></text>
+					<text class="lf-iconfont icon-nan lf-m-l-10 color-nan" v-else></text>
 				</view>
 				<view class="lf-flex-1 lf-m-t-16">24岁·牛·180cm·本科·未婚</view>
 				<view class="lf-flex-1 lf-m-t-16">自有公司·金融/证券/保险·50万以上</view>
@@ -45,6 +46,9 @@
 </script>
 
 <style lang="scss" scoped="scoped">
+	.color-nan{
+		color: #1E77F4;
+	}
 	.content{
 		width: 100%;
 		height: max-content;

pages.json

@@ -138,6 +138,18 @@
 			"style": {
 				"navigationBarTitleText": "系统消息"
 			}
+		},
+		{
+			"path": "pages/saySomething/saySomething",
+			"style": {
+				"navigationBarTitleText": "发表动态"
+			}
+		},
+		{
+			"path": "pages/personalTailor/personalTailor",
+			"style": {
+				"navigationBarTitleText": "私人定制"
+			}
 		}
 	],
 	"globalStyle": {
@@ -147,8 +159,8 @@
 		"backgroundColor": "#F8F8F8"
 	},
 	"tabBar": {
-	    "color": "#333333",
-	    "selectedColor": "#1998FE",
+	    "color": "#222222",
+	    "selectedColor": "#E21196",
 	    "borderStyle": "black",
 	    "backgroundColor": "#ffffff",
 	    "list": [{
@@ -161,15 +173,20 @@
 	        "iconPath": "static/tabbar/find.png",
 	        "selectedIconPath": "static/tabbar/find-active.png",
 	        "text": "发现"
+	    },{
+	        "pagePath": "pages/personalTailor/personalTailor",
+	        "iconPath": "static/tabbar/customized.png",
+	        "selectedIconPath": "static/tabbar/customized-active.png",
+	        "text": "私人定制"
 	    },{
 	        "pagePath": "pages/messageCenter/index",
-	        "iconPath": "static/tabbar/find.png",
-	        "selectedIconPath": "static/tabbar/find-active.png",
+	        "iconPath": "static/tabbar/message.png",
+	        "selectedIconPath": "static/tabbar/message-active.png",
 	        "text": "消息"
 	    },{
 	        "pagePath": "pages/my/index",
-	        "iconPath": "static/tabbar/find.png",
-	        "selectedIconPath": "static/tabbar/find-active.png",
+	        "iconPath": "static/tabbar/my.png",
+	        "selectedIconPath": "static/tabbar/my-active.png",
 	        "text": "我的"
 	    }]
 	}

pages/find/find.vue

@@ -26,7 +26,7 @@
 					<view class="lf-row-between lf-m-t-23">
 						<view class="lf-font-28 lf-color-777">08:38</view>
 						<view class="more" @click="show_more = !show_more">
-							<text>···</text>
+							<text class="lf-iconfont icon-more"></text>
 							<view class="more-modal" v-if="show_more">
 								<view class="more-item">
 									<text class="lf-iconfont icon-zan"></text>
@@ -61,7 +61,7 @@
 			</view>
 		</view>
 		<!-- 悬浮发布按钮 -->
-		<view class="fixed-bottom" hover-class="lf-opacity">
+		<view class="fixed-bottom" hover-class="lf-opacity" @click="$url('/pages/saySomething/saySomething')">
 			<text class="lf-iconfont icon-jia lf-font-50"></text>
 		</view>
 	</view>
@@ -144,8 +144,9 @@
 				background-color: #F5F5F5;
 				border-radius: 5rpx;
 				color: #333333;
-				text-align: center;
-				line-height: 40rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
 				font-size: 42rpx;
 				position: relative;
 				.more-modal{

pages/index/index.vue

@@ -3,7 +3,7 @@
 		<!-- 头部搜索框 -->
 		<view class="head-bar">
 			<view class="lf-flex search" @click="$url('/pages/userList/userList?name=搜索')">
-				<u-icon name="search" class="lf-font-30 lf-m-l-20"></u-icon>
+				<text class="lf-iconfont icon-linedesign-12 lf-font-30 lf-m-l-20"></text>
 				<view class="lf-m-l-10 lf-font-24">搜索</view>
 			</view>
 			<view class="botton" @click="$url('/pages/signIn/signIn')">签到</view>
@@ -14,7 +14,7 @@
 				<view class="lf-font-32 lf-color-black">最新上墙</view>
 				<view class="lf-color-999" @click="$url('/pages/wallMember/wallMember')">
 					<text class="lf-font-28">查看全部</text>
-					<u-icon name="arrow-right"></u-icon>
+					<text class="lf-iconfont icon-xiangyou"></text>
 				</view>
 			</view>
 			<scroll-view class="scroll-bar" :scroll-x="true">
@@ -38,7 +38,7 @@
 				<view class="lf-font-32 lf-color-black">推荐单身</view>
 				<view class="lf-color-999" @click="$url('/pages/userList/userList?name=最新')">
 					<text class="lf-font-28">最新</text>
-					<u-icon name="arrow-right"></u-icon>
+					<text class="lf-iconfont icon-xiangyou"></text>
 				</view>
 			</view>
 			<lf-user-list></lf-user-list>

pages/messageCenter/index.vue

@@ -1,7 +1,9 @@
 <template>
 	<view class="content">
 		<view class="list" v-for="(item, index) in list" :key="index" @click="$url(item.path)" hover-class="lf-opacity">
-			<image class="icon" src="../../static/images/empty.png"></image>
+			<view class="icon" :style="{'background': item.bg_color}">
+				<text class="lf-iconfont lf-font-50" :class="item.icon"></text>
+			</view>
 			<view class="lf-row-between" style="width: 556rpx;">
 				<view>
 					<view class="lf-font-32 lf-color-222">{{ item.title }}</view>
@@ -22,19 +24,22 @@
 				list: [{
 					title: '消息订阅',
 					desc: '关闭后将错过不少缘分',
-					icon: '',
+					icon: 'icon-pinglun',
+					bg_color: '#409EEC',
 					path: '',
 					unread_count: 0
 				},{
 					title: '联系过的人',
 					desc: '去看看哪些人联系过了',
-					icon: '',
+					icon: 'icon-contact-person',
+					bg_color: '#FE3EA5',
 					path: '',
 					unread_count: 0
 				},{
 					title: '系统消息',
 					desc: '查看官方消息',
-					icon: '',
+					icon: 'icon-tongzhi',
+					bg_color: '#FE7B43',
 					path: '/pages/messageCenter/system',
 					unread_count: 0
 				}]
@@ -64,6 +69,10 @@
 				height: 120rpx;
 				border-radius: 50%;
 				margin-right: 15rpx;
+				color: #FFFFFF;
+				display: flex;
+				justify-content: center;
+				align-items: center;
 			}
 		}
 	}

pages/personalTailor/personalTailor.vue

@@ -0,0 +1,25 @@
+<template>
+	<view style="width: 100vw; height: 100vh; background-color: #E31193; padding-top: 100rpx;">
+		<view style="text-align: center; font-size: 38rpx; color: beige;">私人定制 TODO</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	
+</style>

pages/saySomething/saySomething.vue

@@ -0,0 +1,163 @@
+<template>
+	<view class="content">
+		<!-- 文本输入 -->
+		<textarea class="textarea" placeholder="这一刻的想法…" v-model="content"></textarea>
+		<!-- 上传图片 -->
+		<view class="my-images">
+			<view class="my-image-item" @click="uploadImage" v-if="image_list.length < 6">
+				<text class="lf-iconfont icon-jia my-image-item-after"></text>
+			</view>
+			<view class="my-image-item" v-for="(item, index) in image_list" :key="index" @click="lookImage(index)">
+				<image :src="item" mode="aspectFill"></image>
+				<view class="remove-image" @click.stop="removeInage(index)">
+					<text class="lf-iconfont icon-shanchu"></text>
+				</view>
+			</view>
+		</view>
+		<!-- 发表按钮 -->
+		<button class="my-btn" hover-class="lf-opacity">发表</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				image_list: [],
+				image_count: 6,
+				content: ''
+			}
+		},
+		watch: {
+			// #ifdef MP-WEIXIN
+			content(val){
+				if(String(val).length){
+					// 监听微信小程序页面返回，弹出询问框
+					wx.enableAlertBeforeUnload({
+						message: '您已输入文字，但未发表，离开后已输入的文字将清空，确定离开？',
+						complete: result => {
+							console.log("result", result);
+						}
+					})
+				}else{
+					wx.disableAlertBeforeUnload(); // 关闭监听
+				}
+			}
+			// #endif
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			// 上传凭证图片
+			uploadImage(){
+				let current_count = this.image_count - this.image_list.length;
+				if(current_count == 0) return;
+				uni.chooseImage({
+					count: current_count,
+					complete: result => {
+						let tempFiles = result.tempFiles;
+						let image_list = [];
+						let overstep = false;
+						tempFiles.map(item => {
+							// 上传的图片需小于10MB
+							if(item.size < 10464788){
+								image_list.push(item.path);
+							}else{
+								overstep = true;
+							}
+						})
+						if(overstep){
+							uni.showModal({
+								title: '温馨提示',
+								content: '您上传的图片含有超出10M大小的限制，请优化大小后再上传！',
+								showCancel: false
+							})
+						}
+						this.image_list.push(...image_list);
+					}
+				})
+			},
+			// 预览图片
+			lookImage(current){
+				if(this.image_list.length <= 0) return;
+				this.$u.throttle(() => {
+					uni.previewimage({
+						images: this.image_list,
+						current: current
+					});
+				}, 500);
+			},
+			// 移除图片
+			removeInage(current){
+				this.image_list.splice(current, 1);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.content{
+		width: 750rpx;
+		height: max-content;
+		box-sizing: border-box;
+		padding: 30rpx 32rpx;
+		.textarea{
+			width: 100%;
+			height: 160rpx;
+			padding: 10rpx 0;
+		}
+	}
+	
+	.my-images{
+		display: flex;
+		flex-wrap: wrap;
+		margin-top: 30rpx;
+		margin-bottom: 18rpx;
+		.my-image-item{
+			width: 220rpx;
+			height: 220rpx;
+			background: #DDDDDD;
+			position: relative;
+			margin-right: 12rpx;
+			&:nth-child(3n){
+				margin-right: 0rpx;
+			}
+			&:nth-child(n+4){
+				margin-top: 12rpx;
+			}
+			image{
+				width: 100%;
+				height: 100%;
+			}
+			.remove-image{
+				position: absolute;
+				right: -4rpx;
+				top: -18rpx;
+				color: #e74c3c;
+				font-size: 40rpx;
+				padding: 8rpx;
+			}
+		}
+		.my-image-item-after{
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 60rpx;
+			color: #999999;
+		}
+	}
+	
+	.my-btn{
+		margin-top: 30rpx;
+		background-color: #E21196;
+		color: #FFFFFF;
+	}
+	
+	/deep/.textarea-placeholder{
+		color: #999999;
+	}
+</style>