TmOct5/AGuestSaas
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[新增]新增自定义tabbar组件

Browse Source
This commit is contained in:
唐明明
2020-12-30 10:15:22 +08:00
parent 2361b0ad09
commit 90ebeb48f7
21 changed files with 151 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app.js
View File

@@ -14,9 +14,9 @@ App({
wx.$qqMap = new QQMapWX({
key: "3TBBZ-O42LU-HXCVQ-2M66A-NCFTT-LMBHU"
})
//挂载api方法
wx.$api = apis
},
globalData: {
navAppInfo : {
@@ -24,6 +24,7 @@ App({
envVersion : "trial",
goodUrl : "/pages/goods/show?goodsId=",
cardUrl : "/pages/card/index?cardid="
}
},
id : 1
}
})

37
app.json
View File

@@ -1,8 +1,7 @@
{
"pages": [
"pages/config/config",
"pages/welcome/index",
"pages/config/config",
"pages/company/index",
"pages/company/search/search",
"pages/shortVideo/index",
@@ -45,42 +44,14 @@
"pages/home/projectSuccess/projectSuccess",
"pages/home/activeSuccess/activeSuccess"
],
"tabBar": {
"list": [{
"pagePath": "pages/shortVideo/index",
"text": "视频",
"iconPath": "/static/tabbar/tabbar_icon_00.png",
"selectedIconPath": "/static/tabbar/tabbar_icon_show_00.png"
},
{
"pagePath": "pages/mall/index",
"text": "商城",
"iconPath": "/static/tabbar/tabbar_icon_01.png",
"selectedIconPath": "/static/tabbar/tabbar_icon_show_01.png"
},
{
"pagePath": "pages/ticket/index",
"text": "优惠",
"iconPath": "/static/tabbar/tabbar_icon_02.png",
"selectedIconPath": "/static/tabbar/tabbar_icon_show_02.png"
},
{
"pagePath": "pages/user/index",
"text": "我的",
"iconPath": "/static/tabbar/tabbar_icon_03.png",
"selectedIconPath": "/static/tabbar/tabbar_icon_show_03.png"
}
],
"selectedColor": "#0b0041",
"color": "#4e4f51",
"borderStyle": "white",
"custom": true
},
"window": {
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "",
"navigationBarTextStyle": "black"
},
"usingComponents": {
"storeTabBar": "/components/storeTabBar/storeTabBar"
},
"plugins": {
"live-player-plugin": {
"version": "1.2.5",

2
components/mallIndex_list/mallIndex_list.wxml
View File

@@ -7,7 +7,7 @@
<view class="recommend-label" wx:for="{{pushList}}" wx:key="pushList" bindtap="push"
data-id="{{item.goods_id}}">
<view class="recommend-img">
<image src="{{item.cover}}" mode="aspectFill"></image>
<image class="recommend-img-src" src="{{item.cover}}" mode="aspectFill"></image>
</view>
<view class="recommend-cont">
<view class="nowrap recommend-name">

3
components/mallIndex_list/mallIndex_list.wxss
View File

@@ -34,7 +34,7 @@
padding-top: 100%;
}
.recommend-img image {
.recommend-img-src {
position: absolute;
width: 100%;
height: 100%;
@@ -65,7 +65,6 @@
.recommend-cost {
font-size: 24rpx;
color: #999;
/* text-decoration:line-through; */
margin: 2rpx 0 0 20rpx;
}

4
components/mallIndex_video/mallIndex_video.wxml
View File

@@ -4,7 +4,7 @@
<view class="videoTitle-name">
<view class="videoTitle-name-color">商品直播间专区</view>
<view class="videoTitle-name-img">
<image src="/static/mall_icon/liveIng_bf.png"></image>LIVE
<image class="videoTitle-name-img-img" src="/static/mall_icon/liveIng_bf.png"></image>LIVE
</view>
</view>
<navigator hover-class="none" url="/pages/mall_video/mall_video" class="videoTitle-more">
@@ -16,7 +16,7 @@
<view class="videoList-img">
<image class="videoList-cover" src="/static/images/goods_text.png" mode="aspectFill"></image>
<view class="videoList-tips">
<image src="/static/mall_icon/liveIng_icon.png"></image>正在直播
<image class="videoList-tips-image" src="/static/mall_icon/liveIng_icon.png"></image>正在直播
</view>
</view>
<view class="videoList-cont">

6
components/mallIndex_video/mallIndex_video.wxss
View File

@@ -40,7 +40,7 @@
margin-top: 5rpx;
}
.videoTitle-name-img image {
.videoTitle-name-img-img {
width: 34rpx;
height: 34rpx;
margin: 1rpx 6rpx 0 10rpx;
@@ -73,7 +73,7 @@
padding-top: 80%;
}
.videoList-img .videoList-cover {
.videoList-cover {
position: absolute;
top: 0;
left: 0;
@@ -96,7 +96,7 @@
box-shadow: 0 0 10rpx rgba(0, 0, 0, .05);
}
.videoList-tips image {
.videoList-tips-image {
width: 30rpx;
height: 30rpx;
margin: 8rpx 10rpx 6rpx 0;

56
components/storeTabBar/storeTabBar.js Normal file
View File

@@ -0,0 +1,56 @@
/**
* Web唐明明
* 匆匆数载恍如梦，岁月迢迢华发增。
* 碌碌无为枉半生，一朝惊醒万事空。
*/
import { tabBar } from "../../lib/storeConfig"
Component({
/**
* 组件接收参数
*/
properties: {
// 显示组件页面的路径
pagesUrl : {
type : String,
value : ""
}
},
/**
* 组件的初始数据
*/
data: {
selected : 0,
color : "#4e4f51",
selectedColor : "#0b0041",
list : []
},
/**
* 生命周期函数
*/
pageLifetimes: {
show(){
let selectedIndex = tabBar.findIndex(val=> val.pagePath == '/' + this.data.pagesUrl)
this.setData({
list : tabBar,
selected: selectedIndex
})
}
},
/**
* 组件的方法列表
*/
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.reLaunch({
url
})
}
}
})

4
components/storeTabBar/storeTabBar.json Normal file
View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

5
custom-tab-bar/index.wxml → components/storeTabBar/storeTabBar.wxml
View File

@@ -1,9 +1,8 @@
<cover-view class="tab-bar">
<cover-view class="tab-bar-border"></cover-view>
<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}"
data-index="{{index}}" bindtap="switchTab">
<cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
<cover-image class="tab-bar-item-icon" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view class="tab-bar-text" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
</cover-view>
</cover-view>

6
custom-tab-bar/index.wxss → components/storeTabBar/storeTabBar.wxss
View File

@@ -5,7 +5,7 @@
* 碌碌无为枉半生，一朝惊醒万事空。
*/
.tab-bar {
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
@@ -34,11 +34,11 @@
flex-direction: column;
}
.tab-bar-item cover-image {
.tab-bar-item-icon{
width: 24px;
height: 24px;
}
.tab-bar-item cover-view {
.tab-bar-text{
font-size: 10px;
}

52
custom-tab-bar/index.js
View File

@@ -1,52 +0,0 @@
/**
* Web唐明明
* 匆匆数载恍如梦，岁月迢迢华发增。
* 碌碌无为枉半生，一朝惊醒万事空。
*/
import { tabBar } from "../lib/storeConfig"
Component({
/**
* 组件的初始数据
*/
data: {
selected : 0,
color : "#4e4f51",
selectedColor: "#0b0041",
list : []
},
/**
* 生命周期函数
*/
attached(){
if(this.data.list.length <= 0 && tabBar.length > 0){
this.setData({
list: tabBar
})
}else{
wx.showToast({
title: "获取店铺模块信息失败",
icon : "none"
})
}
},
/**
* 组件的方法列表
*/
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({
url
})
this.setData({
selected: data.index
})
}
}
})

3
custom-tab-bar/index.json
View File

@@ -1,3 +0,0 @@
{
"component": true
}

7
pages/company/index.js
View File

@@ -67,14 +67,17 @@ Page({
// 存储浏览记录
wx.setStorageSync('companyRecord', record)
// 存储点击的企业id
wx.setStorageSync('compayId', company.company_id)
// 存储店铺ID
wx.setStorage({
data : company.store_id,
key : "storeId",
success : res=>{
if(res.errMsg == "setStorage:ok"){
wx.navigateTo({
url: "/pages/shortVideo/index",
wx.reLaunch({
url: "/pages/config/config",
})
}
}

60
pages/config/config.js
View File

@@ -18,30 +18,44 @@ Page({
})
return
}
wx.getStorage({
key : 'compayId',
success : res=>{
wx.$api.publics.storeConfig({
company_id: e.companyoid
}).then(res => {
let tabBarVal = res.concat({})
tabBarVal.forEach(res => {
switch (res.slug) {
case "video":
tabBar.push(video)
break;
case "mall":
tabBar.push(mall)
break;
case "ticket":
tabBar.push(ticket)
break;
default :
tabBar.push(user)
break;
}
})
wx.switchTab({
url: tabBar[0].pagePath
})
wx.$api.publics.storeConfig({
company_id: res.data
}).then(res => {
let tabBarVal = res.concat({})
tabBarVal.forEach(res => {
switch (res.slug) {
case "video":
tabBar.push(video)
break;
case "mall":
tabBar.push(mall)
break;
case "ticket":
tabBar.push(ticket)
break;
default :
tabBar.push(user)
break;
}
})
if(tabBarVal.length == tabBar.length){
wx.reLaunch({
url: tabBar[0].pagePath,
})
}
})
}
})
},
/**
* 生命周期函数
*/
onShow(){
wx.hideHomeButton()
}
})

7
pages/mall/index.js
View File

@@ -28,6 +28,13 @@ Page({
this.pushInfo();
},
/**
* 生命周期函数
*/
onShow(){
wx.hideHomeButton()
},
/**
* 商城首页数据
*/

2
pages/mall/index.wxml
View File

@@ -39,3 +39,5 @@
</block>
</view>
</view>
<storeTabBar pages-url="pages/mall/index"></storeTabBar>

8
pages/shortVideo/index.js
View File

@@ -10,10 +10,10 @@ Page({
* 页面的初始数据
*/
data: {
videoList: [], //获取短视频列表
videoIndex: 0, //当前播放视频的下标
videoId: "", //当前播放的视频id
playState: true, //视频播放状态
videoList : [], //获取短视频列表
videoIndex : 0, //当前播放视频的下标
videoId : "", //当前播放的视频id
playState : true, //视频播放状态
},
/**

18
pages/shortVideo/index.wxml
View File

@@ -1,15 +1,13 @@
<view>短视频</view>
<view>短视频</view>
<view>短视频</view>
<view>短视频</view>
<view>短视频</view>
<view>短视频</view>
<view>短视频</view>
<view>短视频</view>
<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=4">进入直播间</navigator>
<view class="videos-content">
<view style="margin-top: 10vh">
<view bindtap="onId">改变全局id</view>
</view>
<view class="videos-content" wx:if="{{1 == 2}}">
<swiperViode
wx:if="{{videoList.length > 0}}"
class="swiper-viode"
@@ -52,3 +50,5 @@
</view>
</view>
</view>
<storeTabBar pages-url="pages/shortVideo/index"></storeTabBar>

2
pages/user/index.wxml
View File

@@ -111,3 +111,5 @@
</view>
</view>
</view>
<storeTabBar pages-url="pages/user/index"></storeTabBar>

2
pages/welcome/index.js
View File

@@ -25,7 +25,7 @@ Page({
key : "storeId",
success : ()=>{
wx.reLaunch({
url: "/pages/shortVideo/index",
url: "/pages/config/config",
})
},
fail : ()=>{

4
project.config.json
View File

@@ -86,9 +86,9 @@
"scene": null
},
{
"name": "读取企业配置",
"name": "分享进入",
"pathName": "pages/config/config",
"query": "companyoid=17",
"query": "",
"scene": null
}
]