This commit is contained in:
pushuo 2022-07-05 20:43:29 +08:00
parent 76a4713960
commit 6f27f76f80
9 changed files with 247 additions and 193 deletions

View File

@ -118,6 +118,86 @@
top: 0;
}
.account-sides-info .head {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 1rem;
background-color: #fff;
}
.account-sides-info .head .portrait {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.14);
border: 2px solid #FFFFFF;
overflow: hidden;
margin-bottom: 1rem;
}
.account-sides-info .head .account-name {
font-weight: bold;
font-size: 1rem;
margin-bottom: 0.4rem;
}
.account-sides-info .head .account-email {
color: #666666;
}
.account-sides-info .account-links > a {
color: #4B566B;
border: none;
padding: 0.8rem 1rem;
border-bottom: 1px solid #EEEEEE;
transition: all 0.2s ease-in-out;
text-decoration: none !important;
}
.account-sides-info .account-links > a:hover {
background-color: #E9ECEF;
}
.account-sides-info .account-links > a.active {
background-color: #E9ECEF;
color: #4B566B;
}
.account-sides-info .account-links > a .badge {
color: #fff;
}
.account-card {
border: none;
}
.account-card .card-header {
border: none;
background-color: #fff;
padding-top: 1rem;
}
.account-card .card-header h6 {
border-left: 3px solid #fd560f;
padding-left: 6px;
font-weight: bold;
font-size: 1rem;
}
.account-card .card-items > a {
width: 25%;
color: #444444;
text-decoration: none !important;
}
.account-card .card-items > a i {
font-size: 2rem;
}
.account-card .card-items > a span {
display: flex;
}
.account-card .order-wrap {
background-color: #f6f8f9;
padding: 2rem 1rem;
}
.account-card .order-wrap .icon i {
font-size: 4.5rem;
color: #777;
}
.account-card .order-wrap .text {
font-size: 1rem;
}
header {
background: #fff;
}
@ -294,85 +374,6 @@ body.page-login .card {
body.page-account {
background-color: #F7F8FA;
}
body.page-account .account-info .head {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 1rem;
background-color: #fff;
}
body.page-account .account-info .head .portrait {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.14);
border: 2px solid #FFFFFF;
overflow: hidden;
margin-bottom: 1rem;
}
body.page-account .account-info .head .account-name {
font-weight: bold;
font-size: 1rem;
margin-bottom: 0.4rem;
}
body.page-account .account-info .head .account-email {
color: #666666;
}
body.page-account .account-info .account-links > a {
color: #4B566B;
border: none;
padding: 0.8rem 1rem;
border-bottom: 1px solid #EEEEEE;
transition: all 0.2s ease-in-out;
text-decoration: none !important;
}
body.page-account .account-info .account-links > a:hover {
background-color: #E9ECEF;
}
body.page-account .account-info .account-links > a.active {
background-color: #E9ECEF;
color: #4B566B;
}
body.page-account .account-info .account-links > a .badge {
color: #fff;
}
body.page-account .account-card {
border: none;
}
body.page-account .account-card .card-header {
border: none;
background-color: #fff;
padding-top: 1rem;
}
body.page-account .account-card .card-header h6 {
border-left: 3px solid #fd560f;
padding-left: 6px;
font-weight: bold;
font-size: 1rem;
}
body.page-account .account-card .card-items > a {
width: 25%;
color: #444444;
text-decoration: none !important;
}
body.page-account .account-card .card-items > a i {
font-size: 2rem;
}
body.page-account .account-card .card-items > a span {
display: flex;
}
body.page-account .account-card .order-wrap {
background-color: #f6f8f9;
padding: 2rem 1rem;
}
body.page-account .account-card .order-wrap .icon i {
font-size: 4.5rem;
color: #777;
}
body.page-account .account-card .order-wrap .text {
font-size: 1rem;
}
body.page-product .product-image .left {
margin-right: 1rem;
}
@ -710,3 +711,7 @@ body.page-order-success .order-wrap .card-body .order-bottom {
margin-left: calc(2rem + 80px);
line-height: 2;
}
body.page-account-order-list {
background-color: #F7F8FA;
}

View File

@ -83,10 +83,6 @@
<el-input class="mb-0" type="number" v-model="dialog.form.use_point_factor" placeholder="使用积分系数"></el-input>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-switch v-model="dialog.form.status" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addCustomersFormSubmit('form')">保存</el-button>
<el-button @click="closeCustomersDialog('form')">取消</el-button>
@ -121,7 +117,6 @@
discount_factor: '', // 折扣率
reward_point_factor: '', // 奖励积分系数使用积分系数
use_point_factor: '', // 使用积分系数
status: 1,
},
},
@ -150,6 +145,7 @@
name: {},
description: {},
total: group.total, //消费额度
level: group.level, //消费额度
discount_factor: group.discount_factor, // 折扣率
reward_point_factor: group.reward_point_factor, // 奖励积分系数使用积分系数
use_point_factor: group.use_point_factor, // 使用积分系数

View File

