<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>
