小程序朋友圈动态页面

<view class="box">
    <view class="info">
        <scroll-view>
            <block wx:for="{{dynamic_list}}" wx:for-item="item" wx:key="index">
                <view class="row">
                    <view class="avatar">
                        <image mode="widthFix" src="{{item.header_img}}">image>
                    view>
                    <view class="trend">
                        <text class="name">{{item.teacher_name}}text>
                        <view class="content" hover-class="hover" bindtap='copyText' data-content="{{item.content}}">
                            {{item.content}}
                        view>
                        
                        
                        <view class="see" wx:if="{{item.type == '1'}}">
                            <video src="{{item.file[0].file_path}}" loop>video>
                        view>
                        
                        <view class="photo" wx:if="{{item.type == '2'}}">
                            <view class="tulie" wx:for="{{item.file}}" wx:for-item="row" wx:key="i" wx:for-index="i" bindtap="getpreview" data-item="{{item.file}}" data-img_url="{{row.file_path}}">
                                <image src="{{row.file_path}}?x-oss-process=image/resize,p_50,limit_0" lazy-load>image>
                            view>
                        view>
                        <view class="line">
                            <view class="time">{{item.release_time}}view>
                            <view class="col">
                                
                                <view class='save' bindtap='download' data-id="{{item.id}}" data-index="{{index}}" data-type="{{item.type}}">
                                    <image mode="widthFix" src="https://sucai.suoluomei.cn/sucai_zs/images/20191204145109-1.png">image>
                                view>
                                
                                <view class="share" data-id="{{item.id}}" data-title="{{item.teacher_name}}" data-avatar="{{item.header_img}}" data-perid="{{item.perid}}" data-content="{{item.content}}" bindtap="getshare">
                                    <image mode="widthFix" src="https://sucai.suoluomei.cn/sucai_zs/images/20191204145110-3.png">image>
                                view>
                            view>
                        view>
                    view>
                view>
            block>
        scroll-view>
    view>
    <view class="progress" wx:if="{{schedule}}">
        <progress percent="{{percent}}" duration="1" activeColor="#4aad8f" border-radius="10" stroke-width="12" show-info />
    view>
    <view class="null" wx:if="{{bare == 1}}">没有更多内容了~view>
    
    <share show="{{showpop}}" bind:index="getoption">share>
    
    <poster id="poster" show="{{showposter}}">poster>
view>

