@extends('theme::template_custom')

@section('head')
  <link rel="stylesheet" href="{{ themePath('css/member.css') }}">
  <link rel="stylesheet" href="{{ themePath('css/pretty.css') }}">
@stop

@section('banner')
  <div class="nbanner">
    <img src="{{ inject('ad')->single(4, 0, 'img') }}" alt="{{ inject('ad')->single(4, 0, 'title') }}">
  </div>
@stop

@section('anchor')
  <div id="anchor">
    <div class="container-fluid member-container">
		<span class="anchor">
			<a href="{{ url('/') }}">{{ inject('setting')->translate('shop', 'home') }}</a> >
            <a href="{{ url('member/order') }}">{{ inject('setting')->translate('shop', 'order_center') }}</a> >
            {{ inject('setting')->translate('shop', 'order_payment') }}
    </span>
    </div>
  </div>
@stop

@section('content')
  <div class="member-wrap" id="app-content">
    <div class="container-fluid member-container my-pay">
      <div class="pay-title">
        <i class="iconfont icon-morendizhi"></i>
      </div>
      <div class="pay-content">
        <p class="first">{{ inject('setting')->translate('shop', 'order_submit_success') }}</span></p>
        <p>{{ inject('setting')->translate('shop', 'order_number') }}：<span class="prices">{{ $data->order_id }}</span></p>
        <p>{{ inject('setting')->translate('shop', 'name') }}：{{ $data->receive_name }}</p>
        <p>{{ inject('setting')->translate('shop', 'phone') }}：{{ $data->receive_phone }}</p>
        <p>{{ inject('setting')->translate('shop', 'address') }}：{{ $data->receive_address }}</p>
        <p>{{ inject('setting')->translate('shop', 'grand_total') }}：<span class="prices">￥{{ $data->total_fee }}</span></p>
      </div>
      <div class="shipping-title">{{ inject('setting')->translate('shop', 'payment_method') }}</div>
      <ul class="pay-list clearfix">
        <li>
          <a href="javascript:void(0)" @click="payPal"><img src="{{ url('data/assets/images/paypal.png') }}" /></a>
        </li>
        <li class="hidden-xs">
          <a href="{{ url('/member/payment/alipay/web?orderId='.$data->order_id) }}"><img src="{{ url('data/assets/images/zfb.jpg') }}" /></a>
        </li>
        <li class="visible-xs">
          <a href="{{ url('/member/payment/alipay/mobile?orderId='.$data->order_id) }}"><img src="{{ url('data/assets/images/zfb.jpg') }}" /></a>
        </li>
        <li class="hidden-xs">
          <a href="javascript:void(0)" @click="payWeChat"><img src="{{ url('data/assets/images/wxzf.jpg') }}" /></a>
        </li>
        <li class="visible-xs">
          <a href="{{ url('/member/payment/wechat/mobile?orderId='.$data->order_id) }}"><img src="{{ url('data/assets/images/wxzf.jpg') }}" /></a>
        </li>
      </ul>
    </div>

    <div class="resume-form modal-weixin-content">
      <div class="weixin-title">
        <span>微信支付</span>
      </div>
      <div id="weixin-pay-code" v-html="qr_code"></div>
      <div class="weixin-msg">请使用<span>微信</span>扫一扫<br>二维码完成支付</div>
    </div>
  </div>
@stop

@section('foot')
  <script src="{{ themePath('js/layer/layer.js') }}"></script>
  <script type="text/javascript">
      new Vue({
          el: "#app-content",
          data: {
              orderId: "{{ $data->order_id }}",
              qr_code: ''
          },
          methods: {
              payPal: function () {
                  let _this = this;
                  swal({
                      title: '',
                      text: "{{ inject('setting')->translate('shop', 'await_pay') }}",
                      imageUrl: "{{ themePath('images/loading.gif') }}",
                      type: "",
                      showConfirmButton: false
                  });
                  $.ajax({
                      type: 'POST',
                      url: "{{ url('member/pay/paypal-pay') }}",
                      headers: {
                          'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                      },
                      data: {'orderId': _this.orderId},
                      success: function(json) {
                          if (json.status == 'success') {
                              location.href = json.data;
                          } else {
                              swal(json.message);
                          }
                      }
                  });
              },
              payWeChat: function() {
                  let _this = this;
                  swal({
                      title: '',
                      text: "{{ inject('setting')->translate('shop', 'await_pay') }}",
                      imageUrl: "{{ themePath('images/loading.gif') }}",
                      type: "",
                      showConfirmButton: false
                  });
                  $.ajax({
                      type: "GET",
                      url: "{{ url('member/payment/wechat/web?orderId='.$data->order_id) }}",
                      success: function(json) {
                          swal.close()
                          if (json) {
                              _this.makeQrCode(json);
                              log(json);
                          } else {
                              swal({
                                  title: "",
                                  text: "微信支付失败，请选择其他支付方式!",
                                  type: "warning",
                                  showConfirmButton: false,
                                  timer: 2000,
                              });
                              return false;
                          }
                      }
                  });
              },
              makeQrCode: function(str) {
                  let _this = this;
                  $.ajax({
                      type: "POST",
                      url: "{{ url('member/pay/qr-code') }}",
                      headers: {
                          'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                      },
                      data: {'str': str},
                      success: function(json) {
                          if (json.status == 'success') {
                              _this.qr_code = json.data.qr_code;
                              layer.open({
                                  type: 1,
                                  title: false,
                                  closeBtn: 1,
                                  area: ['400px', '405px'],
                                  shadeClose: true,
                                  content: $('.modal-weixin-content')
                              });
                          }
                      }
                  });
              }
          },
      });
  </script>
@stop