├── pages
├── index
│ ├── index.json
│ ├── index.js
│ ├── index.axml
│ └── index.acss
├── movies
│ ├── movie-detail
│ │ ├── movie-detail.json
│ │ ├── movie-detail.js
│ │ ├── class
│ │ │ └── Movie.js
│ │ ├── movie-detail.axml
│ │ └── movie-detail.acss
│ ├── movies.json
│ ├── more-movie
│ │ ├── more-movie.json
│ │ ├── .DS_Store
│ │ ├── more-movie.axml
│ │ ├── more-movie.acss
│ │ └── more-movie.js
│ ├── .DS_Store
│ ├── movie-grid
│ │ ├── movie-grid-template.acss
│ │ └── movie-grid-template.axml
│ ├── movie
│ │ ├── movie-template.acss
│ │ └── movie-template.axml
│ ├── stars
│ │ ├── stars-template.acss
│ │ └── stars-template.axml
│ ├── movies.acss
│ ├── movie-list
│ │ ├── movie-list-template.acss
│ │ └── movie-list-template.axml
│ ├── movies.axml
│ └── movies.js
└── .DS_Store
├── .DS_Store
├── images
├── .DS_Store
├── icon
│ ├── xx.png
│ ├── star.png
│ ├── .DS_Store
│ ├── none-star.png
│ └── arrow-right.png
├── more
│ ├── 1.png
│ ├── wave.png
│ ├── .DS_Store
│ └── title.png
├── avatar
│ ├── 1.png
│ └── .DS_Store
└── index
│ ├── .DS_Store
│ └── loading.gif
├── screenshots
├── 1.png
├── 2.png
├── 3.png
└── .DS_Store
├── app.js
├── app.acss
├── .tea
└── entryFiles-development
│ ├── index$.web.js
│ └── index$.worker.js
├── app.json
├── README.md
├── .eslintrc
└── utils
└── util.js
/pages/index/index.json:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/pages/movies/movie-detail/movie-detail.json:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/.DS_Store
--------------------------------------------------------------------------------
/pages/movies/movies.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "光与影"
3 | }
--------------------------------------------------------------------------------
/pages/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/pages/.DS_Store
--------------------------------------------------------------------------------
/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/images/.DS_Store
--------------------------------------------------------------------------------
/images/icon/xx.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/images/icon/xx.png
--------------------------------------------------------------------------------
/images/more/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/images/more/1.png
--------------------------------------------------------------------------------
/pages/movies/more-movie/more-movie.json:
--------------------------------------------------------------------------------
1 | {
2 | "enablePullDownRefresh": true
3 | }
--------------------------------------------------------------------------------
/screenshots/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/screenshots/1.png
--------------------------------------------------------------------------------
/screenshots/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/screenshots/2.png
--------------------------------------------------------------------------------
/screenshots/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/screenshots/3.png
--------------------------------------------------------------------------------
/images/avatar/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/images/avatar/1.png
--------------------------------------------------------------------------------
/images/icon/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/images/icon/star.png
--------------------------------------------------------------------------------
/images/more/wave.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/images/more/wave.png
--------------------------------------------------------------------------------
/images/avatar/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/images/avatar/.DS_Store
--------------------------------------------------------------------------------
/images/icon/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/images/icon/.DS_Store
--------------------------------------------------------------------------------
/images/index/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/images/index/.DS_Store
--------------------------------------------------------------------------------
/images/more/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/images/more/.DS_Store
--------------------------------------------------------------------------------
/images/more/title.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/images/more/title.png
--------------------------------------------------------------------------------
/pages/movies/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/pages/movies/.DS_Store
--------------------------------------------------------------------------------
/screenshots/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/screenshots/.DS_Store
--------------------------------------------------------------------------------
/images/icon/none-star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/images/icon/none-star.png
--------------------------------------------------------------------------------
/images/index/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/images/index/loading.gif
--------------------------------------------------------------------------------
/images/icon/arrow-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/images/icon/arrow-right.png
--------------------------------------------------------------------------------
/pages/movies/more-movie/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openfe-openfe/my/HEAD/pages/movies/more-movie/.DS_Store
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | App({
2 | globalData:{
3 | g_isPlayingMusic:false,
4 | g_currentMusicPostId:null,
5 | doubanBase: "https://api.douban.com",
6 | }
7 | })
--------------------------------------------------------------------------------
/app.acss:
--------------------------------------------------------------------------------
1 | text{
2 | font-family: MicroSoft Yahei;
3 | font-size: 24rpx;
4 | color: #666;
5 | }
6 |
7 | input{
8 | font-family: MicroSoft YaHei;
9 | border:0;
10 | background-color:transparent ;
11 | }
--------------------------------------------------------------------------------
/.tea/entryFiles-development/index$.web.js:
--------------------------------------------------------------------------------
1 |
2 | require('../../pages/index/index');
3 | require('../../pages/movies/movies');
4 | require('../../pages/movies/movie-detail/movie-detail');
5 | require('../../pages/movies/more-movie/more-movie');
6 |
--------------------------------------------------------------------------------
/.tea/entryFiles-development/index$.worker.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | require('../../app');
4 | require('../../pages/index/index');
5 | require('../../pages/movies/movies');
6 | require('../../pages/movies/movie-detail/movie-detail');
7 | require('../../pages/movies/more-movie/more-movie');
8 |
--------------------------------------------------------------------------------
/pages/movies/movie-grid/movie-grid-template.acss:
--------------------------------------------------------------------------------
1 | @import "../movie/movie-template.acss";
2 |
3 | /*scroll-view*/
4 | .single-view-container{
5 | float:left;
6 | margin-bottom: 40rpx;
7 | }
8 |
9 | .grid-container{
10 | height: 1300rpx;
11 | margin:40rpx 0 40rpx 6rpx;
12 | }
--------------------------------------------------------------------------------
/pages/movies/more-movie/more-movie.axml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 没有更多啦
6 |
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "pages": [
3 | "pages/index/index",
4 | "pages/movies/movies",
5 | "pages/movies/movie-detail/movie-detail",
6 | "pages/movies/more-movie/more-movie"
7 | ],
8 | "window": {
9 | "defaultTitle": "",
10 | "titleBarColor": "#314C6D",
11 | "backgroundColor":"#ffffff"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/pages/movies/movie/movie-template.acss:
--------------------------------------------------------------------------------
1 | @import "../stars/stars-template.acss";
2 |
3 | .movie-container {
4 | display: inline-flex;
5 | flex-direction: column;
6 | padding: 0 22rpx;
7 | }
8 |
9 | .movie-img {
10 | width: 200rpx;
11 | height: 270rpx;
12 | margin-bottom: 20rpx;
13 | }
14 |
15 | .movie-title{
16 | margin-bottom: 16rpx;
17 | font-size: 24rpx;
18 | }
19 |
--------------------------------------------------------------------------------
/pages/movies/movie-grid/movie-grid-template.axml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/pages/movies/movie/movie-template.axml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{title}}
6 |
7 |
8 |
--------------------------------------------------------------------------------
/pages/movies/stars/stars-template.acss:
--------------------------------------------------------------------------------
1 | .stars-container {
2 | display: flex;
3 | flex-direction: row;
4 | }
5 |
6 | .stars {
7 | display: flex;
8 | flex-direction: row;
9 | height: 17rpx;
10 | margin-right: 24rpx;
11 | margin-top: 6rpx;
12 | }
13 |
14 | .stars image {
15 | padding-left: 3rpx;
16 | height: 17rpx;
17 | width: 17rpx;
18 | }
19 |
20 | .star-score{
21 | color: #1f3463;
22 | }
23 |
--------------------------------------------------------------------------------
/pages/movies/stars/stars-template.axml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | {{score}}
10 |
11 |
--------------------------------------------------------------------------------
/pages/index/index.js:
--------------------------------------------------------------------------------
1 | // 获取应用实例
2 | const app = getApp()
3 |
4 | Page({
5 | data: {
6 | remind: '加载中',
7 | help_status: false,
8 | userid_focus: false,
9 | passwd_focus: false,
10 | userid: '',
11 | passwd: '',
12 | angle: 0
13 | },
14 | onLoad() {
15 | var _this = this
16 | setTimeout(function(){
17 | _this.setData({
18 | remind: ''
19 | });
20 | }, 1000);
21 | },
22 | bindViewTap() {
23 | my.navigateTo({
24 | url: '../movies/movies',
25 | });
26 |
27 | },
28 | });
29 |
--------------------------------------------------------------------------------
/pages/movies/more-movie/more-movie.acss:
--------------------------------------------------------------------------------
1 | @import "../movie-grid/movie-grid-template.acss";
2 | .fix_tip{
3 | position: fixed;
4 | bottom: 50rpx;
5 | left: 0;
6 | width: 100%;
7 | text-align: center;
8 | opacity: 0;
9 | transform: translate3d(0, 80rpx, 0);
10 | transition: all .5s cubic-bezier(0.19, 1, 0.22, 1)
11 | }
12 | .fix_tip.active{
13 | opacity: 1;
14 | transform: translate3d(0, 0, 0);
15 | }
16 | .fix_tip text{
17 | font-size: 9pt;
18 | line-height: 100%;
19 | padding: 10rpx 20rpx;
20 | border-radius: 10rpx;
21 | background: rgba(66,66,66,.6);
22 | color: #fff;
23 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## 支付宝小程序-豆瓣电影项目
2 |
3 | ### 效果图
4 | 
5 | 
6 | 
7 |
8 | ### 功能说明
9 | 接口访问来自豆瓣api,目前功能有
10 | 搜索功能
11 | 下拉刷新
12 | 上拉加载
13 | 首页启动增加css3动画
14 | ### 代码说明
15 | 部分采用es6语言，组件化，模块化开发。
16 | ### 安装说明
17 |
18 | ```
19 | git clone https://github.com/songhaoreact/my.git
20 |
21 | cd my
22 |
23 | 可以真机运行也可以ide运行
24 |
25 | 补充说明：
26 |
27 | screenshots文件夹不需要，只是github上的效果图。
28 |
29 | readme也是github上面的，都不需要。
30 |
31 | 运行前删掉screenshots和readme.md文件就行。
32 |
33 |
34 | 如果demo对你有帮助的话，帮忙点个star。
35 |
36 | ```
37 |
38 |
--------------------------------------------------------------------------------
/pages/index/index.axml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 进入找电影
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/pages/movies/movies.acss:
--------------------------------------------------------------------------------
1 | @import "./movie-list/movie-list-template.acss";
2 | @import "./movie-grid/movie-grid-template.acss";
3 |
4 | .container {
5 | background-color: #f2f2f2;
6 | }
7 |
8 | .search {
9 | background-color: #f2f2f2;
10 | height: 80rpx;
11 | width: 100%;
12 | display: flex;
13 | flex-direction: row;
14 | }
15 |
16 | .search-img {
17 | margin: auto 0 auto 20rpx;
18 | }
19 |
20 | .search input {
21 | height: 100%;
22 | width: 600rpx;
23 | margin-left: 20px;
24 | font-size: 28rpx;
25 | }
26 |
27 | .placeholder {
28 | font-size: 14px;
29 | color: #d1d1d1;
30 | margin-left: 20rpx;
31 | }
32 |
33 | .movies-template {
34 | margin-bottom: 30rpx;
35 | }
36 |
37 | .search-panel{
38 | position:absolute;
39 | top:80rpx;
40 | }
41 |
42 | .xx-img{
43 | height: 30rpx;
44 | width: 30rpx;
45 | margin:auto 0 auto 10rpx;
46 | }
47 |
--------------------------------------------------------------------------------
/pages/movies/movie-list/movie-list-template.acss:
--------------------------------------------------------------------------------
1 | @import "../movie/movie-template.acss";
2 |
3 | .movie-list-container {
4 | background-color: #fff;
5 | display: flex;
6 | flex-direction: column;
7 | }
8 |
9 | .inner-container{
10 | /* margin: 0 auto 20rpx; */
11 | }
12 |
13 | .movie-head {
14 | padding: 30rpx 20rpx 22rpx;
15 | /*display:flex;
16 | flex-direction: row;
17 | justify-content:space-between;*/
18 | }
19 |
20 | .slogan {
21 | font-size: 24rpx;
22 | }
23 |
24 | .more {
25 | float: right;
26 | }
27 |
28 | .more-text {
29 | vertical-align: middle;
30 | margin-right: 10rpx;
31 | color: #1f4ba5;
32 | }
33 |
34 | .more-img {
35 | width: 9rpx;
36 | height: 16rpx;
37 | vertical-align: middle;
38 | }
39 |
40 | .movies-container{
41 | display:flex;
42 | flex-direction: row;
43 | white-space: nowrap;
44 | }
45 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | // 请不需要修改 extends
3 | "extends": ["airbnb-base", "appx"],
4 |
5 | // 根据需要修改 rules，详见 http://eslint.org/docs/rules/
6 | // 推荐的编码风格 https://github.com/airbnb/javascript
7 | "rules": {
8 | "arrow-body-style": [0],
9 | "class-methods-use-this": [0],
10 | "consistent-return": [0],
11 | "generator-star-spacing": [0],
12 | "global-require": [0],
13 | "import/extensions": [0],
14 | "import/first": [0],
15 | "import/no-extraneous-dependencies": [0],
16 | "import/prefer-default-export": [0],
17 | "import/no-unresolved": [0],
18 | "linebreak-style": [0],
19 | "no-bitwise": [0],
20 | "no-cond-assign": [0],
21 | "no-console": [0],
22 | "no-else-return": [0],
23 | "no-nested-ternary": [0],
24 | "no-restricted-syntax": [0],
25 | "no-trailing-spaces": [0],
26 | "no-use-before-define": [0],
27 | "no-useless-escape": [0],
28 | "prefer-template": [0],
29 | "require-yield": [1]
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/pages/movies/movie-list/movie-list-template.axml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | {{categoryTitle}}
7 |
8 | 更多
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/pages/movies/movies.axml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/pages/movies/movie-detail/movie-detail.js:
--------------------------------------------------------------------------------
1 | import { Movie } from './class/Movie.js';
2 | var app = getApp();
3 | Page({
4 | data: {
5 | movie: {},
6 | visible: false
7 | },
8 | onLoad: function(options) {
9 | var movieId = options.id;
10 | var url = app.globalData.doubanBase +
11 | "/v2/movie/subject/" + movieId;
12 | var movie = new Movie(url);
13 | // var movieData = movie.getMovieData();
14 | // var that = this;
15 | // movie.getMovieData(function (movie) {
16 | // that.setData({
17 | // movie: movie
18 | // })
19 | // })
20 | //C#、Java、Python lambda
21 | movie.getMovieData((movie) => {
22 | this.setData({
23 | movie: movie
24 | });
25 | this.setData({
26 | visible: true
27 | });
28 | })
29 | },
30 |
31 | /*查看图片*/
32 | viewMoviePostImg: function(e) {
33 | var src = e.currentTarget.dataset.src;
34 | console.log(src)
35 | my.previewImage({
36 | current: src, // 当前显示图片的http链接
37 | urls: [src] // 需要预览的图片http链接列表
38 | })
39 | },
40 | })
41 |
--------------------------------------------------------------------------------
/utils/util.js:
--------------------------------------------------------------------------------
1 | function convertToStarsArray(stars) {
2 | var num = stars.toString().substring(0, 1);
3 | var array = [];
4 | for (var i = 1; i <= 5; i++) {
5 | if (i <= num) {
6 | array.push(1);
7 | }
8 | else {
9 | array.push(0);
10 | }
11 | }
12 | return array;
13 | }
14 |
15 | function http(url, callBack) {
16 | // console.log(callBack)
17 | my.httpRequest({
18 | url: url,
19 | method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
20 | header: {
21 | "Content-Type": "json"
22 | },
23 | success: function (res) {
24 | callBack(res.data)
25 | },
26 | fail: function (error) {
27 | // fail
28 | console.log(error)
29 | }
30 | })
31 | }
32 |
33 | function convertToCastString(casts) {
34 | var castsjoin = "";
35 | for (var idx in casts) {
36 | castsjoin = castsjoin + casts[idx].name + " / ";
37 | }
38 | console.log(castsjoin)
39 | return castsjoin.substring(0, castsjoin.length - 2);
40 | }
41 |
42 | function convertToCastInfos(casts) {
43 | var castsArray = []
44 | for (var idx in casts) {
45 | var cast = {
46 | img: casts[idx].avatars ? casts[idx].avatars.large : "",
47 | name: casts[idx].name
48 | }
49 | castsArray.push(cast);
50 | }
51 | return castsArray;
52 | }
53 |
54 | module.exports = {
55 | convertToStarsArray: convertToStarsArray,
56 | http: http,
57 | convertToCastString:convertToCastString,
58 | convertToCastInfos:convertToCastInfos
59 | }
--------------------------------------------------------------------------------
/pages/movies/movie-detail/class/Movie.js:
--------------------------------------------------------------------------------
1 | var util = require('../../../../utils/util.js')
2 | class Movie {
3 | constructor(url) {
4 | this.url = url;
5 | }
6 |
7 | getMovieData(cb) {
8 | this.cb = cb;
9 | util.http(this.url, this.processDoubanData.bind(this));
10 | }
11 |
12 | processDoubanData(data) {
13 | console.log(data)
14 | if (!data) {
15 | return;
16 | }
17 | var director = {
18 | avatar: "",
19 | name: "",
20 | id: ""
21 | }
22 | if (data.directors[0] != null) {
23 | if (data.directors[0].avatars != null) {
24 | director.avatar = data.directors[0].avatars.large
25 |
26 | }
27 | director.name = data.directors[0].name;
28 | director.id = data.directors[0].id;
29 | }
30 | var movie = {
31 | movieImg: data.images ? data.images.large : "",
32 | country: data.countries[0],
33 | title: data.title,
34 | originalTitle: data.original_title,
35 | wishCount: data.wish_count,
36 | commentCount: data.comments_count,
37 | year: data.year,
38 | generes: data.genres.join("、"),
39 | stars: util.convertToStarsArray(data.rating.stars),
40 | score: data.rating.average,
41 | director: director,
42 | casts: util.convertToCastString(data.casts),
43 | castsInfo: util.convertToCastInfos(data.casts),
44 | summary: data.summary
45 | }
46 | this.cb(movie);
47 | }
48 | }
49 |
50 | export {Movie}
--------------------------------------------------------------------------------
/pages/movies/movie-detail/movie-detail.axml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{movie.title}}
6 | {{movie.country + " · "+movie.year}}
7 |
8 |
9 | {{movie.wishCount}}
10 |
11 |
12 | 人喜欢
13 |
14 |
15 | {{movie.commentCount}}
16 |
17 |
18 | 条评论
19 |
20 |
21 |
22 |
23 |
24 |
25 | {{movie.originalTitle}}
26 |
27 |
28 | 评分
29 |
30 |
31 |
32 | 导演
33 | {{movie.director.name}}
34 |
35 |
36 | 影人
37 | {{movie.casts}}
38 |
39 |
40 | 类型
41 | {{movie.generes}}
42 |
43 |
44 |
45 |
46 | 剧情简介
47 | {{movie.summary}}
48 |
49 |
50 |
51 | 影人
52 |
53 |
54 |
55 |
56 | {{item.name}}
57 |
58 |
59 |
60 |
61 |
--------------------------------------------------------------------------------
/pages/movies/movie-detail/movie-detail.acss:
--------------------------------------------------------------------------------
1 | @import "../stars/stars-template.acss";
2 |
3 | .container{
4 | display:flex;
5 | flex-direction: column;
6 | }
7 |
8 | .head-img{
9 | width:100%;
10 | height: 320rpx;
11 | -webkit-filter:blur(20px);
12 | }
13 |
14 | .head-img-hover{
15 | width: 100%;
16 | height: 320rpx;
17 | position:absolute;
18 | top:0;
19 | left:0;
20 | display:flex;
21 | flex-direction: column;
22 | }
23 |
24 | .main-title{
25 | font-size: 19px;
26 | color:#fff;
27 | font-weight:bold;
28 | margin-top: 50rpx;
29 | margin-left: 40rpx;
30 | letter-spacing: 2px;
31 | }
32 |
33 | .sub-title{
34 | font-size: 28rpx;
35 | color:#fff;
36 | margin-left: 40rpx;
37 | margin-top: 30rpx;
38 | }
39 |
40 | .like{
41 | display:flex;
42 | flex-direction: row;
43 | margin-top: 30rpx;
44 | margin-left: 40rpx;
45 | }
46 |
47 | .highlight-font{
48 | color: #f21146;
49 | font-size:22rpx;
50 | margin-right: 10rpx;
51 | }
52 |
53 | .plain-font{
54 | color: #666;
55 | font-size:22rpx;
56 | margin-right: 30rpx;
57 | }
58 |
59 |
60 | .movie-img{
61 | height:238rpx;
62 | width: 175rpx;
63 | position: absolute;
64 | top:160rpx;
65 | right: 30rpx;
66 | }
67 |
68 | .summary{
69 | margin-left:40rpx;
70 | margin-top: 40rpx;
71 | color: #777777;
72 | }
73 |
74 | .original-title{
75 | color: #1f3463;
76 | font-size: 24rpx;
77 | font-weight: bold;
78 | margin-bottom: 40rpx;
79 | }
80 |
81 | .flex-row{
82 | display:flex;
83 | flex-direction: row;
84 | margin-bottom: 10rpx;
85 | }
86 |
87 | .mark{
88 | margin-right: 30rpx;
89 | white-space:nowrap;
90 | color: #999999;
91 | }
92 |
93 | .hr{
94 | margin-top:45rpx;
95 | height:1px;
96 | width: 100%;
97 | background-color: #d9d9d9;
98 | }
99 |
100 | .synopsis{
101 | margin-left:40rpx;
102 | display:flex;
103 | flex-direction: column;
104 | margin-top: 50rpx;
105 | }
106 |
107 | .synopsis-font{
108 | color:#999;
109 | }
110 |
111 | .summary-content{
112 | margin-top: 20rpx;
113 | margin-right: 40rpx;
114 | line-height:40rpx;
115 | letter-spacing: 1px;
116 | }
117 |
118 | .cast{
119 | margin-left:40rpx;
120 | display:flex;
121 | flex-direction: column;
122 | margin-top:50rpx;
123 | }
124 |
125 | .cast-font{
126 | color: #999;
127 | margin-bottom: 40rpx;
128 | }
129 |
130 | .cast-container{
131 | display:inline-flex;
132 | flex-direction: column;
133 | margin-bottom: 50rpx;
134 | margin-right: 40rpx;
135 | width: 170rpx;
136 | text-align:center;
137 | white-space: normal;
138 | }
139 |
140 | .cast-imgs{
141 | white-space: nowrap;
142 | }
143 |
144 | .cast-img{
145 | width: 170rpx;
146 | height: 210rpx;
147 | }
148 | .cast-name{
149 | margin: 10rpx auto 0;
150 | }
151 |
152 | .hidden{
153 | opacity: 0;
154 | }
155 |
156 | .visible{
157 | opacity: 1;
158 | transition: opacity 1s ease-in-out;
159 | }
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
--------------------------------------------------------------------------------
/pages/movies/movies.js:
--------------------------------------------------------------------------------
1 | var util = require('../../utils/util.js')
2 | var app = getApp();
3 | Page({
4 | // RESTFul API JSON
5 | // SOAP XML
6 | //粒度 不是 力度
7 | data: {
8 | inTheaters: {},
9 | comingSoon: {},
10 | top250: {},
11 | searchResult: {},
12 | containerShow: true,
13 | searchPanelShow: false,
14 | },
15 | onShareAppMessage: function () {
16 | return {
17 | title: '光与影',
18 | desc: '进入搜索电影吧',
19 | path: '/pages/movies/movies'
20 | }
21 | },
22 | onLoad: function (event) {
23 | var inTheatersUrl = app.globalData.doubanBase +
24 | "/v2/movie/in_theaters" + "?start=0&count=6";
25 | var comingSoonUrl = app.globalData.doubanBase +
26 | "/v2/movie/coming_soon" + "?start=0&count=6";
27 | var top250Url = app.globalData.doubanBase +
28 | "/v2/movie/top250" + "?start=0&count=6";
29 |
30 | this.getMovieListData(inTheatersUrl, "inTheaters", "正在热映");
31 | this.getMovieListData(comingSoonUrl, "comingSoon", "即将上映");
32 | this.getMovieListData(top250Url, "top250", "豆瓣Top250");
33 | my.setNavigationBar({
34 | title: '光与影',
35 | color:"#fff",
36 | backgroundColor: '#314C6D'
37 | });
38 | },
39 |
40 | onMoreTap: function (event) {
41 | var category = event.currentTarget.dataset.category;
42 | my.navigateTo({
43 | url: "more-movie/more-movie?category=" + category
44 | })
45 | },
46 |
47 | onMovieTap:function(event){
48 | var movieId = event.currentTarget.dataset.movieId;
49 | // console.log(event.currentTarget)
50 | my.navigateTo({
51 | url: "movie-detail/movie-detail?id="+movieId
52 | })
53 | },
54 |
55 | getMovieListData: function (url, settedKey, categoryTitle) {
56 | my.showNavigationBarLoading()
57 | var that = this;
58 | my.httpRequest({
59 | url: url,
60 | method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
61 | header: {
62 | "Content-Type": "json"
63 | },
64 | success: function (res) {
65 | that.processDoubanData(res.data, settedKey, categoryTitle)
66 | },
67 | fail: function (error) {
68 | // fail
69 | console.log(error)
70 | }
71 | })
72 | },
73 |
74 | onCancelImgTap: function (event) {
75 | this.setData({
76 | containerShow: true,
77 | searchPanelShow: false,
78 | searchResult:{}
79 | }
80 | )
81 | },
82 |
83 | onBindFocus: function (event) {
84 | this.setData({
85 | containerShow: false,
86 | searchPanelShow: true
87 | })
88 | },
89 |
90 | onBindBlur: function (event) {
91 | var text = event.detail.value;
92 | var searchUrl = app.globalData.doubanBase + "/v2/movie/search?q=" + text;
93 | this.getMovieListData(searchUrl, "searchResult", "");
94 | },
95 |
96 | processDoubanData: function (moviesDouban, settedKey, categoryTitle) {
97 | var movies = [];
98 | for (var idx in moviesDouban.subjects) {
99 | var subject = moviesDouban.subjects[idx];
100 | var title = subject.title;
101 | if (title.length >= 6) {
102 | title = title.substring(0, 6) + "...";
103 | }
104 | // [1,1,1,1,1] [1,1,1,0,0]
105 | var temp = {
106 | stars: util.convertToStarsArray(subject.rating.stars),
107 | title: title,
108 | average: subject.rating.average,
109 | coverageUrl: subject.images.large,
110 | movieId: subject.id
111 | }
112 | movies.push(temp)
113 | }
114 | var readyData = {};
115 | readyData[settedKey] = {
116 | categoryTitle: categoryTitle,
117 | movies: movies
118 | }
119 | this.setData(readyData);
120 | console.log(readyData)
121 | my.hideNavigationBarLoading();
122 | }
123 | })
--------------------------------------------------------------------------------
/pages/index/index.acss:
--------------------------------------------------------------------------------
1 | /**login.acss**/
2 | page{
3 | background: -webkit-gradient(linear, left top, left bottom, from(rgba(244,244,244,0)), color-stop(0.1, #f4f4f4), to(#f4f4f4));
4 | }
5 | .container {
6 | background: #314C6D;
7 | align-items: stretch;
8 | padding: 0;
9 | height: 100%;
10 | overflow: hidden;
11 | }
12 | .content{
13 | flex: 1;
14 | display: flex;
15 | position: relative;
16 | z-index: 10;
17 | flex-direction: column;
18 | align-items: stretch;
19 | justify-content: center;
20 | width: 100%;
21 | height: 100%;
22 | padding-bottom: 550rpx;
23 | background: -webkit-gradient(linear, left top, left bottom, from(rgba(244,244,244,0)), color-stop(0.1, #f4f4f4), to(#f4f4f4));
24 | opacity: 0;
25 | transform: translate3d(0,100%,0);
26 | animation: rise 3s cubic-bezier(0.19, 1, 0.22, 1) .25s forwards;
27 | }
28 | @keyframes rise{
29 | 0% {opacity: 0;transform: translate3d(0,100%,0);}
30 | 50% {opacity: 1;}
31 | 100% {opacity: 1;transform: translate3d(0,450rpx,0);}
32 | }
33 | .title{
34 | position: absolute;
35 | top: 30rpx;
36 | left: 50%;
37 | width: 600rpx;
38 | height: 200rpx;
39 | margin-left: -300rpx;
40 | opacity: 0;
41 | animation: show 2.5s cubic-bezier(0.19, 1, 0.22, 1) .5s forwards;
42 | }
43 |
44 | @keyframes show{
45 | from {opacity: 0; transform: translate3d(-200rpx,0,0); }
46 | to {opacity: 1; transform: translate3d(0,0,0); }
47 | }
48 | .remind-box {
49 | flex: 1;
50 | display: flex;
51 | flex-direction: column;
52 | align-items: center;
53 | justify-content: center;
54 | padding-bottom: 300rpx;
55 | }
56 | .remind-img {
57 | width: 250rpx;
58 | height: 250rpx;
59 | padding-top: 150rpx;
60 | }
61 | .hd {
62 | position: absolute;
63 | top: 0;
64 | left: 50%;
65 | width: 1000rpx;
66 | margin-left: -500rpx;
67 | height: 200rpx;
68 | transition: all .35s ease;
69 | }
70 | .logo {
71 | position: absolute;
72 | z-index: 2;
73 | left: 50%;
74 | bottom: 200rpx;
75 | width: 160rpx;
76 | height: 160rpx;
77 | margin-left: -80rpx;
78 | border-radius: 160rpx;
79 | animation: sway 10s ease-in-out infinite;
80 | opacity: .95;
81 | }
82 | @keyframes sway{
83 | 0% {transform: translate3d(0,20rpx,0) rotate(-15deg); }
84 | 17% {transform: translate3d(0,0rpx,0) rotate(25deg); }
85 | 34% {transform: translate3d(0,-20rpx,0) rotate(-20deg); }
86 | 50% {transform: translate3d(0,-10rpx,0) rotate(15deg); }
87 | 67% {transform: translate3d(0,10rpx,0) rotate(-25deg); }
88 | 84% {transform: translate3d(0,15rpx,0) rotate(15deg); }
89 | 100% {transform: translate3d(0,20rpx,0) rotate(-15deg); }
90 | }
91 | .wave {
92 | position: absolute;
93 | z-index: 3;
94 | right: 0;
95 | bottom: 0;
96 | opacity: 0.725;
97 | height: 260rpx;
98 | width: 2250rpx;
99 | animation: wave 10s linear infinite;
100 | }
101 | .wave-bg {
102 | z-index: 1;
103 | animation: wave-bg 10.25s linear infinite;
104 | }
105 | @keyframes wave{
106 | from {transform: translate3d(125rpx,0,0);}
107 | to {transform: translate3d(1125rpx,0,0);}
108 | }
109 | @keyframes wave-bg{
110 | from {transform: translate3d(375rpx,0,0);}
111 | to {transform: translate3d(1375rpx,0,0);}
112 | }
113 |
114 | .bd {
115 | position: relative;
116 | flex: 1;
117 | display: flex;
118 | flex-direction: column;
119 | align-items: stretch;
120 | animation: bd-rise 2s cubic-bezier(0.23,1,0.32,1) .75s forwards;
121 | opacity: 0;
122 | padding-top: 200rpx;
123 | }
124 | @keyframes bd-rise{
125 | from {opacity: 0; transform: translate3d(0,60rpx,0); }
126 | to {opacity: 1; transform: translate3d(0,0,0); }
127 | }
128 |
129 | .confirm-btn {
130 | font-size: 13pt;
131 | line-height: 85rpx;
132 | height: 85rpx;
133 | background: #314C6D;
134 | color: #fff;
135 | text-align: center;
136 | border-radius: 5px;
137 | margin: 50rpx 3%;
138 | }
139 | .confirm-text{
140 | color: #fff;
141 | }
142 | .confirm-btn:active {
143 | opacity: .8;
144 | }
145 |
146 |
--------------------------------------------------------------------------------
/pages/movies/more-movie/more-movie.js:
--------------------------------------------------------------------------------
1 | // pages/movies/more-movie/more-movie.js
2 | var app = getApp()
3 | var util = require('../../../utils/util.js')
4 | Page({
5 | data: {
6 | movies: [],
7 | navigateTitle: "",
8 | requestUrl: "",
9 | totalCount: 0,
10 | isEmpty: true,
11 | hiddenLoading:false,
12 | disabledRemind:false
13 | },
14 | onLoad: function (options) {
15 | var category = options.category;
16 | this.data.navigateTitle = category;
17 | var dataUrl = "";
18 | switch (category) {
19 | case "正在热映":
20 | dataUrl = app.globalData.doubanBase +
21 | "/v2/movie/in_theaters";
22 | break;
23 | case "即将上映":
24 | dataUrl = app.globalData.doubanBase +
25 | "/v2/movie/coming_soon";
26 | break;
27 | case "豆瓣Top250":
28 | dataUrl = app.globalData.doubanBase + "/v2/movie/top250";
29 | break;
30 | }
31 | my.setNavigationBar({
32 | title: category,
33 | color:"#fff",
34 | backgroundColor: '#314C6D'
35 | })
36 | this.data.requestUrl = dataUrl;
37 | console.log(this.data.requestUrl)
38 | // util.http(dataUrl, this.processDoubanData)
39 | var that = this
40 | var url = dataUrl
41 | my.httpRequest({
42 | url: url,
43 | method: 'GET',
44 | header: {
45 | "Content-Type": "json"
46 | },
47 | success: function (res) {
48 | that.processDoubanData(res.data)
49 | // console.log(res.data)
50 | },
51 | fail: function (error) {
52 | // fail
53 | console.log(error)
54 | }
55 | })
56 | },
57 | onPullDownRefresh: function (event) {
58 | var refreshUrl = this.data.requestUrl +
59 | "?star=0&count=20"
60 | this.data.movies = {};
61 | this.data.isEmpty = true;
62 | this.data.totalCount = 0;
63 | // console.log(refreshUrl)
64 | util.http(refreshUrl, this.processDoubanData);
65 | my.showNavigationBarLoading();
66 | },
67 | onReachBottom: function (event) {
68 | // 上滑加载
69 | var nextUrl = this.data.requestUrl +
70 | "?start=" + this.data.totalCount + "&count=20";
71 | console.log(123)
72 | var that=this
73 | my.httpRequest({
74 | url: nextUrl,
75 | method: 'GET',
76 | header: {
77 | "Content-Type": "json"
78 | },
79 | success: function (res) {
80 | that.processDoubanData(res.data)
81 | // console.log(res.data)
82 | },
83 | fail: function (error) {
84 | // fail
85 | console.log(error)
86 | }
87 | })
88 | my.showNavigationBarLoading()
89 | },
90 | processDoubanData: function (moviesDouban) {
91 | var movies = [];
92 | //没有更多啦
93 | if(moviesDouban.subjects.length<=0){
94 | var _this = this;
95 | if(!_this.data.disabledRemind){
96 | _this.setData({
97 | disabledRemind: true
98 | });
99 | setTimeout(function(){
100 | _this.setData({
101 | disabledRemind: false
102 | });
103 | }, 2000);
104 | }
105 | }
106 | for (var idx in moviesDouban.subjects) {
107 | var subject = moviesDouban.subjects[idx];
108 | var title = subject.title;
109 | if (title.length >= 6) {
110 | title = title.substring(0, 6) + "...";
111 | }
112 | // [1,1,1,1,1] [1,1,1,0,0]
113 | var temp = {
114 | stars: util.convertToStarsArray(subject.rating.stars),
115 | title: title,
116 | average: subject.rating.average,
117 | coverageUrl: subject.images.large,
118 | movieId: subject.id
119 | }
120 | movies.push(temp)
121 | }
122 | var totalMovies = {}
123 |
124 | //如果要绑定新加载的数据，那么需要同旧有的数据合并在一起
125 | if (!this.data.isEmpty) {
126 | totalMovies = this.data.movies.concat(movies);
127 | }
128 | else {
129 | totalMovies = movies;
130 | this.data.isEmpty = false;
131 | }
132 | this.setData({
133 | movies: totalMovies
134 | });
135 | this.data.totalCount += 20;
136 | my.hideNavigationBarLoading();
137 | my.stopPullDownRefresh()
138 | this.setData({
139 | hiddenLoading:true
140 | })
141 | },
142 |
143 | onReady: function (event) {
144 | my.setNavigationBar({
145 | title: this.data.navigateTitle
146 | })
147 | },
148 |
149 | onMovieTap: function (event) {
150 | var movieId = event.currentTarget.dataset.movieid;
151 | my.navigateTo({
152 | url: '../movie-detail/movie-detail?id=' + movieId
153 | })
154 | },
155 | })
--------------------------------------------------------------------------------