1hjz-h5/src/view/order-list.vue

<template>
	<div class="order-list-whole">
		<back-header path="/mall/web/owner">
			我的订单
		</back-header>
		<div class="state-bar">
			<div class="state-item" @click="active=''" :class="{active:active===''}">全部</div>
			<div class="state-item" @click="active=0" :class="{active:active===0}">待支付</div>
			<div class="state-item" @click="active=10" :class="{active:active==10}">已支付</div>
			<div class="state-item" @click="active=20" :class="{active:active==20}">退款中</div>
			<div class="state-item" @click="active=21" :class="{active:active==21}">已退款</div>
		</div>
		<order-item v-for="item in list" :id="item.orderNo" :pay="item.payPrice/100" :totalPrice="item.totalPrice/100" :name="item.goodsName" :desc="item.shortDesc" :address="item.merchantName" :status="item.status" :img="imghost+item.goodsImgUrl" :label="item.smallLabel"></order-item>
	</div>
</template>
<script>
import orderItem from "../components/order-item.vue";
import backHeader from "../components/back-header.vue";
import orderApi from "../models/order-model.js";
export default {
    data() {
        return {
            active: "",
            list: []
        };
    },
    components: {
        "back-header": backHeader,
        "order-item": orderItem
    },
    watch: {
        active(val) {
            this.getData();
        }
    },
    methods: {
        getData() {
            this.$vux.loading.show({
                text: "Loading"
            });
            orderApi
                .getList({
                    status: this.active
                })
                .then(res => {
                    if (res && res.code == 0) {
                        this.list = res.response.slice();
                        if (this.list.length > 0) {
                            this.wechat(this.list[0].merchantNo);
                        }
                    } else if (res.code == 666) {
                        this.$vux.toast.text("您还没登录，请先登录!", "middle");
                        setTimeout(function() {
                            window.location.href = "/mall/web/user/login";
                        }, 2000);
                    } else {
                        if (
                            res.msg == "" ||
                            res.msg == undefined ||
                            res.msg == null
                        ) {
                            res.msg = "操作失败，请刷新重试";
                        }
                        this.$vux.toast.text(res.msg, "middle");
                    }
                    this.$vux.loading.hide();
                });
        },
        wechat(merchantNo) {
            this.wxShare({
                merchantNo: merchantNo,
                source: 0,
                url: encodeURIComponent(location.href),
                shareUrl: encodeURIComponent(
                    "http://" + location.host + "/v2/home"
                )
            });
        }
    },
    mounted() {
        this.getData();
    }
};
</script>
<style lang="scss" scoped>
.order-list-whole {
}
.state-bar {
    width: 100%;
    height: 0.8rem;
    // box-sizing: border-box;
    border-top: 0.01rem solid rgba(238, 238, 238, 1);
    background-color: white;
    display: flex;
    align-items: center;
    padding: 0rem 0.46rem 0 0.46rem;
    box-sizing: border-box;
    justify-content: space-between;
    margin-bottom: 0.2rem;
    .state-item {
        line-height: 0.8rem;
        font-size: 0.32rem;
        font-family: PingFang-SC-Medium;
        height: 100%;
        font-weight: 500;
        padding: 0 0.07rem;
    }
    .active {
        padding-top: 0.03rem;
        border-bottom: 0.03rem solid #00ba86;
        color: rgba(0, 186, 134, 1);
    }
}
</style>