caimei-applets-hehe/components/cm-module/orderDetails/orderButton.vue

<template name="button">
    <view class="button-template" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
        <!-- 底部按钮  -->
        <view class="button-content">
            <view class="btn btn-pay" v-if="btnState.isPay" @click.stop="btnConfirm('pay', order)">付款</view>
            <view class="btn btn-pay" v-if="btnState.isConfirm" @click.stop="btnConfirm('confirm', order)"
                >确认收货</view
            >
            <view class="btn btn-pay" v-if="btnState.isAgain" @click.stop="btnConfirm('again', order)">再次购买</view>
            <view class="btn btn-cancel" v-if="btnState.isCancel" @click.stop="btnConfirm('cancel', order)"
                >取消订单</view
            >
            <view class="btn btn-cancel" v-if="btnState.isDelete" @click.stop="btnConfirm('delete', order)"
                >删除订单</view
            >
            <view class="btn btn-cancel" v-if="btnState.isQuery" @click.stop="btnConfirm('query', order)"
                >查看物流</view
            >
        </view>
    </view>
</template>

<script>
export default {
    name: 'button',
    props: {
        status: {
            type: Number
        },
        order: {
            type: Object
        },
        shareCode: {
            type: String
        }
    },
    watch: {
        status: {
            handler: function(val) {
                this.initData(val)
            },
            deep: true //对象内部的属性监听，也叫深度监听
        }
    },
    data() {
        return {
            btnState: this.initStatus(),
            isIphoneX: this.$store.getters.isIphoneX,
            mapStateArr: [
                { label: 'isQuery', val: [4, 5, 12, 13, 33, 22, 23, 32, 77], status: true },
                { label: 'isDelete', val: [6], status: true },
                { label: 'isCancel', val: [0, 111], status: true },
                { label: 'isConfirm', val: [33], status: true },
                { label: 'isAgain', val: [33], status: true },
                { label: 'isPay', val: [11, 12, 13, 21, 22, 23, 111], status: true }
            ]
        }
    },
    created() {
        this.initData(this.status)
    },
    computed: {},
    methods: {
        initData(resVal) {
            /**
             * @分享按钮统一显示
             * @按钮根据状态显示
             * @(4、5、7、12、22、23、32)显示[查看物流]按钮,其他隐藏
             * @(6)显示[删除订单],其他隐藏
             * @(0、111)显示[取消订单],其他隐藏
             * @(21,31)只显示分享
             * @(13,33)显示[确认收货]和[查看物流]
             */
            this.btnState = this.initStatus()
            this.mapStateArr.forEach(el => {
                el.val.forEach(value => {
                    if (resVal === value) {
                        this.btnState[el.label] = el.status
                    }
                })
            })
        },
        initStatus() {
            let btnState = {
                isQuery: false,
                isDelete: false,
                isCancel: false,
                isConfirm: false,
                isAgain: false
            }
            return btnState
        },
        btnConfirm(type, order) {
            let data = {
                type: type,
                orderId: order.orderId,
                order: order
            }
            this.$emit('buttonConfirm', data)
        }
    }
}
</script>

<style lang="scss">
.button-template {
    width: 100%;
    height: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #ffffff;
    .button-content {
        padding: 0 24rpx;
        height: auto;
        float: right;
        position: relative;
        .share-code {
            width: 200rpx;
            height: 64rpx;
            line-height: 64rpx;
            color: #2a45ff;
            text-align: left;
            position: absolute;
            font-size: $font-size-28;
            font-weight: bold;
            left: 24rpx;
            top: 24rpx;
        }
        .btn {
            width: 160rpx;
            height: 64rpx;
            margin: 22rpx 22rpx 22rpx 0;
            line-height: 64rpx;
            font-size: $font-size-26;
            color: #333333;
            text-align: center;
            float: right;
            border: 2rpx solid #333333;
            border-radius: 34rpx;
            &.btn-pay {
                border-color: $color-system;
                color: $color-system;
            }
            &.btn-cancel {
                text-align: center;
            }
        }
    }
}
</style>