Skip to content

M
mayi-mp-shop
Commit a7afbd18 by 程默
Options

Merge branch 'nativehome_tst' of http://code.mayi888.com/chengmo/mayi-mp-shop into nativehome_tst

parents e677db30 b04dfd16
Showing with 1416 additions and 106 deletions
src/api/index.js
......@@ -24,6 +24,9 @@ console.log(process.env,'-----------------config------')
},
getLiveCon(data){
return requestPOST(`${process.env.OLSHOP_URL}/liveBroadcastInfo/getPageListByIds`, data);
},
queryBuyingShowList(data){
return requestPOST(`${process.env.OLSHOP_URL}/activityInfo/buyingShow/queryBuyingShowList`, data);
}
}
\ No newline at end of file
src/components/basicTool/transverse-label/index.vue 0 → 100644
<template>
<!-- 横向标签 -->
<div class="transverse-label" :class="['transverse-label' + componentIndex]"
:style="{
'--default-tab-text-size':defaultTabTextSize+'px',
'--default-tab-background-bolor':defaultTabBackgroundColor,
'--default-tab-underline-color':defaultTabUnderlineColor,
'--select-tab-text-color':selectTabTextColor,
'--select-tab-text-size':selectTabTextSize+'px',
'--select-tab-background-color':selectTabBackgroundColor,
'--select-tab-underline-color':selectTabUnderlineColor,
'--tab-background-color':tabBackgroundColor
}"
>
<!-- v-if="tabSlideArrow==1&&isScroll" -->
<div
ref="floatArrow"
class="floatArrow"
:class="[
'floatArrow' + componentIndex,
tabSlideArrow == 1 && tabList.length>5 ? '' : 'hideArrow',
]"
>
<div class="left" @click="moveTab(-1)">
<i class="ant-fanhui-line"></i>
</div>
<div class="right" @click="moveTab(1)">
<i class="ant-fanhui-line"></i>
</div>
</div>
<van-tabs
v-if="showVanTabs"
:tab-class="['vanTab','defaultFontSize',tabStyle==1?'defTabAfter':'defaultTabUnderlineAfter']"
:tab-active-class="['activeTab','selectFontSize',tabStyle==1?'selTabAfter':'selTabUnderLineAfter']"
:custom-class="['customClass',tabStyle==1?'selectTabBackgroundColor':'selectTabUnderlineColor',tabShadow == 1 && tabStyle == 1 ? 'tabShadow' : '']"
ref="vanTabs"
v-model="active"
@change="changeTab"
@getEleInfo="getEleInfo"
:animated="true"
:ellipsis="false"
:title-active-color="selectTabTextColor"
:title-inactive-color="defaultTabTextColor"
:line-position="tabLayout"
:line-length-type="tabStyle==2?tabUnderline:1"
:class="[
'defaultTabsStyle',
'defaultTabsStyle' + componentIndex,
tabStyle == 1 ? 'tabStyle1' : 'tabStyle2',
stickyTop ? 'stickyTop' : '',
'tabLayout' + tabLayout,
]"
>
<van-tab
ref="vanTab"
v-for="(item, index) in tabList"
:key="index"
:title="item.title"
>
<div
class="item"
:class="{ 'min-height': item.contentList.length == 0 }"
v-for="(item1, index1) in item.contentList"
:key="index1"
>
<div v-if="item1.componentCode=='banner' && item1.componentInfo.visible == 1">
<banner :datas="item1"></banner>
</div>
<div v-else-if="item1.componentCode=='goods-list' && item1.componentInfo.visible == 1" style="height:100%;">
<goods-list class="goodsListItem" :datas="item1"></goods-list>
</div>
<div v-else-if="item1.componentCode == 'area-navigation' && item1.componentInfo.visible == 1">
<area-navigation :datas="item1" :changeLocation="changeLocation"></area-navigation>
</div>
<div v-else-if="item1.componentCode == 'cube-nav' && item1.componentInfo.visible == 1">
<cube-nav :datas="item1"></cube-nav>
</div>
<div v-else-if="item1.componentCode == 'time-limited-discount' && item1.componentInfo.visible == 1">
<time-limited-discount :datas="item1"></time-limited-discount>
</div>
<div v-if="item1.componentCode == 'links' && item1.componentInfo.visible == 1">
<links :datas="item1"></links>
</div>
<div v-if="item1.componentCode == 'interval' && item1.componentInfo.visible == 1">
<interval :datas="item1"></interval>
</div>
<div v-if="item1.componentCode == 'partition' && item1.componentInfo.visible == 1">
<partition :datas="item1"></partition>
</div>
<div v-if="item1.componentCode == 'shop-popup' && item1.componentInfo.visible == 1">
<shop-popup :datas="item1"></shop-popup>
</div>
<div v-if="item1.componentCode == 'float-button' && item1.componentInfo.visible == 1">
<float-button :datas="item1"></float-button>
</div>
<div v-if="item1.componentCode == 'text-text' && item1.componentInfo.visible == 1">
<text-text :datas="item1"></text-text>
</div>
<div v-if="item1.componentCode == 'img-text' && item1.componentInfo.visible == 1">
<img-text :datas="item1"></img-text>
</div>
<div v-if="item1.componentCode == 'goods-search' && item1.componentInfo.visible == 1">
<goods-search :datas="item1"></goods-search>
</div>
<div v-if="item1.componentCode == 'notice' && item1.componentInfo.visible == 1">
<notice :datas="item1"></notice>
</div>
<div v-if="item1.componentCode == 'pop-up' && item1.componentInfo.visible == 1">
<pop-up :datas="item1"></pop-up>
</div>
<div v-if="item1.componentCode == 'coupon' && item1.componentInfo.visible == 1">
<coupon :datas="item1"></coupon>
</div>
<div v-if="item1.componentCode == 'integral-turntable' && item1.componentInfo.visible == 1">
<integralTurntable :datas="item1"></integralTurntable>
</div>
<div v-if="item1.componentCode == 'speedy-nav' && item1.componentInfo.visible == 1">
<speedy-nav :datas="item1"></speedy-nav>
</div>
<div v-if="item1.componentCode == 'video-player' && item1.componentInfo.visible == 1" >
<video-player :datas="item1" :indexs="index"></video-player>
</div>
<!-- <component
:is="item1.componentCode"
:datas="item1"
:render="$props.render"
class="component-el"
:ref="item1.componentCode + index1"
></component> -->
</div>
</van-tab>
</van-tabs>
</div>
</template>
<script type="text/ecmascript-6">
import links from "@/components/basicTool/link/index.vue";
import interval from "@/components/basicTool/interval/index.vue";
import partition from "@/components/basicTool/partition/index.vue";
import shopPopup from "@/components/basicTool/shop-popup/index.vue";
import text from "@/components/content/text";
import imgText from "@/components/content/imgText";
import coupon from "@/components/activity/coupon";
import integralTurntable from "@/components/activity/integralTurntable";
let rect='',vanTabsThis=[];
export default {
name: "transverse-label",
props: {
render: {
type: Boolean,
default: false,
},
datas: {
type: Object,
default: {},
},
componentIndex: {
type: Number,
default: 0,
},
},
data() {
return {
active: 0,
lineWidth: 0,
isScroll: false,
tabInfoList:[],
showVanTabs:true,
};
},
components: {
links,
interval,
partition,
shopPopup,
"text-text": text,
"img-text": imgText,
coupon,
integralTurntable,
},
computed: {
tabList: {
get() {
return this.datas.componentData.tabList.filter(
(item) => item.visible == undefined || item.visible == 1
);
},
set(newVal) {
this.datas.componentData.tabList = newVal;
},
},
tabStyle() {
return this.datas.componentData.tabStyle;
},
stickyTop() {
return this.datas.componentData.stickyTop;
},
tabBackgroundColor() {
return this.datas.componentData.tabBackgroundColor || "#fff";
},
tabLayout: {
get() {
return this.datas.componentData.tabLayout;
},
set(newVal) {
this.datas.componentData.tabLayout = newVal;
},
},
disabledCenter: {
get() {
return this.datas.componentData.disabledCenter;
},
set(newVal) {
this.datas.componentData.disabledCenter = newVal;
},
},
tabUnderline() {
return this.datas.componentData.tabUnderline;
},
tabShadow() {
return this.datas.componentData.tabShadow;
},
tabSlideArrow() {
return this.datas.componentData.tabSlideArrow;
},
defaultTabText() {
return this.datas.componentData.defaultTabText;
},
defaultTabTextColor() {
if(this.defaultTabText==1){
if(this.tabStyle==1){
return "var(--main-color)"
} else {
return "rgba(0,0,0,0.4)"
}
} else {
if(this.datas.componentData.defaultTabTextColor){
return this.datas.componentData.defaultTabTextColor;
}
}
},
defaultTabTextSize() {
if(this.defaultTabText==1){
return 14
}else {
return this.datas.componentData.defaultTabTextSize;
}
},
defaultTabBackground() {
return this.datas.componentData.defaultTabBackground;
},
defaultTabBackgroundColor() {
if(this.defaultTabBackground==2){
return this.datas.componentData.defaultTabBackgroundColor;
} else {
return "";
}
},
defaultTabUnderline() {
return this.datas.componentData.defaultTabUnderline;
},
defaultTabUnderlineColor() {
if(this.defaultTabUnderline==2){
return this.datas.componentData.defaultTabUnderlineColor;
} else {
return "";
}
},
selectTabText() {
return this.datas.componentData.selectTabText;
},
selectTabTextColor() {
if(this.selectTabText==1){
if(this.tabStyle==1){
return "#fff"
}else {
return "#333"
}
} else {
if(this.datas.componentData.selectTabTextColor){
return this.datas.componentData.selectTabTextColor;
}
}
},
selectTabTextSize() {
if(this.selectTabText==1){
return 14
} else {
return this.datas.componentData.selectTabTextSize;
}
},
selectTabBackground() {
return this.datas.componentData.selectTabBackground;
},
selectTabBackgroundColor() {
if(this.selectTabBackground ==2){
return this.datas.componentData.selectTabBackgroundColor;
} else {
return "var(--main-color)";
}
},
selectTabUnderline() {
return this.datas.componentData.selectTabUnderline;
},
selectTabUnderlineColor() {
if(this.selectTabUnderline==2){
return this.datas.componentData.selectTabUnderlineColor;
} else {
return "var(--main-color)";
}
},
},
watch: {
active() {
this.timeOutInitTabs();
},
tabList: {
handler() {
this.timeOutInitTabs();
},
deep: true,
},
tabStyle() {
this.timeOutInitTabs();
},
tabLayout() {
this.timeOutInitTabs(true);
},
tabUnderline() {
this.timeOutInitTabs();
},
tabSlideArrow() {
this.timeOutInitTabs();
},
defaultTabText() {
this.timeOutInitTabs();
},
defaultTabTextSize() {
this.timeOutInitTabs();
},
selectTabText() {
this.timeOutInitTabs();
},
selectTabTextSize() {
this.timeOutInitTabs();
},
},
created() {},
mounted() {
this.$nextTick(() => {
this.getAllTabWidth();
});
},
methods: {
//TODO 这个方法是在vant源码中触发，为解决外部无法获取vant组件中的dom元素信息
getEleInfo(res){
rect=res.mp.detail.rect;
vanTabsThis[this.componentIndex]=res.mp.detail.vanTabsThis;
console.log(vanTabsThis,'------------------vanTabsThis')
this.tabInfoList=rect[0]||[];
this.initTabs(0);
},
changeTab(res) {
this.active=res.target.index;
},
timeOutInitTabs(notGetAllTabWidth) {
setTimeout(() => {
if (!notGetAllTabWidth) {
this.getAllTabWidth();
}
}, 16.7);
},
initTabs(index=0) {
return;
// 如果为样式二且为长下划线或为样式一使用wid
let wid =this.tabInfoList[index].width;
console.log(wid,'---------------------wid')
this.lineWidth =
(this.tabUnderline == 1 && this.tabStyle == 2) || this.tabStyle == 1
? wid +12
: undefined;
},
getElementInfo(sel="",callback) {
let _query = wx.createSelectorQuery();
_query.select(sel).boundingClientRect();
_query.exec((res) => {
callback(res);
});
},
getAllTabWidth() {
// let bodyWidth = document.querySelector(
// `.transverse-label${this.componentIndex}`
// ).offsetWidth;
// let childTabWidth = 0;
// if (
// !document
// .querySelector(`.transverse-label${this.componentIndex}`)
// .querySelectorAll(".van-tab")
// ) {
// return;
// }
// document
// .querySelector(`.transverse-label${this.componentIndex}`)
// .querySelectorAll(".van-tab")
// .forEach((item) => {
// childTabWidth += item.clientWidth;
// });
// if (bodyWidth < childTabWidth) {
// // this.tabLayout = 1;
// this.disabledCenter = true;
// this.isScroll = true;
// } else {
// this.disabledCenter = false;
// this.isScroll = false;
// }
// setTimeout(() => {
// let floatArrow = document.querySelector(
// `.floatArrow${this.componentIndex}`
// );
// console.log(floatArrow, "---------------------------------240");
// document
// .querySelector(`.defaultTabsStyle${this.componentIndex}`)
// .querySelector(".van-tabs__wrap")
// .appendChild(floatArrow);
// }, 16.7);
},
getinitModelList(str) {
return !this.render ? this.$store.state.commonComponentModel[str] : {};
},
moveTab(num) {
console.log(num,'------------433')
console.log(vanTabsThis,'-----------------434')
if (num > 0) {
if (this.active == this.tabList.length) {
this.active == 0;
} else {
this.active++;
}
} else if (num < 0) {
if (this.active == 0) {
this.active = this.tabList.length - 1;
} else {
this.active--;
}
}
vanTabsThis[this.componentIndex].setCurrentIndex(this.active);
console.log(this.active,'---------------------447')
},
},
};
</script>
<style lang="scss" scoped>
.transverse-label {
position: relative;
.min-height {
height: 100px;
text-align: center;
line-height: 100px;
color: #999;
font-size: 14px;
}
}
</style>
<style lang="scss">
.transverse-label {
.van-tab {
// padding: 0;
z-index: 98;
}
.floatArrow {
position: absolute;
top: 0;
width: 100%;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: none;
z-index: 100;
& > div {
pointer-events: all;
width: 28px;
height: 100%;
background: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
i {
font-size: 50rpx;
color: #fff;
}
}
.right {
i {
transform: rotateZ(180deg);
}
}
}
.hideArrow {
opacity: 0;
z-index: -9999;
}
.van-tabs__wrap {
background: var(--tab-background-color)!important;
}
.van-tabs__scroll{
background: var(--tab-background-color)!important;
}
.tabStyle1 {
.van-tabs__line {
height: 30px;
bottom: 6px;
border-radius: 38px;
}
}
.tabShadow {
.van-tabs__line {
box-shadow: 0px 0px 4px 1px #c2c2c2;
}
}
.tabStyle2 {
.van-tabs__line {
bottom: 4px;
}
}
.stickyTop {
.van-tabs__wrap {
position: sticky;
top: 0;
z-index: 100;
}
}
.tabLayout1 {
.van-tab {
flex: none!important;
}
}
.tabLayout2 {
.van-tabs__nav {
justify-content: center;
}
.van-tab {
flex: none!important;
}
}
// 新版样式
.defTabAfter{
position: relative;
&::after{
content: "";
position:absolute;
bottom: 4px;
left: 0;
right: 0;
top: 4px;
border-radius: 34px;
background: var(--default-tab-background-bolor);
z-index: -1;
}
}
.selTabAfter{
&::after{
transition: background 0.1s;
background: transparent;
}
}
.defaultTabUnderlineAfter{
position: relative;
&::after{
content: "";
position:absolute;
bottom: 4px;
left: 0;
right: 0;
height: 4px;
background: var(--default-tab-underline-color);
z-index: -1;
}
}
.selTabUnderLineAfter{
&::after{
transition: background 0.15s;
background: transparent;
}
}
.defaultFontSize{
font-size: var(--default-tab-text-size);
}
.selectFontSize{
font-size: var(--select-tab-text-size);
}
.selectTabBackgroundColor {
.van-tabs__line {
background: var(--select-tab-background-color) !important;
}
}
.selectTabUnderlineColor {
.van-tabs__line {
background: var(--select-tab-underline-color) !important;
}
}
}
</style>
src/components/basicTool/transverse-label/main.json 0 → 100644
{
"usingComponents": {
"van-tabs": "/static/vant/tabs/index",
"van-tab": "/static/vant/tab/index",
"banner": "/static/nativeComponents/Banner/index",
"goods-list": "/static/nativeComponents/GoodsList/index",
"time-limited-discount": "/static/nativeComponents/TimeLimitedDiscount/index",
"waterfall-flow": "/static/nativeComponents/module/WaterfallFlow/index",
"van-button": "/static/vant/button/index",
"area-navigation":"/static/nativeComponents/AreaNavigation/index",
"cube-nav":"/static/nativeComponents/CubeNav/index",
"float-button":"/static/nativeComponents/FloatButton/index",
"goods-search":"/static/nativeComponents/GoodsSearch/index",
"notice":"/static/nativeComponents/Notice/index",
"pop-up":"/static/nativeComponents/PopUp/index",
"share-popup":"/static/nativeComponents/SharePopup/index",
"speedy-nav":"/static/nativeComponents/SpeedyNav/index",
"video-player":"/static/nativeComponents/VideoPlayer/index"
},
"enablePullDownRefresh":true,
"styleIsolation": "apply-shared"
}
\ No newline at end of file
src/pages/home/index.vue
......@@ -66,28 +66,20 @@
<div v-if="item.componentCode == 'official-account' && item.componentInfo.visible == 1">
<official-account></official-account>
</div>
<div v-if="item.componentCode == 'transverse-label' && item.componentInfo.visible == 1">
<transverse-label :datas="item" :componentIndex="index"></transverse-label>
</div>
<div v-if="item.componentCode == 'photo-gallery' && item.componentInfo.visible == 1">
<photo-gallery :datas="item"></photo-gallery>
</div>
<div v-if="item.componentCode == 'live-broadcast' && item.componentInfo.visible == 1">
<live-broadcast :datas="item"></live-broadcast>
</div>
<div v-if="item.componentCode == 'share-picture' && item.componentInfo.visible == 1">
<share-picture :datas="item"></share-picture>
</div>
</div>
<bottomCont></bottomCont>
<!-- </scroll-view> -->
<!-- <image
src="http://cdn.mayi888.com/public/jpg/33ff0efc-96b5-4044-a65a-07799dfe98e1.jpg?x-oss-process=image/resize,limit_1,w_750"
></image>
<van-button type="primary">按钮</van-button>
-->
<!-- ----瀑布流开始---- -->
<!-- <waterfall-flow id="waterfallFlow"></waterfall-flow> -->
<!-- ----瀑布流结束---- -->
<!-- <banner id="banner" :datas="componentsList[0]"></banner>
<div class="domain">abc
<van-button type="primary">按钮</van-button> -->
<bottomCont></bottomCont>
</div>
<share-popup></share-popup>
</div>
......@@ -101,6 +93,7 @@ import links from '@/components/basicTool/link/index.vue'
import interval from '@/components/basicTool/interval/index.vue'
import partition from '@/components/basicTool/partition/index.vue'
import shopPopup from '@/components/basicTool/shop-popup/index.vue'
import transverseLabel from '@/components/basicTool/transverse-label/index.vue'
import text from '@/components/content/text'
import imgText from '@/components/content/imgText'
import coupon from '@/components/activity/coupon'
......@@ -131,7 +124,8 @@ export default {
'text-text':text,
'img-text':imgText,
coupon,
integralTurntable
integralTurntable,
transverseLabel
},
onShareAppMessage(res) {
let shareVal={};
......
src/pages/home/main.json
{
"usingComponents": {
"van-tabs": "/static/vant/tabs/index",
"van-tab": "/static/vant/tab/index",
"banner": "/static/nativeComponents/Banner/index",
"goods-list": "/static/nativeComponents/GoodsList/index",
"time-limited-discount": "/static/nativeComponents/TimeLimitedDiscount/index",
......@@ -15,7 +17,8 @@
"speedy-nav":"/static/nativeComponents/SpeedyNav/index",
"video-player":"/static/nativeComponents/VideoPlayer/index",
"photo-gallery":"/static/nativeComponents/PhotoGallery/index",
"live-broadcast":"/static/nativeComponents/LiveBroadcast/index"
"live-broadcast":"/static/nativeComponents/LiveBroadcast/index",
"share-picture":"/static/nativeComponents/SharePicture/index"
},
"enablePullDownRefresh":true,
"backgroundColor":"#f5f5f5"
......
static/nativeComponents/GoodsList/index.js
......@@ -19,7 +19,8 @@ const componentOptions = {
classificationLoadNum: 10,
queryProductInfoLoading: false,
loading: false,
finished: false
finished: false,
goodsList:[],
},
// 数据监听器
observers: {},
......@@ -32,9 +33,7 @@ const componentOptions = {
moved() {},
detached() {}
},
attached() {
},
attached() {},
definitionFilter() {},
// 页面生命周期
pageLifetimes: {
......@@ -226,7 +225,7 @@ const componentOptions = {
item.productImgUrl = DFSImg(item.productImgUrl, 400, 400, 1);
item.minPrice = Number(item.minPrice).toFixed(2);
item.qty = Number(item.qty);
item.saleQty = item.saleQty?Number(item.saleQty):1;
item.saleQty = item.saleQty ? Number(item.saleQty) : 1;
item.totalCollectionCount = Number(item.totalCollectionCount) || 0;
item.minPriceAfterRecommendedCardPriceTable = item.minPriceAfterRecommendedCardPriceTable
? Number(item.minPriceAfterRecommendedCardPriceTable)
......@@ -245,7 +244,8 @@ const componentOptions = {
}
});
this.setData({
"datas.componentData.goodsList": goodsList
"datas.componentData.goodsList": goodsList,
goodsList
});
if (type == 1) {
// 初始化
......@@ -342,7 +342,12 @@ const componentOptions = {
this.getProductList(1, 2);
},
viewMore() {
let { goodsType,style, categoryName, categoryId } = this.data.datas.componentData;
let {
goodsType,
style,
categoryName,
categoryId
} = this.data.datas.componentData;
let linkVal = "";
if (goodsType != 1) {
if (style == "list") {
......@@ -355,7 +360,7 @@ const componentOptions = {
}
$themeToLink({
type: 1,
link:linkVal,
link: linkVal
});
}
}
......
static/nativeComponents/GoodsList/index.wxml
......@@ -25,14 +25,14 @@
style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
>
<view
wx:for="{{datas.componentData.goodsList}}"
wx:for="{{goodsList}}"
wx:key="index"
class="goods-item"
style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
>
<goods-item
datas="{{datas}}"
items="{{datas.componentData.goodsList[index]}}"
items="{{goodsList[index]}}"
indexs="{{index}}"
></goods-item>
</view>
......
static/nativeComponents/SharePicture/index.js 0 → 100644
// static/nativeComponents/SharePicture/index.js
const app = getApp()
const { indexApi } = app;
Component({
/**
* 组件的属性列表
*/
properties: {
datas: {
type: Object
}
},
/**
* 组件的初始数据
*/
data: {
tabIndex : 0,
waterfallLeftList:[],
waterfallRightList:[],
loaded : true,
pageNum : 1,
tabId : 1,
},
ready(){
this.queryBuyingShowList(0);
},
/**
* 组件的方法列表
*/
methods: {
tabHandle(e){
let index = e.currentTarget.dataset.index
let item = e.currentTarget.dataset.item
console.log(index, item, this.data.tabIndex)
if(this.data.tabIndex != index){
this.setData({
tabIndex: index,
tabId: item.id
})
this.queryBuyingShowList(0)
}
},
queryBuyingShowList(type){
if (this.data.datas.componentData["activityFlag"][0]["id"] == "" || !this.data.loaded){
return;
}
this.setData({
loaded : false
})
if(type == 0){
this.setData({
pageNum : 1
})
}else{
this.setData({
pageNum : this.data.pageNum + 1
})
}
let query = {
activityId: this.data.datas.componentData.activityFlag[0].id || 4,
sortType: this.data.tabId,
pageNum: this.data.pageNum,
startTime: Array.isArray(this.data.datas.componentData.publishTime)
? this.data.datas.componentData.publishTime[0]
: "",
endTime: Array.isArray(this.data.datas.componentData.publishTime)
? this.data.datas.componentData.publishTime[1]
: "",
pageSize: +this.data.datas.componentData["quantity"]
}
indexApi.queryBuyingShowList(query).then(res => {
this.setData({
loaded :true
})
if(res.data.code == '200'){
let data = res.data.data
let { waterfallLeftList, waterfallRightList} = this.data
if(type == 0){
data.forEach((item,index) => {
item.customerHandImage = app.DFSImg(item.customerHandImage)
item.checkMP4Status = this.checkMP4(item.urls)
if (this.getFileType(item.urls[0]) == 'video'){
item.coverImg = app.DFSImg(`${item.urls[0]}?x-oss-process=video/snapshot,t_1,m_fast`)
}else{
item.coverImg = app.DFSImg(item.urls[0], 400, null, 1)
}
if(index % 2 == 0){
waterfallLeftList.push(item)
}else{
waterfallRightList.push(item)
}
})
this.setData({
waterfallLeftList,
waterfallRightList
})
console.log(this.data.waterfallLeftList, this.data.waterfallRightList,' this.data.waterfallRightList')
}else{
}
}
})
.catch(err => {
this.setData({
loaded: true
})
})
},
getFileType(name) {
if (!name) return false;
var imgType = ["gif", "jpeg", "jpg", "bmp", "png"];
var videoType = [
"avi",
"wmv",
"mkv",
"mp4",
"mov",
"rm",
"3gp",
"flv",
"mpg",
"rmvb"
];
if (
RegExp(".(" + imgType.join("|") + ")$", "i").test(name.toLowerCase())
) {
return "image";
} else if (
RegExp(".(" + videoType.join("|") + ")$", "i").test(name.toLowerCase())
) {
return "video";
} else {
return false;
}
},
checkMP4(data) {
for (let index = 0; index < data.length; index++) {
if (this.getFileType(data[index]) == "video") {
return true;
} else {
return false;
}
}
},
}
})
static/nativeComponents/SharePicture/index.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
static/nativeComponents/SharePicture/index.wxml 0 → 100644
<!--static/nativeComponents/SharePicture/index.wxml-->
<view class="waterfall-content" style="background-color:{{datas.componentData['backgroundColor']}};padding-top:{{datas.componentData.paddingList[0]['value'] * 2}}rpx;padding-bottom:{{datas.componentData.paddingList[1]['value'] * 2}}rpx;padding-left:{{datas.componentData.paddingList[2]['value'] * 2}}rpx;padding-right:{{datas.componentData.paddingList[3]['value'] * 2}}rpx">
<view class="tab-wrap">
<view class="tab-item {{tabIndex == index && 'checked'}}" wx:for="{{datas.componentData['list']}}" :key="index" wx:if="{{item.show}}" bindtap="tabHandle" data-index="{{index}}" data-item="{{item}}" z>
<text>{{item.name}}</text>
</view>
</view>
<view class="waterfall-wrap">
<view class="waterfall-l" style="padding-right:{{datas.componentData.proGap}}rpx">
<view class="item" wx:for="{{waterfallLeftList}}" wx:key="index" style="border-width:{{datas.componentData['borderColorShow'] ? '1px' : ''}};border-style:{{datas.componentData['borderColorShow'] ? 'solid' : ''}};border-color:{{datas.componentData['borderColorShow'] ? datas.componentData['borderColor'] : ''}}">
<view class="img-wrap">
<image src="{{item.coverImg}}" mode="widthFix"></image>
<i class="iconfont-common common-iconbofang2 icon{{datas.componentData['playBtnPosition']}}" wx:if="{{item.checkMP4Status}}"></i>
</view>
<view class="content">
<view class="title" wx:if="{{datas.componentData['textContentShow']}}" style="color:{{datas.componentData['textContentColor']}};font-weight:{{datas.componentData['textContentFontWeight']}};font-size:{{datas.componentData['textContentFontSize'] * 20}}rpx">
{{item.commentContent}}
</view>
</view>
</view>
</view>
<view class="waterfall-r" style="padding-left:{{datas.componentData.proGap}}rpx">
<view class="item" wx:for="{{waterfallRightList}}" wx:key="index" style="border-width:{{datas.componentData['borderColorShow'] ? '1px' : ''}};border-style:{{datas.componentData['borderColorShow'] ? 'solid' : ''}};border-color:{{datas.componentData['borderColorShow'] ? datas.componentData['borderColor'] : ''}}">
<view class="img-wrap">
<image src="{{item.coverImg}}" mode="widthFix"></image>
<i class="iconfont-common common-iconbofang2 icon{{datas.componentData['playBtnPosition']}}" wx:if="{{item.checkMP4Status}}"></i>
</view>
<view class="content">
<view class="title" wx:if="{{datas.componentData['textContentShow']}}" style="color:{{datas.componentData['textContentColor']}};font-weight:{{datas.componentData['textContentFontWeight']}};font-size:{{datas.componentData['textContentFontSize'] * 20}}rpx">
{{item.commentContent}}
</view>
</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
static/nativeComponents/SharePicture/index.wxss 0 → 100644
/* static/nativeComponents/SharePicture/index.wxss */
@import "/static/font/common_icon.wxss";
.waterfall-content {
font-size: 20rpx;
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
}
.waterfall-content .tab-wrap{
display: flex;
justify-content: space-around;
padding: 32rpx 0;
box-sizing: border-box
}
.waterfall-content .tab-wrap .tab-item{
transition: all 0.2s;
border-radius: 40rpx;
width: 96rpx;
height: 44rpx;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.waterfall-content .tab-wrap .tab-item text{
font-size: 26rpx;
}
.checked {
background-color: var(--main-color);
color: #ffffff;
}
.waterfall-wrap{
position: relative;
box-sizing: border-box;
overflow: hidden;
}
.waterfall-l,.waterfall-r{
width: 50%;
box-sizing: border-box;
float: left;
}
.waterfall-l .item, .waterfall-r .item{
border-radius: 12rpx;
margin-top: 20rpx;
overflow: hidden;
background-color: white;
}
.waterfall-l .item:first-child, .waterfall-r .item:first-child{
margin-top: 0
}
.waterfall-wrap .img-wrap{
position: relative;
}
.waterfall-wrap .img-wrap image{
display: block;
}
.waterfall-wrap .img-wrap .iconfont-common {
color: #fff;
position: absolute;
font-size: 60rpx;
}
.icon0 {
left: 4rpx;
bottom: 4rpx;
}
.icon1 {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.icon2 {
right: 4rpx;
top: 4rpx;
}
.content{
padding : 19rpx 17rpx 20rpx 17rpx;
}
.content .title{
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
\ No newline at end of file
static/nativeComponents/TimeLimitedDiscount/index.js
......@@ -123,15 +123,22 @@ const componentOptions = {
days: 0,
hours: 0,
minute: 0,
second: 0
second: 0,
goodsList:[],
},
// 数据监听器
observers: {},
// 组件方法
methods: {
init() {
let { goodsList, activityCode, selectActivityValue, dimension } = this.data.datas.componentData;
let {
goodsList,
activityCode,
selectActivityValue,
dimension
} = this.data.datas.componentData;
let { deleteFlag, endTimeData } = this.data;
let _this = this;
if (activityCode == "") {
return;
}
......@@ -146,13 +153,14 @@ const componentOptions = {
if (dimension == 0 && copyData.goodsItems.length == 0) {
deleteFlag = true;
}
endTimeData = new Date(copyData.endTime.replace(/-/g, "/")).getTime() - new Date().getTime();
endTimeData =
new Date(copyData.endTime.replace(/-/g, "/")).getTime() -
new Date().getTime();
console.log(endTimeData, "----------------------150");
this.setData({ endTime: endTimeData });
let _this = this;
this.setData({ deleteFlag });
console.log("------------155")
console.log("------------155");
// setTimeout(() => {
// xcsoft.countdown(_this.data.datas.componentData.endTime, function (time) {
// console.log("--------------157")
......@@ -171,10 +179,11 @@ const componentOptions = {
// }, 100);
copyData.goodsItems.forEach((item, index) => {
item.productImgUrl = DFSImg(item.imgUrl);
item.productImgUrl1 = DFSImg(item.imgUrl);
item.minPrice = parseFloat(item.discountPrice);
item.maxPrice = parseFloat(item.salePrice);
});
this.setData({
_this.setData({
goodsList: copyData.goodsItems,
selectActivityValue: copyData.singleItemActivityName
});
......@@ -191,30 +200,44 @@ const componentOptions = {
});
}
if (ids.length == 0) {
this.setData({ isLoading:false });
this.setData({ isLoading: false });
return;
}
promoteApi.query_single_item_activity_list_by_ids(ids).then(res => {
if (res.data.code == 200) {
let list = res.data.data ||[];
let list = res.data.data || [];
if (list.length > 0) {
let hideNum = 0;
list.forEach((item, index) => {
if (new Date(item.endTime.replace(/-/g, "/")).getTime() - new Date().getTime() <= 0) {
if (
new Date(item.endTime.replace(/-/g, "/")).getTime() -
new Date().getTime() <=
0
) {
item.isEnd = true;
hideNum += 1;
} else {
item.isEnd = false;
}
item.startTimeTimeStamp = new Date(item.startTime.replace(/-/g, "/")).getTime() - new Date().getTime();
item.endTimeTimeStamp = new Date(item.endTime.replace(/-/g, "/")).getTime() - new Date().getTime();
item.singleItemActivityCoverImage = DFSImg(item.singleItemActivityCoverImage);
item.isStart = new Date(item.startTime.replace(/-/g, "/")).getTime() > new Date().getTime() ? true : false;
console.log(item.isEnd,'-----------------------213');
})
item.startTimeTimeStamp =
new Date(item.startTime.replace(/-/g, "/")).getTime() -
new Date().getTime();
item.endTimeTimeStamp =
new Date(item.endTime.replace(/-/g, "/")).getTime() -
new Date().getTime();
item.singleItemActivityCoverImage = DFSImg(
item.singleItemActivityCoverImage
);
item.isStart =
new Date(item.startTime.replace(/-/g, "/")).getTime() >
new Date().getTime()
? true
: false;
console.log(item.isEnd, "-----------------------213");
});
this.setData({ "datas.componentData.actList": list });
if (hideNum == actList.length) {
this.setData({ hideAll:true });
this.setData({ hideAll: true });
}
}
}
......@@ -224,12 +247,28 @@ const componentOptions = {
this.setData({ timeData: e.detail });
},
onclickProduct(e) {
console.log(e.currentTarget.dataset.items,'-------------------------226');
let { terminalProductId, terminalGoodsMixId, productId } = e.currentTarget.dataset.items;
$themeToLink({ type: 1, link: `/goods/${productId}?limitedLime=true&endTime=${this.data.datas.componentData.endTime}&terminalProductId="${terminalProductId}&terminalGoodsMixId=${terminalGoodsMixId}` });
console.log(
e.currentTarget.dataset.items,
"-------------------------226"
);
let {
terminalProductId,
terminalGoodsMixId,
productId
} = e.currentTarget.dataset.items;
$themeToLink({
type: 1,
link: `/goods/${productId}?limitedLime=true&endTime=${
this.data.datas.componentData.endTime
}&terminalProductId="${terminalProductId}&terminalGoodsMixId=${terminalGoodsMixId}`
});
},
onclickOrder(e) {
let { terminalGoodsMixId, terminalGoodsId, goodsId } = e.currentTarget.dataset.items;
let {
terminalGoodsMixId,
terminalGoodsId,
goodsId
} = e.currentTarget.dataset.items;
$themeToLink({
type: 1,
link: `/order/orderConfirm?productGoodsMixId=${terminalGoodsMixId}&productGoodsId=${terminalGoodsId}&goodsId=${goodsId}&qty=1&goodsString=null`
......
static/nativeComponents/TimeLimitedDiscount/index.wxml
......@@ -44,11 +44,11 @@
<view
class="goodsPicture"
bindtap="onclickProduct"
data-items="{{datas.componentData.goodsList[index]}}"
data-items="{{goodsList[index]}}"
style="padding:{{datas.componentData.imgSize}}"
>
<image mode="widthFix" src="{{datas.componentData.goodsList[index]['productImgUrl']}}"></image>
<view class="whiteBg" wx:if="{{datas.componentData.goodsList[index].oversoldFlag==0&&datas.componentData.goodsList[index].saleQty-0<=0}}">
<image mode="widthFix" src="{{goodsList[index]['productImgUrl1']}}"></image>
<view class="whiteBg" wx:if="{{goodsList[index].oversoldFlag==0&&datas.componentData.goodsList[index].saleQty-0<=0}}">
<view class="cover">
<text>商品</text>
<text>售罄</text>
......@@ -58,20 +58,20 @@
</view>
<view class="info">
<view class="name">
{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['productName']:'名称'}}
{{goodsList[index]!=null?goodsList[index]['productName']:'名称'}}
</view>
<view class="allPrice">
<view>
<!-- <text class="price" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text>
<text class="price" wx:else>￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text>
<text class="delPrice" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</text> -->
<view class="price">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</view>
<view class="delPrice">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</view>
<view class="price">￥{{goodsList[index]!=null?goodsList[index]['minPrice']:0}}</view>
<view class="delPrice">￥{{goodsList[index]!=null?goodsList[index]['maxPrice']:0}}</view>
</view>
<view
class="btn"
style="background:#333;"
data-items="{{datas.componentData.goodsList[index]}}"
data-items="{{goodsList[index]}}"
catchtap="onclickOrder"
>
立即抢购
......@@ -86,20 +86,20 @@
<view class="goods1" wx:elif="{{datas.componentData.style==='across'}}">
<view
class="goods-item"
wx:for="{{datas.componentData.goodsList}}"
wx:for="{{goodsList}}"
wx:key="index"
>
<view class="items">
<view class="imgBox slidebox2">
<view
class="goodsPicture"
wx:if="{{datas.componentData.goodsList[index]!=null}}"
wx:if="{{goodsList[index]!=null}}"
style="padding:{{datas.componentData.imgSize}}"
data-items="{{datas.componentData.goodsList[index]}}"
data-items="{{goodsList[index]}}"
bindtap="onclickProduct"
>
<image mode="widthFix" src="{{datas.componentData.goodsList[index]['productImgUrl']}}"></image>
<view class="whiteBg" wx:if="{{datas.componentData.goodsList[index].oversoldFlag==0&&datas.componentData.goodsList[index].saleQty-0<=0}}">
<image mode="widthFix" src="{{goodsList[index]['productImgUrl']}}"></image>
<view class="whiteBg" wx:if="{{goodsList[index].oversoldFlag==0&&goodsList[index].saleQty-0<=0}}">
<view class="cover">
<text>商品</text>
<text>售罄</text>
......@@ -111,8 +111,8 @@
<!-- <text class="price" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text>
<text class="price" wx:else>￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text>
<text class="delPrice" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</text> -->
<view class="price">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</view>
<view class="delPrice">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</view>
<view class="price">￥{{goodsList[index]!=null?goodsList[index]['minPrice']:0}}</view>
<view class="delPrice">￥{{goodsList[index]!=null?goodsList[index]['maxPrice']:0}}</view>
</view>
</view>
</view>
......
static/nativeComponents/TransverseLabel/ComponentsList/index.js 0 → 100644
const componentOptions = {
// 组件选项
options: {
multipleSlots: true
},
behaviors: [],
properties: {
datas: {
type: Object
}
},
// 组件数据
data: {
isPageHidden: false // 页面是否处于隐藏状态
},
// 数据监听器
observers: {},
// 组件方法
methods: {
init() {}
},
// 组件生命周期
lifetimes: {
created() {},
attached() {
this.init();
},
ready() {},
moved() {},
detached() {}
},
definitionFilter() {},
// 页面生命周期
pageLifetimes: {
// 页面被展示
show() {
const { isPageHidden } = this.data;
// show事件发生前，页面不是处于隐藏状态时
if (!isPageHidden) {
return;
}
// 重新执行定时器等操作
},
// 页面被隐藏
hide() {
this.setData({
isPageHidden: true
});
// 清除定时器等操作
},
// 页面尺寸变化时
resize() {}
}
};
Component(componentOptions)
static/nativeComponents/TransverseLabel/ComponentsList/index.json 0 → 100644
{
"component": true,
"usingComponents": {
"banner": "/static/nativeComponents/Banner/index",
"goods-list": "/static/nativeComponents/GoodsList/index",
"time-limited-discount": "/static/nativeComponents/TimeLimitedDiscount/index",
"waterfall-flow": "/static/nativeComponents/module/WaterfallFlow/index",
"van-button": "/static/vant/button/index",
"area-navigation": "/static/nativeComponents/AreaNavigation/index",
"cube-nav": "/static/nativeComponents/CubeNav/index",
"float-button": "/static/nativeComponents/FloatButton/index",
"goods-search": "/static/nativeComponents/GoodsSearch/index",
"notice": "/static/nativeComponents/Notice/index",
"pop-up": "/static/nativeComponents/PopUp/index",
"share-popup": "/static/nativeComponents/SharePopup/index",
"speedy-nav": "/static/nativeComponents/SpeedyNav/index",
"video-player": "/static/nativeComponents/VideoPlayer/index",
"transverse-label": "/static/nativeComponents/TransverseLabel/index"
}
}
\ No newline at end of file
static/nativeComponents/TransverseLabel/ComponentsList/index.wxml 0 → 100644
<!-- 组件集合 -->
<view class="ComponentsList">
<block wx:for="{{datas}}">
<block wx:if="{{item.componentCode=='banner' && item.componentInfo.visible == 1}}">
<banner datas="{{item}}"></banner>
</block>
<block wx:elif="{{item.componentCode=='goods-list' && item.componentInfo.visible == 1}}">
<goods-list class="goodsListItem" datas="{{item}}"></goods-list>
</block>
<block wx:elif="{{item.componentCode=='area-navigation' && item.componentInfo.visible == 1}}">
<area-navigation datas="{{item}}" :changeLocation="changeLocation"></area-navigation>
</block>
<block wx:elif="{{item.componentCode=='cube-nav' && item.componentInfo.visible == 1}}">
<cube-nav datas="{{item}}"></cube-nav>
</block>
<block wx:elif="{{item.componentCode=='time-limited-discount' && item.componentInfo.visible == 1}}">
<time-limited-discount datas="{{item}}"></time-limited-discount>
</block>
<block wx:elif="{{item.componentCode=='links' && item.componentInfo.visible == 1}}">
<links datas="{{item}}"></links>
</block>
<block wx:elif="{{item.componentCode=='interval' && item.componentInfo.visible == 1}}">
<interval datas="{{item}}"></interval>
</block>
<block wx:elif="{{item.componentCode=='partition' && item.componentInfo.visible == 1}}">
<partition datas="{{item}}"></partition>
</block>
<block wx:elif="{{item.componentCode=='shop-popup' && item.componentInfo.visible == 1}}">
<shop-popup datas="{{item}}"></shop-popup>
</block>
<block wx:elif="{{item.componentCode=='float-button' && item.componentInfo.visible == 1}}">
<float-button datas="{{item}}"></float-button>
</block>
<block wx:elif="{{item.componentCode=='text-text' && item.componentInfo.visible == 1}}">
<text-text datas="{{item}}"></text-text>
</block>
<block wx:elif="{{item.componentCode=='img-text' && item.componentInfo.visible == 1}}">
<img-text datas="{{item}}"></img-text>
</block>
<block wx:elif="{{item.componentCode=='goods-search' && item.componentInfo.visible == 1}}">
<goods-search datas="{{item}}"></goods-search>
</block>
<block wx:elif="{{item.componentCode=='notice' && item.componentInfo.visible == 1}}">
<notice datas="{{item}}"></notice>
</block>
<block wx:elif="{{item.componentCode=='pop-up' && item.componentInfo.visible == 1}}">
<pop-up datas="{{item}}"></pop-up>
</block>
<block wx:elif="{{item.componentCode=='coupon' && item.componentInfo.visible == 1}}">
<coupon datas="{{item}}"></coupon>
</block>
<block wx:elif="{{item.componentCode=='integral-turntable' && item.componentInfo.visible == 1}}">
<integralTurntable datas="{{item}}"></integralTurntable>
</block>
<block wx:elif="{{item.componentCode=='speedy-nav' && item.componentInfo.visible == 1}}">
<speedy-nav datas="{{item}}"></speedy-nav>
</block>
<block wx:elif="{{item.componentCode=='video-player' && item.componentInfo.visible == 1}}">
<video-player datas="{{item}}" :indexs="index"></video-player>
</block>
<block wx:elif="{{item.componentCode=='official-account' && item.componentInfo.visible == 1}}">
<official-account></official-account>
</block>
</block>
</view>
static/nativeComponents/TransverseLabel/index.js 0 → 100644
const componentOptions = {
// 组件选项
options: {
multipleSlots: true,
styleIsolation: "shared"
},
behaviors: [],
properties: {
datas: {
type: Object
}
},
// 组件数据
data: {
isPageHidden: false, // 页面是否处于隐藏状态
active: 0
},
// 数据监听器
observers: {},
// 组件方法
methods: {
init() {},
onChange(event) {}
},
// 组件生命周期
lifetimes: {
created() {},
attached() {
this.init();
},
ready() {},
moved() {},
detached() {}
},
definitionFilter() {},
// 页面生命周期
pageLifetimes: {
// 页面被展示
show() {
const { isPageHidden } = this.data;
// show事件发生前，页面不是处于隐藏状态时
if (!isPageHidden) {
return;
}
// 重新执行定时器等操作
},
// 页面被隐藏
hide() {
this.setData({
isPageHidden: true
});
// 清除定时器等操作
},
// 页面尺寸变化时
resize() {}
}
};
Component(componentOptions)
static/nativeComponents/TransverseLabel/index.json 0 → 100644
{
"component": true,
"usingComponents": {
"van-tabs":"/static/vant/tabs/index",
"van-tab":"/static/vant/tab/index",
"components-list":"./ComponentsList/index"
}
}
static/nativeComponents/TransverseLabel/index.wxml 0 → 100644
<view class="TransverseLabel" style="--defaultTabTextColor:{{datas.componentData.defaultTabTextColor}};--defaultTabTextSize:{{datas.componentData.defaultTabTextSize*2}}rpx;--defaultTabBackgroundColor:{{datas.componentData.defaultTabBackgroundColor}};--defaultTabUnderlineColor:{{datas.componentData.defaultTabUnderlineColor}};--selectTabTextColor:{{datas.componentData.selectTabTextColor}};--selectTabTextSize:{{datas.componentData.selectTabTextSize*2}}rpx;--selectTabBackgroundColor:{{datas.componentData.selectTabBackgroundColor}};--selectTabUnderlineColor:{{datas.componentData.selectTabUnderlineColor}};--tabBackgroundColor:{{datas.componentData.tabBackgroundColor}};">
<van-tabs
custom-class="vanTabs {{datas.componentData.tabStyle==1?'tabStyle1':'tabStyle2'}}"
nav-class="tabNav tabLayout{{datas.componentData.tabLayout}}"
tab-class="vanTab"
tab-active-class="vanActiveTab"
active="{{ active }}"
animated="{{true}}"
sticky="{{datas.componentData.stickyTop}}"
swipeable="{{true}}"
bind:change="onChange"
line-width="{{50}}"
color="{{'#333'}}"
>
<van-tab
title="{{item.title}}"
wx:for="{{datas.componentData.tabList}}"
wx:if="{{item.visible==undefined||item.visible==1}}"
>
<components-list datas="{{item.contentList}}"></components-list>
</van-tab>
</van-tabs>
</view>
static/nativeComponents/TransverseLabel/index.wxss 0 → 100644
.vanTabs{
position: relative;
}
.vanTab .van-ellipsis{
padding: 0 20rpx;
margin: 0 12rpx;
}
.van-tab {
position: relative;
z-index: 98;
}
/* 样式1 */
.tabStyle1 .van-tabs__line {
width: 100%;
height: 30px;
bottom: 7px;
border-radius: 38px;
}
.tabStyle1 .tabTitle {
color: var(--main-color);
}
.tabStyle1 .selectTitle {
color: #fff;
}
.tabStyle1 .defaultTabTextSize {
font-size: var(--defaultTabTextSize);
}
.tabStyle1 .defaultTabTextColor {
color: var(--defaultTabTextColor);
}
.tabStyle1 .selectTabTextSize {
font-size: var(--selectTabTextSize);
}
.tabStyle1 .selectTabTextColor {
color: var(--selectTabTextColor);
}
/* 样式2 */
.tabStyle2 .van-tabs__line{
}
/* 标签背景色 */
.tabNav {
background: var(--tabBackgroundColor);
}
/* 布局 */
.tabLayout1 .van-tab{
flex: none;
}
.tabLayout2{
justify-content: center;
}
.tabLayout2 .van-tab{
flex: none;
}
\ No newline at end of file
static/vant/tabs/index.js
......@@ -10,11 +10,11 @@ import {
import { isDef } from '../common/validator';
VantComponent({
mixins: [touch],
classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'],
classes: ["nav-class", "tab-class", "tab-active-class", "line-class"],
relation: {
name: 'tab',
type: 'descendant',
current: 'tabs',
name: "tab",
type: "descendant",
current: "tabs",
linked(target) {
target.index = this.children.length - 1;
this.updateTabs();
......@@ -25,7 +25,7 @@ VantComponent({
return child;
});
this.updateTabs();
},
}
},
props: {
sticky: Boolean,
......@@ -40,16 +40,24 @@ VantComponent({
this.children.forEach((child, index) =>
child.updateRender(index === this.data.currentIndex, this)
);
},
}
},
lineWidth: {
type: [String, Number],
value: 40,
observer: 'resize',
// observer: "resize"
},
lineLengthType: {
type: [String, Number],
value: 1 // 1默认自适应 2短自适应 3 固定宽度取值lineWidth
},
linePosition: {
type: [String, Number],
value: 1 // 1默认右对齐 2居中 3铺满
},
lineHeight: {
type: [String, Number],
value: -1,
value: -1
},
active: {
type: [String, Number],
......@@ -58,41 +66,41 @@ VantComponent({
if (name !== this.getCurrentName()) {
this.setCurrentIndexByName(name);
}
},
}
},
type: {
type: String,
value: 'line',
value: "line"
},
ellipsis: {
type: Boolean,
value: true,
value: true
},
duration: {
type: Number,
value: 0.3,
value: 0.3
},
zIndex: {
type: Number,
value: 1,
value: 1
},
swipeThreshold: {
type: Number,
value: 5,
observer(value) {
this.setData({
scrollable: this.children.length > value || !this.data.ellipsis,
scrollable: this.children.length > value || !this.data.ellipsis
});
},
}
},
offsetTop: {
type: Number,
value: 0,
value: 0
},
lazyRender: {
type: Boolean,
value: true,
},
value: true
}
},
data: {
tabs: [],
......@@ -101,24 +109,35 @@ VantComponent({
currentIndex: 0,
container: null,
skipTransition: true,
lineOffsetLeft: 0,
lineOffsetLeft: 0
},
mounted() {
this.getElementInfo();
requestAnimationFrame(() => {
this.setData({
container: () => this.createSelectorQuery().select('.van-tabs'),
container: () => this.createSelectorQuery().select(".van-tabs")
});
this.resize(true);
this.scrollIntoView();
});
},
methods: {
getElementInfo() {
let that = this;
wx
.createSelectorQuery()
.in(this)
.selectAll(".van-tab")
.boundingClientRect()
.exec((rect = []) =>
that.triggerEvent("getEleInfo", { rect, vanTabsThis: this })
);
},
updateTabs() {
const { children = [], data } = this;
this.setData({
tabs: children.map((child) => child.data),
scrollable:
this.children.length > data.swipeThreshold || !data.ellipsis,
tabs: children.map(child => child.data),
scrollable: this.children.length > data.swipeThreshold || !data.ellipsis
});
this.setCurrentIndexByName(data.active || this.getCurrentName());
},
......@@ -131,18 +150,18 @@ VantComponent({
this.$emit(eventName, {
index: currentChild.index,
name: currentChild.getComputedName(),
title: currentChild.data.title,
title: currentChild.data.title
});
},
onTap(event) {
const { index } = event.currentTarget.dataset;
const child = this.children[index];
if (child.data.disabled) {
this.trigger('disabled', child);
this.trigger("disabled", child);
} else {
this.setCurrentIndex(index);
nextTick(() => {
this.trigger('click');
this.trigger("click");
});
}
},
......@@ -150,7 +169,7 @@ VantComponent({
setCurrentIndexByName(name) {
const { children = [] } = this;
const matched = children.filter(
(child) => child.getComputedName() === name
child => child.getComputedName() === name
);
if (matched.length) {
this.setCurrentIndex(matched[0].index);
......@@ -181,9 +200,9 @@ VantComponent({
nextTick(() => {
this.resize();
this.scrollIntoView();
this.trigger('input');
this.trigger("input");
if (shouldEmitChange) {
this.trigger('change');
this.trigger("change");
}
});
},
......@@ -194,26 +213,55 @@ VantComponent({
}
},
resize(skipTransition = false) {
if (this.data.type !== 'line') {
console.log("resize")
if (this.data.type !== "line") {
return;
}
const { currentIndex, ellipsis } = this.data;
Promise.all([
getAllRect(this, '.van-tab'),
getRect(this, '.van-tabs__line'),
getAllRect(this, ".van-tab"),
getRect(this, ".van-tabs__line")
]).then(([rects = [], lineRect]) => {
const rect = rects[currentIndex];
if (rect == null) {
return;
}
let lineOffsetLeft = rects
.slice(0, currentIndex)
.reduce((prev, curr) => prev + curr.width, 0);
lineOffsetLeft +=
(rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8);
let lineWidths = 0;
let lineOffsetLeft = 0;
if (this.data.lineLengthType == 1) {
if (this.data.linePosition == 2) {
lineOffsetLeft = rect.left;
} else {
lineOffsetLeft = rects
.slice(0, currentIndex)
.reduce((prev, curr) => prev + curr.width, 0);
lineOffsetLeft += 8;
}
lineWidths = rect.width;
} else if (this.data.lineLengthType == 2) {
// 宽度*80%
if (this.data.linePosition == 2) {
lineOffsetLeft = rect.left+rect.width*0.2;
} else {
lineOffsetLeft = rects
.slice(0, currentIndex)
.reduce((prev, curr) => prev + curr.width, 0);
lineOffsetLeft += rect.width * 0.2;
lineOffsetLeft += 8;
}
lineWidths = rect.width * 0.6;
} else {
// 有问题暂不支持固定宽度
// lineOffsetLeft = rects
// .slice(0, currentIndex)
// .reduce((prev, curr) => prev + curr.width, 0);
// lineOffsetLeft += this.data.lineWidth / 2;
// lineWidths = this.data.lineWidth;
}
this.setData({
lineWidth: lineWidths,
lineOffsetLeft,
skipTransition,
skipTransition
});
});
},
......@@ -224,20 +272,20 @@ VantComponent({
return;
}
Promise.all([
getAllRect(this, '.van-tab'),
getRect(this, '.van-tabs__nav'),
getAllRect(this, ".van-tab"),
getRect(this, ".van-tabs__nav")
]).then(([tabRects, navRect]) => {
const tabRect = tabRects[currentIndex];
const offsetLeft = tabRects
.slice(0, currentIndex)
.reduce((prev, curr) => prev + curr.width, 0);
this.setData({
scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2,
scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2
});
});
},
onTouchScroll(event) {
this.$emit('scroll', event.detail);
this.$emit("scroll", event.detail);
},
onTouchStart(event) {
if (!this.data.swipeable) return;
......@@ -252,7 +300,7 @@ VantComponent({
if (!this.data.swipeable) return;
const { direction, deltaX, offsetX } = this;
const minSwipeDistance = 50;
if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
if (direction === "horizontal" && offsetX >= minSwipeDistance) {
const index = this.getAvaiableTab(deltaX);
if (index !== -1) {
this.setCurrentIndex(index);
......@@ -278,6 +326,6 @@ VantComponent({
}
}
return -1;
},
},
}
}
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment