358 lines
13 KiB
Vue
358 lines
13 KiB
Vue
<template>
|
||
<view class="boos">
|
||
<!-- 店铺交易数据 -->
|
||
<view class="statistical">
|
||
<!-- <view class="item">
|
||
<view class="number">{{wordData.top.barter_total || 0}}</view>
|
||
<view class="text">总易货额</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="number">{{wordData.top.trading_day || 0}}</view>
|
||
<view class="text">今日交易额</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="number">{{wordData.top.eb_in || 0}}</view>
|
||
<view class="text">E货额度收入</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="number">{{wordData.top.cash_in || 0}}</view>
|
||
<view class="text">现金收入</view>
|
||
</view> -->
|
||
</view>
|
||
<!-- 店铺概况 -->
|
||
<view class="general">
|
||
<view class="general-box member">
|
||
<view class="member-name">
|
||
会员中心
|
||
</view>
|
||
<view class="member-cont">
|
||
<view class="member-tips">
|
||
<view class="member-tips-title" v-if="wordData.grade == 1">会员升级/续费</view>
|
||
<view class="member-tips-title" v-else-if="wordData.grade == 2">续费</view>
|
||
<view class="member-tips-title" v-else>企业会员</view>
|
||
<view class="member-tips-time nowrap">有效期：{{wordData.identity}}</view>
|
||
</view>
|
||
<view class="member-btn" v-if="wordData.grade == 3">
|
||
<image class="member-btn-icon" src="../../static/icons/store_icon_vip.png" mode="aspectFill"></image>
|
||
<view class="member-btn-name">已满级</view>
|
||
</view>
|
||
<view class="member-btn" @click="$Router.push({name: 'Vip'})" v-else>
|
||
<image class="member-btn-icon" src="../../static/icons/store_icon_vip.png" mode="aspectFill"></image>
|
||
<view class="member-btn-name">去升级</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="general-box">
|
||
<view class="general-item" @click="$Router.push({name: 'Visitors'})">
|
||
<view class="number">{{wordData.middle.visitors || 0}}</view>
|
||
<view class="text">访客统计</view>
|
||
</view>
|
||
<view class="general-item" @click="$Router.push({name: 'Customer'})">
|
||
<view class="number">{{wordData.middle.clinch || 0}}</view>
|
||
<view class="text">成交客户</view>
|
||
</view>
|
||
<!-- <view class="general-item" @click="$Router.push({name: 'Employees'})">
|
||
<view class="number">{{wordData.middle.employees || 0}}</view>
|
||
<view class="text">员工数量</view>
|
||
</view>
|
||
<view class="general-item">
|
||
<view class="number">{{wordData.middle.hold || 0}}</view>
|
||
<view class="text">权证持有</view>
|
||
</view>
|
||
<view class="general-item">
|
||
<view class="number">{{wordData.middle.transfer || 0}}</view>
|
||
<view class="text">转让权证</view>
|
||
</view> -->
|
||
<view class="general-item">
|
||
<view class="number">{{wordData.top.order_total.toFixed(2) || 0}}</view>
|
||
<view class="text">总交易额</view>
|
||
</view>
|
||
<view class="general-item" @click="$Router.push({name: 'GoodsMag'})">
|
||
<view class="number">{{wordData.middle.sale || 0}}</view>
|
||
<view class="text">在售权证</view>
|
||
</view>
|
||
<view class="general-item" @click="$Router.push({name: 'Return'})">
|
||
<view class="number">{{wordData.order.deliver || 0}}</view>
|
||
<view class="text">退货单处理</view>
|
||
</view>
|
||
<view class="general-item" @click="$Router.push({name: 'Deliver'})">
|
||
<view class="number">{{wordData.order.refund || 0}}</view>
|
||
<view class="text">发货单处理</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 店铺订单管理 -->
|
||
<!-- <view class="tool-flex order">
|
||
<view class="order-item" @click="$Router.push({name: 'Order', params: {type: 'deliver'}})">
|
||
<view class="number" v-if="wordData.order.not_shipped > 0">{{wordData.order.not_shipped}}</view>
|
||
<image class="icon" src="@/static/icons/order_icon_01.png" mode="aspectFill"></image>
|
||
<view class="title">待发货</view>
|
||
</view>
|
||
<view class="order-item" @click="$Router.push({name: 'Order', params: {type: 'shipped'}})">
|
||
<view class="number" v-if="wordData.order.already_shipped > 0">{{wordData.order.already_shipped}}</view>
|
||
<image class="icon" src="@/static/icons/order_icon_02.png" mode="aspectFill"></image>
|
||
<view class="title">已发货</view>
|
||
</view>
|
||
<view class="order-item" @click="$Router.push({name: 'Order', params: {type: 'sign'}})">
|
||
<view class="number" v-if="wordData.order.not_pick > 0">{{wordData.order.not_pick}}</view>
|
||
<image class="icon" src="@/static/icons/order_icon_03.png" mode="aspectFill"></image>
|
||
<view class="title">待提货</view>
|
||
</view>
|
||
<view class="order-item" @click="$Router.push({name: 'Order', params: {type: 'take'}})">
|
||
<view class="number" v-if="wordData.order.already_pick > 0">{{wordData.order.already_pick}}</view>
|
||
<image class="icon" src="@/static/icons/order_icon_00.png" mode="aspectFill"></image>
|
||
<view class="title">已提货</view>
|
||
</view>
|
||
<view class="order-item" @click="$Router.push({name: 'Sales'})">
|
||
<view class="number" v-if="wordData.order.after_sale > 0">{{wordData.order.after_sale}}</view>
|
||
<image class="icon" src="@/static/icons/order_icon_04.png" mode="aspectFill"></image>
|
||
<view class="title">退换货</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- 店铺工具 -->
|
||
<view class="tool-flex store">
|
||
<view class="store-item" @click="$Router.push({name: 'Verification'})">
|
||
<image class="icon" src="@/static/icons/tool_icon_00.png" mode="aspectFill"></image>
|
||
<view class="title">扫码验证</view>
|
||
</view>
|
||
<view class="store-item" @click="$Router.push({name: 'GoodsMag'})">
|
||
<image class="icon" src="@/static/icons/tool_icon_01.png" mode="aspectFill"></image>
|
||
<view class="title">商品权证</view>
|
||
</view>
|
||
<view class="store-item" @click="$Router.push({name: 'CouponsMag'})">
|
||
<image class="icon" src="@/static/icons/tool_icon_02.png" mode="aspectFill"></image>
|
||
<view class="title">优惠券管理</view>
|
||
</view>
|
||
<view class="store-item" @click="$Router.push({name: 'Collection'})">
|
||
<image class="icon" src="@/static/icons/tool_icon_03.png" mode="aspectFill"></image>
|
||
<view class="title">收款管理</view>
|
||
</view>
|
||
</view>
|
||
<!-- 企业营销工具管理 -->
|
||
<view class="tool-flex store">
|
||
<view class="store-item" @click="$Router.push({name: 'Basics'})">
|
||
<image class="icon" src="@/static/icons/tool_icon_04.png" mode="aspectFill"></image>
|
||
<view class="title">基础信息</view>
|
||
</view>
|
||
<!-- <view class="store-item">
|
||
<image class="icon" src="@/static/icons/tool_icon_05.png" mode="aspectFill"></image>
|
||
<view class="title">智能名片</view>
|
||
</view> -->
|
||
<view class="store-item" @click="$Router.push({name: 'Spread'})">
|
||
<image class="icon" src="@/static/icons/tool_icon_06.png" mode="aspectFill"></image>
|
||
<view class="title">营销推广码</view>
|
||
</view>
|
||
<view class="store-item" @click="$Router.push({name: 'shopLists'})">
|
||
<image class="icon" src="@/static/icons/tool_icon_07.png" mode="aspectFill"></image>
|
||
<view class="title">部门/门店</view>
|
||
</view>
|
||
<view class="store-item" @click="$Router.push({name: 'Employees'})">
|
||
<image class="icon" src="@/static/icons/tool_icon_08.png" mode="aspectFill"></image>
|
||
<view class="title">员工管理</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name:"store-boss",
|
||
props:{
|
||
// 工作台信息
|
||
wordData:{
|
||
type: Object,
|
||
default: () => {
|
||
return {
|
||
top : {},
|
||
middle : {},
|
||
order : {}
|
||
}
|
||
}
|
||
},
|
||
identityData:{
|
||
type: Object,
|
||
default: () => {
|
||
return {
|
||
time : {},
|
||
grade : {}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.boos{
|
||
// 店铺统计
|
||
.statistical{
|
||
display: flex;
|
||
background: $text-price;
|
||
padding: $padding ($padding/2) $padding*2;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
.item{
|
||
width: calc(25% - #{$padding});
|
||
text-align: center;
|
||
color: white;
|
||
margin: 0 $margin / 2;
|
||
.number{
|
||
font-weight: bold;
|
||
font-size: $title-size;
|
||
}
|
||
.text{
|
||
font-size: $title-size-sm;
|
||
}
|
||
}
|
||
}
|
||
// 店铺概况
|
||
.general{
|
||
margin: -$margin*2 $margin 0 $margin;
|
||
.general-box{
|
||
background-color: white;
|
||
border-radius: $radius/2;
|
||
display: flex;
|
||
padding: $padding $padding/2;
|
||
flex-wrap: wrap;
|
||
.general-item{
|
||
width: 33.33%;
|
||
text-align: center;
|
||
padding: $padding/2;
|
||
box-sizing: border-box;
|
||
.number{
|
||
font-weight: bold;
|
||
font-size: $title-size;
|
||
line-height: 50rpx;
|
||
}
|
||
.text{
|
||
font-size: $title-size-sm;
|
||
color: $text-gray;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 新增
|
||
.member {
|
||
margin-bottom: $margin;
|
||
font-size: 26rpx;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
background-image: linear-gradient(to right, #fbdba7, #ddb264);
|
||
position: relative;
|
||
color: #533108;
|
||
height: 120rpx;
|
||
.member-name {
|
||
width: 160rpx;
|
||
line-height: 120rpx;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
position: relative;
|
||
&::after {
|
||
position: absolute;
|
||
content: '';
|
||
right: 0;
|
||
top: 25%;
|
||
height: 50%;
|
||
width: 4rpx;
|
||
background-color: #d8b66f;
|
||
}
|
||
}
|
||
.member-cont {
|
||
display: flex;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
padding-left: 180rpx;
|
||
padding-right: 20rpx;
|
||
box-sizing: border-box;
|
||
.member-tips {
|
||
flex: 1;
|
||
padding-top: 30rpx;
|
||
.member-tips-time {
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
.member-btn{
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
border-radius: 10rpx;
|
||
margin-top: 30rpx;
|
||
padding: 0 15rpx;
|
||
background-image: linear-gradient(to right, #6f747f, #3e4655);
|
||
display: flex;
|
||
.member-btn-name {
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
background: linear-gradient(to right, #f6d8ac, #c39f63);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
.member-btn-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin: 15rpx 10rpx 0 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 店铺工具
|
||
.tool-flex{
|
||
background: white;
|
||
border-radius: $radius/2;
|
||
padding: $padding/2;
|
||
margin: $margin;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.store-item{
|
||
padding: $padding/2;
|
||
text-align: center;
|
||
width: 25%;
|
||
box-sizing: border-box;
|
||
.icon{
|
||
width: 68rpx;
|
||
height: 68rpx;
|
||
vertical-align: top;
|
||
}
|
||
.title{
|
||
font-size: $title-size-sm;
|
||
color: $text-gray;
|
||
padding-top: $padding/3;
|
||
}
|
||
}
|
||
.order-item{
|
||
position: relative;
|
||
padding: $padding/2;
|
||
text-align: center;
|
||
width: 20%;
|
||
box-sizing: border-box;
|
||
.icon{
|
||
width: 58rpx;
|
||
height: 58rpx;
|
||
vertical-align: top;
|
||
}
|
||
.title{
|
||
font-size: $title-size-sm;
|
||
color: $text-gray;
|
||
}
|
||
.number{
|
||
position: absolute;
|
||
top: 10rpx;
|
||
left: calc( 50% + 10rpx );
|
||
font-size: $title-size-sm;
|
||
background: $text-price;
|
||
color: white;
|
||
height: 30rpx;
|
||
line-height: 30rpx;
|
||
border-radius: 15rpx;
|
||
min-width: 30rpx;
|
||
z-index: 9;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|