美文网首页web前端开发
May 13，2023【微信小程序】电影购票

May 13，2023【微信小程序】电影购票

作者: Du1in9 | 来源:发表于2023-05-12 14:46 被阅读0次

一、根目录

  • app.js
App({
  globalData: {     //全局变量
    userInfo: null
  }
})
  • app.json
{
  "pages": [                                       
    "pages/home/home",
    "pages/movie/movie",
    "pages/cinema/cinema",
    "pages/find/find",
    "pages/profile/profile"
  ],
  "window": {
    "backgroundColor": "#030000",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#333333",
    "navigationBarTitleText": "万达电影",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "backgroundColor": "#333",
    "color": "#fff",
    "selectedColor": "#F73171",
    "list": [{
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "./assets/images/tabbar/home_n_icon.png",
        "selectedIconPath": "./assets/images/tabbar/home_a_icon.png"
      },
      {
        "pagePath": "pages/movie/movie",
        "text": "电影",
        "iconPath": "./assets/images/tabbar/movie_n_icon.png",
        "selectedIconPath": "./assets/images/tabbar/movie_a_icon.png"
      },
      {
        "pagePath": "pages/cinema/cinema",
        "text": "电影院",
        "iconPath": "./assets/images/tabbar/cinema_n_icon.png",
        "selectedIconPath": "./assets/images/tabbar/cinema_a_icon.png"
      },
      {
        "pagePath": "pages/find/find",
        "text": "发现",
        "iconPath": "./assets/images/tabbar/find_n_icon.png",
        "selectedIconPath": "./assets/images/tabbar/find_a_icon.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的",
        "iconPath": "./assets/images/tabbar/mine_n_icon.png",
        "selectedIconPath": "./assets/images/tabbar/mine_a_icon.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
  • app.wxss
page {
  background-color: #030000;
  color: #ffffff;
  height: 100%;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;       /* 隐藏滚动条 */
}
  • project.config.json
{
    "description": "项目配置文件",
    "packOptions": {
        "ignore": [],
        "include": []
    },
    "setting": {
        "urlCheck": true,
        "es6": true,
        "enhance": false,
        "postcss": true,
        "preloadBackgroundData": false,
        "minified": true,
        "newFeature": false,
        "coverView": true,
        "nodeModules": false,
        "autoAudits": false,
        "showShadowRootInWxmlPanel": true,
        "scopeDataCheck": false,
        "uglifyFileName": false,
        "checkInvalidKey": true,
        "checkSiteMap": false,
        "uploadWithSourceMap": true,
        "compileHotReLoad": false,
        "useMultiFrameRuntime": true,
        "useApiHook": true,
        "useApiHostProcess": false,
        "babelSetting": {
            "ignore": [],
            "disablePlugins": [],
            "outputPath": ""
        },
        "enableEngineNative": false,
        "bundle": false,
        "useIsolateContext": true,
        "useCompilerModule": true,
        "userConfirmedUseCompilerModuleSwitch": false,
        "userConfirmedBundleSwitch": false,
        "packNpmManually": false,
        "packNpmRelationList": [],
        "minifyWXSS": true
    },
    "compileType": "miniprogram",
    "libVersion": "2.14.0",
    "appid": "wxa5988aab181e5dec",
    "projectname": "supermovie",
    "simulatorType": "wechat",
    "simulatorPluginLibVersion": {},
    "condition": {
        "miniprogram": {
            "list": [
                {
                    "name": "pages/movie/movie",
                    "pathName": "pages/movie/movie",
                    "query": "",
                    "scene": null
                },
                {
                    "name": "pages/cinema/cinema",
                    "pathName": "pages/cinema/cinema",
                    "query": "",
                    "scene": null
                },
                {
                    "name": "pages/find/find",
                    "pathName": "pages/find/find",
                    "query": "",
                    "scene": null
                },
                {
                    "name": "pages/profile/profile",
                    "pathName": "pages/profile/profile",
                    "query": "",
                    "scene": null
                }
            ]
        }
    },
    "editorSetting": {
        "tabIndent": "insertSpaces",
        "tabSize": 4
    }
}

二、pages 目录

1、cinema 二级目录

  • cinema.wxml
<view class="cinema-container-view">
  <!-- 头部 -->
  <w-header-component model:header-items="{{headerItems}}"></w-header-component>
  <!-- 导航栏 -->
  <w-nav-component model:nav-items="{{navItems}}"></w-nav-component>
  <!-- 广告图 -->
  <view class="banner-container-view">
    <image src="../../assets/images/banner/ad_1.png" class="banner-image"></image>
  </view>
  <!-- 电影卡片 -->
  <w-card-component model:movie-card-data="{{movieCardData}}"></w-card-component>
</view>
  • cinema.wxss
.banner-container-view {
  height: 220rpx;
  margin: 20rpx ;
}
.banner-container-view .banner-image{
  width: 100%;
  height: 100%;
}
  • cinema.js
Page({

  /* 页面的初始数据*/
  data: {
    currentIndex: 0,
    headerItems: ['电影院'],
    navItems:[
      {title:'区域',imageUrl: '../../assets/images/searchbar/option_icon.png'},
      {title:'品牌',imageUrl: '../../assets/images/searchbar/option_icon.png'},
      {title:'距离',imageUrl: '../../assets/images/searchbar/option_icon.png'},
      {title:'筛选',imageUrl: '../../assets/images/searchbar/option_icon.png'}
    ],
    movieCardData: [
      {
        movieTitle: "人气影院",
        addresTitle: "嘉年华国际影城(北路店)",
        popTitle: "人气5000",
        addresDetail: "北京市昌平区",
        shopTitle1: "零食",
        shopTitle2: "MAX厅",
        shopTitle3: "中国剧目",
        shopTitle4: "停车场",
        distanse: "1.1km",
        discount1: "开通会员8折购票",
        discount2: "组团购票优惠8折起",
        price: "￥19.9起",
        gloryLableImageUrl: "../../assets/images/movie-card/fire_icon.png",
        proLableImageUrl: "../../assets/images/movie-card/rank_icon.png"
      },
      {
        movieTitle: "知名影院",
        addresTitle: "万达国际影城(北路店)",
        popTitle: "人气6000",
        addresDetail: "北京市昌平区",
        shopTitle1: "美甲",
        shopTitle2: "MAX厅",
        shopTitle3: "中国剧目",
        shopTitle4: "停车场",
        distanse: "2.8km",
        discount1: "开通会员8折购票",
        discount2: "组团购票优惠8折起",
        price: "￥39.9起",
        gloryLableImageUrl: "../../assets/images/movie-card/fire_icon.png",
        proLableImageUrl: "../../assets/images/movie-card/rank_icon.png"
      },
      {
        movieTitle: "火热影院",
        addresTitle: "嘉年华国际影城(北路店)",
        popTitle: "人气9890",
        addresDetail: "北京市昌平区",
        shopTitle1: "洗浴",
        shopTitle2: "午夜DJ",
        shopTitle3: "中国剧目",
        shopTitle4: "停车场",
        distanse: "3.2km",
        discount1: "开通会员8折购票",
        discount2: "组团购票优惠8折起",
        price: "￥29.99起",
        gloryLableImageUrl: "../../assets/images/movie-card/fire_icon.png",
        proLableImageUrl: "../../assets/images/movie-card/rank_icon.png"
      },
      {
        movieTitle: "人气影院",
        addresTitle: "嘉年华国际影城(北路店)",
        popTitle: "人气5000",
        addresDetail: "北京市昌平区",
        shopTitle1: "零食",
        shopTitle2: "MAX厅",
        shopTitle3: "中国剧目",
        shopTitle4: "停车场",
        distanse: "1.1km",
        discount1: "开通会员8折购票",
        discount2: "组团购票优惠8折起",
        price: "￥19.99起",
        gloryLableImageUrl: "../../assets/images/movie-card/fire_icon.png",
        proLableImageUrl: "../../assets/images/movie-card/rank_icon.png"
      },
      {
        movieTitle: "人气影院",
        addresTitle: "嘉年华国际影城(北路店)",
        popTitle: "人气5000",
        addresDetail: "北京市昌平区",
        shopTitle1: "零食",
        shopTitle2: "MAX厅",
        shopTitle3: "中国剧目",
        shopTitle4: "停车场",
        distanse: "1.1km",
        discount1: "开通会员8折购票",
        discount2: "组团购票优惠8折起",
        price: "￥19.99起",
        gloryLableImageUrl: "../../assets/images/movie-card/fire_icon.png",
        proLableImageUrl: "../../assets/images/movie-card/rank_icon.png"
      },
      {
        movieTitle: "人气影院",
        addresTitle: "嘉年华国际影城(北路店)",
        popTitle: "人气5000",
        addresDetail: "北京市昌平区",
        shopTitle1: "零食",
        shopTitle2: "MAX厅",
        shopTitle3: "中国剧目",
        shopTitle4: "停车场",
        distanse: "1.1km",
        discount1: "开通会员8折购票",
        discount2: "组团购票优惠8折起",
        price: "￥19.99起",
        gloryLableImageUrl: "../../assets/images/movie-card/fire_icon.png",
        proLableImageUrl: "../../assets/images/movie-card/rank_icon.png"
      }
    ]
  },

  /* 生命周期函数--监听页面加载*/
  onLoad: function (options) {},

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

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

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

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

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

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

  /* 用户点击右上角分享*/
  onShareAppMessage: function () {}
})
  • cinema.json
Page({
  data: {
    currentIndex: 0,
    headerItems: ['电影院'],
    navItems:[
      {title:'区域',imageUrl: '../../assets/images/searchbar/option_icon.png'},
      {title:'品牌',imageUrl: '../../assets/images/searchbar/option_icon.png'},
      {title:'距离',imageUrl: '../../assets/images/searchbar/option_icon.png'},
      {title:'筛选',imageUrl: '../../assets/images/searchbar/option_icon.png'}
    ],
    movieCardData: [
      {
        movieTitle: "人气影院",
        addresTitle: "嘉年华国际影城(北路店)",
        popTitle: "人气5000",
        addresDetail: "北京市昌平区",
        shopTitle1: "零食",
        shopTitle2: "MAX厅",
        shopTitle3: "中国剧目",
        shopTitle4: "停车场",
        distanse: "1.1km",
        discount1: "开通会员8折购票",
        discount2: "组团购票优惠8折起",
        price: "￥19.9起",
        gloryLableImageUrl: "../../assets/images/movie-card/fire_icon.png",
        proLableImageUrl: "../../assets/images/movie-card/rank_icon.png"
      },
      {
        movieTitle: "知名影院",
        addresTitle: "万达国际影城(北路店)",
        popTitle: "人气6000",
        addresDetail: "北京市昌平区",
        shopTitle1: "美甲",
        shopTitle2: "MAX厅",
        shopTitle3: "中国剧目",
        shopTitle4: "停车场",
        distanse: "2.8km",
        discount1: "开通会员8折购票",
        discount2: "组团购票优惠8折起",
        price: "￥39.9起",
        gloryLableImageUrl: "../../assets/images/movie-card/fire_icon.png",
        proLableImageUrl: "../../assets/images/movie-card/rank_icon.png"
      },
      {
        movieTitle: "火热影院",
        addresTitle: "嘉年华国际影城(北路店)",
        popTitle: "人气9890",
        addresDetail: "北京市昌平区",
        shopTitle1: "洗浴",
        shopTitle2: "午夜DJ",
        shopTitle3: "中国剧目",
        shopTitle4: "停车场",
        distanse: "3.2km",
        discount1: "开通会员8折购票",
        discount2: "组团购票优惠8折起",
        price: "￥29.99起",
        gloryLableImageUrl: "../../assets/images/movie-card/fire_icon.png",
        proLableImageUrl: "../../assets/images/movie-card/rank_icon.png"
      },
      {
        movieTitle: "人气影院",
        addresTitle: "嘉年华国际影城(北路店)",
        popTitle: "人气5000",
        addresDetail: "北京市昌平区",
        shopTitle1: "零食",
        shopTitle2: "MAX厅",
        shopTitle3: "中国剧目",
        shopTitle4: "停车场",
        distanse: "1.1km",
        discount1: "开通会员8折购票",
        discount2: "组团购票优惠8折起",
        price: "￥19.99起",
        gloryLableImageUrl: "../../assets/images/movie-card/fire_icon.png",
        proLableImageUrl: "../../assets/images/movie-card/rank_icon.png"
      },
      {
        movieTitle: "人气影院",
        addresTitle: "嘉年华国际影城(北路店)",
        popTitle: "人气5000",
        addresDetail: "北京市昌平区",
        shopTitle1: "零食",
        shopTitle2: "MAX厅",
        shopTitle3: "中国剧目",
        shopTitle4: "停车场",
        distanse: "1.1km",
        discount1: "开通会员8折购票",
        discount2: "组团购票优惠8折起",
        price: "￥19.99起",
        gloryLableImageUrl: "../../assets/images/movie-card/fire_icon.png",
        proLableImageUrl: "../../assets/images/movie-card/rank_icon.png"
      },
      {
        movieTitle: "人气影院",
        addresTitle: "嘉年华国际影城(北路店)",
        popTitle: "人气5000",
        addresDetail: "北京市昌平区",
        shopTitle1: "零食",
        shopTitle2: "MAX厅",
        shopTitle3: "中国剧目",
        shopTitle4: "停车场",
        distanse: "1.1km",
        discount1: "开通会员8折购票",
        discount2: "组团购票优惠8折起",
        price: "￥19.99起",
        gloryLableImageUrl: "../../assets/images/movie-card/fire_icon.png",
        proLableImageUrl: "../../assets/images/movie-card/rank_icon.png"
      }
    ]
  }
})

2、find 二级目录

  • find.wxml
<view class="page-body">
  <!-- 头部 -->
  <view class="header-component-view">
    <w-header-component model:header-items="{{headerItems}}"></w-header-component>
  </view>
  <!-- 导航栏 -->
  <w-nav-component model:nav-items="{{navItems}}"></w-nav-component>
  <!-- 广告图 -->
  <view class="banner-container-view">
    <image src="../../assets/images/banner/ad_2.png" class="banner-image"></image>
  </view>
  <w-video-component model:video-items="{{videoItems}}"></w-video-component>
</view>
  • find.wxss
.banner-container-view {
  height: 220rpx;
  margin: 20rpx ;
}
.banner-container-view .banner-image{
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}
  • find.js
Page({
  data: {
    headerItems: ['发现'],
    navItems: [
      { title: '精选电影', imageUrl: '../../assets/images/searchbar/option_icon.png' },
      { title: 'VIP会员', imageUrl: '../../assets/images/searchbar/option_icon.png' },
      { title: '综艺节目', imageUrl: '../../assets/images/searchbar/option_icon.png' },
      { title: '海外剧', imageUrl: '../../assets/images/searchbar/option_icon.png' }
    ],
    videoItems: [
      {
        videoPath: 'https://du1in9.com/demo_wallpaper/demo.mp4',
        posterPath: 'https://du1in9.com/demo_wallpaper/1.jpg',
        title: '神探蒲松龄',
        headPhotos: [
          'http://m.imeitou.com/uploads/allimg/201114/3-2011141F133-lp.jpg',
          'http://m.imeitou.com/uploads/allimg/2020111109/2rim0cysapx-lp.jpg',
          'http://m.imeitou.com/uploads/allimg/2020110210/wze1ae0riqj-lp.jpg'
        ],
        likeIcon: '../../assets/images/comment-map/like_icon.png',
        likeTitle: '9240点赞',
        shareIcon: '../../assets/images/comment-map/share_icon.png',
        shareTitle: '949分享',
        alignmentIcon: '../../assets/images/comment-map/evaluate_2_icon.png',
        alignmentTitle: '1228评论'
      },
      {
        videoPath: 'https://du1in9.com/demo_wallpaper/demo.mp4',
        posterPath: 'https://du1in9.com/demo_wallpaper/2.jpg',
        title: '哥斯拉',
        headPhotos: [
          'http://img.touxiangwu.com/uploads/allimg/200312/-1_0312140F25547.jpg',
          'http://img.touxiangwu.com/uploads/allimg/200312/-1_03121406442351.jpg',
          'http://img.touxiangwu.com/uploads/allimg/200312/-1_0312141152C43.jpg'
        ],
        likeIcon: '../../assets/images/comment-map/like_icon.png',
        likeTitle: '1988点赞',
        shareIcon: '../../assets/images/comment-map/share_icon.png',
        shareTitle: '689分享',
        alignmentIcon: '../../assets/images/comment-map/evaluate_2_icon.png',
        alignmentTitle: '328评论'
      },
      {
        videoPath: 'https://du1in9.com/demo_wallpaper/demo.mp4',
        posterPath: 'https://du1in9.com/demo_wallpaper/3.jpg',
        title: '福星高照朱小八',
        headPhotos: [
          'http://m.imeitou.com/uploads/allimg/2020111109/vfhoqk3ldhq-lp.jpg',
          'http://m.imeitou.com/uploads/allimg/2020111109/o3zvr5vqs5h-lp.jpg',
          'http://m.imeitou.com/uploads/allimg/2020111109/0c4kiurabfe-lp.jpg'
        ],
        likeIcon: '../../assets/images/comment-map/like_icon.png',
        likeTitle: '650点赞',
        shareIcon: '../../assets/images/comment-map/share_icon.png',
        shareTitle: '889分享',
        alignmentIcon: '../../assets/images/comment-map/evaluate_2_icon.png',
        alignmentTitle: '9928评论'
      },
      {
        videoPath: 'https://du1in9.com/demo_wallpaper/demo.mp4',
        posterPath: 'https://du1in9.com/demo_wallpaper/4.jpg',
        title: '宠物联盟',
        headPhotos: [
          'http://m.imeitou.com/uploads/allimg/2020111109/azi4yvvzpti-lp.jpg',
          'http://m.imeitou.com/uploads/allimg/2020111109/yv3yox134oq-lp.jpg',
          'http://m.imeitou.com/uploads/allimg/201114/3-2011141FI6-lp.jpg'
        ],
        likeIcon: '../../assets/images/comment-map/like_icon.png',
        likeTitle: '550点赞',
        shareIcon: '../../assets/images/comment-map/share_icon.png',
        shareTitle: '989分享',
        alignmentIcon: '../../assets/images/comment-map/evaluate_2_icon.png',
        alignmentTitle: '628评论'
      },
      {
        videoPath: 'https://du1in9.com/demo_wallpaper/demo.mp4',
        posterPath: 'https://du1in9.com/demo_wallpaper/5.jpg',
        title: '哪吒',
        headPhotos: [
          'http://m.imeitou.com/uploads/allimg/201114/3-2011141F133-lp.jpg',
          'http://m.imeitou.com/uploads/allimg/2020111109/2rim0cysapx-lp.jpg',
          'http://m.imeitou.com/uploads/allimg/2020110210/wze1ae0riqj-lp.jpg'
        ],
        likeIcon: '../../assets/images/comment-map/like_icon.png',
        likeTitle: '9240点赞',
        shareIcon: '../../assets/images/comment-map/share_icon.png',
        shareTitle: '949分享',
        alignmentIcon: '../../assets/images/comment-map/evaluate_2_icon.png',
        alignmentTitle: '1228评论'
      }
    ]
  },
  // 视频播放完成
  videoEndCallback: function (params) {
    console.log(params);
    console.log("视频播放完成");
  },
  // 视频播放失败
  videoErrorCallback: function (params) {
    console.log(params)
    console.log("视频播放失败");
  }
})
  • find.json
{
  "enablePullDownRefresh": true,
  "usingComponents": {
    "w-header-component": "../../components/w-header-component/w-header-component",
    "w-nav-component": "../../components/w-nav-component/w-nav-component",
    "w-card-component": "../../components/w-card-component/w-card-component",
    "w-video-component": "../../components/w-video-component/w-video-component"
  }
}

3、home 二级目录

  • home.wxml
  <!-- 头部搜索栏 -->
  <w-child-search></w-child-search>
  <!-- 轮播图 -->
  <w-swiper-component model:swiper-data="{{swiperData}}"></w-swiper-component>
  <!-- 选项卡 -->
  <w-tab-control model:titles="{{titles}}" bind:switchItem="switchItemEvent"></w-tab-control>
  <!-- 选项卡菜单 -->
  <w-child-scroll model:scroll-item="{{movieColumn[currentType].list}}"></w-child-scroll>
  <!-- 影院卡片 -->
  <w-card-component model:movie-card-data="{{movieCardData}}"></w-card-component>
  • home.js
import {HIT, SOON, BOARD} from '../../common/const.js'
Page({
  data: {
    list: [],
    pageNo: 1,
    currentType: 'hit',
    movieColumn: {
      [HIT]: {
        page: 1, 
        list: [
          { id: "001", imageUrl: "../../../../assets/images/scroll-view/movie_1.jpg", text: "八佰", dateDesc: "2020-11-05 上映" },
          { id: "002", imageUrl: "https://pic2.iqiyipic.com/image/20201112/36/c7/v_128042334_m_601_m10_260_360.webp", text: "花木兰", dateDesc: "2020-11-14 上映" },
          { id: "003", imageUrl: "https://pic2.iqiyipic.com/image/20201113/c3/8f/v_131397337_m_601_m20_260_360.webp", text: "急先锋", dateDesc: "2020-11-15 上映" },
          { id: "004", imageUrl: "../../../../assets/images/scroll-view/movie_4.jpg", text: "哈利波特与魔法", dateDesc: "2020-10-08 上映" },
          { id: "005", imageUrl: "../../../../assets/images/scroll-view/movie_5.jpg", text: "寻梦环游记", dateDesc: "2020-10-10 上映" },
          { id: "006", imageUrl: "../../../../assets/images/scroll-view/movie_6.jpg", text: "假面饭店", dateDesc: "2020-10-28 上映" }]
      },
      [SOON]: {
        page: 1, 
        list: [
          { id: "001", imageUrl: "../../../../assets/images/scroll-view/movie_7.jpg", text: "绝地反击", dateDesc: "2020-8-20 上映" },
          { id: "002", imageUrl: "../../../../assets/images/scroll-view/movie_8.jpg", text: "无疯也超浪", dateDesc: "2020-09-10 上映" },
          { id: "003", imageUrl: "../../../../assets/images/scroll-view/movie_9.jpg", text: "站玄武", dateDesc: "2020-10-20 上映" },
          { id: "004", imageUrl: "../../../../assets/images/scroll-view/movie_10.jpg", text: "清平客栈", dateDesc: "2020-10-08 上映" },
          { id: "005", imageUrl: "../../../../assets/images/scroll-view/movie_11.jpg", text: "双龙记", dateDesc: "2020-10-10 上映" },
          { id: "006", imageUrl: "../../../../assets/images/scroll-view/movie_12.jpg", text: "ABOMINABLE", dateDesc: "2020-10-28 上映" }]
      },
      [BOARD]: {
        page: 1, 
        list: [
          { id: "001", imageUrl: "../../../../assets/images/scroll-view/movie_13.jpg", text: "CASINO ROYALE", dateDesc: "2020-8-20 上映" },
          { id: "002", imageUrl: "../../../../assets/images/scroll-view/movie_14.jpg", text: "GOOZILLA", dateDesc: "2020-09-10 上映" },
          { id: "003", imageUrl: "../../../../assets/images/scroll-view/movie_15.jpg", text: "BOB", dateDesc: "2020-10-20 上映" },
          { id: "004", imageUrl: "../../../../assets/images/scroll-view/movie_16.jpg", text: "SCARY MOVIE", dateDesc: "2020-10-08 上映" },
          { id: "005", imageUrl: "../../../../assets/images/scroll-view/movie_17.jpg", text: "JOKER", dateDesc: "2020-10-10 上映" }]
      }
    },
    titles: [
      "真正热播", "即将上映", "排行榜"
    ],
    swiperData: [
      "https://puui.qpic.cn/media_img/lena/PIC9v8c98_580_1680/0",
      "../../assets/images/swiper/swiper_2.jpg",
      "../../assets/images/swiper/swiper_3.jpg",
      "https://puui.qpic.cn/vupload/0/1604629644054_jmntgavqr3.jpg/0",
      "../../assets/images/swiper/swiper_5.jpg",
      "../../assets/images/swiper/swiper_6.jpg",
      "../../assets/images/swiper/swiper_7.jpg",

    ],
    movieCardData: [
      {
        movieTitle: "人气影院",
        addresTitle: "嘉年华国际影城(北路店)",
        popTitle: "人气5000",
        addresDetail: "北京市昌平区",
        shopTitle1: "零食",
        shopTitle2: "MAX厅",
        shopTitle3: "中国剧目",
        shopTitle4: "停车场",
        distanse: "1.1km",
        discount1: "开通会员8折购票",
        discount2: "组团购票优惠8折起",
        price: "￥19.9起",
        gloryLableImageUrl: "../../assets/images/movie-card/fire_icon.png",
        proLableImageUrl: "../../assets/images/movie-card/rank_icon.png"
      },
      {
        movieTitle: "知名影院",
        addresTitle: "万达国际影城(北路店)",
        popTitle: "人气6000",
        addresDetail: "北京市昌平区",
        shopTitle1: "美甲",
        shopTitle2: "MAX厅",
        shopTitle3: "中国剧目",
        shopTitle4: "停车场",
        distanse: "2.8km",
        discount1: "开通会员8折购票",
        discount2: "组团购票优惠8折起",
        price: "￥39.9起",
        gloryLableImageUrl: "../../assets/images/movie-card/fire_icon.png",
        proLableImageUrl: "../../assets/images/movie-card/rank_icon.png"
      },
      {
        movieTitle: "火热影院",
        addresTitle: "嘉年华国际影城(北路店)",
        popTitle: "人气9890",
        addresDetail: "北京市昌平区",
        shopTitle1: "洗浴",
        shopTitle2: "午夜DJ",
        shopTitle3: "中国剧目",
        shopTitle4: "停车场",
        distanse: "3.2km",
        discount1: "开通会员8折购票",
        discount2: "组团购票优惠8折起",
        price: "￥29.99起",
        gloryLableImageUrl: "../../assets/images/movie-card/fire_icon.png",
        proLableImageUrl: "../../assets/images/movie-card/rank_icon.png"
      },
      {
        movieTitle: "人气影院",
        addresTitle: "嘉年华国际影城(北路店)",
        popTitle: "人气5000",
        addresDetail: "北京市昌平区",
        shopTitle1: "零食",
        shopTitle2: "MAX厅",
        shopTitle3: "中国剧目",
        shopTitle4: "停车场",
        distanse: "1.1km",
        discount1: "开通会员8折购票",
        discount2: "组团购票优惠8折起",
        price: "￥19.99起",
        gloryLableImageUrl: "../../assets/images/movie-card/fire_icon.png",
        proLableImageUrl: "../../assets/images/movie-card/rank_icon.png"
      },
      {
        movieTitle: "人气影院",
        addresTitle: "嘉年华国际影城(北路店)",
        popTitle: "人气5000",
        addresDetail: "北京市昌平区",
        shopTitle1: "零食",
        shopTitle2: "MAX厅",
        shopTitle3: "中国剧目",
        shopTitle4: "停车场",
        distanse: "1.1km",
        discount1: "开通会员8折购票",
        discount2: "组团购票优惠8折起",
        price: "￥19.99起",
        gloryLableImageUrl: "../../assets/images/movie-card/fire_icon.png",
        proLableImageUrl: "../../assets/images/movie-card/rank_icon.png"
      },
      {
        movieTitle: "人气影院",
        addresTitle: "嘉年华国际影城(北路店)",
        popTitle: "人气5000",
        addresDetail: "北京市昌平区",
        shopTitle1: "零食",
        shopTitle2: "MAX厅",
        shopTitle3: "中国剧目",
        shopTitle4: "停车场",
        distanse: "1.1km",
        discount1: "开通会员8折购票",
        discount2: "组团购票优惠8折起",
        price: "￥19.99起",
        gloryLableImageUrl: "../../assets/images/movie-card/fire_icon.png",
        proLableImageUrl: "../../assets/images/movie-card/rank_icon.png"
      }
    ]
  },
  switchItemEvent(event) {
    const key = event.detail.index
    let currentType = ''
    switch (key) {
      case 0:
        currentType = HIT
        break;
      case 1:
        currentType = SOON
        break;
      case 2:
        currentType = BOARD
        break;
    }
    this.setData({
      currentType: currentType
    })
  }
})
  • home.json
{
  "enablePullDownRefresh": true,
  "usingComponents": {
    "w-card-component": "../../components/w-card-component/w-card-component",
    "w-child-search": "../home/components/w-child-search/w-child-search",
    "w-swiper-component": "../../components/w-swiper-component/w-swiper-component",
    "w-tab-control": "../home/components/w-tab-control/w-tab-control",
    "w-child-scroll": "../home/components/w-child-scroll/w-child-scroll"
  }
}
components 三级目录

① w-child-scroll 四级目录

  • w-child-scroll.wxml
<view class="scroll-view-container">
    <scroll-view scroll-x="true" :scroll-into-view="a" class="scroll-view">
        <block wx:for="{{scrollItem}}" wx:key="id">
            <view class="tab-container"><image src="{{item.imageUrl}}" class="tab-item-image"></image>
                <view class="tab-title-view">
                    <h4 class="title-text">{{item.text}}</h4>
                    <text class="title-date">{{item.dateDesc}}</text>
                </view>
            </view>
        </block>
    </scroll-view>
    <view class="see-more-view"><h2 class="see-more-titlt">查看更多(30部)></h2></view>
</view>
  • w-child-scroll.wxss
.scroll-view-container {
  margin-top: 40rpx;
  width: 100%;
}
.scroll-view {
  width: 100%;
  height: 455rpx;
  white-space: nowrap;
}
.tab-container {
  display: inline-block;
  margin: 0 10rpx;
  width: 270rpx;
  height: 100%;
}
.tab-container:first-child {
  margin-left: 20rpx ;
}
.tab-container:last-child {
  margin-right: 20rpx ;
}
.tab-item-image {
  width: 100%;
  height: 360rpx;
}
.tab-title-view .title-text {
  display: block;
  color: #ffffff;
  text-align: left;
  margin: 5rpx 0;
}
.tab-title-view .title-date {
  color: #808080;
  text-align: left;
}
.see-more-view {
 margin: 25rpx 0;
 text-align: center;
}
.see-more-titlt {
  font-weight: 600;
color: #ffffff;
}
  • w-child-scroll.js
Component({
  properties: {
    scrollItem: {type: Array, value: []}
  }
})
  • w-child-scroll.json
{
  "component": true,
  "usingComponents": {}
}

② w-child-search 四级目录

  • w-child-search.wxml
<view class="city-selection-view">
    <text class="city-text">天津</text>
    <view class="down-icon-view">
      <image src="../../../../assets/images/searchbar/down_icon.png" class="drow-icon-image"></image>
    </view>
  </view>
  <view class="search-bar-view">
    <input type="text" class="input" placeholder="请输入电影、电影院" />
    <view class="search-image-view">
      <image src="../../../../assets/images/searchbar/search_icon.png" class="search-icon-image" />
    </view>
  </view>
  <view class="scan-code-view">
    <image src="../../../../assets/images/searchbar/scan_icon.png" class="scan-icon-image"></image>
  </view>
  • w-child-search.wxss
.city-selection-view {
  color: #ffffff;
  position: absolute;
  top: 28rpx;
  left: 30rpx;
  width: 70rpx;
  height: 40rpx;
}
.down-icon-view {
  position: absolute;
  top: 0rpx;
  left:72rpx;
  z-index: 2;
}
.drow-icon-image {
  width: 20rpx;
  height: 15rpx;
}
.search-bar-view {
  position: relative;
  width: 100%;
  height: 80rpx;
}
.search-image-view {
  position: absolute;
  top: 26rpx;
  left: 175rpx;
  width: 40rpx;
  height: 40rpx;
}
.search-icon-image {
  display: block;
  width: 100%;
  height: 100%;
}
.input {
  box-sizing: border-box;
  position: absolute;
  top: 10rpx;
  left: 20%;
  width: 500rpx;
  height: 40px;
  border-radius: 20px;
  color: #ffffff;
  border: none;
  background-color: #444242;
  padding-left:40px;
  padding-right: 20px;
}
.scan-code-view {
  position: absolute;
  right: 30rpx;
  top: 30rpx;
  height: 40rpx;
  width: 40rpx;
}
.scan-icon-image {
  height: 100%;
  width: 100%;
}
  • w-child-search.js
Component({})
  • w-child-search.json
{
  "component": true,
  "usingComponents": {}
}

③ w-tab-control 四级目录

  • w-tab-control.wxml
<view class="tab-control-view">
    <block wx:for="{{titles}}" wx:key="index">
      <view class="tab-item {{index === currentIndex ? 'active' : ''}}" bind:tap="itemTab" data-index="{{index}}">{{item}}</view>
    </block>
</view>
  • w-tab-control.wxss
.tab-control-view {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  color: #ffffff;
  margin-top: 40rpx;
}
.tab-item {
  flex: 1;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
}
.active {
  color: #f73171;
}
  • w-tab-control.js
Component({
  /*组件的属性列表*/
  properties: {titles: {type: Array, valur: []}},
  /*组件的初始数据*/
  data: {currentIndex: 0},
  /*组件的方法列表*/
  methods: {
    itemTab(event) {
      const index = event.currentTarget.dataset.index
      this.setData({currentIndex: index})
      this.triggerEvent("switchItem",{index:index},{})
    }
  }
})
  • w-tab-control.json
{
  "component": true,
  "usingComponents": {}
}

4、movie 二级目录

  • movie.wxml
<!-- 整体盒子 -->
<view class="movie-container-view">
    <!-- 头部搜索栏 -->
    <w-header-component model:header-items="{{tapControlItem}}" bind:handlerTabControlEvent="tabControlEvent"></w-header-component>
    <!-- 统计条 -->
    <w-child-total></w-child-total>
    <!-- 电影栏目 -->
    <w-detail-component model:detail-items="{{detailItems[currentIndex].list}}"></w-detail-component>
</view>
  • movie.wxss
.movie-container-view {
  background-color: #030000;
  height: 100%;
}
  • movie.js
import { HIT, SOON, BOARD } from '../../common/const.js'
Page({
  data: {
    currentIndex: 'hit',
    tapControlItem: ["正在热映", "即将上映"],
    detailItems: {
      [HIT]: {
        page: 1,
        list: [{
          movieTitle: '八佰',
          director: '管虎',
          movieImageUrl: 'https://pic0.iqiyipic.com/image/20201102/3b/62/v_112883426_m_601_m15_260_360.jpg',
          toStars: ['黄志忠', '欧豪', '王千源'],
          blocktitles: ['2D', '国语', '中国巨幕'],
          scortItems: [
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png'
          ],
          scoreText: '6分',
          releaseTime: '2020-08-01'

        },
        {
          movieTitle: '我在时间尽头等你',
          director: '妮基·卡罗',
          movieImageUrl: 'https://pic3.iqiyipic.com/image/20201112/5b/cb/v_153975084_m_601_m2_260_360.jpg',
          toStars: ['刘亦菲', '李连杰', '甄子丹'],
          blocktitles: ['3D', '国语', '中国巨幕'],
          scortItems: [
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png'
          ],
          scoreText: '10分',
          releaseTime: '2020-11-25'

        },
        {
          movieTitle: '急先锋',
          director: '徐展雄',
          movieImageUrl: 'https://pic2.iqiyipic.com/image/20201113/c3/8f/v_131397337_m_601_m20_260_360.webp',
          toStars: ['成龙', '杨洋', '艾伦'],
          blocktitles: ['3D', '国语', '中国巨幕'],
          scortItems: [
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png'
          ],
          scoreText: '8分',
          releaseTime: '2020-10-01'
        },

        {
          movieTitle: '哈利伯特与魔法石',
          director: '克里斯·哥伦布',
          movieImageUrl: '../../assets/images/scroll-view/movie_4.jpg',
          toStars: ['丹尼尔', '鲁伯特', '格林特'],
          blocktitles: ['3D', '英语', '中国巨幕'],
          scortItems: [
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png'
          ],
          scoreText: '10分',
          releaseTime: '2020-10-29'
        },
        {
          movieTitle: '寻梦环游记',
          director: '李·昂克里奇',
          movieImageUrl: '../../assets/images/scroll-view/movie_5.jpg',
          toStars: ['安东尼', '布拉特'],
          blocktitles: ['3D', '国语', '中国巨幕'],
          scortItems: [
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png'
          ],
          scoreText: '10分',
          releaseTime: '2020-10-01'
        }
        ]
      },
      [SOON]: {
        page: 1,
        list: [{
          movieTitle: '假面饭店',
          director: '铃木雅之',
          movieImageUrl: '../../assets/images/scroll-view/movie_6.jpg',
          toStars: ['木村拓哉' ,'长泽雅美'],
          blocktitles: ['2D', '日语', '中国巨幕'],
          scortItems: [
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png'
          ],
          scoreText: '4分',
          releaseTime: '2020-11-01'

        },
        {
          movieTitle: '中国机长',
          director: '刘伟强',
          movieImageUrl: 'https://image11.m1905.cn/uploadfile/2020/0123/thumb_1_150_203_20200123024910214436.jpg',
          toStars: ['张涵予', '欧豪', '杜江'],
          blocktitles: ['2D', '国语', '中国巨幕'],
          scortItems: [
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png'
          ],
          scoreText: '8分',
          releaseTime: '2020-09-01'

        },
        {
          movieTitle: '无疯也超浪',
          director: '徐展雄',
          movieImageUrl: '../../assets/images/scroll-view/movie_8.jpg',
          toStars: ['前小库', '大飞', '张思思'],
          blocktitles: ['3D', '国语', '中国巨幕'],
          scortItems: [
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png'
          ],
          scoreText: '8分',
          releaseTime: '2020-10-01'
        },

        {
          movieTitle: '战玄武',
          director: '克里斯·哥伦布',
          movieImageUrl: '../../assets/images/scroll-view/movie_9.jpg',
          toStars: ['丹尼尔', '鲁伯特', '格林特'],
          blocktitles: ['3D', '英语', '中国巨幕'],
          scortItems: [
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png'
          ],
          scoreText: '10分',
          releaseTime: '2020-10-29'
        },
        {
          movieTitle: '清平客栈',
          director: '李·昂克里奇',
          movieImageUrl: '../../assets/images/scroll-view/movie_10.jpg',
          toStars: ['安东尼', '布拉特'],
          blocktitles: ['3D', '国语', '中国巨幕'],
          scortItems: [
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png',
            '../../assets/images/searchbar/star_icon.png'
          ],
          scoreText: '8分',
          releaseTime: '2020-10-01'
        }
        ]
      }
    },
  },
  tabControlEvent(event) {
    const key = event.detail.index
    let currentIndex = ''
    switch (key) {
      case 0:
        currentIndex = HIT
        break;

      default:
        currentIndex = SOON
        break;
    }
    this.setData({currentIndex: currentIndex})
  }
})
  • movie.json
{
  "enablePullDownRefresh": true,
  "usingComponents": {
    "w-header-component": "../../components/w-header-component/w-header-component",
    "w-child-total": "../movie/components/w-child-total/w-child-total",
    "w-detail-component": "../../components/w-detail-component/w-detail-component"
  }
}
components 三级目录

w-child-total 四级目录

  • w-child-total.wxml
<view class="total-title-view">
  <view class="left-total-container">
    <image src="../../../../assets/images/searchbar/data_icon.png" class="data-image"></image>
    <text class="box-office-text">实时票房</text>
    <text class="release-date-text">2020-10-22</text>
  </view>
  <view class="right-total-container">
    <text class="today-inven-text">今日大盘</text>
    <text class="data-volume-text">2918万</text>
    <image src="../../../../assets/images/searchbar/polygon_icon.png" class="polygon-image"></image>
  </view>
</view>
  • w-child-total.wxss
.total-title-view {
  position: relative;
  display: flex;
  justify-content: space-between;
  background-color: #333333;
  padding: 20rpx 10rpx 20rpx 55rpx;
  margin: 20rpx 0 30rpx 0;
}

.polygon-image {
  width: 20rpx;
  height: 20rpx;
  padding-left: 5rpx;
}

.data-image {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10rpx;
  width: 40rpx;
  height: 40rpx;
}

.box-office-text,
.release-date-text,
.today-inven-text,
.data-volume-text {
  color: #ffffff;
  margin: 0 10rpx;
}

.right-total-container {margin-top: 2rpx;}
.left-total-container .release-date-text {font-size: 32rpx;}
.right-total-container .data-volume-text {color: #f73171;}
  • w-child-total.js
Component({})
  • w-child-total.json
{
  "component": true,
  "usingComponents": {}
}

5、profile 二级目录

  • profile.wxml
<view class="page-body">
  <!-- 顶部nav -->
  <w-top-nav></w-top-nav>
  <!-- 个人信息 -->
  <w-user-detail model:profile="{{profile}}"></w-user-detail>
  <!-- 会员中心 -->
  <w-user-member model:personal-center="{{personalCenter}}"></w-user-member>
  <!-- 我的订单 -->
  <w-user-order model:menu-items="{{menuItems}}"></w-user-order>
  <!-- 菜单列表 -->
  <w-menu-list model:menu-cloumn-list="{{menuCloumnList}}"></w-menu-list>
</view>
  • profile.js
Page({
  data: {
    profile: {              // 用户信息
      userName: '易烊千玺',
      userAvatarUrl: '../../../../assets/images/comment-map/avatar_1.jpeg',
      membershipLevel: '黄金会员',
      membershipLevelImageUrl: '../../../../assets/images/comment-map/crown_icon.png',
      integral: '228',
      discountText: '开通影视卡会员专属8折优惠',
      summary: [
        { text: '已看', total: 800, },
        { text: '想看', total: 300, },
        { text: '讨论', total: 389, },
        { text: '记录', total: 999 }
      ]
    },
    personalCenter:{        // 会员中心
      iconUrl: '../../../../assets/images/comment-map/diamand_icon.png',
      content: '会员中心',
      contentDetail: '开通影视卡会员专属8折优惠',
      rightText: '立即开通',
      rightIcon: '../../../../assets/images/comment-map/right_icon.png'   
  },
  menuItems: [              // 我的订单
    {menuTitle: '我的钱包',menuIcon: '../../../../assets/images/comment-map/wallet_icon.png'},
    {menuTitle: '待付款',menuIcon: '../../../../assets/images/comment-map/pay_icon.png'},
    {menuTitle: '待评价',menuIcon: '../../../../assets/images/comment-map/evaluate_icon.png'},
    {menuTitle: '退款',menuIcon: '../../../../assets/images/comment-map/speed_icon.png'},
    {menuTitle: '电影票',menuIcon: '../../../../assets/images/comment-map/movie_a_icon.png'},
    {menuTitle: '演出票',menuIcon: '../../../../assets/images/comment-map/music_icon.png'},
    {menuTitle: '优惠券',menuIcon: '../../../../assets/images/comment-map/coupon_icon.png'},
    {menuTitle: '总积分',menuIcon: '../../../../assets/images/comment-map/wallet_icon.png'}
  ],
  menuCloumnList: [         // 菜单列表
    {cloumnTitle: '我的收藏',cloumnIcon:'../../../../assets/images/comment-map/collect_icon.png'},
    {cloumnTitle: '我的银行卡',cloumnIcon:'../../../../assets/images/comment-map/movie_card.png'},
    {cloumnTitle: '我的小剧场',cloumnIcon:'../../../../assets/images/comment-map/theatre_icon.png'}
  ]
  }
})
  • profile.json
{
  "usingComponents": {
    "w-top-nav": "../profile/components/w-top-nav/w-top-nav",
    "w-user-detail": "../profile/components/w-user-detail/w-user-detail",
    "w-user-member": "../profile/components/w-user-member/w-user-member",
    "w-user-order": "../profile/components/w-user-order/w-user-order",
    "w-menu-list": "../profile/components/w-menu-list/w-menu-list"
  }
}
components 三级目录

① w-menu-list 四级目录

  • w-menu-list.wxml
<view class="menu-list">
    <block wx:for="{{menuCloumnList}}" wx:key="id">
        <view class="menu-list-view">
            <view class="left">
                <image src="{{item.cloumnIcon}}" class="menu-list-icon"></image>
                <text>{{item.cloumnTitle}}</text>
            </view>
            <view class="right">
                <image src="../../../../assets/images/comment-map/right_icon.png" class="right-icon"></image>
            </view>
        </view>
    </block>
</view>
  • w-menu-list.wxss
.menu-list {
  margin-bottom: 20rpx;
}
.menu-list-view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #333333;
  height: 60rpx;
  border-bottom: 1rpx solid #030000;
}
.menu-list-view:last-child {
  border-bottom: none;
}
.menu-list-icon {
  width: 40rpx;
  height: 40rpx;
  vertical-align: bottom;  
  margin-right: 20rpx;
}
.right-icon {
  width: 18rpx;
  height: 35rpx;
  vertical-align: middle;
}
  • w-menu-list.js
Component({
  properties: {
    menuCloumnList: {type: Array, value:  []}}
})
  • w-menu-list.json
{
  "component": true,
  "usingComponents": {}
}

② w-top-nav 四级目录

  • w-top-nav.wxml
<view class="top-header-view">
    <view class="heade-container">
        <view class="header-item"><image src="../../../../assets/images/searchbar/scan_icon.png" class="icon-image"></image></view>
        <view class="header-item"><text>个人中心</text></view>
        <view class="header-item"><image src="../../../../assets/images/comment-map/evaluate_2_icon.png" class="icon-image"></image></view>
    </view>
</view>
  • w-top-nav.wxss
.heade-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin: 20rpx;
}
.icon-image {
  vertical-align: middle;
  width: 40rpx;
  height: 40rpx;
}
  • w-top-nav.js
Component({})
  • w-top-nav.json
{
  "component": true,
  "usingComponents": {}
}

③ w-user-detail 四级目录

  • w-user-detail.wxml
<view class="profile-detail-view">
    <view class="detail-upper-region regin-flex">
        <view class="user-head-portrait"><image src="{{profile.userAvatarUrl}}" class="head-portrait"></image></view>
        <view class="user-detail-view">
            <view class="user-name regin-flex">
                <h1 class="name-h">{{profile.userName}}</h1>
                <image src="{{profile.membershipLevelImageUrl}}" class="crown-icon"></image>
            </view>
            <view class="user-integral-member regin-flex">
                <h2 class="integral-h">{{profile.membershipLevel}}</h2>
                <h2 class="member-h">{{'积分'+ profile.integral}}</h2>
            </view>
        </view>
    </view>
    <view class="detail-bottom-regin regin-flex after">
        <block wx:for="{{profile.summary}}" wx:key="index">
            <view class="bottom-item regin-flex after-element">
                <text class="text-desc">{{item.total}}</text>
                <text class="text-desc">{{item.text}}</text>
            </view>
        </block>
    </view>
</view>
  • w-user-detail.wxss
.profile-detail-view {
  display: flex;
  flex-flow: column nowrap;
  height: 295rpx;
  margin: 40rpx 20rpx 20rpx;
  padding: 25rpx 35rpx;
  border-radius: 20rpx;
  background-color: #F73171;
}

.regin-flex {
  flex: 1;
}

.head-portrait {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
}

.detail-upper-region {
  display: flex;
  justify-content: flex-start;
}

.user-detail-view {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  margin-left: 20rpx;
}

.name-h {
  font-size: 38rpx;
}

.integral-h,
.member-h {
  display: inline-block;
  padding: 2rpx 20rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
  background-color: rgba(255, 255, 255, 0.4);
}

.member-h {
  margin-left: 10rpx;
}

.crown-icon {
  width: 35rpx;
  height: 35rpx;
  vertical-align: text-top;
  margin-left: 20rpx;
}

.detail-bottom-regin {
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  margin-top: 55rpx;
}

.bottom-item {
  position: relative;
}

.bottom-item::after {
  content: "";
  width: 1px;
  height: 6.7vw;
  background-color: rgba(255, 255, 255, 0.4);
  position: absolute;
  right: 0;
  top: 8px;
}
.bottom-item:last-child::after {
  display: none;
}

.text-desc {
  border: none;
  display: block;
}
  • w-user-detail.js
Component({
  properties: {
    profile: {type: Object, value: []}
  }
})
  • w-user-detail.json
{
  "component": true,
  "usingComponents": {}
}

④ w-user-member 四级目录

  • w-user-member.wxml
<view class="member-center-view">
    <view class="member-item">
        <image src="{{personalCenter.iconUrl}}" class="member-image"></image>
        <view class="member-text-view">
            <text class="member-center-text">{{personalCenter.content}}</text>
            <text class="member-center-desc">{{personalCenter.contentDetail}}</text>
        </view>
    </view>
    <view class="member-item">
        <text class="member-right-text">{{personalCenter.rightText}}</text>
        <image src="{{personalCenter.rightIcon}}" class="right_icon"></image>
    </view>
</view>
  • w-user-member.wxss
.member-center-view {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 130rpx;
  padding: 0 20rpx;
  background-color: #333333;
}

.member-image {
  width: 45rpx;
  height: 43rpx;
}

.right_icon {
  width: 18rpx;
  height: 35rpx;
  vertical-align: middle;
}

.member-right-text {
  font-size: 30rpx;
  position: absolute;
  top: 47rpx;
  right: 52rpx;
}

.member-text-view {
  display: flex;
  flex-flow: column nowrap;
  position: absolute;
  top: 18rpx;
  left: 80rpx;
}

.member-center-text {
  margin-bottom: 8rpx;
}

.member-center-desc {
  font-size: 24rpx;
}
  • w-user-member.js
Component({
  properties: {
    personalCenter: {type: Object, value: ''}
  }
})
  • w-user-member.json
{
  "component": true,
  "usingComponents": {}
}

⑤ w-user-order 四级目录

  • w-user-order.wxml
<view class="order-container">
    <!-- 上面start -->
    <view class="order-title-column">
        <view class="left-content">
            <image src="../../../../assets/images/comment-map/order_icon.png" class="order-icon"></image>
            <text class="order-text">我的订单</text>
        </view>
        <view class="right-icon">
            <image src="../../../../assets/images/comment-map/right_icon.png" class="right-icon"></image>
        </view>
    </view>
    <!-- 菜单列表 -->
    <view class="order-menu-column">
        <block wx:for="{{menuItems}}" wx:key="index">
            <view class="menu-item">
                <view class="item-icon-view"><image src="{{item.menuIcon}}" class="item-menu-icon"></image></view>
                <text class="menu-title">{{item.menuTitle}}</text>
            </view>
        </block>
    </view>
</view>
  • w-user-order.wxss
.order-container {
  height: 400rpx;
  margin: 20rpx 0;
  padding: 20rpx;
  background-color: #333333;
}

.order-icon {
  width: 45rpx;
  height: 35rpx;
  vertical-align: middle;
}

.right-icon {
  width: 18rpx;
  height: 35rpx;
  vertical-align: middle;
}

.order-text {
  margin-left: 20rpx;

}
.menu-title {
  font-size: 24rpx;
}

.order-title-column {
  display: flex;
  justify-content: space-between;
  height: 65rpx;
}

.order-menu-column {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
}

.menu-item {
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 160rpx;
}

.item-menu-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50rpx;
  height: 50rpx;
}

.item-icon-view {
  position: relative;
  width: 90rpx;
  height: 90rpx;
  border-radius: 45rpx;
  background-color: #ffffff;
  margin-bottom: 10rpx;
}
  • w-user-order.js
Component({
  properties: {
    menuItems: {type: Array, value: []}
  }
})
  • w-user-order.json
{
  "component": true,
  "usingComponents": {}
}

三、components 目录

1、w-card-component 二级目录

  • w-card-component.wxml
<block wx:for="{{movieCardData}}" wx:key="index">
    <view class="movie-card-container">
    <!-- title -->
    <view class="movie-card-title">
        <view class="title-item-container">
            <image src="{{item.gloryLableImageUrl}}" class="title-card-image"></image>
            <h2 class="title-text-desc">{{item.movieTitle}}</h2>
        </view>
        <view class="title-item-container">查看全部</view>
    </view>
    <!-- 影院地址 -->
    <view class="movie-location-container">
        <view class="location-item"><text>{{item.addresTitle}}</text></view>
        <view class="location-item">
            <image src="{{item.proLableImageUrl}}" class="location-pop-image"></image>
            <h2 class="location-pop-desc">{{item.popTitle}}</h2>
        </view>
    </view>
    <view class="address-det-text">{{item.addresDetail}}</view>
    <!-- 彩色小块 -->
    <view class="title-block-container">
        <view class="color-block-view">
            <h4 class="coloe-block-item">{{item.shopTitle1}}</h4>
            <h4 class="coloe-block-item">{{item.shopTitle2}}</h4>
            <h4 class="coloe-block-item">{{item.shopTitle3}}</h4>
            <h4 class="coloe-block-item">{{item.shopTitle4}}</h4>
        </view>
        <view>{{item.distanse}}</view>
    </view>
    <!-- 团购  优惠 -->
    <view class="footer-block-container">
        <view class="group-buy-view">
            <h6 class="group-buy-item">卡</h6>
            <h6 class="group-buy-item">{{item.discount1}}</h6>
            <h6 class="group-buy-item">团</h6>
            <h6 class="group-buy-item">{{item.discount2}}</h6>
        </view>
        <view class="price-text"><text class="text">{{item.price}}</text></view>
    </view>
    </view>
</block>
  • w-card-component.wxss
.movie-card-container {
  margin:20rpx;
  background-color: #333333;
}
.movie-card-container:first-child {
  margin-top: 20rpx;
}
.movie-card-title {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1px solid #262525;
}

.title-text-desc {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 60rpx;
  color: #ffffff;
}

.title-card-image {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 18rpx;
  width: 30rpx;
  height: 30rpx;
}

.title-item-container {
  color: #ffffff;
  font-weight: 600;
  margin: 0 20rpx;
}

/* title 下面 */
.movie-location-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  color: #ffffff;
  padding: 10rpx 0 15rpx 20rpx;
}

.location-pop-image {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 160rpx;
  width: 30rpx;
  height: 30rpx;
}

.location-pop-desc {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20rpx;
  color: #ffffff;
  font-weight: 500;
}

.address-det-text {
  color: #ffffff;
  padding: 20rpx;
}

.title-block-container {
  display: flex;
  justify-content: space-between;
  color: #ffffff;
  padding: 0 20rpx 15rpx;
}

.coloe-block-item {
  display: inline-block;
  margin: 0 5rpx;
  color: #ffffff;
  padding: 5rpx 10rpx;
  border-radius: 10rpx;
}

.title-block-container .coloe-block-item:first-child {
  background-color: #FBC216;
}

.title-block-container .coloe-block-item:nth-child(2) {
  background-color: #A05Bf6;
}

.title-block-container .coloe-block-item:nth-child(3) {
  background-color: #38C566;
}

.title-block-container .coloe-block-item:nth-child(4) {
  background-color: #21C3F8;
}

.footer-block-container {
  display: flex;
  justify-content: space-between;
  color: #ffffff;
  padding: 0 20rpx 15rpx;
}

.group-buy-item {
  display: inline-block;
  margin: 0 5rpx;
  font-size: 15px;
}

.group-buy-item:first-child {
  margin-left: 0;
  padding: 0 4rpx;
  background-color: #38C566;
}

.group-buy-item:nth-child(3) {
  padding: 0 4rpx;
  background-color: #A05Bf6;
}

.group-buy-item:nth-child(4) {
  margin-left: 0;
}

.price-text .text {
  color: #f73171;
}
  • w-card-component.js
Component({
  properties: {
    movieCardData: {type: Array, value: []}
  }
})
  • w-card-component.json
{
  "component": true,
  "usingComponents": {}
}

2、w-detail-component 二级目录

  • w-detail-component.wxml
<block wx:for="{{detailItems}}" wx:key="index">
    <view class="movie-card-view">
        <view class="movie-detail-container">
            <view class="left-image-view"><image src="{{item.movieImageUrl}}" class="movie-image"></image></view>
            <view class="right-content-view">
                <view class="movie-title-view">
                    <h1 class="movie-title-h1">{{item.movieTitle}}</h1>
                    <button class="buy-tickets-btn" size="mini">购票</button>
                </view>
                <view class="director-title-view location">
                    <text>导演：</text>
                    <text class="director-text-title">{{item.director}}</text>
                </view>
                <view class="to-star-view location">
                    <text>主演：</text>
                    <block wx:for="{{item.toStars}}" wx:key="index" wx:for-item="starItem">
                        <text class="to-star-item">{{starItem}}</text>
                    </block>
                </view>
                <view class="titlle-block-view location">
                    <block wx:for="{{item.blocktitles}}" wx:for-item="blockitem" wx:key="index">
                        <text class="title-block-item">{{blockitem}}</text>
                    </block>
                </view>
                <view class="score-view ">
                    <block wx:for="{{item.scortItems}}" wx:for-item="imageItem" wx:key="index">
                        <image src="{{imageItem}}" class="star-image-item"></image>
                    </block>
                    <text class="scort-text-desc">{{item.scoreText}}</text>
                </view>
                <view class="release-time-view">上映时间：<text>{{item.releaseTime}}</text> </view>
            </view>
        </view>
    </view>
</block>
  • w-detail-component.wxss
.movie-card-view {
  margin: 10rpx 20rpx;
}

.movie-detail-container {
  display: flex;
  justify-content: flex-start;
  font-size: 28rpx;
}

.movie-image {
  width: 298rpx;
  height: 370rpx;
  margin-right: 30rpx;
}

.movie-title-h1 {
  font-size: 35rpx;
}

.location {
  margin: 10rpx 0;
  color: #808080;
}

.to-star-item {
  padding-right: 10rpx;
}

.title-block-item {
  text-align: center;
  display: inline-block;
  background-color: #F71371;
  color: #ffffff;
  font-size: 30rpx;
  padding: 2rpx 14rpx;
  margin-right: 16rpx;
  border-radius: 10rpx;
}

.title-block-item:last-child {
  margin-right: 0;
}

.star-image-item {
  width: 40rpx;
  height: 40rpx;
}

.score-view {
  position: relative;
  margin-top: 20rpx;
}

.scort-text-desc {
  position: absolute;
  top: 6rpx;
  right: 65rpx;
  color: #F71371;
}

.right-content-view {
  width: 100%;
  position: relative;
}

.release-time-view {
  margin: 4rpx 0;
  color: #808080;
}

.buy-tickets-btn {
  position: absolute;
  top: 5rpx;
  right: 0rpx;
  color: #ffffff;
  font-size: 40rpx;
  background-color: #38c566;
}
  • w-detail-component.js
Component({
  properties: {
    detailItems: {type:Array, value: []}
  }
})
  • w-detail-component.json
{
  "component": true,
  "usingComponents": {}
}

3、w-header-component 二级目录

  • w-header-component.wxml
<view class="tab-control-container">
    <view class="left-city-view">
        <h2 class="city-text-h2">天津</h2>
        <image src="../../assets/images/searchbar/down_icon.png" class="left-down-image"></image>
    </view>
    <view class="center-tab-view">
        <block wx:for="{{headerItems}}" wx:key="index">
            <view class="center-tab-item {{index === currentIndex ? 'active' : ''}}" bindtap="tabClick" data-index="{{index}}">{{item}}</view>
        </block>
    </view>
    <view class="right-search-view"><image src="../../assets/images/searchbar/search_icon.png" class="right-search-image"></image></view>
  </view>
  • w-header-component.wxss
.left-down-image {
  padding-left: 10rpx;
  width: 20rpx;
  height: 15rpx;
}
.city-text-h2 {
  color: #ffffff;
}
.tab-control-container {
  display: flex;
  justify-content: space-between;
  margin: 20rpx;
}

.center-tab-view {
  display: flex;
  justify-content: space-between;
}

.center-tab-view .center-tab-item {
  font-size: 36rpx;
  padding: 0 20rpx;
}

.right-search-image {
  width: 40rpx;
  height: 40rpx;
  margin-top: 8rpx;
}

.active {
  color: #f73171;
}
  • w-header-component.js
Component({
  /*组件的属性列表*/
  properties: {
    headerItems: {
      type: Array,
      value: []
    }
  },
  /*组件的初始数据*/
  data: {currentIndex: 1},
  /*组件的方法列表*/
  methods: {
    tabClick(event) {
      const index = event.target.dataset.index
      this.setData({currentIndex: index})
      this.triggerEvent('handlerTabControlEvent',{index:index},{})
    }
  }
})
  • w-header-component.json
{
  "component": true,
  "usingComponents": {}
}

4、w-nav-component 二级目录

  • w-nav-component.wxml
<view class="nav-container">
    <view class="nav-container-view">
        <block wx:for="{{navItems}}" wx:key="index">
            <view class="nav-item">
                <text>{{item.title}}</text>
                <image src="{{item.imageUrl}}" class="nav-option-image"></image>
            </view>
        </block>
    </view>
</view>
  • w-nav-component.wxss
.nav-container-view {
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
  background-color: #333333;
  padding: 20rpx 0;
}
.nav-option-image {
  vertical-align: middle;
  width: 20rpx;
  height: 20rpx;
  margin-left:10rpx;
}
  • w-nav-component.js
Component({
  properties: {
    navItems: {type: Array, value: []}
  }
})
  • w-nav-component.json
{
  "component": true,
  "usingComponents": {}
}

5、w-swiper-component 二级目录

  • w-swiper-component.wxml
<view class="slide-swiper-view"> 
    <swiper class="swiper" indicator-color="white" indicator-dots autoplay interval="3000" circular indicator-active-color="#F73171">
        <block wx:for="{{swiperData}}" wx:key="index">
            <swiper-item><image src="{{item}}" class="slide-swiper-image" /></swiper-item>
        </block>
    </swiper>
</view>
  • w-swiper-component.wxss
.slide-swiper-view {
  height: auto;
  max-width: 760rpx;
  margin: 20rpx 20rpx;
  border-radius: 10rpx;
}

.slide-swiper-image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}
.swiper {
  height:320rpx;
}
  • w-swiper-component.js
