|
|
就是仿小红书的帖子发布页代码，我增加了一个删除函数
<template>
<view class="page">
<a-nav-bar title="" left-arrow hide-line>
<template _slot="right">
<a-icon name="prompt" size="18" />
</template>
</a-nav-bar>
<scroll-view style="flex:1;">
<scroll-view scroll-x class="publish__images">
<img class="publish__images-img" mode="aspectFill" v-for="(img,_index) in postData.images" src={img} @click="del" />
<img class="publish__images-img" src="../../image/icon_add_pic.png" @click="choosePic" />
</scroll-view>
<view class="publish__fields">
<view class="publish__cell">
<input v-model="postData.title" type="text" class="publish__title" placeholder="填写标题会有更多的赞哦~" />
</view>
<view class="publish__cell">
<textarea v-model="postData.content" class="publish__content" placeholder="添加正文"></textarea>
</view>
<view class="publish__cell" style="flex-flow:row;" @click="chooseTopic">
<a-icon name="topic-filling" size="12" color="#000" />
<text class="publish__label-text">
参与话题
</text>
<text class="publish__label-value" v-if="postData.topic.id">
{postData.topic.name}
</text>
<view style="justify-content:center;" v-else>
<a-tag class="publish__tag" round>✨选择合适的话题让更多人看到</a-tag>
</view>
<a-icon name="arrow-right" color="#ccc" size="14" />
</view>
<view class="publish__cell">
<view style="flex-flow:row;" @click="choosePois">
<a-icon name="map-filling" size="12" color="#000" />
<text class="publish__label-text">
添加地点
</text>
<text class="publish__label-value" v-if="postData.location.name">
{postData.location.name}
</text>
<a-icon name="arrow-right" color="#ccc" size="14" />
</view>
<scroll-view scroll-x style="margin-bottom:15px;" v-if="!postData.location.name">
<a-tag v-for="(poi,i) in pois" class="publish__tag" round @click="selectPoi(i)">{poi.name}
</a-tag>
</scroll-view>
</view>
</view>
</scroll-view>
<safe-area class="publish__footer">
<view class="publish__footer-left">
<view class="publish__draft-bg">
<a-icon name="inbox" size="18" color="#666" />
</view>
<text class="publish__draft-text">
存草稿
</text>
</view>
<text class="publish__button" @click="publish">
发布笔记
</text>
</safe-area>
</view>
</template>
<script>
import '../../components/act/a-nav-bar.stml';
import '../../components/act/a-tag.stml';
import { chooseImages, req } from '../../script/util';
export default {
name: 'publish',
apiready() {
token = api.getPrefs({
sync: true,
key: 'token'
});
this.loadTopics();
this.getPois();
this.listenPoi();
},
data() {
return {
postData: {
images: api.pageParam.images || [],
imgx: [],
title: '',
content: '',
token: '',
topic: {
id: 0,
name: ''
},
location: {
name: '',
pos: null
}
},
topics: [],
pois: []
}
},
methods: {
choosePic() {
const max = 9 - this.data.postData.images.length;
chooseImages(max).then(images => this.data.postData.images.push(...images));
console.log(JSON.stringify(this.data.postData.images));
},
del(_index){
this.data.postdata.images.splice(_index,1);
},
yiChu(_index) {
console.log(JSON.stringify(index));
api.confirm({
msg: '你确定要删除这张图片吗？',
buttons: ['确定', '取消']
}, function(ret, err) {
this.data.postData.images.splice(index,1)
});
},
loadTopics() {
req('topics/list').then(data => this.data.topics = data)
},
chooseTopic() {
api.actionSheet({
title: '选择话题',
cancelTitle: '取消',
destructiveTitle: '不使用话题',
buttons: this.data.topics.map(item => item.name)
}, ({ buttonIndex }) => {
const index = buttonIndex - 2;
if (index === -1) {
this.data.postData.topic = {
id: 0,
name: ''
}
} else if (index === this.data.topics.length) {
console.log('取消')
} else {
this.data.postData.topic = this.data.topics[index];
}
});
},
getPois() {
var map = api.require('bMap');
var that = this;
map.getLocation({
accuracy: '100m',
autoStop: true,
filter: 1
}, function(ret, err) {
if (ret.status) {
console.log(JSON.stringify(ret));
map.searchNearby({
keyword: '景点',
lon: ret.lon,
lat: ret.lat,
radius: 2000
}, function(ret, err) {
if (ret.status) {
that.data.pois = ret.results;
console.log(JSON.stringify(that.data.pois));
} else {
console.log(JSON.stringify(err));
}
});
} else {
console.log('没返回');
}
});
},
selectPoi(i) {
const poi = this.data.pois;
this.setPoi(poi);
},
choosePois() {
api.openWin({
name: 'pois',
url: '../post/pois.stml',
pageParam: {
pois: this.data.pois
}
})
},
listenPoi() {
api.addEventListener({
name: 'sendPoi'
}, ({ value }) => {
this.setPoi(value);
api.closeWin({
name: 'pois'
})
})
},
setPoi(poi) {
if (poi) {
this.data.postData.location = {
pos: {
lat: poi.lat,
lon: poi.lon
},
name: poi.name
}
} else {
this.data.postData.location = {
pos: null,
name: ''
}
}
},
publish() {
// console.log(JSON.stringify(this.data.postData))
const postData = this.data.postData;
if (postData.images.length === 0) {
return api.toast({
msg: '请选择至少一张图片'
})
}
if (!postData.title) {
return api.toast({
msg: '请输入标题'
})
}
if (!postData.content) {
return api.toast({
msg: '请输入内容'
})
}
const uploadList = postData.images.map(image => req('posts/upload', {}, image));
Promise.all(uploadList)
.then(data => {
postData.images = data.map(item => item.url);
// console.log(JSON.stringify(postData));
req('posts/publish', postData)
.then(data => {
api.sendEvent({
name: 'publish-success',
extra: data
})
})
.catch(err => console.log(JSON.stringify(err)))
})
}
}
}
</script> |
|
显示全部楼层
QQ空间
新浪微博
微信扫一扫
