warm_man/components/FooterNav/index.vue

<template>

  <view class="footer-nav row" >
    <view class="nav-item col-3 row" v-for="(item,index) in buttonGroup" @click="commitFootCheck(item)">
      <view class="nav-ico col-12">
        <image mode="heightFix" class="img" :src="item.image+((item.name === footCheck)?'-active':'')+'.png'"/>
      </view>
      <view class="nav-title col-12" :class="{active:(item.name === footCheck)}" >{{item.title}}</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-1",
						url: '/pages/index/index',
						name: 'home',
						title:'暖新人',
					},
					{
						image: imghost + "/static/image/foot-2",
						url: '/pages/order/index',
						name: 'order',
						title:'暖新活动',
					},
					{
						image: imghost + "/static/image/foot-3",
						url: '/pages/chatList/index',
						name: 'chat',
						title:'暖新商城',
					},
					{
						image: imghost + "/static/image/foot-4",
						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>