wuhui_zzw
/
wyyl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip

This commit is contained in:
pushuo 2022-08-08 15:27:54 +08:00
parent d7691c3970
commit e7b2124bad
8 changed files with 79 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/Stripe/Static/css/demo.css vendored
View File

@ -9,6 +9,6 @@
#bk-stripe-app .pay-iamges img {
max-width: 70px;
margin-right: 4px;
/* max-width: 70px; */
/* margin-right: 4px; */
}

72
plugins/Stripe/Views/checkout/payment.blade.php
View File

@ -4,46 +4,42 @@
<script src="{{ asset('plugin/stripe/js/demo.js') }}"></script>
<link rel="stylesheet" href="{{ asset('plugin/stripe/css/demo.css') }}">
<div class="mt-5" id="bk-stripe-app" v-cloak>
<div class="card">
<div class="card-body">
<div class="checkout-black">
<h5 class="checkout-title">卡信息</h5>
<div class="">
<div class="pay-iamges">
<img src="{{ asset("plugin/stripe/image/pay-image.png") }}" class="img-fluid">
</div>
<el-form ref="form" label-position="top" :rules="rules" :model="form" class="form-wrap w-max-500">
<el-form-item label="卡号" prop="cardnum">
<el-input v-model="form.cardnum"></el-input>
</el-form-item>
<el-form-item label="截止日期" required>
<div class="d-flex align-items-center">
<el-form-item prop="year">
<el-date-picker class="w-auto me-2" v-model="form.year" format="yyyy" value-format="yyyy"
type="year" placeholder="选择年">
</el-date-picker>
</el-form-item>
<el-form-item prop="month">
<el-date-picker v-model="form.month" class="w-auto" format="MM" value-format="MM" type="month"
placeholder="选择月">
</el-date-picker>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="安全码" prop="cvv">
<el-input v-model="form.cvv"></el-input>
</el-form-item>
<el-form-item>
<el-checkbox v-model="form.remenber">記住這張卡以備將來使用</el-checkbox>
</el-form-item>
<el-form-item>
<button class="btn btn-primary" type="button" @click="checkedBtnCheckoutConfirm('form')">支付</button>
</el-form-item>
</el-form>
</div>
<hr class="mb-4">
<div class="checkout-black">
<h5 class="checkout-title">卡信息</h5>
<div class="">
<div class="pay-iamges mb-2">
<img src="{{ asset("plugin/stripe/image/pay-image.png") }}" class="img-fluid">
</div>
<el-form ref="form" label-position="top" :rules="rules" :model="form" class="form-wrap w-max-500">
<el-form-item label="卡号" prop="cardnum">
<el-input v-model="form.cardnum"></el-input>
</el-form-item>
<el-form-item label="截止日期" required>
<div class="d-flex align-items-center">
<el-form-item prop="year">
<el-date-picker class="w-auto me-2" v-model="form.year" format="yyyy" value-format="yyyy"
type="year" placeholder="选择年">
</el-date-picker>
</el-form-item>
<el-form-item prop="month">
<el-date-picker v-model="form.month" class="w-auto" format="MM" value-format="MM" type="month"
placeholder="选择月">
</el-date-picker>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="安全码" prop="cvv">
<el-input v-model="form.cvv"></el-input>
</el-form-item>
<el-form-item>
<el-checkbox v-model="form.remenber">記住這張卡以備將來使用</el-checkbox>
</el-form-item>
<el-form-item>
<button class="btn btn-primary" type="button" @click="checkedBtnCheckoutConfirm('form')">支付</button>
</el-form-item>
</el-form>
</div>
</div>
</div>

19
public/build/beike/shop/default/css/app.css vendored
View File

