Skip to content

dev / home-with-kids-mp

Go to a project
Toggle navigation
Toggle navigation pinning
abc9441e by simon
Options

默认提交

1 parent 9b2edcb6
Expand all
Inline Side-by-side
Showing 44 changed files with 1106 additions and 226 deletions
...@@ -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,7 +2,7 @@ let ENV_CONFIG = require('./env/index'); ...@@ -2,7 +2,7 @@ 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
......
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 * 通用接口
......
...@@ -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;
58 app.router.push({ 80 app.router.push({
59 path: "personalList", 81 path: "personalList",
82 query: detailData
83 })
84 }
85 },
86
87 /**
88 * 跳转详情页面
89 */
90 onDetailHandler(evt) {
91 let curItem = getBindtapData(evt);
92 app.router.push({
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() {
12 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 });
13 }, 37 },
14 onChange(event) { 38 /**
15 wx.showToast({ 39 * 到达底部
16 title: `切换到标签 ${event.detail.name}`, 40 * 做加载更多操作
17 icon: 'none' 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
18 }); 47 });
48 this.queryVideoList();
49 }
50 },
51
52 // 重置页面列表 点击搜索条件时需要
53 resetPage() {
54 this.setData({
55 page: 1,
56 dataList: [],
57 queueCode: "",
58 })
59 },
60 onTabsChange(event) {
61 // console.log("this.data.tabList:", this.data.tabList);
62 // if (this.data.tabList && this.data.tabList.length > 0) {
63 // this.setData({
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列表
41 */ 94 */
42 queryList() { 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 },
43 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 || "",
44 } 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
174 */
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;
186
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 {
...@@ -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>
...@@ -29,8 +54,10 @@ ...@@ -29,8 +54,10 @@
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: {},
15 },
16 onShareAppMessage() {
17 let detailData = this.data.detailData;
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 })
31 },
32 onLoad(options) {
33 let tempOptions = JSON.parse(decodeURIComponent(JSON.stringify(options)));
34 this.setData({
35 options: tempOptions
36 });
37 this.initData();
9 }, 38 },
10 onLoad(options) {},
11 initData() { 39 initData() {
12 40 this.resetPage();
41 this.queryVideoList();
13 }, 42 },
14 onChange(event) { 43 /**
15 wx.showToast({ 44 * 到达底部
16 title: `切换到标签 ${event.detail.name}`, 45 * 做加载更多操作
17 icon: 'none' 46 */
47 onReachBottom() {
48 if (this.data.dataList.length < this.data.total) {
49 this.setData({
50 page: this.data.page + 1
18 }); 51 });
52 this.queryVideoList();
53 }
19 }, 54 },
20 onVanTabsHandler(event) { 55
21 console.log("event:", event); 56 // 重置页面列表 点击搜索条件时需要
22 let { 57 resetPage() {
23 index, 58 this.setData({
24 title 59 page: 1,
25 } = event.detail; 60 dataList: [],
61 queueCode: "",
62 })
26 }, 63 },
27 onVideoHandler(evt) { 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 || ""
70 }
71 })
72 },
73
74 /**
75 * 获取视频列表
76 */
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
34 } 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,
35 }) 106 })
36 console.log("curItem:", curItem);
37 console.log("curIndex:", curIndex);
38 }, 107 },
39 /** 108 /**
40 * 获取列列表 109 * 子组件事件
110 * @param {*} evt
111 */
112 evtcomp(evt) {
113 let {
114 name,
115 data
116 } = evt.detail;
117 switch (name) {
118
119 // 隐藏蒙层
120 case "_evt_hide_mask":
121 this.hideMask();
122 break;
123
124 /**
125 * 重拉数据已在
41 */ 126 */
42 queryList() { 127 case "_evt_auth_complete":
128 // this.initData();
129 this.hideMask();
130 break;
43 131
132 default:
133 break;
44 } 134 }
135 },
45 }) 136 })
......
...@@ -5,12 +5,28 @@ ...@@ -5,12 +5,28 @@
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
......
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 });
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>
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
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 });
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>
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({
81 thresholds: [0, 1]
82 });
83 this.contentObserver = contentObserver;
84 contentObserver.relativeToViewport({ top: -offsetTop });
85 contentObserver.observe(ROOT_ELEMENT, res => {
86 if (this.data.disabled) {
87 return;
88 }
89 this.setFixed(res.boundingClientRect.top);
90 });
91 },
92 observeContainer() {
93 if (typeof this.data.container !== 'function') {
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({
37 thresholds: [0, 1] 101 thresholds: [0, 1]
38 }); 102 });
39 this.intersectionObserver = intersectionObserver; 103 this.containerObserver = containerObserver;
40 intersectionObserver.relativeToViewport({ top: -offsetTop }); 104 containerObserver.relativeToViewport({
41 intersectionObserver.observe('.van-sticky', (res) => { 105 top: this.containerHeight - height
106 });
107 containerObserver.observe(ROOT_ELEMENT, res => {
42 if (this.data.disabled) { 108 if (this.data.disabled) {
43 return; 109 return;
44 } 110 }
45 // @ts-ignore 111 this.setFixed(res.boundingClientRect.top);
46 const { top, height } = res.boundingClientRect; 112 });
47 const fixed = top <= offsetTop; 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;
48 this.$emit('scroll', { 121 this.$emit('scroll', {
49 scrollTop: top, 122 scrollTop: top,
50 isFixed: fixed 123 isFixed: fixed
51 }); 124 });
52 this.setData({ fixed, height }); 125 this.setData({ fixed });
53 wx.nextTick(() => { 126 wx.nextTick(() => {
54 this.setStyle(); 127 this.setStyle();
55 }); 128 });
56 });
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
......
1 import { VantComponent } from '../common/component'; 1 import { VantComponent } from '../common/component';
2 import { touch } from '../mixins/touch'; 2 import { touch } from '../mixins/touch';
3 import { nextTick, isDef, addUnit } from '../common/utils'; 3 import { isDef, addUnit } from '../common/utils';
4 VantComponent({ 4 VantComponent({
5 mixins: [touch], 5 mixins: [touch],
6 classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'], 6 classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'],
7 relation: { 7 relation: {
8 name: 'tab', 8 name: 'tab',
9 type: 'descendant', 9 type: 'descendant',
10 linked(child) { 10 linked(target) {
11 child.index = this.children.length; 11 target.index = this.children.length;
12 this.children.push(child); 12 this.children.push(target);
13 this.updateTabs(this.data.tabs.concat(child.data)); 13 this.updateTabs();
14 }, 14 },
15 unlinked(child) { 15 unlinked(target) {
16 const index = this.children.indexOf(child); 16 this.children = this.children
17 const { tabs } = this.data; 17 .filter((child) => child !== target)
18 tabs.splice(index, 1); 18 .map((child, index) => {
19 this.children.splice(index, 1); 19 child.index = index;
20 let i = index; 20 return child;
21 while (i >= 0 && i < this.children.length) { 21 });
22 const currentChild = this.children[i]; 22 this.updateTabs();
23 currentChild.index--;
24 i++;
25 }
26 this.updateTabs(tabs);
27 } 23 }
28 }, 24 },
29 props: { 25 props: {
...@@ -47,12 +43,15 @@ VantComponent({ ...@@ -47,12 +43,15 @@ VantComponent({
47 value: -1, 43 value: -1,
48 observer: 'setLine' 44 observer: 'setLine'
49 }, 45 },
46 titleActiveColor: String,
47 titleInactiveColor: String,
50 active: { 48 active: {
51 type: [String, Number], 49 type: [String, Number],
52 value: 0, 50 value: 0,
53 observer(value) { 51 observer(name) {
54 this.currentName = value; 52 if (name !== this.getCurrentName()) {
55 this.setActiveTab(); 53 this.setCurrentIndexByName(name);
54 }
56 } 55 }
57 }, 56 },
58 type: { 57 type: {
...@@ -63,6 +62,10 @@ VantComponent({ ...@@ -63,6 +62,10 @@ VantComponent({
63 type: Boolean, 62 type: Boolean,
64 value: true 63 value: true
65 }, 64 },
65 ellipsis: {
66 type: Boolean,
67 value: true
68 },
66 duration: { 69 duration: {
67 type: Number, 70 type: Number,
68 value: 0.3 71 value: 0.3
...@@ -74,16 +77,20 @@ VantComponent({ ...@@ -74,16 +77,20 @@ VantComponent({
74 swipeThreshold: { 77 swipeThreshold: {
75 type: Number, 78 type: Number,
76 value: 4, 79 value: 4,
77 observer() { 80 observer(value) {
78 this.setData({ 81 this.setData({
79 scrollable: this.children.length > this.data.swipeThreshold 82 scrollable: this.children.length > value || !this.data.ellipsis
80 }); 83 });
81 } 84 }
82 }, 85 },
83 offsetTop: { 86 offsetTop: {
84 type: Number, 87 type: Number,
85 value: 0 88 value: 0
86 } 89 },
90 lazyRender: {
91 type: Boolean,
92 value: true
93 },
87 }, 94 },
88 data: { 95 data: {
89 tabs: [], 96 tabs: [],
...@@ -91,51 +98,87 @@ VantComponent({ ...@@ -91,51 +98,87 @@ VantComponent({
91 scrollLeft: 0, 98 scrollLeft: 0,
92 scrollable: false, 99 scrollable: false,
93 trackStyle: '', 100 trackStyle: '',
94 wrapStyle: '', 101 currentIndex: null,
95 position: '', 102 container: null
96 currentIndex: 0
97 }, 103 },
98 beforeCreate() { 104 beforeCreate() {
99 this.children = []; 105 this.children = [];
100 }, 106 },
101 mounted() { 107 mounted() {
108 this.setData({
109 container: () => this.createSelectorQuery().select('.van-tabs')
110 });
102 this.setLine(true); 111 this.setLine(true);
103 this.setTrack(); 112 this.setTrack();
104 this.scrollIntoView(); 113 this.scrollIntoView();
105 }, 114 },
106 methods: { 115 methods: {
107 updateTabs(tabs) { 116 updateTabs() {
108 tabs = tabs || this.data.tabs; 117 const { children = [], data } = this;
109 this.setData({ 118 this.setData({
110 tabs, 119 tabs: children.map((child) => child.data),
111 scrollable: tabs.length > this.data.swipeThreshold 120 scrollable: this.children.length > data.swipeThreshold || !data.ellipsis
112 }); 121 });
113 this.setActiveTab(); 122 this.setCurrentIndexByName(this.getCurrentName() || data.active);
114 }, 123 },
115 trigger(eventName, name) { 124 trigger(eventName) {
116 const { tabs, currentIndex } = this.data; 125 const { currentIndex } = this.data;
126 const child = this.children[currentIndex];
117 this.$emit(eventName, { 127 this.$emit(eventName, {
118 name, 128 index: currentIndex,
119 title: tabs[currentIndex].title 129 name: child.getComputedName(),
130 title: child.data.title
120 }); 131 });
121 }, 132 },
122 onTap(event) { 133 onTap(event) {
123 const { index } = event.currentTarget.dataset; 134 const { index } = event.currentTarget.dataset;
124 const child = this.children[index]; 135 const child = this.children[index];
125 const computedName = child.getComputedName(); 136 if (child.data.disabled) {
126 if (this.data.tabs[index].disabled) { 137 this.trigger('disabled');
127 this.trigger('disabled', computedName);
128 } 138 }
129 else { 139 else {
130 this.trigger('click', computedName); 140 this.setCurrentIndex(index);
131 this.setActive(computedName); 141 wx.nextTick(() => {
142 this.trigger('click');
143 });
144 }
145 },
146 // correct the index of active tab
147 setCurrentIndexByName(name) {
148 const { children = [] } = this;
149 const matched = children.filter((child) => child.getComputedName() === name);
150 const defaultIndex = (children[0] || {}).index || 0;
151 this.setCurrentIndex(matched.length ? matched[0].index : defaultIndex);
152 },
153 setCurrentIndex(currentIndex) {
154 const { data, children = [] } = this;
155 if (!isDef(currentIndex) ||
156 currentIndex >= children.length ||
157 currentIndex < 0) {
158 return;
132 } 159 }
160 const shouldEmitChange = data.currentIndex !== null;
161 this.setData({ currentIndex });
162 children.forEach((item, index) => {
163 const active = index === currentIndex;
164 if (active !== item.data.active || !item.inited) {
165 item.updateRender(active, this);
166 }
167 });
168 wx.nextTick(() => {
169 this.setLine();
170 this.setTrack();
171 this.scrollIntoView();
172 this.trigger('input');
173 if (shouldEmitChange) {
174 this.trigger('change');
175 }
176 });
133 }, 177 },
134 setActive(name) { 178 getCurrentName() {
135 if (name !== this.currentName) { 179 const activeTab = this.children[this.data.currentIndex];
136 this.currentName = name; 180 if (activeTab) {
137 this.trigger('change', name); 181 return activeTab.getComputedName();
138 this.setActiveTab();
139 } 182 }
140 }, 183 },
141 setLine(skipTransition) { 184 setLine(skipTransition) {
...@@ -143,8 +186,11 @@ VantComponent({ ...@@ -143,8 +186,11 @@ VantComponent({
143 return; 186 return;
144 } 187 }
145 const { color, duration, currentIndex, lineWidth, lineHeight } = this.data; 188 const { color, duration, currentIndex, lineWidth, lineHeight } = this.data;
146 this.getRect('.van-tab', true).then((rects) => { 189 this.getRect('.van-tab', true).then((rects = []) => {
147 const rect = rects[currentIndex]; 190 const rect = rects[currentIndex];
191 if (rect == null) {
192 return;
193 }
148 const width = lineWidth !== -1 ? lineWidth : rect.width / 2; 194 const width = lineWidth !== -1 ? lineWidth : rect.width / 2;
149 const height = lineHeight !== -1 195 const height = lineHeight !== -1
150 ? `height: ${addUnit(lineHeight)}; border-radius: ${addUnit(lineHeight)};` 196 ? `height: ${addUnit(lineHeight)}; border-radius: ${addUnit(lineHeight)};`
...@@ -170,51 +216,13 @@ VantComponent({ ...@@ -170,51 +216,13 @@ VantComponent({
170 }, 216 },
171 setTrack() { 217 setTrack() {
172 const { animated, duration, currentIndex } = this.data; 218 const { animated, duration, currentIndex } = this.data;
173 if (!animated)
174 return '';
175 this.getRect('.van-tabs__content').then((rect) => {
176 const { width } = rect;
177 this.setData({ 219 this.setData({
178 trackStyle: ` 220 trackStyle: `
179 width: ${width * this.children.length}px; 221 transform: translate3d(${-100 * currentIndex}%, 0, 0);
180 left: ${-1 * currentIndex * width}px; 222 -webkit-transition-duration: ${animated ? duration : 0}s;
181 transition: left ${duration}s; 223 transition-duration: ${animated ? duration : 0}s;
182 display: -webkit-box;
183 display: flex;
184 ` 224 `
185 }); 225 });
186 const data = { width, animated };
187 this.children.forEach((item) => {
188 item.setData(data);
189 });
190 });
191 },
192 setActiveTab() {
193 if (!isDef(this.currentName)) {
194 const { active } = this.data;
195 const { children = [] } = this;
196 this.currentName =
197 active === '' && children.length
198 ? children[0].getComputedName()
199 : active;
200 }
201 this.children.forEach((item, index) => {
202 const data = {
203 active: item.getComputedName() === this.currentName
204 };
205 if (data.active) {
206 this.setData({ currentIndex: index });
207 data.inited = true;
208 }
209 if (data.active !== item.data.active) {
210 item.setData(data);
211 }
212 });
213 nextTick(() => {
214 this.setLine();
215 this.setTrack();
216 this.scrollIntoView();
217 });
218 }, 226 },
219 // scroll active tab into view 227 // scroll active tab into view
220 scrollIntoView() { 228 scrollIntoView() {
...@@ -235,6 +243,9 @@ VantComponent({ ...@@ -235,6 +243,9 @@ VantComponent({
235 }); 243 });
236 }); 244 });
237 }, 245 },
246 onTouchScroll(event) {
247 this.$emit('scroll', event.detail);
248 },
238 onTouchStart(event) { 249 onTouchStart(event) {
239 if (!this.data.swipeable) 250 if (!this.data.swipeable)
240 return; 251 return;
...@@ -254,12 +265,10 @@ VantComponent({ ...@@ -254,12 +265,10 @@ VantComponent({
254 const minSwipeDistance = 50; 265 const minSwipeDistance = 50;
255 if (direction === 'horizontal' && offsetX >= minSwipeDistance) { 266 if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
256 if (deltaX > 0 && currentIndex !== 0) { 267 if (deltaX > 0 && currentIndex !== 0) {
257 const child = this.children[currentIndex - 1]; 268 this.setCurrentIndex(currentIndex - 1);
258 this.setActive(child.getComputedName());
259 } 269 }
260 else if (deltaX < 0 && currentIndex !== tabs.length - 1) { 270 else if (deltaX < 0 && currentIndex !== tabs.length - 1) {
261 const child = this.children[currentIndex - 1]; 271 this.setCurrentIndex(currentIndex + 1);
262 this.setActive(child.getComputedName());
263 } 272 }
264 } 273 }
265 } 274 }
......
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 }}"
......
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 });
......