yixiang/pageA/add-wenzhang.vue

<template>
	<view class="content">
		<u-navbar title="" leftText="取消" @leftClick="leftclick" placeholder leftIconSize="0">
			<view class="u-nav-right" slot="right">
				<text :style="data.title&&data.content ? 'color: #00B0B0' : ''" @click="next">{{type == 'post'?'发布':'下一步'}}</text>
			</view>
		</u-navbar>
		<block v-if="index == 1">
			<view class="video" v-if="type == 'video'">
				<u-input v-model="data.video_title" placeholder="请添加关联视频标题（最多输入100个字）" border="none"
					fontSize="40rpx"></u-input>
				<u--textarea v-model="data.video_url" placeholder="请添加关联视频链接" border="none" autoHeight
					fontSize="28rpx"></u--textarea>
			</view>
			<view class="title">
				<u-input v-model="data.title" placeholder="输入标题（最多输入100个字）" border="none" fontSize="44rpx"></u-input>
			</view>
			<view class="center">
				<richtext-editor :init="data.content" @onsuccess="onsuccess"></richtext-editor>
			</view>
			<view class="fixed hflex acenter" v-if="JSON.stringify(data.topic) == '{}'" @click="selecttopic">
				<image src="static/add.png" mode="aspectFill"></image>
				<text>添加话题</text>
			</view>
			<view class="fixed" v-else>
				<text>{{data.topic.title}}</text>
			</view>
		</block>
		<block v-if="index == 2">
			<view class="top">
				<text>{{data.title}}</text>
				<view class="text">
					<u-parse :content="data.content"></u-parse>
				</view>
			</view>
			<view class="hflex imgs">
				<text>封面</text>
				<view class="img vflex acenter jcenter" v-if="image == ''" @click="chooseimg">
					<image src="/pageA/static/upload.png" mode="aspectFill" class="icon"></image>
				</view>
				<view class="img" v-else>
					<image :src="image" mode="aspectFill"></image>
					<text @click="chooseimg">替换</text>
				</view>
			</view>
			<view class="bottom hflex acenter jcenter">
				<view class="btn1" @click="topublish('draft')">存草稿</view>
				<view class="btn2" @click="topublish('normal')">发布</view>
			</view>
		</block>
	</view>
</template>

<script>
	import richtextEditor from '@/components/richtext-editor/richtext-editor.vue'
	import $api from '@/static/js/api.js'
	export default {
		components: {
			richtextEditor
		},
		data() {
			return {
				data: {
					video_title: '',
					video_url: '',
					title: '',
					content: '',
					topic: {}
				},
				index: 1,
				type: '',
				image: '',
				is_edit: 0
			}
		},
		onLoad(option) {
			if (option.type) {
				this.type = option.type
			}
			if(option.edit) {
				this.is_edit = option.edit
			}
			if (option.data) {
				console.log(JSON.parse(decodeURIComponent(option.data)));
				this.data = JSON.parse(decodeURIComponent(option.data))
				let data = {
					id: this.data.topic_id
				}
				this.image = this.data.image
				this.data.topic = data
				console.log(this.data);
			}
		},
		methods: {
			topublish(status) {
				var url = ''
				let method= 'post'
				
				var form = {}
				form = {
					title: this.data.title,
					content: this.data.content,
					topic_id: this.data.topic.id,
					status: status,
					image: this.image
				}
				if (this.type == 'info') {
					url = 'info'
				} else if (this.type == 'article') {
					url = 'article'
				} else if (this.type == 'video') {
					url = 'video'
					form.video_title = this.data.video_title
					form.video_url = this.data.video_url
				}
				if(this.is_edit == 1) {
					method = 'put'
					// form.id = this.data.id
					url = url + '/' + this.data.id
				}
				console.log(form, '上传数据', url);
				$api.req({
					url: url,
					method: method,
					data: form
				}, function(res) {
					console.log(res);
					$api.info(res.msg)
					if (res.code == 10000) {
						setTimeout(() => {
							if(status == 'normal') {
								uni.switchTab({
									url: '/pages/index/index'
								})
							} else {
								uni.navigateTo({
									url: '/pageC/drafts'
								})
							}
						},1000)
					}
				})
			},
			chooseimg() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						uni.showLoading({
							title: '上传中...'
						})
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: $api.config.baseUrl + 'upload/image', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'image',
							success: (uploadFileRes) => {
			
								let res = JSON.parse(uploadFileRes.data)
								this.image = res.data.url
								uni.hideLoading()
							}
						});
					}
				});
			},
			leftclick() {
				uni.navigateBack()
			},
			onsuccess(e) {
				this.data.content = e
			},
			next() {
				this.index = 2
				console.log(this.index);
			},
			selecttopic() {
				var _this = this
				uni.navigateTo({
					url: '/pageA/huati?type=select',
					events: {
						getitem(res) {
							_this.data.topic = res
						}
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	.content::v-deep {
		background: #FFFFFF;
.top {
			width: 100%;
			box-sizing: border-box;
			padding: 28rpx;
			border-bottom: 1px solid #F2F2F2;

			text:first-child {
				font-size: 40rpx;
				font-family: SFPro, SFPro;
				font-weight: 400;
				color: #222222;
			}

			.text {
				width: 100%;
				height: 96rpx;
				overflow: hidden;
				padding: 10rpx 0 0;
			}
		}

		.imgs {
			padding: 34rpx 28rpx;

			text {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #222222;
				padding-right: 42rpx;
			}

			.img {
				width: 574rpx;
				height: 334rpx;
				background: #F5F5F5;
				border-radius: 12rpx;
				overflow: hidden;
				position: relative;

				.icon {
					width: 86rpx;
					height: 86rpx;
				}

				image {
					width: 100%;
					height: 100%;
				}

				text {
					position: absolute;
					bottom: 24rpx;
					left: 232rpx;
					width: 110rpx;
					height: 60rpx;
					background: rgba(0, 0, 0, 0.8);
					border-radius: 30rpx;
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 60rpx;
					text-align: center;
					padding: 0;
				}
			}
		}

		.bottom {
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(0, 0, 0, 0.1);
			position: fixed;
			bottom: 0;
			left: 0;
			box-sizing: border-box;
			padding: 16rpx 28rpx 62rpx;
			border-top: 1px solid rgba(0, 0, 0, 0.1);

			.btn1 {
				width: 340rpx;
				height: 88rpx;
				border-radius: 44rpx;
				border: 2rpx solid #E2E2E2;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 88rpx;
				text-align: center;
				margin-right: 14rpx;
			}

			.btn2 {
				width: 340rpx;
				height: 88rpx;
				background: #00B0B0;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
			}
		}
	
		.video {
			padding: 36rpx 28rpx;
			border-bottom: 1px solid #F2F2F2;
		}

		.fixed {
			position: fixed;
			left: 28rpx;
			bottom: 132rpx;
			background: rgba(0, 176, 176, .1);
			border-radius: 40rpx;
			padding: 8rpx 16rpx;
			max-width: max-content;
			margin: 20rpx 28rpx;

			image {
				width: 36rpx;
				height: 36rpx;
				margin: 0 16rpx 0 0;
			}

			text {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #00B0B0;
			}
		}

		.title {
			padding: 36rpx 28rpx;

			.u-input {
				font-size: 44rpx;
				line-height: 60rpx;
			}
		}

		.center {
			max-height: 1000rpx;
			overflow: auto;
			// padding: 0 28rpx;
		}

		.u-nav-right {
			text {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
	}
</style>