MoeNovaClient/pages/make/fabuArticle.vue

<template>
	<view class="page">
		<view class="nav-bar">
			<view class="left">
				<view class="uni-btn-icon" @click="goBack">&#xe601;</view>
			</view>
			<view class="center">发表想法</view>
			<view class="right">
				<view class="btn" @click="onManage">管理</view>
				<view class="btn" @click="onSubmit" v-if="id < 1">发布</view>
				<view class="btn" @click="onSubmit" v-else>更新</view>
			</view>
		</view>
		<view class="user-list">
			<view class="content">
				<input class="edit" v-model="ainfo.title" maxlength="20" placeholder="填写标题会有更多赞哦~" />
			</view>
			<view class="content">
				<textarea class="edit2" v-model="ainfo.content" :maxlength="1000"
					placeholder="美好的一天，写点什么吧..."></textarea>
			</view>
			<view class="agree">
				<text>还可以输入<text class="xy">{{1000 - ainfo.content.length}}</text>字</text>
			</view>

			<view class="img_list">

				<view class="image" v-for="(item,index) in img_list" :key="index">
					<image class="upimg" :src="item" mode="aspectFill"></image>
					<image class="del" src="../../static/del.svg" @click="delIt(index)"></image>
				</view>
				<view class="image" @click="upload('list')" v-if="img_list.length < 9">
					<text class="txt">+</text>
				</view>
			</view>
			<view style="display:flex;flex-direction: column;height:200rpx;"></view>
		</view>



	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				skey: '',
				uinfo: {},
				is_first: 0,
				pid: 0,
				sel: 0,
				pop_sel: false,
				cate: '',
				cid: 0,
				catename: '',
				img2: '',
				cateNames: [],
				cate_list: [],
				CateIndex: 0,
				nameList1: [],
				nameList2: [],
				content: '',
				cate: '',
				ainfo: {
					id: 0,
					title: '',
					content: '',
					name: '',
					telphone: '',
					address: '',
					contact: '',
					num: '',
				},
				TypeArray: ['请选择', '线下服务', '电话咨询', '远程服务', '视频咨询', '其他服务'],
				TypeIndex: 0,
				TypeArray2: ['请选择', '次', '天', '小时', '分钟', '周', '月', '年', '单', '份'],
				TypeIndex2: 0,
				img_list: [],
				img_list2: [],
				img_list1: [],
				visible: false,
				maskCloseAble: true,
				str: '',
				defaultValue: '',
				listData: [],
				cateTag: [],
				money: '',
				item_gz: -1,
				item_time: [],
				item_dx: [],
				is_top: false,
				is_agree: 0,
			}
		},
		onLoad(params) {
			if (getApp().globalData.skey != "") {
				this.skey = getApp().globalData.skey;
			} else {
				this.skey = params.skey || ''; //1234567xef
			}
			this.id = params.id || '117';
			let that = this;
			// this.getCate();
			that.getInfo();
			// this.getData();
		},
		onShow() {
			let that = this;
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			onManage() {
				// 处理管理按钮点击
				uni.redirectTo({
					url: '/pages/make/manageArticle'
				})
			},
			onPublish() {
				this.onSubmit();
			},
			copyKd(item_data) {
				if (item_data != "") {
					uni.setClipboardData({
						data: item_data, // e是需要设置的内容
						success: function() {
							uni.showToast({
								title: '网址已复制',
								icon: 'none'
							})
						}
					})
				}
			},
			agreeChk() {
				if (this.is_agree == 0) {
					this.is_agree = 1;
				} else {
					this.is_agree = 0;
				}
			},
			showPicker() {
				this.pop_sel = true;
			},
			open() {
				this.visible = true
			},
			confirm(val) {
				console.log(val)
				this.defaultValue = val.code
				this.ainfo.city = val.desc
				this.visible = false
			},
			cancel() {
				this.visible = false
			},
			delIt(ind) {
				let arr = [];
				if (this.img_list.length > 0) {
					for (let i = 0; i < this.img_list.length; i++) {
						if (i == ind) {} else {
							arr.push(this.img_list[i]);
						}
					}
					this.img_list = arr;
				}
			},
			getInfo() {
				var that = this;

				uni.request({
					url: this.$apiHost + '/Article/getinfo', //仅为示例，并非真实接口地址。
					data: {
						uuid: getApp().globalData.uuid,
						id: this.id
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						console.log("====", res.data);
						this.ainfo = res.data.article;
						that.img_list1 = [];
						that.img_list = [];
						that.img_list2 = [];
						if (res.data.article.images.length > 1) {
							let arr = res.data.article.images.split("|");
							if (arr.length > 0) {
								for (let i = 0; i < arr.length; i++) {
									if (arr[i].length > 10) {
										that.img_list.push(arr[i]);
									}
								}
							}
						}

					}
				});


			},
			checkField(str, tips) {
				if (str.length < 2) {
					uni.showToast({
						title: tips,
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			onSubmit() {
				console.log("skey", this.skey);
				if (this.checkField(this.ainfo.title, "请输入名称") == false) {
					return;
				}
				if (this.checkField(this.ainfo.content, "请输入具体内容") == false) {
					return;
				}
				if (this.is_submit > 0) {
					return;
				}

				let img_str = '';
				if (this.img_list.length > 0) {
					for (let i = 0; i < this.img_list.length; i++) {
						img_str += this.img_list[i] + "|";
					}
				}
				if (this.checkField(img_str, "请上传至少一张图片") == false) {
					return;
				}
				let that = this;
				this.is_submit = 1;
				uni.request({
					url: this.$apiHost + '/Article/add',
					data: {
						uuid: getApp().globalData.uuid,
						id: this.ainfo.id,
						title: this.ainfo.title,
						content: this.ainfo.content,
						img_list: img_str,

					},
					//data: formdata,   // 这里传入你的参数(json格式)
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'sign': getApp().globalData.headerSign
					},
					dataType: 'json',
					success: (res) => {
						console.log("---", res.data);
						uni.showToast({
							title: res.data.str,
							icon: 'none'
						});
						if (res.data.success == "yes") {
							if (that.ainfo.id > 0) {
								setTimeout(function() {
									uni.navigateBack()
								}, 500);
							} else {
								that.ainfo.title = '';
								that.ainfo.content = '';
								that.ainfo.num = '';
								that.img_list = [];
							}
							// that.getInfo();
							// setTimeout(function() {
							// 	uni.redirectTo({
							// 		url: '/pages/Work/detail_fuwu?skey=' + that.skey + '&id=' + res.data.tid
							// 	});
							// },2000);
						} else {}
						this.is_submit = 0;

					},
					fail: (err) => {
						console.log('登录失败：', err);
						this.is_submit = 0;
					},
					complete: (com) => {}
				})
			},
			select(e) {
				console.log('选择文件：', e)
			},
			upload(type) {
				this.upload2(type)
			},
			upload2(type) {
				console.log("----upload");
				// this.$refs.files.upload();
				// 图片选择上传upload() {

				var _self = this;

				// 图片选择，只支持一次选择一张图片

				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册、相机选择
					success: function(res) {
						console.log('res:', res)
						let filepath = "";
						// #ifdef H5
						filepath = res.tempFiles[0].path;
						// #endif

						// #ifdef APP-PLUS
						filepath = res.tempFilePaths[0];
						// #endif

						_self.imglocal = filepath; //res.tempFilePaths[0]
						const uploadTask = uni.uploadFile({
							url: _self.$apiHost + '/Xweb/upload_img?skey=' + _self.skey, // post请求地址
							filePath: filepath,
							name: 'file', // 待确认
							success: function(uploadFileRes) {
								let resdata = JSON.parse(uploadFileRes.data)
								console.log('Success1:', uploadFileRes);
								if (resdata.success == 'no') {
									uni.showToast({
										title: resdata.str,
										icon: 'none'
									});
									return;
								}
								if (resdata.code == 0) {
									console.log('Success2:', resdata.data.path);
									if (type == 'avatar') {
										_self.img2 = resdata.data.path;
									} else if (type == 'list') {
										_self.img_list.push(resdata.data.path)
										console.log('_self.img_list:', _self.img_list);
									} else if (type == 'list2') {
										_self.img_list2.push(resdata.data.path)
									} else if (type == 'list1') {
										_self.img_list1.push(resdata.data.path)
									}
								}
							},
							fail: function(uploadFileFail) {
								console.log('Error:', uploadFileFail.data);
							},
							complete: () => {
								console.log('Complete:');
							}
						});

					},

					error: function(e) {

						console.log(e);

					}

				});


			},

		}
	}
</script>

<style scoped lang="scss">
	@import 'fabuArticle.scss';
</style>