个人中心页面 重点 userInfo cardInfo addressList 等，第一次ajax获取，然后存vuex里面...

<template>
    <div>
        <scroller lock-x height="-1px">
            <div id="personalBox">
                <div class="userBox">
                    <flexbox class="back_set_title" :gutter="0">
                        <flexbox-item :span="6">
                            <div @click="backMall">
                                <icon slot="icon"  name="myBack" :scale="4"></icon>
                            </div>
                        </flexbox-item>
                        <flexbox-item :span="4">
                        </flexbox-item>
                        <flexbox-item :span="2">
                            <div @click="goToBindPhone()">
                                <icon slot="icon"  name="mySet" :scale="3"></icon>
                            </div>
                        </flexbox-item>
                    </flexbox>
                    <flexbox :gutter="0">
                        <flexbox-item :span="2">
                        </flexbox-item>
                        <flexbox-item :span="4">
                            <div>
                                <div class="wxHeadImg">
                                    <img :src="wxUserInfo.headimgurl" alt="">
                                </div>
                            </div>
                        </flexbox-item>
                        <flexbox-item :span="6">
                            <div>
                                <p class="font-color_white">{{wxUserInfo.phone}}</p>
                            </div>
                        </flexbox-item>
                    </flexbox>
                </div>
                <group>
                    <cell title="我的订单" value="查看全部订单" is-link @click.native="onItemClick(0)"></cell>
                </group>
                <div class="orderMsg">
                    <grid :cols="3">
                        <grid-item label="待付款"  @on-item-click="onItemClick(1)">
                            <icon slot="icon"  name="myPurse" :scale="3"></icon>
                        </grid-item>
                        <grid-item label="待取餐"  @on-item-click="onItemClick(2)">
                            <icon slot="icon"  name="myMeal" :scale="3"></icon>
                        </grid-item>
                        <grid-item label="待配送" @on-item-click="onItemClick(3)">
                            <icon slot="icon"  name="mySend" :scale="4"></icon>
                        </grid-item>
                    </grid>
                </div>
                <group>
                    <cell title="消费卡" is-link @click.native="accountManage">
                        <icon slot="icon"  name="cardPay" :scale="2" style="margin-top: 5px;"></icon>
                    </cell>
                </group>
                <group>
                    <cell title="地址管理" is-link @click.native="addressManage">
                        <icon slot="icon"  name="address" :scale="2"></icon>
                    </cell>
                </group>
            </div>
        </scroller>
    </div>
</template>

<script>
    import {XHeader,Flexbox,FlexboxItem,Cell,Group,Grid, GridItem,XButton,Scroller } from 'vux'
    import { mapGetters } from 'vuex'
    export default {
        components: {
            XHeader,Flexbox,FlexboxItem,Cell,Group, Grid, GridItem,XButton,Scroller
        },
        data () {
            return {
                phone:'',
                wxUserInfo:''
            }
        },
        computed:{
            ...mapGetters([
                "userInfo",
            ]),
        },
        created(){
            if(!this.userInfo){
                console.log(123)
                this.getUsenInfo()
            }else{
                this.wxUserInfo=this.userInfo
            }
        },
        methods:{
            getUsenInfo(){
                this.$http.get('/shop/api/get-user-info').then((response) => {
                    if(response.data.status){
                        this.wxUserInfo=response.data.data;
                        this.$store.commit('saveUserInfo',this.wxUserInfo);
                    }else{
                        this.$vux.toast.show({
                            text: response.data.message,
                            type:'cancel'
                        })
                    }
                }).catch((error)=>{
                    console.log(error)
                })
            },
            goToBindPhone(){
                if(_global.customerId){
                    return
                }
                this.$router.push({ path:'/binding'})
            },
            backMall(){
                this.$router.push({ path:'/'})
            },
            goToWait(){

            },
            onItemClick(index){
                this.$store.commit("saveItemIndex",index)
                this.$router.push({ path:'orderList'});
            },
            addressManage(){
                if(!_global.customerId){
                    this.$router.push({ path:'/binding'})
                    return
                }
                this.$router.push({ path:'addressList'});
            },
        },
    }
</script>
<style lang="less">
    #personalBox{
        .userBox{
            padding: 10px 10px 20px 10px;
            background: #F1633D;
            margin-bottom: 20px;
            .wxHeadImg{
                width: 80px;
                height: 80px;
                img{
                    width: 100%;
                    height: 100%;
                    border: 1px solid #F1633D;
                    border-radius: 50%;
                }
            }
            .font-color_white{
                color:white;
                font-weight: 600;
                font-size: 18px;
            }
        }
        .orderMsg{
            background: #fff;
        }
        .back_set_title{
            margin:0 10px;
        }
        .weui-cells{
            /*padding: 8px 0;*/
            font-size: 14px;
        }
    }
    .quit_login{
        position: fixed;
        z-index: 3;
        bottom: 0;
    }
</style>

 

转载于:https://www.cnblogs.com/MR-cui/p/8919657.html