You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
174 lines
3.6 KiB
174 lines
3.6 KiB
3 months ago
|
<template>
|
||
|
<view class="release">
|
||
|
<view class="release-hd">
|
||
|
<view class="a">
|
||
|
<u--textarea v-model="title" placeholder="请输入内容" ></u--textarea>
|
||
|
</view>
|
||
|
<view class="b">
|
||
|
<view class="pic" v-for="(a,i) in image1" :key="i">
|
||
|
<image class="img" :src="a"></image>
|
||
|
<view class="del" @click.stop="toDel(i)">
|
||
|
<u-icon name="trash"></u-icon>
|
||
|
</view>
|
||
|
</view>
|
||
|
<view class="pic" @click="uploadImg()">
|
||
|
<image class="img" src="/static/release-upload.png"></image>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
<view class="release-fd" @click="toSubmit()">提交</view>
|
||
|
</view>
|
||
|
</template>
|
||
|
<script>
|
||
|
export default {
|
||
|
data() {
|
||
|
return {
|
||
|
title: "",
|
||
|
image: [],
|
||
|
image1: [],
|
||
|
isClick: true
|
||
|
};
|
||
|
},
|
||
|
methods: {
|
||
|
//删除图片
|
||
|
toDel(i){
|
||
|
this.image.splice(i,1);
|
||
|
this.image1.splice(i,1);
|
||
|
},
|
||
|
//上传图片
|
||
|
uploadImg() {
|
||
|
const that = this
|
||
|
uni.chooseImage({
|
||
|
count: 9-that.image.length,
|
||
|
sizeType: ["original"], //可以指定是原图还是压缩图,默认二者都有
|
||
|
sourceType: ["album", "camera"],
|
||
|
success: (res) => {
|
||
|
console.log(res)
|
||
|
console.log(res.tempFilePaths)
|
||
|
for(var i = 0; i<res.tempFilePaths.length;i++){
|
||
|
uni.uploadFile({
|
||
|
name: 'file',
|
||
|
header: {
|
||
|
userToken: uni.getStorageSync('userToken')
|
||
|
},
|
||
|
url: this.$baseUrl+'api/upload',
|
||
|
filePath: res.tempFilePaths[i],
|
||
|
success: (upRes) => {
|
||
|
let end = JSON.parse(upRes.data)
|
||
|
that.image.push(end.data.name)
|
||
|
that.image1.push(end.data.url)
|
||
|
},
|
||
|
fail: (err) => {
|
||
|
console.log("toUpload err",err)
|
||
|
console.log(err)
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
},
|
||
|
fail(err){
|
||
|
console.log("fail",err)
|
||
|
}
|
||
|
});
|
||
|
|
||
|
},
|
||
|
//状态
|
||
|
async toSubmit() {
|
||
|
if(!this.title){
|
||
|
uni.showToast({
|
||
|
icon: "none",
|
||
|
title: "内容不能为空!"
|
||
|
})
|
||
|
return ;
|
||
|
}
|
||
|
if(this.image.length == 0){
|
||
|
uni.showToast({
|
||
|
icon: "none",
|
||
|
title: "请上传图片"
|
||
|
})
|
||
|
return ;
|
||
|
}
|
||
|
const {code, msg} = await this.$api.addCircle({
|
||
|
title: this.title,
|
||
|
image: this.image.join(",")
|
||
|
})
|
||
|
if(code == 200){
|
||
|
uni.showToast({
|
||
|
title: "提交成功"
|
||
|
})
|
||
|
uni.$emit("reloadQuanzi","111")
|
||
|
setTimeout(()=>{
|
||
|
uni.navigateBack({
|
||
|
delta: 1
|
||
|
})
|
||
|
},2000)
|
||
|
}else{
|
||
|
uni.showToast({
|
||
|
icon: "none",
|
||
|
title: msg
|
||
|
})
|
||
|
}
|
||
|
},
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss" scoped>
|
||
|
.release {
|
||
|
width: 100%;
|
||
|
padding: 25rpx;
|
||
|
overflow: hidden;
|
||
|
box-sizing: border-box;
|
||
|
&-hd{
|
||
|
padding: 20rpx;
|
||
|
overflow: hidden;
|
||
|
background-color: #fff;
|
||
|
border-radius: 20rpx;
|
||
|
.b{
|
||
|
width: 110%;
|
||
|
overflow: hidden;
|
||
|
display: flex;
|
||
|
flex-wrap: wrap;
|
||
|
justify-content: flex-start;
|
||
|
margin-top: 30rpx;
|
||
|
.pic{
|
||
|
width: 206rpx;
|
||
|
height: 206rpx;
|
||
|
overflow: hidden;
|
||
|
position: relative;
|
||
|
margin-right: 20rpx;
|
||
|
margin-bottom: 20rpx;
|
||
|
border: 1px solid #f6f6f6;
|
||
|
.img{
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
border-radius: 5rpx;
|
||
|
}
|
||
|
.del{
|
||
|
width: 50rpx;
|
||
|
height: 50rpx;
|
||
|
background-color: #fff;
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
position: absolute;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
z-index: 2;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
&-fd{
|
||
|
width: 320rpx;
|
||
|
line-height: 98rpx;
|
||
|
background: linear-gradient(-90deg, #3399EA, #38BCFF);
|
||
|
border-radius: 98rpx;
|
||
|
font-size: 30rpx;
|
||
|
font-weight: 400;
|
||
|
color: #FFFFFF;
|
||
|
text-align: center;
|
||
|
margin: 0 auto;
|
||
|
margin-top: 50rpx;
|
||
|
}
|
||
|
}
|
||
|
</style>
|