weapp-online/pages/note_pad/note_pad.vue

<template>
	<view class="note_pad">
		<view class="note" v-if="curTab == 0">
			<custom-nav :bgColor="lineBg" class="nav">
				<view class="cur" @click="goBack">
					<text class="iconfont iconzuojiantou"></text>
					<text>便签</text>
				</view>
			</custom-nav>
			<view class="note_bg" :style="{ 'padding-top': height + 'px' }">
				<image src="../../static/imgs/note_bg.png"></image>
				<view class="note_con">
					<view class="note_user">
						<view class="flexS">
							<image :src="userInfo.avatar"></image>
							<view>
								<view style="font-size:36rpx;font-weight: bold;margin-bottom:10rpx;">{{ userInfo.nickname }}</view>
								<view style="font-size:24rpx;">{{ userInfo.phone }}</view>
							</view>
						</view>
						<view class="level flexC">
							<text class="iconfont iconxunzhang"></text>
							<text>{{ userInfo.level }}</text>
						</view>
					</view>
					<view class="flexS note_count" :style="{ top: top + 'rpx' }">
						<view class="flexCC" style="margin-right:75rpx;">
							<view class="intr">便签数</view>
							<view>
								<text class="count">{{ noteList.count.total ? noteList.count.total : 0 }}</text>
								<text class="unit">个</text>
							</view>
						</view>
						<view class="flexCC">
							<view class="intr">已发布</view>
							<view>
								<text class="count">{{ noteList.count.release_total ? noteList.count.release_total : 0 }}</text>
								<text class="unit">个</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="note_list">
				<view class="con" v-for="(item, index) in noteList.list" :key="index">
					<view class="con_title">第{{ item.season }}届大卫博士创业{{ item.type == 1 ? '密训营' : '实战营' }}</view>
					<view v-for="temp in item.note_list" :key="temp.id" @click="skipAdd(temp.id, item.type)">
						<view class="con_list flexB" :class="temp.level == 1 ? 'border1' : temp.level == 2 ? 'border2' : 'border0'">
							<view>
								<view class="note_name">{{ temp.title }}</view>
								<view class="note_del">
									<text class="iconfont iconshijian"></text>
									<text>{{ temp.created_at }}</text>
									<text style="color:#F44545;margin-left:10rpx;font-weight: bold;">{{ temp.status == 1 ? '已发布' : '' }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="find" v-if="curTab == 1">
			<custom-nav :bgColor="bgColor">
				<view class="current" @click="goBack">
					<text class="iconfont iconzuojiantou"></text>
					<text>发现便签</text>
				</view>
			</custom-nav>
			<view class="find_con" v-for="item in findList" :key="item.id" @click="noteDetail(item.id)">
				<view class="find_list">
					<view class="flexS user">
						<image :src="item.get_user.avatar" class="photo"></image>
						<text>{{ item.get_user.nickname }}</text>
					</view>
					<view class="find_title">{{ item.title }}</view>
					<view class="find_intr">{{ item.summary }}</view>
					<view class="find_img" v-if="item.cover_url"><image :src="item.cover_url" mode="widthFix"></image></view>
					<view class="flexB">
						<text style="font-size:24rpx;color:#999;">{{ item.time }}</text>
						<view class="flexS">
							<view style="margin-right:15rpx;" @click.stop="giveLike(item.id, item.like_status)">
								<image
									:src="item.like_status ? '../../static/imgs/like.png' : '../../static/imgs/before_like.png'"
									style="width: 37rpx;height:31rpx;vertical-align:middle;"
								></image>
								<text style="margin-left:10rpx;">{{ item.like }}</text>
							</view>
							<view>
								<image src="../../static/imgs/comment.png" style="width: 33rpx;height:33rpx;vertical-align:middle;"></image>
								<text style="margin-left:10rpx;">{{ item.comment }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="block"></view>
			</view>
		</view>
		<view class="note_bottom flexA">
			<view @click="choose(0)" class="flexCC">
				<image :src="curTab == 0 ? '../../static/imgs/note_active.png' : '../../static/imgs/note.png'" style="width:53rpx;height:49rpx;"></image>
				<view :class="curTab == 0 ? 'active' : ''">便签</view>
			</view>
			<view class="add" @click="addNote"><image src="../../static/imgs/add.png"></image></view>
			<view @click="choose(1)" class="flexCC">
				<image :src="curTab == 1 ? '../../static/imgs/find_active.png' : '../../static/imgs/find.png'" style="width:53rpx;height:49rpx;"></image>
				<view :class="curTab == 1 ? 'active' : ''">发现</view>
			</view>
		</view>
	</view>
</template>

<script>
let app = getApp();
import customNav from '../../components/custom-nav.vue';
import { findNote, myNote, clickHeart } from '../../api/note.js';
export default {
	data() {
		return {
			noteList: '', //便签列表
			findList: '', //发现列表
			curTab: 0, //便签跟发现之间的切换
			userInfo: '',
			lineBg: 'linear-gradient(180deg, #FC9863 0%, #F76454 100%)', //自定义导航栏背景色（便签）
			bgColor: '#fff', //自定义导航栏背景色（发现）
			height: '', // 导航栏下第一个元素的高度  适配机型
			top: ''
		};
	},
	components: {
		customNav
	},
	onLoad(options) {
		
		this.height = app.globalData.navBarHeight;
		//便签详情返回显示发现页面
		this.curTab = options.curTab;
	},
	onShow() {
		if (!uni.getStorageSync('token')) {
			uni.switchTab({
				url: '../index/index'
			});
		}
		if (this.curTab == 1) {
			this.getFindNote();
		} else {
			this.getNote();
		}
		this.userInfo = uni.getStorageSync('userInfo');
	},
	methods: {
		goBack() {
			uni.switchTab({
				url: '../mine/mine'
			});
		},
		/*
		 * 获取便签列表
		 */
		getNote() {
			myNote().then(res => {
				if (res.code == 200) {
					this.noteList = res.data;
				} else {
					uni.showModal({
						content: res.message || '获取便签列表失败',
						showCancel: false
					});
				}
			});
		},

		/*
		 * 点击跳转到编辑页面
		 */
		skipAdd(id, type) {
			console.log(type);
			uni.navigateTo({
				url: '../add_note/add_note?id=' + id + '&type=' + type
			});
		},
		/*
		 * 获取发现里的列表
		 */
		getFindNote() {
			findNote().then(res => {
				if (res.code == 200) {
					this.findList = res.data.list;
				} else {
					uni.showModal({
						content: res.message || '获取列表失败',
						showCancel: false
					});
				}
			});
		},
		/*
		 * 发现列表点赞
		 * @parmas id 当前便签的id
		 */
		giveLike(id, isLike) {
			if (isLike) {
				uni.showModal({
					content: '您已点过赞了',
					showCancel: false
				});
				return false;
			}
			clickHeart({ id }).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '点赞成功',
						icon: 'none'
					});
					this.getFindNote();
				} else {
					uni.showModal({
						content: '点赞失败',
						showCancel: false
					});
				}
			});
		},
		//跳转到详情
		noteDetail(id) {
			uni.navigateTo({
				url: '../note_detail/note_detail?id=' + id
			});
		},
		/*
		* 便签和发现的tab切换
		* desc：tabType  0 便签  1 发现
		*/
		choose(tabType) {
			this.curTab = tabType;
			if (tabType == 0) {
				this.getNote();
			} else {
				this.getFindNote();
			}
		},
		//添加便签
		addNote() {
			uni.navigateTo({
				url: '../add_note/add_note'
			});
		}
	}
};
</script>
<style lang="scss">
.current {
	font-size: 36rpx;
	font-weight: bold;
	.iconfont {
		font-size: 40rpx;
		color: #333;
		margin-left: 15rpx;
		vertical-align: -2rpx;
	}
}
.cur {
	font-size: 36rpx;
	font-weight: bold;
	.iconfont,
	text {
		color: #fff;
	}
	text:last-child {
		margin-left: 255rpx;
	}
}
.note_pad {
	height: 100vh;
	width: 100%;
	position: relative;
}
.note_bottom {
	width: 100%;
	height: 100rpx;
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 0 30rpx;
	box-sizing: border-box;
	z-index: 9999;
	> view {
		view {
			font-size: 20rpx;
			color: #999;
			margin-top: 6rpx;
		}
		.active {
			color: #f76454;
		}
	}
	.add {
		margin-top: -15rpx;
		image {
			width: 172rpx;
			height: 172rpx;
			margin-top: -62rpx;
		}
	}
}
.note {
	.note_bg {
		position: relative;
		image {
			width: 100%;
			height: 342rpx;
		}
		.note_con {
			position: absolute;
			left: 0;
			top: 11vh;
			width: 100%;
			padding-left: 30rpx;
			image {
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
				margin-right: 15rpx;
			}
			.note_user {
				display: flex;
				justify-content: space-between;
				.level {
					width: 142rpx;
					height: 50rpx;
					background: linear-gradient(203deg, #fbdcac 0%, #ffefd7 31%, #ffdca5 55%, #feeacb 90%, #f9d193 100%);
					opacity: 1;
					border-radius: 30rpx 0px 0px 30rpx;
					color: #f44545;
					font-size: 24rpx;
					.iconfont {
						margin-top: 8rpx;
					}
				}
				view {
					color: #fff;
				}
			}
			.note_count {
				margin-top: 40rpx;
				.intr {
					font-size: 24rpx;
					color: #fff;
					opacity: 0.6;
				}
				.count {
					font-size: 64rpx;
					color: #fff;
					font-weight: bold;
				}
				.unit {
					font-size: 28rpx;
					color: #fff;
					margin-left: 5rpx;
				}
			}
		}
	}
	.note_list {
		padding-bottom: 160rpx;
		.con {
			.con_title {
				font-size: 32rpx;
				font-weight: bold;
				margin: 40rpx 0 0 30rpx;
				color: #333;
			}
			.con_list {
				width: 690rpx;
				margin: 30rpx auto;
				background: #fff;
				border-radius: 4rpx 20rpx 20rpx 4rpx;
				padding: 30rpx;
				box-sizing: border-box;
				.note_name {
					font-size: 36rpx;
					font-weight: bold;
				}
				.note_del {
					font-size: 24rpx;
					color: #999;
					margin-top: 12rpx;
					.iconfont {
						font-size: 30rpx;
						vertical-align: -2rpx;
						margin-right: 8rpx;
					}
				}
			}
			.border0 {
				border-left: 8rpx solid #f76454;
			}
			.border1 {
				border-left: 8rpx solid #82bdff;
			}
			.border2 {
				border-left: 8rpx solid #50cb60;
			}
		}
	}
}
.find {
	padding-top: 150rpx;
	width: 100%;
	height: 100%;
	background: #fff;
	.find_con {
		width: 100%;
		background: #fff;
		.find_list {
			width: 690rpx;
			margin: 0 auto 30rpx;
			padding: 20rpx 0;
			box-sizing: border-box;
			background: #fff;
		}

		.block {
			width: 100%;
			height: 20rpx;
			background-color: #f9f9fb;
		}
		.user {
			.photo {
				width: 76rpx;
				height: 76rpx;
				border-radius: 50%;
				margin-right: 15rpx;
			}
			text {
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.find_title {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			margin-top: 30rpx;
		}
		.find_intr {
			margin: 10rpx 0 30rpx;
			font-size: 28rpx;
			color: #333;
		}
		.find_img {
			margin: 30rpx 0;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.find_con:last-child {
		padding-bottom: 180rpx;
	}
}
</style>