tijiao

5 years ago · b6b08b300a
4 changed files with 481 additions and 0 deletions
--- a/subpages/associationNew/pages/addTopic/addTopic.js
+++ b/subpages/associationNew/pages/addTopic/addTopic.js
@ -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
+    })
+  }
+})
--- a/subpages/associationNew/pages/addTopic/addTopic.json
+++ b/subpages/associationNew/pages/addTopic/addTopic.json
@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "wux-actionsheet": "../../../../dist/actionsheet/index"
+  },
+  "navigationBarTitleText": "我有话说"
+}
--- a/subpages/associationNew/pages/addTopic/addTopic.wxml
+++ b/subpages/associationNew/pages/addTopic/addTopic.wxml
@ -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" />
--- a/subpages/associationNew/pages/addTopic/addTopic.wxss
+++ b/subpages/associationNew/pages/addTopic/addTopic.wxss
@ -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;
+}