Skip to content

M
member
Commit 69debeaa by caoyanzhi
Options

update: 客户详情调整

parent 815cec63
Showing with 266 additions and 104 deletions
src/components/allCustomers/components/icon-label-value.vue 0 → 100644
<template>
<div class="icon-label-value">
<slot name="icon"></slot>
<div class="icon-info">
<div class="info-label">
<slot name="label">{{ label }}</slot>
</div>
<div class="info-value">{{ value }}</div>
</div>
</div>
</template>
<script>
export default {
name: 'IconLabelValue',
props: {
label: String,
value: String
}
}
</script>
<style lang="scss" scoped>
.icon-label-value {
display: inline-flex;
justify-content: flex-start;
align-items: stretch;
.icon-info {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
margin-left: 20px;
.info-label {
font-size: 14px;
font-weight: 400;
color: #303133;
line-height: 20px;
}
.info-value {
font-size: 20px;
font-weight: bold;
color: #303133;
line-height: 24px;
}
}
}
</style>
src/components/allCustomers/customerDetail.less
.max1600 {
max-width: 1600px;
}
.fz12{
font-size: 12px;
}
.fz14{
font-size: 14px;
}
.customer-contain-wrap {
padding: 20px;
background: #fff;
......@@ -252,6 +246,174 @@
margin: 0 20px;
}
}
// 客户记录-积分相关
.scores {
flex-shrink: 0;
margin-right: 20px;
width: 420px;
.score-icon, .card-icon, .balance-icon {
display: flex;
justify-content: center;
align-items: center;
width: 56px;
height: 56px;
border-radius: 6px;
i {
font-size: 30px;
}
}
&.is-clique {
padding: 17px 13px 17px 18px;
border-radius: 8px;
border: 1px solid #E4E7ED;
.score-icon, .card-icon, .balance-icon {
width: 48px;
height: 48px;
}
.scores-clique {
margin-bottom: 22px;
.score-icon {
color: #FF9D1A;
background: #FFF5E9;
}
}
.scores-box {
margin-bottom: 22px;
}
}
&:not(.is-clique) .scores-box, &:not(.is-clique) .cards-box {
padding: 25px 13px 25px 18px;
border-radius: 8px;
border: 1px solid #E4E7ED;
}
.scores-box {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
cursor: pointer;
.score-icon {
color: #FFCB48;
background: rgba(255, 203, 72, 0.15);
}
.scores-info {
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
width: 326px;
.score-detail {
.score-detail-item {
&+.score-detail-item {
margin-top: 9px;
}
.score-detail-label {
display: inline-block;
margin-right: 16px;
width: 84px;
font-size: 13px;
font-weight: 400;
color: #606266;
line-height: 18px;
vertical-align: middle;
}
.score-detail-value {
font-size: 16px;
font-weight: bold;
color: #303133;
line-height: 19px;
vertical-align: middle;
}
}
}
}
}
.cards-box {
display: flex;
justify-content: flex-start;
align-items: center;
.card-item, .balance-item {
display: flex;
justify-content: space-between;
align-items: center;
width: 50%;
cursor: pointer;
}
.card-item {
margin-right: 30px;
.card-icon {
color: #26DAD0;
background: #ECF8FE;
}
}
.balance-item {
.balance-icon {
color: #5C89FF;
background: #ECF8FE;
}
}
}
}
// 客户记录-订单相关
.orders {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
flex-shrink: 0;
width: 420px;
.order-total {
margin-bottom: 11px;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
width: 100%;
cursor: pointer;
.order-total-icon {
display: flex;
justify-content: center;
align-items: center;
width: 56px;
height: 56px;
color: #597EF7;
background: #ECF8FE;
border-radius: 6px;
i {
font-size: 30px;
}
}
}
.order-item {
margin: 0 6px 4px 0;
padding: 4px 4px 8px;
width: 114px;
border-radius: 4px;
cursor: pointer;
&:nth-child(3n + 1) {
margin-right: 0;
}
&:hover {
background: #F2F3F5;
.order-item-count {
color: #2F54EB;
}
}
.order-item-label {
font-size: 13px;
font-weight: 400;
color: #606266;
line-height: 18px;
}
.order-item-count {
margin-top: 8px;
font-size: 20px;
font-weight: bold;
color: #303133;
line-height: 24px;
}
}
}
.flex-item {
display: flex;
......@@ -288,23 +450,6 @@
color: #5c89ff;
}
}
&.coupon {
background: #ecf8fe;
.icon-01_kaquanguanli {
font-size: 40px;
color: #26dad0;
}
}
&.balance {
background: #ecf8fe;
.icon-chuzhizhanghu {
font-size: 32px;
color: #5c89ff;
}
}
}
.middle {
......@@ -357,24 +502,6 @@
height: 26px;
}
&.integral_clique {
background: #FFF5E9;
.icon-jifenjiabei {
font-size: 20px;
color: #FF9D1A;
}
}
&.integral {
background: #FFF7E3;
.icon-jifenduihuan {
font-size: 32px;
color: #ffcb48;
}
}
.iconfont {
......@@ -408,10 +535,6 @@
line-height: 28px;
vertical-align: middle;
}
&.transaction-item .icon-wrap {
background: #ecf8fe;
}
}
}
......
src/components/allCustomers/info.js
......@@ -5,6 +5,7 @@ import customergradeDialog from './components/customergradeDialog.vue';
import customermainstoreDialog from './components/customermainstoreDialog.vue';
import customersubstoreDialog from './components/customersubstoreDialog.vue';
import customerlabelDialog from './components/customerlabelDialog.vue';
import IconLabelValue from './components/icon-label-value.vue';
import defaultImg from '../../../static/img/default.png';
import { mapState } from 'vuex';
import url from '../../components/axios/url';
......@@ -108,67 +109,39 @@ export default {
name: 'customerRecord',
class: 'customer-record-contain max1600',
childrenList: {
//积分
point:[
{
label: '集团积分',
icon: 'icon-jifenjiabei',
iconTheme: 'integral_clique',
key: 'cliqueMemberIntegral',
path: '',
},
{
label: '商户积分',
icon: 'icon-jifenduihuan',
iconTheme: 'integral',
key: 'totalPoint',
path: '/integralDataPage',
},
],
// 资产信息
assets: [
{
label: '卡券',
icon: 'icon-01_kaquanguanli',
iconTheme: 'coupon',
key: 'couponCount',
path: '/cardvoucher',
},
{
label: '储值余额',
icon: 'icon-chuzhizhanghu',
iconTheme: 'balance',
key: 'storedValue',
path: '',
},
],
// 交易记录
transaction: [
{
label: '门店订单',
icon: 'icon-mendianbaojiadan',
key: 'numOfSale',
path: '/consumption',
},
{
label: '微盟订单',
icon: 'icon-a-weimeng2',
key: 'weimobMallNum',
path: '/wmDetail',
},
{
label: '达摩商城订单',
icon: '',
key: 'wechatMallNum',
path: '/infoMall',
},
{
label: '其他订单',
icon: 'icon-dingdan-copy',
key: 'otherMallNum',
path: '/otherDetail',
},
{ label: '客户订单', key: '', path: '/order-list?type=0', icon: 'icon-mendianbaojiadan' },
{ label: '门店订单', key: 'numOfSale', path: '/order-list?type=1' },
{ label: '达摩微商城', key: 'wechatMallNum', path: '/order-list?type=2' },
{ label: '微盟订单', key: 'weimobMallNum', path: '/order-list?type=3' },
{ label: '天猫订单', key: '', path: '/order-list?type=4' },
{ label: '抖音订单', key: '', path: '/order-list?type=5' },
{ label: '其它订单', key: 'otherMallNum', path: '/order-list?type=6' },
// {
// label: '门店订单',
// icon: 'icon-mendianbaojiadan',
// key: 'numOfSale',
// path: '/consumption',
// },
// {
// label: '微盟订单',
// icon: 'icon-a-weimeng2',
// key: 'weimobMallNum',
// path: '/wmDetail',
// },
// {
// label: '达摩商城订单',
// icon: '',
// key: 'wechatMallNum',
// path: '/infoMall',
// },
// {
// label: '其他订单',
// icon: 'icon-dingdan-copy',
// key: 'otherMallNum',
// path: '/otherDetail',
// },
],
// 交互记录
interactive: [
......@@ -518,5 +491,6 @@ export default {
customermainstoreDialog,
customersubstoreDialog,
customerlabelDialog,
IconLabelValue
},
};
src/components/allCustomers/order-list.vue 0 → 100644
<template>
<div>订单列表</div>
</template>
<script>
export default {
name: 'OrderList'
}
</script>
\ No newline at end of file
src/router/index.js
......@@ -53,6 +53,13 @@ export const constantRouterMap = [
},
},
{
path: '/order-list',
component: _import('allCustomers', 'order-list'),
meta: {
title: '订单详情'
}
},
{
path: '/consumption',
component: _import('allCustomers', 'consumption'),
meta: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment