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 805 additions and 103 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/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> -->
</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
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 - lineRect.width) / 2 + (ellipsis ? 0 : 8);
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