fix

virgo.wzfrontend/yui_wx/App.vue

@@ -1,6 +1,6 @@
 <script>
 	export default {
-		onLaunch: function() {
+		onLaunch() {
 			console.log('App Launch')
 		},
 		// 在页面的onShow生命周期中

virgo.wzfrontend/yui_wx/package.json

@@ -1,18 +0,0 @@
-{
-    "id": "pinapp-empty-page",
-    "name": "空白数据页",
-    "version": "0.0.1",
-    "description": "空白数据页，无数据，暂无数据，emptyPage",
-    "keywords": [
-        "空白数据页",
-        "无数据",
-        "暂无数据",
-        "emptyPage"
-    ],
-    "dcloudext": {
-        "category": [
-            "前端组件",
-            "通用组件"
-        ]
-    }
-}

virgo.wzfrontend/yui_wx/pages.json

@@ -1,15 +1,5 @@
 {
 	"pages": [{
-			"path": "pages/my/my",
-			"style": {
-				"navigationBarTitleText": "个人中心"
-			}
-		}, {
-			"path": "pages/message/message",
-			"style": {
-				"navigationBarTitleText": "消息"
-			}
-		}, {
 			"path": "pages/highseas/highseas",
 			"style": {
 				"navigationStyle": "custom",
@@ -20,57 +10,64 @@
 			"style": {
 				"navigationBarTitleText": "工作台"
 			}
+		}, {
+			"path": "pages/my/my",
+			"style": {
+				"navigationBarTitleText": "个人中心"
+			}
 		},
 		{
 			"path": "pages/login/login",
 			"style": {
 				"navigationBarTitleText": "登录"
 			}
-		},
-		{
+		}, {
+			"path": "pages/myHouse/myHouse",
+			"style": {
+				"navigationBarTitleText": "我的房源"
+			}
+		}, {
+			"path": "pages/message/message",
+			"style": {
+				"navigationBarTitleText": "消息"
+			}
+		}, {
 			"path": "pages/city/city",
 			"style": {
 				"navigationBarTitleText": "选择城市"
 			}
-		},
-		{
+		}, {
 			"path": "pages/data/data",
 			"style": {
 				"navigationBarTitleText": "数据"
 			}
-		},
-		{
+		}, {
 			"path": "pages/search/search",
 			"style": {
 				"navigationStyle": "custom",
 				"navigationBarTitleText": ""
 			}
-		},
-		{
+		}, {
 			"path": "pages/searchlist/searchlist",
 			"style": {
 				"navigationBarTitleText": "搜索列表"
 			}
-		},
-		{
+		}, {
 			"path": "pages/project/project",
 			"style": {
 				"navigationBarTitleText": "项目详情"
 			}
-		},
-		{
+		}, {
 			"path": "pages/house/house",
 			"style": {
 				"navigationBarTitleText": "房源详情"
 			}
-		},
-		{
+		}, {
 			"path": "pages/visitor/visitor",
 			"style": {
 				"navigationBarTitleText": "访客记录"
 			}
-		},
-		{
+		}, {
 			"path": "pages/reservation/reservation",
 			"style": {
 				"navigationBarTitleText": "预约看房"
@@ -80,42 +77,47 @@
 			"style": {
 				"navigationBarTitleText": "会话"
 			}
+		}, {
+			"path": "pages/myDetail/myDetail",
+			"style": {
+				"navigationBarTitleText": "个人信息"
+			}
+		}, {
+			"path": "pages/person/person",
+			"style": {
+				"navigationBarTitleText": "房东信息"
+			}
 		}
 	],
 	"tabBar": {
 		"color": "#8c8c8c",
 		"selectedColor": "#08979c",
 		"list": [{
-				"pagePath": "pages/index/index",
-				"iconPath": "static/image/tabbar/index.png",
-				"selectedIconPath": "static/image/tabbar/index-active.png",
-				"text": "首页"
-			},
-			{
-				"pagePath": "pages/message/message",
-				"iconPath": "static/image/tabbar/index.png",
-				"selectedIconPath": "static/image/tabbar/index-active.png",
-				"text": "消息"
-			},
-			{
-				"pagePath": "pages/highseas/highseas",
-				"iconPath": "static/image/tabbar/index.png",
-				"selectedIconPath": "static/image/tabbar/index-active.png",
-				"text": "公海"
-			},
-			{
-				"pagePath": "pages/data/data",
-				"iconPath": "static/image/tabbar/index.png",
-				"selectedIconPath": "static/image/tabbar/index-active.png",
-				"text": "数据"
-			},
-			{
-				"pagePath": "pages/my/my",
-				"iconPath": "static/image/tabbar/index.png",
-				"selectedIconPath": "static/image/tabbar/index-active.png",
-				"text": "我的"
-			}
-		]
+			"pagePath": "pages/index/index",
+			"iconPath": "static/image/tabbar/index.png",
+			"selectedIconPath": "static/image/tabbar/index-active.png",
+			"text": "首页"
+		}, {
+			"pagePath": "pages/message/message",
+			"iconPath": "static/image/tabbar/index.png",
+			"selectedIconPath": "static/image/tabbar/index-active.png",
+			"text": "消息"
+		}, {
+			"pagePath": "pages/highseas/highseas",
+			"iconPath": "static/image/tabbar/index.png",
+			"selectedIconPath": "static/image/tabbar/index-active.png",
+			"text": "公海"
+		}, {
+			"pagePath": "pages/data/data",
+			"iconPath": "static/image/tabbar/index.png",
+			"selectedIconPath": "static/image/tabbar/index-active.png",
+			"text": "数据"
+		}, {
+			"pagePath": "pages/my/my",
+			"iconPath": "static/image/tabbar/index.png",
+			"selectedIconPath": "static/image/tabbar/index-active.png",
+			"text": "我的"
+		}]
 	},
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

virgo.wzfrontend/yui_wx/pages/data/data.vue

@@ -1,22 +1,24 @@
-<template>
-	<view>
-		
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
-	}
-</script>
-
-<style>
-
-</style>
+<template>
+	<view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		onShow() {
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+
+</style>

virgo.wzfrontend/yui_wx/pages/index/index.vue

@@ -1,11 +1,13 @@
 <template>
 	<view class="index">
-		
+
 	</view>
 </template>
 
 <script>
-	
+	export default {
+		onShow() {}
+	}
 </script>
 
 <style lang="scss">

virgo.wzfrontend/yui_wx/pages/my/my.vue

@@ -1,25 +1,71 @@
 <template>
 	<view class="my-box">
-		<view class="my-top"></view>
-		<image class="my-avatar"
-			src="https://images.unsplash.com/photo-1586348943529-beaae6c28db9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyMDUzMDJ8MHwxfHNlYXJjaHw3fHxOYXR1cmV8ZW58MXx8fHwxNzIxMjE3OTY5fDA&ixlib=rb-4.0.3&q=80&w=1080"
-			mode="aspectFill">
-		</image>
-		<view class="name">林夕三</view>
-		<view class="organization">温州有极数据科技有限公司</view>
-		<view class="my-tab">
-			<view class="tab-box">
-				<view class="tab-item">
-					<view class="tab-number">112</view>
-					<view class="tab-text">房源</view>
+		<view class="my-content">
+			<view class="my-top"></view>
+			<image class="my-avatar" @click="$navigateTo('/pages/myDetail/myDetail')" :src="user.portrait"
+				mode="aspectFill"></image>
+			<view class="name" @click="$navigateTo('/pages/myDetail/myDetail')">{{user.userName || '登录/注册'}}</view>
+			<view class="organization" v-if="user.organizedName">{{user.organizedName}}</view>
+			<view class="my-tab">
+				<view class="tab-box">
+					<view class="tab-item" @click="$navigateTo('/pages/myHouse/myHouse')">
+						<view class="tab-number">{{fansCount.roomCount}}</view>
+						<view class="tab-text">房源</view>
+					</view>
+					<view class="tab-item">
+						<view class="tab-number">{{fansCount.fansCount}}</view>
+						<view class="tab-text">粉丝</view>
+					</view>
+					<view class="tab-item">
+						<view class="tab-number">{{fansCount.attentionCount}}</view>
+						<view class="tab-text">关注</view>
+					</view>
 				</view>
-				<view class="tab-item">
-					<view class="tab-number">112</view>
-					<view class="tab-text">粉丝</view>
+			</view>
+			<view class="my-list">
+				<view class="my-item">
+					<view class="my-icon">
+						<uni-icons type="staff-filled" color="#fff" size="24"></uni-icons>
+					</view>
+					<view class="item-content">
+						我的客户
+					</view>
+					<view class="my-forward">
+						<uni-icons type="forward" size="18" color="#c1c0c8"></uni-icons>
+					</view>
+				</view>
+				<view class="my-item">
+					<view class="my-icon">
+						<uni-icons type="staff-filled" color="#fff" size="24"></uni-icons>
+					</view>
+					<view class="item-content">
+						我的公司
+					</view>
+					<view class="my-forward">
+						<uni-icons type="forward" size="18" color="#c1c0c8"></uni-icons>
+					</view>
 				</view>
-				<view class="tab-item">
-					<view class="tab-number">112</view>
-					<view class="tab-text">关注</view>
+				<view class="my-item">
+					<view class="my-icon">
+						<uni-icons type="staff-filled" color="#fff" size="24"></uni-icons>
+					</view>
+					<view class="item-content">
+						我的下载
+					</view>
+					<view class="my-forward">
+						<uni-icons type="forward" size="18" color="#c1c0c8"></uni-icons>
+					</view>
+				</view>
+				<view class="my-item">
+					<view class="my-icon">
+						<uni-icons type="staff-filled" color="#fff" size="24"></uni-icons>
+					</view>
+					<view class="item-content">
+						客服中心
+					</view>
+					<view class="my-forward">
+						<uni-icons type="forward" size="18" color="#c1c0c8"></uni-icons>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -27,14 +73,42 @@
 </template>
 
 <script>
+	import {
+		getMyCount
+	} from '@/request/api/my.js'
 	export default {
 		data() {
 			return {
-
+				fansCount: {
+					attentionCount: 0,
+					fansCount: 0,
+					roomCount: 0
+				},
+				user: {}
+			}
+		},
+		onShow() {
+			if (!uni.getStorageSync('token')) {
+				this.user = {};
+				this.fansCount = {
+					attentionCount: 0,
+					fansCount: 0,
+					roomCount: 0
+				}
+			} else {
+				this.user = this.$store.getters.user;
+				this.user.organizedName = this.$store.getters.organization.name;
+				this.init();
 			}
 		},
 		methods: {
-
+			init() {
+				getMyCount().then(res => {
+					if (res.code === 200) {
+						this.fansCount = res.data;
+					}
+				})
+			}
 		}
 	}
 </script>
@@ -43,9 +117,14 @@
 	.my-box {
 		height: 100vh;
 		background: #fff;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
+		overflow-y: auto;
+
+		.my-content {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding-bottom: 80rpx;
+		}
 
 		.my-top {
 			height: 260rpx;
@@ -62,6 +141,7 @@
 			border-radius: 50%;
 			margin-top: -100rpx;
 			border: 6rpx solid #fff;
+			background: #eee;
 		}
 
 		.name {
@@ -105,5 +185,44 @@
 				margin-top: 10rpx;
 			}
 		}
+
+		.my-list {
+			width: 100%;
+			padding: 0 30rpx;
+			box-sizing: border-box;
+
+			.my-item {
+				display: flex;
+				align-items: center;
+				border-bottom: 2rpx solid $uni-border-1;
+				padding: 20rpx 0;
+			}
+
+			.my-item:first-child {
+				border-top: 2rpx solid $uni-border-1;
+			}
+
+			.my-icon {
+				width: 80rpx;
+				height: 80rpx;
+				border-radius: 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin-right: 20rpx;
+				background: #c1c0c8;
+			}
+
+			.my-forward {
+				height: 40rpx;
+			}
+
+			.item-content {
+				flex: 1;
+				width: 0;
+				overflow: hidden;
+				font-weight: 700;
+			}
+		}
 	}
 </style>

virgo.wzfrontend/yui_wx/pages/myDetail/myDetail.vue

@@ -0,0 +1,104 @@
+<template>
+	<view class="detail-content">
+		<view class="detail-box">
+			<view class="detail-item">
+				<view class="detail-label">头像</view>
+				<image class="detail-avatar" :src="user.portrait" mode="aspectFill"></image>
+			</view>
+			<view class="detail-item">
+				<view class="detail-label">姓名</view>
+				<view class="detail-value">{{user.userName}}</view>
+			</view>
+			<view class="detail-item">
+				<view class="detail-label">所属组织</view>
+				<view class="detail-value">{{user.organizedName}}</view>
+			</view>
+			<view class="detail-item">
+				<view class="detail-label">手机号</view>
+				<view class="detail-value">{{user.phone}}</view>
+			</view>
+			<view class="detail-item">
+				<view class="detail-label">性别</view>
+				<view class="detail-value">{{user.sex === 'W'?'女':'男'}}</view>
+			</view>
+		</view>
+		<view class="logout" @click="logout">退出登录</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				user: {}
+			}
+		},
+		onShow() {
+			this.user = this.$store.getters.user;
+			this.user.organizedName = this.$store.getters.organization.name;
+			console.log(this.user);
+		},
+		methods: {
+			logout() {
+				uni.showModal({
+					title: '有极提示',
+					content: '是否退出登录',
+					success: res => {
+						if (res.confirm) {
+							uni.removeStorageSync('token');
+							uni.removeStorageSync('chatToken');
+							uni.switchTab({
+								url: '/pages/highseas/highseas'
+							})
+							this.$toast('退出成功');
+						}
+					}
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.detail-content {
+		padding: 30rpx;
+
+		.detail-avatar {
+			width: 80rpx;
+			height: 80rpx;
+			border-radius: 50%;
+		}
+
+		.detail-box {
+			background: #fff;
+			border-radius: 16rpx;
+			padding: 30rpx;
+			box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
+		}
+
+		.detail-label {
+			color: $uni-secondary-color;
+			font-weight: 300;
+			margin-bottom: 10rpx;
+		}
+
+		.detail-value {
+			font-size: 32rpx;
+			color: $uni-base-color;
+		}
+
+		.detail-item {
+			margin-bottom: 20rpx;
+		}
+
+		.logout {
+			margin-top: 40rpx;
+			background: $uni-error;
+			color: #fff;
+			height: 68rpx;
+			line-height: 68rpx;
+			border-radius: 68rpx;
+			text-align: center;
+		}
+	}
+</style>

virgo.wzfrontend/yui_wx/pages/myHouse/myHouse.vue

@@ -0,0 +1,98 @@
+<template>
+	<view class="my-house-list">
+		<mescroll-body top="40" bottom="40" @init="mescrollInit" @down="downCallback" @up="upCallback" :option="{}">
+			<view class="my-house">
+				<custom-waterfalls-flow :value="list" @wapperClick="clickItem" @imageClick="clickItem">
+					<!-- #ifdef MP-WEIXIN -->
+					<view class="item" v-for="(item,index) in list" :key="index" slot="slot{{index}}">
+						<view class="title">{{item.title}}</view>
+						<view class="desc">{{item.desc}}</view>
+					</view>
+					<!-- #endif -->
+					<!-- #ifndef MP-WEIXIN -->
+					<template v-slot:default="item">
+						<view class="item">
+							<view class="title">{{item.title}}</view>
+							<view class="desc">{{item.desc}}</view>
+						</view>
+					</template>
+					<!-- #endif -->
+				</custom-waterfalls-flow>
+			</view>
+		</mescroll-body>
+	</view>
+</template>
+
+<script>
+	import {
+		getHouseListByPage
+	} from '@/request/api/house.js'
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	export default {
+		mixins: [MescrollMixin], // 使用mixin
+		data() {
+			return {
+				list: []
+			}
+		},
+		methods: {
+			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
+			upCallback(page) {
+				getHouseListByPage({
+					currPage: page.num,
+					pageSize: 10,
+					// chargePersonId: this.$store.getters.user.userId,
+					chargePersonId: 4
+				}).then(res => {
+					if (res.code === 200) {
+						this.mescroll.endBySize(res.data.dataList.length, res.data.totalCount);
+						if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
+						let data = res.data.dataList.map(node => {
+							return {
+								houseId: node.id,
+								image: this.imageUrl(node.showPicture),
+								title: `${node.projectItemName}-${node.projectItemTargetName}-${node.roomNumber}`
+							}
+						})
+						this.list = this.list.concat(data); //追加新数据
+					} else {
+						this.mescroll.endErr();
+					}
+				}).catch(() => {
+					//联网失败, 结束加载
+					this.mescroll.endErr();
+				})
+			},
+			imageUrl(data) {
+				if (!data) return 'https://assets.api.uizard.io/api/cdn/stream/c05650d2-192b-4a56-ae97-05638f53804c.png';
+				return JSON.parse(data)[0].url;
+			},
+			clickItem(item) {
+				this.$navigateTo('/pages/house/house?houseId=' + item.houseId);
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.my-house-list {
+		.my-house {
+			padding: 0 30rpx;
+			box-sizing: border-box;
+
+			.item {
+				position: absolute;
+				bottom: 0;
+				width: 100%;
+				height: 56rpx;
+				background-color: rgba(0, 0, 0, 0.6);
+				line-height: 56rpx;
+				font-size: 24rpx;
+				font-weight: 300;
+				padding: 0 20rpx;
+				overflow: hidden;
+				color: #fff;
+			}
+		}
+	}
+</style>

virgo.wzfrontend/yui_wx/pages/person/person.vue

@@ -0,0 +1,201 @@
+<template>
+	<view class="my-box">
+		<view class="my-content">
+			<view class="my-top"></view>
+			<image class="my-avatar" @click="$navigateTo('/pages/myDetail/myDetail')" :src="user.portrait"
+				mode="aspectFill"></image>
+			<view class="name" @click="$navigateTo('/pages/myDetail/myDetail')">{{user.name}}</view>
+			<view class="organization">{{user.organizedName}}</view>
+			<view class="btn-box">
+				<view class="my-button my-button-cancel" v-if="isFans === 1" @click="fans">取消关注</view>
+				<view class="my-button" v-if="isFans === 2" @click="fans">关注</view>
+			</view>
+			<view class="my-house">
+				<view class="my-house-title">房源列表</view>
+				<custom-waterfalls-flow :value="list" @wapperClick="clickItem" @imageClick="clickItem">
+					<!-- #ifdef MP-WEIXIN -->
+					<view class="item" v-for="(item,index) in list" :key="index" slot="slot{{index}}">
+						<view class="title">{{item.title}}</view>
+						<view class="desc">{{item.desc}}</view>
+					</view>
+					<!-- #endif -->
+					<!-- #ifndef MP-WEIXIN -->
+					<template v-slot:default="item">
+						<view class="item">
+							<view class="title">{{item.title}}</view>
+							<view class="desc">{{item.desc}}</view>
+						</view>
+					</template>
+					<!-- #endif -->
+				</custom-waterfalls-flow>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		getUserInfoById,
+		isFans,
+		attention,
+		cancelAttention
+	} from '@/request/api/my.js'
+	import {
+		getHouseListByPage
+	} from '@/request/api/house.js'
+	export default {
+		data() {
+			return {
+				user: {},
+				list: [],
+				isFans: 0,
+				userId: 4
+			}
+		},
+		onLoad(body) {
+			if (body.userId) this.userId = body.userId;
+			this.init();
+		},
+		methods: {
+			init() {
+				getUserInfoById(this.userId).then(res => {
+					if (res.code === 200) {
+						this.user = res.data;
+						this.user.organizedName = res.data.mgrOrganization.name;
+					}
+				})
+				getHouseListByPage({
+					currPage: 1,
+					pageSize: 100,
+					chargePersonId: this.userId
+				}).then(res => {
+					if (res.code === 200) {
+						this.list = res.data.dataList.map(node => {
+							return {
+								houseId: node.id,
+								image: this.imageUrl(node.showPicture),
+								title: `${node.projectItemName}-${node.projectItemTargetName}-${node.roomNumber}`
+							}
+						})
+					}
+				})
+				this.initFans();
+			},
+			initFans() {
+				isFans(this.userId).then(res => {
+					if (res.code === 200) {
+						this.isFans = res.data ? 1 : 2;
+					}
+				})
+			},
+			fans() {
+				this.isFans === 1 ? cancelAttention(this.userId).then(this.successFans) : attention(this.userId).then(this
+					.successFans);
+			},
+			successFans(res) {
+				if (res.code === 200) {
+					this.$toast(this.isFans === 1 ? '取消成功' : '关注成功');
+					this.initFans();
+				}
+			},
+			clickItem(item) {
+				this.$navigateTo('/pages/house/house?houseId=' + item.houseId);
+			},
+			imageUrl(data) {
+				if (!data) return 'https://assets.api.uizard.io/api/cdn/stream/c05650d2-192b-4a56-ae97-05638f53804c.png';
+				return JSON.parse(data)[0].url;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.my-box {
+		height: 100vh;
+		background: #fff;
+		overflow-y: auto;
+
+		.my-content {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding-bottom: 80rpx;
+		}
+
+		.my-top {
+			height: 260rpx;
+			background-image: url('https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyMDUzMDJ8MHwxfHNlYXJjaHw1fHxhYnN0cmFjdHxlbnwxfHx8fDE2NTI4OTYzNTU&ixlib=rb-1.2.1&q=80&w=1080');
+			background-position: center center;
+			background-size: cover;
+			background-repeat: no-repeat;
+			width: 100%;
+		}
+
+		.my-avatar {
+			width: 200rpx;
+			height: 200rpx;
+			border-radius: 50%;
+			margin-top: -100rpx;
+			border: 6rpx solid #fff;
+		}
+
+		.name {
+			font-size: 20px;
+			font-weight: 700;
+			margin: 10rpx 0;
+		}
+
+		.organization {
+			color: $uni-secondary-color;
+			font-weight: 300;
+		}
+
+		.btn-box {
+			box-sizing: border-box;
+			padding: 30rpx;
+			width: 100%;
+		}
+
+		.my-button {
+			width: 100%;
+			height: 68rpx;
+			line-height: 68rpx;
+			border-radius: 68rpx;
+			border: 1px solid $uni-primary;
+			background: $uni-primary;
+			text-align: center;
+			color: #fff;
+
+			&.my-button-cancel {
+				border-color: $uni-secondary-color;
+				color: $uni-secondary-color;
+				background: #fff;
+			}
+		}
+
+		.my-house {
+			width: 100%;
+			padding: 0 30rpx;
+			box-sizing: border-box;
+
+			.item {
+				position: absolute;
+				bottom: 0;
+				width: 100%;
+				height: 56rpx;
+				background-color: rgba(0, 0, 0, 0.6);
+				line-height: 56rpx;
+				font-size: 24rpx;
+				font-weight: 300;
+				padding: 0 20rpx;
+				overflow: hidden;
+				color: #fff;
+			}
+
+			.my-house-title {
+				font-weight: 500;
+				margin-bottom: 20rpx;
+			}
+		}
+	}
+</style>

virgo.wzfrontend/yui_wx/request/api/my.js

@@ -0,0 +1,59 @@
+import {
+	request
+} from '@/request/request.js';
+
+/* 
+ * 获取关注数量
+ * 
+ * 
+ */
+export function getMyCount() {
+	return request({
+		url: `/api/fans/count`,
+		method: 'get'
+	})
+}
+/* 
+ * 获取用户信息
+ * 
+ * 
+ */
+export function getUserInfoById(userId) {
+	return request({
+		url: `/manager/userInfo/${userId}`,
+		method: 'get'
+	})
+}
+/* 
+ * 用户是否关注
+ * 
+ * 
+ */
+export function isFans(userId) {
+	return request({
+		url: `/api/fans/attention/${userId}`,
+		method: 'get'
+	})
+}
+/* 
+ * 关注用户
+ * 
+ * 
+ */
+export function attention(userId) {
+	return request({
+		url: `/api/fans/${userId}`,
+		method: 'get'
+	})
+}
+/* 
+ * 取消关注
+ * 
+ * 
+ */
+export function cancelAttention(userId) {
+	return request({
+		url: `/api/fans/${userId}`,
+		method: 'delete'
+	})
+}

virgo.wzfrontend/yui_wx/static/scss/common.scss

@@ -6,7 +6,8 @@
 		background: #fff;
 		border-radius: 16rpx;
 		padding: 30rpx;
-
+		box-shadow: 0px 1px 12px rgba(3,3,3,0.08);
+		
 		.uni-forms-item__label {
 			color: $uni-main-color;
 			padding-bottom: 0 !important;
@@ -48,8 +49,7 @@
 			right: 30rpx;
 			top: 0rpx;
 		}
-	}
-	
+	}
 }
 //底部按钮
 .hui-button-box {

virgo.wzfrontend/yui_wx/uni_modules/custom-waterfalls-flow/changelog.md

@@ -0,0 +1,17 @@
+## 1.0.7（2022-05-26）
+1. 优化局部改变数据更新问题，避免重新加载数据，只改变局部
+## 1.0.6（2022-04-18）
+1. 修改tab快速切换时会出现的BUG
+## 1.0.5（2022-04-18）
+1. 修复可能存在数据错误的BUG；
+2. 兼容，今后可以无需调用refresh()就可以更新数据；
+## 1.0.4（2022-04-18）
+1. 修复BUG；
+## 1.0.3（2022-04-15）
+1. 优化代码；
+2. 修改懒加载数据存在的BUG；
+## 1.0.1（2022-03-11）
+1. 增加隐藏图片字段的键名字段hideImageKey，默认hide
+2. 支持在列表中配置hide参数进行隐藏图片
+## 1.0.0（2022-03-09）
+使用最简单的思想实现瀑布流

virgo.wzfrontend/yui_wx/uni_modules/custom-waterfalls-flow/components/custom-waterfalls-flow/custom-waterfalls-flow.vue

@@ -0,0 +1,342 @@
+<template>
+	<view class="waterfalls-flow">
+		<view v-for="(item,index) in data.column" :key="index" class="waterfalls-flow-column"
+			:id="`waterfalls_flow_column_${index+1}`" :msg="msg" :style="{'width':w,'margin-left':index==0?0:m}">
+			<view :class="['column-value',{'column-value-show':item2.o}]" v-for="(item2,index2) in columnValue(index)"
+				:key="index2" :style="[s1]" @click.stop="wapperClick(item2)">
+				<view class="inner" v-if="data.seat==1">
+					<!-- #ifdef MP-WEIXIN -->
+					<!-- #ifdef VUE2 -->
+					<slot name="slot{{item2.index}}"></slot>
+					<!-- #endif -->
+					<!-- #ifdef VUE3 -->
+					<slot :name="`slot${item2.index}`"></slot>
+					<!-- #endif -->
+					<!-- #endif -->
+					<!-- #ifndef MP-WEIXIN -->
+					<slot v-bind="item2"></slot>
+					<!-- #endif -->
+				</view>
+				<image
+					:class="['img',{'img-hide':item2[hideImageKey]==true||item2[hideImageKey]==1},{'img-error':!item2[data.imageKey]}]"
+					:src="item2[data.imageKey]" mode="widthFix" @load="imgLoad(item2,index+1)"
+					@error="imgError(item2,index+1)" @click.stop="imageClick(item2)"></image>
+				<view class="inner" v-if="data.seat==2">
+					<!-- #ifdef MP-WEIXIN -->
+					<!-- #ifdef VUE2 -->
+					<slot name="slot{{item2.index}}"></slot>
+					<!-- #endif -->
+					<!-- #ifdef VUE3 -->
+					<slot :name="`slot${item2.index}`"></slot>
+					<!-- #endif -->
+					<!-- #endif -->
+					<!-- #ifndef MP-WEIXIN -->
+					<slot v-bind="item2"></slot>
+					<!-- #endif -->
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+	export default {
+		props: {
+			value: Array,
+			column: { // 列的数量 
+				type: [String, Number],
+				default: 2
+			},
+			maxColumn: { // 最大列数 
+				type: [String, Number],
+				default: 5
+			},
+			columnSpace: { // 列之间的间距 百分比
+				type: [String, Number],
+				default: 2
+			},
+			imageKey: { // 图片key
+				type: [String],
+				default: 'image'
+			},
+			hideImageKey: { // 隐藏图片key
+				type: [String],
+				default: 'hide'
+			},
+			seat: { // 文本的位置，1图片之上 2图片之下
+				type: [String, Number],
+				default: 2
+			},
+			listStyle: { // 单个展示项的样式：eg:{'background':'red'}
+				type: Object
+			}
+		},
+		data() {
+			return {
+				data: {
+					list: this.value ? this.value : [],
+					column: this.column < 2 ? 2 : this.column,
+					columnSpace: this.columnSpace <= 5 ? this.columnSpace : 5,
+					imageKey: this.imageKey,
+					seat: this.seat
+				},
+				msg: 0,
+				listInitStyle: {
+					'border-radius': '12rpx',
+					'margin-bottom': '20rpx',
+					'background-color': '#fff'
+				},
+				adds: [], //预置数据
+				isLoaded: true,
+				curIndex: 0,
+				isRefresh: true,
+				flag: false,
+				refreshDatas: []
+			}
+		},
+		computed: {
+			// 计算列宽
+			w() {
+				const column_rate = `${100 / this.data.column - (+this.data.columnSpace)}%`;
+				return column_rate;
+			},
+			// 计算margin
+			m() {
+				const column_margin =
+					`${(100-(100 / this.data.column - (+this.data.columnSpace)).toFixed(5)*this.data.column)/(this.data.column-1)}%`;
+				return column_margin;
+			},
+			// list样式
+			s1() {
+				return {
+					...this.listInitStyle,
+					...this.listStyle
+				};
+			}
+		},
+		created() {
+			// 初始化
+			this.refresh();
+		},
+		methods: {
+			// 预加载图片
+			loadImages(idx = 0) {
+				let count = 0;
+				const newList = this.data.list.filter((item, index) => index >= idx);
+				for (let i = 0; i < newList.length; i++) {
+					// #ifndef APP-PLUS
+					uni.getImageInfo({
+						src: `${newList[i][this.imageKey]}.jpg`,
+						complete: res => {
+							count++;
+							if (count == newList.length) this.initValue(idx);
+						}
+					})
+					// #endif
+					// #ifdef APP-PLUS
+					plus.io.getImageInfo({
+						src: `${newList[i][this.imageKey]}.jpg`,
+						complete: res => {
+							count++;
+							if (count == newList.length) this.initValue(idx);
+						}
+					})
+					// #endif
+				}
+			},
+			// 刷新
+			refresh() {
+				if (!this.isLoaded) {
+					this.refreshDatas = this.value;
+					return false;
+				};
+				setTimeout(() => {
+					this.refreshDatas = [];
+					this.isRefresh = true;
+					this.adds = [];
+					this.data.list = this.value ? this.value : [];
+					this.data.column = this.column < 2 ? 2 : this.column >= this.maxColumn ? this.maxColumn : this
+						.column;
+					this.data.columnSpace = this.columnSpace <= 5 ? this.columnSpace : 5;
+					this.data.imageKey = this.imageKey;
+					this.data.seat = this.seat;
+					this.curIndex = 0;
+					// 每列的数据初始化
+					for (let i = 1; i <= this.data.column; i++) {
+						this.data[`column_${i}_values`] = [];
+						this.msg++;
+					}
+					this.$nextTick(() => {
+						this.initValue(this.curIndex, 'refresh==>');
+					})
+				}, 1)
+			},
+			columnValue(index) {
+				return this.data[`column_${index+1}_values`];
+			},
+			change(newValue) {
+				for (let i = 0; i < this.data.list.length; i++) {
+					const cv = this.data[`column_${this.data.list[i].column}_values`];
+					for (let j = 0; j < cv.length; j++) {
+						if (newValue[i] && i === cv[j].index) {
+							this.data[`column_${this.data.list[i].column}_values`][j] = Object.assign(cv[j], newValue[i]);
+							this.msg++;
+							break;
+						}
+					}
+				}
+			},
+			getMin(a, s) {
+				let m = a[0][s];
+				let mo = a[0];
+				for (var i = a.length - 1; i >= 0; i--) {
+					if (a[i][s] < m) {
+						m = a[i][s];
+					}
+				}
+				mo = a.filter(i => i[s] == m);
+				return mo[0];
+			},
+			// 计算每列的高度
+			getMinColumnHeight() {
+				return new Promise(resolve => {
+					const heightArr = [];
+					for (let i = 1; i <= this.data.column; i++) {
+						const query = uni.createSelectorQuery().in(this);
+						query.select(`#waterfalls_flow_column_${i}`).boundingClientRect(data => {
+							heightArr.push({
+								column: i,
+								height: data.height
+							});
+						}).exec(() => {
+							if (this.data.column <= heightArr.length) {
+								resolve(this.getMin(heightArr, 'height'));
+							}
+						});
+					}
+				})
+			},
+			async initValue(i, from) {
+				this.isLoaded = false;
+				if (i >= this.data.list.length || this.refreshDatas.length) {
+					this.msg++;
+					this.loaded();
+					return false;
+				}
+				const minHeightRes = await this.getMinColumnHeight();
+				const c = this.data[`column_${minHeightRes.column}_values`];
+				this.data.list[i].column = minHeightRes.column;
+				c.push({
+					...this.data.list[i],
+					cIndex: c.length,
+					index: i,
+					o: 0
+				});
+				this.msg++;
+			},
+			// 图片加载完成
+			imgLoad(item, c) {
+				const i = item.index;
+				item.o = 1;
+				this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)));
+				this.initValue(i + 1);
+			},
+			// 图片加载失败
+			imgError(item, c) {
+				const i = item.index;
+				item.o = 1;
+				item[this.data.imageKey] = null;
+				this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)));
+				this.initValue(i + 1);
+			},
+			// 渲染结束
+			loaded() {
+				if (this.refreshDatas.length) {
+					this.isLoaded = true;
+					this.refresh();
+					return false;
+				}
+				this.curIndex = this.data.list.length;
+				if (this.adds.length) {
+					this.data.list = this.adds[0];
+					this.adds.splice(0, 1);
+					this.initValue(this.curIndex);
+				} else {
+					if (this.data.list.length) this.$emit('loaded');
+					this.isLoaded = true;
+					this.isRefresh = false;
+				}
+			},
+			// 单项点击事件
+			wapperClick(item) {
+				this.$emit('wapperClick', item);
+			},
+			// 图片点击事件
+			imageClick(item) {
+				this.$emit('imageClick', item);
+			}
+		},
+		watch: {
+			value: {
+				deep: true,
+				handler(newValue, oldValue) {
+					setTimeout(() => {
+						this.$nextTick(() => {
+							if (this.isRefresh) return false;
+							if (this.isLoaded) {
+								// if (newValue.length <= this.curIndex) return this.refresh();
+								if (newValue.length <= this.curIndex) return this.change(newValue);
+								this.data.list = newValue;
+								this.$nextTick(() => {
+									this.initValue(this.curIndex, 'watch==>');
+								})
+							} else {
+								this.adds.push(newValue);
+							}
+						})
+					}, 10)
+				}
+			},
+			column(newValue) {
+				this.refresh();
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	.waterfalls-flow {
+		overflow: hidden;
+
+		&-column {
+			float: left;
+		}
+	}
+
+	.column-value {
+		width: 100%;
+		font-size: 0;
+		overflow: hidden;
+		transition: opacity .4s;
+		opacity: 0;
+		position: relative;
+
+		&-show {
+			opacity: 1;
+		}
+
+		.inner {
+			font-size: 30rpx;
+		}
+
+		.img {
+			width: 100%;
+
+			&-hide {
+				display: none;
+			}
+
+			&-error {
+				background: #f2f2f2 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiAQMAAAAatXkPAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAAIZJREFUCNdlzjEKwkAUBNAfEGyCuYBkLyLuxRYW2SKlV1JSeA2tUiZg4YrLjv9PGsHqNTPMSAQuyAJgRDHSyvBPwtZoSJXakeJI9iuRLGDygdl6V0yKDtyMAeMPZySj8yfD+UapvRPj2JOwkyAooSV5IwdDjPdCPspe8LyTl9IKJvDETKKRv6vnlUasgg0fAAAAAElFTkSuQmCC) no-repeat center center;
+			}
+		}
+	}
+</style>

virgo.wzfrontend/yui_wx/uni_modules/custom-waterfalls-flow/package.json

@@ -0,0 +1,80 @@
+{
+  "id": "custom-waterfalls-flow",
+  "displayName": "瀑布流 灵活配置 简单易用 兼容vue2vue3小程序、H5、app等多端",
+  "version": "1.0.7",
+  "description": "瀑布流，根据内容自动计算进行流式布局，简单参数配置，实现兼容多端及vue2和vue3的瀑布流布局；uv-ui发布https://ext.dcloud.net.cn/plugin?name=uv-ui",
+  "keywords": [
+    "瀑布流",
+    "瀑布流式布局"
+],
+  "repository": "https://gitee.com/my_dear_li_pan/my-uni-modules.git",
+"engines": {
+  },
+  "dcloudext": {
+    "category": [
+        "前端组件",
+        "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "n"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "u",
+          "Edge": "u",
+          "Firefox": "y",
+          "Safari": "u"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "u",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}

virgo.wzfrontend/yui_wx/uni_modules/custom-waterfalls-flow/readme.md

@@ -0,0 +1,445 @@
+- <a href="#c1" title="概要">概要</a>
+- <a href="#c2" title="支持的平台">支持的平台</a>
+- <a href="#c3" title="使用方式">使用方式</a>
+- <a href="#c4" title="属性说明">属性说明</a>
+- <a href="#c5" title="事件说明">事件说明</a>
+- <a href="#c6" title="组件方法">组件方法</a>
+- <a href="#c7" title="refresh的使用示例">refresh的使用示例</a>
+- <a href="#c8" title="隐藏单项图片示例">隐藏单项图片示例</a>
+- <a href="#c9" title="完整示例">完整示例</a>
+- <a href="#c10" title="温馨提示">温馨提示</a>
+- <a href="#c11" title="关注我，不迷路">关注我，不迷路</a>
+- <a href="#c12" title="个人作品展示">个人作品展示</a>
+ 
+<div id="c1"></div>
+
+#### 概要
+
+custom-waterfalls-flow是一个瀑布流插件，灵活配置、简单易用、兼容多端、同时兼容vue2和vue3。
+
+最近在做项目的时候需要用到瀑布流，于是在插件市场找了一些，下载量最高的是用了定位来做的，我认为瀑布流可以不用定位去实现，于是我就自己写了该插件。经过反复的测试优化，最终搞定！
+
+**设置列数：** 瀑布流的列数可以通过参数直接控制，实时监听，随改随生效。列数最小为2，最大默认为5，可以通过maxColumn参数去控制最大列数，理论上可以设置无限大，具体值自己拿捏。
+
+**更新数据：** 瀑布流的每项数据，可以直接通过修改value，随改随生效，这样可以实现加载更多数据。已经渲染过的数据不会再次渲染，每次只会渲染新增的数据，这样避免了数据越多渲染越慢的情况。可以调用组件的```refresh()```方法进行数据刷新，注意vue2和vue3中调用子组件的方法有区别，也会在下面进行说明。
+
+**展示方式：** 瀑布流可以是纯图片，可以使用插槽自定义文字描述，微信小程序与app、h5使用会有些区别，也会在下面具体说明。内容高度及排序都不用担心，会根据每项的内容高度自动计算。
+
+**实现思路：** 通过配置列数，先渲染出每列，再计算每列的高度，最小的那列就加入一条数据进行渲染，然后再重复计算每列，高度小的加入数据...其实思路是很简单的。
+
+uniapp插件市场地址：[https://ext.dcloud.net.cn/plugin?id=7594](https://ext.dcloud.net.cn/plugin?id=7594)
+
+<div id="c2"></div>
+
+#### 支持的平台
+
+H5、app、微信小程序（这三个平台经过反复测试优化，兼容vue2和vue3）。
+
+百度小程序：由于插槽不能循环渲染的限制，只支持纯图片瀑布流。
+
+其他小程序：暂未测试，需要的可以自己测试和修改，思路肯定是没错的，主要是兼容插槽的问题。
+
+nvue：暂不支持，后期可能会支持，目前需要的可以自己修改源码。
+
+<div id="c3"></div>
+
+#### 使用方式
+
+**1、导入插件**
+
+该组件符合uni_modules规范，使用Hbuilderx导入插件，导入到项目根目录中的uni_modules文件夹中。
+
+**2、template中使用**
+
+uni_modules规范在项目页面中直接使用，不需要单独引入注册组件。
+
+***纯图片瀑布流使用***
+
+```
+<template>
+	<custom-waterfalls-flow :value="data.list"></custom-waterfalls-flow>
+</template>
+```
+
+***微信小程序自定义内容使用***
+
+微信小程序没有动态模板，使用for循环的方式进行渲染。
+
+```
+<template>
+	<custom-waterfalls-flow :value="data.list">
+		<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
+			<view class="title">{{item.title}}</view>
+			<view class="desc">{{item.desc}}</view>
+		</view>
+	</custom-waterfalls-flow>
+</template>
+```
+
+***h5、app端自定义内容使用***
+
+使用作用域插槽实现
+
+```
+<template>
+	<custom-waterfalls-flow :value="data.list">
+		<template v-slot:default="item">
+			<view class="item">
+				<view class="title">{{item.title}}</view>
+				<view class="desc">{{item.desc}}</view>
+			</view>
+		</template>
+	</custom-waterfalls-flow>
+</template>
+```
+
+***小程序、h5、app等多端自定义内容使用***
+
+条件渲染-多端同时兼容
+
+```
+<template>
+	<custom-waterfalls-flow :value="data.list">
+		<!-- #ifdef MP-WEIXIN -->
+		<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
+			<view class="title">{{item.title}}</view>
+			<view class="desc">{{item.desc}}</view>
+		</view>
+		<!-- #endif -->
+		<!-- #ifndef MP-WEIXIN -->
+		<template v-slot:default="item">
+			<view class="item">
+				<view class="title">{{item.title}}</view>
+				<view class="desc">{{item.desc}}</view>
+			</view>
+		</template>
+		<!-- #endif -->
+	</custom-waterfalls-flow>
+</template>
+```
+
+<div id="c4"></div>
+
+#### 属性说明
+
+参数|说明|类型|是否必填|可选值|默认值
+-|-|-|-|-|-|
+value|渲染的列表|Array|是|-|-
+column|列数|Number|否|2-maxColumn|2
+maxColumn|最大列数|Number|否|>2|5
+columnSpace|列之间的间距（单位是百分比）|Number|否|-|2
+imageKey|列表中的图片字段的键名|String|否|-|image
+hideImageKey|隐藏图片字段的键名|String|否|-|hide
+seat|自定义文字的位置,1-图片上方，2-图片下方|Number|否|1/2|2
+listStyle|单个展示项的样式|Object|否|示例：```{'background':'red'}```|-
+
+<div id="c5"></div>
+
+#### 事件说明
+
+事件名称|说明|回调参数
+-|-|-|
+@loaded|图片加载完成事件|-
+@wapperClick|单项点击事件|单项对应参数
+@imageClick|图片点击事件|单项对应参数
+
+<div id="c6"></div>
+
+#### 组件方法
+
+事件名称|说明|参数|使用场景
+-|-|-|-
+refresh|刷新数据，数据初始化，vue2中使用：```this.$refs.waterfallsFlowRef.refresh();```；vue3中使用：```const waterfallsFlowRef = ref(null);waterfallsFlowRef.value.refresh();```|-|下拉刷新等
+
+<div id="c7"></div>
+
+#### refresh的使用示例
+
+***vue2中使用***
+
+```
+<template>
+    <view>
+        <button class="btn" type="default" @click="reset()">刷新数据</button>
+    	<custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list"></custom-waterfalls-flow>
+    </view>
+</template>
+<script>
+	export default {
+	    data() {
+			return {
+				data:{
+					list: [
+						{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }, 
+						{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }
+					]
+				}
+			}
+		},
+		reset(){
+			this.data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
+			this.$refs.waterfallsFlowRef.refresh();
+		}
+	}
+</script>
+```
+
+***vue3中使用***
+
+```
+<template>
+    <view>
+        <button class="btn" type="default" @click="reset()">刷新数据</button>
+    	<custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list"></custom-waterfalls-flow>
+    </view>
+</template>
+<script setup>
+	import { reactive, ref } from 'vue';
+	const data = reactive({
+		list: [
+			{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }, 
+			{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }
+		]
+	});
+	const waterfallsFlowRef = ref(null);
+	function reset(){
+		data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
+		waterfallsFlowRef.value.refresh();
+	}
+</script>
+```
+
+<div id="c8"></div>
+
+#### 隐藏单项图片示例
+
+在数据列表中配置```hide:true```或者```hide:1```，就可以达到不显示图片的效果。支持使用参数hideImageKey自定义键名称，那就使用：```定义的键名称:true```或者```定义的键名称:1```。
+
+```
+<template>
+	<custom-waterfalls-flow :value="data.list">
+		<!-- #ifdef MP-WEIXIN -->
+		<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
+			<view class="title">{{item.title}}</view>
+			<view class="desc">{{item.desc}}</view>
+		</view>
+		<!-- #endif -->
+		<!-- #ifndef MP-WEIXIN -->
+		<template v-slot:default="item">
+			<view class="item">
+				<view class="title">{{item.title}}</view>
+				<view class="desc">{{item.desc}}</view>
+			</view>
+		</template>
+		<!-- #endif -->
+	</custom-waterfalls-flow>
+</template>
+<script setup>
+	import { reactive, ref } from 'vue';
+	const data = reactive({
+		list: [
+			{ image: 'https://via.placeholder.com/200x500.png/ff0000',
+			hide:1,title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }, 
+			{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }
+		]
+	});
+</script>
+```
+
+<div id="c9"></div>
+
+#### 完整示例
+
+```
+<template>
+	<view style="padding: 0 10rpx;">
+		<view class="handle">
+			<button class="btn" type="default" @click="add()">增加数据</button>
+			<button class="btn" type="default" @click="changeColumn(1)">+列数({{column}})</button>
+			<button class="btn" type="default" @click="changeColumn(0)">-列数({{column}})</button>
+			<button class="btn" type="default" @click="reset()">刷新数据</button>
+		</view>
+		<custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list" :column="column" :columnSpace="1.5" :seat="2" @wapperClick="wapperClick" @imageClick="imageClick" @loaded="loaded">
+			<!-- #ifdef MP-WEIXIN -->
+			<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
+				<view class="title">{{item.title}}</view>
+				<view class="desc">{{item.desc}}</view>
+			</view>
+			<!-- #endif -->
+			<!-- #ifndef MP-WEIXIN -->
+			<template v-slot:default="item">
+				<view class="item">
+					<view class="title">{{item.title}}</view>
+					<view class="desc">{{item.desc}}</view>
+				</view>
+			</template>
+			<!-- #endif -->
+		</custom-waterfalls-flow>
+	</view>
+</template>
+<script setup>
+	// #ifdef VUE3
+	import { reactive, ref, onMounted } from 'vue';
+	const data = reactive({
+		list: [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }, 
+					{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }, 
+					{ image: 'https://via.placeholder.com/200x100.png/FFB6C1', title: '我是标题3', desc: '描述描述描述描述描述描述描述描述3' }, 
+					{ image: 'https://via.placeholder.com/200x300.png/9400D3', title: '我是标题4', desc: '描述描述描述描述描述描述描述描述4' }, 
+					{ image: 'https://via.placeholder.com/100x240.png/B0E0E6', title: '我是标题5', desc: '描述描述描述描述描述描述描述描述5' }, 
+					{ image: 'https://via.placeholder.com/140x280.png/7FFFAA', title: '我是标题6', desc: '描述描述描述描述描述描述描述描述6' }, 
+					{ image: 'https://via.placeholder.com/40x60.png/EEE8AA', title: '我是标题7', desc: '描述描述描述描述描述描述描述描述7' }]
+	});
+	const column = ref(3);
+
+	function add() {
+		const newArr = [{ image: 'https://via.placeholder.com/58x100.png/FF7F50', title: '我是标题8', desc: '描述描述描述描述描述描述描述描述8' }, 
+				{ image: 'https://via.placeholder.com/59x100.png/C0C0C0', title: '我是标题9', desc: '描述描述描述描述描述描述描述描述9' }, 
+				{ image: 'https://via.placeholder.com/60x100.png/FAEBD7', title: '我是标题10', desc: '描述描述描述描述描述描述描述描述10' }];
+		data.list = data.list.concat(newArr);
+	}
+
+	function changeColumn(h) {
+		column.value = !h ? column.value - 1 : column.value + 1;
+	}
+
+	function loaded() {
+		console.log('加载完成')
+	}
+
+	function wapperClick(item) {
+		console.log('单项点击事件', item)
+	}
+
+	function imageClick(item) {
+		console.log('图片点击事件', item)
+	}
+	const waterfallsFlowRef = ref(null);
+
+	function reset() {
+		data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
+		waterfallsFlowRef.value.refresh();
+	}
+	// #endif
+</script>
+<script>
+	// #ifdef VUE2
+	export default {
+		data() {
+			return {
+				data: {
+					list: [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }, 
+					{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }, 
+					{ image: 'https://via.placeholder.com/200x100.png/FFB6C1', title: '我是标题3', desc: '描述描述描述描述描述描述描述描述3' }, 
+					{ image: 'https://via.placeholder.com/200x300.png/9400D3', title: '我是标题4', desc: '描述描述描述描述描述描述描述描述4' }, 
+					{ image: 'https://via.placeholder.com/100x240.png/B0E0E6', title: '我是标题5', desc: '描述描述描述描述描述描述描述描述5' }, 
+					{ image: 'https://via.placeholder.com/140x280.png/7FFFAA', title: '我是标题6', desc: '描述描述描述描述描述描述描述描述6' }, 
+					{ image: 'https://via.placeholder.com/40x60.png/EEE8AA', title: '我是标题7', desc: '描述描述描述描述描述描述描述描述7' }]
+				},
+				column: 3
+			}
+		},
+		methods: {
+			add() {
+				const newArr = [{ image: 'https://via.placeholder.com/58x100.png/FF7F50', title: '我是标题8', desc: '描述描述描述描述描述描述描述描述8' }, 
+				{ image: 'https://via.placeholder.com/59x100.png/C0C0C0', title: '我是标题9', desc: '描述描述描述描述描述描述描述描述9' }, 
+				{ image: 'https://via.placeholder.com/60x100.png/FAEBD7', title: '我是标题10', desc: '描述描述描述描述描述描述描述描述10' }]
+				this.data.list = this.data.list.concat(newArr);
+			},
+			changeColumn(h) {
+				this.column = !h ? this.column - 1 : this.column + 1;
+			},
+			loaded() {
+				console.log('加载完成')
+			},
+			wapperClick(item) {
+				console.log('单项点击事件', item)
+			},
+			imageClick(item) {
+				console.log('图片点击事件', item)
+			},
+			reset() {
+				this.data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
+				this.$refs.waterfallsFlowRef.refresh();
+			}
+		}
+	}
+	// #endif
+</script>
+<style>
+	page {
+		background-color: #f2f5f9;
+	}
+</style>
+<style lang="scss" scoped>
+	.handle {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		margin-bottom: 20rpx;
+		padding: 10rpx;
+
+		.btn {
+			margin: 20rpx 10rpx;
+			padding: 0 20rpx;
+			background: #2878FF;
+			font-size: 28rpx;
+			color: #fff;
+
+			&::after {
+				border: 0;
+			}
+		}
+	}
+
+	.item {
+		padding: 10rpx 10rpx 20rpx;
+
+		.title {
+			line-height: 48rpx;
+			font-size: 28rpx;
+			color: #222;
+		}
+
+		.desc {
+			font-size: 24rpx;
+			color: #666;
+		}
+	}
+</style>
+```
+
+<div id="c10"></div>
+
+#### 温馨提示
+
+1、该插件反复测试过微信小程序、h5、app-vue三个端，vue2和vue3都兼容，其他端可能需要测试改进。
+
+2、该插件的使用hbuilderx版本最好升级到较新版本，我开发的版本是hbuilderx3.3.11.20220209。
+
+3、对此插件或相关问题有好的建议，可以直接在评论区进行讨论。
+
+4、希望遇到问题不要喷，也不要骂人，其实这种心情我能理解，写该插件也不是一时半会就完成了的，所以希望互相理解。只要有问题，我会第一时间回复解决。
+
+5、对此插件有任何问题的可以在下方留言，我会第一时间回复和解决问题。还可以加QQ群进行前端技术交流 568984539，加群备注‘地区-名字-技术类型’。
+
+#### 最后我想说：认为该插件对你有帮助的，记得收藏、好评，这样可以帮助到更多人哟！
+
+---
+
+<div id="c11"></div>
+
+#### 关注我，不迷路
+
+如果任何疑问的可以在评论区留言，还可以加QQ群交流：568984539，加群备注‘地区-名字-技术类型’。
+
+更多前端等相关知识可关注我个人博客：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343
+
+<div id="c12"></div>
+
+#### 个人作品展示
+
+uniapp+vue3.2+unicloud开发微信小程序：**皮皮虎去水印**。
+
+关注下方公众号：【**全网免费网盘资源**】、【**美团外卖饿了么天天领红包**】、【**去水印**】
+
+![image](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-bb657efd-fece-483e-a715-5daea480fde8/6e029310-aec8-46e9-9883-1c88dc1925ad.jpg)

virgo.wzfrontend/yui_wx/unpackage/dist/dev/mp-weixin/app.json

@@ -1,10 +1,11 @@
 {
   "pages": [
-    "pages/my/my",
-    "pages/message/message",
     "pages/highseas/highseas",
     "pages/index/index",
+    "pages/my/my",
     "pages/login/login",
+    "pages/myHouse/myHouse",
+    "pages/message/message",
     "pages/city/city",
     "pages/data/data",
     "pages/search/search",
@@ -13,7 +14,9 @@
     "pages/house/house",
     "pages/visitor/visitor",
     "pages/reservation/reservation",
-    "pages/chat/chat"
+    "pages/chat/chat",
+    "pages/myDetail/myDetail",
+    "pages/person/person"
   ],
   "subPackages": [],
   "window": {

virgo.wzfrontend/yui_wx/unpackage/dist/dev/mp-weixin/common/main.wxss

@@ -50,6 +50,7 @@
   background: #fff;
   border-radius: 16rpx;
   padding: 30rpx;
+  box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
 }
 .form-box .uni-forms .uni-forms-item__label {
   color: #1f1f1f;

virgo.wzfrontend/yui_wx/unpackage/dist/dev/mp-weixin/pages/my/my.json

@@ -1,4 +1,6 @@
 {
   "navigationBarTitleText": "个人中心",
-  "usingComponents": {}
+  "usingComponents": {
+    "uni-icons": "/uni_modules/uni-icons/components/uni-icons/uni-icons"
+  }
 }

virgo.wzfrontend/yui_wx/unpackage/dist/dev/mp-weixin/pages/my/my.wxss

@@ -9,9 +9,13 @@
 .my-box {
   height: 100vh;
   background: #fff;
+  overflow-y: auto;
+}
+.my-box .my-content {
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-bottom: 80rpx;
 }
 .my-box .my-top {
   height: 260rpx;
@@ -27,6 +31,7 @@
   border-radius: 50%;
   margin-top: -100rpx;
   border: 6rpx solid #fff;
+  background: #eee;
 }
 .my-box .name {
   font-size: 20px;
@@ -63,4 +68,37 @@
   font-weight: 300;
   margin-top: 10rpx;
 }
+.my-box .my-list {
+  width: 100%;
+  padding: 0 30rpx;
+  box-sizing: border-box;
+}
+.my-box .my-list .my-item {
+  display: flex;
+  align-items: center;
+  border-bottom: 2rpx solid #d9d9d9;
+  padding: 20rpx 0;
+}
+.my-box .my-list .my-item:first-child {
+  border-top: 2rpx solid #d9d9d9;
+}
+.my-box .my-list .my-icon {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20rpx;
+  background: #c1c0c8;
+}
+.my-box .my-list .my-forward {
+  height: 40rpx;
+}
+.my-box .my-list .item-content {
+  flex: 1;
+  width: 0;
+  overflow: hidden;
+  font-weight: 700;
+}
 

virgo.wzfrontend/yui_wx/unpackage/dist/dev/mp-weixin/pages/myDetail/myDetail.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "个人信息",
+  "usingComponents": {}
+}

virgo.wzfrontend/yui_wx/unpackage/dist/dev/mp-weixin/pages/myDetail/myDetail.wxss

@@ -0,0 +1,44 @@
+@charset "UTF-8";
+/* 需要放到文件最上面 */
+/* 水平间距 */
+/* 水平间距 */
+/*
+ 以下变量是默认值，如不需要修改可以不用给下面的变量重新赋值
+ */
+/* 水平间距 */
+.detail-content {
+  padding: 30rpx;
+}
+.detail-content .detail-avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+}
+.detail-content .detail-box {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
+}
+.detail-content .detail-label {
+  color: #8c8c8c;
+  font-weight: 300;
+  margin-bottom: 10rpx;
+}
+.detail-content .detail-value {
+  font-size: 32rpx;
+  color: #434343;
+}
+.detail-content .detail-item {
+  margin-bottom: 20rpx;
+}
+.detail-content .logout {
+  margin-top: 40rpx;
+  background: #ff4d4f;
+  color: #fff;
+  height: 68rpx;
+  line-height: 68rpx;
+  border-radius: 68rpx;
+  text-align: center;
+}
+

virgo.wzfrontend/yui_wx/unpackage/dist/dev/mp-weixin/pages/myHouse/myHouse.json

@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "我的房源",
+  "usingComponents": {
+    "mescroll-body": "/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body",
+    "custom-waterfalls-flow": "/uni_modules/custom-waterfalls-flow/components/custom-waterfalls-flow/custom-waterfalls-flow"
+  }
+}

virgo.wzfrontend/yui_wx/unpackage/dist/dev/mp-weixin/pages/myHouse/myHouse.wxss

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+/* 需要放到文件最上面 */
+/* 水平间距 */
+/* 水平间距 */
+/*
+ 以下变量是默认值，如不需要修改可以不用给下面的变量重新赋值
+ */
+/* 水平间距 */
+.my-house-list .my-house {
+  padding: 0 30rpx;
+  box-sizing: border-box;
+}
+.my-house-list .my-house .item {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 56rpx;
+  background-color: rgba(0, 0, 0, 0.6);
+  line-height: 56rpx;
+  font-size: 24rpx;
+  font-weight: 300;
+  padding: 0 20rpx;
+  overflow: hidden;
+  color: #fff;
+}
+

virgo.wzfrontend/yui_wx/unpackage/dist/dev/mp-weixin/pages/person/person.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "房东信息",
+  "usingComponents": {
+    "custom-waterfalls-flow": "/uni_modules/custom-waterfalls-flow/components/custom-waterfalls-flow/custom-waterfalls-flow"
+  }
+}

virgo.wzfrontend/yui_wx/unpackage/dist/dev/mp-weixin/pages/person/person.wxss

@@ -0,0 +1,86 @@
+@charset "UTF-8";
+/* 需要放到文件最上面 */
+/* 水平间距 */
+/* 水平间距 */
+/*
+ 以下变量是默认值，如不需要修改可以不用给下面的变量重新赋值
+ */
+/* 水平间距 */
+.my-box {
+  height: 100vh;
+  background: #fff;
+  overflow-y: auto;
+}
+.my-box .my-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 80rpx;
+}
+.my-box .my-top {
+  height: 260rpx;
+  background-image: url("https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyMDUzMDJ8MHwxfHNlYXJjaHw1fHxhYnN0cmFjdHxlbnwxfHx8fDE2NTI4OTYzNTU&ixlib=rb-1.2.1&q=80&w=1080");
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 100%;
+}
+.my-box .my-avatar {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 50%;
+  margin-top: -100rpx;
+  border: 6rpx solid #fff;
+}
+.my-box .name {
+  font-size: 20px;
+  font-weight: 700;
+  margin: 10rpx 0;
+}
+.my-box .organization {
+  color: #8c8c8c;
+  font-weight: 300;
+}
+.my-box .btn-box {
+  box-sizing: border-box;
+  padding: 30rpx;
+  width: 100%;
+}
+.my-box .my-button {
+  width: 100%;
+  height: 68rpx;
+  line-height: 68rpx;
+  border-radius: 68rpx;
+  border: 1px solid #08979c;
+  background: #08979c;
+  text-align: center;
+  color: #fff;
+}
+.my-box .my-button.my-button-cancel {
+  border-color: #8c8c8c;
+  color: #8c8c8c;
+  background: #fff;
+}
+.my-box .my-house {
+  width: 100%;
+  padding: 0 30rpx;
+  box-sizing: border-box;
+}
+.my-box .my-house .item {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 56rpx;
+  background-color: rgba(0, 0, 0, 0.6);
+  line-height: 56rpx;
+  font-size: 24rpx;
+  font-weight: 300;
+  padding: 0 20rpx;
+  overflow: hidden;
+  color: #fff;
+}
+.my-box .my-house .my-house-title {
+  font-weight: 500;
+  margin-bottom: 20rpx;
+}
+

virgo.wzfrontend/yui_wx/unpackage/dist/dev/mp-weixin/static/scss/common.scss

@@ -6,7 +6,8 @@
 		background: #fff;
 		border-radius: 16rpx;
 		padding: 30rpx;
-
+		box-shadow: 0px 1px 12px rgba(3,3,3,0.08);
+		
 		.uni-forms-item__label {
 			color: $uni-main-color;
 			padding-bottom: 0 !important;
@@ -48,8 +49,7 @@
 			right: 30rpx;
 			top: 0rpx;
 		}
-	}
-	
+	}
 }
 //底部按钮
 .hui-button-box {

virgo.wzfrontend/yui_wx/unpackage/dist/dev/mp-weixin/uni_modules/custom-waterfalls-flow/components/custom-waterfalls-flow/custom-waterfalls-flow.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "component": true
+}

virgo.wzfrontend/yui_wx/unpackage/dist/dev/mp-weixin/uni_modules/custom-waterfalls-flow/components/custom-waterfalls-flow/custom-waterfalls-flow.wxss

@@ -0,0 +1,38 @@
+@charset "UTF-8";
+/* 需要放到文件最上面 */
+/* 水平间距 */
+/* 水平间距 */
+/*
+ 以下变量是默认值，如不需要修改可以不用给下面的变量重新赋值
+ */
+/* 水平间距 */
+.waterfalls-flow.data-v-ddfcbb1c {
+  overflow: hidden;
+}
+.waterfalls-flow-column.data-v-ddfcbb1c {
+  float: left;
+}
+.column-value.data-v-ddfcbb1c {
+  width: 100%;
+  font-size: 0;
+  overflow: hidden;
+  transition: opacity .4s;
+  opacity: 0;
+  position: relative;
+}
+.column-value-show.data-v-ddfcbb1c {
+  opacity: 1;
+}
+.column-value .inner.data-v-ddfcbb1c {
+  font-size: 30rpx;
+}
+.column-value .img.data-v-ddfcbb1c {
+  width: 100%;
+}
+.column-value .img-hide.data-v-ddfcbb1c {
+  display: none;
+}
+.column-value .img-error.data-v-ddfcbb1c {
+  background: #f2f2f2 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiAQMAAAAatXkPAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAAIZJREFUCNdlzjEKwkAUBNAfEGyCuYBkLyLuxRYW2SKlV1JSeA2tUiZg4YrLjv9PGsHqNTPMSAQuyAJgRDHSyvBPwtZoSJXakeJI9iuRLGDygdl6V0yKDtyMAeMPZySj8yfD+UapvRPj2JOwkyAooSV5IwdDjPdCPspe8LyTl9IKJvDETKKRv6vnlUasgg0fAAAAAElFTkSuQmCC) no-repeat center center;
+}
+