const app = getApp()
import wxRequest from "../../utils/http.js";
Page({
  data: {
    dynamic_list: [],
    api_url: app.urlData.materialurl,
    api_key: app.urlData.materialkey,
    url: app.urlData.baseurl,
    key: app.urlData.basekey,
    page: 1,
    bare: 0,
    wx_code: '',
    percent: 0,
    schedule: false,
    showpop: 0,
    content: '',
    id: '',
    perid: '',
    title: '',
    showposter: 0
  },

  onLoad: function (options) {
    this.setData({
      page: 1,
      bare: 0
    })
    this.getteacher()
    this.getscrolltop()
  },

  // 判断用户是否有老师
  getteacher() {
    wxRequest(this.data.url, {
      key: this.data.key,
      type: 'getUserInfoBeautySkin',
      sign: wx.getStorageSync('sign')
    }, "POST").then(res => {
      if (res.data.status == 1) {
        var teacher_resource = res.data.data.userInfo.teacher_resource
      } else {
        wx.showModal({
          title: '提示',
          content: res.data.msg,
          showCancel: false,
          success(res) {}
        })
      }
      this.setData({
        wx_code: teacher_resource
      })
      this.getdynamic()
    })
  },
  //动态列表
  getdynamic() {
    var wecat = (this.data.wx_code ? this.data.wx_code : 1)
    wxRequest(this.data.api_url + 'getDynamicFromTeacherCard', {
      api_key: this.data.api_key,
      page: this.data.page,
      length: 4,
      wx_code: wecat
    }, "POST").then(res => {
      if (res.data.status == 1) {
        if (res.data.data.length < 4) {
          this.setData({
            bare: 1
          })
        }
        if (this.data.page == 1) {
          this.data.dynamic_list = []
        }
        this.setData({
          dynamic_list: this.data.dynamic_list.concat(res.data.data),
        })
      } else {
        wx.showModal({
          title: '提示',
          content: res.data.msg,
          showCancel: false,
          success(res) {}
        })
      }
    })
  },

  // 复制文本
  copyText(e) {
    wx.setClipboardData({
      data: e.currentTarget.dataset.content,
      success(res) {
        wx.showToast({
          title: '复制成功',
        })
      }
    })
  },

  // 预览图片
  getpreview(e) {
    var img_url = e.currentTarget.dataset.img_url
    var item = e.currentTarget.dataset.item
    var img_list = []
    for (let i in item) {
      img_list.push(item[i].file_path)
    }
    wx.previewImage({
      current: img_url,
      urls: img_list
    })
  },

  // 下载图片到本地相册
  download(e) {
    app.getjudgment().then(res => {
      if (res.authSetting['scope.userInfo']) {
        let index = e.currentTarget.dataset.index
        let type = e.currentTarget.dataset.type
        let id = e.currentTarget.dataset.id
        this.setData({
          id: id
        })
        this.getsave(0, this.data.dynamic_list[index].file.length, index, type)
      }
    })
  },

  getsave(i, length, index, type) {
    let that = this
    wx.showLoading({
      title: '下载中(' + (i + 1) + '/' + length + ')',
    })
    setTimeout(function () {
      // 下载文件资源到本地
      const downloadTask = wx.downloadFile({
        url: that.data.dynamic_list[index].file[i].file_path,
        success: function (res) {
          // 保存图片2 视频1到系统相册  
          if (type == 2) {
            // 保存图片到系统相册
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success(res) {
                if (i + 1 == length) {
                  wx.showToast({
                    title: '保存成功',
                  });
                  var page = 'pages/dynamic/dynamic?id=' + that.data.id
                  app.getdown(page, 1, that.data.id)
                }
                wx.hideLoading()
                if (++i < length) {
                  that.getsave(i, length, index, type);
                }
              },
              fail(err) {
                console.log(err)
                wx.showToast({
                  title: '保存动态失败',
                  icon: 'none',
                })
              },
            })
          } else {
            // 保存视频到系统相册
            wx.saveVideoToPhotosAlbum({
              filePath: res.tempFilePath,
              success(res) {
                wx.showToast({
                  title: '保存成功',
                })
                var page = 'pages/dynamic/dynamic?id=' + that.data.id
                app.getdown(page, 1, that.data.id)
              },
              fail(err) {
                wx.hideLoading()
              }
            })
          }
        },
        fail: function (err) {
          if (err.errMsg == 'downloadFile:fail exceed max file size') {
            wx.showToast({
              title: '视频过大，不能保存',
              icon: 'none'
            })
          }
        }
      })
      // 下载进度
      downloadTask.onProgressUpdate((res) => {
        if (res.progress > 0) {
          that.setData({
            schedule: true,
            percent: res.progress
          })
        }
        if (res.progress == 100) {
          that.setData({
            schedule: false
          })
        }
      })
    }, Math.random() * 1000);
  },

  // 下拉刷新
  onPullDownRefresh: function () {
    wx.showNavigationBarLoading();
    this.setData({
      page: 1,
      bare: 0,
      schedule: false,
    })
    this.getdynamic()
    wx.hideNavigationBarLoading();
    wx.stopPullDownRefresh();
  },
  // 上拉加载
  onReachBottom: function () {
    if (this.data.bare == 1) {
      return false
    }
    wx.showLoading({
      title: '正在加载中',
    })
    var page = this.data.page + 1
    this.setData({
      page: page
    })
    this.getdynamic()
    wx.hideLoading();
  },
  // 分享
  getshare(e) {
    this.setData({
      showpop: 1,
      content: e.currentTarget.dataset.content,
      id: e.currentTarget.dataset.id,
      perid: e.currentTarget.dataset.perid,
      title: e.currentTarget.dataset.title
    })
    var page = 'pages/dynamic/dynamic?id=' + this.data.id
    app.getshare(page, 3, this.data.id)
  },

  // 子组件绑定事件
  getoption(e) {
    if (e.detail.index == 1) {
      var path = "pages/dynamic_detail/dynamic_detail"
      var scene = 'id-' + this.data.id + '!perid-' + this.data.perid + '!uid-' + wx.getStorageSync('userid') + '!sid-' + app.urlData.sid
      app.getcode(path, scene).then(res => {
        if (res.data.status == 1) {
          var poster = this.selectComponent("#poster")
          var main = "https://sucai.suoluomei.cn/sucai_zs/images/20200212172535-1.png"
          var explain = "你的好友为您推荐的" + this.data.title + "精彩动态"
          var code = res.data.data.qr_code_url
          // 依次传入图标，主体图片，标题文字，小程序二维码
          poster.getcanvas(main, explain, code)
          this.setData({
            showposter: 1
          })
        } else {
          wx.showModal({
            title: '提示',
            content: res.data.msg,
            showCancel: false,
            success(res) {}
          })
        }
      })
    }
  },

  // 转发动态
  onShareAppMessage: function (res) {
    if (res.from == "button") {}
    return {
      title: this.data.content,
      imageUrl: 'https://sucai.suoluomei.cn/sucai_zs/images/20200212172535-1.png',
      path: 'pages/dynamic_detail/dynamic_detail?id=' + this.data.id + "&perid=" + this.data.perid + "&title=" + this.data.title + '&uid=' + wx.getStorageSync('userid') + '&sid-' + app.urlData.sid
    }
  },

  // 页面加载回到顶部
  getscrolltop(e) {
    if (wx.pageScrollTo) {
      wx.pageScrollTo({
        scrollTop: 0
      })
    }
  },
})

.box {
    position: relative;
    width: 100%;
    height: 100%;
}

.avatar {
    width: 80rpx;
    height: 80rpx;
    overflow: hidden;
}

.avatar image {
    border-radius: 8rpx;
}

image {
    width: 100%;
    height: 100%;
}

.row {
    display: flex;
    justify-content: space-between;
    border-bottom: 2rpx solid #f5f5f5;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
}

.trend {
    width: 87%;
}

.name {
    font-size: 28rpx;
    color: #586A92;
}

.content {
    font-size: 28rpx;
    margin-bottom: 20rpx;
}

.photo {
    display: flex;
    flex-wrap: wrap;
}

.see {
    width: 100%;
    height: 300rpx;
}

.see video {
    width: 100%;
    height: 100%;
}

.line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15rpx;
}

.time {
    color: #666666;
    font-size: 24rpx;
}

.tulie {
    width: 185rpx;
    height: 185rpx;
    margin: 5rpx;
    overflow: hidden;
}

.col {
    display: flex;
    align-items: center;
}

.save {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40rpx;
    margin-right: 60rpx;
}

.share {
    display: flex;
    align-items: center;
    width: 40rpx;
    height: 45rpx;
}

.progress {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    background: #fff;
}

.progress progress {
    width: 100%;
    height: 100%;
}