uni-app 157发布朋友圈-批量上传图片

<template>
  <view class="flex flex-wrap">
    <view style="width: 230rpx;" v-for="(item,index) in imageList" :key='index' class="flex align-center justify-center pt-2 position-relative">
      <image :src="item" class="bg-light rounded" style="width: 210rpx;height: 210rpx;" @click="preview(item)"></image>
      <view class="flex align-center justify-center bg-danger rounded-circle " style="width: 60rpx;height: 60rpx;position: absolute;right: 0;top: 10rpx;background-color: rgba(0,0,0,0.5);" @click="deleteImage(item)">
        <text class="iconfont text-white font-small">X</text>
      </view>
    </view>
    
    <view v-if="imageList.length < 9" style="width: 230rpx;" class="flex align-center justify-center" @click="chooseImage">
      <view class="flex align-center justify-center bg-light rounded" style="width: 210rpx;height: 210rpx;">
        <text class="text-light-muted" style="font-size: 100rpx;">+</text>
      </view>
    </view>
  </view>
</template>
<script>
  import $H from '@/common/free-lib/request.js';
  export default{
    props:{
      data:{
        type:Array,
        default:()=>{
          return []
        }
      }
    },
    data(){
      return {
        imageList:[]
      }
    },
    mounted() {
      this.imageList = this.data;
    },
    methods:{
      // 选择图片
      chooseImage(){
        uni.chooseImage({
          count:9 - this.imageList.length,
          sizeType:['compressed'],
          success:(res)=>{
            // 上传
            res.tempFilePaths.forEach(path=>{
              $H.upload('/upload',{
                filePath:path
              },(progress)=>{
                console.log('上传进度',progress);
              }).then(url=>{
                this.imageList.push(url);
                this.$emit('update',this.imageList);
              })
            })
            // this.imageList = [...this.imageList,...res.tempFilePaths];
            // this.$emit('update',this.imageList);
          }
        })
      },
      // 预览图片
      preview(item){
        uni.previewImage({
          current:item,
          urls:this.imageList
        })
      },
      // 删除图片
      deleteImage(item){
        uni.showModal({
          content:'是否要删除该图片？',
          success:(res)=>{
            if(res.confirm){
              // 执行删除
              let index = this.imageList.findIndex(url=>url === item);
              if(index !== -1){
                         this.imageList.splice(index,1);
                         this.$emit('update',this.imageList);
              }
            }
          }
        })
         
      }
    }
  }
</script>
<style>
</style>

<template>
  <view>
    <free-transparent-bar :scrollTop="scrollTop" @clickRight="clickRight"></free-transparent-bar>
    <view class="position-relative" style="height: 620rpx;">
      <image src="https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/shengchengqi/datapic/1.jpg" mode="aspectFill" style="height: 590rpx;" class="bg-secondary w-100"></image>
      <image :src="user.avatar || '/static/images/demo/demo6.jpg'" style="width: 120rpx;height:120rpx;right: 30rpx;" mode="" class="bg-secondary rounded position-absolute bottom-0"></image>
      <text class="text-white font-md position-absolute" style="bottom: 45rpx;right: 160rpx">{{user.nickname || user.username}}</text>
    </view>
    
    <!-- 朋友圈列表样式 -->
    <free-moment-list v-for="(item,index) in list" :key='index' :item="item" :index="index" @action="doAction" @reply="replyEvent"></free-moment-list>
    
    <!-- 评论框 -->
    <free-popup ref="action" bottom transformOrigin="center bottom">
      <view style="height: 105rpx;" class="bg-light border-top flex align-center">
        <textarea fixed class="bg-white rounded p-2 font-md" style="height: 45rpx;width: 420rpx;" value="" placeholder=""  v-model="content" :focus="true"/>
        <free-icon-button @click="changeFaceModeal"><text class="iconfont font-lg">&#xe605;</text></free-icon-button>
        <free-main-button name="发送" :disabled="content.length===0" @click="send"></free-main-button>
      </view>
      
      <!-- 表情包 -->
      <scroll-view v-if="faceModal" scroll-y="true" style="height: 350rpx;" class="bg-light">
        <view class="flex flex-wrap">
          <view class="flex align-center justify-center" hover-class="bg-white" style="width:107rpx;height:107rpx;" v-for="(item,index) in faceList" :key="index" @click="addFace(item)">
            <text>{{item}}</text>
          </view>
        </view>
      </scroll-view>
    </free-popup>
    
    <!-- 上拉加载 -->
    <view class="flex align-center justify-center py-5 bg-light" v-if="list.length >= 10">
      <text class="text-muted font">{{loadmore}}</text>
    </view>
  </view>
