<template>
  <view class='comtainer'>
    <view class='title-box'>
      <view class='title'>待使用</view>
      <view class='explan'>请切务听信商家线下交易，平台交易有保降哦</view>
    </view>

    <view class="container-item-box">
      <view class='order-title'>此条形码给店员展示</view>

      <view class='order-item-top-box'>
        <view class='order-item' v-for="item of 3">
          <view class='item-box'>
            <view class='item-left'>
              <image src='@/static/QR57a.jpg' class='img'></image>
            </view>
            <view class='item-right'>
              <view class='right1'>水洗轿车</view>
              <view class='right2'>X1</view>
              <view class='right3'>汽车美容</view>
            </view>
          </view>
        </view>
        <view class='allprice'>
         <view class='price-text'>总价:</view>
         <view class='price'>¥97.95</view>
        </view>
      </view>

      <u-line margin='18rpx 0 16rpx '></u-line>

      <view class='order-item-bottom-box'>
        <view class='refund-box'>
          <view class='refund-btn'>申请退款</view>
        </view>

        <view class='rqcode-box'>
          <view class='rqcode-img'>
            <image class='img' src='@/static/icon/tools.png'>
          </view>
          <view class='rqcode-text'>
            <view class='text1'>券码:7GM922JDBJGT</view>
            <view class='text2'>复制</view>
          </view>
        </view>
      </view>

      <view class="order-item-explan-box">
        <view class='explan-title'>贵阳贵通汽车服务有限公司</view>
        <view class='explan-sale'>
          <view class='sale-left'>营业中</view>
          <view class='sale-right'>销量 225</view>
        </view>
        <view class='explan-address'>观山湖区高新区联合广场</view>
      </view>

      <button class='reserve-btn' @click='handlerSkipReserve'>立即预约</button>

    </view>

    <view class="containers-box">
      <view class="title"> 订单信息 </view>
      <view class="item-box">
          <view class='item-left'>订单编号</view>
          <view class='item-right'>401976271000000937709085</view>
      </view>
      <view class="item-box">
          <view class='item-left'>下单时间</view>
          <view class='item-right'>2024-05-24 01:17:59</view>
      </view>
      <view class="item-box">
          <view class='item-left'>订单金额</view>
          <view class='item-right'>￥97.95</view>
      </view>
    </view>
    <view class="containers-box">
      <view class="title"> 其他信息 </view>
      <view class="item-box">
          <view class='item-left'>使用方法</view>
          <view class='item-right'>到达门店后出示核销二维码，商户扫码即可</view>
      </view>
      <view class="item-box">
          <view class='item-left'>退款时限</view>
          <view class='item-right'>1.订单核销码有效期60天，过期后自动退款； 2.未使用/未到期前随时可退，款项沿付款方式原路退回，订单使用后不可退款</view>
      </view>
    </view>

  </view>
</template>

<script>
	export default {
		data() {
			return {
				init_list: {},
			};
		},
		onLoad(option) {
			this.init_list = option.orderList;
		},
		computed: {
			allPrice() {
				let price = 0;
				this.init_list.goodsInfo.map(rs => {
					price += rs.goodsPrice;
				});
				return price.toFixed(2);
			},
		},
    methods:{
      // 点击跳转到预约
      handlerSkipReserve(){
        uni.navigateTo({
          url:'/PageMine/orderModules/orderReserve'
        })
      }
    }
	};
</script>

<style lang="scss" scope>
  .comtainer{
    padding: 120rpx 32rpx 32rpx;
    background: linear-gradient(180deg, #D3E2FF 0%, #EFEFFA 35% , #F9F9F9 50%);;
    min-height: calc(100vh - 152rpx);
    font-size: 28rpx;
    .title-box{
      .title{
        color:#0C1223;
        font-size: 36rpx;
        font-weight: bold;
      }
      .explan{
        color:#333333;
        font-size: 26rpx;
        margin-top:12rpx;
      }
    }

    .container-item-box{
      margin-top:24rpx;
      background-color: #FFFFFF;
      border-radius: 16rpx;
      padding:32rpx 24rpx;
      .order-title{
        color: #333333;
        text-align: center;
        margin-bottom:32rpx;
        font-weight: bold;
      }
      .order-item-top-box{
        .order-item{
          margin-bottom: 24rpx;
          .item-box{
            display: flex;
            .item-left{
             .img{
               width:160rpx;
               height: 160rpx;
               border-radius: 16rpx;
             }
            }
            .item-right{
              margin-left: 32rpx;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .right1{

              }
              .right2{

              }
              .right3{
                padding:2rpx 12rpx;
                border:2rpx solid #215EBE;
                color:#215EBE;
                background-color: #E8EEF8;
                border-radius: 4rpx;
              }
            }
          }
        }
        .order-item:last-child{
          margin:0;
        }

        .allprice{
          display: flex;
          justify-content: flex-end;
          font-size: 26rpx;
          color:#333333;
          margin-top:26rpx;
          align-items: center;
          .price-text{
            margin-right:10rpx;
          }
          .price{
            font-size: 32rpx;
            font-weight: bold;
          }
        }
      }
      .order-item-bottom-box{
        .refund-box{
          display: flex;
          justify-content: flex-end;
          .refund-btn{
            padding:4rpx 24rpx;
            border-radius: 108rpx;
            border:2rpx solid #E6E6E6;
            text-align: center;
          }
        }
        .rqcode-box{
          margin-top:36rpx;
          .rqcode-img{
            text-align: center;
            .img{
              width:278rpx;
              height:200rpx;
            }
          }
          .rqcode-text{
            display: flex;
            justify-content: center;
            margin-top:24rpx;

            .text2{
              color:#1B5FC5;
              margin-left:16rpx;
            }
          }
        }
      }
    }
  }

.order-item-explan-box{
  margin-top:50rpx;
  .explan-sale{
    display: flex;
    margin: 9rpx 0;
    align-items: center;
    .sale-left{
      color: #39BD66;
    }
    .sale-right{
      font-size: 24rpx;
      color: #666666;
      margin-left: 8rpx;
    }
  }
  .explan-address{
    font-size: 24rpx;
    color:#999999;
  }
}

.containers-box{
  background-color: #fff;
  padding:24rpx;
  border-radius: 16rpx;
  margin-top:24rpx;
  .title{
    margin-bottom: 24rpx;
  }
  .item-box{
    display: flex;
    font-size: 24rpx;
    margin-bottom:16rpx;
    width:100%;
    .item-left{
      margin-right:16rpx;
      width: 17%;
    }
    .item-right{
      color: #999999;
      width: 80%;
    }
  }
  .item-box:last-child{
    margin: 0;
  }
}
.reserve-btn{
        background-color: #215EBE;
        color:#FFFFFF;
        border-radius: 16rpx;
        height: 80rpx;
        line-height: 80rpx;
        margin-top:32rpx;
      }
</style>
