<template>
<view class="container">
<view class="main">
<view class="main-upload u-flex u-flex-wrap">
<view class="main-upload-image"
:class="[{'main-upload-top':index >= 3},{'main-upload-left':index !== 0 && index%3 !== 0}]"
v-for="(item,index) in uploadList" :key="index">
<view class="">
<u-image border-radius="10" width="190" height="190" :src="commonImgUrl+item"></u-image>
</view>
<view class="main-upload-image__delete" @click="deleteImage(index)">
<u-image width="36" height="36" :src="deleteSrc"></u-image>
</view>
</view>
<view class="main-upload-add"
:class="[{'main-upload-margin':uploadList.length > 2},{'main-upload-left':uploadList.length > 0 && uploadList.length%3 !==0}]"
@click="uploadImage">
<view class="main-upload-add__image">
<u-image border-radius="10" width="64" height="57" :src="uploadSrc"></u-image>
</view>
<view class="main-upload-add__text">
上传照片
</view>
</view>
</view>
<view class="main-title">
<u-input placeholder="此处要填写标题哦～" :custom-style="inputCustom" v-model="title"
:placeholder-style="inputHolderStyle" />
</view>
<view class="main-content">
<u-input placeholder="填写正文" maxlength="-1" :clearable="false" type="textarea" v-model="content"
:placeholder-style="areaHolderStyle" />
</view>
</view>
<view class="btn" @click="handleUpload">
提交
</view>
</view>
</template>
<script>
import common from '../../common/common.js'
export default {
data() {
return {
commonImgUrl:'',// 图片地址前缀域名
// 上传图片
uploadList: [],
uploadSrc: '/static/upload.png',//图标图片
deleteSrc: '/static/del.png',//图标图片
// 标题
title: '',
// 内容
content: '',
flagIndex: 0,
failUpload: false,
inputCustom: {
padding: 0,
},
inputHolderStyle: "font: 32rpx 'PingFangSC-Regular', 'PingFang SC';color: #999999;",
areaHolderStyle: "font: 28rpx 'PingFangSC-Regular', 'PingFang SC';color: #999999;",
}
},
mounted() {
this.commonImgUrl = common.IMGURL;
},
beforeDestroy() {
},
methods: {
// 删除已选图片
deleteImage(_index) {
this.uploadList.splice(_index, 1);
},
// 提交
handleUpload() {
if (this.uploadList.length <= 0) return common.showToast({
title: '请上图片'
});
if (!this.title) return common.showToast({
title: '请填写标题'
});
if (!this.content) return common.showToast({
title: '请填写内容'
});
let test = this.uploadList.join(',')
this.$apis.savesTrategy({
MemberID: common.getstate().ID, //用户id
Substance: this.content, //内容
Type: "1", //类型
Title: this.title, //标题
Images: test, //图片地址,隔开
}).then(busRes => {
console.log('busRes', busRes);
common.showToast({
title: "发布成功",
waiting: true,
callback: () => {
this.title = "";
this.content = "";
this.uploadList = [];
}
})
}).catch(busErr => {
console.log('busErr', busErr);
})
},
// 上传图片
uploadImage() {
uni.chooseImage({
// count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], //从相册选择 album
success: (res) => {
uni.showLoading({
title: '上传中'
});
this.flagIndex = 0;
res.tempFilePaths.forEach((v, i) => {
this.upImage(v);
})
}
})
},
// 封装上传图片
upImage(_tempFilePath) {
this.flagIndex++;
uni.uploadFile({
url: common.URL + "../upload",
filePath: _tempFilePath,
name: 'file',
formData: common.postdata({
dir: "Strategy",
old: ''
}),
success: (uploadFileRes) => {
let res = JSON.parse(uploadFileRes.data)
if (res.code === 200) {
let uploadSrc = res.data;
this.uploadList.push(uploadSrc);
// uni.showToast({
// icon: 'none',
// title: '图片上传成功'
// })
} else {
this.failUpload = true;
uni.showToast({
title: '图片上传失败',
icon: 'none',
image: '',
duration: 1500,
mask: true,
})
}
},
fail: (err) => {
this.failUpload = true;
console.log('err', err);
uni.showToast({
icon: 'none',
title: '图片上传失败'
})
},
complete: () => {
this.flagIndex--;
if (this.flagIndex == 0 && !this.failUpload) {
uni.showToast({
icon: 'none',
title: '图片上传成功'
})
}
},
})
},
}
}
</script>
<style lang="scss" scoped>
.container {
min-height: calc(100vh - 52px);
background: #F9F9F9;
padding: 30rpx 30rpx 30rpx;
.main {
padding: 30rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin-bottom: 60rpx;
.main-upload {
.main-upload-image {
border-radius: 10rpx;
position: relative;
&__delete {
position: absolute;
top: 0;
right: 0;
}
}
.main-upload-top {
margin-top: 30rpx;
}
.main-upload-left {
margin-left: 30rpx;
}
.main-upload-add {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 190rpx;
height: 190rpx;
background: #F8FBF7;
border-radius: 10rpx;
border: 1px dashed #979797;
&__image {}
&__text {}
}
.main-upload-margin {
margin-top: 30rpx;
}
}
.main-title {
padding: 50rpx 0 16rpx;
border-bottom: 1px solid #EEEEEE;
}
.main-content {
min-height: 340rpx;
}
}
.btn {
margin: 0 30rpx;
height: 68rpx;
background: linear-gradient(95deg, #B7EB8F 0%, #52C41A 100%);
border-radius: 34rpx;
font: 28rpx/68rpx "PingFangSC-Regular", 'PingFang SC';
color: #FFFFFF;
text-align: center;
}
}
</style>
