Skip to content

dev / home-with-kids-mp

Go to a project
Toggle navigation
Toggle navigation pinning
4f2b2e5e by simon
Options

默认提交

1 parent 9f6b00c9
Expand all
Inline Side-by-side
Showing 16 changed files with 405 additions and 8 deletions
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
2 "pages": [ 2 "pages": [
3 "pages/index/index", 3 "pages/index/index",
4 "pages/detail/detail", 4 "pages/detail/detail",
5 "pages/personal-list/personal-list",
5 "pages/more/more", 6 "pages/more/more",
6 "pages/poster-example/poster-example", 7 "pages/poster-example/poster-example",
7 "pages/authorize/authorize", 8 "pages/authorize/authorize",
...@@ -16,6 +17,7 @@ ...@@ -16,6 +17,7 @@
16 "usingComponents": { 17 "usingComponents": {
17 "authorize-comp": "../../component/authorize-comp/authorize-comp", 18 "authorize-comp": "../../component/authorize-comp/authorize-comp",
18 "empty-tips": "../../component/empty-tips/empty-tips", 19 "empty-tips": "../../component/empty-tips/empty-tips",
20 "shortcut": "../../component/shortcut/shortcut",
19 "van-popup": "../../ui/vant-weapp/popup/index", 21 "van-popup": "../../ui/vant-weapp/popup/index",
20 "van-sticky": "../../ui/vant-weapp/sticky/index", 22 "van-sticky": "../../ui/vant-weapp/sticky/index",
21 "van-tab": "../../ui/vant-weapp/tab/index", 23 "van-tab": "../../ui/vant-weapp/tab/index",
......
1 <view class="demo-item">demo-item</view> 1 <view class="comp">demo-item</view>
......
1 import {
2 getBindtapData
3 } from '../../utils/util';
4
5 let app = getApp();
6 Component({
7 // 样式隔离
8 // 详见 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
9 // isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
10 // apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
11 // shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）
12 options: {
13 styleIsolation: 'apply-shared'
14 },
15 properties: {
16 types: {
17 type: Array,
18 value: ["home", "return"]
19 }
20 },
21 data: {
22 // 这里是一些组件内部数据
23 typeIconMap: {
24 "home": "iconhome",
25 "return": "iconreturn"
26 }
27 },
28 methods: {
29 // 点击按按钮
30 onTapHandler(evt) {
31 let curType = getBindtapData(evt);
32 console.log("curType:", curType);
33 switch (curType) {
34 case "home":
35 app.router.push({
36 openType: "reLaunch",
37 path: "index"
38 })
39 break;
40
41 case "return":
42 app.router.push({
43 openType: "back"
44 })
45 break;
46
47 default:
48 break;
49 }
50 }
51 }
52 })
1 .comp {
2 position: fixed;
3 bottom: 10%;
4 right: 2%;
5 z-index: 91;
6 color: #ffffff;
7
8 $btnSize: 80px;
9
10 .btn {
11 width: $btnSize;
12 height: $btnSize;
13 margin-bottom: 24px;
14 border-radius: $btnSize;
15 display: flex;
16 justify-content: center;
17 align-items: center;
18 background-color: rgba($color: #000000, $alpha: 0.6);
19 }
20
21 .iconfont {
22 font-size: 48px;
23 }
24 }
1 <view class="comp">
2 <view wx:for="{{types}}" wx:key="{{index}}" data-data="{{item}}" bindtap="onTapHandler" class="btn">
3 <span class="iconfont {{typeIconMap[item+''] }}"></span>
4 </view>
5 </view>
...@@ -33,11 +33,12 @@ Page({ ...@@ -33,11 +33,12 @@ Page({
33 * 做加载更多操作 33 * 做加载更多操作
34 */ 34 */
35 onReachBottom() { 35 onReachBottom() {
36 return;
36 if (this.data.dataList.length < this.data.total) { 37 if (this.data.dataList.length < this.data.total) {
37 this.setData({ 38 this.setData({
38 page: this.data.page + 1 39 page: this.data.page + 1
39 }); 40 });
40 this.queryDataList(); 41 // this.queryDataList();
41 } 42 }
42 }, 43 },
43 44
...@@ -49,6 +50,16 @@ Page({ ...@@ -49,6 +50,16 @@ Page({
49 }) 50 })
50 }, 51 },
51 52
53
54 /**
55 * 到个人列表页面
56 */
57 toPersonalList() {
58 app.router.push({
59 path: "personalList",
60 })
61 },
62
52 /** 63 /**
53 * 请求DataList 64 * 请求DataList
54 */ 65 */
...@@ -99,9 +110,9 @@ Page({ ...@@ -99,9 +110,9 @@ Page({
99 this.hideMask(); 110 this.hideMask();
100 break; 111 break;
101 112
102 /** 113 /**
103 * 重拉数据已在 114 * 重拉数据已在
104 */ 115 */
105 case "_evt_auth_complete": 116 case "_evt_auth_complete":
106 // this.initData(); 117 // this.initData();
107 this.hideMask(); 118 this.hideMask();
......
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
2 @import '../../assets/scss/utils'; 2 @import '../../assets/scss/utils';
3 3
4 .page { 4 .page {
5 padding-bottom: $pageBottom;
6
5 .bgc {} 7 .bgc {}
6 8
7 .bg {} 9 .bg {}
...@@ -16,6 +18,7 @@ ...@@ -16,6 +18,7 @@
16 } 18 }
17 } 19 }
18 20
21 // 视频详情
19 .detail { 22 .detail {
20 position: relative; 23 position: relative;
21 width: 100%; 24 width: 100%;
...@@ -59,6 +62,7 @@ ...@@ -59,6 +62,7 @@
59 } 62 }
60 } 63 }
61 64
65 // 功能区，显示用户信息等
62 .func { 66 .func {
63 position: relative; 67 position: relative;
64 @extend .bb; 68 @extend .bb;
...@@ -140,8 +144,55 @@ ...@@ -140,8 +144,55 @@
140 144
141 } 145 }
142 146
143 .tit{ 147 // 功能区小标题
148 .fc-tit {
144 @extend .bb; 149 @extend .bb;
145 padding: 0 24px; 150 padding: 0 24px;
146 } 151 }
152
153 // 广告
154 .ad {}
155
156 // 装饰物 
157 .decoration {}
158
159 // 更多推荐
160 .more {
161 width: $contentWidth;
162 margin: 64px auto 0;
163
164 &-title {
165 color: #a2242e;
166 font-size: 48px;
167 font-weight: bold;
168 text-align: center;
169 }
170
171 // 推荐列表
172 &-list {
173 margin: 36px auto 0;
174
175 &-item {
176 display: flex;
177 justify-content: space-between;
178 border-bottom: solid 2px #dfdfdf;
179 padding: 24px 0;
180
181 .tit {
182 @extend .bb;
183 padding: 24px 0;
184 height: 230px;
185 flex: 1;
186 font-size: 36px;
187 @include ellipsis(4);
188 }
189
190 .poster {
191 width: 350px;
192 height: 230px;
193 border-radius: 8px;
194 }
195 }
196 }
197 }
147 } 198 }
......
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
4 <view class="app__content main"> 4 <view class="app__content main">
5 <view class="top-space"></view> 5 <view class="top-space"></view>
6 <view class="content"> 6 <view class="content">
7 <!-- 视频详情 -->
7 <view class="detail"> 8 <view class="detail">
8 <video objectFit="cover" class="vid" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/7e91e8a4c7b84e6fa4bada7c8617c9cf.mp4" /> 9 <video objectFit="cover" class="vid" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/7e91e8a4c7b84e6fa4bada7c8617c9cf.mp4" />
9 <view class="btn-wrap"> 10 <view class="btn-wrap">
...@@ -17,8 +18,9 @@ ...@@ -17,8 +18,9 @@
17 </button> 18 </button>
18 </view> 19 </view>
19 </view> 20 </view>
21 <!-- 功能区 -->
20 <view class="func"> 22 <view class="func">
21 <view class="user"> 23 <view bindtap="toPersonalList" class="user">
22 <image class="portrait" mode="aspectFill" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" /> 24 <image class="portrait" mode="aspectFill" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" />
23 <view class="desc"> 25 <view class="desc">
24 <view class="t1 name">我爱我家</view> 26 <view class="t1 name">我爱我家</view>
...@@ -35,7 +37,23 @@ ...@@ -35,7 +37,23 @@
35 </view> 37 </view>
36 </view> 38 </view>
37 </view> 39 </view>
38 <view class="tit">超有创意的全家福，看了你也想拍！</view> 40 <!-- 功能区小标题 -->
41 <view class="fc-tit">超有创意的全家福，看了你也想拍！</view>
42 <!-- 广告 -->
43 <view class="ad"></view>
44 <!-- 装饰物 -->
45 <view class="decoration"></view>
46 <!-- 更多推荐 -->
47 <view class="more">
48 <view class="more-title">-- 更多推荐欣赏 --</view>
49 <view class="more-list">
50 <view wx:for="{{2}}" wx:key="{{index}}" class="more-list-item">
51 <view class="tit">新政策来了！家有小孩的都要过来看看</view>
52 <image class="poster" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" />
53 </view>
54 </view>
55 </view>
39 </view> 56 </view>
40 </view> 57 </view>
41 </view> 58 </view>
59 <shortcut></shortcut>
......
...@@ -2,6 +2,9 @@ ...@@ -2,6 +2,9 @@
2 @import '../../assets/scss/utils'; 2 @import '../../assets/scss/utils';
3 3
4 .page { 4 .page {
5
6 padding-bottom: $pageBottom;
7
5 color: #333333; 8 color: #333333;
6 font-size: 24px; 9 font-size: 24px;
7 10
......
1 import {
2 getBindtapData
3 } from '../../utils/util'
4
5 let app = getApp();
6 Page({
7 data: {
8 active: 0
9 },
10 onLoad(options) {},
11 initData() {
12
13 },
14 onChange(event) {
15 wx.showToast({
16 title: `切换到标签 ${event.detail.name}`,
17 icon: 'none'
18 });
19 },
20 onVanTabsHandler(event) {
21 console.log("event:", event);
22 let {
23 index,
24 title
25 } = event.detail;
26 },
27 onVideoHandler(evt) {
28 let curItem = getBindtapData(evt);
29 let curIndex = getBindtapData(evt, "index");
30 app.router.push({
31 path: "detail",
32 query: {
33 c: curIndex + ""
34 }
35 })
36 console.log("curItem:", curItem);
37 console.log("curIndex:", curIndex);
38 },
39 /**
40 * 获取列列表
41 */
42 queryList() {
43
44 }
45 })
1 @import '../../assets/scss/mixins';
2 @import '../../assets/scss/utils';
3
4 .page {
5
6 padding-bottom: $pageBottom;
7
8 color: #333333;
9 font-size: 24px;
10
11 .bgc {
12 background-color: #efefef;
13 }
14
15 .bg {}
16
17 .main {
18 .top-space {
19 height: 120px;
20 }
21
22 .personal {
23 position: fixed;
24 top: 0;
25 z-index: 1;
26 @extend .bb;
27 padding: 24px 32px;
28 width: 100%;
29 display: flex;
30 justify-content: space-between;
31 align-items: center;
32 background-color: #ffffff;
33 border-bottom: solid 1px #efefef;
34
35 .name {
36 font-size: 32px;
37 font-weight: bold;
38 }
39
40 .portrait {
41 width: 64px;
42 height: 64px;
43 border-radius: 64px;
44 }
45 }
46
47 .content {
48 position: relative;
49 }
50
51 .list {
52 position: relative;
53 margin: 0 auto;
54 width: $contentWidth;
55
56 &-item {
57 position: relative;
58 background-color: #ffffff;
59 border-radius: 16px;
60 margin: 24px auto;
61
62 &-video {
63 display: flex;
64 justify-content: center;
65 position: relative;
66 width: $contentWidth;
67
68 .vid {
69 @include border-top-radius(16px);
70 width: $contentWidth;
71 pointer-events: none;
72 }
73
74 .tit {
75 color: #ffffff;
76 @extend .bb;
77 padding: 0 24px;
78 position: absolute;
79 width: 100%;
80 height: 64px;
81 line-height: 64px;
82 bottom: 0;
83 background-color: rgba($color: #000000, $alpha: 0.6);
84 @include border-top-radius(8px);
85 @include ellipsis(1);
86
87 }
88 }
89
90 &-func {
91 @extend .bb;
92 padding: 24px 24px;
93 height: 80px;
94 display: flex;
95 justify-content: space-between;
96 align-items: center;
97
98 .user {
99 display: flex;
100 align-items: center;
101
102 .portrait {
103 width: 48px;
104 height: 48px;
105 border-radius: 48px;
106 }
107
108 .name {
109 padding-left: 12px;
110 }
111 }
112
113 .share {
114 font-size: 24px;
115 display: flex;
116 justify-content: center;
117 align-items: center;
118 // width: 132px;
119 height: 48px;
120 color: #ffffff;
121 background-color: #3ec03c;
122 border-radius: 8px;
123 margin: 0;
124
125 .iconfont {
126 font-size: 32px;
127 }
128
129 .t1 {
130 padding: 0 6px;
131 }
132 }
133 }
134
135 }
136 }
137 }
138
139
140 .van-tab--active {
141 color: #fc464a;
142 }
143
144 .van-hairline--top-bottom:after {
145 border-width: 0;
146 }
147 }
1 <view class="page">
2 <view class="app__bgc bgc"></view>
3 <view class="app__bg bg"></view>
4 <!-- <view class="app__top-shadow"></view> -->
5 <view class="app__content main">
6 <view class="top-space"></view>
7 <view class="personal">
8 <view class="name">我爱我家 的视频列表</view>
9 <image class="portrait" mode="aspectFill" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" />
10 </view>
11 <view class="content">
12 <view class="list">
13 <view bindtap="onVideoHandler" wx:for="{{8}}" wx:key="index" data-data="{{item}}" data-index="{{index}}" class="list-item">
14 <view class="list-item-video">
15 <video objectFit="cover" class="vid" poster="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/7e91e8a4c7b84e6fa4bada7c8617c9cf.mp4" />
16 <view class="tit">这是一个视频</view>
17 </view>
18 <view class="list-item-func">
19 <view class="user">
20 <image class="portrait" mode="aspectFill" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" />
21 <text class="name">我爱我家</text>
22 </view>
23 <button class="share">
24 <span class="t1 iconfont iconwechat"></span>
25 <span class="t1">分享</span>
26 </button>
27 </view>
28 </view>
29 </view>
30 </view>
31 </view>
32 </view>
33 <shortcut></shortcut>
1 const routerPath = { 1 const routerPath = {
2 index: '/pages/index/index', 2 index: '/pages/index/index',
3 detail: '/pages/detail/detail', 3 detail: '/pages/detail/detail',
4 personalList: '/pages/personal-list/personal-list',
4 authorize: '/pages/authorize/authorize', // 授权 5 authorize: '/pages/authorize/authorize', // 授权
5 example: '/pages/example/example', 6 example: '/pages/example/example',
6 more: '/pages/more/more', 7 more: '/pages/more/more',
......