caimei-applets-hehe/components/cm-module/cm-order-control-nav/cm-order-control-nav.vue

<template>
    <view class="cm-order-control-nav">
        <view class="btn type2" v-if="btnState.share" @click.stop="handleClick('fightDetail')">拼团详情</view>
        <view class="btn type1" v-if="btnState.share" @click.stop="handleClick('share')">邀好友拼团</view>
        <view class="btn type2" v-if="btnState.cancel" @click.stop="handleClick('cancel')">取消订单</view>
        <view class="btn type2" v-if="btnState.delete" @click.stop="handleClick('delete')">删除订单</view>
        <view class="btn type2" v-if="btnState.query" @click.stop="handleClick('query')">查看物流</view>
        <view class="btn type1" v-if="btnState.pay" @click.stop="handleClick('pay')">付款</view>
        <view class="btn type1" v-if="btnState.again" @click.stop="handleClick('again')">再次购买</view>
        <!-- <view class="btn type1" @click="handleClick('again')">再次购买</view> -->
        <view class="btn type2" v-if="btnState.confirm" @click.stop="handleClick('confirm')">确认收货</view>
    </view>
</template>

<script>
export default {
    props: {
        orderInfo: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            mapState: {
                fightDetail:[],
                share: [],
                query: [4, 5, 12, 13, 33, 22, 23, 32, 77],
                delete: [6],
                cancel: [0, 111],
                confirm: [33],
                again: [33],
                pay: [11, 12, 13, 21, 22, 23, 111]
            },
            buttonCount: 0
        }
    },
    computed: {
        btnState() {
            return this.initData()
        }
    },
    watch:{
        buttonCount(nVal){
            this.$emit('change', {
                count: nVal
            })
        }
    },
    methods: {
        /**
         * @分享按钮统一显示
         * @按钮根据状态显示
         * @(4、5、7、12、22、23、32)显示[查看物流]按钮,其他隐藏
         * @(6)显示[删除订单],其他隐藏
         * @(0、111)显示[取消订单],其他隐藏
         * @(21,31)只显示分享
         * @(13,33)显示[确认收货]和[查看物流]
         */
        initData(resVal) {
            const btnState = {}
            const orderStatus = parseInt(this.orderInfo.status)

            for (let key in this.mapState) {
                btnState[key] = this.mapState[key].includes(orderStatus)
                if(btnState[key]) {
                    this.buttonCount ++
                }
            }
            return btnState
        },
        handleClick(type) {
            this.$emit('confirm', { type, order: this.orderInfo })
        }
    }
}
</script>

<style lang="scss" scoped>
.cm-order-control-nav {
    padding: 0 24rpx;
    text-align: right;

    .btn {
        display: inline-block;
        width: 160rpx;
        height: 56rpx;
        border-radius: 32rpx;
        margin-left: 24rpx;
        font-size: 26rpx;
        box-sizing: border-box;
        text-align: center;
        line-height: 54rpx;

        &.type1 {
            border: 1rpx solid #ff457b;
            color: #ff457b;
        }

        &.type2 {
            border: 1rpx solid #333;
            color: #333;
        }
    }
}
</style>