index.vue

<template>
    <section class="user-index">
        <div class="header">
            <div class="banner row">
                <template v-if="userInfo">
                    <img v-if="userInfo.user_info.user_head" :src="userInfo.user_info.user_head" alt="猎芯网">
                    <img v-else src="https://static.ichunt.com/dist/res/home/images/headimg/boy9.png" alt="猎芯网">
                    <div class="usernamelk">{{userInfo.user_info.user_name||userInfo.user_info.mobile}}</div>
                    <a href="/h5/view/#/settings"><i class="icon iconfont" >&#xe649;</i></a>
                    <a  class="kfgh" @click="kfgo"><i class="icon iconfont" >&#xe640;</i><span></span></a>
                </template>
            </div>
            <div class="link-con clr">
                <a class="item fl" href="/h5/view/#/wallet">
                    <span>￥{{walletInfoData.wallet_usable}}</span>
                    <font>我的钱包</font>
                </a>
                <a class="item fl" href="/h5/view/#/pointmall">
                    <span>{{getUserCurrentPoint}}</span>
                    <font>我的积分</font>
                </a>
                <a class="item fl" href="/h5/view/#/history">
                    <span>{{lists.length}}</span>
                    <font>历史记录</font>
                </a>
                <a class="item fl"  href="/h5/view/#/userCoupon">
                    <span>{{counts['-1']}}</span>
                    <font>优惠券</font>
                </a>
            </div>
            <div class="orders-con">
                <div class="title-o clr">我的订单 <a href="/h5/view/#/userOrder" class="fr">查看全部<i class="icon iconfont" >&#xe6d5;</i></a></div>
                <div class="o-group clr">
                    <a class="item fl" href="/h5/view/#/userOrder?status=2">
                        <span v-if="orderCounts['2']">{{orderCounts['2']}}</span>
                        <img src="../../assets/images/user/q1.png" alt="">
                        <p>待付款</p>
                    </a>
                    <a class="item fl" href="/h5/view/#/userOrder?status=3">
                        <span v-if="orderCounts['3']">{{orderCounts['3']}}</span>
                        <img src="../../assets/images/user/q2.png" alt="">
                        <p>待付尾款</p>
                    </a>
                    <a class="item fl" href="/h5/view/#/userOrder?status=4">
                        <span v-if="orderCounts['4']">{{orderCounts['4']}}</span>
                        <img src="../../assets/images/user/q3.png" alt="">
                        <p>待发货</p>
                    </a>
                    <a class="item fl" href="/h5/view/#/userOrder?status=7">
                        <span v-if="orderCounts['7']">{{orderCounts['7']}}</span>
                        <img src="../../assets/images/user/q4.png" alt="">
                        <p>部分发货</p>
                    </a>
                    <a class="item fl" href="/h5/view/#/userOrder?status=8">
                        <span v-if="orderCounts['8']">{{orderCounts['8']}}</span>
                        <img src="../../assets/images/user/q5.png" alt="">
                        <p>待收货</p>
                    </a>
                </div>
            </div>
        </div>
        <div class="wl-box" v-if="shiplists">
            <p v-if="shiplists.order_sn">订单号:{{shiplists.order_sn}}</p>
            <p v-if="shiplists.shipping"> {{shiplists.shipping.AcceptStation}}</p>
        </div>
        <div class="wl-box nowl" v-else >
            <a href="" href="/s/">
                <img src="../../assets/images/user/01.png" alt="">
                当前无待收货订单,快去找料下单吧~
            </a>
        </div>
        <div class="bottom" ref="bottom">
            <div class="b-group clr">
                
                <a class="item fl" href="/h5/view/#/inqueryList">
                    <i class="icon iconfont" >&#xe64b;</i>
                    <p>我的询价单</p>
                </a>
                <a class="item fl" href="/h5/view/#/inquiry">
                    <i class="icon iconfont" >&#xe647;</i>
                    <p>快速找料</p>
                </a>
                <a class="item fl" href="/h5/view/#/message">
                    <i class="icon iconfont" >&#xe64c;</i>
                    <p>我的消息</p>
                </a>
                <a class="item fl" href="/h5/view/#/shiplist">
                    <i class="icon iconfont" >&#xe648;</i>
                    <p>物流查询</p>
                </a>
            </div>
        </div>
        <Navigator :typeVal="typeVal"></Navigator>
        <SideBar :carshow="carshow" :isWindow="isWindow" :popType="popType"></SideBar>
        <van-loading type="spinner" color="#000" class="loading-background" v-if="loading"/>
    </section>
</template>

<script>
    import Vue from 'vue';
    import {mapState} from 'vuex'
    import { Loading,Dialog } from 'vant';
    import Navigator from '@/views/common/Navigator.vue';
    import SideBar from '@/views/common/SideBar.vue';
    import {productionUrlApi} from '../../api/index';
    Vue.use(Loading).use(Dialog);
    export default {
        name: 'userIndex',
        data() {
            return {
                isWindow:true,
                carshow:false,
                popType:2,
                typeVal:5
           
            }
        },
        computed: {
            ...mapState({
                loading: state => state.user.loading,
                userInfo: state => state.user.userInfo,
                walletInfoData: state => state.wallet.walletInfoData,
                getUserCurrentPoint: state => state.pointmall.getUserCurrentPoint,
                lists: state => state.history.lists,
                counts: state => state.coupon.counts,
                shiplists: state => state.user.shiplists,
                orderCounts: state => state.user.orderCounts

            })
        },
        watch: {
        
           
        },
        created() {
            this.getData();
           
        },
        methods: {
            getData(){
                
                //基本信息
                this.$store.dispatch({
                    type: 'getUserType'
                })
                //钱包信息
                this.$store.dispatch({
                    type: 'getWalletInfo'
                })
                //获取积分
                this.$store.dispatch({
                    type: 'getUserCurrentPoint'
                })
                //获取历史记录
                this.$store.dispatch({
                    type: 'getHistory'
                })
                //优惠券数量
                this.$store.dispatch({
                    type: 'ucouponCount'
                })
                //获取最新物流
                this.$store.dispatch({
                    type: 'lastshipping'
                })
                
                //订单数量
                this.$store.dispatch({
                    type: 'orderCount'
                })

            },
            kfgo(){
                this.$nextTick(()=>{
                    document.getElementById("kubtn2020").click()
                   
                })
                
            }
        },
        components: {
            Navigator,
            SideBar
        }
    }
</script>


<style scoped>
    @import "../../assets/css/user/index.min.css";
</style>