@ -6,105 +6,4 @@ body.page-account {
footer {
// background-color: #fff;
}
.account-info {
.head {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 1rem;
background-color: #fff;
.portrait {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.14);
border: 2px solid #FFFFFF;
overflow: hidden;
margin-bottom: 1rem;
}
.account-name {
font-weight: bold;
font-size: 1rem;
margin-bottom: 0.4rem;
}
.account-email {
color: #666666;
}
}
.account-links {
> a {
color: #4B566B;
border: none;
padding: 0.8rem 1rem;
border-bottom: 1px solid #EEEEEE;
transition: all .2s ease-in-out;
text-decoration: none !important;
&:hover {
background-color: #E9ECEF;
}
&.active {
background-color: #E9ECEF;
color: #4B566B;
}
.badge {
color: #fff;
}
}
}
}
.account-card {
border: none;
.card-header {
border: none;
background-color: #fff;
padding-top: 1rem;
h6 {
border-left: 3px solid $primary;
padding-left: 6px;
font-weight: bold;
font-size: 1rem;
}
}
.card-items {
> a {
width: 25%;
color: #444444;
text-decoration: none !important;
i {
font-size: 2rem;
}
span {
display: flex;
}
}
}
.order-wrap {
background-color: #f6f8f9;
padding: 2rem 1rem;
.icon {
i {
font-size: 4.5rem;
color: #777;
}
}
.text {
font-size: 1rem;
}
}
}
}

View File

@ -18,3 +18,4 @@ $primary: #fd560f;
@import './page-checkout';
@import './element-ui';
@import './order-success';
@import './page-account-order-list';

View File

@ -116,4 +116,105 @@
.fixed-top-line-fixed {
position: fixed;
top: 0;
}
.account-sides-info {
.head {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 1rem;
background-color: #fff;
.portrait {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.14);
border: 2px solid #FFFFFF;
overflow: hidden;
margin-bottom: 1rem;
}
.account-name {
font-weight: bold;
font-size: 1rem;
margin-bottom: 0.4rem;
}
.account-email {
color: #666666;
}
}
.account-links {
> a {
color: #4B566B;
border: none;
padding: 0.8rem 1rem;
border-bottom: 1px solid #EEEEEE;
transition: all .2s ease-in-out;
text-decoration: none !important;
&:hover {
background-color: #E9ECEF;
}
&.active {
background-color: #E9ECEF;
color: #4B566B;
}
.badge {
color: #fff;
}
}
}
}
.account-card {
border: none;
.card-header {
border: none;
background-color: #fff;
padding-top: 1rem;
h6 {
border-left: 3px solid $primary;
padding-left: 6px;
font-weight: bold;
font-size: 1rem;
}
}
.card-items {
> a {
width: 25%;
color: #444444;
text-decoration: none !important;
i {
font-size: 2rem;
}
span {
display: flex;
}
}
}
.order-wrap {
background-color: #f6f8f9;
padding: 2rem 1rem;
.icon {
i {
font-size: 4.5rem;
color: #777;
}
}
.text {
font-size: 1rem;
}
}
}

View File

@ -0,0 +1,5 @@
@charset "UTF-8";
body.page-account-order-list {
background-color: #F7F8FA;
}

View File

@ -13,7 +13,7 @@
<div class="row">
<div class="col-12 col-md-3">
<div class="account-info">
<div class="account-sides-info">
<div class="head">
<div class="portrait"><img src="{{ $avatar }}" class="img-fluid"></div>
<div class="account-name">{{ $name }}</div>
@ -22,7 +22,7 @@
<nav class="list-group account-links">
<a class="list-group-item d-flex justify-content-between align-items-center active" href="">
<span>个人中心</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('account.order.index') }}">
<span>我的订单</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>

View File

@ -1,10 +1,57 @@
@extends('layout.master')
@section('body-class', 'page-account-order-list')
@section('content')
<div class="container">
<h1>我的订单</h1>
@foreach ($orders as $order)
<div class="col-6 col-md-3">{{ $order->number }}</div>
@endforeach
<div class="container">
<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>
{{-- @foreach ($orders as $order)
<div class="col-6 col-md-3">{{ $order->number }}</div>
@endforeach --}}
<div class="row">
<div class="col-12 col-md-3">
<div class="account-sides-info">
<div class="head">
<div class="portrait"><img src="" class="img-fluid"></div>
<div class="account-name"></div>
<div class="account-email"></div>
</div>
<nav class="list-group account-links">
<a class="list-group-item d-flex justify-content-between align-items-center active" href="">
<span>个人中心</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('account.order.index') }}">
<span>我的订单</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('logout') }}">
<span>退出登录</span></a>
</nav>
</div>
</div>
<div class="col-12 col-md-9">
<div class="card mb-4 account-card">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">我的订单</h6>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
@endsection

View File

@ -67,7 +67,7 @@
<li class="dropdown-item"><h6 class="mb-0">Pu Shuo</h6></li>
<li><hr class="dropdown-divider"></li>
<li><a href="{{ shop_route('account.index') }}" class="dropdown-item"><i class="bi bi-person me-1"></i> 个人中心</a></li>
<li><a href="{{ shop_route('account.index') }}" class="dropdown-item"><i class="bi bi-clipboard-check me-1"></i> 我的订单</a></li>
<li><a href="{{ shop_route('account.order.index') }}" class="dropdown-item"><i class="bi bi-clipboard-check me-1"></i> 我的订单</a></li>
<li><a href="{{ shop_route('account.index') }}" class="dropdown-item"><i class="bi bi-heart me-1"></i> 我的收藏</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="{{ shop_route('logout') }}" class="dropdown-item"><i class="bi bi-box-arrow-left me-1"></i> 退出登录</a></li>