实现一个轮播图添加文字或图片

朴灿烈づ我的快乐病毒、 2022-09-07 15:55 213阅读 0赞

<template>
    	<view class="content">
    		<view class="cancle" @click="cancleBack">
    			取消
    		</view>
    		<view class="facontent">
    			<view class="facontent_textarea">
    				<textarea maxlength="200" v-model="content" value="" placeholder="分享点想法在知识圈吧..." />
    			</view>
    			<view class="facontent_uploadimg">
    				<view class="facontent_uploadimg-title">图片上传</view>
    				<view class="myimg">
    					<view class="facontent_myimg" v-for="(item,index) in imglist">
    						<view class="image">
    							<image @click="previewImage(item.imgsrc)" :src="item.imgsrc" mode="aspectFill"></image>
    						</view>
    						<view class="ico-x">
    							<uni-icons @click="delimg(item,index)" style="font-size: 30px;color: red;" type="clear">
    							</uni-icons>
    						</view>
    					</view>
    					<view class="facontent_uploadimg-image">
    						<view class="image" @click="addimg">
    							<image src="../../../static/myimg/camera.png" mode="scaleToFill"></image>
    						</view>
    					</view>
    				</view>
    			</view>
    		</view>
    		<view class="location" @click="location">
    			<view class="location-img">
    				<image src="../../../static/myimg/location.png" mode=""></image>
    				{ { locationAddress}}
    			</view>
    			<view class="location-ico">
    				<text>
    					<uni-icons style="color: #999999;font-size: 18px;" type="arrowright"></uni-icons>
    				</text>
    			</view>
    		</view>
    		<view class="fabu" @click="upload">发布</view>
    	</view>
    </template>
    
    <script>
    	import baseUrl from "../../../env.js";
    	export default { 
    		data() { 
    			return { 
    				content: "",
    				locationAddress: "定个位吧~",
    				imglist: [
    					// { 
    					// 	imgsrc: "https://img2.baidu.com/it/u=1804016691,4167559314&fm=26&fmt=auto&gp=0.jpg"
    					// },
    					// { 
    					// 	imgsrc: "https://img0.baidu.com/it/u=2824285589,2503045133&fm=26&fmt=auto&gp=0.jpg"
    					// },
    					// { 
    					// 	imgsrc: "https://img2.baidu.com/it/u=1710076761,5866718&fm=26&fmt=auto&gp=0.jpg"
    					// },
    				]
    			};
    		},
    		methods: { 
    			previewImage(tempFilePath) { 
    				console.log("https:"+tempFilePath)
    				tempFilePath="https:"+tempFilePath;
    				// 预览图片
    				uni.previewImage({ 
    					 urls: [tempFilePath],//多文件预览
    					current:tempFilePath,//预览当前图
    					loop:false,
    					// longPressActions: { 
    					// 	itemList: ['发送给朋友', '保存图片', '收藏'],
    					// 	success: function(data) { 
    					// 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
    					// 	},
    					// 	fail: function(err) { 
    					// 		console.log(err.errMsg);
    					// 	}
    					// },
    					success: function(res) { 
    						console.log(res,"成功了");
    					},
    					fail: function(err) { 
    						console.log(err,"报错了");
    					}
    				});
    			},
    			//开始发布
    			upload() { 
                      if(this.imglist.length==0 || this.content==""){ 
    					  uni.showToast({ 
    					  	title:"发布些东西吧!",
    						icon:"none"
    					  })
    					  return  false;
    				  }
                      
    				var imglist = "";
    				this.imglist.filter((item,index) => { 
    					imglist += item.imgsrc + ","
    					 
    				});
    				console.log(imglist.substr(0,imglist.lastIndexOf(',')), "不是这里嘛");
    				let saveData = { 
    					content: this.content,
    					images: imglist
    				}
    				this.save(saveData);
    
    			},
    			//取消
    			cancleBack() { 
    				uni.switchTab({ 
    					url: "../KnowledgeCircle"
    				})
    			},
    			//保存
    			save(saveData) { 
    				this.$post('circle', saveData).then(res => { 
    					if (res.code === 200) { 
    						uni.showModal({ 
    							title: '提示',
    							content: '发布成功',
    							showCancel: false,
    							success: res => { 
    								console.log(res)
    								uni.navigateBack()
    							},
    							fail: () => { },
    							complete: () => { }
    						});
    					} else { 
    						this.$api.msg(res.msg)
    					}
    				})
    			},
    			//导航定位
    			location() { 
    				let that = this;
    				uni.chooseLocation({ 
    					success: function(res2) { 
    						console.log(res2, "全部内容")
    						console.log('位置名称：' + res2.name);
    						console.log('详细地址：' + res2.address);
    						console.log('纬度：' + res2.latitude);
    						console.log('经度：' + res2.longitude);
    						that.locationAddress = res2.address;
    					}
    				});
    
    
    			},
    			//删除图片
    			delimg(item, index) { 
    				console.log(this.imglist)
    				let that = this;
    				uni.showModal({ 
    					title: '注意',
    					content: '确定要删除这张照片吗？',
    					cancelText: '手滑',
    					confirmText: '确定删除',
    					success: res => { 
    						if (res.confirm) { 
    							that.imglist.splice(index, 1);
    						}
    					}
    				})
    			},
    			//上传文件
    			uploadFile() { 
    				// console.log(baseUrl.URL)
    				// let that = this;
    				// that.imglist.map(function(item, index) { 
    				// 	console.log(item, "进去没")
    				// 	uni.uploadFile({ 
    				// 		url: baseUrl.URL + '/upload/circel', //仅为示例，非真实的接口地址
    				// 		filePath: item,
    				// 		name: 'file',
    				// 		method: "post",
    				// 		// formData: { 
    				// 		//     'user': 'test'
    				// 		// },
    				// 		success: (uploadFileRes) => { 
    				// 			console.log(uploadFileRes, "成功的数据");
    				// 		}
    				// 	});
    
    				// })
    
    			},
    			//添加图片
    			addimg() { 
    				let that = this;
    				if(that.imglist.length>=9){ 
    					uni.showToast({ 
    						title:"最多只能上传9张图片哦",
    						icon:"none",
    						duration:2000
    					})
    					return  false;
    				}
    				uni.chooseImage({ 
    					count: 9, //默认9
    					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    					sourceType: ['album', 'camera'], //从相册选择
    					success: function(res) { 
    						console.log(JSON.stringify(res.tempFilePaths), "上传结果");
    						res.tempFilePaths.map(itemimg => { 
    
    							uni.uploadFile({ 
    								url: baseUrl.URL + '/upload/circel', //仅为示例，非真实的接口地址
    								filePath: itemimg,
    								name: 'file',
    								method: "post",
    								// formData: { 
    								//     'user': 'test'
    								// },
    								success: (uploadFileRes) => { 
    
    									if (uploadFileRes.statusCode == 200) { 
    										var json = eval('(' + JSON.stringify(uploadFileRes
    											.data) + ')');
    										/***********
    										格式类型
    										***********/
    										// json = { 
    										// 	"code": "200",
    										// 	"msg": "上传成功",
    										// 	"data": { 
    										// 		"path": "/asset/circel/2021-08-06/20210806162726388835.png",
    										// 		"host": "//api.51xshi.com",
    										// 		"url": "//api.51xshi.com/asset/circel/2021-08-06/20210806162726388835.png"
    										// 	},
    										// 	"count": null
    										// }
    										json = JSON.parse(json);
    										console.log(json.code, "成功的数据");
    										if (json.code == 200) { 
    											console.log(json.data.url,
    												"成功的数据");
    											//添加图片到数组
    											that.imglist.push({ 
    												imgsrc: json.data.url
    											});
    										}
    									}
    								}
    							});
    
    						})
    
    
    					}
    				});
    			}
    		}
    	}
    </script>
    
    <style lang="scss">
    	page { 
    		background-color: #F8F8F8;
    	}
    
    	.cancle { 
    		height: 50px;
    		line-height: 50px;
    		padding: 0 5%;
    		font-size: 16px;
    		letter-spacing: 2px;
    	}
    
    	.content { 
    		margin-bottom: 30px;
    
    		.facontent { 
    			background-color: #FFFFFF;
    			margin: 0 5%;
    			border-radius: 5px;
    
    			.facontent_textarea { 
    				textarea { 
    					padding: 10px;
    					color: #999999;
    					font-size: 14px;
    					letter-spacing: 1px;
    				}
    			}
    
    			.facontent_uploadimg { 
    				padding: 10px;
    				padding-bottom: 40px;
    
    				.facontent_uploadimg-title { 
    					font-size: 14px;
    					color: #555;
    					font-weight: bold;
    					margin-bottom: 10px;
    				}
    
    				.myimg { 
    					display: flex;
    					flex-wrap: wrap;
    
    					.facontent_myimg { 
    						display: flex;
    						flex-wrap: wrap;
    						width: 72px;
    						height: 72px;
    						margin-left: 15px;
    						margin-bottom: 20px;
    
    						.image { 
    							width: 72px;
    							height: 72px;
    							flex-shrink: 0;
    
    							image { 
    								width: 100%;
    								height: 100%;
    								border-radius: 5px;
    								box-shadow: 0 0px 5px 3px #f3f4f5;
    							}
    						}
    
    						.ico-x { 
    
    							margin-top: -85px;
    							display: flex;
    							justify-content: flex-end;
    							width: 100%;
    							margin-left: 70%;
    							z-index: 88;
    						}
    					}
    
    					.facontent_uploadimg-image { 
    						flex-wrap: wrap;
    						margin-left: 10px;
    						border: 2px dashed #CCCCCC;
    						width: 72px;
    						height: 72px;
    						line-height: 72px;
    						text-align: center;
    						display: flex;
    						justify-content: center;
    
    						.image { 
    							width: 40px;
    							height: 40px;
    
    							image { 
    								width: 100%;
    								height: 100%;
    								vertical-align: middle;
    							}
    						}
    
    					}
    				}
    
    			}
    		}
    
    		.location { 
    			margin-top: 10px;
    			display: flex;
    			padding: 0 5%;
    			background-color: #FFFFFF;
    			height: 40px;
    			line-height: 40px;
    			justify-content: space-between;
    
    			.location-img { 
    				color: #1F7DFC;
    				font-size: 15px;
    				// font-weight: bold;
    
    				overflow: hidden;
    				text-overflow: ellipsis;
    				display: -webkit-box;
    				-webkit-line-clamp: 1;
    				-webkit-box-orient: vertical;
    
    				image { 
    					width: 20px;
    					height: 20px;
    					vertical-align: middle;
    					margin-right: 10px;
    				}
    			}
    
    			.location-ico { }
    		}
    
    		.fabu { 
    
    			width: 200px;
    			height: 30px;
    			line-height: 30px;
    			text-align: center;
    			letter-spacing: 5px;
    			background-color: #1F7DFC;
    			margin: auto;
    			font-size: 15px;
    			color: #FFFFFF;
    			border-radius: 3px;
    			margin-top: 100px;
    		}
    	}
    </style>