<template>
    <view class="container" v-bind:style="{height: curheight+'px'}">
        <view class="refund" v-for="(items) in refund" :key="items.key">
            <view class="detail">
                <view class="detail_img"><image v-bind:src="items.img"></image></view>
                <view class="detail2">
                    <view class="detail_name">{{items.name}}</view>
                    <view class="detail_standard">规格：{{items.standard}}</view>
                    <view class="detail_price">
                        <span>￥{{items.price}}</span>
                        <span>X{{items.number}}</span>
                    </view>
                </view>
            </view>
            <view class="refund_price">
                <span class="refund_price1">退款金额</span>
                <span class="refund_price2">￥{{items.refundprice}}</span>
            </view>
            <view class="refund_reason">
                <span >退款原因</span>
                <!-- 跳转退款原因详细页 -->
                <view @click="Jump()">请选择<image src="/static/img/detail/xiala.png"></image></view>
            </view>
            <view class="refund_explain">
                <span>退款说明</span>
                <input placeholder="选填" value="">
            </view>
            <view class="refund_img">
                <span class="refund_img1">上传图片</span>
                <span class="refund_img2">（最多3张）</span>
                <view><image v-bind:src="items.refund_img"></image></view>
            </view>
        </view>
        <view class="button">
            <span>提交</span>
        </view>
    </view>
</template>

<script>
 
export default {
    //获取浏览器高度
    beforeMount(height){
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curheight = h-44; 
        
    },
    methods:{
       Jump(){
        this.$router.push('/Refundways')
        },    
    },
    data(){
        return{
            curheight:0,   //浏览器高度
            refund:[
                {
                    key:0,
                    img:'/static/img/detail/d1.png',
                    name:'商品名称',
                    standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
                    price: 180,
                    number: 1,
                    refundprice: 110,
                    refund_img:'/static/img/detail/refund_img.png',
                }
            ],
        }   
    }
}
</script>

<style lang="scss">

.container{
    background: #F2F2F2;
    padding-top: 10px;
    box-sizing: border-box;
}
.refund{
    width: 90%;
    height: 353px;
    margin: 0 auto;
    background: #FFFFFF;
    box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
    border-radius: 8px;
    padding: 14px;
    box-sizing: border-box;
}
.detail{
    display: flex;
    justify-content: space-between;
    font-family: PingFangSC-Regular;
    margin-bottom: 20px;
    .detail2{
        width: 64%;
        view{
            margin-bottom: 8px;
        }
        .detail_name{
            font-size: 14px;
            color:#333333;
        }
        .detail_standard{
            font-size: 12px;
            color: #999999;
        }
        .detail_price{
            font-size: 14px;
            color: #999999;
            display: flex;
            justify-content: space-between;
        }
    }
    .detail_img{
        width: 188rpx;
        height: 188rpx;
        border-radius: 40px;
        image{
            width: 100%;
            height: 100%;
        }
    }
}
.refund_explain,.refund_img,.refund_price,.refund_reason{
    margin-top: 16px;
    margin-bottom: 16px;
}
.refund_price{
    font-family: PingFangSC-Semibold;
    font-size: 14px;
    color: #333333;
    letter-spacing: -0.26px;
    line-height: 18px;
    .refund_price1{
        font-weight: bold;
        margin-right: 16px;
    }
    .refund_price2{
        color: #FF6B4A;
    }
}
.refund_reason,.refund_explain span,.refund_img1{
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #333333;
    letter-spacing: -0.23px;
    line-height: 18px;
}
.refund_explain{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.refund_explain input,.refund_img2{
    width: 78%;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #B8B8B8;
    letter-spacing: -0.23px;
}
.refund_reason{
    span{
        margin-right: 20px;
    }
    view{
        display: inline-block;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #B8B8B8;
        letter-spacing: -0.23px;
        width: 76%;
        image{
            width: 30rpx;
            height: 26rpx;
            float: right;
        }
    }
}
.refund_img{
    .refund_img1{
        margin-right: 10px;
    }
    view{
        margin-top: 20px;
        width: 66rpx;
        height: 60rpx;
        image{
            width: 100%;
            height: 100%;
        }
    }
}
a{
    text-decoration: none;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #B8B8B8;
    letter-spacing: -0.23px;
}
.button{
    width: 100%;
    height: 112rpx;
    background: #FF6B4A ;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    span{
        color:#FFFFFF;
        font-family: PingFangSC-Regular;
        font-size: 16px;
        letter-spacing: -0.3px;
    }
}


</style>