yixiang/pageA/publish.vue

<template>
	<view class="content">
		<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>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				data: {
					title: '',
					content: ''
				},
				image: '',
				type: ''
			}
		},
		onLoad(options) {
			if (options.data) {
				this.data = JSON.parse(decodeURIComponent(options.data))
			}
			this.type = options.type
			if (options.edit == '1') {
				this.image = this.data.image
				let data = {
					id: this.data.topic_id
				}
				this.data.topic = data
			}
			console.log(this.data, this.type);
		},

		onShow() {

		},
		onPullDownRefresh() {

		},
		onReachBottom() {

		},
		methods: {
			topublish(status) {
				var url = ''
				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
				}
				console.log(form, '上传数据', url);
				$api.req({
					url: url,
					method: 'POST',
					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()
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.content {
		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;
			}
		}
	}
</style>