我的订单+我的
This commit is contained in:
@@ -1,204 +1,247 @@
|
||||
<template>
|
||||
<view v-if="iosHide">
|
||||
<view class="footer_box" :class="{ footer_bg: bg }">
|
||||
<view v-for="(item, index) of navigationList" :key="index" class="footer_item">
|
||||
<view class="footer_nav_item" @click="onPageJump(item.pagePath)">
|
||||
<image v-if="item.pagePath == path" class="footer_nav_item_image footer_nav_item_image_scale"
|
||||
:src="'/' + item.selectedIconPath" mode="aspectFit"></image>
|
||||
<image v-else class="footer_nav_item_image" :src="'/' + item.iconPath" mode="aspectFit"></image>
|
||||
<text class="footer_nav_item_text"
|
||||
:class="[item.pagePath == path ? 'footer_item_text_active' : '']">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="bg" class="footer_station"></view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="footer_box" :class="{ footer_bg: bg }">
|
||||
<view v-for="(item, index) of navigationIos" :key="index" class="footer_item">
|
||||
<view class="footer_nav_item" @click="onPageJump(item.pagePath)">
|
||||
<image v-if="item.pagePath == path" class="footer_nav_item_image footer_nav_item_image_scale"
|
||||
:src="'/' + item.selectedIconPath" mode="aspectFit"></image>
|
||||
<image v-else class="footer_nav_item_image" :src="'/' + item.iconPath" mode="aspectFit"></image>
|
||||
<text class="footer_nav_item_text"
|
||||
:class="[item.pagePath == path ? 'footer_item_text_active' : 'normal_text']">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="bg" class="footer_station"></view>
|
||||
</view>
|
||||
<view v-if="iosHide">
|
||||
<view class="footer_box" :class="{ footer_bg: bg }">
|
||||
<view
|
||||
v-for="(item, index) of navigationList"
|
||||
:key="index"
|
||||
class="footer_item"
|
||||
>
|
||||
<view class="footer_nav_item" @click="onPageJump(item.pagePath)">
|
||||
<image
|
||||
v-if="item.pagePath == path"
|
||||
class="footer_nav_item_image footer_nav_item_image_scale"
|
||||
:src="'/' + item.selectedIconPath"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<image
|
||||
v-else
|
||||
class="footer_nav_item_image"
|
||||
:src="'/' + item.iconPath"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<text
|
||||
class="footer_nav_item_text"
|
||||
:class="[item.pagePath == path ? 'footer_item_text_active' : '']"
|
||||
>{{ item.text }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="bg" class="footer_station"></view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="footer_box" :class="{ footer_bg: bg }">
|
||||
<view
|
||||
v-for="(item, index) of navigationIos"
|
||||
:key="index"
|
||||
class="footer_item"
|
||||
>
|
||||
<view class="footer_nav_item" @click="onPageJump(item.pagePath)">
|
||||
<image
|
||||
v-if="item.pagePath == path"
|
||||
class="footer_nav_item_image footer_nav_item_image_scale"
|
||||
:src="'/' + item.selectedIconPath"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<image
|
||||
v-else
|
||||
class="footer_nav_item_image"
|
||||
:src="'/' + item.iconPath"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<text
|
||||
class="footer_nav_item_text"
|
||||
:class="[
|
||||
item.pagePath == path ? 'footer_item_text_active' : 'normal_text',
|
||||
]"
|
||||
>{{ item.text }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="bg" class="footer_station"></view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
bg: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
path: '',
|
||||
navigationList: [
|
||||
|
||||
{
|
||||
"pagePath": "pages/peanut/home",
|
||||
"iconPath": "static/tab/icon1_n.png",
|
||||
"selectedIconPath": "static/tab/icon1_y.png",
|
||||
"text": "首页"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/peanut/shopping",
|
||||
"iconPath": "static/tab/tab_nor_02.png",
|
||||
"selectedIconPath": "static/tab/tab_cur_02.png",
|
||||
"text": "购物车"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/taihu/index",
|
||||
"iconPath": "static/tab/tab_nor_03.png",
|
||||
"selectedIconPath": "static/tab/tab_cur_03.png",
|
||||
"text": "太湖公益"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/peanut/mine",
|
||||
"iconPath": "static/tab/tab_nor_04.png",
|
||||
"selectedIconPath": "static/tab/tab_cur_04.png",
|
||||
"text": "我的"
|
||||
}
|
||||
],
|
||||
navigationIos: [
|
||||
{
|
||||
"pagePath": "pages/peanut/home",
|
||||
"iconPath": "static/tab/icon1_n.png",
|
||||
"selectedIconPath": "static/tab/icon1_y.png",
|
||||
"text": "首页"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/peanut/shopping",
|
||||
"iconPath": "static/tab/tab_nor_02.png",
|
||||
"selectedIconPath": "static/tab/tab_cur_02.png",
|
||||
"text": "购物车"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/taihu/index",
|
||||
"iconPath": "static/tab/tab_nor_03.png",
|
||||
"selectedIconPath": "static/tab/tab_cur_03.png",
|
||||
"text": "太湖公益"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/peanut/mine",
|
||||
"iconPath": "static/tab/tab_nor_04.png",
|
||||
"selectedIconPath": "static/tab/tab_cur_04.png",
|
||||
"text": "我的"
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
//第一次加载
|
||||
created() {
|
||||
//获取所有页面
|
||||
let currentPages = getCurrentPages();
|
||||
let page = currentPages[currentPages.length - 1];
|
||||
this.path = page.route;
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
onPageJump(url) {
|
||||
if (this.path !== url) {
|
||||
uni.switchTab({
|
||||
url: '/' + url
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
export default {
|
||||
props: {
|
||||
bg: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
path: "",
|
||||
navigationList: [
|
||||
{
|
||||
pagePath: "pages/peanut/home",
|
||||
iconPath: "static/tab/icon1_n.png",
|
||||
selectedIconPath: "static/tab/icon1_y.png",
|
||||
text: "首页",
|
||||
},
|
||||
{
|
||||
pagePath: "pages/peanut/shopping",
|
||||
iconPath: "static/tab/tab_nor_02.png",
|
||||
selectedIconPath: "static/tab/tab_cur_02.png",
|
||||
text: "购物车",
|
||||
},
|
||||
{
|
||||
pagePath: "pages/taihu/index",
|
||||
iconPath: "static/tab/tab_nor_03.png",
|
||||
selectedIconPath: "static/tab/tab_cur_03.png",
|
||||
text: "太湖公益",
|
||||
},
|
||||
{
|
||||
pagePath: "pages/bookShop/orderList",
|
||||
iconPath: "static/tab/order.png",
|
||||
selectedIconPath: "static/tab/order_active.png",
|
||||
text: "订单",
|
||||
},
|
||||
{
|
||||
pagePath: "pages/mine/mine/index",
|
||||
iconPath: "static/tab/tab_nor_04.png",
|
||||
selectedIconPath: "static/tab/tab_cur_04.png",
|
||||
text: "我的",
|
||||
},
|
||||
],
|
||||
navigationIos: [
|
||||
{
|
||||
pagePath: "pages/peanut/home",
|
||||
iconPath: "static/tab/icon1_n.png",
|
||||
selectedIconPath: "static/tab/icon1_y.png",
|
||||
text: "首页",
|
||||
},
|
||||
{
|
||||
pagePath: "pages/peanut/shopping",
|
||||
iconPath: "static/tab/tab_nor_02.png",
|
||||
selectedIconPath: "static/tab/tab_cur_02.png",
|
||||
text: "购物车",
|
||||
},
|
||||
|
||||
{
|
||||
pagePath: "pages/taihu/index",
|
||||
iconPath: "static/tab/tab_nor_03.png",
|
||||
selectedIconPath: "static/tab/tab_cur_03.png",
|
||||
text: "太湖公益",
|
||||
},
|
||||
{
|
||||
pagePath: "pages/bookShop/orderList",
|
||||
iconPath: "static/tab/order.png",
|
||||
selectedIconPath: "static/tab/order_active.png",
|
||||
text: "订单",
|
||||
},
|
||||
{
|
||||
pagePath: "pages/mine/mine/index",
|
||||
iconPath: "static/tab/tab_nor_04.png",
|
||||
selectedIconPath: "static/tab/tab_cur_04.png",
|
||||
text: "我的",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
//第一次加载
|
||||
created() {
|
||||
//获取所有页面
|
||||
let currentPages = getCurrentPages();
|
||||
let page = currentPages[currentPages.length - 1];
|
||||
this.path = page.route;
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
onPageJump(url) {
|
||||
if (this.path !== url) {
|
||||
uni.switchTab({
|
||||
url: "/" + url,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
.normal_text{
|
||||
color: #FFF;
|
||||
}
|
||||
.footer_station {
|
||||
height: 110rpx;
|
||||
box-sizing: content-box;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
@import "@/style/mixin.scss";
|
||||
.normal_text {
|
||||
color: #fff;
|
||||
}
|
||||
.footer_station {
|
||||
height: 110rpx;
|
||||
box-sizing: content-box;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.footer_box {
|
||||
height: 110rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
z-index: 502;
|
||||
box-sizing: content-box;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.footer_box {
|
||||
height: 110rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
z-index: 502;
|
||||
box-sizing: content-box;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.footer_bg {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0px 10px 1px #0000001a;
|
||||
}
|
||||
.footer_bg {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0px 10px 1px #0000001a;
|
||||
}
|
||||
|
||||
.footer_item {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
.footer_item {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.footer_nav_item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.footer_nav_item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.footer_nav_item:active {
|
||||
background-color: rgba($color: #fff, $alpha: 0.1);
|
||||
}
|
||||
.footer_nav_item:active {
|
||||
background-color: rgba($color: #fff, $alpha: 0.1);
|
||||
}
|
||||
|
||||
.footer_nav_item_text {
|
||||
font-size: 26rpx;
|
||||
color: #7b7b7b;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
.footer_nav_item_text {
|
||||
font-size: 26rpx;
|
||||
color: #7b7b7b;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.footer_nav_item_text_active {
|
||||
color: #f9a633;
|
||||
}
|
||||
.footer_nav_item_text_active {
|
||||
color: #f9a633;
|
||||
}
|
||||
|
||||
.footer_nav_item_image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
.footer_nav_item_image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
}
|
||||
.footer_nav_item_image_scale {
|
||||
animation: mescrollUpRotate 0.6s linear 1;
|
||||
}
|
||||
|
||||
.footer_nav_item_image_scale {
|
||||
animation: mescrollUpRotate 0.6s linear 1;
|
||||
}
|
||||
@keyframes mescrollUpRotate {
|
||||
0% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
@keyframes mescrollUpRotate {
|
||||
0% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.footer_item_text_active {
|
||||
color: #3983ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
.footer_item_text_active {
|
||||
color: #3983ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user