caimei-applets-mcare/pages/user/order/components/details/orderListButton.vue

<template name="button">
    <view class="button-template">
        <!-- 底部按钮 -->
        <view class="button-content">
            <view class="btn btn-pay" v-if="btnState.isPay" @click.stop="btnConfirm('pay', order)">付款</view>
            <view class="btn btn-cancel" v-if="order.checkFlag === 2" @click.stop="btnConfirm('upload', order)">
                上传凭证
            </view>
            <!-- <view class="btn btn-confirm" v-if="btnState.isConfirmation" @click.stop="btnConfirm('confirmation',order)">确认订单</view> -->
            <view class="btn btn-share" @click.stop="onShareCode(order.shopOrderId)">分享订单</view>
            <view class="btn btn-cancel" v-if="btnState.isCancel" @click.stop="btnConfirm('cancel', order)">
                取消订单
            </view>
            <!-- <view class="btn btn-delete" v-if="btnState.isDelete" @click.stop="btnConfirm('delete',order)">删除订单</view> -->
            <view class="btn btn-query" v-if="btnState.isQuery" @click.stop="btnConfirm('query', order)">查看物流</view>
            <view class="btn btn-firm" v-if="btnState.isConfirm" @click.stop="btnConfirm('confirm', order)">
                确认收货
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'button',
    props: {
        status: {
            type: Number
        },
        order: {
            type: Object
        }
    },
    data() {
        return {
            isShare: true,
            shareCode: '',
            btnState: this.initStatus(),
            mapStateArr: [
                { label: 'isQuery', val: [2, 3, 5, 6, 12, 13, 22, 23, 32, 33], status: true },
                { label: 'isDelete', val: [4], status: true },
                { label: 'isCancel', val: [0, 11], status: true },
                { label: 'isConfirm', val: [33], status: true },
                { label: 'isConfirmation', val: [0], status: true },
                { label: 'isPay', val: [11, 12, 13, 21, 22, 23], status: true }
            ]
        }
    },
    created() {
        this.initData(this.status)
    },
    computed: {},
    watch: {
        status: {
            handler: function(val) {
                this.initData(val)
            },
            deep: true //对象内部的属性监听，也叫深度监听
        }
    },
    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,
                isShare: true,
                isConfirmation: false
            }
            return btnState
        },
        getShareCode(code) {
            this.shareCode = code
        },
        onShareCode(orderId) {
            this.$parent.isShareModal = true
            this.$emit('shareConfirm', orderId)
        },
        btnConfirm(type, order) {
            let data = {
                type: type,
                orderId: order.shopOrderId,
                order: order
            }
            this.$emit('buttonConfirm', data)
        }
    }
}
</script>

<style lang="scss">
.button-template {
    width: 100%;
    height: auto;
    float: left;
    background: #ffffff;
    .button-content {
        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: 150rpx;
            height: 64rpx;
            margin: 22rpx 0 20rpx 20rpx;
            line-height: 64rpx;
            font-size: $font-size-26;
            color: #999999;
            text-align: center;
            float: right;
            border-radius: 34rpx;
            border: 2rpx solid #999999;
            &.btn-payment {
                line-height: 38rpx;
                font-size: 24rpx;
                background: #f9a94b;
                color: #fff;
                border: 2rpx solid #f9a94b;
                text {
                    display: block;
                    line-height: 15rpx;
                }
            }
        }
        .btn-color {
            background: $btn-confirm;
            // margin: 22rpx 0 22rpx 22rpx;
        }
        .btn-cancel {
            // background:#FFFFFF;
            // color: #999999;
            // float: left;
            // margin: 22rpx 0;
            text-align: center;
        }
        // .btn-delete{
        // 	background:linear-gradient(315deg,rgba(255,163,3,1) 0%,rgba(255,53,1,1) 100%);
        // }
        // .btn-query{
        // 	background:linear-gradient(135deg,rgba(255,212,129,1) 0%,rgba(198,129,0,1) 100%);
        // }
        .btn-confirm {
            background: #ff7a51;
            border-color: #ff7a51;
            color: #ffffff;
        }
        .btn-pay {
            background: $btn-confirm;
            margin-right: 0;
            border: 2rpx solid $btn-confirm;
            color: #fff;
        }
        .btn-firm {
            position: relative;
            .tips {
                width: 74rpx;
                height: 32rpx;
                line-height: 32rpx;
                padding: 0 7rpx;
                border-radius: 16rpx;
                background-color: #ffe6dc;
                color: $color-system;
                text-align: center;
                font-size: $font-size-20;
                position: absolute;
                right: 0;
                top: -40rpx;
                z-index: 90;
                .line {
                    display: block;
                    width: 20rpx;
                    height: 20rpx;
                    background-color: #ffe6dc;
                    position: relative;
                    bottom: 18rpx;
                    left: 15rpx;
                    z-index: -1;
                    transform: rotate(45deg);
                }
            }
        }
        .btn-share {
            // background:linear-gradient(315deg,rgba(0,212,150,1) 0%,rgba(126,243,174,1) 100%);
            position: relative;
            .tips {
                width: 160rpx;
                height: 34rpx;
                padding: 10rpx 10rpx;
                background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgba(87, 87, 87, 1) 100%);
                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
                border-radius: 8rpx;
                position: absolute;
                color: #ffffff;
                line-height: 34rpx;
                font-size: $font-size-24;
                text-align: left;
                right: 0;
                top: -65rpx;
                &:before {
                    content: '';
                    width: 25rpx;
                    height: 25rpx;
                    background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgba(87, 87, 87, 1) 100%);
                    position: absolute;
                    bottom: -8rpx;
                    right: 30rpx;
                    z-index: -1;
                    transform: rotate(45deg);
                }
            }
        }
    }
}
</style>