Skip to content

dev / home-with-kids-mp

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

默认提交

1 parent 9b2edcb6
Inline Side-by-side
Showing 44 changed files with 1121 additions and 231 deletions
......@@ -93,17 +93,19 @@ button {
position: relative;
}
.drop-down-item :last-child {
border-bottom: none;
}
// web font icon
@font-face {
font-family: "iconfont";
src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
}
.drop-down-item :last-child {
border-bottom: none;
}
.iconfont {
font-family: "iconfont" !important;
......@@ -133,6 +135,14 @@ button {
content: "\e606";
}
.icondashang:before {
content: "\e699";
}
.iconhongbao:before {
content: "\e68c";
}
.iconempty:before {
content: "\e6a6";
}
......
......@@ -16,6 +16,10 @@ Component({
types: {
type: Array,
value: ["home", "return"]
},
pics: {
type: Array,
value: ["red-package"]
}
},
data: {
......@@ -44,6 +48,15 @@ Component({
})
break;
case "red-package":
wx.showModal({
title: '温馨提示',
content: '打赏功能尚未开放，敬请期待！',
showCancel: false,
success(res) {}
});
break;
default:
break;
}
......
......@@ -15,10 +15,18 @@
display: flex;
justify-content: center;
align-items: center;
background-color: rgba($color: #000000, $alpha: 0.6);
}
.iconfont {
font-size: 64px;
}
.pics{
height: $btnSize;
}
.point{
background-color: rgba($color: #000000, $alpha: 0.6);
}
}
......
<view class="comp">
<view wx:for="{{types}}" wx:key="{{index}}" data-data="{{item}}" bindtap="onTapHandler" class="btn">
<view wx:for="{{types}}" wx:key="{{index}}" data-data="{{item}}" bindtap="onTapHandler" class="btn point">
<span class="iconfont {{typeIconMap[item+''] }}"></span>
</view>
<view wx:for="{{pics}}" wx:key="{{index}}" data-data="{{item}}" bindtap="onTapHandler" class="btn">
<image mode="aspectFit" src="../../image/shortcut/red-package.png" class="pics" />
</view>
</view>
......
......@@ -2,7 +2,7 @@ let ENV_CONFIG = require('./env/index');
const APPID = ''
/** ====每次发布版本记得修改此环境配置==== */
const ENV = 'dev'; // Dev Prod
const ENV = 'Dev'; // Dev Prod
const NET_CONFIG = ENV_CONFIG[ENV];
const MOCKAPI = ENV_CONFIG.mockApi;
......
module.exports = {
mockApi: 'http://mock.simonfungc.com',
Dev: {
baseApi: 'https://ow.go.qudone.com/xxx',
baseApi: 'https://ow.go.qudone.com/kd_jyes_api/minipro',
commonApi: 'https://api.k.wxpai.cn/bizproxy'
},
Test: {
......
......@@ -2,7 +2,14 @@ module.exports = {
login: "/login", // post 通过wxcode换取sessionId
register: '/register', // post 注册（用户授权）
dataList: '/dataList', // 测试接口
// dataList: '/dataList', // 测试接口
bannerList: '/banner/list', // 轮播图
tabList: '/tab/list', // 获取标签
videoList: '/video/list', // 视频列表
videoAcccout: '/video/acccout', // 帐号下的视频
videoDetail: '/video/detail', // 视频详情
rewardDetail: '/hide/order', // 获得打赏视频
videoMore: '/video/more', // 更多推荐
/**
* 通用接口
......
......@@ -5,40 +5,60 @@ import {
let app = getApp();
Page({
data: {
isOverShare: true,
authorizeVisible: false,
total: 0,
page: 1,
size: 10,
dataList: [],
productList: [], // 产品列表
indexInfo: {},
userInfo: {}
userInfo: {},
options: {},
detailData: {}
},
onShareAppMessage() {
let detailData = this.data.detailData;
let title = detailData && detailData.videoName || "";
let path = `pages/detail/detail?c=${detailData.videoCode}`;
let imageUrl = detailData && detailData.thumbnail || "";
return {
title,
path,
imageUrl
}
},
onShareAppMessage() {},
showAuth() {
this.setData({
authorizeVisible: true
})
},
onLoad(options) {},
onLoad(options) {
this.setData({
options
});
this.queryVideoDetail();
this.initData();
},
/**
* 基础方法
* 授权完毕重拉数据用
*/
initData() {
this.queryVideoMore();
},
/**
* 到达底部
* 做加载更多操作
*/
onReachBottom() {
return;
if (this.data.dataList.length < this.data.total) {
this.setData({
page: this.data.page + 1
});
// this.queryDataList();
this.queryVideoMore();
}
},
......@@ -50,25 +70,41 @@ Page({
})
},
/**
* 到个人列表页面
*/
toPersonalList() {
let detailData = this.data.detailData;
if (detailData && detailData.accountCode) {
detailData.c = detailData.accountCode;
app.router.push({
path: "personalList",
query: detailData
})
}
},
/**
* 跳转详情页面
*/
onDetailHandler(evt) {
let curItem = getBindtapData(evt);
app.router.push({
path: "detail",
query: {
c: curItem.videoCode || ""
}
})
},
/**
* 请求DataList
*/
queryDataList() {
return;
queryVideoMore() {
return new Promise((resolve, reject) => {
app.post({
sid: false,
url: app.api.dataList,
url: app.api.videoMore,
data: {
page: this.data.page,
size: this.data.size,
......@@ -76,6 +112,7 @@ Page({
}).then((result) => {
let dataList = result.list;
dataList = this.data.dataList.concat(dataList);
console.log("dataList:", dataList);
this.setData({
dataList: dataList,
total: result.total
......@@ -86,6 +123,27 @@ Page({
},
/**
* 视频详情
*/
queryVideoDetail() {
return new Promise((resolve, reject) => {
app.post({
url: app.api.videoDetail,
data: {
videoCode: this.data.options.c
}
}).then((result) => {
this.setData({
detailData: result
})
resolve(result);
}).catch((err) => {
reject(err);
});
});
},
/**
* 隐藏蒙层
*/
hideMask() {
......
......@@ -24,11 +24,13 @@
width: 100%;
height: 944px;
background-color: #333333;
text-align: center;
.vid {
margin: 232px auto 0;
text-align: center;
margin: 160px auto 0;
width: 100%;
height: 360px;
// height: 400px;
}
.btn-wrap {
......
......@@ -6,13 +6,13 @@
<view class="content">
<!-- 视频详情 -->
<view class="detail">
<video objectFit="cover" class="vid" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/7e91e8a4c7b84e6fa4bada7c8617c9cf.mp4" />
<video objectFit="cover" class="vid" poster="{{detailData.thumbnail}}" src="{{detailData.videoUrl}}" />
<view class="btn-wrap">
<button class="btn">
<button open-type="share" class="btn">
<span class="t1 iconfont iconplane"></span>
<span class="t1">分享给好友</span>
</button>
<button class="btn btn2">
<button open-type="share" class="btn btn2">
<span class="t1 iconfont iconplane"></span>
<span class="t1">分享到群</span>
</button>
......@@ -21,10 +21,10 @@
<!-- 功能区 -->
<view class="func">
<view bindtap="toPersonalList" class="user">
<image class="portrait" mode="aspectFill" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" />
<image class="portrait" mode="aspectFill" src="{{detailData.headImage}}" />
<view class="desc">
<view class="t1 name">我爱我家</view>
<view class="t1 num">280个视频</view>
<view class="t1 name">{{detailData.accountName}}</view>
<view class="t1 num">{{detailData.count || 0}}个视频</view>
</view>
</view>
<view class="btn-wrap">
......@@ -48,10 +48,14 @@
<view class="more">
<view class="more-title">-- 更多推荐欣赏 --</view>
<view class="more-list">
<view wx:for="{{2}}" wx:key="{{index}}" class="more-list-item">
<view bindtap="onDetailHandler" data-data="{{item}}" data-index="{{index}}" wx:for="{{dataList}}" wx:key="{{index}}" class="more-list-item">
<view class="tit">{{item.videoName}}</view>
<image class="poster" src="{{item.thumbnail}}" />
</view>
<!-- <view wx:for="{{2}}" wx:key="{{index}}" class="more-list-item">
<view class="tit">新政策来了！家有小孩的都要过来看看</view>
<image class="poster" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" />
</view>
</view> -->
</view>
</view>
<!-- 返回首页按钮 -->
......@@ -62,4 +66,5 @@
</view>
</view>
</view>
<shortcut></shortcut>
<!-- <shortcut types="{{[]}}" pics="{{['red-package']}}"></shortcut> -->
<shortcut ></shortcut>
......
......@@ -5,41 +5,195 @@ import {
let app = getApp();
Page({
data: {
active: 0
authorizeVisible: false,
total: 0,
page: 1,
size: 10,
dataList: [],
tabList: [], // 标签列表
bannerList: [],
curTab: {},
queueCode: "", // 队列标识，每次请求，会返回一个队列标识，用户加载更多时候请携带queueCode参数
active: 0,
},
onShareAppMessage() {},
showAuth() {
this.setData({
authorizeVisible: true
})
},
onLoad(options) {
this.initData();
},
onLoad(options) {},
initData() {
this.queryTabList().then((result) => {
this.setData({
curTab: this.data.tabList[0]
})
this.resetPage();
this.queryBannerList();
this.queryVideoList();
});
},
onChange(event) {
wx.showToast({
title: `切换到标签 ${event.detail.name}`,
icon: 'none'
/**
* 到达底部
* 做加载更多操作
*/
onReachBottom() {
console.log("onReachBottom");
if (this.data.dataList.length < this.data.total) {
this.setData({
page: this.data.page + 1
});
this.queryVideoList();
}
},
// 重置页面列表 点击搜索条件时需要
resetPage() {
this.setData({
page: 1,
dataList: [],
queueCode: "",
})
},
onTabsChange(event) {
// console.log("this.data.tabList:", this.data.tabList);
// if (this.data.tabList && this.data.tabList.length > 0) {
// this.setData({
// curTab: this.data.tabList[event.detail.index]
// })
// this.resetPage();
// this.queryVideoList();
// }
},
onVanTabsHandler(event) {
console.log("event:", event);
let {
index,
title
} = event.detail;
if (this.data.tabList && this.data.tabList.length > 0) {
this.setData({
curTab: this.data.tabList[event.detail.index]
})
this.resetPage();
this.queryVideoList();
}
},
onVideoHandler(evt) {
onDetailHandler(evt) {
let curItem = getBindtapData(evt);
let curIndex = getBindtapData(evt, "index");
app.router.push({
path: "detail",
query: {
c: curIndex + ""
c: curItem.videoCode || ""
}
})
console.log("curItem:", curItem);
console.log("curIndex:", curIndex);
},
/**
* 获取列列表
* 获取tab列表
*/
queryList() {
queryTabList() {
return new Promise((resolve, reject) => {
app.post({
sid: false,
url: app.api.tabList,
data: {}
}).then((result) => {
this.setData({
tabList: result
})
resolve(result);
}).catch((err) => {
reject(err)
});
});
},
/**
* 获取banner列表
*/
queryBannerList() {
return new Promise((resolve, reject) => {
app.post({
sid: false,
url: app.api.bannerList,
data: {
tabCode: this.data.curTab.tabCode || "",
}
}).then((result) => {
this.setData({
bannerList: result
})
resolve(result);
}).catch((err) => {
reject(err)
});
});
},
/**
* 获取视频列表
*/
queryVideoList() {
return new Promise((resolve, reject) => {
app.post({
sid: true,
url: app.api.videoList,
data: {
page: this.data.page,
size: this.data.size,
queueCode: this.data.queueCode,
tabCode: this.data.curTab.tabCode || "",
}
}).then((result) => {
let dataList = result.list;
dataList = this.data.dataList.concat(dataList);
this.setData({
dataList: dataList,
total: result.total,
queueCode: result.queueCode,
})
resolve(result);
}).catch((err) => {
reject(err)
});
});
},
/**
* 隐藏蒙层
*/
hideMask() {
this.setData({
productDetailVisible: false,
authorizeVisible: false,
})
},
/**
* 子组件事件
* @param {*} evt
*/
evtcomp(evt) {
let {
name,
data
} = evt.detail;
switch (name) {
// 隐藏蒙层
case "_evt_hide_mask":
this.hideMask();
break;
/**
* 重拉数据已在
*/
case "_evt_auth_complete":
// this.initData();
this.hideMask();
break;
default:
break;
}
},
})
......
......@@ -2,7 +2,7 @@
@import '../../assets/scss/utils';
.page {
$contentWidth: 670px;
padding-bottom: $pageBottom;
color: #333333;
......@@ -21,6 +21,39 @@
.content {
position: relative;
padding-top: 24px;
}
.banner {
position: relative;
.swiper {
width: $contentWidth;
height: 280px;
margin: 0 auto;
.swiper-image {
width: $contentWidth;
height: 250px;
}
}
.tit {
position: absolute;
bottom: 12px;
width: 750px;
height: 64px;
line-height: 64px;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
background-color: rgba($color: #000000, $alpha: 0.7);
color: #ffffff;
font-size: 30px;
}
}
.list {
......@@ -39,11 +72,13 @@
justify-content: center;
position: relative;
width: $contentWidth;
background-color: #dddddd;
.vid {
@include border-top-radius(16px);
width: $contentWidth;
pointer-events: none;
}
.tit {
......@@ -61,6 +96,19 @@
@include ellipsis(1);
}
.iconfont {
font-size: 160px;
position: absolute;
left: 0;
right: 0;
top: 100px;
margin: 0 auto;
text-align: center;
font-weight: bold;
// color: #efefef;
color: #ffffff;
}
}
&-func {
......@@ -122,3 +170,11 @@
border-width: 0;
}
}
.red-p {
.comp {
bottom: auto;
top: 15%;
}
}
......
......@@ -5,16 +5,41 @@
<view class="app__content main">
<view class="top-space"></view>
<van-sticky>
<van-tabs active="{{ active }}" bind:click="onVanTabsHandler">
<van-tab title="精彩推荐"></van-tab>
<van-tab title="一起旅行"></van-tab>
<van-tab title="齐家欢乐"></van-tab>
<van-tab title="童趣无限"></van-tab>
<van-tabs ellipsis="{{ false }}" active="{{ active }}" bind:click="onVanTabsHandler" bind:change="onTabsChange">
<van-tab wx:for="{{tabList}}" wx:key="{{index}}" title="{{item.tabName}}"></van-tab>
</van-tabs>
</van-sticky>
<view class="content">
<view class="banner" wx:if="{{bannerList && bannerList.length>0}}">
<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}}">
<block wx:for="{{bannerList}}" wx:key="{{index}}">
<swiper-item>
<image class="swiper-image" src="{{item.imageUrl}}" mode="aspectFill" />
</swiper-item>
</block>
</swiper>
<view class="tit">banner名字</view>
</view>
<view class="list">
<view bindtap="onVideoHandler" wx:for="{{8}}" wx:key="index" data-data="{{item}}" data-index="{{index}}" class="list-item">
<view wx:for="{{dataList}}" wx:key="index" class="list-item">
<view bindtap="onDetailHandler" data-data="{{item}}" data-index="{{index}}" class="list-item-video">
<!-- <video objectFit="cover" class="vid" poster="{{item.thumbnail}}" src="{{item.videoUrl}}" /> -->
<image src="{{item.thumbnail}}" mode="aspectFill" />
<view class="tit">{{item.videoName}}</view>
<span class="iconfont iconicon-test16"></span>
</view>
<view class="list-item-func">
<view class="user">
<image class="portrait" mode="aspectFill" src="{{item.headImage}}" />
<text class="name">{{item.accountName || ""}}</text>
</view>
<button class="share" open-type="share">
<span class="t1 iconfont iconwechat"></span>
<span class="t1">分享</span>
</button>
</view>
</view>
<!-- <view bindtap="onDetailHandler" wx:for="{{8}}" wx:key="index" data-data="{{item}}" data-index="{{index}}" class="list-item">
<view class="list-item-video">
<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" />
<view class="tit">这是一个视频</view>
......@@ -29,8 +54,10 @@
<span class="t1">分享</span>
</button>
</view>
</view>
</view> -->
</view>
</view>
</view>
</view>
<shortcut class="red-p" types="{{[]}}" pics="{{['red-package']}}"></shortcut>
......
......@@ -5,41 +5,132 @@ import {
let app = getApp();
Page({
data: {
active: 0
isOverShare: true,
authorizeVisible: false,
total: 0,
page: 1,
size: 10,
dataList: [],
options: {},
},
onShareAppMessage() {
let detailData = this.data.detailData;
let title = detailData && detailData.videoName || "";
let path = `pages/detail/detail?c=${detailData.videoCode}`;
let imageUrl = detailData && detailData.thumbnail || "";
return {
title,
path,
imageUrl
}
},
showAuth() {
this.setData({
authorizeVisible: true
})
},
onLoad(options) {
let tempOptions = JSON.parse(decodeURIComponent(JSON.stringify(options)));
this.setData({
options: tempOptions
});
this.initData();
},
onLoad(options) {},
initData() {
this.resetPage();
this.queryVideoList();
},
onChange(event) {
wx.showToast({
title: `切换到标签 ${event.detail.name}`,
icon: 'none'
/**
* 到达底部
* 做加载更多操作
*/
onReachBottom() {
if (this.data.dataList.length < this.data.total) {
this.setData({
page: this.data.page + 1
});
this.queryVideoList();
}
},
onVanTabsHandler(event) {
console.log("event:", event);
let {
index,
title
} = event.detail;
// 重置页面列表 点击搜索条件时需要
resetPage() {
this.setData({
page: 1,
dataList: [],
queueCode: "",
})
},
onVideoHandler(evt) {
onDetailHandler(evt) {
let curItem = getBindtapData(evt);
let curIndex = getBindtapData(evt, "index");
app.router.push({
path: "detail",
query: {
c: curIndex + ""
c: curItem.videoCode || ""
}
})
},
/**
* 获取视频列表
*/
queryVideoList() {
return new Promise((resolve, reject) => {
app.post({
url: app.api.videoAcccout,
data: {
page: this.data.page,
size: this.data.size,
accountCode: this.data.options.c
}
}).then((result) => {
let dataList = result.list;
dataList = this.data.dataList.concat(dataList);
this.setData({
dataList: dataList,
total: result.total,
})
resolve(result);
}).catch((err) => {
reject(err)
});
});
},
/**
* 隐藏蒙层
*/
hideMask() {
this.setData({
productDetailVisible: false,
authorizeVisible: false,
})
console.log("curItem:", curItem);
console.log("curIndex:", curIndex);
},
/**
* 获取列列表
* 子组件事件
* @param {*} evt
*/
evtcomp(evt) {
let {
name,
data
} = evt.detail;
switch (name) {
// 隐藏蒙层
case "_evt_hide_mask":
this.hideMask();
break;
/**
* 重拉数据已在
*/
queryList() {
case "_evt_auth_complete":
// this.initData();
this.hideMask();
break;
default:
break;
}
},
})
......
......@@ -5,12 +5,28 @@
<view class="app__content main">
<view class="personal">
<view class="top-space"></view>
<view class="name">我爱我家 的视频列表</view>
<image class="portrait" mode="aspectFill" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" />
<view class="name">{{options.accountName}} 的视频列表</view>
<image class="portrait" mode="aspectFill" src="{{options.headImage}}" />
</view>
<view class="content">
<view class="list">
<view bindtap="onVideoHandler" wx:for="{{8}}" wx:key="index" data-data="{{item}}" data-index="{{index}}" class="list-item">
<view wx:for="{{dataList}}" wx:key="index" class="list-item">
<view bindtap="onDetailHandler" data-data="{{item}}" data-index="{{index}}" class="list-item-video">
<video objectFit="cover" class="vid" poster="{{item.thumbnail}}" src="{{item.videoUrl}}" />
<view class="tit">{{item.videoName}}</view>
</view>
<view class="list-item-func">
<view class="user">
<image class="portrait" mode="aspectFill" src="{{item.headImage}}" />
<text class="name">{{item.accountName || ""}}</text>
</view>
<button class="share" open-type="share">
<span class="t1 iconfont iconwechat"></span>
<span class="t1">分享</span>
</button>
</view>
</view>
<!-- <view bindtap="onVideoHandler" wx:for="{{8}}" wx:key="index" data-data="{{item}}" data-index="{{index}}" class="list-item">
<view class="list-item-video">
<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" />
<view class="tit">这是一个视频</view>
......@@ -25,7 +41,7 @@
<span class="t1">分享</span>
</button>
</view>
</view>
</view> -->
</view>
</view>
</view>
......
......@@ -82,12 +82,10 @@ VantComponent({
onChange(event) {
const { index, picker, value } = event.detail;
this.code = value[index].code;
let getValues = picker.getValues();
getValues = this.parseOutputValues(getValues);
this.setValues().then(() => {
this.$emit('change', {
picker,
values: getValues,
values: this.parseOutputValues(picker.getValues()),
index
});
});
......
......@@ -19,7 +19,7 @@ VantComponent({
childIndex: this.children.length
});
this.children.push(target);
// 收集 dropdown-item 的 data 挂在 data 上
// 收集 dorpdown-item 的 data 挂在 data 上
target &&
this.setData({
itemListData: this.data.itemListData.concat([target.data])
......
@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
@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
......
@import '../common/index.wxss';@font-face{font-weight:400;font-family:vant-icon;font-style:normal;font-display:auto;src:url(https://img.yzcdn.cn/vant/vant-icon-0bc654.woff2) format("woff2"),url(https://img.yzcdn.cn/vant/vant-icon-0bc654.woff) format("woff"),url(https://img.yzcdn.cn/vant/vant-icon-0bc654.ttf) format("truetype")}.van-icon{position:relative;font:normal normal normal 14px/1 vant-icon;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased}.van-icon,.van-icon:before{display:inline-block}.van-icon-add-o:before{content:"\F000"}.van-icon-add-square:before{content:"\F001"}.van-icon-add:before{content:"\F002"}.van-icon-after-sale:before{content:"\F003"}.van-icon-aim:before{content:"\F004"}.van-icon-alipay:before{content:"\F005"}.van-icon-apps-o:before{content:"\F006"}.van-icon-arrow-down:before{content:"\F007"}.van-icon-arrow-left:before{content:"\F008"}.van-icon-arrow-up:before{content:"\F009"}.van-icon-arrow:before{content:"\F00A"}.van-icon-ascending:before{content:"\F00B"}.van-icon-audio:before{content:"\F00C"}.van-icon-award-o:before{content:"\F00D"}.van-icon-award:before{content:"\F00E"}.van-icon-bag-o:before{content:"\F00F"}.van-icon-bag:before{content:"\F010"}.van-icon-balance-list-o:before{content:"\F011"}.van-icon-balance-list:before{content:"\F012"}.van-icon-balance-o:before{content:"\F013"}.van-icon-balance-pay:before{content:"\F014"}.van-icon-bar-chart-o:before{content:"\F015"}.van-icon-bars:before{content:"\F016"}.van-icon-bell:before{content:"\F017"}.van-icon-bill-o:before{content:"\F018"}.van-icon-bill:before{content:"\F019"}.van-icon-birthday-cake-o:before{content:"\F01A"}.van-icon-bookmark-o:before{content:"\F01B"}.van-icon-bookmark:before{content:"\F01C"}.van-icon-browsing-history-o:before{content:"\F01D"}.van-icon-browsing-history:before{content:"\F01E"}.van-icon-brush-o:before{content:"\F01F"}.van-icon-bulb-o:before{content:"\F020"}.van-icon-bullhorn-o:before{content:"\F021"}.van-icon-calender-o:before{content:"\F022"}.van-icon-card:before{content:"\F023"}.van-icon-cart-circle-o:before{content:"\F024"}.van-icon-cart-circle:before{content:"\F025"}.van-icon-cart-o:before{content:"\F026"}.van-icon-cart:before{content:"\F027"}.van-icon-cash-back-record:before{content:"\F028"}.van-icon-cash-on-deliver:before{content:"\F029"}.van-icon-cashier-o:before{content:"\F02A"}.van-icon-certificate:before{content:"\F02B"}.van-icon-chart-trending-o:before{content:"\F02C"}.van-icon-chat-o:before{content:"\F02D"}.van-icon-chat:before{content:"\F02E"}.van-icon-checked:before{content:"\F02F"}.van-icon-circle:before{content:"\F030"}.van-icon-clear:before{content:"\F031"}.van-icon-clock-o:before{content:"\F032"}.van-icon-clock:before{content:"\F033"}.van-icon-close:before{content:"\F034"}.van-icon-closed-eye:before{content:"\F035"}.van-icon-cluster-o:before{content:"\F036"}.van-icon-cluster:before{content:"\F037"}.van-icon-column:before{content:"\F038"}.van-icon-comment-circle-o:before{content:"\F039"}.van-icon-comment-circle:before{content:"\F03A"}.van-icon-comment-o:before{content:"\F03B"}.van-icon-comment:before{content:"\F03C"}.van-icon-completed:before{content:"\F03D"}.van-icon-contact:before{content:"\F03E"}.van-icon-coupon-o:before{content:"\F03F"}.van-icon-coupon:before{content:"\F040"}.van-icon-credit-pay:before{content:"\F041"}.van-icon-cross:before{content:"\F042"}.van-icon-debit-pay:before{content:"\F043"}.van-icon-delete:before{content:"\F044"}.van-icon-descending:before{content:"\F045"}.van-icon-description:before{content:"\F046"}.van-icon-desktop-o:before{content:"\F047"}.van-icon-diamond-o:before{content:"\F048"}.van-icon-diamond:before{content:"\F049"}.van-icon-discount:before{content:"\F04A"}.van-icon-down:before{content:"\F04B"}.van-icon-ecard-pay:before{content:"\F04C"}.van-icon-edit:before{content:"\F04D"}.van-icon-ellipsis:before{content:"\F04E"}.van-icon-empty:before{content:"\F04F"}.van-icon-envelop-o:before{content:"\F050"}.van-icon-exchange:before{content:"\F051"}.van-icon-expand-o:before{content:"\F052"}.van-icon-expand:before{content:"\F053"}.van-icon-eye-o:before{content:"\F054"}.van-icon-eye:before{content:"\F055"}.van-icon-fail:before{content:"\F056"}.van-icon-failure:before{content:"\F057"}.van-icon-filter-o:before{content:"\F058"}.van-icon-fire-o:before{content:"\F059"}.van-icon-fire:before{content:"\F05A"}.van-icon-flag-o:before{content:"\F05B"}.van-icon-flower-o:before{content:"\F05C"}.van-icon-free-postage:before{content:"\F05D"}.van-icon-friends-o:before{content:"\F05E"}.van-icon-friends:before{content:"\F05F"}.van-icon-gem-o:before{content:"\F060"}.van-icon-gem:before{content:"\F061"}.van-icon-gift-card-o:before{content:"\F062"}.van-icon-gift-card:before{content:"\F063"}.van-icon-gift-o:before{content:"\F064"}.van-icon-gift:before{content:"\F065"}.van-icon-gold-coin-o:before{content:"\F066"}.van-icon-gold-coin:before{content:"\F067"}.van-icon-good-job-o:before{content:"\F068"}.van-icon-good-job:before{content:"\F069"}.van-icon-goods-collect-o:before{content:"\F06A"}.van-icon-goods-collect:before{content:"\F06B"}.van-icon-graphic:before{content:"\F06C"}.van-icon-home-o:before{content:"\F06D"}.van-icon-hot-o:before{content:"\F06E"}.van-icon-hot-sale-o:before{content:"\F06F"}.van-icon-hot-sale:before{content:"\F070"}.van-icon-hot:before{content:"\F071"}.van-icon-hotel-o:before{content:"\F072"}.van-icon-idcard:before{content:"\F073"}.van-icon-info-o:before{content:"\F074"}.van-icon-info:before{content:"\F075"}.van-icon-invition:before{content:"\F076"}.van-icon-label-o:before{content:"\F077"}.van-icon-label:before{content:"\F078"}.van-icon-like-o:before{content:"\F079"}.van-icon-like:before{content:"\F07A"}.van-icon-live:before{content:"\F07B"}.van-icon-location-o:before{content:"\F07C"}.van-icon-location:before{content:"\F07D"}.van-icon-lock:before{content:"\F07E"}.van-icon-logistics:before{content:"\F07F"}.van-icon-manager-o:before{content:"\F080"}.van-icon-manager:before{content:"\F081"}.van-icon-map-marked:before{content:"\F082"}.van-icon-medel-o:before{content:"\F083"}.van-icon-medel:before{content:"\F084"}.van-icon-more-o:before{content:"\F085"}.van-icon-more:before{content:"\F086"}.van-icon-music-o:before{content:"\F087"}.van-icon-music:before{content:"\F088"}.van-icon-new-arrival-o:before{content:"\F089"}.van-icon-new-arrival:before{content:"\F08A"}.van-icon-new-o:before{content:"\F08B"}.van-icon-new:before{content:"\F08C"}.van-icon-newspaper-o:before{content:"\F08D"}.van-icon-notes-o:before{content:"\F08E"}.van-icon-orders-o:before{content:"\F08F"}.van-icon-other-pay:before{content:"\F090"}.van-icon-paid:before{content:"\F091"}.van-icon-passed:before{content:"\F092"}.van-icon-pause-circle-o:before{content:"\F093"}.van-icon-pause-circle:before{content:"\F094"}.van-icon-pause:before{content:"\F095"}.van-icon-peer-pay:before{content:"\F096"}.van-icon-pending-payment:before{content:"\F097"}.van-icon-phone-circle-o:before{content:"\F098"}.van-icon-phone-circle:before{content:"\F099"}.van-icon-phone-o:before{content:"\F09A"}.van-icon-phone:before{content:"\F09B"}.van-icon-photo-o:before{content:"\F09C"}.van-icon-photo:before{content:"\F09D"}.van-icon-photograph:before{content:"\F09E"}.van-icon-play-circle-o:before{content:"\F09F"}.van-icon-play-circle:before{content:"\F0A0"}.van-icon-play:before{content:"\F0A1"}.van-icon-plus:before{content:"\F0A2"}.van-icon-point-gift-o:before{content:"\F0A3"}.van-icon-point-gift:before{content:"\F0A4"}.van-icon-points:before{content:"\F0A5"}.van-icon-printer:before{content:"\F0A6"}.van-icon-qr-invalid:before{content:"\F0A7"}.van-icon-qr:before{content:"\F0A8"}.van-icon-question-o:before{content:"\F0A9"}.van-icon-question:before{content:"\F0AA"}.van-icon-records:before{content:"\F0AB"}.van-icon-refund-o:before{content:"\F0AC"}.van-icon-replay:before{content:"\F0AD"}.van-icon-scan:before{content:"\F0AE"}.van-icon-search:before{content:"\F0AF"}.van-icon-send-gift-o:before{content:"\F0B0"}.van-icon-send-gift:before{content:"\F0B1"}.van-icon-service-o:before{content:"\F0B2"}.van-icon-service:before{content:"\F0B3"}.van-icon-setting-o:before{content:"\F0B4"}.van-icon-setting:before{content:"\F0B5"}.van-icon-share:before{content:"\F0B6"}.van-icon-shop-collect-o:before{content:"\F0B7"}.van-icon-shop-collect:before{content:"\F0B8"}.van-icon-shop-o:before{content:"\F0B9"}.van-icon-shop:before{content:"\F0BA"}.van-icon-shopping-cart-o:before{content:"\F0BB"}.van-icon-shopping-cart:before{content:"\F0BC"}.van-icon-shrink:before{content:"\F0BD"}.van-icon-sign:before{content:"\F0BE"}.van-icon-smile-comment-o:before{content:"\F0BF"}.van-icon-smile-comment:before{content:"\F0C0"}.van-icon-smile-o:before{content:"\F0C1"}.van-icon-smile:before{content:"\F0C2"}.van-icon-star-o:before{content:"\F0C3"}.van-icon-star:before{content:"\F0C4"}.van-icon-stop-circle-o:before{content:"\F0C5"}.van-icon-stop-circle:before{content:"\F0C6"}.van-icon-stop:before{content:"\F0C7"}.van-icon-success:before{content:"\F0C8"}.van-icon-thumb-circle-o:before{content:"\F0C9"}.van-icon-thumb-circle:before{content:"\F0CA"}.van-icon-todo-list-o:before{content:"\F0CB"}.van-icon-todo-list:before{content:"\F0CC"}.van-icon-tosend:before{content:"\F0CD"}.van-icon-tv-o:before{content:"\F0CE"}.van-icon-umbrella-circle:before{content:"\F0CF"}.van-icon-underway-o:before{content:"\F0D0"}.van-icon-underway:before{content:"\F0D1"}.van-icon-upgrade:before{content:"\F0D2"}.van-icon-user-circle-o:before{content:"\F0D3"}.van-icon-user-o:before{content:"\F0D4"}.van-icon-video-o:before{content:"\F0D5"}.van-icon-video:before{content:"\F0D6"}.van-icon-vip-card-o:before{content:"\F0D7"}.van-icon-vip-card:before{content:"\F0D8"}.van-icon-volume-o:before{content:"\F0D9"}.van-icon-volume:before{content:"\F0DA"}.van-icon-wap-home-o:before{content:"\F0DB"}.van-icon-wap-home:before{content:"\F0DC"}.van-icon-wap-nav:before{content:"\F0DD"}.van-icon-warn-o:before{content:"\F0DE"}.van-icon-warning-o:before{content:"\F0DF"}.van-icon-warning:before{content:"\F0E0"}.van-icon-weapp-nav:before{content:"\F0E1"}.van-icon-wechat:before{content:"\F0E2"}.van-icon-youzan-shield:before{content:"\F0E3"}:host{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-icon--image{width:1em;height:1em}.van-icon__image{width:100%;height:100%}.van-icon__info{z-index:1}
\ No newline at end of file
@import '../common/index.wxss';@font-face{font-weight:400;font-family:vant-icon;font-style:normal;font-display:auto;src:url(https://img.yzcdn.cn/vant/vant-icon-0bc654.woff2) format("woff2"),url(https://img.yzcdn.cn/vant/vant-icon-0bc654.woff) format("woff"),url(https://img.yzcdn.cn/vant/vant-icon-0bc654.ttf) format("truetype")}.van-icon{position:relative;font:normal normal normal 14px/1 vant-icon;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased}.van-icon,.van-icon:before{display:inline-block}.van-icon-add-o:before{content:"\F000"}.van-icon-add-square:before{content:"\F001"}.van-icon-add:before{content:"\F002"}.van-icon-after-sale:before{content:"\F003"}.van-icon-aim:before{content:"\F004"}.van-icon-alipay:before{content:"\F005"}.van-icon-apps-o:before{content:"\F006"}.van-icon-arrow-down:before{content:"\F007"}.van-icon-arrow-left:before{content:"\F008"}.van-icon-arrow-up:before{content:"\F009"}.van-icon-arrow:before{content:"\F00A"}.van-icon-ascending:before{content:"\F00B"}.van-icon-audio:before{content:"\F00C"}.van-icon-award-o:before{content:"\F00D"}.van-icon-award:before{content:"\F00E"}.van-icon-bag-o:before{content:"\F00F"}.van-icon-bag:before{content:"\F010"}.van-icon-balance-list-o:before{content:"\F011"}.van-icon-balance-list:before{content:"\F012"}.van-icon-balance-o:before{content:"\F013"}.van-icon-balance-pay:before{content:"\F014"}.van-icon-bar-chart-o:before{content:"\F015"}.van-icon-bars:before{content:"\F016"}.van-icon-bell:before{content:"\F017"}.van-icon-bill-o:before{content:"\F018"}.van-icon-bill:before{content:"\F019"}.van-icon-birthday-cake-o:before{content:"\F01A"}.van-icon-bookmark-o:before{content:"\F01B"}.van-icon-bookmark:before{content:"\F01C"}.van-icon-browsing-history-o:before{content:"\F01D"}.van-icon-browsing-history:before{content:"\F01E"}.van-icon-brush-o:before{content:"\F01F"}.van-icon-bulb-o:before{content:"\F020"}.van-icon-bullhorn-o:before{content:"\F021"}.van-icon-calender-o:before{content:"\F022"}.van-icon-card:before{content:"\F023"}.van-icon-cart-circle-o:before{content:"\F024"}.van-icon-cart-circle:before{content:"\F025"}.van-icon-cart-o:before{content:"\F026"}.van-icon-cart:before{content:"\F027"}.van-icon-cash-back-record:before{content:"\F028"}.van-icon-cash-on-deliver:before{content:"\F029"}.van-icon-cashier-o:before{content:"\F02A"}.van-icon-certificate:before{content:"\F02B"}.van-icon-chart-trending-o:before{content:"\F02C"}.van-icon-chat-o:before{content:"\F02D"}.van-icon-chat:before{content:"\F02E"}.van-icon-checked:before{content:"\F02F"}.van-icon-circle:before{content:"\F030"}.van-icon-clear:before{content:"\F031"}.van-icon-clock-o:before{content:"\F032"}.van-icon-clock:before{content:"\F033"}.van-icon-close:before{content:"\F034"}.van-icon-closed-eye:before{content:"\F035"}.van-icon-cluster-o:before{content:"\F036"}.van-icon-cluster:before{content:"\F037"}.van-icon-column:before{content:"\F038"}.van-icon-comment-circle-o:before{content:"\F039"}.van-icon-comment-circle:before{content:"\F03A"}.van-icon-comment-o:before{content:"\F03B"}.van-icon-comment:before{content:"\F03C"}.van-icon-completed:before{content:"\F03D"}.van-icon-contact:before{content:"\F03E"}.van-icon-coupon-o:before{content:"\F03F"}.van-icon-coupon:before{content:"\F040"}.van-icon-credit-pay:before{content:"\F041"}.van-icon-cross:before{content:"\F042"}.van-icon-debit-pay:before{content:"\F043"}.van-icon-delete:before{content:"\F044"}.van-icon-descending:before{content:"\F045"}.van-icon-description:before{content:"\F046"}.van-icon-desktop-o:before{content:"\F047"}.van-icon-diamond-o:before{content:"\F048"}.van-icon-diamond:before{content:"\F049"}.van-icon-discount:before{content:"\F04A"}.van-icon-down:before{content:"\F04B"}.van-icon-ecard-pay:before{content:"\F04C"}.van-icon-edit:before{content:"\F04D"}.van-icon-ellipsis:before{content:"\F04E"}.van-icon-empty:before{content:"\F04F"}.van-icon-envelop-o:before{content:"\F050"}.van-icon-exchange:before{content:"\F051"}.van-icon-expand-o:before{content:"\F052"}.van-icon-expand:before{content:"\F053"}.van-icon-eye-o:before{content:"\F054"}.van-icon-eye:before{content:"\F055"}.van-icon-fail:before{content:"\F056"}.van-icon-failure:before{content:"\F057"}.van-icon-filter-o:before{content:"\F058"}.van-icon-fire-o:before{content:"\F059"}.van-icon-fire:before{content:"\F05A"}.van-icon-flag-o:before{content:"\F05B"}.van-icon-flower-o:before{content:"\F05C"}.van-icon-free-postage:before{content:"\F05D"}.van-icon-friends-o:before{content:"\F05E"}.van-icon-friends:before{content:"\F05F"}.van-icon-gem-o:before{content:"\F060"}.van-icon-gem:before{content:"\F061"}.van-icon-gift-card-o:before{content:"\F062"}.van-icon-gift-card:before{content:"\F063"}.van-icon-gift-o:before{content:"\F064"}.van-icon-gift:before{content:"\F065"}.van-icon-gold-coin-o:before{content:"\F066"}.van-icon-gold-coin:before{content:"\F067"}.van-icon-good-job-o:before{content:"\F068"}.van-icon-good-job:before{content:"\F069"}.van-icon-goods-collect-o:before{content:"\F06A"}.van-icon-goods-collect:before{content:"\F06B"}.van-icon-graphic:before{content:"\F06C"}.van-icon-home-o:before{content:"\F06D"}.van-icon-hot-o:before{content:"\F06E"}.van-icon-hot-sale-o:before{content:"\F06F"}.van-icon-hot-sale:before{content:"\F070"}.van-icon-hot:before{content:"\F071"}.van-icon-hotel-o:before{content:"\F072"}.van-icon-idcard:before{content:"\F073"}.van-icon-info-o:before{content:"\F074"}.van-icon-info:before{content:"\F075"}.van-icon-invition:before{content:"\F076"}.van-icon-label-o:before{content:"\F077"}.van-icon-label:before{content:"\F078"}.van-icon-like-o:before{content:"\F079"}.van-icon-like:before{content:"\F07A"}.van-icon-live:before{content:"\F07B"}.van-icon-location-o:before{content:"\F07C"}.van-icon-location:before{content:"\F07D"}.van-icon-lock:before{content:"\F07E"}.van-icon-logistics:before{content:"\F07F"}.van-icon-manager-o:before{content:"\F080"}.van-icon-manager:before{content:"\F081"}.van-icon-map-marked:before{content:"\F082"}.van-icon-medel-o:before{content:"\F083"}.van-icon-medel:before{content:"\F084"}.van-icon-more-o:before{content:"\F085"}.van-icon-more:before{content:"\F086"}.van-icon-music-o:before{content:"\F087"}.van-icon-music:before{content:"\F088"}.van-icon-new-arrival-o:before{content:"\F089"}.van-icon-new-arrival:before{content:"\F08A"}.van-icon-new-o:before{content:"\F08B"}.van-icon-new:before{content:"\F08C"}.van-icon-newspaper-o:before{content:"\F08D"}.van-icon-notes-o:before{content:"\F08E"}.van-icon-orders-o:before{content:"\F08F"}.van-icon-other-pay:before{content:"\F090"}.van-icon-paid:before{content:"\F091"}.van-icon-passed:before{content:"\F092"}.van-icon-pause-circle-o:before{content:"\F093"}.van-icon-pause-circle:before{content:"\F094"}.van-icon-pause:before{content:"\F095"}.van-icon-peer-pay:before{content:"\F096"}.van-icon-pending-payment:before{content:"\F097"}.van-icon-phone-circle-o:before{content:"\F098"}.van-icon-phone-circle:before{content:"\F099"}.van-icon-phone-o:before{content:"\F09A"}.van-icon-phone:before{content:"\F09B"}.van-icon-photo-o:before{content:"\F09C"}.van-icon-photo:before{content:"\F09D"}.van-icon-photograph:before{content:"\F09E"}.van-icon-play-circle-o:before{content:"\F09F"}.van-icon-play-circle:before{content:"\F0A0"}.van-icon-play:before{content:"\F0A1"}.van-icon-plus:before{content:"\F0A2"}.van-icon-point-gift-o:before{content:"\F0A3"}.van-icon-point-gift:before{content:"\F0A4"}.van-icon-points:before{content:"\F0A5"}.van-icon-printer:before{content:"\F0A6"}.van-icon-qr-invalid:before{content:"\F0A7"}.van-icon-qr:before{content:"\F0A8"}.van-icon-question-o:before{content:"\F0A9"}.van-icon-question:before{content:"\F0AA"}.van-icon-records:before{content:"\F0AB"}.van-icon-refund-o:before{content:"\F0AC"}.van-icon-replay:before{content:"\F0AD"}.van-icon-scan:before{content:"\F0AE"}.van-icon-search:before{content:"\F0AF"}.van-icon-send-gift-o:before{content:"\F0B0"}.van-icon-send-gift:before{content:"\F0B1"}.van-icon-service-o:before{content:"\F0B2"}.van-icon-service:before{content:"\F0B3"}.van-icon-setting-o:before{content:"\F0B4"}.van-icon-setting:before{content:"\F0B5"}.van-icon-share:before{content:"\F0B6"}.van-icon-shop-collect-o:before{content:"\F0B7"}.van-icon-shop-collect:before{content:"\F0B8"}.van-icon-shop-o:before{content:"\F0B9"}.van-icon-shop:before{content:"\F0BA"}.van-icon-shopping-cart-o:before{content:"\F0BB"}.van-icon-shopping-cart:before{content:"\F0BC"}.van-icon-shrink:before{content:"\F0BD"}.van-icon-sign:before{content:"\F0BE"}.van-icon-smile-comment-o:before{content:"\F0BF"}.van-icon-smile-comment:before{content:"\F0C0"}.van-icon-smile-o:before{content:"\F0C1"}.van-icon-smile:before{content:"\F0C2"}.van-icon-star-o:before{content:"\F0C3"}.van-icon-star:before{content:"\F0C4"}.van-icon-stop-circle-o:before{content:"\F0C5"}.van-icon-stop-circle:before{content:"\F0C6"}.van-icon-stop:before{content:"\F0C7"}.van-icon-success:before{content:"\F0C8"}.van-icon-thumb-circle-o:before{content:"\F0C9"}.van-icon-thumb-circle:before{content:"\F0CA"}.van-icon-todo-list-o:before{content:"\F0CB"}.van-icon-todo-list:before{content:"\F0CC"}.van-icon-tosend:before{content:"\F0CD"}.van-icon-tv-o:before{content:"\F0CE"}.van-icon-umbrella-circle:before{content:"\F0CF"}.van-icon-underway-o:before{content:"\F0D0"}.van-icon-underway:before{content:"\F0D1"}.van-icon-upgrade:before{content:"\F0D2"}.van-icon-user-circle-o:before{content:"\F0D3"}.van-icon-user-o:before{content:"\F0D4"}.van-icon-video-o:before{content:"\F0D5"}.van-icon-video:before{content:"\F0D6"}.van-icon-vip-card-o:before{content:"\F0D7"}.van-icon-vip-card:before{content:"\F0D8"}.van-icon-volume-o:before{content:"\F0D9"}.van-icon-volume:before{content:"\F0DA"}.van-icon-wap-home-o:before{content:"\F0DB"}.van-icon-wap-home:before{content:"\F0DC"}.van-icon-wap-nav:before{content:"\F0DD"}.van-icon-warn-o:before{content:"\F0DE"}.van-icon-warning-o:before{content:"\F0DF"}.van-icon-warning:before{content:"\F0E0"}.van-icon-weapp-nav:before{content:"\F0E1"}.van-icon-wechat:before{content:"\F0E2"}.van-icon-youzan-shield:before{content:"\F0E3"}:host{display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-icon--image{width:1em;height:1em}.van-icon__image{width:100%;height:100%}.van-icon__info{z-index:1}
\ No newline at end of file
......
import { VantComponent } from '../common/component';
VantComponent({
relation: {
name: 'index-bar',
type: 'ancestor',
linked(target) {
this.parent = target;
},
unlinked() {
this.parent = null;
}
},
props: {
useSlot: Boolean,
index: null
},
data: {
active: false,
wrapperStyle: '',
anchorStyle: ''
}
});
<view
class="van-index-anchor-wrapper"
style="{{ wrapperStyle }}"
>
<view
class="van-index-anchor {{ active ? 'van-index-anchor--active van-hairline--bottom' : '' }}"
style="{{ anchorStyle }}"
>
<slot wx:if="{{ useSlot }}"/>
<block wx:else>
<text>{{ index }}</text>
</block>
</view>
</view>
@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
import { VantComponent } from '../common/component';
import { GREEN } from '../common/color';
const indexList = () => {
const indexList = [];
const charCodeOfA = 'A'.charCodeAt(0);
for (let i = 0; i < 26; i++) {
indexList.push(String.fromCharCode(charCodeOfA + i));
}
return indexList;
};
VantComponent({
relation: {
name: 'index-anchor',
type: 'descendant',
linked() {
this.updateData();
},
linkChanged() {
this.updateData();
},
unlinked() {
this.updateData();
}
},
props: {
sticky: {
type: Boolean,
value: true
},
zIndex: {
type: Number,
value: 1
},
highlightColor: {
type: String,
value: GREEN
},
scrollTop: {
type: Number,
value: 0,
observer: 'onScroll'
},
stickyOffsetTop: {
type: Number,
value: 0
},
indexList: {
type: Array,
value: indexList()
}
},
data: {
activeAnchorIndex: null,
showSidebar: false
},
methods: {
updateData() {
this.timer && clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.children = this.getRelationNodes('../index-anchor/index');
this.setData({
showSidebar: !!this.children.length
});
this.setRect().then(() => {
this.onScroll();
});
}, 0);
},
setRect() {
return Promise.all([
this.setAnchorsRect(),
this.setListRect(),
this.setSiderbarRect()
]);
},
setAnchorsRect() {
return Promise.all(this.children.map(anchor => (anchor.getRect('.van-index-anchor-wrapper').then((rect) => {
Object.assign(anchor, {
height: rect.height,
top: rect.top + this.data.scrollTop
});
}))));
},
setListRect() {
return this.getRect('.van-index-bar').then((rect) => {
Object.assign(this, {
height: rect.height,
top: rect.top + this.data.scrollTop
});
});
},
setSiderbarRect() {
return this.getRect('.van-index-bar__sidebar').then(res => {
this.sidebar = {
height: res.height,
top: res.top
};
});
},
setDiffData({ target, data }) {
const diffData = {};
Object.keys(data).forEach(key => {
if (target.data[key] !== data[key]) {
diffData[key] = data[key];
}
});
if (Object.keys(diffData).length) {
target.setData(diffData);
}
},
getAnchorRect(anchor) {
return anchor.getRect('.van-index-anchor-wrapper').then((rect) => ({
height: rect.height,
top: rect.top
}));
},
getActiveAnchorIndex() {
const { children } = this;
const { sticky, scrollTop, stickyOffsetTop } = this.data;
for (let i = this.children.length - 1; i >= 0; i--) {
const preAnchorHeight = i > 0 ? children[i - 1].height : 0;
const reachTop = sticky ? preAnchorHeight + stickyOffsetTop : 0;
if (reachTop + scrollTop >= children[i].top) {
return i;
}
}
return -1;
},
onScroll() {
const { children = [] } = this;
if (!children.length) {
return;
}
const { sticky, stickyOffsetTop, zIndex, highlightColor, scrollTop } = this.data;
const active = this.getActiveAnchorIndex();
this.setDiffData({
target: this,
data: {
activeAnchorIndex: active
}
});
if (sticky) {
let isActiveAnchorSticky = false;
if (active !== -1) {
isActiveAnchorSticky = children[active].top <= stickyOffsetTop + scrollTop;
}
children.forEach((item, index) => {
if (index === active) {
let wrapperStyle = '';
let anchorStyle = `
color: ${highlightColor};
`;
if (isActiveAnchorSticky) {
wrapperStyle = `
height: ${children[index].height}px;
`;
anchorStyle = `
position: fixed;
top: ${stickyOffsetTop}px;
z-index: ${zIndex};
color: ${highlightColor};
`;
}
this.setDiffData({
target: item,
data: {
active: true,
anchorStyle,
wrapperStyle
}
});
}
else if (index === active - 1) {
const currentAnchor = children[index];
const currentOffsetTop = currentAnchor.top;
const targetOffsetTop = index === children.length - 1
? this.top
: children[index + 1].top;
const parentOffsetHeight = targetOffsetTop - currentOffsetTop;
const translateY = parentOffsetHeight - currentAnchor.height;
const anchorStyle = `
position: relative;
transform: translate3d(0, ${translateY}px, 0);
z-index: ${zIndex};
color: ${highlightColor};
`;
this.setDiffData({
target: item,
data: {
active: true,
anchorStyle
}
});
}
else {
this.setDiffData({
target: item,
data: {
active: false,
anchorStyle: '',
wrapperStyle: '',
}
});
}
});
}
},
onClick(event) {
this.scrollToAnchor(event.target.dataset.index);
},
onTouchMove(event) {
const sidebarLength = this.children.length;
const touch = event.touches[0];
const itemHeight = this.sidebar.height / sidebarLength;
let index = Math.floor((touch.clientY - this.sidebar.top) / itemHeight);
if (index < 0) {
index = 0;
}
else if (index > sidebarLength - 1) {
index = sidebarLength - 1;
}
this.scrollToAnchor(index);
},
onTouchStop() {
this.scrollToAnchorIndex = null;
},
scrollToAnchor(index) {
if (typeof index !== 'number' || this.scrollToAnchorIndex === index) {
return;
}
this.scrollToAnchorIndex = index;
const anchor = this.children.filter(item => item.data.index === this.data.indexList[index])[0];
this.$emit('select', anchor.data.index);
anchor && wx.pageScrollTo({
duration: 0,
scrollTop: anchor.top
});
}
}
});
<view class="van-index-bar">
<slot />
<view
wx:if="{{ showSidebar }}"
class="van-index-bar__sidebar"
catch:tap="onClick"
catch:touchmove="onTouchMove"
catch:touchend="onTouchStop"
catch:touchcancel="onTouchStop"
>
<view
wx:for="{{ indexList }}"
wx:key="index"
class="van-index-bar__index"
style="z-index: {{ zIndex + 1 }}; color: {{ activeAnchorIndex === index ? highlightColor : '' }}"
data-index="{{ index }}"
>
{{ item }}
</view>
</view>
</view>
@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
@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
@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
......
......@@ -8,10 +8,7 @@ VantComponent({
readonly: Boolean,
disabled: Boolean,
allowHalf: Boolean,
size: {
type: null,
observer: 'setSizeWithUnit'
},
size: null,
icon: {
type: String,
value: 'star'
......@@ -47,8 +44,7 @@ VantComponent({
},
data: {
innerValue: 0,
gutterWithUnit: undefined,
sizeWithUnit: '20px'
gutterWithUnit: undefined
},
watch: {
value(value) {
......@@ -58,11 +54,6 @@ VantComponent({
}
},
methods: {
setSizeWithUnit(val) {
this.setData({
sizeWithUnit: addUnit(val)
});
},
setGutterWithUnit(val) {
this.setData({
gutterWithUnit: addUnit(val)
......
......@@ -8,10 +8,11 @@
class="van-rate__item"
wx:for="{{ count }}"
wx:key="index"
style="font-size: {{ sizeWithUnit }};padding-right: {{ index !== count - 1 ? gutterWithUnit : '' }}"
style="padding-right: {{ index !== count - 1 ? gutterWithUnit : '' }}"
>
<van-icon
name="{{ index + 1 <= innerValue ? icon : voidIcon }}"
size="{{ size }}"
class="van-rate__icon"
custom-class="icon-class"
data-score="{{ index }}"
......@@ -21,6 +22,7 @@
<van-icon
wx:if="{{ allowHalf }}"
size="{{ size }}"
name="{{ index + 0.5 <= innerValue ? icon : voidIcon }}"
class="{{ utils.bem('rate__icon', ['half']) }}"
custom-class="icon-class"
......
......@@ -17,6 +17,7 @@
/>
<view
wx:for="row"
wx:key="index"
wx:for-index="index"
class="{{ utils.bem('skeleton__row') }}"
style="{{ 'width:' + (isArray ? rowWidth[index] : rowWidth) }}"
......
import { VantComponent } from '../common/component';
const ROOT_ELEMENT = '.van-sticky';
VantComponent({
props: {
zIndex: {
......@@ -7,9 +8,27 @@ VantComponent({
},
offsetTop: {
type: Number,
value: 0
value: 0,
observer: 'observeContent'
},
disabled: Boolean
disabled: {
type: Boolean,
observer(value) {
if (!this.mounted) {
return;
}
value ? this.disconnectObserver() : this.initObserver();
}
},
container: {
type: null,
observer(target) {
if (typeof target !== 'function' || !this.data.height) {
return;
}
this.observeContainer();
}
}
},
data: {
wrapStyle: '',
......@@ -31,35 +50,91 @@ VantComponent({
});
}
},
observerContentScroll() {
getContainerRect() {
const nodesRef = this.data.container();
return new Promise(resolve => nodesRef.boundingClientRect(resolve).exec());
},
initObserver() {
this.disconnectObserver();
this.getRect(ROOT_ELEMENT).then((rect) => {
this.setData({ height: rect.height });
wx.nextTick(() => {
this.observeContent();
this.observeContainer();
});
});
},
disconnectObserver(observerName) {
if (observerName) {
const observer = this[observerName];
observer && observer.disconnect();
}
else {
this.contentObserver && this.contentObserver.disconnect();
this.containerObserver && this.containerObserver.disconnect();
}
},
observeContent() {
const { offsetTop } = this.data;
const intersectionObserver = this.createIntersectionObserver({
this.disconnectObserver('contentObserver');
const contentObserver = this.createIntersectionObserver({
thresholds: [0, 1]
});
this.contentObserver = contentObserver;
contentObserver.relativeToViewport({ top: -offsetTop });
contentObserver.observe(ROOT_ELEMENT, res => {
if (this.data.disabled) {
return;
}
this.setFixed(res.boundingClientRect.top);
});
},
observeContainer() {
if (typeof this.data.container !== 'function') {
return;
}
const { height } = this.data;
this.getContainerRect().then((rect) => {
this.containerHeight = rect.height;
this.disconnectObserver('containerObserver');
const containerObserver = this.createIntersectionObserver({
thresholds: [0, 1]
});
this.intersectionObserver = intersectionObserver;
intersectionObserver.relativeToViewport({ top: -offsetTop });
intersectionObserver.observe('.van-sticky', (res) => {
this.containerObserver = containerObserver;
containerObserver.relativeToViewport({
top: this.containerHeight - height
});
containerObserver.observe(ROOT_ELEMENT, res => {
if (this.data.disabled) {
return;
}
// @ts-ignore
const { top, height } = res.boundingClientRect;
const fixed = top <= offsetTop;
this.setFixed(res.boundingClientRect.top);
});
});
},
setFixed(top) {
const { offsetTop, height } = this.data;
const { containerHeight } = this;
const fixed = containerHeight && height
? top > height - containerHeight && top < offsetTop
: top < offsetTop;
this.$emit('scroll', {
scrollTop: top,
isFixed: fixed
});
this.setData({ fixed, height });
this.setData({ fixed });
wx.nextTick(() => {
this.setStyle();
});
});
}
},
mounted() {
this.observerContentScroll();
this.mounted = true;
if (!this.data.disabled) {
this.initObserver();
}
},
destroyed() {
this.intersectionObserver.disconnect();
this.disconnectObserver();
}
});
......
<wxs src="../wxs/utils.wxs" module="utils" />
<view class="custom-class van-sticky }}" style="{{ containerStyle }}">
<view class="custom-class van-sticky" style="{{ containerStyle }}">
<view class="{{ utils.bem('sticky-wrap', { fixed }) }}" style="{{ wrapStyle }}">
<slot />
</view>
......
......@@ -22,10 +22,7 @@ VantComponent({
}
},
data: {
width: null,
inited: false,
active: false,
animated: false
active: false
},
watch: {
title: 'update',
......@@ -35,15 +32,20 @@ VantComponent({
titleStyle: 'update'
},
methods: {
setComputedName() {
this.computedName = this.data.name || this.index;
},
getComputedName() {
if (this.data.name !== '') {
return this.data.name;
}
return this.index;
},
updateRender(active, parent) {
const { data: parentData } = parent;
this.inited = this.inited || active;
this.setData({
active,
shouldRender: this.inited || !parentData.lazyRender
});
},
update() {
if (this.parent) {
this.parent.updateTabs();
......
<wxs src="../wxs/utils.wxs" module="utils" />
<view
wx:if="{{ animated || inited }}"
wx:if="{{ shouldRender }}"
class="custom-class {{ utils.bem('tab__pane', { active, inactive: !active }) }}"
style="{{ animated || active ? '' : 'display: none;' }} {{ width ? 'width:' + width + 'px;' : '' }}"
>
<slot />
</view>
......
@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
@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
......
import { VantComponent } from '../common/component';
import { touch } from '../mixins/touch';
import { nextTick, isDef, addUnit } from '../common/utils';
import { isDef, addUnit } from '../common/utils';
VantComponent({
mixins: [touch],
classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'],
relation: {
name: 'tab',
type: 'descendant',
linked(child) {
child.index = this.children.length;
this.children.push(child);
this.updateTabs(this.data.tabs.concat(child.data));
linked(target) {
target.index = this.children.length;
this.children.push(target);
this.updateTabs();
},
unlinked(child) {
const index = this.children.indexOf(child);
const { tabs } = this.data;
tabs.splice(index, 1);
this.children.splice(index, 1);
let i = index;
while (i >= 0 && i < this.children.length) {
const currentChild = this.children[i];
currentChild.index--;
i++;
}
this.updateTabs(tabs);
unlinked(target) {
this.children = this.children
.filter((child) => child !== target)
.map((child, index) => {
child.index = index;
return child;
});
this.updateTabs();
}
},
props: {
......@@ -47,12 +43,15 @@ VantComponent({
value: -1,
observer: 'setLine'
},
titleActiveColor: String,
titleInactiveColor: String,
active: {
type: [String, Number],
value: 0,
observer(value) {
this.currentName = value;
this.setActiveTab();
observer(name) {
if (name !== this.getCurrentName()) {
this.setCurrentIndexByName(name);
}
}
},
type: {
......@@ -63,6 +62,10 @@ VantComponent({
type: Boolean,
value: true
},
ellipsis: {
type: Boolean,
value: true
},
duration: {
type: Number,
value: 0.3
......@@ -74,16 +77,20 @@ VantComponent({
swipeThreshold: {
type: Number,
value: 4,
observer() {
observer(value) {
this.setData({
scrollable: this.children.length > this.data.swipeThreshold
scrollable: this.children.length > value || !this.data.ellipsis
});
}
},
offsetTop: {
type: Number,
value: 0
}
},
lazyRender: {
type: Boolean,
value: true
},
},
data: {
tabs: [],
......@@ -91,51 +98,87 @@ VantComponent({
scrollLeft: 0,
scrollable: false,
trackStyle: '',
wrapStyle: '',
position: '',
currentIndex: 0
currentIndex: null,
container: null
},
beforeCreate() {
this.children = [];
},
mounted() {
this.setData({
container: () => this.createSelectorQuery().select('.van-tabs')
});
this.setLine(true);
this.setTrack();
this.scrollIntoView();
},
methods: {
updateTabs(tabs) {
tabs = tabs || this.data.tabs;
updateTabs() {
const { children = [], data } = this;
this.setData({
tabs,
scrollable: tabs.length > this.data.swipeThreshold
tabs: children.map((child) => child.data),
scrollable: this.children.length > data.swipeThreshold || !data.ellipsis
});
this.setActiveTab();
this.setCurrentIndexByName(this.getCurrentName() || data.active);
},
trigger(eventName, name) {
const { tabs, currentIndex } = this.data;
trigger(eventName) {
const { currentIndex } = this.data;
const child = this.children[currentIndex];
this.$emit(eventName, {
name,
title: tabs[currentIndex].title
index: currentIndex,
name: child.getComputedName(),
title: child.data.title
});
},
onTap(event) {
const { index } = event.currentTarget.dataset;
const child = this.children[index];
const computedName = child.getComputedName();
if (this.data.tabs[index].disabled) {
this.trigger('disabled', computedName);
if (child.data.disabled) {
this.trigger('disabled');
}
else {
this.trigger('click', computedName);
this.setActive(computedName);
this.setCurrentIndex(index);
wx.nextTick(() => {
this.trigger('click');
});
}
},
// correct the index of active tab
setCurrentIndexByName(name) {
const { children = [] } = this;
const matched = children.filter((child) => child.getComputedName() === name);
const defaultIndex = (children[0] || {}).index || 0;
this.setCurrentIndex(matched.length ? matched[0].index : defaultIndex);
},
setCurrentIndex(currentIndex) {
const { data, children = [] } = this;
if (!isDef(currentIndex) ||
currentIndex >= children.length ||
currentIndex < 0) {
return;
}
const shouldEmitChange = data.currentIndex !== null;
this.setData({ currentIndex });
children.forEach((item, index) => {
const active = index === currentIndex;
if (active !== item.data.active || !item.inited) {
item.updateRender(active, this);
}
});
wx.nextTick(() => {
this.setLine();
this.setTrack();
this.scrollIntoView();
this.trigger('input');
if (shouldEmitChange) {
this.trigger('change');
}
});
},
setActive(name) {
if (name !== this.currentName) {
this.currentName = name;
this.trigger('change', name);
this.setActiveTab();
getCurrentName() {
const activeTab = this.children[this.data.currentIndex];
if (activeTab) {
return activeTab.getComputedName();
}
},
setLine(skipTransition) {
......@@ -143,8 +186,11 @@ VantComponent({
return;
}
const { color, duration, currentIndex, lineWidth, lineHeight } = this.data;
this.getRect('.van-tab', true).then((rects) => {
this.getRect('.van-tab', true).then((rects = []) => {
const rect = rects[currentIndex];
if (rect == null) {
return;
}
const width = lineWidth !== -1 ? lineWidth : rect.width / 2;
const height = lineHeight !== -1
? `height: ${addUnit(lineHeight)}; border-radius: ${addUnit(lineHeight)};`
......@@ -170,51 +216,13 @@ VantComponent({
},
setTrack() {
const { animated, duration, currentIndex } = this.data;
if (!animated)
return '';
this.getRect('.van-tabs__content').then((rect) => {
const { width } = rect;
this.setData({
trackStyle: `
width: ${width * this.children.length}px;
left: ${-1 * currentIndex * width}px;
transition: left ${duration}s;
display: -webkit-box;
display: flex;
transform: translate3d(${-100 * currentIndex}%, 0, 0);
-webkit-transition-duration: ${animated ? duration : 0}s;
transition-duration: ${animated ? duration : 0}s;
`
});
const data = { width, animated };
this.children.forEach((item) => {
item.setData(data);
});
});
},
setActiveTab() {
if (!isDef(this.currentName)) {
const { active } = this.data;
const { children = [] } = this;
this.currentName =
active === '' && children.length
? children[0].getComputedName()
: active;
}
this.children.forEach((item, index) => {
const data = {
active: item.getComputedName() === this.currentName
};
if (data.active) {
this.setData({ currentIndex: index });
data.inited = true;
}
if (data.active !== item.data.active) {
item.setData(data);
}
});
nextTick(() => {
this.setLine();
this.setTrack();
this.scrollIntoView();
});
},
// scroll active tab into view
scrollIntoView() {
......@@ -235,6 +243,9 @@ VantComponent({
});
});
},
onTouchScroll(event) {
this.$emit('scroll', event.detail);
},
onTouchStart(event) {
if (!this.data.swipeable)
return;
......@@ -254,12 +265,10 @@ VantComponent({
const minSwipeDistance = 50;
if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
if (deltaX > 0 && currentIndex !== 0) {
const child = this.children[currentIndex - 1];
this.setActive(child.getComputedName());
this.setCurrentIndex(currentIndex - 1);
}
else if (deltaX < 0 && currentIndex !== tabs.length - 1) {
const child = this.children[currentIndex - 1];
this.setActive(child.getComputedName());
this.setCurrentIndex(currentIndex + 1);
}
}
}
......
<wxs src="../wxs/utils.wxs" module="utils" />
<wxs src="./index.wxs" module="getters" />
<view class="custom-class {{ utils.bem('tabs', [type]) }}">
<van-sticky disabled="{{ !sticky }}" z-index="{{ zIndex }}" offset-top="{{ offsetTop }}">
<van-sticky
disabled="{{ !sticky }}"
z-index="{{ zIndex }}"
offset-top="{{ offsetTop }}"
container="{{ container }}"
bind:scroll="onTouchScroll"
>
<view class="{{ utils.bem('tabs__wrap', { scrollable }) }} {{ type === 'line' && border ? 'van-hairline--top-bottom' : '' }}">
<slot name="nav-left" />
......@@ -18,11 +25,11 @@
wx:for="{{ tabs }}"
wx:key="index"
data-index="{{ index }}"
class="van-ellipsis tab-class {{ index === currentIndex ? 'tab-active-class' : '' }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled }) }}"
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) + '%' : '' }}"
class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}"
style="{{ getters.tabStyle(index === currentIndex, ellipsis, color, type, item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable) }}"
bind:tap="onTap"
>
<view class="van-ellipsis" style="{{ item.titleStyle }}">
<view class="{{ ellipsis ? 'van-ellipsis' : '' }}" style="{{ item.titleStyle }}">
{{ item.title }}
<van-info
wx:if="{{ item.info !== null || item.dot }}"
......
/* eslint-disable */
function tabClass(active, ellipsis) {
var classes = ['tab-class'];
if (active) {
classes.push('tab-active-class');
}
if (ellipsis) {
classes.push('van-ellipsis');
}
return classes.join(' ');
}
function tabStyle(
active,
ellipsis,
color,
type,
disabled,
activeColor,
inactiveColor,
swipeThreshold,
scrollable
) {
var styles = [];
var isCard = type === 'card';
// card theme color
if (color && isCard) {
styles.push('border-color:' + color);
if (!disabled) {
if (active) {
styles.push('background-color:' + color);
} else {
styles.push('color:' + color);
}
}
}
var titleColor = active ? activeColor : inactiveColor;
if (titleColor) {
styles.push('color:' + titleColor);
}
if (scrollable && ellipsis) {
styles.push('flex-basis:' + 88 / swipeThreshold + '%');
}
return styles.join(';');
}
module.exports.tabClass = tabClass;
module.exports.tabStyle = tabStyle;
@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
@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
......
......@@ -4,6 +4,7 @@ import { addUnit } from '../common/utils';
VantComponent({
props: {
disabled: Boolean,
multiple: Boolean,
uploadText: String,
previewSize: {
type: null,
......@@ -77,12 +78,8 @@ VantComponent({
wx.chooseImage({
count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,
sourceType: capture,
success: res => {
resolve(res);
},
fail: err => {
reject(err);
}
success: resolve,
fail: reject
});
});
}
......@@ -91,16 +88,12 @@ VantComponent({
wx.chooseMessageFile({
count: multiple ? newMaxCount : 1,
type: 'file',
success(res) {
resolve(res);
},
fail: err => {
reject(err);
}
success: resolve,
fail: reject
});
});
}
chooseFile.then(res => {
chooseFile.then((res) => {
const file = multiple ? res.tempFiles : res.tempFiles[0];
// 检查文件大小
if (file instanceof Array) {
......@@ -119,7 +112,7 @@ VantComponent({
this.$emit('before-read', {
file,
name,
callback: result => {
callback: (result) => {
if (result) {
// 开始上传
this.$emit('after-read', { file, name });
......