Bläddra i källkod

上传文件至 '微信小程序/douban/pages/detail'

13395952019 6 år sedan
förälder
incheckning
93443af8e9

+ 121 - 0
微信小程序/douban/pages/detail/detail.js

@@ -0,0 +1,121 @@
+// pages/detail/detail.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    var that=this;
+    var type = options.type;
+    var id = options.id;
+    that.setData({
+      type: type,
+      id: id
+    });
+    var url;//详情url
+    var dpurl;//短评的url
+    var count = 3;//短评显示条数
+    var start = 1;//短评开始
+    if(type =="movie"){
+      url = "https://m.douban.com/rexxar/api/v2/movie/" + id;
+      dpurl = 'https://m.douban.com/rexxar/api/v2/movie/' + id + '/interests?count=' + count + '&start=' + start;
+    } else if (type == "tvs" || type == "shows") {
+      url = 'https://m.douban.com/rexxar/api/v2/tv/' + id;
+      dpurl = 'https://m.douban.com/rexxar/api/v2/tv/' + id + '/interests?count=' + count + '&start=' + start;
+    }
+    //获取详情信息
+    wx.request({
+      url: url,
+      success:function(res){
+        var item= res.data;
+        var genres = item.genres;
+        genres=genres.join("/");
+        item.genres = genres;
+        var actors = item.actors;
+        var actorNames = [];
+        if (actors.length > 3) {
+          actors = actors.slice(0, 3);
+        }
+        for (var index = 0; index < actors.length; index++) {
+          var actor = actors[index];
+          actorNames.push(actor.name);
+        }
+        actorNames = actorNames.join("/");
+        var director = item.directors[0].name;
+        var authors = director + "(导演) /" + actorNames;
+        item.authors = authors;
+        that.setData({
+          item:item
+        })
+      }
+    })
+    //获取短评信息
+    wx.request({
+      url: dpurl,
+      success:function(res){
+        that.setData({
+          comments: res.data.interests
+        })
+      }
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    //页面加载时滚动到头部
+    wx.pageScrollTo({
+      scrollTop: 0,
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

+ 6 - 0
微信小程序/douban/pages/detail/detail.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "stars": "/components/stars/stars",
+    "onecomment": "/components/onecomment/onecomment"
+  }
+}

+ 34 - 0
微信小程序/douban/pages/detail/detail.wxml

@@ -0,0 +1,34 @@
+<view class="item-header">
+  <view class='item-title'>{{item.title}}{{item.original_title}}({{item.year}})</view>
+  <view class='item-detail'>
+    <view class='left-detail'>
+      <view class='item-rate'>
+        <stars rate="8" startsize="30" fontsize="30" fontcolor="#595959"></stars>
+        <text class='comment-persons'>{{item.rating.count}}人评价</text>
+      </view>
+      <view class='item-sub-detail'>
+        <view class='item-type'>{{item.durations[0]}}分钟 {{item.genres}}</view>
+        <view class='item-show'>{{item.pubdate[0]}}(中国大陆)上映{{item.countries[0]}}</view>
+        <view class='item-actors'>{{item.authors}}</view>
+      </view>
+    </view>
+    <view class='right-detail'>
+      <image src="{{item.cover.image.small.url}}"></image>
+    </view>
+  </view>
+</view>
+
+<view class='item-tags'>
+  <view class='item-tags-title'>豆瓣成员常用表标签</view>
+  <view class='item-tags-list'>
+    <text>黑色幽默</text><text>小人物</text><text>戏剧</text>
+    <text>中国大陆</text><text>剧情</text>
+  </view>
+</view>
+
+<view class='comment-list-group'>
+  <view class='comment-title'>短评(12345)</view>
+  <onecomment wx:for="{{comments}}" item="{{item}}"></onecomment>
+</view>
+ 
+<navigator class='more-comment' url='/pages/comment/comment?id={{id}}&type={{type}}&imgUrl={{item.cover.image.small.url}}&title={{item.title}}&rate={{item.rating.value}}'>查看更多短评</navigator>

+ 81 - 0
微信小程序/douban/pages/detail/detail.wxss

@@ -0,0 +1,81 @@
+.item-header{
+  padding: 60rpx 30rpx;
+}
+.item-header .item-title{
+  font-size: 50rpx;
+}
+
+.item-header .item-detail{
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20rpx;
+}
+
+.item-detail .left-detail{
+  flex: 1;
+  margin-right: 20rpx;
+}
+.left-detail .item-rate{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;/* 设置纵轴方向对其*/
+}
+.item-rate .comment-persons{
+  font-size: 20rpx;
+  color: #ccc;
+  margin-left: 20rpx;
+}
+.item-detail .right-detail{
+  width: 200rpx;
+  height: 300rpx;
+}
+.right-detail image{
+  width: 100%;
+  height: 100%;
+}
+.item-sub-detail{
+  margin-top: 40rpx;
+  font-size: 32rpx;
+}
+.item-sub-detail view{
+  margin-bottom: 10rpx;
+}
+
+.item-tags{
+  padding: 0 30rpx;
+}
+.item-tags .item-tags-title{
+  color: #b3b3b3;
+  font-size: 32rpx;
+  margin-bottom: 20rpx;
+}
+.item-tags-list{
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+.item-tags-list text{
+  padding: 10rpx 20rpx;
+  background: #f5f5f5;
+  font-size: 32rpx;
+  color: #353535;
+  text-align: center;
+  border-radius: 40rpx;
+  margin-right: 20rpx;
+  margin-bottom: 20rpx;
+}
+
+.comment-list-group{
+  padding: 60rpx 30rpx;
+}
+.comment-list-group .comment-title{
+  font-size: 36rpx;
+  color: #b3b3b3;
+}
+
+.more-comment{
+  text-align: center;
+  font-size: 36rpx;
+  color: #41be57;
+  margin-bottom: 60rpx;
+}