<template>
    <view class="content">
        <view class="orderData">
            <view class="While">
                <view class="orderData-cont-label">
                    <image class="orderData-cont-img" src="/static/icon/orderIcon_01.png" mode="aspectFill"></image>
                    <view class="orderData-cont-text">
                        <view class="orderData-cont-name">订单编号</view>
                        <view class="orderData-cont-copy">
                            <text class="nowrap">57843657846357834</text>
                            <view bindtap="copyUrl">复制</view>
                        </view>
                    </view>
                </view>
                <view class="orderData-cont-label">
                    <image class="orderData-cont-img" src="/static/icon/orderIcon_00.png" mode="aspectFill"></image>
                    <view class="orderData-cont-text">
                        <view class="orderData-cont-name">慢慢悠 <text>1800000000</text></view>
                        <view class="orderData-cont-copy">
                            汗水里156高
                        </view>
                    </view>
                </view>
            </view>
        
            <view class="While reserveCont">
                <view class="reserveCont-title">订单信息</view>
                <view class="reserve-label">
                    <view class="reserve-name">商品</view>
                    <view class="reserve-text">乐心血压仪</view>
                </view>
                <view class="reserve-label">
                    <view class="reserve-name">金额</view>
                    <view class="reserve-text reserve-red">￥399</view>
                </view>
                <view class="reserve-label">
                    <view class="reserve-name">交易时间</view>
                    <view class="reserve-text">2022-09-23 15:00</view>
                </view>
                <view class="reserve-label">
                    <view class="reserve-name">运费金额</view>
                    <view class="reserve-text">免邮</view>
                </view>
                <view class="reserve-label">
                    <view class="reserve-name">交易状态</view>
                    <view class="reserve-text green">待发货</view>
                </view>
            </view>
            <view class="While reserveCont">
                <view class="reserveCont-title">物流信息</view>
                <view class="reserve-label">
                    <view class="reserve-name">物流公司</view>
                    <view class="reserve-text">顺丰速递</view>
                </view>
                <view class="reserve-label">
                    <view class="reserve-name">收货姓名</view>
                    <view class="reserve-text green">慢悠悠</view>
                </view>
                <view class="reserve-label">
                    <view class="reserve-name">收货电话</view>
                    <view class="reserve-text green">15000000000</view>
                </view>
                <view class="reserve-label">
                    <view class="reserve-name">物流单号</view>
                    <view class="reserve-text">6546546546546<view class="reserve-copy" bindtap="copyUrl">复制</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="order-data-footer">
            <navigator hover-class="none" class="order-btn" open-type="navigateBack">返回订单</navigator>
            <view class="order-btn" bindtap="signClick">签收订单</view>
        </view>
    </view>
</template>

<script>
    import {  } from '@/apis/interfaces/draw'
    export default {
        data() {
            return {
               
            }
        },
        onShow() {
            // 存储环境-用户抽奖活动
            getApp().globalData.envType = 'drawEnv'
        },
		
        methods: {
			
        }
    }
</script>

<style lang="scss">
    page {
        padding: 30rpx;
        box-sizing: border-box;
    }
    
    .orderData {
        border-bottom: 70rpx transparent solid;
    }
    
    .While {
        border-radius: 10rpx;
        margin-bottom: 30rpx;
        background-color: #FFFFFF;
        box-shadow: 0 0 10rpx rgba(0, 0, 0, .05);
    }
    
    /* 订单 */
    .orderData-cont-label {
        padding: 40rpx 30rpx;
        display: flex;
        box-sizing: border-box;
        border-bottom: #f2f2f2 2rpx solid;
        .orderData-cont-img {
            width: 48rpx;
            height: 48rpx;
            vertical-align: middle;
        }
        
        .orderData-cont-text {
            width: calc(100% - 68rpx);
            margin-left: 20rpx;
            box-sizing: border-box;
        }
        
        .orderData-cont-name {
            margin-bottom: 10rpx;
        }
        
        .orderData-cont-name text {
            color: #999;
            padding-left: 20rpx;
        }
        
        .orderData-cont-copy {
            display: flex;
            font-size: 28rpx;
            color: #999;
        }
        
        .orderData-cont-copy text {
            flex: 1;
            display: inline-block;
            margin-right: 20rpx;
        }
        
        .orderData-cont-copy view {
            color: #e31828;
        }
    }
    
    /* 规格 */
    .reserveCont-title {
        font-weight: 600;
        padding: 30rpx;
    }
    
    .reserve-label {
        display: flex;
        padding: 0 30rpx 30rpx;
        box-sizing: border-box;
        font-size: 28rpx;
    }
    
    .reserve-name {
        flex: 1;
        width: 200rpx;
        margin-right: 20rpx;
        color: #7e7e7e;
    }
    
    .reserve-text {
        width: calc(100% - 240rpx);
        text-align: right;
        line-height: 50rpx;
    }
    
    .reserve-copy {
        color: #fa8524;
        border: #fa8524 2rpx solid;
        display: inline-block;
        height: 34rpx;
        line-height: 34rpx;
        font-size: 26rpx;
        padding: 0 10rpx;
        border-radius: 4rpx;
        margin-left: 10rpx;
    }
    
    .reserve-red {
        font-weight: 600;
        color: #e31828;
    }
    
    /* 底部菜单 */
    .order-data-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: solid 1rpx #f2f2f2;
        padding-top: 17rpx;
        padding-right: 30rpx;
        padding-left: 30rpx;
        height: 83rpx;
        background: white;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
        z-index: 9;
    }
    
    .order-btn {
        margin-left: 20rpx;
        height: 58rpx;
        line-height: 58rpx;
        box-sizing: border-box;
        border: solid 1rpx #747788;
        padding: 0 20rpx;
        font-size: 26rpx;
        border-radius: 10rpx;
        margin-top: 5rpx;
    }
</style>
