wapshop/src/components/main/mine/mine.vue

<template>
    <div class="mine">
        <div v-document_title>熊猫美妆</div>
        <group>
            <cell :title="userMsg.userName" :link="loginPath" style="padding: 30px 40px;">
                <img slot="icon" v-bind:src="userMsg.userImg"
                     style="width: 122px; height: 118px; vertical-align: middle; margin-right: 32px;border-radius: 10px;"
                     alt="logo"/>
            </cell>
        </group>
        <group>
            <cell title="我的订单" value="查看全部订单" is-link link="/order_tabs/全部/0/0" style="padding: 50px 40px;"></cell>
            <cell class="order_classify">
                <flexbox>
                    <flexbox-item>
                        <router-link :to="{ path: '/order_tabs/待付款/1/10'}">
                            <div class="order_classify_icon order_classify_icon_1"></div>
                            <p class="item_title">待付款</p>
                        </router-link>
                    </flexbox-item>
                    <flexbox-item>
                        <router-link :to="{ path: '/order_tabs/待发货/2/20'}">
                            <div class="order_classify_icon order_classify_icon_2"></div>
                            <p class="item_title">待发货</p>
                        </router-link>
                    </flexbox-item>
                    </flexbox-item>
                    <flexbox-item>
                        <router-link :to="{ path: '/order_tabs/待收货/3/30'}">
                            <div class="order_classify_icon order_classify_icon_3">
                            </div>
                            <p class="item_title">待收货</p>
                        </router-link>
                    </flexbox-item>
                    </flexbox-item>
                    <flexbox-item>
                        <router-link :to="{ path: '/order_tabs/已收货/4/40'}">
                            <div class="order_classify_icon order_classify_icon_4"></div>
                            <p class="item_title">已收货</p>
                        </router-link>
                    </flexbox-item>
                    <flexbox-item>
                        <div @click="refoundClick" class="order_classify_icon order_classify_icon_5"></div>
                        <p class="item_title">退款/售后</p>
                    </flexbox-item>
                </flexbox>
            </cell>
        </group>
        <group>
            <cell title="熊猫红包" is-link :border-intent="false" @click.native="showBonus = !showBonus">
                <img slot="icon" src="../../../assets/bonus_icon.png"
                     style="width: 32px;vertical-align: text-bottom;margin-right: 25px;"/>
            </cell>
            <div class="bonus_slide" v-for="bonus in userbonus" :class="showBonus?'animate':''">
                <div style="overflow: hidden;">
                    <span class="bonus_label">{{bonus.rate+'%'}}</span>
                    <span class="bonus_value">{{bonus.total}}元</span>
                </div>
                <br/>
            </div>
            <cell title="收货地址" is-link link="/address/list">
                <img slot="icon" src="../../../assets/address_icon.png"
                     style="width: 34px;vertical-align: text-bottom;margin-right: 25px;"/>
            </cell>
            <cell title="我的F码" is-link link="/fcodelist">
                <img slot="icon" src="../../../assets/fcode_icon.png"
                     style="width: 34px;vertical-align: text-bottom;margin-right: 25px;"/>
            </cell>
            <cell title="帮助中心" is-link link="http://p.lrlz.com/hfive/feed_back/question_answer.html">
                <img slot="icon" src="../../../assets/help_icon.png"
                     style="width: 34px;vertical-align: text-bottom;margin-right: 25px;"/>
            </cell>
        </group>
    </div>
</template>

<script>
    import {Group, Cell, Flexbox, FlexboxItem, Divider} from 'vux'
    import DefaultImg from '../../../assets/mine_logo_icon.png'
    import WechatShare from '../../../wechat/WechatShare'
    export default {
        created(){
            let shareMsg = {
                title: '熊猫美妆商城',
                desc: '熊猫美妆极速商城',
                link: "http://" + window.location.host + '/mobile/index.html?#',
                img_url: 'http://a.lrlz.com/data/upload/shop/store/goods/6/6_05342032688036066_1280.jpg'
            };
            let WxShare = new WechatShare(shareMsg);
            if (this.$store.state.isLogIn) {
                this.userName = this.$store.state.user['name'];
                this.userImg = this.$store.state.user['image'];
            }
            else {
                this.userName = '登录';
                this.userImg = this.DefaultImg;
            }
        },
        mounted(){
            this.$store.commit('updateLoadingStatus', {isLoading: false});
        },
        components: {
            Group,
            Cell,
            Flexbox,
            FlexboxItem,
            Divider
        },
        data(){
            return {
                DefaultImg: DefaultImg,
                showContent002: true,
                user_bonus: this.$store.state.user_bonus,
                showBonus: false
            }
        },
        methods: {
            refoundClick (event){
                this.$vux.toast.show({
                    type: 'text',
                    text: "请到熊猫美妆APP操作!",
                    position: 'middle'
                });
            }
        },
        computed: {
            userMsg () {
                let user = {};
                if (this.$store.state.isLogIn) {
                    user.userName = this.$store.state.user['name'];
                    user.userImg = this.$store.state.user['image'];
                }
                else {
                    user.userName = '登录';
                    user.userImg = this.DefaultImg;
                }
                return user;
            },
            loginPath (){
                let path = '';
                if (!this.$store.state.isLogIn) {
                    path = '/login';
                }
                return path;
            },
            userbonus(){
                return this.$store.state.user_bonus;
            }
        }
    }
</script>

<style>
    .bonus_label {
        float: left;
        height: 50px;
        line-height: 50px;
        margin-left: 20px;
    }

    .bonus_value {
        float: right;
        line-height: 30px;
        margin-right: 20px;
        color: #EB4E4F;
    }

    .bonus_slide {
        padding: 0 20px;
        overflow: hidden;
        max-height: 0;
        transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
    }

    .animate {
        max-height: 9999px;
        transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
        transition-delay: 0s;
    }

    .mine {
        background: #f9f9f9;
    }

    .mine .weui-cells {
        font-size: 30px;
    }

    .mine .shop_state {
        position: absolute;
    }

    .mine .order_classify_icon {
        width: 100%;
        height: 40px;
    }

    .mine .order_classify_icon img {
        width: 40%;
        margin: 0 auto;
    }

    .mine .vux-flexbox-item p {
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
        font-size: 20px;
        margin-top: 10px;
        height: 30px;
        line-height: 30px;
    }

    .order_classify .weui-cell__ft {
        width: 100%;
    }

    .order_classify_icon_1 {
        background: url("../../../assets/payments_due_icon.png") no-repeat center;
        background-size: 30%;
    }

    .order_classify_icon_2 {
        background: url("../../../assets/shipping_term_icon.png") no-repeat center;
        background-size: 30%;
    }

    .order_classify_icon_3 {
        background: url("../../../assets/goods_receipt_icon.png") no-repeat center;
        background-size: 30%;
    }

    .order_classify_icon_4 {
        background: url("../../../assets/evaluated_icon.png") no-repeat center;
        background-size: 28%;
    }

    .order_classify_icon_5 {
        background: url("../../../assets/refund_terms_icon.png") no-repeat center;
        background-size: 30%;
    }
</style>