caimei-applets-caimei/pages/seller/order/components/cm-list-button.vue

<template name="button">
    <view class="button-template">
        <!-- 底部按钮 -->
        <view class="button-content">
            <view class="btn btn-cancel" v-if="btnState.isCancel" @click.stop="btnConfirm('cancel', shopOrderId)">取消订单
            </view>
            <view class="btn btn-cancel" v-if="secondHandOrderFlag != 1 && !rechargeGoods"
                @click.stop="btnConfirm('again', shopOrderId)">再来一单</view>
            <!-- <view class="btn btn-cancel" v-if="btnState.isDelete" @click.stop="btnConfirm('delete',orderId)">删除订单</view> -->
            <template>
                <view class="btn btn-cancel" v-if="btnState.isPay && order.onlinePay === 1" @click.stop="onSharePay(shopOrderId, userId)">
                    分享支付</view>
                <view class="btn btn-cancel" v-else @click.stop="onShareCode(shopOrderId, userId, 2)">分享订单</view>
            </template>
            <view class="btn btn-query" v-if="btnState.isQuery && order.secondHandOrderFlag != 1"
                @click.stop="btnConfirm('query', shopOrderId)">查看物流</view>
            <!-- 			<view class="btn btn-color" v-if="btnState.isConfirm" @click.stop="btnConfirm('confirm', shopOrderId)"
				>确认订单</view
			> -->
        </view>
    </view>
</template>

<script>
    import orderBtnMixins from '../mixins/orderBtnMixins.js'
    export default {
        mixins: [orderBtnMixins],
        name: 'button',
        props: {
            status: {
                type: Number
            },
            order: {
                type: Object
            },
            shopOrderId: {
                type: Number
            },
            userId: {
                type: Number
            },
            rechargeGoods: {
                type: Boolean
            },
            serviceProviderId: {
                type: Number
            },
            secondHandOrderFlag: {
                type: String
            }
        },
        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: [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 = {
                    isDelete: false,
                    isCancel: false,
                    isConfirm: false,
                    isShare: true
                }
                return btnState
            },
            getShareCode(code) {
                this.shareCode = code
            },
            // 分享支付
            onSharePay(shopOrderId) {
                this.getPayOrderInfo(shopOrderId)
            },
            onShareCode(shopOrderId, userId, type) {
                if (this.order.onlinePay === 2) {
                    this.$util.modal(
                        '提示',
                        '本订单不能进行线上支付，请让客户选择线下转账方式付款',
                        '继续分享',
                        '知道了',
                        true,
                        () => {
                            this.$parent.isShareModal = true
                            this.$parent.handleShopOrderId = shopOrderId
                            this.$parent.btnClubUserId = userId
                            this.$parent.isShareType = type
                            this.$emit('shareConfirm')
                        }
                    )
                } else {
                    this.$parent.isShareModal = true
                    this.$parent.handleShopOrderId = shopOrderId
                    this.$parent.btnClubUserId = userId
                    this.$parent.isShareType = type
                    this.$emit('shareConfirm')
                }
            },
            btnConfirm(type, shopOrderId) {
                let data = {
                    type: type,
                    shopOrderId: shopOrderId
                }
                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;
            margin: 20rpx 0;

            .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;
                line-height: 64rpx;
                font-size: $font-size-26;
                color: #ffffff;
                text-align: center;
                border-radius: 34rpx;
                // float: right;
                display: inline-block;
            }

            .btn-color {
                background: $btn-confirm;
                // margin: 22rpx 0 22rpx 22rpx;
            }

            .btn-cancel {
                border: 2rpx solid #999999;
                background: #ffffff;
                color: #666666;
                // float: left;
                margin-left: 10rpx;
            }

            .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: linear-gradient(315deg, rgba(231, 0, 0, 1) 0%, rgba(255, 104, 1, 1) 100%);
            }

            .btn-share {
                background: linear-gradient(315deg, rgba(0, 212, 150, 1) 0%, rgba(126, 243, 174, 1) 100%);
                margin-right: 0;
                position: relative;

                .tips {
                    width: 160rpx;
                    height: 34rpx;
                    padding: 10rpx 10rpx;
                    background: #ff5b00;
                    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: #ff5b00;
                        position: absolute;
                        bottom: -8rpx;
                        left: 30rpx;
                        z-index: -1;
                        transform: rotate(45deg);
                    }
                }
            }
        }
    }
</style>