默认提交
Showing
44 changed files
with
1021 additions
and
150 deletions
This diff is collapsed.
Click to expand it.
... | @@ -16,6 +16,10 @@ Component({ | ... | @@ -16,6 +16,10 @@ Component({ |
16 | types: { | 16 | types: { |
17 | type: Array, | 17 | type: Array, |
18 | value: ["home", "return"] | 18 | value: ["home", "return"] |
19 | }, | ||
20 | pics: { | ||
21 | type: Array, | ||
22 | value: ["red-package"] | ||
19 | } | 23 | } |
20 | }, | 24 | }, |
21 | data: { | 25 | data: { |
... | @@ -44,6 +48,15 @@ Component({ | ... | @@ -44,6 +48,15 @@ Component({ |
44 | }) | 48 | }) |
45 | break; | 49 | break; |
46 | 50 | ||
51 | case "red-package": | ||
52 | wx.showModal({ | ||
53 | title: '温馨提示', | ||
54 | content: '打赏功能尚未开放,敬请期待!', | ||
55 | showCancel: false, | ||
56 | success(res) {} | ||
57 | }); | ||
58 | break; | ||
59 | |||
47 | default: | 60 | default: |
48 | break; | 61 | break; |
49 | } | 62 | } | ... | ... |
... | @@ -15,10 +15,18 @@ | ... | @@ -15,10 +15,18 @@ |
15 | display: flex; | 15 | display: flex; |
16 | justify-content: center; | 16 | justify-content: center; |
17 | align-items: center; | 17 | align-items: center; |
18 | background-color: rgba($color: #000000, $alpha: 0.6); | 18 | |
19 | } | 19 | } |
20 | 20 | ||
21 | .iconfont { | 21 | .iconfont { |
22 | font-size: 64px; | 22 | font-size: 64px; |
23 | } | 23 | } |
24 | |||
25 | .pics{ | ||
26 | height: $btnSize; | ||
27 | } | ||
28 | |||
29 | .point{ | ||
30 | background-color: rgba($color: #000000, $alpha: 0.6); | ||
31 | } | ||
24 | } | 32 | } | ... | ... |
1 | <view class="comp"> | 1 | <view class="comp"> |
2 | <view wx:for="{{types}}" wx:key="{{index}}" data-data="{{item}}" bindtap="onTapHandler" class="btn"> | 2 | <view wx:for="{{types}}" wx:key="{{index}}" data-data="{{item}}" bindtap="onTapHandler" class="btn point"> |
3 | <span class="iconfont {{typeIconMap[item+''] }}"></span> | 3 | <span class="iconfont {{typeIconMap[item+''] }}"></span> |
4 | </view> | 4 | </view> |
5 | <view wx:for="{{pics}}" wx:key="{{index}}" data-data="{{item}}" bindtap="onTapHandler" class="btn"> | ||
6 | <image mode="aspectFit" src="../../image/shortcut/red-package.png" class="pics" /> | ||
7 | </view> | ||
5 | </view> | 8 | </view> | ... | ... |
... | @@ -2,13 +2,13 @@ let ENV_CONFIG = require('./env/index'); | ... | @@ -2,13 +2,13 @@ let ENV_CONFIG = require('./env/index'); |
2 | 2 | ||
3 | const APPID = '' | 3 | const APPID = '' |
4 | /** ====每次发布版本记得修改此环境配置==== */ | 4 | /** ====每次发布版本记得修改此环境配置==== */ |
5 | const ENV = 'dev'; // Dev Prod | 5 | const ENV = 'Dev'; // Dev Prod |
6 | const NET_CONFIG = ENV_CONFIG[ENV]; | 6 | const NET_CONFIG = ENV_CONFIG[ENV]; |
7 | const MOCKAPI = ENV_CONFIG.mockApi; | 7 | const MOCKAPI = ENV_CONFIG.mockApi; |
8 | 8 | ||
9 | module.exports = { | 9 | module.exports = { |
10 | APPID, | 10 | APPID, |
11 | ENV, | 11 | ENV, |
12 | NET_CONFIG, | 12 | NET_CONFIG, |
13 | MOCKAPI | 13 | MOCKAPI |
14 | } | 14 | } | ... | ... |
1 | module.exports = { | 1 | module.exports = { |
2 | mockApi: 'http://mock.simonfungc.com', | 2 | mockApi: 'http://mock.simonfungc.com', |
3 | Dev: { | 3 | Dev: { |
4 | baseApi: 'https://ow.go.qudone.com/xxx', | 4 | baseApi: 'https://ow.go.qudone.com/kd_jyes_api/minipro', |
5 | commonApi: 'https://api.k.wxpai.cn/bizproxy' | 5 | commonApi: 'https://api.k.wxpai.cn/bizproxy' |
6 | }, | 6 | }, |
7 | Test: { | 7 | Test: { | ... | ... |
... | @@ -2,7 +2,14 @@ module.exports = { | ... | @@ -2,7 +2,14 @@ module.exports = { |
2 | login: "/login", // post 通过wxcode换取sessionId | 2 | login: "/login", // post 通过wxcode换取sessionId |
3 | register: '/register', // post 注册(用户授权) | 3 | register: '/register', // post 注册(用户授权) |
4 | 4 | ||
5 | dataList: '/dataList', // 测试接口 | 5 | // dataList: '/dataList', // 测试接口 |
6 | bannerList: '/banner/list', // 轮播图 | ||
7 | tabList: '/tab/list', // 获取标签 | ||
8 | videoList: '/video/list', // 视频列表 | ||
9 | videoAcccout: '/video/acccout', // 帐号下的视频 | ||
10 | videoDetail: '/video/detail', // 视频详情 | ||
11 | rewardDetail: '/hide/order', // 获得打赏视频 | ||
12 | videoMore: '/video/more', // 更多推荐 | ||
6 | 13 | ||
7 | /** | 14 | /** |
8 | * 通用接口 | 15 | * 通用接口 | ... | ... |
src/image/shortcut/red-package.png
0 → 100644
1.46 KB
... | @@ -5,40 +5,60 @@ import { | ... | @@ -5,40 +5,60 @@ import { |
5 | let app = getApp(); | 5 | let app = getApp(); |
6 | Page({ | 6 | Page({ |
7 | data: { | 7 | data: { |
8 | isOverShare: true, | ||
8 | authorizeVisible: false, | 9 | authorizeVisible: false, |
9 | total: 0, | 10 | total: 0, |
10 | page: 1, | 11 | page: 1, |
11 | size: 10, | 12 | size: 10, |
13 | dataList: [], | ||
12 | productList: [], // 产品列表 | 14 | productList: [], // 产品列表 |
13 | indexInfo: {}, | 15 | indexInfo: {}, |
14 | userInfo: {} | 16 | userInfo: {}, |
17 | options: {}, | ||
18 | detailData: {} | ||
19 | }, | ||
20 | onShareAppMessage() { | ||
21 | let detailData = this.data.detailData; | ||
22 | let title = detailData && detailData.videoName || ""; | ||
23 | let path = `pages/detail/detail?c=${detailData.videoCode}`; | ||
24 | let imageUrl = detailData && detailData.thumbnail || ""; | ||
25 | return { | ||
26 | title, | ||
27 | path, | ||
28 | imageUrl | ||
29 | } | ||
15 | }, | 30 | }, |
16 | onShareAppMessage() {}, | ||
17 | showAuth() { | 31 | showAuth() { |
18 | this.setData({ | 32 | this.setData({ |
19 | authorizeVisible: true | 33 | authorizeVisible: true |
20 | }) | 34 | }) |
21 | }, | 35 | }, |
22 | onLoad(options) {}, | 36 | onLoad(options) { |
37 | this.setData({ | ||
38 | options | ||
39 | }); | ||
40 | this.queryVideoDetail(); | ||
41 | this.initData(); | ||
42 | }, | ||
23 | 43 | ||
24 | /** | 44 | /** |
25 | * 基础方法 | 45 | * 基础方法 |
26 | * 授权完毕重拉数据用 | 46 | * 授权完毕重拉数据用 |
27 | */ | 47 | */ |
28 | initData() { | 48 | initData() { |
29 | 49 | this.queryVideoMore(); | |
30 | }, | 50 | }, |
51 | |||
31 | /** | 52 | /** |
32 | * 到达底部 | 53 | * 到达底部 |
33 | * 做加载更多操作 | 54 | * 做加载更多操作 |
34 | */ | 55 | */ |
35 | onReachBottom() { | 56 | onReachBottom() { |
36 | return; | ||
37 | if (this.data.dataList.length < this.data.total) { | 57 | if (this.data.dataList.length < this.data.total) { |
38 | this.setData({ | 58 | this.setData({ |
39 | page: this.data.page + 1 | 59 | page: this.data.page + 1 |
40 | }); | 60 | }); |
41 | // this.queryDataList(); | 61 | this.queryVideoMore(); |
42 | } | 62 | } |
43 | }, | 63 | }, |
44 | 64 | ||
... | @@ -50,25 +70,41 @@ Page({ | ... | @@ -50,25 +70,41 @@ Page({ |
50 | }) | 70 | }) |
51 | }, | 71 | }, |
52 | 72 | ||
53 | |||
54 | /** | 73 | /** |
55 | * 到个人列表页面 | 74 | * 到个人列表页面 |
56 | */ | 75 | */ |
57 | toPersonalList() { | 76 | toPersonalList() { |
77 | let detailData = this.data.detailData; | ||
78 | if (detailData && detailData.accountCode) { | ||
79 | detailData.c = detailData.accountCode; | ||
80 | app.router.push({ | ||
81 | path: "personalList", | ||
82 | query: detailData | ||
83 | }) | ||
84 | } | ||
85 | }, | ||
86 | |||
87 | /** | ||
88 | * 跳转详情页面 | ||
89 | */ | ||
90 | onDetailHandler(evt) { | ||
91 | let curItem = getBindtapData(evt); | ||
58 | app.router.push({ | 92 | app.router.push({ |
59 | path: "personalList", | 93 | path: "detail", |
94 | query: { | ||
95 | c: curItem.videoCode || "" | ||
96 | } | ||
60 | }) | 97 | }) |
61 | }, | 98 | }, |
62 | 99 | ||
63 | /** | 100 | /** |
64 | * 请求DataList | 101 | * 请求DataList |
65 | */ | 102 | */ |
66 | queryDataList() { | 103 | queryVideoMore() { |
67 | return; | ||
68 | return new Promise((resolve, reject) => { | 104 | return new Promise((resolve, reject) => { |
69 | app.post({ | 105 | app.post({ |
70 | sid: false, | 106 | sid: false, |
71 | url: app.api.dataList, | 107 | url: app.api.videoMore, |
72 | data: { | 108 | data: { |
73 | page: this.data.page, | 109 | page: this.data.page, |
74 | size: this.data.size, | 110 | size: this.data.size, |
... | @@ -76,6 +112,7 @@ Page({ | ... | @@ -76,6 +112,7 @@ Page({ |
76 | }).then((result) => { | 112 | }).then((result) => { |
77 | let dataList = result.list; | 113 | let dataList = result.list; |
78 | dataList = this.data.dataList.concat(dataList); | 114 | dataList = this.data.dataList.concat(dataList); |
115 | console.log("dataList:", dataList); | ||
79 | this.setData({ | 116 | this.setData({ |
80 | dataList: dataList, | 117 | dataList: dataList, |
81 | total: result.total | 118 | total: result.total |
... | @@ -86,6 +123,27 @@ Page({ | ... | @@ -86,6 +123,27 @@ Page({ |
86 | }, | 123 | }, |
87 | 124 | ||
88 | /** | 125 | /** |
126 | * 视频详情 | ||
127 | */ | ||
128 | queryVideoDetail() { | ||
129 | return new Promise((resolve, reject) => { | ||
130 | app.post({ | ||
131 | url: app.api.videoDetail, | ||
132 | data: { | ||
133 | videoCode: this.data.options.c | ||
134 | } | ||
135 | }).then((result) => { | ||
136 | this.setData({ | ||
137 | detailData: result | ||
138 | }) | ||
139 | resolve(result); | ||
140 | }).catch((err) => { | ||
141 | reject(err); | ||
142 | }); | ||
143 | }); | ||
144 | }, | ||
145 | |||
146 | /** | ||
89 | * 隐藏蒙层 | 147 | * 隐藏蒙层 |
90 | */ | 148 | */ |
91 | hideMask() { | 149 | hideMask() { | ... | ... |
... | @@ -24,11 +24,13 @@ | ... | @@ -24,11 +24,13 @@ |
24 | width: 100%; | 24 | width: 100%; |
25 | height: 944px; | 25 | height: 944px; |
26 | background-color: #333333; | 26 | background-color: #333333; |
27 | text-align: center; | ||
27 | 28 | ||
28 | .vid { | 29 | .vid { |
29 | margin: 232px auto 0; | 30 | text-align: center; |
31 | margin: 160px auto 0; | ||
30 | width: 100%; | 32 | width: 100%; |
31 | height: 360px; | 33 | // height: 400px; |
32 | } | 34 | } |
33 | 35 | ||
34 | .btn-wrap { | 36 | .btn-wrap { | ... | ... |
... | @@ -6,13 +6,13 @@ | ... | @@ -6,13 +6,13 @@ |
6 | <view class="content"> | 6 | <view class="content"> |
7 | <!-- 视频详情 --> | 7 | <!-- 视频详情 --> |
8 | <view class="detail"> | 8 | <view class="detail"> |
9 | <video objectFit="cover" class="vid" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/7e91e8a4c7b84e6fa4bada7c8617c9cf.mp4" /> | 9 | <video objectFit="cover" class="vid" poster="{{detailData.thumbnail}}" src="{{detailData.videoUrl}}" /> |
10 | <view class="btn-wrap"> | 10 | <view class="btn-wrap"> |
11 | <button class="btn"> | 11 | <button open-type="share" class="btn"> |
12 | <span class="t1 iconfont iconplane"></span> | 12 | <span class="t1 iconfont iconplane"></span> |
13 | <span class="t1">分享给好友</span> | 13 | <span class="t1">分享给好友</span> |
14 | </button> | 14 | </button> |
15 | <button class="btn btn2"> | 15 | <button open-type="share" class="btn btn2"> |
16 | <span class="t1 iconfont iconplane"></span> | 16 | <span class="t1 iconfont iconplane"></span> |
17 | <span class="t1">分享到群</span> | 17 | <span class="t1">分享到群</span> |
18 | </button> | 18 | </button> |
... | @@ -21,10 +21,10 @@ | ... | @@ -21,10 +21,10 @@ |
21 | <!-- 功能区 --> | 21 | <!-- 功能区 --> |
22 | <view class="func"> | 22 | <view class="func"> |
23 | <view bindtap="toPersonalList" class="user"> | 23 | <view bindtap="toPersonalList" class="user"> |
24 | <image class="portrait" mode="aspectFill" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" /> | 24 | <image class="portrait" mode="aspectFill" src="{{detailData.headImage}}" /> |
25 | <view class="desc"> | 25 | <view class="desc"> |
26 | <view class="t1 name">我爱我家</view> | 26 | <view class="t1 name">{{detailData.accountName}}</view> |
27 | <view class="t1 num">280个视频</view> | 27 | <view class="t1 num">{{detailData.count || 0}}个视频</view> |
28 | </view> | 28 | </view> |
29 | </view> | 29 | </view> |
30 | <view class="btn-wrap"> | 30 | <view class="btn-wrap"> |
... | @@ -48,10 +48,14 @@ | ... | @@ -48,10 +48,14 @@ |
48 | <view class="more"> | 48 | <view class="more"> |
49 | <view class="more-title">-- 更多推荐欣赏 --</view> | 49 | <view class="more-title">-- 更多推荐欣赏 --</view> |
50 | <view class="more-list"> | 50 | <view class="more-list"> |
51 | <view wx:for="{{2}}" wx:key="{{index}}" class="more-list-item"> | 51 | <view bindtap="onDetailHandler" data-data="{{item}}" data-index="{{index}}" wx:for="{{dataList}}" wx:key="{{index}}" class="more-list-item"> |
52 | <view class="tit">{{item.videoName}}</view> | ||
53 | <image class="poster" src="{{item.thumbnail}}" /> | ||
54 | </view> | ||
55 | <!-- <view wx:for="{{2}}" wx:key="{{index}}" class="more-list-item"> | ||
52 | <view class="tit">新政策来了!家有小孩的都要过来看看</view> | 56 | <view class="tit">新政策来了!家有小孩的都要过来看看</view> |
53 | <image class="poster" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" /> | 57 | <image class="poster" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" /> |
54 | </view> | 58 | </view> --> |
55 | </view> | 59 | </view> |
56 | </view> | 60 | </view> |
57 | <!-- 返回首页按钮 --> | 61 | <!-- 返回首页按钮 --> |
... | @@ -62,4 +66,5 @@ | ... | @@ -62,4 +66,5 @@ |
62 | </view> | 66 | </view> |
63 | </view> | 67 | </view> |
64 | </view> | 68 | </view> |
65 | <shortcut></shortcut> | 69 | <!-- <shortcut types="{{[]}}" pics="{{['red-package']}}"></shortcut> --> |
70 | <shortcut ></shortcut> | ... | ... |
... | @@ -5,41 +5,195 @@ import { | ... | @@ -5,41 +5,195 @@ import { |
5 | let app = getApp(); | 5 | let app = getApp(); |
6 | Page({ | 6 | Page({ |
7 | data: { | 7 | data: { |
8 | active: 0 | 8 | authorizeVisible: false, |
9 | total: 0, | ||
10 | page: 1, | ||
11 | size: 10, | ||
12 | dataList: [], | ||
13 | tabList: [], // 标签列表 | ||
14 | bannerList: [], | ||
15 | curTab: {}, | ||
16 | queueCode: "", // 队列标识,每次请求,会返回一个队列标识,用户加载更多时候请携带queueCode参数 | ||
17 | active: 0, | ||
18 | }, | ||
19 | onShareAppMessage() {}, | ||
20 | showAuth() { | ||
21 | this.setData({ | ||
22 | authorizeVisible: true | ||
23 | }) | ||
24 | }, | ||
25 | onLoad(options) { | ||
26 | this.initData(); | ||
9 | }, | 27 | }, |
10 | onLoad(options) {}, | ||
11 | initData() { | 28 | initData() { |
29 | this.queryTabList().then((result) => { | ||
30 | this.setData({ | ||
31 | curTab: this.data.tabList[0] | ||
32 | }) | ||
33 | this.resetPage(); | ||
34 | this.queryBannerList(); | ||
35 | this.queryVideoList(); | ||
36 | }); | ||
37 | }, | ||
38 | /** | ||
39 | * 到达底部 | ||
40 | * 做加载更多操作 | ||
41 | */ | ||
42 | onReachBottom() { | ||
43 | console.log("onReachBottom"); | ||
44 | if (this.data.dataList.length < this.data.total) { | ||
45 | this.setData({ | ||
46 | page: this.data.page + 1 | ||
47 | }); | ||
48 | this.queryVideoList(); | ||
49 | } | ||
50 | }, | ||
12 | 51 | ||
52 | // 重置页面列表 点击搜索条件时需要 | ||
53 | resetPage() { | ||
54 | this.setData({ | ||
55 | page: 1, | ||
56 | dataList: [], | ||
57 | queueCode: "", | ||
58 | }) | ||
13 | }, | 59 | }, |
14 | onChange(event) { | 60 | onTabsChange(event) { |
15 | wx.showToast({ | 61 | // console.log("this.data.tabList:", this.data.tabList); |
16 | title: `切换到标签 ${event.detail.name}`, | 62 | // if (this.data.tabList && this.data.tabList.length > 0) { |
17 | icon: 'none' | 63 | // this.setData({ |
18 | }); | 64 | // curTab: this.data.tabList[event.detail.index] |
65 | // }) | ||
66 | // this.resetPage(); | ||
67 | // this.queryVideoList(); | ||
68 | // } | ||
19 | }, | 69 | }, |
20 | onVanTabsHandler(event) { | 70 | onVanTabsHandler(event) { |
21 | console.log("event:", event); | ||
22 | let { | 71 | let { |
23 | index, | 72 | index, |
24 | title | 73 | title |
25 | } = event.detail; | 74 | } = event.detail; |
75 | if (this.data.tabList && this.data.tabList.length > 0) { | ||
76 | this.setData({ | ||
77 | curTab: this.data.tabList[event.detail.index] | ||
78 | }) | ||
79 | this.resetPage(); | ||
80 | this.queryVideoList(); | ||
81 | } | ||
26 | }, | 82 | }, |
27 | onVideoHandler(evt) { | 83 | onDetailHandler(evt) { |
28 | let curItem = getBindtapData(evt); | 84 | let curItem = getBindtapData(evt); |
29 | let curIndex = getBindtapData(evt, "index"); | ||
30 | app.router.push({ | 85 | app.router.push({ |
31 | path: "detail", | 86 | path: "detail", |
32 | query: { | 87 | query: { |
33 | c: curIndex + "" | 88 | c: curItem.videoCode || "" |
34 | } | 89 | } |
35 | }) | 90 | }) |
36 | console.log("curItem:", curItem); | ||
37 | console.log("curIndex:", curIndex); | ||
38 | }, | 91 | }, |
39 | /** | 92 | /** |
40 | * 获取列列表 | 93 | * 获取tab列表 |
94 | */ | ||
95 | queryTabList() { | ||
96 | return new Promise((resolve, reject) => { | ||
97 | app.post({ | ||
98 | sid: false, | ||
99 | url: app.api.tabList, | ||
100 | data: {} | ||
101 | }).then((result) => { | ||
102 | this.setData({ | ||
103 | tabList: result | ||
104 | }) | ||
105 | resolve(result); | ||
106 | }).catch((err) => { | ||
107 | reject(err) | ||
108 | }); | ||
109 | }); | ||
110 | }, | ||
111 | |||
112 | /** | ||
113 | * 获取banner列表 | ||
114 | */ | ||
115 | queryBannerList() { | ||
116 | return new Promise((resolve, reject) => { | ||
117 | app.post({ | ||
118 | sid: false, | ||
119 | url: app.api.bannerList, | ||
120 | data: { | ||
121 | tabCode: this.data.curTab.tabCode || "", | ||
122 | } | ||
123 | }).then((result) => { | ||
124 | this.setData({ | ||
125 | bannerList: result | ||
126 | }) | ||
127 | resolve(result); | ||
128 | }).catch((err) => { | ||
129 | reject(err) | ||
130 | }); | ||
131 | }); | ||
132 | }, | ||
133 | |||
134 | /** | ||
135 | * 获取视频列表 | ||
136 | */ | ||
137 | queryVideoList() { | ||
138 | return new Promise((resolve, reject) => { | ||
139 | app.post({ | ||
140 | sid: true, | ||
141 | url: app.api.videoList, | ||
142 | data: { | ||
143 | page: this.data.page, | ||
144 | size: this.data.size, | ||
145 | queueCode: this.data.queueCode, | ||
146 | tabCode: this.data.curTab.tabCode || "", | ||
147 | } | ||
148 | }).then((result) => { | ||
149 | let dataList = result.list; | ||
150 | dataList = this.data.dataList.concat(dataList); | ||
151 | this.setData({ | ||
152 | dataList: dataList, | ||
153 | total: result.total, | ||
154 | queueCode: result.queueCode, | ||
155 | }) | ||
156 | resolve(result); | ||
157 | }).catch((err) => { | ||
158 | reject(err) | ||
159 | }); | ||
160 | }); | ||
161 | }, | ||
162 | /** | ||
163 | * 隐藏蒙层 | ||
164 | */ | ||
165 | hideMask() { | ||
166 | this.setData({ | ||
167 | productDetailVisible: false, | ||
168 | authorizeVisible: false, | ||
169 | }) | ||
170 | }, | ||
171 | /** | ||
172 | * 子组件事件 | ||
173 | * @param {*} evt | ||
41 | */ | 174 | */ |
42 | queryList() { | 175 | evtcomp(evt) { |
176 | let { | ||
177 | name, | ||
178 | data | ||
179 | } = evt.detail; | ||
180 | switch (name) { | ||
181 | |||
182 | // 隐藏蒙层 | ||
183 | case "_evt_hide_mask": | ||
184 | this.hideMask(); | ||
185 | break; | ||
43 | 186 | ||
44 | } | 187 | /** |
188 | * 重拉数据已在 | ||
189 | */ | ||
190 | case "_evt_auth_complete": | ||
191 | // this.initData(); | ||
192 | this.hideMask(); | ||
193 | break; | ||
194 | |||
195 | default: | ||
196 | break; | ||
197 | } | ||
198 | }, | ||
45 | }) | 199 | }) | ... | ... |
... | @@ -2,7 +2,7 @@ | ... | @@ -2,7 +2,7 @@ |
2 | @import '../../assets/scss/utils'; | 2 | @import '../../assets/scss/utils'; |
3 | 3 | ||
4 | .page { | 4 | .page { |
5 | 5 | $contentWidth: 670px; | |
6 | padding-bottom: $pageBottom; | 6 | padding-bottom: $pageBottom; |
7 | 7 | ||
8 | color: #333333; | 8 | color: #333333; |
... | @@ -21,6 +21,39 @@ | ... | @@ -21,6 +21,39 @@ |
21 | 21 | ||
22 | .content { | 22 | .content { |
23 | position: relative; | 23 | position: relative; |
24 | padding-top: 24px; | ||
25 | |||
26 | } | ||
27 | |||
28 | .banner { | ||
29 | position: relative; | ||
30 | |||
31 | .swiper { | ||
32 | width: $contentWidth; | ||
33 | height: 280px; | ||
34 | margin: 0 auto; | ||
35 | |||
36 | .swiper-image { | ||
37 | width: $contentWidth; | ||
38 | height: 250px; | ||
39 | } | ||
40 | } | ||
41 | |||
42 | .tit { | ||
43 | position: absolute; | ||
44 | bottom: 12px; | ||
45 | width: 750px; | ||
46 | height: 64px; | ||
47 | line-height: 64px; | ||
48 | left: 0; | ||
49 | right: 0; | ||
50 | margin: 0 auto; | ||
51 | text-align: center; | ||
52 | background-color: rgba($color: #000000, $alpha: 0.7); | ||
53 | color: #ffffff; | ||
54 | font-size: 30px; | ||
55 | |||
56 | } | ||
24 | } | 57 | } |
25 | 58 | ||
26 | .list { | 59 | .list { |
... | @@ -39,11 +72,13 @@ | ... | @@ -39,11 +72,13 @@ |
39 | justify-content: center; | 72 | justify-content: center; |
40 | position: relative; | 73 | position: relative; |
41 | width: $contentWidth; | 74 | width: $contentWidth; |
75 | background-color: #dddddd; | ||
42 | 76 | ||
43 | .vid { | 77 | .vid { |
44 | @include border-top-radius(16px); | 78 | @include border-top-radius(16px); |
45 | width: $contentWidth; | 79 | width: $contentWidth; |
46 | pointer-events: none; | 80 | pointer-events: none; |
81 | |||
47 | } | 82 | } |
48 | 83 | ||
49 | .tit { | 84 | .tit { |
... | @@ -61,6 +96,19 @@ | ... | @@ -61,6 +96,19 @@ |
61 | @include ellipsis(1); | 96 | @include ellipsis(1); |
62 | 97 | ||
63 | } | 98 | } |
99 | |||
100 | .iconfont { | ||
101 | font-size: 160px; | ||
102 | position: absolute; | ||
103 | left: 0; | ||
104 | right: 0; | ||
105 | top: 100px; | ||
106 | margin: 0 auto; | ||
107 | text-align: center; | ||
108 | font-weight: bold; | ||
109 | // color: #efefef; | ||
110 | color: #ffffff; | ||
111 | } | ||
64 | } | 112 | } |
65 | 113 | ||
66 | &-func { | 114 | &-func { |
... | @@ -89,7 +137,7 @@ | ... | @@ -89,7 +137,7 @@ |
89 | } | 137 | } |
90 | 138 | ||
91 | .share { | 139 | .share { |
92 | font-size: 30px; | 140 | font-size: 30px; |
93 | display: flex; | 141 | display: flex; |
94 | justify-content: center; | 142 | justify-content: center; |
95 | align-items: center; | 143 | align-items: center; |
... | @@ -122,3 +170,11 @@ | ... | @@ -122,3 +170,11 @@ |
122 | border-width: 0; | 170 | border-width: 0; |
123 | } | 171 | } |
124 | } | 172 | } |
173 | |||
174 | .red-p { | ||
175 | .comp { | ||
176 | bottom: auto; | ||
177 | top: 15%; | ||
178 | } | ||
179 | |||
180 | } | ... | ... |
... | @@ -5,16 +5,41 @@ | ... | @@ -5,16 +5,41 @@ |
5 | <view class="app__content main"> | 5 | <view class="app__content main"> |
6 | <view class="top-space"></view> | 6 | <view class="top-space"></view> |
7 | <van-sticky> | 7 | <van-sticky> |
8 | <van-tabs active="{{ active }}" bind:click="onVanTabsHandler"> | 8 | <van-tabs ellipsis="{{ false }}" active="{{ active }}" bind:click="onVanTabsHandler" bind:change="onTabsChange"> |
9 | <van-tab title="精彩推荐"></van-tab> | 9 | <van-tab wx:for="{{tabList}}" wx:key="{{index}}" title="{{item.tabName}}"></van-tab> |
10 | <van-tab title="一起旅行"></van-tab> | ||
11 | <van-tab title="齐家欢乐"></van-tab> | ||
12 | <van-tab title="童趣无限"></van-tab> | ||
13 | </van-tabs> | 10 | </van-tabs> |
14 | </van-sticky> | 11 | </van-sticky> |
15 | <view class="content"> | 12 | <view class="content"> |
13 | <view class="banner" wx:if="{{bannerList && bannerList.length>0}}"> | ||
14 | <swiper class="swiper" indicator-color="rgba(0,0,0,.3)" indicator-active-color="rgba(255,255,255,1)" indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{500}}"> | ||
15 | <block wx:for="{{bannerList}}" wx:key="{{index}}"> | ||
16 | <swiper-item> | ||
17 | <image class="swiper-image" src="{{item.imageUrl}}" mode="aspectFill" /> | ||
18 | </swiper-item> | ||
19 | </block> | ||
20 | </swiper> | ||
21 | <view class="tit">banner名字</view> | ||
22 | </view> | ||
16 | <view class="list"> | 23 | <view class="list"> |
17 | <view bindtap="onVideoHandler" wx:for="{{8}}" wx:key="index" data-data="{{item}}" data-index="{{index}}" class="list-item"> | 24 | <view wx:for="{{dataList}}" wx:key="index" class="list-item"> |
25 | <view bindtap="onDetailHandler" data-data="{{item}}" data-index="{{index}}" class="list-item-video"> | ||
26 | <!-- <video objectFit="cover" class="vid" poster="{{item.thumbnail}}" src="{{item.videoUrl}}" /> --> | ||
27 | <image src="{{item.thumbnail}}" mode="aspectFill" /> | ||
28 | <view class="tit">{{item.videoName}}</view> | ||
29 | <span class="iconfont iconicon-test16"></span> | ||
30 | </view> | ||
31 | <view class="list-item-func"> | ||
32 | <view class="user"> | ||
33 | <image class="portrait" mode="aspectFill" src="{{item.headImage}}" /> | ||
34 | <text class="name">{{item.accountName || ""}}</text> | ||
35 | </view> | ||
36 | <button class="share" open-type="share"> | ||
37 | <span class="t1 iconfont iconwechat"></span> | ||
38 | <span class="t1">分享</span> | ||
39 | </button> | ||
40 | </view> | ||
41 | </view> | ||
42 | <!-- <view bindtap="onDetailHandler" wx:for="{{8}}" wx:key="index" data-data="{{item}}" data-index="{{index}}" class="list-item"> | ||
18 | <view class="list-item-video"> | 43 | <view class="list-item-video"> |
19 | <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" /> | 44 | <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" /> |
20 | <view class="tit">这是一个视频</view> | 45 | <view class="tit">这是一个视频</view> |
... | @@ -25,12 +50,14 @@ | ... | @@ -25,12 +50,14 @@ |
25 | <text class="name">我爱我家</text> | 50 | <text class="name">我爱我家</text> |
26 | </view> | 51 | </view> |
27 | <button class="share"> | 52 | <button class="share"> |
28 | <span class="t1 iconfont iconwechat"></span> | 53 | <span class="t1 iconfont iconwechat"></span> |
29 | <span class="t1">分享</span> | 54 | <span class="t1">分享</span> |
30 | </button> | 55 | </button> |
31 | </view> | 56 | </view> |
32 | </view> | 57 | </view> --> |
33 | </view> | 58 | </view> |
34 | </view> | 59 | </view> |
35 | </view> | 60 | </view> |
36 | </view> | 61 | </view> |
62 | |||
63 | <shortcut class="red-p" types="{{[]}}" pics="{{['red-package']}}"></shortcut> | ... | ... |
... | @@ -5,41 +5,132 @@ import { | ... | @@ -5,41 +5,132 @@ import { |
5 | let app = getApp(); | 5 | let app = getApp(); |
6 | Page({ | 6 | Page({ |
7 | data: { | 7 | data: { |
8 | active: 0 | 8 | isOverShare: true, |
9 | authorizeVisible: false, | ||
10 | total: 0, | ||
11 | page: 1, | ||
12 | size: 10, | ||
13 | dataList: [], | ||
14 | options: {}, | ||
9 | }, | 15 | }, |
10 | onLoad(options) {}, | 16 | onShareAppMessage() { |
11 | initData() { | 17 | let detailData = this.data.detailData; |
12 | 18 | let title = detailData && detailData.videoName || ""; | |
19 | let path = `pages/detail/detail?c=${detailData.videoCode}`; | ||
20 | let imageUrl = detailData && detailData.thumbnail || ""; | ||
21 | return { | ||
22 | title, | ||
23 | path, | ||
24 | imageUrl | ||
25 | } | ||
26 | }, | ||
27 | showAuth() { | ||
28 | this.setData({ | ||
29 | authorizeVisible: true | ||
30 | }) | ||
13 | }, | 31 | }, |
14 | onChange(event) { | 32 | onLoad(options) { |
15 | wx.showToast({ | 33 | let tempOptions = JSON.parse(decodeURIComponent(JSON.stringify(options))); |
16 | title: `切换到标签 ${event.detail.name}`, | 34 | this.setData({ |
17 | icon: 'none' | 35 | options: tempOptions |
18 | }); | 36 | }); |
37 | this.initData(); | ||
19 | }, | 38 | }, |
20 | onVanTabsHandler(event) { | 39 | initData() { |
21 | console.log("event:", event); | 40 | this.resetPage(); |
22 | let { | 41 | this.queryVideoList(); |
23 | index, | ||
24 | title | ||
25 | } = event.detail; | ||
26 | }, | 42 | }, |
27 | onVideoHandler(evt) { | 43 | /** |
44 | * 到达底部 | ||
45 | * 做加载更多操作 | ||
46 | */ | ||
47 | onReachBottom() { | ||
48 | if (this.data.dataList.length < this.data.total) { | ||
49 | this.setData({ | ||
50 | page: this.data.page + 1 | ||
51 | }); | ||
52 | this.queryVideoList(); | ||
53 | } | ||
54 | }, | ||
55 | |||
56 | // 重置页面列表 点击搜索条件时需要 | ||
57 | resetPage() { | ||
58 | this.setData({ | ||
59 | page: 1, | ||
60 | dataList: [], | ||
61 | queueCode: "", | ||
62 | }) | ||
63 | }, | ||
64 | onDetailHandler(evt) { | ||
28 | let curItem = getBindtapData(evt); | 65 | let curItem = getBindtapData(evt); |
29 | let curIndex = getBindtapData(evt, "index"); | ||
30 | app.router.push({ | 66 | app.router.push({ |
31 | path: "detail", | 67 | path: "detail", |
32 | query: { | 68 | query: { |
33 | c: curIndex + "" | 69 | c: curItem.videoCode || "" |
34 | } | 70 | } |
35 | }) | 71 | }) |
36 | console.log("curItem:", curItem); | ||
37 | console.log("curIndex:", curIndex); | ||
38 | }, | 72 | }, |
73 | |||
39 | /** | 74 | /** |
40 | * 获取列列表 | 75 | * 获取视频列表 |
41 | */ | 76 | */ |
42 | queryList() { | 77 | queryVideoList() { |
78 | return new Promise((resolve, reject) => { | ||
79 | app.post({ | ||
80 | url: app.api.videoAcccout, | ||
81 | data: { | ||
82 | page: this.data.page, | ||
83 | size: this.data.size, | ||
84 | accountCode: this.data.options.c | ||
85 | } | ||
86 | }).then((result) => { | ||
87 | let dataList = result.list; | ||
88 | dataList = this.data.dataList.concat(dataList); | ||
89 | this.setData({ | ||
90 | dataList: dataList, | ||
91 | total: result.total, | ||
92 | }) | ||
93 | resolve(result); | ||
94 | }).catch((err) => { | ||
95 | reject(err) | ||
96 | }); | ||
97 | }); | ||
98 | }, | ||
99 | /** | ||
100 | * 隐藏蒙层 | ||
101 | */ | ||
102 | hideMask() { | ||
103 | this.setData({ | ||
104 | productDetailVisible: false, | ||
105 | authorizeVisible: false, | ||
106 | }) | ||
107 | }, | ||
108 | /** | ||
109 | * 子组件事件 | ||
110 | * @param {*} evt | ||
111 | */ | ||
112 | evtcomp(evt) { | ||
113 | let { | ||
114 | name, | ||
115 | data | ||
116 | } = evt.detail; | ||
117 | switch (name) { | ||
43 | 118 | ||
44 | } | 119 | // 隐藏蒙层 |
120 | case "_evt_hide_mask": | ||
121 | this.hideMask(); | ||
122 | break; | ||
123 | |||
124 | /** | ||
125 | * 重拉数据已在 | ||
126 | */ | ||
127 | case "_evt_auth_complete": | ||
128 | // this.initData(); | ||
129 | this.hideMask(); | ||
130 | break; | ||
131 | |||
132 | default: | ||
133 | break; | ||
134 | } | ||
135 | }, | ||
45 | }) | 136 | }) | ... | ... |
... | @@ -4,13 +4,29 @@ | ... | @@ -4,13 +4,29 @@ |
4 | <!-- <view class="app__top-shadow"></view> --> | 4 | <!-- <view class="app__top-shadow"></view> --> |
5 | <view class="app__content main"> | 5 | <view class="app__content main"> |
6 | <view class="personal"> | 6 | <view class="personal"> |
7 | <view class="top-space"></view> | 7 | <view class="top-space"></view> |
8 | <view class="name">我爱我家 的视频列表</view> | 8 | <view class="name">{{options.accountName}} 的视频列表</view> |
9 | <image class="portrait" mode="aspectFill" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" /> | 9 | <image class="portrait" mode="aspectFill" src="{{options.headImage}}" /> |
10 | </view> | 10 | </view> |
11 | <view class="content"> | 11 | <view class="content"> |
12 | <view class="list"> | 12 | <view class="list"> |
13 | <view bindtap="onVideoHandler" wx:for="{{8}}" wx:key="index" data-data="{{item}}" data-index="{{index}}" class="list-item"> | 13 | <view wx:for="{{dataList}}" wx:key="index" class="list-item"> |
14 | <view bindtap="onDetailHandler" data-data="{{item}}" data-index="{{index}}" class="list-item-video"> | ||
15 | <video objectFit="cover" class="vid" poster="{{item.thumbnail}}" src="{{item.videoUrl}}" /> | ||
16 | <view class="tit">{{item.videoName}}</view> | ||
17 | </view> | ||
18 | <view class="list-item-func"> | ||
19 | <view class="user"> | ||
20 | <image class="portrait" mode="aspectFill" src="{{item.headImage}}" /> | ||
21 | <text class="name">{{item.accountName || ""}}</text> | ||
22 | </view> | ||
23 | <button class="share" open-type="share"> | ||
24 | <span class="t1 iconfont iconwechat"></span> | ||
25 | <span class="t1">分享</span> | ||
26 | </button> | ||
27 | </view> | ||
28 | </view> | ||
29 | <!-- <view bindtap="onVideoHandler" wx:for="{{8}}" wx:key="index" data-data="{{item}}" data-index="{{index}}" class="list-item"> | ||
14 | <view class="list-item-video"> | 30 | <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" /> | 31 | <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> | 32 | <view class="tit">这是一个视频</view> |
... | @@ -25,7 +41,7 @@ | ... | @@ -25,7 +41,7 @@ |
25 | <span class="t1">分享</span> | 41 | <span class="t1">分享</span> |
26 | </button> | 42 | </button> |
27 | </view> | 43 | </view> |
28 | </view> | 44 | </view> --> |
29 | </view> | 45 | </view> |
30 | </view> | 46 | </view> |
31 | </view> | 47 | </view> | ... | ... |
... | @@ -82,12 +82,10 @@ VantComponent({ | ... | @@ -82,12 +82,10 @@ VantComponent({ |
82 | onChange(event) { | 82 | onChange(event) { |
83 | const { index, picker, value } = event.detail; | 83 | const { index, picker, value } = event.detail; |
84 | this.code = value[index].code; | 84 | this.code = value[index].code; |
85 | let getValues = picker.getValues(); | ||
86 | getValues = this.parseOutputValues(getValues); | ||
87 | this.setValues().then(() => { | 85 | this.setValues().then(() => { |
88 | this.$emit('change', { | 86 | this.$emit('change', { |
89 | picker, | 87 | picker, |
90 | values: getValues, | 88 | values: this.parseOutputValues(picker.getValues()), |
91 | index | 89 | index |
92 | }); | 90 | }); |
93 | }); | 91 | }); | ... | ... |
... | @@ -19,7 +19,7 @@ VantComponent({ | ... | @@ -19,7 +19,7 @@ VantComponent({ |
19 | childIndex: this.children.length | 19 | childIndex: this.children.length |
20 | }); | 20 | }); |
21 | this.children.push(target); | 21 | this.children.push(target); |
22 | // 收集 dropdown-item 的 data 挂在 data 上 | 22 | // 收集 dorpdown-item 的 data 挂在 data 上 |
23 | target && | 23 | target && |
24 | this.setData({ | 24 | this.setData({ |
25 | itemListData: this.data.itemListData.concat([target.data]) | 25 | itemListData: this.data.itemListData.concat([target.data]) | ... | ... |
1 | @import '../common/index.wxss';:host{-webkit-flex:1;flex:1}.van-goods-action-button{border:none!important;height:40px!important;height:var(--goods-action-button-height,40px)!important;font-weight:500!important;font-weight:var(--font-weight-bold,500)!important;line-height:40px!important;line-height:var(--goods-action-button-height,40px)!important}.van-goods-action-button--first{display:block!important;margin-left:5px;border-top-left-radius:40px/2!important;border-top-left-radius:var(--goods-action-button-height,40px)/2!important;border-bottom-left-radius:40px/2!important;border-bottom-left-radius:var(--goods-action-button-height,40px)/2!important}.van-goods-action-button--last{display:block!important;margin-right:5px;border-top-right-radius:40px/2!important;border-top-right-radius:var(--goods-action-button-height,40px)/2!important;border-bottom-right-radius:40px/2!important;border-bottom-right-radius:var(--goods-action-button-height,40px)/2!important}.van-goods-action-button--warning{background:linear-gradient(90deg,#ffd01e,#ff8917);background:var(--goods-action-button-warning-color,linear-gradient(90deg,#ffd01e,#ff8917))}.van-goods-action-button--danger{background:linear-gradient(90deg,#ff6034,#ee0a24);background:var(--goods-action-button-danger-color,linear-gradient(90deg,#ff6034,#ee0a24))}@media (max-width:321px){.van-goods-action-button{font-size:13px}} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
1 | @import '../common/index.wxss';:host{-webkit-flex:1;flex:1}.van-goods-action-button{border:none!important;height:40px!important;height:var(--goods-action-button-height,40px)!important;font-weight:500!important;font-weight:var(--font-weight-bold,500)!important;line-height:40px!important;line-height:var(--goods-action-button-height,40px)!important}.van-goods-action-button--first{display:block!important;margin-left:5px;border-top-left-radius:20px!important;border-top-left-radius:var(--goods-action-button-border-radius,20px)!important;border-bottom-left-radius:20px!important;border-bottom-left-radius:var(--goods-action-button-border-radius,20px)!important}.van-goods-action-button--last{display:block!important;margin-right:5px;border-top-right-radius:20px!important;border-top-right-radius:var(--goods-action-button-border-radius,20px)!important;border-bottom-right-radius:20px!important;border-bottom-right-radius:var(--goods-action-button-border-radius,20px)!important}.van-goods-action-button--warning{background:linear-gradient(90deg,#ffd01e,#ff8917);background:var(--goods-action-button-warning-color,linear-gradient(90deg,#ffd01e,#ff8917))}.van-goods-action-button--danger{background:linear-gradient(90deg,#ff6034,#ee0a24);background:var(--goods-action-button-danger-color,linear-gradient(90deg,#ff6034,#ee0a24))}@media (max-width:321px){.van-goods-action-button{font-size:13px}} | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
This diff is collapsed.
Click to expand it.
src/ui/vant-weapp/index-anchor/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/index-anchor/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | VantComponent({ | ||
3 | relation: { | ||
4 | name: 'index-bar', | ||
5 | type: 'ancestor', | ||
6 | linked(target) { | ||
7 | this.parent = target; | ||
8 | }, | ||
9 | unlinked() { | ||
10 | this.parent = null; | ||
11 | } | ||
12 | }, | ||
13 | props: { | ||
14 | useSlot: Boolean, | ||
15 | index: null | ||
16 | }, | ||
17 | data: { | ||
18 | active: false, | ||
19 | wrapperStyle: '', | ||
20 | anchorStyle: '' | ||
21 | } | ||
22 | }); |
src/ui/vant-weapp/index-anchor/index.json
0 → 100755
src/ui/vant-weapp/index-anchor/index.wxml
0 → 100755
1 | <view | ||
2 | class="van-index-anchor-wrapper" | ||
3 | style="{{ wrapperStyle }}" | ||
4 | > | ||
5 | <view | ||
6 | class="van-index-anchor {{ active ? 'van-index-anchor--active van-hairline--bottom' : '' }}" | ||
7 | style="{{ anchorStyle }}" | ||
8 | > | ||
9 | <slot wx:if="{{ useSlot }}"/> | ||
10 | <block wx:else> | ||
11 | <text>{{ index }}</text> | ||
12 | </block> | ||
13 | </view> | ||
14 | </view> |
src/ui/vant-weapp/index-anchor/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-index-anchor{padding:0 16px;padding:var(--index-anchor-padding,0 16px);color:#323233;color:var(--index-anchor-text-color,#323233);font-weight:500;font-weight:var(--index-anchor-font-weight,500);font-size:14px;font-size:var(--index-anchor-font-size,14px);line-height:32px;line-height:var(--index-anchor-line-height,32px);background-color:initial;background-color:var(--index-anchor-background-color,transparent)}.van-index-anchor--active{right:0;left:0;color:#07c160;color:var(--index-anchor-active-text-color,#07c160);background-color:#fff;background-color:var(--index-anchor-active-background-color,#fff)} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/index-bar/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/index-bar/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | import { GREEN } from '../common/color'; | ||
3 | const indexList = () => { | ||
4 | const indexList = []; | ||
5 | const charCodeOfA = 'A'.charCodeAt(0); | ||
6 | for (let i = 0; i < 26; i++) { | ||
7 | indexList.push(String.fromCharCode(charCodeOfA + i)); | ||
8 | } | ||
9 | return indexList; | ||
10 | }; | ||
11 | VantComponent({ | ||
12 | relation: { | ||
13 | name: 'index-anchor', | ||
14 | type: 'descendant', | ||
15 | linked() { | ||
16 | this.updateData(); | ||
17 | }, | ||
18 | linkChanged() { | ||
19 | this.updateData(); | ||
20 | }, | ||
21 | unlinked() { | ||
22 | this.updateData(); | ||
23 | } | ||
24 | }, | ||
25 | props: { | ||
26 | sticky: { | ||
27 | type: Boolean, | ||
28 | value: true | ||
29 | }, | ||
30 | zIndex: { | ||
31 | type: Number, | ||
32 | value: 1 | ||
33 | }, | ||
34 | highlightColor: { | ||
35 | type: String, | ||
36 | value: GREEN | ||
37 | }, | ||
38 | scrollTop: { | ||
39 | type: Number, | ||
40 | value: 0, | ||
41 | observer: 'onScroll' | ||
42 | }, | ||
43 | stickyOffsetTop: { | ||
44 | type: Number, | ||
45 | value: 0 | ||
46 | }, | ||
47 | indexList: { | ||
48 | type: Array, | ||
49 | value: indexList() | ||
50 | } | ||
51 | }, | ||
52 | data: { | ||
53 | activeAnchorIndex: null, | ||
54 | showSidebar: false | ||
55 | }, | ||
56 | methods: { | ||
57 | updateData() { | ||
58 | this.timer && clearTimeout(this.timer); | ||
59 | this.timer = setTimeout(() => { | ||
60 | this.children = this.getRelationNodes('../index-anchor/index'); | ||
61 | this.setData({ | ||
62 | showSidebar: !!this.children.length | ||
63 | }); | ||
64 | this.setRect().then(() => { | ||
65 | this.onScroll(); | ||
66 | }); | ||
67 | }, 0); | ||
68 | }, | ||
69 | setRect() { | ||
70 | return Promise.all([ | ||
71 | this.setAnchorsRect(), | ||
72 | this.setListRect(), | ||
73 | this.setSiderbarRect() | ||
74 | ]); | ||
75 | }, | ||
76 | setAnchorsRect() { | ||
77 | return Promise.all(this.children.map(anchor => (anchor.getRect('.van-index-anchor-wrapper').then((rect) => { | ||
78 | Object.assign(anchor, { | ||
79 | height: rect.height, | ||
80 | top: rect.top + this.data.scrollTop | ||
81 | }); | ||
82 | })))); | ||
83 | }, | ||
84 | setListRect() { | ||
85 | return this.getRect('.van-index-bar').then((rect) => { | ||
86 | Object.assign(this, { | ||
87 | height: rect.height, | ||
88 | top: rect.top + this.data.scrollTop | ||
89 | }); | ||
90 | }); | ||
91 | }, | ||
92 | setSiderbarRect() { | ||
93 | return this.getRect('.van-index-bar__sidebar').then(res => { | ||
94 | this.sidebar = { | ||
95 | height: res.height, | ||
96 | top: res.top | ||
97 | }; | ||
98 | }); | ||
99 | }, | ||
100 | setDiffData({ target, data }) { | ||
101 | const diffData = {}; | ||
102 | Object.keys(data).forEach(key => { | ||
103 | if (target.data[key] !== data[key]) { | ||
104 | diffData[key] = data[key]; | ||
105 | } | ||
106 | }); | ||
107 | if (Object.keys(diffData).length) { | ||
108 | target.setData(diffData); | ||
109 | } | ||
110 | }, | ||
111 | getAnchorRect(anchor) { | ||
112 | return anchor.getRect('.van-index-anchor-wrapper').then((rect) => ({ | ||
113 | height: rect.height, | ||
114 | top: rect.top | ||
115 | })); | ||
116 | }, | ||
117 | getActiveAnchorIndex() { | ||
118 | const { children } = this; | ||
119 | const { sticky, scrollTop, stickyOffsetTop } = this.data; | ||
120 | for (let i = this.children.length - 1; i >= 0; i--) { | ||
121 | const preAnchorHeight = i > 0 ? children[i - 1].height : 0; | ||
122 | const reachTop = sticky ? preAnchorHeight + stickyOffsetTop : 0; | ||
123 | if (reachTop + scrollTop >= children[i].top) { | ||
124 | return i; | ||
125 | } | ||
126 | } | ||
127 | return -1; | ||
128 | }, | ||
129 | onScroll() { | ||
130 | const { children = [] } = this; | ||
131 | if (!children.length) { | ||
132 | return; | ||
133 | } | ||
134 | const { sticky, stickyOffsetTop, zIndex, highlightColor, scrollTop } = this.data; | ||
135 | const active = this.getActiveAnchorIndex(); | ||
136 | this.setDiffData({ | ||
137 | target: this, | ||
138 | data: { | ||
139 | activeAnchorIndex: active | ||
140 | } | ||
141 | }); | ||
142 | if (sticky) { | ||
143 | let isActiveAnchorSticky = false; | ||
144 | if (active !== -1) { | ||
145 | isActiveAnchorSticky = children[active].top <= stickyOffsetTop + scrollTop; | ||
146 | } | ||
147 | children.forEach((item, index) => { | ||
148 | if (index === active) { | ||
149 | let wrapperStyle = ''; | ||
150 | let anchorStyle = ` | ||
151 | color: ${highlightColor}; | ||
152 | `; | ||
153 | if (isActiveAnchorSticky) { | ||
154 | wrapperStyle = ` | ||
155 | height: ${children[index].height}px; | ||
156 | `; | ||
157 | anchorStyle = ` | ||
158 | position: fixed; | ||
159 | top: ${stickyOffsetTop}px; | ||
160 | z-index: ${zIndex}; | ||
161 | color: ${highlightColor}; | ||
162 | `; | ||
163 | } | ||
164 | this.setDiffData({ | ||
165 | target: item, | ||
166 | data: { | ||
167 | active: true, | ||
168 | anchorStyle, | ||
169 | wrapperStyle | ||
170 | } | ||
171 | }); | ||
172 | } | ||
173 | else if (index === active - 1) { | ||
174 | const currentAnchor = children[index]; | ||
175 | const currentOffsetTop = currentAnchor.top; | ||
176 | const targetOffsetTop = index === children.length - 1 | ||
177 | ? this.top | ||
178 | : children[index + 1].top; | ||
179 | const parentOffsetHeight = targetOffsetTop - currentOffsetTop; | ||
180 | const translateY = parentOffsetHeight - currentAnchor.height; | ||
181 | const anchorStyle = ` | ||
182 | position: relative; | ||
183 | transform: translate3d(0, ${translateY}px, 0); | ||
184 | z-index: ${zIndex}; | ||
185 | color: ${highlightColor}; | ||
186 | `; | ||
187 | this.setDiffData({ | ||
188 | target: item, | ||
189 | data: { | ||
190 | active: true, | ||
191 | anchorStyle | ||
192 | } | ||
193 | }); | ||
194 | } | ||
195 | else { | ||
196 | this.setDiffData({ | ||
197 | target: item, | ||
198 | data: { | ||
199 | active: false, | ||
200 | anchorStyle: '', | ||
201 | wrapperStyle: '', | ||
202 | } | ||
203 | }); | ||
204 | } | ||
205 | }); | ||
206 | } | ||
207 | }, | ||
208 | onClick(event) { | ||
209 | this.scrollToAnchor(event.target.dataset.index); | ||
210 | }, | ||
211 | onTouchMove(event) { | ||
212 | const sidebarLength = this.children.length; | ||
213 | const touch = event.touches[0]; | ||
214 | const itemHeight = this.sidebar.height / sidebarLength; | ||
215 | let index = Math.floor((touch.clientY - this.sidebar.top) / itemHeight); | ||
216 | if (index < 0) { | ||
217 | index = 0; | ||
218 | } | ||
219 | else if (index > sidebarLength - 1) { | ||
220 | index = sidebarLength - 1; | ||
221 | } | ||
222 | this.scrollToAnchor(index); | ||
223 | }, | ||
224 | onTouchStop() { | ||
225 | this.scrollToAnchorIndex = null; | ||
226 | }, | ||
227 | scrollToAnchor(index) { | ||
228 | if (typeof index !== 'number' || this.scrollToAnchorIndex === index) { | ||
229 | return; | ||
230 | } | ||
231 | this.scrollToAnchorIndex = index; | ||
232 | const anchor = this.children.filter(item => item.data.index === this.data.indexList[index])[0]; | ||
233 | this.$emit('select', anchor.data.index); | ||
234 | anchor && wx.pageScrollTo({ | ||
235 | duration: 0, | ||
236 | scrollTop: anchor.top | ||
237 | }); | ||
238 | } | ||
239 | } | ||
240 | }); |
src/ui/vant-weapp/index-bar/index.json
0 → 100755
src/ui/vant-weapp/index-bar/index.wxml
0 → 100755
1 | <view class="van-index-bar"> | ||
2 | <slot /> | ||
3 | |||
4 | <view | ||
5 | wx:if="{{ showSidebar }}" | ||
6 | class="van-index-bar__sidebar" | ||
7 | catch:tap="onClick" | ||
8 | catch:touchmove="onTouchMove" | ||
9 | catch:touchend="onTouchStop" | ||
10 | catch:touchcancel="onTouchStop" | ||
11 | > | ||
12 | <view | ||
13 | wx:for="{{ indexList }}" | ||
14 | wx:key="index" | ||
15 | class="van-index-bar__index" | ||
16 | style="z-index: {{ zIndex + 1 }}; color: {{ activeAnchorIndex === index ? highlightColor : '' }}" | ||
17 | data-index="{{ index }}" | ||
18 | > | ||
19 | {{ item }} | ||
20 | </view> | ||
21 | </view> | ||
22 | </view> |
src/ui/vant-weapp/index-bar/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-index-bar{position:relative}.van-index-bar__sidebar{position:fixed;top:50%;right:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-user-select:none;user-select:none}.van-index-bar__index{font-weight:500;padding:0 4px 0 16px;padding:0 var(--padding-base,4px) 0 var(--padding-md,16px);font-size:10px;font-size:var(--index-bar-index-font-size,10px);line-height:14px;line-height:var(--index-bar-index-line-height,14px)} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
1 | @import '../common/index.wxss';.van-nav-bar{position:relative;text-align:center;-webkit-user-select:none;user-select:none;height:44px;height:var(--nav-bar-height,44px);line-height:44px;line-height:var(--nav-bar-height,44px);background-color:#fff;background-color:var(--nav-bar-background-color,#fff)}.van-nav-bar__text{display:inline-block;vertical-align:middle;margin:0 -16px;margin:0 -var(--padding-md,16px);padding:0 -16px;padding:0 -var(--padding-md,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__text--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-nav-bar__arrow{vertical-align:middle;font-size:16px;font-size:var(--nav-bar-arrow-size,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__arrow+.van-nav-bar__text{margin-left:-20px;padding-left:25px}.van-nav-bar--fixed{position:fixed;top:0;left:0;width:100%}.van-nav-bar__title{max-width:60%;margin:0 auto;color:#323233;color:var(--nav-bar-title-text-color,#323233);font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--nav-bar-title-font-size,16px)}.van-nav-bar__left,.van-nav-bar__right{position:absolute;bottom:0;font-size:14px;font-size:var(--font-size-md,14px)}.van-nav-bar__left{left:16px;left:var(--padding-md,16px)}.van-nav-bar__right{right:16px;right:var(--padding-md,16px)} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
1 | @import '../common/index.wxss';.van-nav-bar{position:relative;text-align:center;-webkit-user-select:none;user-select:none;height:44px;height:var(--nav-bar-height,44px);line-height:44px;line-height:var(--nav-bar-height,44px);background-color:#fff;background-color:var(--nav-bar-background-color,#fff)}.van-nav-bar__text{display:inline-block;vertical-align:middle;margin:0 -16px;margin:0 -var(--padding-md,16px);padding:0 16px;padding:0 var(--padding-md,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__text--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-nav-bar__arrow{vertical-align:middle;font-size:16px;font-size:var(--nav-bar-arrow-size,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__arrow+.van-nav-bar__text{margin-left:-20px;padding-left:25px}.van-nav-bar--fixed{position:fixed;top:0;left:0;width:100%}.van-nav-bar__title{max-width:60%;margin:0 auto;color:#323233;color:var(--nav-bar-title-text-color,#323233);font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--nav-bar-title-font-size,16px)}.van-nav-bar__left,.van-nav-bar__right{position:absolute;bottom:0;font-size:14px;font-size:var(--font-size-md,14px)}.van-nav-bar__left{left:16px;left:var(--padding-md,16px)}.van-nav-bar__right{right:16px;right:var(--padding-md,16px)} | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -8,10 +8,7 @@ VantComponent({ | ... | @@ -8,10 +8,7 @@ VantComponent({ |
8 | readonly: Boolean, | 8 | readonly: Boolean, |
9 | disabled: Boolean, | 9 | disabled: Boolean, |
10 | allowHalf: Boolean, | 10 | allowHalf: Boolean, |
11 | size: { | 11 | size: null, |
12 | type: null, | ||
13 | observer: 'setSizeWithUnit' | ||
14 | }, | ||
15 | icon: { | 12 | icon: { |
16 | type: String, | 13 | type: String, |
17 | value: 'star' | 14 | value: 'star' |
... | @@ -47,8 +44,7 @@ VantComponent({ | ... | @@ -47,8 +44,7 @@ VantComponent({ |
47 | }, | 44 | }, |
48 | data: { | 45 | data: { |
49 | innerValue: 0, | 46 | innerValue: 0, |
50 | gutterWithUnit: undefined, | 47 | gutterWithUnit: undefined |
51 | sizeWithUnit: '20px' | ||
52 | }, | 48 | }, |
53 | watch: { | 49 | watch: { |
54 | value(value) { | 50 | value(value) { |
... | @@ -58,11 +54,6 @@ VantComponent({ | ... | @@ -58,11 +54,6 @@ VantComponent({ |
58 | } | 54 | } |
59 | }, | 55 | }, |
60 | methods: { | 56 | methods: { |
61 | setSizeWithUnit(val) { | ||
62 | this.setData({ | ||
63 | sizeWithUnit: addUnit(val) | ||
64 | }); | ||
65 | }, | ||
66 | setGutterWithUnit(val) { | 57 | setGutterWithUnit(val) { |
67 | this.setData({ | 58 | this.setData({ |
68 | gutterWithUnit: addUnit(val) | 59 | gutterWithUnit: addUnit(val) | ... | ... |
... | @@ -8,10 +8,11 @@ | ... | @@ -8,10 +8,11 @@ |
8 | class="van-rate__item" | 8 | class="van-rate__item" |
9 | wx:for="{{ count }}" | 9 | wx:for="{{ count }}" |
10 | wx:key="index" | 10 | wx:key="index" |
11 | style="font-size: {{ sizeWithUnit }};padding-right: {{ index !== count - 1 ? gutterWithUnit : '' }}" | 11 | style="padding-right: {{ index !== count - 1 ? gutterWithUnit : '' }}" |
12 | > | 12 | > |
13 | <van-icon | 13 | <van-icon |
14 | name="{{ index + 1 <= innerValue ? icon : voidIcon }}" | 14 | name="{{ index + 1 <= innerValue ? icon : voidIcon }}" |
15 | size="{{ size }}" | ||
15 | class="van-rate__icon" | 16 | class="van-rate__icon" |
16 | custom-class="icon-class" | 17 | custom-class="icon-class" |
17 | data-score="{{ index }}" | 18 | data-score="{{ index }}" |
... | @@ -21,6 +22,7 @@ | ... | @@ -21,6 +22,7 @@ |
21 | 22 | ||
22 | <van-icon | 23 | <van-icon |
23 | wx:if="{{ allowHalf }}" | 24 | wx:if="{{ allowHalf }}" |
25 | size="{{ size }}" | ||
24 | name="{{ index + 0.5 <= innerValue ? icon : voidIcon }}" | 26 | name="{{ index + 0.5 <= innerValue ? icon : voidIcon }}" |
25 | class="{{ utils.bem('rate__icon', ['half']) }}" | 27 | class="{{ utils.bem('rate__icon', ['half']) }}" |
26 | custom-class="icon-class" | 28 | custom-class="icon-class" | ... | ... |
... | @@ -17,6 +17,7 @@ | ... | @@ -17,6 +17,7 @@ |
17 | /> | 17 | /> |
18 | <view | 18 | <view |
19 | wx:for="row" | 19 | wx:for="row" |
20 | wx:key="index" | ||
20 | wx:for-index="index" | 21 | wx:for-index="index" |
21 | class="{{ utils.bem('skeleton__row') }}" | 22 | class="{{ utils.bem('skeleton__row') }}" |
22 | style="{{ 'width:' + (isArray ? rowWidth[index] : rowWidth) }}" | 23 | style="{{ 'width:' + (isArray ? rowWidth[index] : rowWidth) }}" | ... | ... |
1 | import { VantComponent } from '../common/component'; | 1 | import { VantComponent } from '../common/component'; |
2 | const ROOT_ELEMENT = '.van-sticky'; | ||
2 | VantComponent({ | 3 | VantComponent({ |
3 | props: { | 4 | props: { |
4 | zIndex: { | 5 | zIndex: { |
... | @@ -7,9 +8,27 @@ VantComponent({ | ... | @@ -7,9 +8,27 @@ VantComponent({ |
7 | }, | 8 | }, |
8 | offsetTop: { | 9 | offsetTop: { |
9 | type: Number, | 10 | type: Number, |
10 | value: 0 | 11 | value: 0, |
12 | observer: 'observeContent' | ||
11 | }, | 13 | }, |
12 | disabled: Boolean | 14 | disabled: { |
15 | type: Boolean, | ||
16 | observer(value) { | ||
17 | if (!this.mounted) { | ||
18 | return; | ||
19 | } | ||
20 | value ? this.disconnectObserver() : this.initObserver(); | ||
21 | } | ||
22 | }, | ||
23 | container: { | ||
24 | type: null, | ||
25 | observer(target) { | ||
26 | if (typeof target !== 'function' || !this.data.height) { | ||
27 | return; | ||
28 | } | ||
29 | this.observeContainer(); | ||
30 | } | ||
31 | } | ||
13 | }, | 32 | }, |
14 | data: { | 33 | data: { |
15 | wrapStyle: '', | 34 | wrapStyle: '', |
... | @@ -31,35 +50,91 @@ VantComponent({ | ... | @@ -31,35 +50,91 @@ VantComponent({ |
31 | }); | 50 | }); |
32 | } | 51 | } |
33 | }, | 52 | }, |
34 | observerContentScroll() { | 53 | getContainerRect() { |
54 | const nodesRef = this.data.container(); | ||
55 | return new Promise(resolve => nodesRef.boundingClientRect(resolve).exec()); | ||
56 | }, | ||
57 | initObserver() { | ||
58 | this.disconnectObserver(); | ||
59 | this.getRect(ROOT_ELEMENT).then((rect) => { | ||
60 | this.setData({ height: rect.height }); | ||
61 | wx.nextTick(() => { | ||
62 | this.observeContent(); | ||
63 | this.observeContainer(); | ||
64 | }); | ||
65 | }); | ||
66 | }, | ||
67 | disconnectObserver(observerName) { | ||
68 | if (observerName) { | ||
69 | const observer = this[observerName]; | ||
70 | observer && observer.disconnect(); | ||
71 | } | ||
72 | else { | ||
73 | this.contentObserver && this.contentObserver.disconnect(); | ||
74 | this.containerObserver && this.containerObserver.disconnect(); | ||
75 | } | ||
76 | }, | ||
77 | observeContent() { | ||
35 | const { offsetTop } = this.data; | 78 | const { offsetTop } = this.data; |
36 | const intersectionObserver = this.createIntersectionObserver({ | 79 | this.disconnectObserver('contentObserver'); |
80 | const contentObserver = this.createIntersectionObserver({ | ||
37 | thresholds: [0, 1] | 81 | thresholds: [0, 1] |
38 | }); | 82 | }); |
39 | this.intersectionObserver = intersectionObserver; | 83 | this.contentObserver = contentObserver; |
40 | intersectionObserver.relativeToViewport({ top: -offsetTop }); | 84 | contentObserver.relativeToViewport({ top: -offsetTop }); |
41 | intersectionObserver.observe('.van-sticky', (res) => { | 85 | contentObserver.observe(ROOT_ELEMENT, res => { |
42 | if (this.data.disabled) { | 86 | if (this.data.disabled) { |
43 | return; | 87 | return; |
44 | } | 88 | } |
45 | // @ts-ignore | 89 | this.setFixed(res.boundingClientRect.top); |
46 | const { top, height } = res.boundingClientRect; | 90 | }); |
47 | const fixed = top <= offsetTop; | 91 | }, |
48 | this.$emit('scroll', { | 92 | observeContainer() { |
49 | scrollTop: top, | 93 | if (typeof this.data.container !== 'function') { |
50 | isFixed: fixed | 94 | return; |
95 | } | ||
96 | const { height } = this.data; | ||
97 | this.getContainerRect().then((rect) => { | ||
98 | this.containerHeight = rect.height; | ||
99 | this.disconnectObserver('containerObserver'); | ||
100 | const containerObserver = this.createIntersectionObserver({ | ||
101 | thresholds: [0, 1] | ||
51 | }); | 102 | }); |
52 | this.setData({ fixed, height }); | 103 | this.containerObserver = containerObserver; |
53 | wx.nextTick(() => { | 104 | containerObserver.relativeToViewport({ |
54 | this.setStyle(); | 105 | top: this.containerHeight - height |
106 | }); | ||
107 | containerObserver.observe(ROOT_ELEMENT, res => { | ||
108 | if (this.data.disabled) { | ||
109 | return; | ||
110 | } | ||
111 | this.setFixed(res.boundingClientRect.top); | ||
55 | }); | 112 | }); |
56 | }); | 113 | }); |
114 | }, | ||
115 | setFixed(top) { | ||
116 | const { offsetTop, height } = this.data; | ||
117 | const { containerHeight } = this; | ||
118 | const fixed = containerHeight && height | ||
119 | ? top > height - containerHeight && top < offsetTop | ||
120 | : top < offsetTop; | ||
121 | this.$emit('scroll', { | ||
122 | scrollTop: top, | ||
123 | isFixed: fixed | ||
124 | }); | ||
125 | this.setData({ fixed }); | ||
126 | wx.nextTick(() => { | ||
127 | this.setStyle(); | ||
128 | }); | ||
57 | } | 129 | } |
58 | }, | 130 | }, |
59 | mounted() { | 131 | mounted() { |
60 | this.observerContentScroll(); | 132 | this.mounted = true; |
133 | if (!this.data.disabled) { | ||
134 | this.initObserver(); | ||
135 | } | ||
61 | }, | 136 | }, |
62 | destroyed() { | 137 | destroyed() { |
63 | this.intersectionObserver.disconnect(); | 138 | this.disconnectObserver(); |
64 | } | 139 | } |
65 | }); | 140 | }); | ... | ... |
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | 1 | <wxs src="../wxs/utils.wxs" module="utils" /> |
2 | 2 | ||
3 | <view class="custom-class van-sticky }}" style="{{ containerStyle }}"> | 3 | <view class="custom-class van-sticky" style="{{ containerStyle }}"> |
4 | <view class="{{ utils.bem('sticky-wrap', { fixed }) }}" style="{{ wrapStyle }}"> | 4 | <view class="{{ utils.bem('sticky-wrap', { fixed }) }}" style="{{ wrapStyle }}"> |
5 | <slot /> | 5 | <slot /> |
6 | </view> | 6 | </view> | ... | ... |
... | @@ -22,10 +22,7 @@ VantComponent({ | ... | @@ -22,10 +22,7 @@ VantComponent({ |
22 | } | 22 | } |
23 | }, | 23 | }, |
24 | data: { | 24 | data: { |
25 | width: null, | 25 | active: false |
26 | inited: false, | ||
27 | active: false, | ||
28 | animated: false | ||
29 | }, | 26 | }, |
30 | watch: { | 27 | watch: { |
31 | title: 'update', | 28 | title: 'update', |
... | @@ -35,15 +32,20 @@ VantComponent({ | ... | @@ -35,15 +32,20 @@ VantComponent({ |
35 | titleStyle: 'update' | 32 | titleStyle: 'update' |
36 | }, | 33 | }, |
37 | methods: { | 34 | methods: { |
38 | setComputedName() { | ||
39 | this.computedName = this.data.name || this.index; | ||
40 | }, | ||
41 | getComputedName() { | 35 | getComputedName() { |
42 | if (this.data.name !== '') { | 36 | if (this.data.name !== '') { |
43 | return this.data.name; | 37 | return this.data.name; |
44 | } | 38 | } |
45 | return this.index; | 39 | return this.index; |
46 | }, | 40 | }, |
41 | updateRender(active, parent) { | ||
42 | const { data: parentData } = parent; | ||
43 | this.inited = this.inited || active; | ||
44 | this.setData({ | ||
45 | active, | ||
46 | shouldRender: this.inited || !parentData.lazyRender | ||
47 | }); | ||
48 | }, | ||
47 | update() { | 49 | update() { |
48 | if (this.parent) { | 50 | if (this.parent) { |
49 | this.parent.updateTabs(); | 51 | this.parent.updateTabs(); | ... | ... |
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | 1 | <wxs src="../wxs/utils.wxs" module="utils" /> |
2 | 2 | ||
3 | <view | 3 | <view |
4 | wx:if="{{ animated || inited }}" | 4 | wx:if="{{ shouldRender }}" |
5 | class="custom-class {{ utils.bem('tab__pane', { active, inactive: !active }) }}" | 5 | class="custom-class {{ utils.bem('tab__pane', { active, inactive: !active }) }}" |
6 | style="{{ animated || active ? '' : 'display: none;' }} {{ width ? 'width:' + width + 'px;' : '' }}" | ||
7 | > | 6 | > |
8 | <slot /> | 7 | <slot /> |
9 | </view> | 8 | </view> | ... | ... |
1 | @import '../common/index.wxss';.van-tab__pane{box-sizing:border-box;overflow-y:auto}.van-tab__pane--active{height:auto}.van-tab__pane--inactive{height:0;overflow:visible} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
1 | @import '../common/index.wxss';:host{-webkit-flex-shrink:0;flex-shrink:0;width:100%}.van-tab__pane,:host{box-sizing:border-box}.van-tab__pane{overflow-y:auto}.van-tab__pane--active{height:auto}.van-tab__pane--inactive{height:0;overflow:visible} | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
This diff is collapsed.
Click to expand it.
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | 1 | <wxs src="../wxs/utils.wxs" module="utils" /> |
2 | <wxs src="./index.wxs" module="getters" /> | ||
2 | 3 | ||
3 | <view class="custom-class {{ utils.bem('tabs', [type]) }}"> | 4 | <view class="custom-class {{ utils.bem('tabs', [type]) }}"> |
4 | <van-sticky disabled="{{ !sticky }}" z-index="{{ zIndex }}" offset-top="{{ offsetTop }}"> | 5 | <van-sticky |
6 | disabled="{{ !sticky }}" | ||
7 | z-index="{{ zIndex }}" | ||
8 | offset-top="{{ offsetTop }}" | ||
9 | container="{{ container }}" | ||
10 | bind:scroll="onTouchScroll" | ||
11 | > | ||
5 | <view class="{{ utils.bem('tabs__wrap', { scrollable }) }} {{ type === 'line' && border ? 'van-hairline--top-bottom' : '' }}"> | 12 | <view class="{{ utils.bem('tabs__wrap', { scrollable }) }} {{ type === 'line' && border ? 'van-hairline--top-bottom' : '' }}"> |
6 | <slot name="nav-left" /> | 13 | <slot name="nav-left" /> |
7 | 14 | ||
... | @@ -18,11 +25,11 @@ | ... | @@ -18,11 +25,11 @@ |
18 | wx:for="{{ tabs }}" | 25 | wx:for="{{ tabs }}" |
19 | wx:key="index" | 26 | wx:key="index" |
20 | data-index="{{ index }}" | 27 | data-index="{{ index }}" |
21 | class="van-ellipsis tab-class {{ index === currentIndex ? 'tab-active-class' : '' }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled }) }}" | 28 | class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}" |
22 | style="{{ color && index !== currentIndex && type === 'card' && !item.disabled ? 'color: ' + color : '' }} {{ color && index === currentIndex && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }} {{ scrollable ? ';flex-basis:' + (88 / swipeThreshold) + '%' : '' }}" | 29 | style="{{ getters.tabStyle(index === currentIndex, ellipsis, color, type, item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable) }}" |
23 | bind:tap="onTap" | 30 | bind:tap="onTap" |
24 | > | 31 | > |
25 | <view class="van-ellipsis" style="{{ item.titleStyle }}"> | 32 | <view class="{{ ellipsis ? 'van-ellipsis' : '' }}" style="{{ item.titleStyle }}"> |
26 | {{ item.title }} | 33 | {{ item.title }} |
27 | <van-info | 34 | <van-info |
28 | wx:if="{{ item.info !== null || item.dot }}" | 35 | wx:if="{{ item.info !== null || item.dot }}" | ... | ... |
src/ui/vant-weapp/tabs/index.wxs
0 → 100755
1 | /* eslint-disable */ | ||
2 | function tabClass(active, ellipsis) { | ||
3 | var classes = ['tab-class']; | ||
4 | |||
5 | if (active) { | ||
6 | classes.push('tab-active-class'); | ||
7 | } | ||
8 | |||
9 | if (ellipsis) { | ||
10 | classes.push('van-ellipsis'); | ||
11 | } | ||
12 | |||
13 | return classes.join(' '); | ||
14 | } | ||
15 | |||
16 | function tabStyle( | ||
17 | active, | ||
18 | ellipsis, | ||
19 | color, | ||
20 | type, | ||
21 | disabled, | ||
22 | activeColor, | ||
23 | inactiveColor, | ||
24 | swipeThreshold, | ||
25 | scrollable | ||
26 | ) { | ||
27 | var styles = []; | ||
28 | var isCard = type === 'card'; | ||
29 | // card theme color | ||
30 | if (color && isCard) { | ||
31 | styles.push('border-color:' + color); | ||
32 | |||
33 | if (!disabled) { | ||
34 | if (active) { | ||
35 | styles.push('background-color:' + color); | ||
36 | } else { | ||
37 | styles.push('color:' + color); | ||
38 | } | ||
39 | } | ||
40 | } | ||
41 | |||
42 | var titleColor = active ? activeColor : inactiveColor; | ||
43 | if (titleColor) { | ||
44 | styles.push('color:' + titleColor); | ||
45 | } | ||
46 | |||
47 | if (scrollable && ellipsis) { | ||
48 | styles.push('flex-basis:' + 88 / swipeThreshold + '%'); | ||
49 | } | ||
50 | |||
51 | return styles.join(';'); | ||
52 | } | ||
53 | |||
54 | module.exports.tabClass = tabClass; | ||
55 | module.exports.tabStyle = tabStyle; |
1 | @import '../common/index.wxss';.van-tabs{position:relative;-webkit-tap-highlight-color:transparent}.van-tabs__wrap{display:-webkit-flex;display:flex;overflow:hidden}.van-tabs__wrap--scrollable .van-tab{-webkit-flex:0 0 22%;flex:0 0 22%}.van-tabs__scroll{background-color:#fff;background-color:var(--tabs-nav-background-color,#fff)}.van-tabs__scroll--line{box-sizing:initial;height:calc(100% + 15px)}.van-tabs__scroll--card{margin:0 16px;margin:0 var(--padding-md,16px)}.van-tabs__nav{position:relative;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none}.van-tabs__nav--card{box-sizing:border-box;height:30px;height:var(--tabs-card-height,30px);border:1px solid #ee0a24;border:var(--border-width-base,1px) solid var(--tabs-default-color,#ee0a24);border-radius:2px;border-radius:var(--border-radius-sm,2px)}.van-tabs__nav--card .van-tab{color:#ee0a24;color:var(--tabs-default-color,#ee0a24);line-height:28px;line-height:calc(var(--tabs-card-height, 30px) - 2*var(--border-width-base, 1px));border-right:1px solid #ee0a24;border-right:var(--border-width-base,1px) solid var(--tabs-default-color,#ee0a24)}.van-tabs__nav--card .van-tab:last-child{border-right:none}.van-tabs__nav--card .van-tab.van-tab--active{color:#fff;color:var(--white,#fff);background-color:#ee0a24;background-color:var(--tabs-default-color,#ee0a24)}.van-tabs__nav--card .van-tab--disabled{color:#c8c9cc;color:var(--tab-disabled-text-color,#c8c9cc)}.van-tabs__line{position:absolute;bottom:0;left:0;z-index:1;height:3px;height:var(--tabs-bottom-bar-height,3px);border-radius:3px;border-radius:var(--tabs-bottom-bar-height,3px);background-color:#ee0a24;background-color:var(--tabs-bottom-bar-color,#ee0a24)}.van-tabs__track{position:relative}.van-tabs__content{overflow:hidden}.van-tabs--line .van-tabs__wrap{height:44px;height:var(--tabs-line-height,44px)}.van-tabs--card .van-tabs__wrap{height:30px;height:var(--tabs-card-height,30px)}.van-tab{position:relative;-webkit-flex:1;flex:1;box-sizing:border-box;min-width:0;padding:0 5px;text-align:center;cursor:pointer;color:#7d7e80;color:var(--tab-text-color,#7d7e80);font-size:14px;font-size:var(--tab-font-size,14px);line-height:44px;line-height:var(--tabs-line-height,44px)}.van-tab--active{font-weight:500;font-weight:var(--font-weight-bold,500);color:#323233;color:var(--tab-active-text-color,#323233)}.van-tab--disabled{color:#c8c9cc;color:var(--tab-disabled-text-color,#c8c9cc)}.van-tab__title__info{position:relative!important;top:-1px!important;display:inline-block;-webkit-transform:translateX(0)!important;transform:translateX(0)!important} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
1 | @import '../common/index.wxss';.van-tabs{position:relative;-webkit-tap-highlight-color:transparent}.van-tabs__wrap{display:-webkit-flex;display:flex;overflow:hidden}.van-tabs__wrap--scrollable .van-tab{-webkit-flex:0 0 22%;flex:0 0 22%}.van-tabs__scroll{background-color:#fff;background-color:var(--tabs-nav-background-color,#fff)}.van-tabs__scroll--line{box-sizing:initial;height:calc(100% + 15px)}.van-tabs__scroll--card{margin:0 16px;margin:0 var(--padding-md,16px)}.van-tabs__nav{position:relative;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none}.van-tabs__nav--card{box-sizing:border-box;height:30px;height:var(--tabs-card-height,30px);border:1px solid #ee0a24;border:var(--border-width-base,1px) solid var(--tabs-default-color,#ee0a24);border-radius:2px;border-radius:var(--border-radius-sm,2px)}.van-tabs__nav--card .van-tab{color:#ee0a24;color:var(--tabs-default-color,#ee0a24);line-height:28px;line-height:calc(var(--tabs-card-height, 30px) - 2*var(--border-width-base, 1px));border-right:1px solid #ee0a24;border-right:var(--border-width-base,1px) solid var(--tabs-default-color,#ee0a24)}.van-tabs__nav--card .van-tab:last-child{border-right:none}.van-tabs__nav--card .van-tab.van-tab--active{color:#fff;color:var(--white,#fff);background-color:#ee0a24;background-color:var(--tabs-default-color,#ee0a24)}.van-tabs__nav--card .van-tab--disabled{color:#c8c9cc;color:var(--tab-disabled-text-color,#c8c9cc)}.van-tabs__line{position:absolute;bottom:0;left:0;z-index:1;height:3px;height:var(--tabs-bottom-bar-height,3px);border-radius:3px;border-radius:var(--tabs-bottom-bar-height,3px);background-color:#ee0a24;background-color:var(--tabs-bottom-bar-color,#ee0a24)}.van-tabs__track{position:relative;display:-webkit-flex;display:flex;width:100%;height:100%;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}.van-tabs__content{overflow:hidden}.van-tabs--line .van-tabs__wrap{height:44px;height:var(--tabs-line-height,44px)}.van-tabs--card .van-tabs__wrap{height:30px;height:var(--tabs-card-height,30px)}.van-tab{position:relative;-webkit-flex:1;flex:1;box-sizing:border-box;min-width:0;padding:0 5px;text-align:center;cursor:pointer;color:#7d7e80;color:var(--tab-text-color,#7d7e80);font-size:14px;font-size:var(--tab-font-size,14px);line-height:44px;line-height:var(--tabs-line-height,44px)}.van-tab--active{font-weight:500;font-weight:var(--font-weight-bold,500);color:#323233;color:var(--tab-active-text-color,#323233)}.van-tab--disabled{color:#c8c9cc;color:var(--tab-disabled-text-color,#c8c9cc)}.van-tab--complete{-webkit-flex:1 0 auto!important;flex:1 0 auto!important}.van-tab__title__info{position:relative!important;top:-1px!important;display:inline-block;-webkit-transform:translateX(0)!important;transform:translateX(0)!important} | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -4,6 +4,7 @@ import { addUnit } from '../common/utils'; | ... | @@ -4,6 +4,7 @@ import { addUnit } from '../common/utils'; |
4 | VantComponent({ | 4 | VantComponent({ |
5 | props: { | 5 | props: { |
6 | disabled: Boolean, | 6 | disabled: Boolean, |
7 | multiple: Boolean, | ||
7 | uploadText: String, | 8 | uploadText: String, |
8 | previewSize: { | 9 | previewSize: { |
9 | type: null, | 10 | type: null, |
... | @@ -77,12 +78,8 @@ VantComponent({ | ... | @@ -77,12 +78,8 @@ VantComponent({ |
77 | wx.chooseImage({ | 78 | wx.chooseImage({ |
78 | count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1, | 79 | count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1, |
79 | sourceType: capture, | 80 | sourceType: capture, |
80 | success: res => { | 81 | success: resolve, |
81 | resolve(res); | 82 | fail: reject |
82 | }, | ||
83 | fail: err => { | ||
84 | reject(err); | ||
85 | } | ||
86 | }); | 83 | }); |
87 | }); | 84 | }); |
88 | } | 85 | } |
... | @@ -91,16 +88,12 @@ VantComponent({ | ... | @@ -91,16 +88,12 @@ VantComponent({ |
91 | wx.chooseMessageFile({ | 88 | wx.chooseMessageFile({ |
92 | count: multiple ? newMaxCount : 1, | 89 | count: multiple ? newMaxCount : 1, |
93 | type: 'file', | 90 | type: 'file', |
94 | success(res) { | 91 | success: resolve, |
95 | resolve(res); | 92 | fail: reject |
96 | }, | ||
97 | fail: err => { | ||
98 | reject(err); | ||
99 | } | ||
100 | }); | 93 | }); |
101 | }); | 94 | }); |
102 | } | 95 | } |
103 | chooseFile.then(res => { | 96 | chooseFile.then((res) => { |
104 | const file = multiple ? res.tempFiles : res.tempFiles[0]; | 97 | const file = multiple ? res.tempFiles : res.tempFiles[0]; |
105 | // 检查文件大小 | 98 | // 检查文件大小 |
106 | if (file instanceof Array) { | 99 | if (file instanceof Array) { |
... | @@ -119,7 +112,7 @@ VantComponent({ | ... | @@ -119,7 +112,7 @@ VantComponent({ |
119 | this.$emit('before-read', { | 112 | this.$emit('before-read', { |
120 | file, | 113 | file, |
121 | name, | 114 | name, |
122 | callback: result => { | 115 | callback: (result) => { |
123 | if (result) { | 116 | if (result) { |
124 | // 开始上传 | 117 | // 开始上传 |
125 | this.$emit('after-read', { file, name }); | 118 | this.$emit('after-read', { file, name }); | ... | ... |
-
Please register or sign in to post a comment