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

<template name="button">
    <view class="button-template" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
        <!-- 底部按钮 -->
        <view class="button-content">
            <view class="btn btn-cancel" v-if="btnState.isCancel" @click.stop="btnConfirm('cancel', order)">取消订单</view>
            <view class="btn btn-cancel" v-if="secondHandOrderFlag != 1 && !rechargeGoods"
                @click.stop="btnConfirm('again', order)">再来一单</view>
            <!-- <view class="btn btn-cancel" v-if="btnState.isDelete"  @click.stop="btnConfirm('delete',order)">删除订单</view> -->
            <template>
                <view class="btn btn-share" v-if="btnState.isPay && order.onlinePay === 1"
                    @click.stop="onSharePay(order.shopOrderId)">
                    <view class="tips" v-if="shareCode">分享码：{{ shareCode }}</view> 分享支付
                </view>
                <view class="btn btn-share" v-else @click.stop="onShareCode(2)">
                    <view class="tips" v-if="shareCode">分享码：{{ shareCode }}</view> 分享订单
                </view>
            </template>
            <!-- 			<view class="btn btn-color" v-if="btnState.isConfirm" @click.stop="btnConfirm('confirm', order)"
				>确认订单</view
			> -->
            <view class="btn btn-query" v-if="btnState.isQuery && order.secondHandOrderFlag != 1"
                @click.stop="btnConfirm('query', order)">查看物流</view>
            <!-- 			<view
				class="btn btn-color"
				v-if="btnState.isPay && ableUserMoney > 0 && !rechargeGoods"
				@click.stop="btnConfirm('balance', order)"
				>余额抵扣</view>
			 -->
        </view>
    </view>
</template>

<script>
    import orderBtnMixins from '../mixins/orderBtnMixins.js'
    export default {
        mixins: [orderBtnMixins],
        name: 'button',
        props: {
            status: {
                type: Number
            },
            order: {
                type: Object
            },
            ableUserMoney: {
                type: Number
            },
            rechargeGoods: {
                type: Boolean
            },
            shareCode: {
                type: String
            },
            secondHandOrderFlag: {
                type: String
            }
        },
        watch: {
            status: {
                handler: function(val) {
                    this.initData(val)
                },
                deep: true //对象内部的属性监听，也叫深度监听
            }
        },
        data() {
            return {
                btnState: this.initStatus(),
                isIphoneX: this.$store.state.isIphoneX,
                invoiceStatus: false,
                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() {
            console.log(this.rechargeGoods)
            this.initData(this.status)
        },
        computed: {},
        methods: {
            initData(resVal) {
                /**
                 * @分享按钮统一显示
                 * @按钮根据状态显示
                 * @(2,3,5,6,12,13,22,23,32,33)显示[查看物流]按钮,其他隐藏
                 * @(4)显示[删除订单],其他隐藏
                 * @(0、11)显示[取消订单],其他隐藏
                 * @(13,33)显示[确认收货]和[查看物流]
                 */
                this.btnState = this.initStatus()
                this.mapStateArr.forEach(el => {
                    el.val.forEach(value => {
                        if (resVal === value) {
                            this.btnState[el.label] = el.status
                            //console.log(this.btnState[el.label]);
                        }
                    })
                })
            },
            initStatus() {
                let btnState = {
                    isQuery: false,
                    isDelete: false,
                    isCancel: false,
                    isConfirm: false,
                    isPay: false
                }
                return btnState
            },
            getShareCode(code) {
                this.shareCode = code
            },
            // 分享支付
            onSharePay(shopOrderId) {
                this.getPayOrderInfo(shopOrderId)
            },
            onShareCode(type) {
                if (this.order.onlinePay === 2) {
                    this.$util.modal(
                        '提示',
                        '本订单不能进行线上支付，请让客户选择线下转账方式付款',
                        '继续分享',
                        '知道了',
                        true,
                        () => {
                            this.$parent.isShareModal = true
                        }
                    )
                } else {
                    this.$parent.isShareModal = true
                    this.$parent.isShareType = type
                }
            },
            btnConfirm(type, order) {
                let data = {
                    type: type,
                    shopOrderId: order.shopOrderId,
                    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;
            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;
                // margin:22rpx;
                line-height: 64rpx;
                font-size: $font-size-26;
                color: #ffffff;
                text-align: center;
                border-radius: 34rpx;
                float: right;
            }

            .btn-color {
                background: $btn-confirm;
            }

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

            .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: #ffffff;
                color: #666666;
                float: left;
                // margin: 22rpx 0;
                margin-left: 10rpx;
                border: 2rpx solid #999999;
                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: -69rpx;

                    &:before {
                        content: '';
                        width: 25rpx;
                        height: 25rpx;
                        background: #ff5b00;
                        position: absolute;
                        bottom: -8rpx;
                        left: 30rpx;
                        z-index: -1;
                        transform: rotate(45deg);
                    }
                }
            }
        }
    }
</style>