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

wip

This commit is contained in:
pushuo 2022-07-07 11:33:58 +08:00
parent 6a5aebce69
commit 2e577bbd8c
10 changed files with 396 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
beike/Shop/Services/PaymentService.php
View File

@ -59,7 +59,7 @@ class PaymentService
]);
**/
return view("checkout.payment.{$this->paymentMethodCode}");
return view("checkout.payment.{$this->paymentMethodCode}", ['order' => $this->order]);
// echo $charge['id'];
}
}

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

@ -499,107 +499,6 @@ body.page-cart .total-wrap .list-group li .total-price {
font-weight: bold;
}
body.page-checkout .checkout-black {
margin-bottom: 2.6rem;
}
body.page-checkout .right-column {
position: relative;
}
@media (min-width: 992px) {
body.page-checkout .right-column {
padding-left: 2rem;
}
}
body.page-checkout .checkout-title {
border-bottom: 1px solid #e5e5e5;
padding-bottom: 16px;
margin-bottom: 16px;
position: relative;
padding-left: 10px;
}
body.page-checkout .checkout-title:before {
content: "";
position: absolute;
top: 2px;
left: 0;
background-color: #fd560f;
width: 3px;
height: 16px;
}
body.page-checkout .total-wrap {
padding: 1.4rem;
border: 3px solid #efefef;
}
body.page-checkout .total-wrap .card-body {
padding: 0;
}
body.page-checkout .total-wrap .card-header {
background-color: #fff;
padding: 0 0 0.8rem;
margin-bottom: 1rem;
border-color: #E6E6E6;
}
body.page-checkout .total-wrap .card-header h5 {
font-weight: bold;
}
body.page-checkout .total-wrap .card-header span {
line-height: 24px;
min-width: 24px;
color: #fff;
text-align: center;
}
body.page-checkout .total-wrap .products-wrap {
border-bottom: 1px solid #E6E6E6;
margin-bottom: 1.3rem;
padding-bottom: 0.3rem;
max-height: 380px;
overflow-y: auto;
}
body.page-checkout .total-wrap .products-wrap .item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.8rem;
}
body.page-checkout .total-wrap .products-wrap .item .image {
display: flex;
align-items: center;
padding-right: 4px;
}
body.page-checkout .total-wrap .products-wrap .item .image img {
width: 40px;
margin-right: 10px;
}
body.page-checkout .total-wrap .products-wrap .item .image .quantity {
margin-left: 3px;
color: #7a7a7a;
}
body.page-checkout .total-wrap .products-wrap .item .price {
color: #7a7a7a;
}
body.page-checkout .total-wrap .totals {
padding-left: 0;
list-style: none;
padding-bottom: 0.3rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid #E6E6E6;
}
body.page-checkout .total-wrap .totals > li {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
body.page-checkout .total-wrap .totals > li > span {
font-weight: bold;
}
body.page-checkout .total-wrap .totals > li > span:first-of-type {
font-size: 0.8rem;
color: #3f3f3f;
}
body.page-checkout .total-wrap .totals > li > span:last-of-type {
color: #dc3545;
}
body.page-checkout .addresses-wrap .item {
position: relative;
padding: 14px 14px 14px 18px;
@ -688,6 +587,106 @@ body.page-checkout .radio-line-wrap .radio-line-item .right .title {
margin-bottom: 10px;
}
body.page-checkout .checkout-black, body.page-bk-stripe .checkout-black {
margin-bottom: 2.6rem;
}
body.page-checkout .right-column, body.page-bk-stripe .right-column {
position: relative;
}
@media (min-width: 992px) {
body.page-checkout .right-column, body.page-bk-stripe .right-column {
padding-left: 2rem;
}
}
body.page-checkout .checkout-title, body.page-bk-stripe .checkout-title {
border-bottom: 1px solid #e5e5e5;
padding-bottom: 16px;
margin-bottom: 16px;
position: relative;
padding-left: 10px;
}
body.page-checkout .checkout-title:before, body.page-bk-stripe .checkout-title:before {
content: "";
position: absolute;
top: 2px;
left: 0;
background-color: #fd560f;
width: 3px;
height: 16px;
}
body.page-checkout .total-wrap, body.page-bk-stripe .total-wrap {
padding: 1.4rem;
border: 3px solid #efefef;
}
body.page-checkout .total-wrap .card-body, body.page-bk-stripe .total-wrap .card-body {
padding: 0;
}
body.page-checkout .total-wrap .card-header, body.page-bk-stripe .total-wrap .card-header {
background-color: #fff;
padding: 0 0 0.8rem;
margin-bottom: 1rem;
border-bottom: 1px solid #E6E6E6;
}
body.page-checkout .total-wrap .card-header h5, body.page-bk-stripe .total-wrap .card-header h5 {
font-weight: bold;
}
body.page-checkout .total-wrap .card-header span, body.page-bk-stripe .total-wrap .card-header span {
line-height: 24px;
min-width: 24px;
color: #fff;
text-align: center;
}
body.page-checkout .total-wrap .products-wrap, body.page-bk-stripe .total-wrap .products-wrap {
border-bottom: 1px solid #E6E6E6;
margin-bottom: 1.3rem;
padding-bottom: 0.3rem;
max-height: 380px;
overflow-y: auto;
}
body.page-checkout .total-wrap .products-wrap .item, body.page-bk-stripe .total-wrap .products-wrap .item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.8rem;
}
body.page-checkout .total-wrap .products-wrap .item .image, body.page-bk-stripe .total-wrap .products-wrap .item .image {
display: flex;
align-items: center;
padding-right: 4px;
}
body.page-checkout .total-wrap .products-wrap .item .image img, body.page-bk-stripe .total-wrap .products-wrap .item .image img {
width: 40px;
margin-right: 10px;
}
body.page-checkout .total-wrap .products-wrap .item .image .quantity, body.page-bk-stripe .total-wrap .products-wrap .item .image .quantity {
margin-left: 3px;
color: #7a7a7a;
}
body.page-checkout .total-wrap .products-wrap .item .price, body.page-bk-stripe .total-wrap .products-wrap .item .price {
color: #7a7a7a;
}
body.page-checkout .total-wrap .totals, body.page-bk-stripe .total-wrap .totals {
padding-left: 0;
list-style: none;
padding-bottom: 0.3rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid #E6E6E6;
}
body.page-checkout .total-wrap .totals > li, body.page-bk-stripe .total-wrap .totals > li {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
body.page-checkout .total-wrap .totals > li:last-of-type, body.page-bk-stripe .total-wrap .totals > li:last-of-type {
font-weight: bold;
}
body.page-checkout .total-wrap .totals > li:last-of-type > span:last-of-type, body.page-bk-stripe .total-wrap .totals > li:last-of-type > span:last-of-type {
color: #dc3545;
}
body.page-checkout .total-wrap .totals > li > span:first-of-type, body.page-bk-stripe .total-wrap .totals > li > span:first-of-type {
font-size: 0.8rem;
}
.el-input__inner {
border-radius: 0 !important;
}
@ -792,3 +791,7 @@ body.page-account-order-info .product-list .right .name {
body.page-account-order-info .product-list .right .price {
font-weight: bold;
}
body.page-bk-stripe .form-wrap {
max-width: 400px;
}

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

@ -11252,7 +11252,7 @@ textarea.form-control-lg {
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border: 0 solid rgba(0, 0, 0, 0.125);
border-radius: 0;
}
.card > hr {
@ -11304,7 +11304,7 @@ textarea.form-control-lg {
padding: 0.5rem 1rem;
margin-bottom: 0;
background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
border-bottom: 0 solid rgba(0, 0, 0, 0.125);
}
.card-header:first-child {
border-radius: 0 0 0 0;
@ -11313,7 +11313,7 @@ textarea.form-control-lg {
.card-footer {
padding: 0.5rem 1rem;
background-color: rgba(0, 0, 0, 0.03);
border-top: 1px solid rgba(0, 0, 0, 0.125);
border-top: 0 solid rgba(0, 0, 0, 0.125);
}
.card-footer:last-child {
border-radius: 0 0 0 0;
@ -18037,9 +18037,6 @@ textarea.form-control-lg {
border-top: none;
}
.card {
border: none;
}
.card .card-header {
padding: 1rem 1rem 0.3rem;
background-color: #fff;

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

@ -19,3 +19,4 @@ $primary: #fd560f;
@import './element-ui';
@import './order-success';
@import './page-account-order';
@import './page-bk-stripe';

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

@ -50,6 +50,10 @@ $form-floating-height: 50px;
$dropdown-border-color: rgba(0, 0, 0, 0.1);
$dropdown-item-padding-y: .4rem;
$card-border-width: 0;
// $dropdown-divider-bg: rgba(0, 0, 0, 0.1);
@import './bootstrap-icons';
@import 'node_modules/bootstrap-5.1.3/scss/bootstrap';
@ -77,7 +81,7 @@ $dropdown-item-padding-y: .4rem;
.card {
// box-shadow: rgba(0, 0, 0, .1) 0px 1px 4px 0px;
border: none;
// border: none;
.card-header {
padding: 1rem 1rem .3rem;

8
resources/beike/shop/default/css/page-bk-stripe.scss vendored Normal file
View File

@ -0,0 +1,8 @@
@charset "UTF-8";
body.page-bk-stripe {
.form-wrap {
// border: 1px solid #eee;
max-width: 400px;
}
}

247
resources/beike/shop/default/css/page-checkout.scss vendored
View File

@ -1,124 +1,6 @@
@charset "UTF-8";
body.page-checkout {
.checkout-black {
margin-bottom: 2.6rem;
}
.right-column {
position: relative;
@media (min-width: 992px) {
padding-left: 2rem;
}
}
.checkout-title {
border-bottom: 1px solid #e5e5e5;
padding-bottom: 16px;
margin-bottom: 16px;
position: relative;
padding-left: 10px;
&:before {
content: '';
position: absolute;
top: 2px;
left: 0;
background-color: $primary;
width: 3px;
height: 16px;
}
}
.total-wrap {
padding: 1.4rem;
border: 3px solid #efefef;
.card-body {
padding: 0;
}
.card-header {
background-color: #fff;
padding: 0 0 .8rem;
margin-bottom: 1rem;
border-color: #E6E6E6;
h5 {
font-weight: bold;
}
span {
line-height: 24px;
min-width: 24px;
color: #fff;
text-align: center;
}
}
.products-wrap {
border-bottom: 1px solid #E6E6E6;
margin-bottom: 1.3rem;
padding-bottom: .3rem;
max-height: 380px;
overflow-y: auto;
.item {
display: flex;
align-items: center; // flex-start | center
justify-content: space-between; // flex-end | center | space-between
margin-bottom: .8rem;
.image {
display: flex;
align-items: center; // flex-start | center
padding-right: 4px;
img {
width: 40px;
margin-right: 10px;
}
.quantity {
margin-left: 3px;
color: #7a7a7a;
}
}
.price {
color: #7a7a7a;
}
}
}
.totals {
padding-left: 0;
list-style: none;
padding-bottom: .3rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid #E6E6E6;
> li {
display: flex;
align-items: center; // flex-start | center
justify-content: space-between; // flex-end | center | space-between
margin-bottom: 14px;
// flex-wrap: wrap;
> span {
font-weight: bold;
&:first-of-type {
font-size: .8rem;
color: #3f3f3f;
}
&:last-of-type {
color: #dc3545;
}
}
}
}
}
.addresses-wrap {
.item {
position: relative;
@ -236,4 +118,133 @@ body.page-checkout {
}
}
}
}
body.page-checkout, body.page-bk-stripe {
.checkout-black {
margin-bottom: 2.6rem;
}
.right-column {
position: relative;
@media (min-width: 992px) {
padding-left: 2rem;
}
}
.checkout-title {
border-bottom: 1px solid #e5e5e5;
padding-bottom: 16px;
margin-bottom: 16px;
position: relative;
padding-left: 10px;
&:before {
content: '';
position: absolute;
top: 2px;
left: 0;
background-color: $primary;
width: 3px;
height: 16px;
}
}
.total-wrap {
padding: 1.4rem;
border: 3px solid #efefef;
.card-body {
padding: 0;
}
.card-header {
background-color: #fff;
padding: 0 0 .8rem;
margin-bottom: 1rem;
border-bottom: 1px solid #E6E6E6;
h5 {
font-weight: bold;
}
span {
line-height: 24px;
min-width: 24px;
color: #fff;
text-align: center;
}
}
.products-wrap {
border-bottom: 1px solid #E6E6E6;
margin-bottom: 1.3rem;
padding-bottom: .3rem;
max-height: 380px;
overflow-y: auto;
.item {
display: flex;
align-items: center; // flex-start | center
justify-content: space-between; // flex-end | center | space-between
margin-bottom: .8rem;
.image {
display: flex;
align-items: center; // flex-start | center
padding-right: 4px;
img {
width: 40px;
margin-right: 10px;
}
.quantity {
margin-left: 3px;
color: #7a7a7a;
}
}
.price {
color: #7a7a7a;
}
}
}
.totals {
padding-left: 0;
list-style: none;
padding-bottom: .3rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid #E6E6E6;
> li {
display: flex;
align-items: center; // flex-start | center
justify-content: space-between; // flex-end | center | space-between
margin-bottom: 14px;
// flex-wrap: wrap;
&:last-of-type {
font-weight: bold;
> span {
&:last-of-type {
color: #dc3545;
}
}
}
> span {
// font-weight: bold;
&:first-of-type {
font-size: .8rem;
// color: #3f3f3f;
}
&:last-of-type {
// color: #dc3545;
}
}
}
}
}
}

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

@ -15,7 +15,7 @@
<div class="col-12 col-md-9">@include('shared.steps', ['steps' => 3])</div>
</div>
<div class="card order-wrap">
<div class="card order-wrap border">
<div class="card-body">
<div class="order-top">
<div class="left">
@ -34,6 +34,9 @@
<td>支付方式：<span class="fw-bold">{{ $order['payment_method_name'] }}</span></td>
<td><a href="/">查看订单详情</a></td>
</tr>
<tr>
<td><a href="{{ shop_route('orders.pay', [$order['number']]) }}" class="btn btn-primary btn-sm">立即支付</a></td>
</tr>
</tbody>
</table>
</div>

135
themes/default/checkout/payment/bk_stripe.blade.php
View File

@ -1 +1,134 @@
dd
@extends('layout.master')
@section('body-class', 'page-bk-stripe')
@push('header')
<script src="{{ asset('vendor/vue/2.6.14/vue.js') }}"></script>
<script src="{{ asset('vendor/element-ui/2.15.6/js.js') }}"></script>
<link rel="stylesheet" href="{{ asset('vendor/element-ui/2.15.6/css.css') }}">
@endpush
@section('content')
<div class="container" id="bk-stripe-app" v-cloak>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<div class="row justify-content-center">
<div class="col-12 col-md-9">@include('shared.steps', ['steps' => 4])</div>
</div>
<div class="row mt-5">
<div class="col-12 col-md-8">
<div class="checkout-black">
<h5 class="checkout-title">卡信息</h5>
<div class="border px-3 py-2">
<el-form ref="form" label-position="top" :rules="rules" :model="form" class="form-wrap">
<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>
</div>
</div>
</div>
<div class="col-12 col-md-4 right-column">
<div class="card total-wrap">
<div class="card-header d-flex align-items-center justify-content-between">
<h5 class="mb-0">订单结账</h5>
<span class="rounded-circle bg-primary"></span>
</div>
<div class="card-body">
<ul class="totals">
<li><span>订单号</span><span>@{{ source.order.number }}</span></li>
<li><span>运费</span><span>15</span></li>
<li><span>应付总金额</span><span v-text="source.order.total"></span></li>
</ul>
<div class="d-grid gap-2 mt-3">
<button class="btn btn-primary" type="button" @click="checkedBtnCheckoutConfirm('form')">支付</button>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('add-scripts')
<script>
new Vue({
el: '#bk-stripe-app',
data: {
form: {
cardnum: '',
year: '',
month: '',
cvv: '',
remenber: false,
},
source: {
order: @json($order ?? null),
},
rules: {
cardnum: [{required: true, message: '请输入卡号', trigger: 'blur'}, ],
cvv: [{required: true, message: '请输入安全码', trigger: 'blur'}, ],
year: [{required: true, message: '请选择年', trigger: 'blur'}, ],
month: [{required: true, message: '请选择月', trigger: 'blur'}, ],
}
},
beforeMount () {
},
methods: {
checkedBtnCheckoutConfirm(form) {
this.$refs[form].validate((valid) => {
if (!valid) {
this.$message.error('请检查表单是否填写正确');
return;
}
$http.post(`orders/${this.source.order.number}/pay`, this.form).then((res) => {
console.log(res)
})
});
}
}
})
</script>
@endpush

10
themes/default/shared/steps.blade.php
View File

@ -1,14 +1,18 @@
<div class="steps-wrap">
<div class="{{ $steps == 1 || $steps == 2 || $steps == 3 ? 'active':'' }}">
<div class="{{ $steps == 1 || $steps == 2 || $steps == 3 || $steps == 4 ? 'active':'' }}">
<div class="number-wrap"><span class="number">1</span></div>
<span class="title">购物车</span>
</div>
<div class="{{ $steps == 2 || $steps == 3 ? 'active':'' }}">
<div class="{{ $steps == 2 || $steps == 3 || $steps == 4 ? 'active':'' }}">
<div class="number-wrap"><span class="number">2</span></div>
<span class="title">结账</span>
</div>
<div class="{{ $steps == 3 ? 'active':'' }}">
<div class="{{ $steps == 3 || $steps == 4 ? 'active':'' }}">
<div class="number-wrap"><span class="number">3</span></div>
<span class="title">提交成功</span>
</div>
<div class="{{ $steps == 4 ? 'active':'' }}">
<div class="number-wrap"><span class="number">4</span></div>
<span class="title">付款</span>
</div>
</div>