
<template>
  <div class="orderDetails">
    <div class="head-title">
        <span @click="CommonJump('orderList')" class="blue point">订单列表</span> / 订单详情
    </div>
    <div class="content app-order-detail">
        <el-card class="app-order-status" shadow="never">
            <el-steps :active="activeStep" align-center>
                <el-step title="已下单" icon="el-icon-edit" description="2020-05-13 16:36:11">
                    <i :class="activeStep==1?'step01Active':'step01'" slot="icon"></i>
                </el-step>
                <el-step title="已付款" icon="el-icon-edit" description="2020-05-13 16:36:11">
                    <i :class="activeStep==2?'step02Active':'step02'" slot="icon"></i>
                </el-step>
                <el-step title="未发货" icon="el-icon-edit" description="2020-05-13 16:36:11">
                    <i :class="activeStep==3?'step03Active':'step03'" slot="icon"></i>
                </el-step>
                <el-step title="已收货" icon="el-icon-edit" description="2020-05-13 16:36:11">
                    <i :class="activeStep==4?'step04Active':'step04'" slot="icon"></i>
                </el-step>
                <el-step title="未结束" icon="el-icon-edit" description="2020-05-13 16:36:11">
                    <i :class="activeStep==5?'step05Active':'step05'" slot="icon"></i>
                </el-step>
            </el-steps>
        </el-card>
        <el-row :gutter="16">
            <el-col :span="8">
                <div class="card-box">
                    <h3>订单信息</h3>
                    <div flex="dir:left cross:center" class="item-box">
                        <span class="label">订单号:</span>
                        <div>20200513163611394177</div>
                    </div>
                    <div flex="dir:left cross:center" class="item-box">
                        <span class="label">商户单号:</span>
                        <div>HMca0d3f54c0d1f400d78e398486ba1c</div>
                    </div>
                    <div flex="dir:left cross:center" class="item-box">
                        <span class="label">支付方式:</span>
                        <span class="el-tag el-tag--success el-tag--small el-tag--light is-hit">线上支付</span> 
                    </div>
                    <div flex="dir:left cross:center" class="item-box">
                        <span class="label">配送方式:</span>
                        <span class="el-tag el-tag--primary el-tag--small el-tag--light is-hit">快递发送</span>
                    </div>
                    <div flex="dir:left cross:center" class="item-box">
                        <span class="label">用户:</span>
                        <div>🌸井澤💐</div>
                    </div>
                    <div flex="dir:left cross:center" class="item-box">
                        <span class="label">收货人:</span>
                        <div>李凤君</div>
                    </div>
                    <div flex="dir:left cross:center" class="item-box">
                        <span class="label">电话:</span>
                        <div>15134634264</div>
                    </div>
                    <div flex="dir:left cross:center" class="item-box">
                        <span class="label">收货地址:</span>
                        <div class="express-address">黑龙江省 哈尔滨市 道外区 哈尔滨市道外区陶瓷小区E2栋3单元1902室。15134634264李凤君
                            <button type="button" class="el-button el-button--text el-button--small is-circle">
                                <i class="el-icon-edit"></i>
                            </button>
                        </div>
                    </div>
                    <div flex="dir:top" class="item-box">
                        <div flex="dir:left cross:center">
                            <span class="label">物流信息:</span>
                            <span class="el-tag el-tag--info el-tag--small el-tag--light is-hit" style="margin-right: 5px;">
                                中通快递
                            </span>
                            <a href="https://www.baidu.com/s?wd=中通快递640213339544" target="_blank" title="点击搜索运单号">640213339544</a>
                        </div>
                        <div flex="dir:left">
                            <span class="label">商家留言:</span>
                            <span></span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="card-box">
                    <h3>订单信息</h3>
                    <div flex="dir:left cross:center" class="item-box" style="flex-shrink: 0;">
                        <span class="label">商家备注:</span>
                        <div>库存-1
                            <i class="el-icon-edit" style="color: rgb(64, 158, 255); cursor: pointer; margin-left: 10px;"></i>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div flex="dir:top" class="card-box">
                    <h3>分销信息</h3>
                    <div>
                        <div class="share-title">一级分销商</div>
                        <div flex="dir:left cross:center" class="item-box">
                            <span class="label">姓名:</span>
                            <div>印象日本地接～谢军</div>
                        </div>
                        <div flex="dir:left cross:center" class="item-box">
                            <span class="label">手机号:</span>
                            <div></div>
                        </div>
                        <div flex="dir:left cross:center" class="item-box share-price">
                            <span class="label orange-label">佣金:</span>
                            <div>￥7.00</div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-card shadow="never">
            <el-table
                border
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="Id"
                    label="商品标题"
                    >
                    <template slot-scope="scope">
                        <div flex="dir:left cross:center">
                            <img src="https://cdnimg.iotweixin.com/uploads/mall1285/20200430/ba10bdeb05c86815ae711460c9de5d2c.jpg" alt="" style="height: 60px; width: 60px; margin-right: 5px;">
                            <div class="app-ellipsis">
                                <div class="vue-line-clamp" style="word-break: break-all; -webkit-line-clamp: 1;">
                                    精选！土枇杷新鲜水果5斤装  四川精品野生超大甜枇杷果  四川省内包邮
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="规格"
                    width="200">
                    <template slot-scope="scope">
                        <span class="el-tag el-tag--mini el-tag--light" style="margin-right: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 95%;">
                            重量:5斤装
                        </span>
                    </template>  
                    
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="单价"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="数量"
                    width="80">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="原价"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="折扣后"
                    width="120">
                </el-table-column>
            </el-table>
            <el-form label-width="200px" class="app-order-count-price">
                <el-form-item label="商品小计">
                    ￥90.00
                </el-form-item>
                <el-form-item label="运费">
                    ￥90.00
                </el-form-item>
                <el-form-item label="实付款">
                    <span style="color: rgb(255, 69, 68);">￥<b>148.00</b></span>
                </el-form-item>
            </el-form>
        </el-card>  
        <div flex="dir:right" class="action-box">
            <el-button style="margin-left: 10px;" size="small" type="primary">打印发货单</el-button>
            <el-button style="margin-left: 10px;" size="small" type="primary">打印小票</el-button>
            <el-button style="margin-left: 10px;" size="small" type="primary">发货</el-button>
        </div>
    </div>
    
  </div>