Component({
  properties: {
    swiperData: {type: Array, value: []}
  }
})
  • w-swiper-component.json
{
  "component": true,
  "usingComponents": {}
}

6、w-video-component 二级目录

  • w-video-component.wxml
<block wx:for="{{videoItems}}" wx:key="index">
    <view class="video-container-view">
        <video class="video" src="{{item.videoPath}}" binderror="videoErrorCallback" enable-play-gesture show-mute-btn controls enable-auto-rotation controls poster="{{item.posterPath}}" title="{{item.title}}"></video>
    </view>
    <view class="video-footer-view">
        <view class="footer-item">
            <block wx:for="{{item.headPhotos}}" wx:key="index" wx:for-item="photoItem">
                <image src="{{photoItem}}" class="head-image"></image>
            </block>
        </view>
        <view class="footer-item alignment">
            <image src="{{item.likeIcon}}" class="like-image"></image>
            <text>{{item.likeTitle}}</text>
        </view>
        <view class="footer-item alignment">
            <image src="{{item.shareIcon}}" class="like-image"></image>
            <text>{{item.shareTitle}}</text>
        </view>
        <view class="footer-item alignment">
            <image src="{{item.alignmentIcon}}" class="like-image"></image>
            <text>{{item.alignmentTitle}}</text>
        </view>
    </view>
</block>
  • w-video-component.wxss
.video {width: 100%;}

.video-footer-view {
  display: flex;
  justify-content: space-evenly;
  padding: 10rpx;
}

.footer-item {text-align: center;}

.head-image {
  margin: 0 5rpx;
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
}

.like-image {
  vertical-align: middle;
  padding-right: 10rpx;
  width: 40rpx;
  height: 40rpx;
}

.alignment {
  margin-right: 5rpx;
  padding-top: 12rpx;
}
  • w-video-component.js
Component({
  properties: {
    videoItems: {type: Array, value: []}
  }
})
  • w-video-component.json
{
  "component": true,
  "usingComponents": {}
}

四、assets 目录

images 二级目录

① banner 三级目录
ad_1.png ad_2.png
② comment-map 三级目录
avatar_1.jpeg collect_icon.png coupon_icon.png crown_icon.png diamand_icon.png evaluate_2_icon.png evaluate_icon.png like_icon.png movie_a_icon.png movie_card.png music_icon.png order_icon.png pay_icon.png right_icon.png score_icon.png share_icon.png speed_icon.png theatre_icon.png wallet_icon.png
③ movie-card 三级目录
fire_icon.png price_icon.png rank_icon.png
④ scroll-view 三级目录
movie_1.jpg movie_2.jpg movie_3.jpg movie_4.jpg movie_5.jpg movie_6.jpg movie_7.jpg movie_8.jpg movie_9.jpg movie_10.jpg movie_11.jpg movie_12.jpg movie_13.jpg movie_14.jpg movie_15.jpg movie_16.jpg movie_17.jpg
⑤ searchbar 三级目录
data_icon.png down_icon.png option_icon.png polygon_icon.png scan_icon.png search_icon.png star_icon.png
⑥ swiper 三级目录
swiper_1.jpg swiper_2.jpg swiper_3.jpg swiper_4.jpg swiper_5.jpg swiper_6.jpg swiper_7.jpg
⑦ tabbar 三级目录
cinema_a_icon.png cinema_n_icon.png find_a_icon.png find_n_icon.png home_a_icon.png home_n_icon.png mine_a_icon.png mine_n_icon.png movie_a_icon.png movie_n_icon.png

五、common 目录

  • const.js
export const HIT = 'hit'
export const SOON = 'soon'
export const BOARD ='board'

相关文章

网友评论

    本文标题：May 13，2023【微信小程序】电影购票

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

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    web前端开发

    关于我们|服务条款|联系我们|May 13，2023【微信小程序】电影购票|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！