car_client_app/pages/index/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" :style="{'right': `${menuWidth+10}px`}">
					<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">
			<u-textarea border="none" v-model="content" :placeholder="issueType==2?'请书写您的心情！！！':'请输入您的内容'"></u-textarea>
		</view>
		<view class="upload-image-box flex-wrap align-center" v-if="issueType==1">
			<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="`${config.aliyunOssUrl}/static/images/app/serve/realname_clea.png`" @click="DelPic('faultImage')"
					mode=""></image>
			</view>
			<view class="upload-image-item" @click="getImage">
				<image class="upload-image" :src="`${config.aliyunOssUrl}/static/images/app/serve/realname_upload.png`" mode=""></image>
			</view>
		</view>
		<view v-else-if='issueType==0' class="video rel">
			<view style="margin-bottom: 16rpx;">上传视频</view>
			<image v-if="!videoImage" class="video-image" :src="`${config.aliyunOssUrl}/static/images/app/icon/plus_box.png`" mode="" @click="getVideo"></image>
			<video v-else :src="videoImage" :poster="`${videoImage}?x-oss-process=video/snapshot,t_1000,m_fast`"></video>
			<image v-if="videoImage" @click="videoImage=''" class="clear abs" :src="`${config.aliyunOssUrl}/static/images/app/serve/realname_clea.png`" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		plazaNoteAdd
	} from "@/api/discover/discover.js"
	export default {
		data() {
			return {
				menuWidth: getApp().globalData.menuWidth,
				config: getApp().globalData.config,
				selectImageShow: false,
				picList: [],
				content: '',
				//分类id
				categoryId: 1,
				//issueType 0:视频 1:图片
				issueType: 0,
				//视频
				videoImage:'',
				//视频宽高
				videoInfo:{},
			};
		},
		methods: {
			//发布
			issueFn() {
				uni.showLoading({
					title: '发布中...'
				});
				plazaNoteAdd({
					content: this.content,
					image: this.picList.join(','),
					replyStatus: 1,
					type: 1,
					categoryId: this.categoryId,
					video:this.videoImage,
					cover:this.videoImage,
					wide:this.videoInfo.width,
					high:this.videoInfo.height,
				}).then(res => {
					uni.setStorageSync('video_info', {});
					uni.hideLoading();
					uni.navigateBack()
				})
			},
			//传视频
			getVideo() {
				this.$util.uploadVideo({},
				false,
				true,
				res => {
					uni.hideLoading();
					this.videoInfo = uni.getStorageSync('video_info');
					console.log('视频信息',this.videoInfo);
					this.videoImage = res.data
				});
			},
			//传图片
			getImage() {
				this.$util.uploadImageOne({
					count: 9,
					sizeType: ['original'],
					sourceType: ['album', 'camera'],
					dir: 'crmebimage/public/product/'
				}, null, res => {
					this.picList.push(res.data)
					uni.hideLoading();
				});
			},
			DelPic(index) {
				this.picList.splice(index, 1)
			},
			//返回
			navBackFn() {
				uni.navigateBack()
			}
		},
		onLoad(options) {
			this.categoryId = options.type
			// console.log(options.issueType == 0 ? '视频' : '图片');
			this.issueType = options.issueType
		}
	}
</script>

<style lang="scss">
	.video{
		padding: 0 48rpx;
		// border: 1rpx solid #999;
		.clear {
			top: -16rpx;
			right: 32rpx;
			width: 32rpx;
			height: 32rpx;
		}
		.video-image{
			width: 202rpx;
			height: 202rpx;
			border-radius: 8rpx;
		}
	}
	.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
				top: 50%;
				transform: translateY(-50%);
			}

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

	.textarea-box {
		padding: 48rpx;
		width: 750rpx;
		height: 434rpx;
	}

	.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>