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.
163 lines
3.4 KiB
163 lines
3.4 KiB
<template>
|
|
<view>
|
|
<lf-nav title="发表" :showIcon="true" :backInquiry="backInquiry"></lf-nav>
|
|
<view class="content">
|
|
<!-- 文本输入 -->
|
|
<textarea class="textarea" placeholder="这一刻的想法…" v-model="content"></textarea>
|
|
<!-- 上传图片 -->
|
|
<view class="my-images">
|
|
<view class="my-image-item" @click="uploadImage" v-if="image_list.length < 6">
|
|
<text class="lf-iconfont icon-jia my-image-item-after"></text>
|
|
</view>
|
|
<view class="my-image-item" v-for="(item, index) in image_list" :key="index" @click="lookImage(index)">
|
|
<image :src="item" mode="aspectFill"></image>
|
|
<view class="remove-image" @click.stop="removeInage(index)">
|
|
<text class="lf-iconfont icon-shanchu"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 发表按钮 -->
|
|
<button class="my-btn" hover-class="lf-opacity">发表</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {
|
|
image_list: [],
|
|
image_count: 6,
|
|
content: '',
|
|
backInquiry: false
|
|
}
|
|
},
|
|
watch: {
|
|
content(val){
|
|
if(String(val).length){
|
|
this.backInquiry = true;
|
|
}else{
|
|
this.backInquiry = false;
|
|
}
|
|
}
|
|
},
|
|
onLoad(){
|
|
|
|
},
|
|
methods: {
|
|
// 上传凭证图片
|
|
uploadImage(){
|
|
let current_count = this.image_count - this.image_list.length;
|
|
if(current_count == 0) return;
|
|
uni.chooseImage({
|
|
count: current_count,
|
|
complete: result => {
|
|
if(result.errMsg == "chooseImage:fail cancel"){
|
|
return; // 取消选择图片
|
|
}
|
|
let tempFiles = result.tempFiles;
|
|
let image_list = [];
|
|
let overstep = false;
|
|
tempFiles.map(item => {
|
|
// 上传的图片需小于10MB
|
|
if(item.size < 10464788){
|
|
image_list.push(item.path);
|
|
}else{
|
|
overstep = true;
|
|
}
|
|
})
|
|
if(overstep){
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '您上传的图片含有超出10M大小的限制，请优化大小后再上传！',
|
|
showCancel: false
|
|
})
|
|
}
|
|
this.image_list.push(...image_list);
|
|
}
|
|
})
|
|
},
|
|
// 预览图片
|
|
lookImage(current){
|
|
if(this.image_list.length <= 0) return;
|
|
this.$u.throttle(() => {
|
|
uni.previewImage({
|
|
urls: this.image_list,
|
|
current: current
|
|
});
|
|
}, 500);
|
|
},
|
|
// 移除图片
|
|
removeInage(current){
|
|
this.image_list.splice(current, 1);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped="scoped">
|
|
.content{
|
|
width: 750rpx;
|
|
height: max-content;
|
|
box-sizing: border-box;
|
|
padding: 30rpx 32rpx;
|
|
.textarea{
|
|
width: 100%;
|
|
height: 160rpx;
|
|
}
|
|
}
|
|
|
|
.my-images{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 30rpx;
|
|
margin-bottom: 18rpx;
|
|
.my-image-item{
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
background: #DDDDDD;
|
|
position: relative;
|
|
margin-right: 12rpx;
|
|
&:nth-child(3n){
|
|
margin-right: 0rpx;
|
|
}
|
|
&:nth-child(n+4){
|
|
margin-top: 12rpx;
|
|
}
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.remove-image{
|
|
position: absolute;
|
|
right: -4rpx;
|
|
top: -18rpx;
|
|
color: #e74c3c;
|
|
font-size: 40rpx;
|
|
padding: 8rpx;
|
|
}
|
|
}
|
|
.my-image-item-after{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 60rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.my-btn{
|
|
margin-top: 30rpx;
|
|
background-color: #15716E;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/deep/.textarea-placeholder{
|
|
color: #999999;
|
|
line-height: 1;
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|