增加视频动态消息页待完善

Signed-off-by: YangWork <yang@xixingwl.cn>
2023-02-13 17:57:06 +08:00
parent bf3d8a8099
commit 2ad0f3495b
13 changed files with 336 additions and 31 deletions
--- a/member/homepage/homepage.vue
+++ b/member/homepage/homepage.vue
@@ -1,14 +1,15 @@
 <template>
-	<view>
+	<view style="height: 100vh;">
 		<uni-nav-bar shadow left-icon="left" fixed rightIcon="more-filled" rightText="编辑" title="他/她的主页"
 			backgroundColor="transparent" />

 		<uni-swiper-dot class="uni-swiper-dot-box" :info="info" :current="current" mode="round" field="content">
 			<swiper class="swiper-box" :current="swiperDotIndex">
 				<swiper-item v-for="(item, index) in info" :key="index">
-					<view class="swiper-item" :class="'swiper-item' + index">
-						<image :src="item.url" mode="widthFix" alt=""></image>
+					<view class="swiper-item" :class="'swiper-item' + index" style="width: 100%; height: 100%;">
+						<image :src="item.url" mode="aspectFill" alt="" style="width: 100%; height: 100%;"></image>
 					</view>
+
 				</swiper-item>
 			</swiper>
 		</uni-swiper-dot>
@@ -44,8 +45,9 @@
 				<uni-icons type="right"></uni-icons>
 			</template>
 		</uni-section>
-
-		<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup"   style="margin-top: 20px;" />
+		<view class="goods-carts">
+			<uni-goods-nav :options="options" :button-group="buttonGroup" />
+		</view>
 	</view>
 </template>

