效果
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;
}
网友评论