chelvc-custom/src/pages/client/clientPackage/communityPublish.vue

<template>
  <view class="container">
    <view class="top-box">
      <u--textarea border='none' v-model="textContent" count placeholder="写下自己的感受分享给更多人"></u--textarea>
      <view class="upload-box">
        <image class="upd-img" v-for="item of fileList" :src="item" mode="aspectFill"></image>
        <view class="upload-item" @click="handlerUploadImg" v-if="fileList.length < 9">
          <image class="img" src="@/static/QR57a.jpg" mode=""></image>
        </view>
      </view>
    </view>
    <view class="item-box" @click="handlerGetLocation">
      <view class="item-left">
        <u-icon name="map" size='22'></u-icon>
        <span class="fs-bold">你在哪里</span>
        <span class="left-text">(越详细越容易被推荐噢)</span>
      </view>
      <view class="item-right">
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>
    <view class="btn-box">
      <button class="btn" @click="handlerPublishBtn">发布</button>
    </view>
  </view>
</template>

<script>
  import {
    addClientContent
  } from '@/api/client/community.js';
  export default {
    data() {
      return {
        textContent: '',
        fileList: [],
        userId: null,
        uploadCount: 0
      }
    },
    mounted() {
      this.userId = this.$store.state.user.userMessage.id
    },
    methods: {
      // 获取当前定位
      handlerGetLocation() {
        wx.getLocation({
          type: 'gcj02',
          success(res) {
            console.log("@@@@res", res);
          },
          fail(error) {
            console.log("error", error);
          }
        })
      },
      // 点击发布按钮
      handlerPublishBtn() {
        let params = {
          textContent: this.textContent,
          status: 0, // 状态：0-正常；1-屏蔽
          type: 'PURE_TEXT', // 动态类型:1-纯文字；2-图片；3-视频 允许值: PURE_TEXT, PHOTO, VIDEO
          location: '山东潍坊', // 定位
          userId: this.userId,
        }
        if (this.fileList.length != 0) {
          params.type = 'PHOTO'
          params.list = []
          this.fileList.map((rs, idx) => {
            params.list.push({
              resourceKey: rs,
              sort: idx
            })
          })
        }
        addClientContent(params).then(res => {
          if (res.code == 200) {
            uni.showToast({
              title: '发布成功',
              icon: 'none'
            })
            this.textContent = ''
            setTimeout(() => {
              uni.navigateBack(-1)
            }, 1500)
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
            return
          }
        })
      },
      // 上传头像
      async handlerUploadImg() {
        try {
          const res = await uni.showActionSheet({
            itemList: ['拍照', '从相册选择'],
          });

          if (res.tapIndex === 0) {
            // 用户选择拍照
            this.takePhoto();
          } else if (res.tapIndex === 1) {
            // 用户选择从相册选择
            this.chooseImage();
          }
        } catch (error) {
          console.error(error);
        }
      },
      // 拍照
      takePhoto() {
        uni.chooseImage({
          sourceType: ['camera'],
          count: 9 - this.uploadCount,
          success: res => {
            const tempFilePaths = res.tempFilePaths;
            // 调用上传图片的方法
            tempFilePaths.map(rs => {
              this.uploadAvatar(rs);
            })
          },
          fail: error => {
            console.error(error);
          },
        });
      },
      //从相册中选择
      chooseImage() {
        uni.chooseImage({
          sourceType: ['album'],
          count: 9 - this.uploadCount,
          success: res => {
            const tempFilePaths = res.tempFilePaths;
            tempFilePaths.map(rs => {
              this.uploadAvatar(rs);
            })
            // 调用上传图片的方法
          },
          fail: error => {
            console.error(error);
          },
        });
      },
      // 上传头像
      uploadAvatar(filePath) {
        // 在这里实现上传头像的逻辑，将filePath作为参数传入
        this.fileList.push(filePath)
        this.uploadCount = this.fileList.length
        console.log('@@@filePath', this.fileList);
        // this.queryParams.avatar = filePath;
        this.$forceUpdate(); // 手动触发组件的重新渲染
      },
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    position: relative;
    background-color: #F5F7F9;
    height: 100vh;

    .top-box,
    .item-box {
      padding: 20rpx;
      background-color: #fff;
      border-radius: 20rpx;

      .upload-box {
        margin-top: 20rpx;
        display: flex;
        flex-wrap: wrap;

        .upd-img {
          width: 140rpx;
          height: 140rpx;
          border-radius: 20rpx;
          margin: 10rpx;
        }

        .upload-item {
          width: 140rpx;
          height: 140rpx;
          border: 2rpx solid #000;
          border-radius: 20rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin: 10rpx;

          .img {
            width: 80rpx;
            height: 80rpx;
            margin: 0 auto;
          }
        }
      }
    }

    .item-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;

      .item-left {
        display: flex;
        align-items: center;
      }
    }

    .btn-box {
      position: absolute;
      bottom: 0;
      background-color: #fff;
      height: 100rpx;
      padding: 20rpx;
      width: 95%;
      display: flex;
      justify-content: center;

      .btn {
        width: 80%;
        border-radius: 20rpx;
        font-size: 28rpx;
        color: #000;
        background-color: #FECF4C;
        height: 80rpx;
        line-height: 80rpx;
      }
    }

    .fs-bold {
      font-weight: bold;
      font-size: 28rpx;
      color: #000;
      margin-left: 10rpx;
    }

    .left-text {
      color: #a6a7a8;
      font-size: 28rpx;
      margin-left: 10rpx;
    }
  }
</style>