完成发表页面UI

pages.json

@@ -804,6 +804,13 @@
 				"navigationBarTitleText": "积分商城",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/discover/publish",
+			"style" : {
+				"navigationBarTitleText": "发表",
+				"navigationStyle": "custom"
+			}
 		}
     ],
 	"globalStyle": {

pages/discover/discover.vue

@@ -39,6 +39,11 @@
 			</view>
 			<self-line/>
 		</view>
+		<view class="fixed-right">
+			<view class="fixed-btn" hover-class="lf-opacity" @click="$url('/pages/discover/publish')">
+				<text class="lf-iconfont icon-fabu lf-font-50"></text>
+			</view>
+		</view>
 		<lf-tabbar></lf-tabbar>
 	</view>
 </template>
@@ -112,6 +117,27 @@
 		height: 100rpx;
 		border-radius: 50%;
 	}
+	.fixed-right{
+		position: fixed;
+		right: 32rpx;
+		bottom: 188rpx;
+		width: max-content;
+		height: max-content;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+		.fixed-btn{
+			width: 100rpx;
+			height: 100rpx;
+			border-radius: 50%;
+			background-color: #15716E;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			color: #FFFFFF;
+		}
+	}
+	
+	
 	// tab样式
 	/deep/.u-scroll-box {
 		display: flex;

pages/discover/publish.vue

@@ -0,0 +1,163 @@
+<template>
+	<view>
+		<lf-nav title="发表" :showIcon="true" :backInquiry="backInquiry"></lf-nav>
+		<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>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				image_list: [],
+				image_count: 6,
+				content: '',
+				backInquiry: false
+			}
+		},
+		watch: {
+			content(val){
+				if(String(val).length){
+					this.backInquiry = true;
+				}else{
+					this.backInquiry = false;
+				}
+			}
+		},
+		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 => {
+						if(result.errMsg == "chooseImage:fail cancel"){
+							return; // 取消选择图片
+						}
+						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({
+						urls: 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;
+		}
+	}
+	
+	.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: #15716E;
+		color: #FFFFFF;
+	}
+	
+	/deep/.textarea-placeholder{
+		color: #999999;
+		line-height: 1;
+		vertical-align: middle;
+	}
+</style>