fengpingle/pages/share/myarticle.vue

<template>
	<view class="content">
		<view class="main">
			<view class="box-1">
				<view class="box-left">标题：</view>
				<input type="text" :disabled="lx != 0" v-model="title" placeholder-class="placeholder"
					class="list-input" placeholder="请填写文章标题" />
			</view>
			<view class="box-1">
				<view class="box-left">作者：</view>
				<input type="text" :disabled="lx != 0" v-model="author" placeholder-class="placeholder"
					class="list-input" placeholder="请填写文章作者" />
			</view>
			<view class="box-1">
				<view class="box-left">文章简介：</view>
				<input type="text" :disabled="lx != 0" v-model="synopsis" placeholder-class="placeholder"
					class="list-input" placeholder="请填写文章简介" />
			</view>
			<view class="upload-box">
				<view class="upload-left">文章头图</view>
				<view class="upload-right " @click.stop="banner_img_up()">
					<view class="upload-imgbox">
						
					<image v-if="!banner_img" class="upload-img " src="/static/img/add.png"></image>
					<image v-if="banner_img" class="upload-img " :src="banner_img"></image>
					</view>
				</view>
			</view>
			<view class="upload-box">
				<view class="upload-left">分享素材</view>
				<view class="flex">
					<view class="upload-right flex-start">
						<view class="position-relative upload-imgbox" v-for="(src,ind) in image_input">
							<image :src="src" class="upload-img "></image>
							<view class="delText" @click="image_input.splice(ind,1)">
								删除
							</view>
						</view>
						<view class="upload-imgbox">
							<image @click.stop="scImgMian()" class="upload-img " src="/static/img/add.png"></image>
						</view>

					</view>
				</view>
			</view>
			<!-- <view class="box-1">
				<view class="box-left">
					关联商品 ：
				</view>
				<view class="list-input" v-if="!product" @click="open()">
					请选择关联商品
				</view>
				<view class="list-input clamp" v-else @click="open()">
					{{product.store_name}}
				</view>
			</view> -->
			<view class="bjq" v-if="showwz == 0&&lx ==0">
				<jinEdit ref="set" placeholder="请输入文章内容" @editOk="editOk" uploadFileUrl="/api/upload/image"
					:header="{'Authori-zation': AuthoriZation}" :showImgSize="true" :html="content" height="50vh">
				</jinEdit>
			</view>
			<view class="bjq" v-if="lx !=0">
				<view v-html="content"></view>
			</view>
		</view>
		<view @click.stop="submit('1')" v-if="lx == 0" class="address-box submit-box"><text
				class="submit-btn">提交文章</text></view>
		<view @click.stop="submit('0')" v-if="lx == 0" class="address-box submit-box"><text
				class="submit-btn gren">保存草稿</text></view>
		<!-- <uni-popup ref="choose" type="bottom">
			<view class="choose-main">
				<view class="choose-top flex">
					<view class="choose-font" @click="close()">
						取消
					</view>
				</view>
				<view class="top-box">
					<view class="top">
						<view class="top-icon">
							<image src="../../static/icon/icon.png" mode=""></image>
						</view>
						<view class="top-main"><input type="text" v-model="keyworld" placeholder="请输入商品名称"></view>
					</view>
					<view class="top-font" @click="clickSearch()">
						搜索
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: 600rpx;" @scrolltolower="getProduct()">
					<view class="choose-item flex" v-for="(item,index) in productlist" @click="xuanzhe(item)">
						<view class="choose-image">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="choose-rigt">
							<view class="choose-name">
								{{item.store_name}}
							</view>
							<view class="choose-price">
								{{item.price}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import {
		upload
	} from '@/api/order.js';
	// import {
	// 	getProducts,
	// 	goodsDetail
	// } from '@/api/product.js'
	import {
		my_detail,
		add_article
	} from '@/api/user.js';
	import jinEdit from '@/components/jin-edit/jin-edit.vue';
	export default {
		components: {
			jinEdit
		},
		data() {
			return {
				lx: 0,
				AuthoriZation: '',
				id: 0,
				title: '', //文章标题
				author: '', //文章作者
				banner_img: '', //头图
				image_input: [], //文章图片
				content: '', //文章内容
				synopsis: '', //文章简介
				product: '', //关联商品
				productlist: [], //商品列表
				page: 1,
				limit: 10,
				loadType: 'more',
				keyworld: '',
				showwz: 0,
			};
		},
		onLoad(opt) {
			if (opt.id) {
				this.showwz = 1;
				this.id = opt.id;
				this.loadData();
			}
			if (opt.type) {
				this.lx = opt.type
			}
			console.log(this.product);
			// this.getProduct();
			this.AuthoriZation = 'Bearer ' + uni.getStorageSync('token')
		},
		onShow() {},
		onReachBottom() {},
		onReady() {},
		methods: {
			editOk(res) {
				//  保存富文本转出的html
				this.content = res.html
				console.log(this.content);
			},
			// getProduct() {
			// 	const obj = this
			// 	if (obj.loadType == 'noMore' || obj.loadType == 'loading') {
			// 		return
			// 	}
			// 	obj.loadType = 'loading'
			// 	getProducts({
			// 		page: obj.page,
			// 		limit: obj.limit,
			// 		keyword: obj.keyworld
			// 	}).then(({
			// 		data
			// 	}) => {
			// 		obj.productlist = obj.productlist.concat(data);
			// 		obj.page++
			// 		if (data.length == obj.limit) {
			// 			obj.loadType = 'more'
			// 		} else {
			// 			obj.loadType = 'noMore'
			// 		}
			// 	})
			// },
			loadData() {
				my_detail({}, this.id).then(({
					data
				}) => {
					this.title = data.news.title
					this.author = data.news.author
					this.image_input =data.news.share_images;
					this.banner_img = data.news.image_input[0];
					this.synopsis = data.news.synopsis
					// this.spxq(data.news.product_id)
					this.content = data.news.content
					this.showwz = 0
				})
			},
			// spxq(id) {
			// 	goodsDetail({}, id).then(({
			// 		data
			// 	}) => {
			// 		this.product = data.storeInfo
			// 		console.log(data);
			// 	})
			// },
			banner_img_up() {
				if (this.lx != 0) {
					return
				}
				let obj = this;
				upload({
						file: ''
					})
					.then(e => {
						console.log(e, 'e');
						obj.banner_img = e[0].url;
					})
					.catch(e => {});

			},
			scImgMian() {
				if (this.lx != 0) {
					return
				}
				let obj = this;
				upload({
						file: ''
					})
					.then(e => {
						console.log(e, 'e');
						obj.image_input.push(e[0].url);
					})
					.catch(e => {});
			},
			// clickSearch() {
			// 	this.page = 1;
			// 	this.limit = 10;
			// 	this.loadType = 'more'
			// 	this.getProduct();
			// },
			// open() {
			// 	if (this.lx != 0) {
			// 		return
			// 	}
			// 	this.$refs.choose.open()
			// },
			// close() {
			// 	this.$refs.choose.close()
			// },
			xuanzhe(opt) {
				this.product = opt;
				console.log(this.product, '123456');
				this.$refs.choose.close();
			},
			submit(type) {
				const obj = this
				this.$refs.set.release(true)
				setTimeout(() => {
					if (!obj.title) {
						return this.$api.msg('请输入文章标题')
					}
					if (!obj.author) {
						return this.$api.msg('请输入文章作者')
					}
					if (!obj.image_input) {
						return this.$api.msg('请输入文章头图')
					}
					if (!obj.synopsis) {
						return this.$api.msg('请输入文章简介')
					}
					if (!obj.content) {
						return this.$api.msg('请输入文章内容')
					}
					add_article({
						type: type,
						id: obj.id,
						title: obj.title,
						author: obj.author,
						image_input: obj.banner_img,
						synopsis: obj.synopsis,
						share_title: obj.title,
						share_synopsis: obj.synopsis,
						share_images: obj.image_input.join(','),
						content: obj.content,
						product_id: 0
					}).then(e => {
						uni.navigateTo({
							url: '/pages/user/release?id=0'
						})
					})
				}, 10)
			}
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		min-height: 100%;
		height: auto;
	}

	.box-1 {
		background: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 20rpx;

		.box-left {
			width: 25%;
			text-align: left;
			color: #000000;

		}

		.list-input {
			width: 75%;
			font-size: 28rpx;
			color: #959595;
			text-align: right;
			padding-right: 24rpx;
		}
	}

	.upload-box {
		width: 100%;
		background: #ffffff;
		border-radius: 27rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx 40rpx;
		margin: 20rpx auto 30rpx;
		padding-right: 0;

		.upload-left {
			font-weight: 400;
			font-size: 28rpx;
		}

		.upload-right {
			flex-wrap: wrap;

			.delText {
				background-color: rgba(0, 0, 0, 0.6);
				color: #FFF;
				text-align: center;
				position: absolute;
				bottom: 0;
				width: 100%;
			}

			.upload-imgbox {
				margin-top: 20rpx;
				margin-right: 20rpx;

				.upload-img {
					width: 200rpx;
					height: 200rpx;
				}
			}
		}
	}

	.main {
		padding: 20rpx;
	}

	.bjq {
		margin-top: 20rpx;
		background: #ffffff;
		padding: 20rpx;
	}

	.address-box {
		padding: 15rpx 40rpx;
		margin-bottom: 10px;
	}

	.submit-box {
		bottom: 0;
		left: 0;
		width: 750rpx;
	}

	.submit-btn {
		margin-top: 10px;
		display: inline-block;
		width: 670rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		background-color: #000000;
		opacity: 1;
		box-shadow: 0rpx 8rpx 12rpx rgba(0, 0, 0, 0.16);
		border-radius: 56rpx;
		font-size: 39rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}

	.gren {
		background: #ffffff;
		color: #000000;
		border: 1px solid #000000;
	}

	.choose-main {
		background: #ffffff;

	}

	.choose-top {
		padding: 20rpx 40rpx 20rpx;
		font-size: 32rpx;
		justify-content: flex-end;

		.choose-font {
			color: #d4c7c2;
		}
	}

	.choose-item {
		padding: 40rpx 20rpx;
		justify-content: flex-start;

		.choose-image {
			width: 100rpx;
			height: 100rpx;

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

		.choose-rigt {
			height: 100rpx;
			margin-left: 20rpx;
			padding: 10rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.choose-name {
				font-size: $font-base;
				color: $font-color-dark;
				font-weight: bold;
			}

			.choose-price {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #ff4c4c;
				line-height: 1;
			}
		}
	}

	.top-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-font {
		font-size: 32rpx;
		color: #000000;
		margin-left: 20rpx;
	}

	.top {
		width: 550rpx;
		height: 58rpx;
		background: #ededed;
		border-radius: 29rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.top-icon {
			width: 32rpx;
			height: 32rpx;

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

		.top-main {
			margin-left: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #cbcbcb;
		}
	}
</style>