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

<template name="information">
    <view class="information-template">
        <!-- 订单信息 -->
        <view class="information-content">
            <view class="information-view title">
                <view class="view-num">
                    <view class="bage-text">
                        订单编号：<label class="label">{{ orderData.orderNo ? orderData.orderNo : '' }}</label>
                        <text class="clipboard" @click="clipboard(orderData.orderNo)">复制</text>
                    </view>
                </view>
            </view>
            <view class="information-view title">
                <view class="view-num">
                    <text>订单总额：</text>
                    <label class="label">
                        ￥{{ orderData.payTotalFee ? orderData.payTotalFee : '' | NumFormat }}
                    </label>
                </view>
            </view>
            <view class="information-view title">
                <view class="view-num">
                    <text>优惠券：</text>
                    <label class="label">
                        ￥{{ orderData.couponAmount ? orderData.couponAmount : '' | NumFormat }}
                    </label>
                </view>
            </view>
            <view class="information-view">
                <view class="view-num time">
                    <text>下单时间：</text>
                    <label class="label">{{ orderData.orderTime ? orderData.orderTime : '' }}</label>
                </view>
            </view>
            <view class="information-view bame">
                <view class="view-num"> <text> 运费：</text> <label class="label">包邮</label> </view>
            </view>
            <view class="information-view">
                <view class="view-num time" v-if="orderData.receiptAmount > 0">
                    <text>支付时间：</text>
                    <label class="label">{{ orderData.receiptDate ? orderData.receiptDate : '' }}</label>
                </view>
            </view>
            <view class="information-view bame">
                <view class="view-man">
                    <text>已退货/已取消：</text>
                    <label class="label">{{ orderData.returnedNum }}/{{ orderData.actualCancelNum }}</label>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import thorui from '@/components/clipboard/clipboard.thorui.js'
export default {
    name: 'information',
    props: {
        information: {
            type: Object
        }
    },
    data() {
        return {
            orderData: '',
            freePostFlag: ''
        }
    },
    created() {
        this.initData(this.information)
    },
    filters: {
        NumFormat(value) {
            //处理金额
            return Number(value).toFixed(2)
        },
        TextFormat(status) {
            //处理金额
            let HtmlText,
                typeTextObject = {
                    0: '待确认',
                    4: '交易完成',
                    5: '订单完成',
                    6: '已关闭',
                    7: '交易全退',
                    77: '交易全退',
                    11: '待付款待发货',
                    12: '待付款部分发货',
                    13: '待付款已发货',
                    21: '部分付款待发货',
                    22: '部分付款部分发货',
                    23: '部分付款已发货',
                    31: '已付款待发货',
                    32: '已付款部分发货',
                    33: '已付款已发货',
                    111: '待付款待发货'
                }

            Object.keys(typeTextObject).forEach(key => {
                if (key == status) {
                    HtmlText = typeTextObject[key]
                }
            })
            return HtmlText
        }
    },
    computed: {},
    watch: {
        information: {
            handler: function(val) {
                this.initData(val)
            },
            deep: true //对象内部的属性监听，也叫深度监听
        }
    },
    methods: {
        initData(res) {
            this.orderData = res
        },
        clipboard(data) {
            thorui.getClipboardData(data, res => {
                if (res) {
                    this.$util.msg('复制成功', 2000, true, 'success')
                } else {
                    this.$util.msg('复制失败', 2000, true, 'none')
                }
            })
        }
    }
}
</script>

<style lang="scss">
.information-template {
    width: 100%;
    height: auto;
    background: #ffffff;
    float: left;
    margin-top: 24rpx;
    .information-content {
        width: 702rpx;
        padding: 15rpx 24rpx 20rpx 24rpx;
        .information-view {
            height: 50rpx;
            line-height: 50rpx;
            font-size: $font-size-24;
            margin: 4rpx 0;
            // display: flex;
            width: 58%;
            display: inline-block;
            &.same {
                width: 100%;
                text-align: right;
            }
            &.bame {
                width: 42%;
                text-align: right;
            }
            &.title {
                width: 100%;
            }
            view {
                // flex: 1;
                color: $text-color;
                color: #999999;
                .label {
                    color: #666666;
                }
            }
            .view-num.title {
                height: 68rpx;
                line-height: 68rpx;
                position: relative;
                .bage-icon {
                    width: 50rpx;
                    height: 50rpx;
                    display: block;
                    position: absolute;
                    right: 0;
                    top: 9rpx;
                }
                .bage-text {
                    display: inline-block;
                    font-size: $font-size-28;
                    line-height: 68rpx;
                    text-align: left;
                    color: $color-system;
                    // margin-left: 10rpx;
                }
            }
            .view-num.ord {
                color: $color-system;
                text-align: left;
                flex: 3;
                font-weight: bold;
            }
            .view-num.time {
                color: #999999;
                flex: 6;
            }
            // .bold{
            // 	font-weight: bold;
            // }
            .red {
                color: #ff457b;
            }
            .view-type {
                float: right;
                text-align: right;
                color: #ff457b;
                flex: 4;
            }
            .clipboard {
                width: 64rpx;
                height: 32rpx;
                background: #fff8fd;
                text-align: center;
                font-size: $font-size-22;
                color: $color-system;
                border-radius: 8rpx;
                line-height: 32rpx;
                display: inline-block;
                margin-left: 15rpx;
            }
        }
    }
}
.openinfo {
    .btnInfo {
        width: 140rpx;
        height: 40rpx;
        border: 2rpx solid #e1e1e1;
        border-radius: 6rpx;
        padding: 5rpx;
        text-align: center;
        color: #b2b2b2;
        margin: 20rpx auto;
        font-size: $font-size-24;
        .iconfont {
            position: relative;
            top: 5rpx;
            right: -3rpx;
        }
    }
}
</style>