123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- <template>
- <view class="container">
-
- <view class="content">
-
- <view class="item" :class="[active == 0?'active':'']"
- @click="navTo(0,'/statistics/index/index?type=')">
- <image :src="active == 0 ?'/static/images/tabBar/index1_act.png':'/static/images/tabBar/index1.png'"
- mode="aspectFit" class="icon-img"></image>
- <text class="title">首页</text>
- </view>
-
- <view class="item" :class="[active == 1?'active':'']" @click="navTo(1,'/saomaDiancan/index/index?type=')">
- <image :src="active == 1 ?'/static/images/tabBar/icon_20_on.png':'/static/images/tabBar/icon_20.png'" mode="aspectFit" class="icon-img"></image>
- <text class="title">门店管理</text>
- </view>
- <view class="item" :class="[active == 2?'active':'']" @click="navTo(2,'/saomaDiancan/my/my?type=')">
- <image :src="active == 2 ?'/static/images/tabBar/icon_21_on.png':'/static/images/tabBar/icon_21.png'" class="icon-img"></image>
- <text class="title">个人中心</text>
- </view>
-
- </view>
-
- </view>
- </template>
- <script>
- export default {
- props: {
- active: {
- type: Number,
- default: 0
- },
- // 扫码点餐2,无痕跳转2
- type: {
- type: Number,
- default: 1
- },
- },
- data() {
- return {
- };
- },
- methods: {
- navTo(index, url) {
- console.log("index, url", this.active,index, url)
- if (index != this.active) {
- uni.redirectTo({
- url: url+this.type
- })
- }
- }
- }
- }
- </script>
- <style scoped>
-
- .container {
- width: 100%;
- height: 100rpx;
- /*兼容 IOS<11.2*/
- padding-bottom: constant(safe-area-inset-bottom);
- /*兼容 IOS>11.2*/
- padding-bottom: env(safe-area-inset-bottom);
- box-sizing: content-box;
- }
- .content {
- background-color: #fff;
- width: 100vw;
- height: 100rpx;
- /*兼容 IOS<11.2*/
- padding-bottom: constant(safe-area-inset-bottom);
- /*兼容 IOS>11.2*/
- padding-bottom: env(safe-area-inset-bottom);
- display: flex;
- flex-flow: row nowrap;
- justify-content: space-around;
- align-items: center;
- /* box-shadow: 0 20rpx 20rpx #f6f6f6 inset; */
- position: fixed;
- left: 0;
- bottom: 0;
- z-index: 900;
- box-sizing: content-box;
- }
- .content .item {
- flex: auto;
- display: flex;
- flex-flow: column nowrap;
- justify-content: center;
- align-items: center;
- }
- .content .icon-img {
- display: block;
- width: 48rpx;
- height: 48rpx;
- }
- .content .title {
- font-size: 24rpx;
- height: 28rpx;
- line-height: 28rpx;
- text-align: center;
- color: #ABADC2;
- }
- .content .active .title {
- color: #3387FF;
- }
- </style>
|