You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
1.8 KiB
85 lines
1.8 KiB
2 years ago
|
<template>
|
||
|
|
<view class="foot-nav row">
|
||
|
|
<view class="foot-nav-background-group">
|
||
|
|
<view class="foot-nav-background">
|
||
|
|
<view class="foot-nav-background-small"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="foot-nav-button-group row">
|
||
|
|
<view class="col-3 foot-nav-button" v-for="(item,index) in buttonGroup"
|
||
|
|
:class="{active:(item.name == footCheck)}" :style="{
|
||
|
|
backgroundImage:'url('+item.image+ ((item.name == footCheck)?'-active':'')+'.png)',
|
||
|
|
backgroundSize:'auto '+((item.name == footCheck)?'81':'54')+'rpx'
|
||
|
|
}" @click="commitFootCheck(item)">
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
imghost
|
||
|
|
} from '@/config/host.js'
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
footCheck: 'home',
|
||
|
|
title: 'Hello',
|
||
|
|
loading: true,
|
||
|
|
buttonGroup: [{
|
||
|
|
image: imghost + "/static/image/foot-nav-button-one",
|
||
|
|
url: '/pages/index/index',
|
||
|
|
name: 'home',
|
||
|
|
title:'汪汪行天下',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
image: imghost + "/static/image/foot-nav-button-two",
|
||
|
|
url: '/pages/order/index',
|
||
|
|
name: 'order',
|
||
|
|
title:'订单',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
image: imghost + "/static/image/foot-nav-button-three",
|
||
|
|
url: '/pages/chatList/index',
|
||
|
|
name: 'chat',
|
||
|
|
title:'在线沟通',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
image: imghost + "/static/image/foot-nav-button-four",
|
||
|
|
url: '/pages/user/index',
|
||
|
|
name: 'user',
|
||
|
|
title:'',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
commitFootCheck(item) {
|
||
|
|
this.$store.commit('footCheck',item.name);
|
||
|
|
this.$store.commit('title',item.title);
|
||
|
|
console.log('commit');
|
||
|
|
},
|
||
|
|
isFootCheck() {
|
||
|
|
// return this.;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
"$store.state.footCheck": {
|
||
|
|
handler(newVal, oldVal) {
|
||
|
|
this.footCheck = newVal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
@import '@/components/FooterNav/components/index.scss';
|
||
|
|
</style>
|