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
<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> |