美文网首页
电影项目——电影详情

电影项目——电影详情

作者: 皮皮灬 | 来源:发表于2019-08-29 17:48 被阅读0次

    效果

    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;
    }
    
    

    相关文章

      网友评论

          本文标题:电影项目——电影详情

          本文链接:https://www.haomeiwen.com/subject/jaxwectx.html