@@ -79,12 +81,11 @@
 					text: '关注',
 				}],
 				buttonGroup: [{
-						text: '撩一下TA',
-						backgroundColor: 'linear-gradient(90deg, #ff55ff, #ff557f)',
-						color: '#fff'
-					}
-				],
-			} 
+					text: '撩一下TA',
+					backgroundColor: 'linear-gradient(90deg, #ff55ff, #ff557f)',
+					color: '#fff'
+				}],
+			}
 		},
 		methods: {

@@ -93,5 +94,18 @@
 </script>

 <style>
-
+	.goods-carts {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		position: fixed;
+		left: 0;
+		right: 0;
+		/* #ifdef H5 */
+		left: var(--window-left);
+		right: var(--window-right);
+		/* #endif */
+		bottom: 0;
+	}
 </style>
--- a/member/profile/profile.vue
+++ b/member/profile/profile.vue
@@ -9,8 +9,8 @@
 					<uni-easyinput type="textarea" :disabled="isDisabled" v-model="formData.introduction"
 						placeholder="请输入自我介绍" />
 				</uni-forms-item>
-				<uni-forms-item label="昵称" name="name">
-					<uni-easyinput v-model="formData.name" placeholder="请输入姓名" :disabled="isDisabled" />
+				<uni-forms-item label="昵称" name="nickname">
+					<uni-easyinput v-model="formData.nickname" placeholder="请输入昵称" :disabled="isDisabled" />
 				</uni-forms-item>
 				<uni-forms-item label="性别">
 					<uni-data-checkbox v-model="formData.sex" :localdata="sexs" :disabled="isDisabled" />
@@ -19,22 +19,22 @@
 					<uni-datetime-picker type="date" return-type="timestamp" v-model="formData.datetimesingle"
 						:disabled="isDisabled" />
 				</uni-forms-item>
-				<uni-forms-item label="身高" name="name">
-					<uni-easyinput v-model="formData.name" type="number" placeholder="请输入姓名" :disabled="isDisabled" />
+				<uni-forms-item label="身高" name="height">
+					<uni-easyinput v-model="formData.height" type="number" placeholder="请输入姓名" :disabled="isDisabled" />
 				</uni-forms-item>

 				<uni-forms-item label="所在地">
 					<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
 				</uni-forms-item>
 				<uni-forms-item label="学历">
-					<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled">
+					<uni-data-select  :localdata="educations" :disabled="isDisabled">
 					</uni-data-select>
 				</uni-forms-item>
 				<uni-forms-item label="职业">
 					<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
 				</uni-forms-item>
 				<uni-forms-item label="企业">
-					<uni-easyinput v-model="formData.name" type="number" placeholder="请输入姓名" :disabled="isDisabled" />
+					<uni-easyinput type="number" placeholder="请输入姓名" :disabled="isDisabled" />
 				</uni-forms-item>
 				<uni-forms-item label="家乡">
 					<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
@@ -46,11 +46,11 @@


 				<uni-forms-item label="月收入">
-					<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled">
+					<uni-data-select  :localdata="educations" :disabled="isDisabled">
 					</uni-data-select>
 				</uni-forms-item>
 				<uni-forms-item label="婚姻">
-					<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled">
+					<uni-data-select :localdata="educations" :disabled="isDisabled">
 					</uni-data-select>
 				</uni-forms-item>
 				<uni-forms-item label="房产">
@@ -69,7 +69,7 @@
 					<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
 				</uni-forms-item>
 				<uni-forms-item label="学历">
-					<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled">
+					<uni-data-select :localdata="educations" :disabled="isDisabled">
 					</uni-data-select>
 				</uni-forms-item>
 			</uni-forms>
@@ -87,8 +87,9 @@
 				isDisabled: true,
 				// 基础表单数据
 				formData: {
-					name: '',
-					age: '',
+					nickname: '',
+					height:0,
+					age: 0,
 					introduction: '',
 					sex: 2,
 					hobby: [5],
--- a/pages.json
+++ b/pages.json
@@ -14,7 +14,24 @@
 				"navigationBarTitleText": "主页",
 				"enablePullDownRefresh": false
 			}
-		},
+		},{
+            "path" : "pages/tabbar/videos/videos",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/tabbar/dynamics/dynamics",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        },
 		{
 			"path": "pages/tabbar/my/my",
 			"style": {
@@ -30,7 +47,17 @@
 			}

 		}
-	],
+        ,{
+            "path" : "pages/tabbar/messages/messages",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+            }
+            
+        }
+    ],
 	"subPackages": [{
 		"root": "member",
 		"pages": [{
@@ -50,21 +77,27 @@
 		}]
 	}],
 	"tabBar": {
+		
 		"list": [{
 				"pagePath": "pages/tabbar/home/home",
 				"text": "主页",
 				"selectedIconPath": "static/tabbar/home_active.png",
 				"iconPath": "static/tabbar/home.png"
 			},{
-				"pagePath": "pages/tabbar/home/home",
+				"pagePath": "pages/tabbar/dynamics/dynamics",
 				"text": "动态",
-				"selectedIconPath": "static/tabbar/home_active.png",
-				"iconPath": "static/tabbar/home.png"
+				"selectedIconPath": "static/tabbar/pyq_active.png",
+				"iconPath": "static/tabbar/pyq.png"
 			},{
-				"pagePath": "pages/tabbar/home/home",
+				"pagePath": "pages/tabbar/videos/videos",
+				"text": "视频",
+				"selectedIconPath": "static/tabbar/videos_active.png",
+				"iconPath": "static/tabbar/videos.png"
+			},{
+				"pagePath": "pages/tabbar/messages/messages",
 				"text": "消息",
-				"selectedIconPath": "static/tabbar/home_active.png",
-				"iconPath": "static/tabbar/home.png"
+				"selectedIconPath": "static/tabbar/message-active.png",
+				"iconPath": "static/tabbar/message.png"
 			},
 			{
 				"pagePath": "pages/tabbar/my/my",
--- a/pages/tabbar/dynamics/dynamics.vue
+++ b/pages/tabbar/dynamics/dynamics.vue
@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>
--- a/pages/tabbar/messages/messages.vue
+++ b/pages/tabbar/messages/messages.vue
@@ -0,0 +1,213 @@
+<template>
+	<view>
+		<uni-nav-bar fixed="true">
+			<block slot="left">
+				<view class="city">
+					<view>
+						<text class="uni-nav-bar-text">{{ city }}</text>
+					</view>
+					<uni-icons type="arrowdown" color="#666" size="18" />
+				</view>
+			</block>
+			<view class="input-view">
+				<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
+				<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
+					@confirm="confirm" />
+			</view>
+			<block slot="right">
+				<view class="city">
+					搜索
+				</view>
+			</block>
+		</uni-nav-bar>
+		<uni-list>
+			<uni-list-chat clickable @click="onClick(item)" v-for="item in listData" :key="item.id"
+				:title="item.author_name" :avatar="item.cover" :note="item.title" badge-positon="left"
+				:badge-text="item.text">
+				<view class="chat-custom-right">
+					<text class="chat-custom-text">刚刚</text>
+					<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
+				</view>
+			</uni-list-chat>
+		</uni-list>
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				UNITS: {
+					'年': 31557600000,
+					'月': 2629800000,
+					'天': 86400000,
+					'小时': 3600000,
+					'分钟': 60000,
+					'秒': 1000
+				},
+				listData: [],
+				city: '北京'
+			}
+		},
+		onLoad() {
+			this.getList()
+		},
+		methods: {
+			confirm() {
+				uni.showToast({
+					title: '搜索'
+				})
+			},
+			onClick(e) {
+				console.log(e)
+				uni.showToast({
+					title: '列表被点击'
+				})
+			},
+			avatar(count) {
+				let arr = []
+				this.avatarList.forEach((item, index) => {
+					if (index < count) {
+						arr.push(item)
+					}
+				})
+				return arr
+			},
+			getList() {
+				var data = {
+					column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
+				};
+
+				uni.request({
+					url: 'https://unidemo.dcloud.net.cn/api/news',
+					data: data,
+					success: data => {
+						if (data.statusCode == 200) {
+							let list = this.setTime(data.data);
+							list = this.reload ? list : this.listData.concat(list);
+							list.map(item => {
+								item.text = Math.floor(Math.random() * (1 - 20) + 20)
+								return item
+							})
+							this.listData = this.getRandomArrayElements(list, 20)
+						}
+					},
+					fail: (data, code) => {
+						console.log('fail' + JSON.stringify(data));
+					}
+				});
+			},
+			getRandomArrayElements(arr, count) {
+				var shuffled = arr.slice(0),
+					i = arr.length,
+					min = i - count,
+					temp, index;
+				while (i-- > min) {
+					index = Math.floor((i + 1) * Math.random());
+					temp = shuffled[index];
+					shuffled[index] = shuffled[i];
+					shuffled[i] = temp;
+				}
+				return shuffled.slice(min);
+			},
+			setTime(items) {
+				var newItems = [];
+				items.forEach(e => {
+					newItems.push({
+						author_name: e.author_name,
+						cover: e.cover,
+						id: e.id,
+						post_id: e.post_id,
+						published_at: this.format(e.published_at),
+						title: e.title
+					});
+				});
+				return newItems;
+			},
+			format(dateStr) {
+				var date = this.parse(dateStr)
+				var diff = Date.now() - date.getTime();
+				if (diff < this.UNITS['天']) {
+					return this.humanize(diff);
+				}
+				var _format = function(number) {
+					return (number < 10 ? ('0' + number) : number);
+				};
+				return date.getFullYear() + '-' + _format(date.getMonth() + 1) + '-' + _format(date.getDate()) + ' ' +
+					_format(date.getHours()) + ':' + _format(date.getMinutes());
+			},
+			parse(str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
+				var a = str.split(/[^0-9]/);
+				return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
+			},
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	.chat-custom-right {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: flex-end;
+	}
+
+	.chat-custom-text {
+		font-size: 12px;
+		color: #999;
+	}
+
+	$nav-height: 30px;
+
+	.box-bg {
+		background-color: #F5F5F5;
+		padding: 5px 0;
+	}
+
+	.city {
+		/* #ifndef APP-PLUS-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		// width: 160rpx;
+		margin-left: 4px;
+	}
+
+	.input-view {
+		/* #ifndef APP-PLUS-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		// width: 500rpx;
+		flex: 1;
+		background-color: #f8f8f8;
+		height: $nav-height;
+		border-radius: 15px;
+		padding: 0 15px;
+		flex-wrap: nowrap;
+		margin: 7px 0;
+		line-height: $nav-height;
+	}
+
+	.input-uni-icon {
+		line-height: $nav-height;
+	}
+
+	.nav-bar-input {
+		height: $nav-height;
+		line-height: $nav-height;
+		/* #ifdef APP-PLUS-NVUE */
+		width: 370rpx;
+		/* #endif */
+		padding: 0 5px;
+		font-size: 12px;
+		background-color: #f8f8f8;
+	}
+</style>
--- a/pages/tabbar/videos/videos.vue
+++ b/pages/tabbar/videos/videos.vue
@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>
--- a/static/tabbar/message-active.png
+++ b/static/tabbar/message-active.png
--- a/static/tabbar/message.png
+++ b/static/tabbar/message.png
--- a/static/tabbar/pyq.png
+++ b/static/tabbar/pyq.png
--- a/static/tabbar/pyq_active.png
+++ b/static/tabbar/pyq_active.png
--- a/static/tabbar/videos.png
+++ b/static/tabbar/videos.png
--- a/static/tabbar/videos_active.png
+++ b/static/tabbar/videos_active.png
--- a/static/user/back.jpg
+++ b/static/user/back.jpg