</template>
<script>
  import freeTransparentBar from '@/components/free-ui/free-transparent-bar.vue';
  import freeMomentList from '@/components/free-ui/free-moment-list.vue';
  import freePopup from '@/components/free-ui/free-popup.vue';
  import freeIconButton from '@/components/free-ui/free-icon-button.vue';
  import freeMainButton from '@/components/free-ui/free-main-button.vue';
  import $H from '@/common/free-lib/request.js';
  import { mapState } from 'vuex';
  export default {
    components:{
      freeTransparentBar,
      freeMomentList,
      freePopup,
      freeIconButton,
      freeMainButton
    },
    data() {
      return {
        content:'',
        scrollTop:0,
        faceModal:false,
        faceList:["😀","😁","😂","😃","😄","😅","😆","😉","😊","😋","😎","😍","😘","😗","😙","😚","😇","😐","😑","😶","😏","😣","😥","😮","😯","😪","😫","😴","😌","😛","😜","😝","😒","😓","😔","😕","😲","😷","😖","😞","😟","😤","😢","😭","😦","😧","😨","😬","😰","😱","😳","😵","😡","😠"],
        commentIndex:-1,
        page:1,
        loadmore:'上拉加载更多',
        key:'moment_timeline',
        list:[],
        reply_user:false
      }
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    onReachBottom() {
      if(this.loadmore !== '上拉加载更多'){
        return;
      }
      this.page += 1;
      this.loadmore = '加载中...';
      this.getData().catch(err=>{
        this.page -= 1;
        uni.showToast({
          title:'加载失败',
          icon:'none'
        });
        this.loadmore = '上拉加载更多';
      })
    },
    onLoad(e) {
      if(e.key){
        this.key  = e.key;
      }
      this.page = 1;
      this.getData();
    },
    onPullDownRefresh() {
      this.page = 1;
      this.getData().then(res=>{
        uni.showToast({
          title:'刷新成功',
          icon:'none'
        });
        uni.stopPullDownRefresh();
      }).catch(err=>{
        uni.showToast({
          title:'刷新失败',
          icon:'none'
        });
        uni.stopPullDownRefresh();
      });
    },
    computed:{
      ...mapState({
        user:state=>state.user.user
      })
    },
    methods: {
      // 点击操作菜单
      doAction(e){
        uni.showActionSheet({
          itemList: ['点赞','评论'],
          success: res => {
            if(res.tapIndex === 0){
              // 点赞
              this.doSupport(e)
            }else{
              this.content='';
              this.faceModal=false;
              this.commentIndex = e.index;
              this.reply_user = false;
              this.$refs.action.show();
              // this.doComment(e)
            }
          }
        });
      },
      // 获取数据
      getData(){
        return new Promise((result,reject)=>{
          let page = this.page;
          $H.get('/'+this.key+'/'+page).then(res=>{
            this.list = page === 1 ? res : [...this.list,...res];
            this.loadmore = this.list.length === (page * 10) ? '上拉加载更多' : '没有更多了'
            result(res);
          }).catch(err=>{
            reject(err);
          })
        })
      },
      // 点赞
      doSupport(e){
        $H.post('/moment/like',{id:e.item.moment_id}).then(res=>{
         let i = e.item.likes.findIndex(item=>item.id === this.user.id);
         if(i !== -1){
           // 取消点赞
           e.item.likes.splice(i,1);
         }else{
           // 点赞
           e.item.likes.push({
             id:this.user.id,
             name:this.user.nickname || this.user.username
           })
         }
         uni.showToast({
          title:i !== -1 ? '取消点赞成功' : '点赞成功',
        icon:'none'
         });
         
        })
      },
      // 添加表情
      addFace(item){
        this.content += item;
      },
      // 开启关闭表情包面板
      changeFaceModeal(){
        uni.hideKeyboard();
        setTimeout(()=>{
          this.faceModal = !this.faceModal;
        },100);
      },
      // 发送
      send(){
        console.log(this.reply_user);
        let item = this.list[this.commentIndex];
        $H.post('/moment/comment',{
          id:item.moment_id,
          content:this.content,
          reply_id:this.reply_user ? this.reply_user.id : 0
        }).then(res=>{
          item.comments.push({
            content:this.content,
            user:{
              id:this.user.id,
              name:this.user.nickname || this.user.username
            },
            replay:this.reply_user ? this.reply : null
          })
          uni.showToast({
            title:'评论成功',
            icon:'none'
          })
        })
        this.$refs.action.hide();
      },
      replyEvent(e){
        this.content = '';
        this.faceModal = false,
        this.commentIndex = e.index,
        this.reply_user = e.reply;
        this.$refs.action.show();
      },
      // 选择发表朋友圈类型
      clickRight(){
        let list = [{
          name:'图文',
          key:'image'
        },
        {
          name:'视频',
          key:'video'
        },
        {
          name:'文字',
          key:'content'
        }];
        uni.showActionSheet({
          itemList:list.map(v=>v.name),
          success:res=>{
            uni.navigateTo({
              url: '../add-moment/add-moment?type='+list[res.tapIndex].key,
            });
          }
        })
      }
    },
  }
</script>
<style>
</style>

<template>
  <view class="px-3">
    <!-- 导航栏 -->
    <free-nav-bar showBack :showRight="true">
      <free-main-button name="发表" slot="right" @click="submit"></free-main-button>
    </free-nav-bar>
    <!-- 文字 -->
    <textarea value="" placeholder="这一刻的想法" v-model="content" class="font-md mb-3" />
    <!-- 图文 -->
    <free-upload-image :data="imageList" v-if="type==='image'" @update='uploadImage'></free-upload-image>
    <!-- 视频 -->
    <block v-if="type==='video'">
    <view v-if="!viedo" class="flex align-center justify-center  bg-light rounded" style="height: 350rpx;" hover-class="bg-hover-light" @click="uploadVideo">
      <text class="text-muted" style="font-size:100rpx;">+</text>
    </view>
    <viedo v-if="viedo" :src="viedo" controls></viedo>
    <view v-if="viedo" class="my-3 flex align-center justify-center bg-light" hover-class="bg-hover-light" style="height:100rpx;" @click="uploadVideo">
      <text class="font-md text-muted">点击切换视频</text>
    </view>
    </block>
    
    <free-list-item title="所在位置" showRight :showLeftIcon="false">
      <text slot="right" class="font-md">位置</text>
    </free-list-item>
    <free-list-item title="提醒谁看" showRight :showLeftIcon="false">
      <text slot="right" class="font-md">位置</text>
    </free-list-item>
    <free-list-item title="谁可以看" showRight :showLeftIcon="false">
      <text slot="right" class="font-md">位置</text>
    </free-list-item>
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeMainButton from '@/components/free-ui/free-main-button.vue';
  import freeListItem from "@/components/free-ui/free-list-item.vue";
  import freeUploadImage from '@/components/free-ui/free-upload-image.vue';
  import $H from '@/common/free-lib/request.js'
  export default {
    components:{
      freeNavBar,
      freeMainButton,
      freeListItem,
      freeUploadImage
    },
    data() {
      return {
        content:'',
        type:'image',
        imageList:[],
        viedo:''
      }
    },
    onLoad(e) {
      this.type=e.type;
    },
    methods: {
      // 发布
      submit(){
        $H.post('/moment/create',{
          
          content:this.content,
          image:this.imageList.join(','),
          video:this.viedo,
          type:this.type,
          location:'',
          remind:'',
          see:''
        }).then(res=>{
          
        })
      },
      // 上传图片
      uploadImage(list){
        this.imageList = list;
      },
      // 上传视频
      uploadVideo(){
        uni.chooseVideo({
          maxDuration:10,
          success:(e)=>{
            this.viedo = e.tempFilePath;
          }
        })
      }
    }
  }
</script>
<style>
</style>