<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>