@ -1106,42 +1106,41 @@ body.page-checkout .total-wrap .totals > li > span:first-of-type, body.page-bk-s
border-radius: 0 !important;
}
body.page-order-success .order-wrap .card-body {
body.page-order-success .order-wrap .card-body.main-body, body.page-payment .order-wrap .card-body.main-body {
padding: 3rem;
padding-left: 7rem;
}
body.page-order-success .order-wrap .card-body .order-top {
border-bottom: 1px solid #eee;
body.page-order-success .order-wrap .card-body .order-top, body.page-payment .order-wrap .card-body .order-top {
padding-bottom: 2.7rem;
margin-bottom: 2.7rem;
display: flex;
justify-content: center;
}
body.page-order-success .order-wrap .card-body .order-top .left {
body.page-order-success .order-wrap .card-body .order-top .left, body.page-payment .order-wrap .card-body .order-top .left {
margin-top: -6px;
}
body.page-order-success .order-wrap .card-body .order-top .left i {
body.page-order-success .order-wrap .card-body .order-top .left i, body.page-payment .order-wrap .card-body .order-top .left i {
color: #4caf50;
font-size: 80px;
line-height: 1;
}
body.page-order-success .order-wrap .card-body .order-top .right {
body.page-order-success .order-wrap .card-body .order-top .right, body.page-payment .order-wrap .card-body .order-top .right {
flex: 1;
margin-left: 2rem;
}
body.page-order-success .order-wrap .card-body .order-top .right .table {
body.page-order-success .order-wrap .card-body .order-top .right .table, body.page-payment .order-wrap .card-body .order-top .right .table {
margin-bottom: 0;
}
body.page-order-success .order-wrap .card-body .order-top .right .order-title {
body.page-order-success .order-wrap .card-body .order-top .right .order-title, body.page-payment .order-wrap .card-body .order-top .right .order-title {
margin-bottom: 1.2rem;
font-weight: 400;
}
body.page-order-success .order-wrap .card-body .order-top .right .order-info {
body.page-order-success .order-wrap .card-body .order-top .right .order-info, body.page-payment .order-wrap .card-body .order-top .right .order-info {
padding: 0.7rem;
background-color: #fffaf0;
border: 1px solid #ffe1ad;
}
body.page-order-success .order-wrap .card-body .order-bottom {
body.page-order-success .order-wrap .card-body .order-bottom, body.page-payment .order-wrap .card-body .order-bottom {
margin-left: calc(2rem + 80px);
line-height: 2;
}

2
public/build/beike/shop/default/css/bootstrap.css vendored
View File

@ -6837,7 +6837,7 @@ body {
hr {
margin: 1rem 0;
color: inherit;
color: #bcbcbc;
background-color: currentColor;
border: 0;
opacity: 0.25;

1
resources/beike/shop/default/css/bootstrap/bootstrap.scss vendored
View File

@ -16,6 +16,7 @@ $form-check-input-width: 1.2em;
$form-check-input-border-radius: 0;
$nav-link-color: #1f1f1f;
$hr-color: #bcbcbc;
// Breadcrumbs
// scss-docs-start breadcrumb-variables

9
resources/beike/shop/default/css/order-success.scss vendored
View File

@ -1,13 +1,14 @@
@charset "UTF-8";
body.page-order-success {
body.page-order-success, body.page-payment {
.order-wrap {
.card-body {
padding: 3rem;
padding-left: 7rem;
&.main-body {
padding: 3rem;
padding-left: 7rem;
}
.order-top {
border-bottom: 1px solid #eee;
padding-bottom: 2.7rem;
margin-bottom: 2.7rem;
display: flex;

4
themes/default/account/order_success.blade.php
View File

@ -9,8 +9,8 @@
</div>
<div class="card order-wrap border">
<div class="card-body">
<div class="order-top">
<div class="card-body main-body">
<div class="order-top border-bottom">
<div class="left">
<i class="bi bi-check2-circle"></i>
</div>

35
themes/default/checkout/payment.blade.php
View File

@ -1,6 +1,6 @@
@extends('layout.master')
@section('body-class', 'page-bk-stripe')
@section('body-class', 'page-payment')
@section('content')
<div class="container">
@ -8,17 +8,32 @@
<div class="col-12 col-md-9">@include('shared.steps', ['steps' => 4])</div>
</div>
<div class="col-12">
<div class="card order-wrap border total-wrap">
<h5 class="checkout-title">订单结账</h5>
<div class="card-body">
<ul class="totals">
<li><span>订单号</span><span>{{ $order->number }}</span></li>
<li><span>应付总金额</span><span v-text="source.order.total">{{ $order->total }}</span></li>
</ul>
<div class="card order-wrap border">
<div class="card-body main-body">
<div class="order-top">
<div class="left">
<i class="bi bi-credit-card-2-back"></i>
</div>
<div class="right">
<h3 class="order-title">订单提交成功，请付款</h3>
<div class="order-info">
<table class="table table-borderless">
<tbody>
<tr>
<td>订单编号：<span class="fw-bold">{{ $order['number'] }}</span></td>
<td>应付金额：<span class="fw-bold">{{ $order['total'] }}</span></td>
</tr>
<tr>
<td>支付方式：<span class="fw-bold">{{ $order['payment_method_name'] }}</span></td>
</tr>
</tbody>
</table>
</div>
{!! $payment !!}
{!! $payment !!}
</div>
</div>
</div>
</div>
</div>