zhaoyongnian
5 years ago
4 changed files with 481 additions and 0 deletions
@ -0,0 +1,299 @@ |
|||||
|
import { $wuxActionSheet } from '../../../../dist/index' |
||||
|
import { addTopic } from '../../utils/api' |
||||
|
const QQMapWX = require('../../utils/qqmap-wx-jssdk') |
||||
|
const config = require('../../../../utils/config') |
||||
|
|
||||
|
Page({ |
||||
|
data: { |
||||
|
topicValue: '', |
||||
|
imageList: [], |
||||
|
qqmapsdk: '', |
||||
|
addressValue: '', |
||||
|
imageId: 1, |
||||
|
location: { |
||||
|
latitude: '', |
||||
|
longitude: '' |
||||
|
}, |
||||
|
partyGroupId: '', |
||||
|
topicType:'',//0:事好儿鼓个掌 1:话对捧个场
|
||||
|
addTopicPrevious: 0 |
||||
|
}, |
||||
|
onShow () { |
||||
|
|
||||
|
}, |
||||
|
onLoad (options) { |
||||
|
const qqmapsdk = new QQMapWX({ |
||||
|
key: 'CMJBZ-4DECI-JXGGN-5B4WU-QLV2H-B5BEJ' |
||||
|
}) |
||||
|
this.setData({ |
||||
|
qqmapsdk, |
||||
|
partyGroupId: options.partyGroupId, |
||||
|
topicType: options.topicType, |
||||
|
}) |
||||
|
this.getLocation() |
||||
|
}, |
||||
|
// 话题内容框 值双向绑定
|
||||
|
bindTopicValue (e) { |
||||
|
this.setData({ |
||||
|
topicValue: e.detail.value |
||||
|
}) |
||||
|
console.log(this.data.topicValue) |
||||
|
}, |
||||
|
// 地址框 值双向绑定
|
||||
|
bindAddressValue (e) { |
||||
|
this.setData({ |
||||
|
addressValue: e.detail.value |
||||
|
}) |
||||
|
console.log(this.data.addressValue) |
||||
|
}, |
||||
|
// 选择图片
|
||||
|
chooseImage () { |
||||
|
const that = this |
||||
|
$wuxActionSheet().showSheet({ |
||||
|
buttons: [{ |
||||
|
text: '拍照' |
||||
|
}, |
||||
|
{ |
||||
|
text: '从相册中获取' |
||||
|
}, |
||||
|
], |
||||
|
buttonClicked(index, item) { |
||||
|
if (index === 0) { |
||||
|
wx.chooseImage({ |
||||
|
count: 1, |
||||
|
sizeType: ['original', 'compressed'], |
||||
|
sourceType: ['camera'], |
||||
|
success (res) { |
||||
|
const imageList = [...that.data.imageList] |
||||
|
imageList.push({ |
||||
|
img: res.tempFilePaths[0], |
||||
|
upload: true, |
||||
|
id: that.data.imageId++, |
||||
|
ossUrl: '' |
||||
|
}) |
||||
|
that.setData({ |
||||
|
imageList |
||||
|
}) |
||||
|
wx.uploadFile({ |
||||
|
url: config.BASEURL() + 'group/topic/upload', |
||||
|
filePath: res.tempFilePaths[0], |
||||
|
name: 'file', |
||||
|
header: { |
||||
|
'Content-Type': 'multipart/form-data' |
||||
|
}, |
||||
|
success (fileres) { |
||||
|
const data = JSON.parse(fileres.data) |
||||
|
if (data.code === 0 && data.msg === 'success') { |
||||
|
imageList[imageList.length - 1].ossUrl = data.data |
||||
|
imageList[imageList.length - 1].upload = false |
||||
|
} else { |
||||
|
imageList.pop() |
||||
|
wx.showToast({ |
||||
|
title: '上传图片失败，请重试', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}) |
||||
|
} |
||||
|
that.setData({ |
||||
|
imageList |
||||
|
}) |
||||
|
}, |
||||
|
fail (err) { |
||||
|
console.log(err) |
||||
|
imageList.pop() |
||||
|
wx.showToast({ |
||||
|
title: '上传图片失败，请重试', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}) |
||||
|
that.setData({ |
||||
|
imageList |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} else if (index === 1) { |
||||
|
wx.chooseImage({ |
||||
|
count: 3 - that.data.imageList.length, |
||||
|
sizeType: ['original', 'compressed'], |
||||
|
sourceType: ['album'], |
||||
|
success (res) { |
||||
|
let imageList = [] |
||||
|
res.tempFilePaths.forEach(item => { |
||||
|
imageList.push({ |
||||
|
img: item, |
||||
|
upload: true, |
||||
|
id: that.data.imageId++, |
||||
|
ossUrl: '' |
||||
|
}) |
||||
|
}) |
||||
|
that.setData({ |
||||
|
imageList: [...that.data.imageList, ...imageList] |
||||
|
}) |
||||
|
imageList.forEach((item, index) => { |
||||
|
(function (index) { |
||||
|
wx.uploadFile({ |
||||
|
url: `${config.BASEURL()}group/topic/upload`, |
||||
|
filePath: imageList[index].img, |
||||
|
name: 'file', |
||||
|
header: { |
||||
|
'Content-Type': 'multipart/form-data' |
||||
|
}, |
||||
|
success (fileRes) { |
||||
|
const data = JSON.parse(fileRes.data) |
||||
|
if (data.code === 0 && data.msg === 'success') { |
||||
|
imageList[index].ossUrl = data.data |
||||
|
imageList[index].upload = false |
||||
|
|
||||
|
} else { |
||||
|
imageList.splice(index, 1) |
||||
|
wx.showToast({ |
||||
|
title: '上传图片失败，请重试', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}) |
||||
|
} |
||||
|
that.data.imageList = that.data.imageList.slice(0, that.data.imageList.length - res.tempFilePaths.length) |
||||
|
that.setData({ |
||||
|
imageList: [...that.data.imageList, ...imageList] |
||||
|
}) |
||||
|
}, |
||||
|
fail (err) { |
||||
|
console.log(err) |
||||
|
imageList.splice(index, 1) |
||||
|
wx.showToast({ |
||||
|
title: '上传图片失败，请重试', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}) |
||||
|
that.data.imageList = that.data.imageList.slice(0, that.data.imageList.length - res.tempFilePaths.length) |
||||
|
that.setData({ |
||||
|
imageList: [...that.data.imageList, ...imageList] |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
})(index) |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
return true |
||||
|
}, |
||||
|
cancelText: '取消', |
||||
|
cancel() {}, |
||||
|
destructiveButtonClicked() {}, |
||||
|
}) |
||||
|
}, |
||||
|
// 获取经纬度
|
||||
|
getLocation () { |
||||
|
wx.getLocation({ |
||||
|
type: 'gcj02', |
||||
|
success: (res) => { |
||||
|
console.log('经纬度', res) |
||||
|
this.reverseGeocoder(res) |
||||
|
this.setData({ |
||||
|
location: { |
||||
|
latitude: res.latitude, |
||||
|
longitude: res.longitude |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 逆地址解析
|
||||
|
reverseGeocoder ({latitude, longitude}) { |
||||
|
this.data.qqmapsdk.reverseGeocoder({ |
||||
|
location: { |
||||
|
latitude, |
||||
|
longitude |
||||
|
}, |
||||
|
success: (res) => { |
||||
|
console.log('逆地址解析', res) |
||||
|
if (res.message === 'query ok') { |
||||
|
this.setData({ |
||||
|
addressValue: res.result.address |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// throttleAddTopic () {
|
||||
|
// let now = new Date()
|
||||
|
// if (now - this.data.addTopicPrevious > 2000) {
|
||||
|
// this.addTopic()
|
||||
|
// this.data.addTopicPrevious = now
|
||||
|
// }
|
||||
|
// },
|
||||
|
// 添加话题事件
|
||||
|
addTopic () { |
||||
|
if (this.data.topicValue === '') { |
||||
|
wx.showToast({ |
||||
|
title: '请输入-话题内容', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}) |
||||
|
return false |
||||
|
} else if (this.data.addressValue === '') { |
||||
|
wx.showToast({ |
||||
|
title: '请输入-地址', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}) |
||||
|
return false |
||||
|
} |
||||
|
const imagesList = [] |
||||
|
if (this.data.imageList.length > 0) { |
||||
|
const isUploadingStatus = this.data.imageList.some(item => item.upload) |
||||
|
if (isUploadingStatus) { |
||||
|
wx.showToast({ |
||||
|
title: '请等待图片上传完成', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}) |
||||
|
return false |
||||
|
} |
||||
|
this.data.imageList.forEach(item => { |
||||
|
imagesList.push(item.ossUrl) |
||||
|
}) |
||||
|
} |
||||
|
const para = { |
||||
|
topicType:this.data.topicType,//话题类型：0:事好儿鼓个掌 1:话对捧个场
|
||||
|
topicContent: this.data.topicValue,//话题内容
|
||||
|
topicAddress: this.data.addressValue,//话题地址
|
||||
|
topicLatitude: this.data.location.latitude,//话题位置纬度
|
||||
|
topicLongitude: this.data.location.longitude,//话题位置经度
|
||||
|
partyGroupId:this.data.partyGroupId,//党群ID
|
||||
|
images: imagesList |
||||
|
} |
||||
|
wx.showLoading({ |
||||
|
title: '加载中', |
||||
|
}) |
||||
|
addTopic(para).then(res => { |
||||
|
wx.hideLoading() |
||||
|
console.log(res) |
||||
|
wx.showToast({ |
||||
|
title: '发布成功', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}) |
||||
|
var pages = getCurrentPages() |
||||
|
// var prePages = pages[pages.length - 2]
|
||||
|
setTimeout(() => { |
||||
|
// prePages.pullRefreshGetTopicList()
|
||||
|
wx.navigateBack() |
||||
|
}, 1000) |
||||
|
}).catch(err => { |
||||
|
console.log(err) |
||||
|
}) |
||||
|
}, |
||||
|
// 删除图片
|
||||
|
deleteImage (e) { |
||||
|
const index = this.data.imageList.findIndex((item,index) => index === e.currentTarget.dataset.index) |
||||
|
this.data.imageList.splice(index, 1) |
||||
|
const imageList = this.data.imageList |
||||
|
this.setData({ |
||||
|
imageList |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,6 @@ |
|||||
|
{ |
||||
|
"usingComponents": { |
||||
|
"wux-actionsheet": "../../../../dist/actionsheet/index" |
||||
|
}, |
||||
|
"navigationBarTitleText": "我有话说" |
||||
|
} |
||||
@ -0,0 +1,33 @@ |
|||||
|
<view class="add-topic"> |
||||
|
<view class="topic"> |
||||
|
<textarea value="{{topicValue}}" bindinput="bindTopicValue" maxlength="500"> |
||||
|
<view wx:if="{{topicValue.length == 0}}" class="placeholder-textarea"> |
||||
|
<view>1、发起您的话题， 请将话题描述清晰{{topicType}}</view> |
||||
|
<view>2、在社群得到帮助、建议，能有助于更快地解决问题</view> |
||||
|
<view>3、还有机会被转发到【党群议事】让问题解决更快</view> |
||||
|
</view> |
||||
|
</textarea> |
||||
|
<view wx:if="{{topicType == '0'}}" class="picture"> |
||||
|
<view class="image-box" wx:for="{{imageList}}" wx:key="{{item}}" wx:for-item="item" wx:for-index="index"> |
||||
|
<image src="{{item.img}}" /> |
||||
|
<image wx:if="{{item.upload}}" class="loading" src="../../images/loading.gif" /> |
||||
|
<image bindtap="deleteImage" data-index="{{index}}" wx:else class="delete-image" src="../../images/icon_close.png" /> |
||||
|
</view> |
||||
|
<view class="image-box"> |
||||
|
<image bindtap="chooseImage" wx:if="{{imageList.length <= 2}}" src="../../images/ig_tianjiatupian@2x.png" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="address"> |
||||
|
<textarea value="{{addressValue}}" bindinput="bindAddressValue" placeholder-class="placeholder-textarea" placeholder="请输入定位地址" /> |
||||
|
<view class="tip"> |
||||
|
<image src="../../images/ic_dingwei@2x.png" /> |
||||
|
<text>话题定位</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="topic-button"> |
||||
|
<button bindtap="addTopic" type="default" size="defaultSize" hover-class="hover-button">发起话题</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<wux-actionsheet id="wux-actionsheet" /> |
||||
@ -0,0 +1,143 @@ |
|||||
|
page { |
||||
|
width: 100%; |
||||
|
height:100%; |
||||
|
} |
||||
|
.add-topic { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: #f7f7f7; |
||||
|
box-sizing: border-box; |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
.add-topic .topic { |
||||
|
width: 100%; |
||||
|
height: 640rpx; |
||||
|
background: #fff; |
||||
|
border-radius: 16rpx; |
||||
|
box-sizing: border-box; |
||||
|
padding: 45rpx 20rpx 0; |
||||
|
} |
||||
|
.add-topic .topic textarea { |
||||
|
color: #333; |
||||
|
font-size: 34rpx; |
||||
|
line-height: 46rpx; |
||||
|
width: 100%; |
||||
|
height: 340rpx; |
||||
|
box-sizing: border-box; |
||||
|
padding-bottom: 20rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
.add-topic .topic textarea .placeholder-textarea { |
||||
|
font-size: 28rpx; |
||||
|
line-height: 46rpx; |
||||
|
color: #999; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
} |
||||
|
.add-topic .topic .picture { |
||||
|
display: flex; |
||||
|
height: 255rpx; |
||||
|
box-sizing: border-box; |
||||
|
padding: 20rpx 0; |
||||
|
} |
||||
|
.add-topic .topic .picture .image-box, .add-topic .topic .picture image { |
||||
|
width: 215rpx; |
||||
|
height: 215rpx; |
||||
|
object-fit:cover; |
||||
|
border-radius: 8rpx; |
||||
|
} |
||||
|
.add-topic .topic .picture .image-box image { |
||||
|
width: 215rpx; |
||||
|
height: 215rpx; |
||||
|
object-fit:cover; |
||||
|
} |
||||
|
.add-topic .topic .picture .image-box { |
||||
|
position: relative; |
||||
|
} |
||||
|
.add-topic .topic .picture .image-box .loading { |
||||
|
position: absolute; |
||||
|
left: 25%; |
||||
|
top: 25%; |
||||
|
width: 50%; |
||||
|
height: 50%; |
||||
|
} |
||||
|
.add-topic .topic .picture .image-box .delete-image { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
position: absolute; |
||||
|
right: -20rpx; |
||||
|
top: -20rpx; |
||||
|
} |
||||
|
.add-topic .topic .picture .image-box + .image-box { |
||||
|
margin-left: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.add-topic .address { |
||||
|
width: 100%; |
||||
|
height: 210rpx; |
||||
|
background: #fff; |
||||
|
border-radius: 16rpx; |
||||
|
margin-top: 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
padding: 0 20rpx; |
||||
|
} |
||||
|
.add-topic .address textarea { |
||||
|
width: 100%; |
||||
|
height: 122rpx; |
||||
|
box-sizing: border-box; |
||||
|
padding-top: 35rpx; |
||||
|
font-size: 34rpx; |
||||
|
color: #333; |
||||
|
line-height: 46rpx; |
||||
|
} |
||||
|
.add-topic .address .placeholder-textarea { |
||||
|
font-size: 28rpx; |
||||
|
line-height: 46rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
.add-topic .address .tip { |
||||
|
width: 100%; |
||||
|
height: 78rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.add-topic .address .tip image { |
||||
|
width: 22rpx; |
||||
|
height: 26rpx; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
.add-topic .address .tip text { |
||||
|
font-size: 26rpx; |
||||
|
color: #999; |
||||
|
margin-left: 14rpx; |
||||
|
} |
||||
|
|
||||
|
.add-topic .topic-button { |
||||
|
width: 100%; |
||||
|
height: 85rpx; |
||||
|
display:flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
position: fixed; |
||||
|
bottom: 100rpx; |
||||
|
left: 0; |
||||
|
} |
||||
|
.add-topic .topic-button button { |
||||
|
width: 560rpx; |
||||
|
height: 85rpx; |
||||
|
line-height: 85rpx; |
||||
|
text-align:center; |
||||
|
color: #fff; |
||||
|
font-size: 36rpx; |
||||
|
border-radius: 16rpx; |
||||
|
background: linear-gradient(to right, #F40C0C, #FF4E4E) |
||||
|
} |
||||
|
.add-topic .topic-button .hover-button { |
||||
|
background: red; |
||||
|
} |
||||
|
|
||||
|
.wux-actionsheet__button { |
||||
|
font-size: 34rpx !important; |
||||
|
color: #333 !important; |
||||
|
} |
||||
Loading…
Reference in new issue