Skip to content

U
user
Commit 01b800ad by songbingqi
Options

修改自定义tabar

parent d01d92b9
Showing with 294 additions and 53 deletions
components/OrderQrCode/index.vue
<template>
<div>
<u-popup :show="show" :round="10" mode="bottom" @close="close" :safeAreaInsetBottom="false">
<view class="bigBox" :style="{'height':'1380rpx'}">
<view class="bigBox" :style="{'height':'90vh'}">
<div class="order_flow" >
<div class="code">取单码 {{ orderInfo.orderNum }}</div>
<!-- <image mode="scaleToFill" :src="qrCode" class="qr_code"></image> -->
......
components/menuAssembly/index.vue
<template>
<view class="page-body">
<scroll-view class="nav-left" :class="[buied?'buiedcss':'',shopCarFlag?'shopCarcss':'' ]" scroll-y :scroll-top="scrollLeftTop" scroll-with-animation>
<scroll-view class="nav-left" :style="[heightStyle]" :class="[shopCarFlag?'shopCarcss':'' ]" scroll-y :scroll-top="scrollLeftTop" scroll-with-animation>
<view class="nav-left-item" v-for="item in classifyData" @click="categoryClickMain(item.id)" :key="item.id"
:class="item.id == categoryId ? 'active' : ''">
<span>{{ item.name }}</span>
<view :class="item.id == categoryId ? 'active-line' : ''"></view>
</view>
</scroll-view>
<scroll-view class="nav-right" :class="[buied?'buiedcss':'',shopCarFlag?'shopCarcss':'' ]" scroll-y :scroll-top="scrollTop" @scroll="scroll" @touchstart="openScroll"
<scroll-view class="nav-right" :style="[heightStyle]" :class="[shopCarFlag?'shopCarcss':'' ]" scroll-y :scroll-top="scrollTop" @scroll="scroll" @touchstart="openScroll"
scroll-with-animation>
<view v-for="category in classifyData" :id="category.id" :key="category.id" class="box">
<view :style="loads" class="right-title">{{ category.name }}</view>
......@@ -52,6 +52,9 @@ export default {
props:['buied'],
data() {
return {
heightStyle: {
'--scroll-height': 0
},
Utils,
classifyData: [],
categoryId: '',
......@@ -60,18 +63,28 @@ export default {
scrollTop: 0,
scrolled: true,
goods:[],
shopCarFlag:false
shopCarFlag:false,
taBarHeight:0
}
},
watch:{
goods(val){
this.shopCarFlag = val.length>0
},
buied(val) {
if(val){
this.heightStyle['--scroll-height'] = (this.taBarHeight+293)+'rpx'
}
}
},
created() {
$EventBus.$off('updateCar');
},
mounted(){
this.$nextTick(()=>{
this.taBarHeight = uni.getStorageSync('taBarHeight')
this.heightStyle['--scroll-height'] = (this.taBarHeight)+'rpx'
})
this.goods = uni.getStorageSync('shopCarInfo') || [];
$EventBus.$on('updateCar', () => {
this.goods = uni.getStorageSync('shopCarInfo') || [];
......@@ -378,8 +391,9 @@ export default {
width: 160rpx;
background: #fff;
border-right: 2rpx solid #EEEEEE;
height: calc(100vh - 376rpx);
height: calc(100vh - var(--scroll-height));
overflow: auto;
// background: var(--header-color);
}
.nav-left-item {
......@@ -400,7 +414,7 @@ export default {
.nav-right {
box-sizing: border-box;
height: calc(100vh - 376rpx);
height: calc(100vh - var(--scroll-height));
overflow: auto;
padding-top: 50rpx;
width: 585.21rpx;
......
components/shopCar/shopCar.vue
......@@ -64,7 +64,7 @@
</view>
</u-popup>
<view class="end" v-if="goods.length">
<view class="end" v-if="goods.length" :style="{'bottom':shopCar+'rpx'}">
<view @click.stop="openShopCar" class="end-left">
<view style="display:flex">
<view class="car-img">
......@@ -101,13 +101,16 @@ export default {
goods: [],//购物车商品信息
loginInfo: "",
imgPath: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F82%2F40%2F596fa6dc00bb4_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633499781&t=d37222e32213957ddbdd01d62e071309',
Utils
Utils,
shopCar:0
}
},
created() {
$EventBus.$off('updateCar');
},
mounted() {
this.shopCar = uni.getStorageSync('shopCar')
console.log(this.shopCar)
if(!this.userms){
User.wxLoginAndGetOpenid(true).then(loginInfo=>{
this.loginInfo = loginInfo
......@@ -118,6 +121,7 @@ export default {
this.goods = uni.getStorageSync('shopCarInfo') || [];
});
},
methods: {
// 切换购物车列表显示隐藏
openShopCar() {
......@@ -477,11 +481,10 @@ export default {
height: 92rpx;
background-color: rgb(253, 253, 253);
position: fixed;
bottom: 0;
left: 0;
box-shadow: 0px -4px 8px 0px rgba(102, 102, 102, 0.1);
display: flex;
z-index: 10075;
z-index: 1024;
align-items: center;
&-left {
......
components/tabBar/tabBar copy.vue 0 → 100644
<template>
<view class="tabbar">
<view class="navigator">
<view class="navigator-item" v-for="(item,index) in tabBar.list" :key="item.pagePath"
@click="switchTab(index)">
<img :src="item.iconPath" class="icon" v-if="selectedIndex !== index">
<img :src="item.selectedIconPath" class="icon" v-else>
<text :class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props:['select'],
watch:{
select(val){
this.selectedIndex = Number(val)
}
},
mounted(){
// console.log(this.select)
// this.selectedIndex = Number(this.select)
// this.selectedIndex = 0
// const url = uni.getStorageSync('url')
// const nowUrl = this.tabBar.list.findIndex(item => url === item.pagePath)
// this.selectedIndex = nowUrl
// console.log(nowUrl)
},
data() {
return {
selectedIndex: 0,
showselected: false,
tabBar: {
list: [
{
"iconPath": "/static/imgs/caidanweixuanzhong.png",
"selectedIconPath": "/static/imgs/caidanxuanzhong.png",
"pagePath": "pages/menu/menu",
"text": "菜单"
},
{
"iconPath": "/static/imgs/dingdanweixuanzhong.png",
"selectedIconPath": "/static/imgs/dingdanxuanzhong.png",
"pagePath": "pages/order/order",
"text": "订单"
},
{
"iconPath": "/static/imgs/wodeweixuanzhong.png",
"selectedIconPath": "/static/imgs/wodexuanzhong.png",
"pagePath": "pages/mine/mine",
"text": "我的"
}
]
},
}
},
// beforeCreate() {
// this.__path__ = this.$route.path
// },
methods: {
switchTab(index, item) {
this.$emit('changeIndex',index)
}
},
}
</script>
<style>
.tabbar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100rpx;
z-index: 999;
background: #F5F5F5;
border-top: 2rpx solid #eee;
}
.navigator {
display: flex;
justify-content: space-between;
width: 85%;
margin: 0 auto;
padding: 20rpx;
}
.navigator-item {
display: flex;
align-items: center;
flex-direction: column;
width: 50rpx;
height: 100%;
}
.item-text {
margin-top: 6rpx;
color: #777E86;
font-size: 24rpx;
}
.text-active {
color: #2E92FD !important;
}
.icon {
width: 20px;
height: 20px;
}
</style>
\ No newline at end of file
components/tabBar/tabBar.vue
<template>
<!-- Tab -->
<u-tabbar zIndex="10075" v-model="selectedTabbar" :border="false" inactive-color="#000000" height="50"
active-color="#006ECF" :fixed="true" :safeAreaInsetBottom="true" @change="beforeSwitch">
<u-tabbar-item v-for="(item, index) in list" :key="item.text" :text="item.text"
:icon="selectedTabbar == index ? item.activeIcon : item.icon"></u-tabbar-item>
</u-tabbar>
<view class="tabbar" :style="{'padding-bottom':BottomSafeHeight+'px'}">
<view class="navigator">
<view class="navigator-item" v-for="(item,index) in tabBar.list" :key="item.pagePath"
@click="switchTab(index,item)">
<img :src="item.iconPath" class="icon" v-if="selectedIndex !== index">
<img :src="item.selectedIconPath" class="icon" v-else>
<text :class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
export default {
props:['select'],
mounted(){
this.BottomSafeHeight = uni.getStorageSync('BottomSafeHeight')||10
uni.setStorageSync("taBarHeight",(this.BottomSafeHeight+376))
uni.setStorageSync("shopCar",this.BottomSafeHeight==10?120:(this.BottomSafeHeight+288)/2)
uni.setStorageSync("orderBottom",(this.BottomSafeHeight+150))
this.selectedIndex = Number(this.select)
},
data() {
return {}
return {
selectedIndex: 0,
showselected: false,
BottomSafeHeight:0,
tabBar: {
list: [
{
"iconPath": "/static/imgs/caidanweixuanzhong.png",
"selectedIconPath": "/static/imgs/caidanxuanzhong.png",
"pagePath": "pages/menu/menu",
"text": "菜单"
},
{
"iconPath": "/static/imgs/dingdanweixuanzhong.png",
"selectedIconPath": "/static/imgs/dingdanxuanzhong.png",
"pagePath": "pages/order/order",
"text": "订单"
},
props: ['selectedTabbar'],
computed: {
list() {
// tabbar List
return this.$store.state.list;
{
"iconPath": "/static/imgs/wodeweixuanzhong.png",
"selectedIconPath": "/static/imgs/wodexuanzhong.png",
"pagePath": "pages/mine/mine",
"text": "我的"
}
]
},
}
},
// beforeCreate() {
// this.__path__ = this.$route.path
// },
methods: {
//点击tab
beforeSwitch(index) {
uni.switchTab({ url: this.list[index].pagePath });
return true;
switchTab(index, item) {
let url = '/' + item.pagePath
uni.switchTab({
url
})
return
}
},
}
}
</script>
<style>
.tabbar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100rpx;
z-index: 999;
background: #FFFFFF;
border-top: 2rpx solid #FFFFFF;
}
.navigator {
display: flex;
justify-content: space-around;
width: 85%;
margin: 0 auto;
padding: 20rpx;
}
.navigator-item {
display: flex;
align-items: center;
flex-direction: column;
width: 50rpx;
height: 100%;
}
.item-text {
margin-top: 12rpx;
color: #777E86;
font-size: 24rpx;
}
.text-active {
color: #2E92FD !important;
}
.icon {
width: 40rpx;
height: 40rpx;
}
</style>
\ No newline at end of file
main.js
......@@ -14,32 +14,17 @@ import User from '@/request/user';
// main.js
import initToast from "@/components/bocft-toast/initToast.js"
import showToast from "@/components/bocft-toast/bocft-toast.vue"
import taBar from "@/components/tabBar/tabBar.vue"
initToast(Vue);
Vue.component('show-toast',showToast);
Vue.component('taBar',taBar);
Vue.use(uView);
Vue.prototype.$utils = utils;
Vue.prototype.setPrice = (price) => price && Number(price).toFixed(2);
// #ifdef MP-WEIXIN
Vue.mixin({
methods:{
setTabBarIndex(index) {
if (typeof this.$mp.page.getTabBar === 'function' &&
this.$mp.page.getTabBar()) {
this.$mp.page.getTabBar().setData({
selected: index
})
}
}
}
})
// #endif
Vue.prototype.loginByPhoneNumber = (e) => {
if (e.detail.errMsg == 'getPhoneNumber:ok') {
User.getPhoneNumber(e);
......
menuSubPackage/pages/goodsDetail/goodsDetail.vue
......@@ -441,6 +441,7 @@ export default {
height: 48rpx;
margin-right: 32rpx;
line-height: 48rpx;
min-width: 120rpx;
.default {
......
pages.json
......@@ -94,7 +94,7 @@
"backgroundColor": "#ffffff"
},
"tabBar": {
"custom": false,
"custom": true,
"color": "#999999",
"selectedColor": "#003AE9",
"iconWidth": "30rpx",
......
pages/app/app.vue 0 → 100644
<template>
<view>
<Menu v-if="selectIndex===0"></Menu>
<Order v-else-if="selectIndex===1"></Order>
<Mine v-else-if="selectIndex===2"></Mine>
<taBar :select="selectIndex" @changeIndex="acceptIndex"></taBar>
</view>
</template>
<script>
import Menu from '../menu/menu.vue'
import Mine from '../mine/mine.vue'
import Order from '../order/order.vue'
export default {
components:{
Menu,
Mine,
Order
},
data(){
return {
selectIndex: 0
}
},
methods:{
acceptIndex(e){
console.log(e)
this.selectIndex = e
}
}
}
</script>
<style>
</style>
\ No newline at end of file
pages/menu/menu.vue
......@@ -45,7 +45,6 @@
<view class="barCode-dis">点击二维码取单</view>
</view>
</view>
<ShopCar ref="shopbar" />
<MenuAssembly ref="MenuAssembly" @getallNum="getallNum" :buied="buied"/>
<u-picker @cancel="show = false" :show="show" :immediateChange="true" ref="uPicker" :columns="columns"
@confirm="confirm" keyName="name" @change="changeHandler"></u-picker>
......@@ -53,6 +52,8 @@
<canvas class="canvas-code" canvas-id="myQrcode2"
style="background:#fff;width: 200px;height: 200px; display:block; left:-800rpx;position:absolute;" />
<show-toast ref="toast"/>
<taBar select="0"></taBar>
<ShopCar ref="shopbar" />
</view>
</template>
<script>
......
pages/mine/mine.vue
......@@ -68,7 +68,7 @@
</view>
</view>
</view>
<taBar select="2"></taBar>
</view>
</template>
......
pages/order/order.vue
......@@ -15,7 +15,7 @@
<view class="empty_text">——您还未登录，请先登录——</view>
<button class="empty_button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">去品尝</button>
</view>
<view class="orders">
<view class="orders" :style="{'padding-bottom':orderBottom+'rpx'}">
<view class="order_item" v-for="item in list" :key="item.id" @click="openInfo(item)">
<view class="order_header">
<view>
......@@ -65,6 +65,7 @@
</view>
</view>
<show-toast ref="toast"/>
<taBar select="1"></taBar>
</view>
</template>
......@@ -89,10 +90,15 @@ export default {
empty: false,
list: [],
loginInfo:"",
Utils
Utils,
orderBottom:0
}
},
onShow() {
// this.getList()
},
mounted() {
this.orderBottom = uni.getStorageSync('orderBottom')
this.getList()
},
computed: {
......
request/user/index.js
......@@ -21,6 +21,7 @@ export default {
callback && callback(1, params);
},
fail: function (res) {
console.log(res)
const params = uni.getStorageSync('location');
callback && callback(0, params);
},
......
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