liutong
/
H5_QiCaiYao
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
H5端齐采药项目,uniapp框架
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 Commits
1 Branch
0 Tags
28 MiB
 
 
 
 
 
Tree: 81ef64fdbd
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '81ef64fdbd'
${ noResults }
H5_QiCaiYao/page_salesman_customer/Customer_details/portrait.vue

759 lines
18 KiB
Raw Blame History

<template>
<view class="page_salesman_reportForm">
<view class="private">
<div class="df aic jcsb">
<div class="private-type">店铺类型</div>
<div class="private-two">私人医院</div>
</div>
<div class="xdkm"></div>
<div class="df aic jcsb">
<div class="private-type">店铺标签</div>
<div class="private-two">潜在客户</div>
</div>
</view>
<view class="ordering-cycle">
<div class="order-goods">订货周期</div>
<div class="xgsd"></div>
<div class="df aic">
<div class="order-period">历史订货周期</div>
<div class="order-sky">10天</div>
</div>
<div class="df aic">
<div class="order-last">最后订货</div>
<div class="order-specific">2022-09-12</div>
</div>
<div class="df aic">
<div class="order-period mt">距离最后订货</div>
<div class="order-sky mt">20天<span>(已超期20天为订货)</span></div>
</div>
</view>
<view class="box">
<div class="df aic jcsb">
<div class="box-goods">订货统计</div>
<div class="df box-time">
<span>2022.09.12-2023.10.12</span>
<u-icon name="arrow-down"></u-icon>
</div>
</div>
<div class="kcxs"></div>
<div class="df">
<div class="order-goods f1 df fdc jcsa aic">
<div class="Order-quantity">订单量</div>
<div class="time">30</div>
<div class="percentage">比上周期上升0%</div>
</div>
<div class="order-goods f1 df fdc jcsa aic">
<div class="Order-quantity">订单金额</div>
<div class="time">5000</div>
<div class="percentage">比上周期上升0%</div>
</div>
</div>
<div class="chart">
<lineChart ref="lineChart"></lineChart>
</div>
<div class="df order">
<div class="df aic jcsa order-btn1">订单量</div>
<div class="df aic jcsa order-btn2">订单金额</div>
</div>
</view>
<view class="Recent-orders">
<div class="order-goods">近期订单<span>(近30天有效订单)</span></div>
<div class="kxsax"></div>
<div class="number df">
<div class="df">
<div class="number-goods">订单编号</div>
<div class="number-figure">2384485495858</div>
</div>
</div>
<div class="number df">
<div class="df">
<div class="number-goods">下单时间</div>
<div class="number-figure">2022-09-12 18:21:32</div>
</div>
</div>
<div class="number df aic jcsb">
<div class="df">
<div class="number-goods">合计1种商品</div>
<div class="number-figure">订单金额￥1000</div>
</div>
<div class="number-accomplish" style="color: #21BBF3;">订单已完成</div>
</div>
<div class="kxsax"></div>
<div class="number df">
<div class="df">
<div class="number-goods">订单编号</div>
<div class="number-figure">2384485495858</div>
</div>
</div>
<div class="number df">
<div class="df">
<div class="number-goods">下单时间</div>
<div class="number-figure">2022-09-12 18:21:32</div>
</div>
</div>
<div class="number df aic jcsb">
<div class="df">
<div class="number-goods">合计1种商品</div>
<div class="number-figure">订单金额￥1000</div>
</div>
<div class="number-accomplish" style="color: #FF7D02;">订单待发货</div>
</div>
</view>
<view class="preference">
<div class="df aic jcsb">
<div class="preference-goods">订单偏好</div>
<div class="df preference-time">
<span>2022.09.12-2023.10.12</span>
<div><u-icon name="arrow-down"></u-icon></div>
</div>
</div>
<div class="kcxs"></div>
<div class="df product">
<!-- <div class="product-btn1 df aic jcsa">商品</div>
<div class="product-btn2 df aic jcsa">分类</div> -->
<u-tabs :list="list1" lineWidth=0 :activeStyle="{
width:'142rpx',
height:'50rpx',
background:'#21BBF3',
borderRadius:'30rpx',
display:'flex',
alignItems:'center',
justifyContent:'space-around',
color:'#fff',
fontWeight:'400',
fontSize:'20rpx',
lineHeight:'28rpx',
}" :inactiveStyle="{
width:'142rpx',
height:'50rpx',
background:'#FFFFFF',
borderRadius:'30rpx',
border:'2rpx solid #EBEBEB',
fontSize:'20rpx',
fontWeight:'400',
color:'#222222',
lineHeight:'28rpx',
display:'flex',
alignItems:'center',
justifyContent:'space-around',
}" @click="click"></u-tabs>
</div>
<commodity v-if="index==0"></commodity>
<classify v-if="index==1"></classify>
<div class="See-more df aic jcsa">
<div class="df aic" @click="btn">查看更多<u-icon name="arrow-right"></u-icon></div>
</div>
</view>
<view class="preference">
<div class="df aic jcsb">
<div class="preference-goods">关注商品<span>(近30天收藏/浏览过的)</span></div>
</div>
<div class="kcxs"></div>
<div class="df Product-Introduction">
<div class="Product-img">
<div class="Product-collect" style="background: #FF7D02;">收藏</div>
<image :src="$util.img(`/upload/weapp/pageSalesman/customer/add.png`)"></image></div>
<div class="Product-name">
<div class="Product-eijnaij">路易拉菲 法国 原瓶进口红酒…</div>
<div class="Product-production df aic">
<div class="Product-Shandong">产地：山东</div>
<div class="Product-specifications">规格：0.5kg/袋</div>
</div>
<div class="unit-price">
<div>￥28.88<span>/袋</span></div>
</div>
</div>
<div class="time df aic">
×4
</div>
</div>
<div class="df Product-Introduction">
<div class="Product-img">
<div class="Product-collect" style="background: #00C594;">浏览</div>
<image :src="$util.img(`/upload/weapp/pageSalesman/customer/add.png`)"></image></div>
<div class="Product-name">
<div class="Product-eijnaij">路易拉菲 法国 原瓶进口红酒…</div>
<div class="Product-production df aic">
<div class="Product-Shandong">产地：山东</div>
<div class="Product-specifications">规格：0.5kg/袋</div>
</div>
<div class="unit-price">
<div>￥28.88<span>/袋</span></div>
</div>
</div>
<div class="time df aic">
×4
</div>
</div>
<div class="See-more df aic jcsa">
<div class="df aic">查看更多<u-icon name="arrow-right"></u-icon></div>
</div>
</view>
<view class="Sign-in">
<div class="order-goods">登录统计<span>(近30天的登录)</span></div>
<div class="kxsax"></div>
<div class="number df">
<div class="df">
<div class="number-goods">总登录次数</div>
<div class="number-figure">10次</div>
</div>
</div>
<div class="number df">
<div class="df">
<div class="number-goods">最后登录时间</div>
<div class="number-figureas">2022-09-12</div>
</div>
</div>
<div class="number df aic jcsb">
<div class="df">
<div class="number-goods">距最后登录</div>
<div class="number-figure">20天</div>
</div>
</div>
</view>
<view class="Sign-in">
<div class="order-goods">欠款统计<span>(客户结算方式：后付)</span></div>
<div class="kxsax"></div>
<div class="number df">
<div class="df">
<div class="number-goods">欠款金额</div>
<div class="number-figure">5000.00</div>
</div>
</div>
<div class="number df">
<div class="df">
<div class="number-goods">下次换款日期</div>
<div class="number-figureas">2022-09-12</div>
</div>
</div>
<div class="number df aic jcsb">
<div class="df">
<div class="number-goods">可用优惠卷</div>
<div class="number-figure">3张</div>
</div>
</div>
</view>
</view>
</template>
<script>
import lineChart from "./lineChart.vue"
import commodity from "./commodity.vue"
import classify from "./classify.vue"
export default {
components: {
lineChart,commodity,classify
},
data() {
return {
time:'',
index:0,
list1:[
{name:'商品'},
{name:'分类'}
],
statisticsList: [{
label: '订单笔数',
value: 5829
},
{
label: '订单金额',
value: 5829
},
{
label: '退货单数',
value: 5829
},
{
label: '退货金额',
value: 5829
},
]
};
},
methods:{
click(item) {
console.log('item', item.index);
this.index=item.index
},
btn(){
uni.navigateTo({
// url:this.list[this.current.URL]
url:'../Order-preference/Order-preference'
})
}
}
}
</script>
<style lang="scss">
::v-deep{
.u-tabs__wrapper__nav{
width: 100% !important;
}
.u-tabs__wrapper__nav__item{
padding: 0 94rpx !important;
}
}
.page_salesman_reportForm {
padding: 32rpx;
.box {
margin-top: 24rpx;
border-radius: 16rpx;
padding: 32rpx;
width: 702rpx;
background: #FFFFFF;
border-radius: 16rpx;
box-sizing: border-box;
.box-goods{
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 42rpx;
}
.bto-time{
span{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 34rpx;
margin-right: 12rpx;
}
}
.kcxs{
width: 638rpx;
height: 2rpx;
background: #F2F2F2;
border-radius: 16rpx;
margin: 28rpx 0 32rpx 0;
}
.order-goods{
.Order-quantity{
font-size: 30rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 42rpx;
}
.time{
font-size: 30rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #222222;
line-height: 34rpx;
margin: 20rpx 0;
}
.percentage{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FE8B25;
line-height: 34rpx;
}
}
.order{
margin: 40rpx 0 8rpx 0;
.order-btn1{
width: 142rpx;
height: 50rpx;
background: #21BBF3;
border-radius: 30px;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 28rpx;
margin: 0 60rpx 0 148rpx;
}
.order-btn2{
width: 142rpx;
height: 50rpx;
background: #FFFFFF;
border-radius: 30rpx;
border: 2rpx solid #EBEBEB;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 28rpx;
}
}
}
.private{
width: 702rpx;
height: 206rpx;
background: #FFFFFF;
border-radius: 24rpx;
padding: 32rpx;
box-sizing: border-box;
.private-type{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 40rpx;
}
.private-two{
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #585858;
line-height: 40rpx;
}
.xdkm{
margin: 30rpx 0;
width: 641rpx;
height: 1rpx;
background: #E8E8E8;
border-radius: 2rpx;
}
}
.ordering-cycle{
width: 702rpx;
height: 332rpx;
background: #FFFFFF;
border-radius: 16rpx;
padding: 32rpx;
box-sizing: border-box;
margin-top: 24rpx;
.order-goods{
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 42rpx;
}
.xgsd{
width: 638rpx;
height: 2rpx;
background: #F2F2F2;
border-radius: 16rpx;
margin: 28rpx 0;
}
.mt{
margin-top: 20rpx;
}
.order-period{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
}
.order-sky{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
margin-left: 72rpx;
span{
color: #999;
margin-left: 12rpx;
}
}
.order-last{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
margin-top: 24rpx;
}
.order-specific{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
margin-left: 128rpx;
margin-top: 24rpx;
}
}
.preference{
width: 702rpx;
background: #FFFFFF;
border-radius: 16rpx;
padding: 32rpx;
margin-top: 24rpx;
box-sizing: border-box;
.preference-goods{
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 42rpx;
span{
color: #999999;
}
}
.preference-time{
span{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 34rpx;
margin-right: 12rpx;
}
}
.kcxs{
width: 638rpx;
height: 2rpx;
background: #F2F2F2;
border-radius: 16rpx;
margin: 28rpx 0 30rpx 0;
}
.product{
.product-btn1{
width: 142rpx;
height: 50rpx;
background: #21BBF3;
border-radius: 30rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 28rpx;
margin: 0 60rpx 0 148rpx;
}
.product-btn2{
width: 142rpx;
height: 50rpx;
background: #FFFFFF;
border-radius: 30rpx;
border: 2rpx solid #EBEBEB;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 28rpx;
}
}
.Product-Introduction{
margin-top: 32rpx;
.time{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 34rpx;
margin-left: 20rpx;
}
.Product-img{
width: 176rpx;
height: 176rpx;
border-radius: 8rpx;
position: relative;
image{
width: 176rpx;
height: 176rpx;
border-radius: 8rpx;
}
.Product-collect{
position: absolute;
width: 66rpx;
height: 36rpx;
border-radius: 0rpx 21rpx 21rpx 0rpx;
opacity: 0.83;
font-size: 20rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 28rpx;
left: 0;
top: 12rpx;
z-index: 10;
}
}
.Product-name{
margin-left: 24rpx;
.Product-eijnaij{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 40rpx;
margin-top: 20rpx;
}
.unit-price{
font-size: 24rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #F33B50;
line-height: 40rpx;
margin-top: 46rpx;
span{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 34rpx;
}
}
.Product-production{
margin-top: 16rpx;
.Product-Shandong{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 34rpx;
}
.Product-specifications{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 34rpx;
margin-left: 16rpx;
}
}
.Product-time{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 40rpx;
margin-top: 52rpx;
}
}
}
.See-more{
margin-top: 32rpx;
div{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
}
}
}
.Recent-orders{
width: 702rpx;
height: 558rpx;
background: #FFFFFF;
border-radius: 16rpx;
padding: 32rpx;
box-sizing: border-box;
margin-top: 24rpx;
.order-goods{
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 42rpx;
span{
color: #999999;
margin-left: 10rpx;
}
}
.kxsax{
width: 638rpx;
height: 2rpx;
background: #F2F2F2;
border-radius: 16rpx;
margin: 28rpx 0 0 0;
}
.number{
margin-top: 28rpx;
.number-goods{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
}
.number-figure{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
margin-left: 44rpx;
}
.number-accomplish{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 34rpx;
}
}
}
.Sign-in{
width: 702rpx;
height: 332rpx;
background: #FFFFFF;
border-radius: 16rpx;
padding: 32rpx;
box-sizing: border-box;
margin-top: 24rpx;
.order-goods{
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 42rpx;
span{
color: #999999;
margin-left: 10rpx;
}
}
.kxsax{
width: 638rpx;
height: 2rpx;
background: #F2F2F2;
border-radius: 16rpx;
margin: 28rpx 0 0 0;
}
.number{
margin-top: 28rpx;
.number-goods{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
}
.number-figure{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
margin-left: 100rpx;
}
.number-figureas{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
margin-left: 72rpx;
}
.number-accomplish{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 34rpx;
}
}
}
}
</style>