wang_zhuang_daping/src.mobile/views/mobile-page/mobile-home.vue

<template>
    <div style="height: 100vh; width: 100vw">
        <van-nav-bar title="首页" />
        <van-row>
            <van-col span="24">
                <div class="bgImg"></div>
            </van-col>
        </van-row>
        <van-row>
            <van-grid :column-num="3" clickable :gutter="10" style="margin-top: 20px">
                <van-grid-item to="/mobile-estimatedData">
                    <div style="position: relative; height: 120px; width: 100%">
                        <img
                            src="../../assets/mobile-Page-Image/home_slices/z_459.png"
                            alt=""
                            style="width: 100%; height: 100%; position: absolute"
                        />
                        <span
                            style="
                                position: absolute;
                                bottom: 10px;
                                width: 100%;
                                text-align: center;
                                color: #999;
                            "
                        >
                            月预估数据
                        </span>
                    </div>
                </van-grid-item>
                <van-grid-item @click="callService">
                    <div style="position: relative; height: 120px; width: 100%">
                        <img
                            src="../../assets/mobile-Page-Image/home_slices/z_460.png"
                            alt=""
                            style="width: 100%; height: 100%; position: absolute"
                        />
                        <span
                            style="
                                position: absolute;
                                bottom: 10px;
                                width: 100%;
                                text-align: center;
                                color: #999;
                            "
                        >
                            联系服务专员
                        </span>
                    </div>
                </van-grid-item>
            </van-grid>
        </van-row>
        <van-tabbar route active-color="#B2568C" inactive-color="#999">
            <van-tabbar-item replace to="/mobile-home" icon="wap-home">
                <span>首页</span>
                <template #icon="props">
                    <img src="../../assets/mobile-Page-Image/home_slices/z_127.png" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/mobile-main" icon="user-o">
                <span>我的</span>
                <template #icon="props">
                    <img src="../../assets/mobile-Page-Image/home_slices/z_134.png" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import { Dialog } from 'vant'
import { Toast } from 'vant'
import apis from '@.mobile/api/apis'
import common from '@.mobile/plugin/axios/common'

export default {
    data() {
        return {
            phoneNum: ''
        }
    },
    mounted() {
        const user = common.currUser()
        if (user && user.qyfwzyid) {
            console.log(user.qyfwzyid)
            this.phoneNum = user.qyfwzyid
        }
    },
    methods: {
        callService() {
            let content = '您确认拨打' + this.phoneNum + '吗？'
            Dialog.confirm({
                title: '拨打电话',
                message: content
            }).then(action => {
                window.location.href = 'tel://' + this.phoneNum
            })
        },
        toMain() {
            this.$router.push('/mobile-main')
        },
        toEstimated() {
            this.$router.push('/mobile-estimatedData')
        }
    }
}
</script>
<style scoped>
.bgImg {
    background: url(../../assets/mobile-Page-Image/home_slices/mbz2.png) no-repeat;
    width: 100vw;
    height: 40vw;
    background-size: 100%;
}

::v-deep .van-grid-item__content {
    padding: 0;
    border-radius: 10px;
}
</style>