</template>
<script>
  export default {
    data() {
        return {
            activeStep:1,
            tableData:[
                {Id:1}
            ],
            
        };
    },
    created() {
        if(this.$route.query.UserId){
            this.UserId=this.$route.query.UserId;
            this.getData()

        }
    },
    methods: {
        
        
        getData(){
            this.apipost("/api/user/GetMemberUserInfo",{UserId:this.UserId}, res => {
                this.userInfo=res.data.data;
            })
        },

    },
    mounted() {
      
    }
  };

</script>
<style>
.app-order-detail .express-address {
    width: 80%;
}
.app-order-detail .action-box {
    padding: 10px 20px;
}
.app-order-detail .app-order-count-price .el-form-item {
    margin-bottom: 5px;
}
.app-order-detail .app-order-count-price {
    float: right;
    margin-right: 55px;
    font-size: 12px;
    text-align: right;
    margin-top: 15px;
}
.app-order-detail h3{
    padding:15px 0;
}
.app-order-detail .share-price {
    color: #EF8933;
}
.app-order-detail .share-title {
    font-size: 15px;
    margin: 10px 0 5px;
}
.app-order-detail .card-box .label {
    color: #999999;
    margin-right: 10px;
}
.app-order-detail .item-box {
    margin-bottom: 10px;
}
.app-order-detail .card-box {
    border: 1px solid #EBEEF5;
    border-radius: 3px;
    padding: 10px;
    height: 300px;
    overflow-y: scroll;
}
.app-order-detail .step05{
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_5.png");
}
.app-order-detail .step04{
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_4.png");
}

.app-order-detail .step03{
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_3.png");
}
.app-order-detail .step02{
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_2.png");
}
.app-order-detail .step04Active{
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_4_active.png");
}
.app-order-detail .step03Active{
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_3_active.png");
}
.app-order-detail .step02Active{
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_2_active.png");
}
.app-order-detail .step01Active{
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_1_active.png");
}
.app-order-detail .app-order-status {
    padding: 50px 120px;
    margin-bottom: 30px;
}
.orderDetails .content{
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
}

</style>
