电影项目——电影详情

效果

image.png

添加云函数

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

var rp = require('request-promise');

// 云函数入口函数
exports.main = async (event, context) => {
  return rp(`http://api.douban.com/v2/movie/subject/${event.id}?apikey=0df993c66c0c636e29ecbb5344252a4a`)
    .then(function (res) {
      return res
    })
    .catch(function (err) {
     console.log(err)
    });
}

comment.js

// pages/comment/comment.js
const db = wx.cloud.database(); // 初始化数据库
Page({

  /**
   * 页面的初始数据
   */
  data: {
    detail: {},
    content: '', // 评价的内容
    score: 5, // 评价的分数
    images: [], // 上传的图片
    fileIds: [],
    movieId: -1
  },
  submit: function () {
    wx.showLoading({
      title: '评论中',
    })
    console.log(this.data.content, this.data.score);

    // 上传图片到云存储
    let promiseArr = [];
    for (let i = 0; i < this.data.images.length; i++) {
      promiseArr.push(new Promise((reslove, reject) => {
        let item = this.data.images[i];
        let suffix = /\.\w+$/.exec(item)[0]; // 正则表达式，返回文件扩展名
        wx.cloud.uploadFile({
          cloudPath: new Date().getTime() + suffix, // 上传至云端的路径
          filePath: item, // 小程序临时文件路径
          success: res => {
            // 返回文件 ID
            console.log(res.fileID)
            this.setData({
              fileIds: this.data.fileIds.concat(res.fileID)
            });
            reslove();
          },
          fail: console.error
        })
      }));
    }

    Promise.all(promiseArr).then(res => {
      // 插入数据
      db.collection('comment').add({
        data: {
          content: this.data.content,
          score: this.data.score,
          movieid: this.data.movieId,
          fileIds: this.data.fileIds
        }
      }).then(res => {
        wx.hideLoading();
        wx.showToast({
          title: '评价成功',
        })
      }).catch(err => {
        wx.hideLoading();
        wx.showToast({
          title: '评价失败',
        })
      })

    });

  },
  onContentChange: function (event) {
    this.setData({
      content: event.detail
    });
  },

  onScoreChange: function (event) {
    this.setData({
      score: event.detail
    });
  },

  uploadImg: function () {
    // 选择图片
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths);
        this.setData({
          images: this.data.images.concat(tempFilePaths)
        });
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      movieId: options.id
    });
    wx.showLoading({
      title: '加载中',
    })
    console.log(options);
    wx.cloud.callFunction({
      name: 'goDetail',
      data: {
        id: options.id
      }
    }).then(res => {
      // console.log(res);
      this.setData({
        detail: JSON.parse(res.result)
      });
      wx.hideLoading();
    }).catch(err => {
      console.error(err);
      wx.hideLoading();
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  }, 

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

comment.json

{
  "usingComponents": {
    "van-field": "vant-weapp/field",
    "van-rate": "vant-weapp/rate",
    "van-button": "vant-weapp/button"
  }
}

comment.wxml

<view class=''>
  <view class='detail-container' style='background: url({{detail.images.large}}) no-repeat  top/cover'></view>
  <view class='detail-mask'></view>
  <view class='detail-info'>
    <image src="{{detail.images.large}}" class='detail-img'></image>
    <view class='detail'>
      <view class='detail-nm'>{{detail.title}}</view>
      <view>{{detail.original_title}}</view>
      <view class='detail.sc'>{{detail.rating.average}}分</view>
      <view>{{detail.countries[0]}}</view>
      <view>导演：{{detail.directors[0].name}}</view>
    </view>
  </view>
  <view class='desc'>{{detail.summary}}</view>
  <!-- 评价 -->
  <view class="comment-container">
    <van-field value="{{ content }}" placeholder="写一些评价吧" bind:change="onContentChange" />
    <van-rate value="{{ score }}" bind:change="onScoreChange" />
    <van-button type="warning" bindtap="uploadImg">上传图片</van-button>
    <view>
      <image class="comment-img" src="{{item}}" wx:for="{{images}}" wx:key="{{index}}"></image>
    </view>
    <van-button size="large" type="danger" bindtap="submit">提交评价</van-button>
  </view>

</view>

comment.wxss

.detail-container {
  height: 400rpx;
  filter: blur(40rpx);
  opacity: 0.4;
}

.detail-mask {
  position: absolute;
  width: 100%;
  height: 400rpx;
  background-color: #333;
  top: 0;
  left: 0;
  z-index: -1;
}

.detail-img {
  width: 280rpx;
  height: 90%;
  margin-right: 24rpx;
}

.detail-info {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400rpx;
  padding: 20rpx;
}

.detail {
  flex-grow: 1;
  line-height: 60rpx;
}

.detail view {
  color: #fff;
  font-size: 24rpx;
}

.detail .detail-nm {
  font-size: 40rpx;
  font-weight: 700;
}

.detail .sc {
  color: #fc0;
  font-size: 36rpx;
  font-weight: 700;
}

.desc {
  padding: 20rpx;
  color: #555;
  font-size: 24rpx;
}

.comment-container {
  padding: 0 20rpx;
}

.comment {
  padding: 10rpx;
}

.comment-content {
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
  font-size: 32rpx;
  border-radius: 8rpx;
  padding: 20rpx;
}

.comment-image image {
  width: 200rpx;
  height: 200rpx;
  margin: 10rpx;
}

.comment-img {
  width: 200rpx;
  height: 200rpx;
  margin: 20rpx 20rpx 0 0;
}