car-system-app/pages/driver/welfare/activity_x/post.vue

<template>
	<view>
		<view class="navbar-box fixed-top">
			<!-- #ifdef MP-WEIXIN -->
			<view :style="{height: `${$u.sys().statusBarHeight}px;`}" />
			<!-- #endif -->
			<!-- #ifdef APP -->
			<view :style="`height: ${$u.sys().statusBarHeight}px;`" />
			<!-- #endif -->
			<view class="navbar-title text-center rel">
				<view class="back nav-item abs" @click="navBackFn">
					<u-icon name="arrow-left" size="22" />
				</view>

				<text class="text">发帖子</text>
				<view class="btn abs nav-item">
					<u-button @click="issueFn" :customStyle="{width: '144rpx', height: '56rpx', fontSize: '24rpx'}"
						color="#13AFA8">发布</u-button>
				</view>
			</view>
		</view>
		<!-- 防塌陷 -->
		<view class="">
			<!-- #ifdef MP-WEIXIN -->
			<view :style="{height: `${$u.sys().statusBarHeight}px;`}" />
			<!-- #endif -->
			<!-- #ifdef APP -->
			<view :style="`height: ${$u.sys().statusBarHeight}px;`" />
			<!-- #endif -->
			<view class="" style="height: 88rpx;" />
		</view>
		<view class="textarea-box">
			<view class="textarea-box-topic" v-if="endTopicData.name">#{{endTopicData.name}}#</view>
			<u-textarea border="none" v-model="content" placeholder="请输入你的内容" >
			</u-textarea>
		</view>
		<view class="upload-image-box flex-wrap align-center">
			<view class="upload-image-item rel" :style="{marginRight: index%3==2 ? '0' : '24rpx'}"
				v-for="(item,index) in picList" :key="index">
				<image class="upload-image" :src="item" mode=""></image>
				<image class="clear abs" src="@/static/images/app/serve/realname_clea.png" @click="DelPic('faultImage')"
					mode=""></image>
			</view>
			<view v-if="picList.length==0" class="upload-image-item" @click="getImage">
				<image class="upload-image" src="@/static/images/app/serve/realname_upload.png" mode=""></image>
			</view>
		</view>
		<!-- <view class="topic flex justify-between align-center" @click="navTopicListFn()">
			<view class="flex align-center ">
				<image style="" src="@/static/images/app/welfare/xiaoxi.png" mode=""></image>
				<view class="topic-title" style="">相关话题</view>
			</view>
			<image class="topic-r" src="@/static/images/app/icon/arrow-right.png" mode=""></image>
		</view>
		<view class="flex flex-wrap topic-list">
			<view v-for="(item,index) in topicList" @click="endTopicFn(item)">#{{item.name}}</view>
		</view> -->
	</view>
</template>

<script>
	import {
		plazaNoteAdd
	} from "@/api/discover/discover.js"
	import {getCommunityTopicList} from "@/api/welfare/welfare.js"
	export default {
		data() {
			return {
				picList: [],
				content: '',
				//活动id
				categoryId: 1,
				topicList:[],
				endTopicData:{},
				//话题id
				topicId:'',
				city:''
			};
		},
		methods: {
			//选择话题 pages/welfare/activity_x/topic_list
			navTopicListFn(){
				uni.navigateTo({
					url:`/pages/driver/welfare/activity_x/topic_list`
				})
			},
			endTopicFn(item){
				this.endTopicData=item
			},
			//发布
			issueFn() {
				uni.showLoading({
					title: '发布中...'
				});
				let obj={
					content: this.content,
					image: this.picList.join(','),
					replyStatus: 1,
					type: 1,
					categoryId: this.categoryId,
					topicIds:this.topicId,
					activeTopicId:this.activeTopicId,
					city:this.city
				}
				plazaNoteAdd(obj).then(res => {
					uni.setStorageSync('endTopicData',{})
					uni.hideLoading();
					uni.navigateBack()
				})
			},
			//传图片
			getImage() {
				this.$util.uploadImageOne({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					dir: 'lxkimage/public/product/'
				}, null, res => {
					this.picList.push(res.data)
					uni.hideLoading();
				});
			},
			DelPic(index) {
				this.picList.splice(index, 1)
			},
			//返回
			navBackFn() {
				uni.navigateBack()
			}
		},
		onShow() {
			let endTopicData=uni.getStorageSync('endTopicData')
			if(endTopicData){
				this.endTopicData=endTopicData
			}
		},
		onLoad(options) {
			this.categoryId = options.type
			this.activeTopicId=options.activeTopicId
			this.topicId=options.topicId
			
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success: res => {
					this.city=res.address.city
				},
				fail: err => {
					// console.log('报错', err);
				}
			})
		}
	}
</script>

<style lang="scss">
	.topic-list{
		padding: 0rpx 48rpx;
		view{
			padding: 8rpx 24rpx;
			border: 1rpx solid #ededed;
			border-radius: 4rpx;
			margin-right: 32rpx;
		}
		
	}
	.topic {
		padding: 50rpx 48rpx;

		.topic-title {
			height: 48rpx;
			margin-left: 8rpx;
		}
		.topic-r{
			width: 12rpx;
			height: 20rpx;
		}
		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.navbar-box {
		border-bottom: 1rpx solid #eee;

		.navbar-title {
			width: 750rpx;
			line-height: 88rpx;

			.back {
				left: 24rpx;
			}

			.text {
				// #ifdef MP-WEIXIN
				padding-right: 220rpx;
				// #endif

			}

			.btn {
				// #ifdef APP
				right: 34rpx;
				// #endif
				// #ifdef MP-WEIXIN
				right: 200rpx;
				// #endif
				top: 50%;
				transform: translateY(-50%);
			}

			.nav-item {
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	.textarea-box {
		padding: 48rpx;
		width: 750rpx;
		height: 434rpx;
		.textarea-box-topic{
			font-size: 28rpx;
			font-weight: 400;
			color: #13AFA8;
		}
	}

	.upload-image-box {
		padding: 0 48rpx;
		width: 750rpx;

		.upload-image-item {
			margin-bottom: 24rpx;
			width: 202rpx;
			height: 202rpx;
		}

		.upload-image {
			width: 202rpx;
			height: 202rpx;
			border-radius: 8rpx;
		}

		.clear {
			top: -16rpx;
			right: -16rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}
</style>