Skip to content

7
7-Eleven
Commit 1edf109c by 谢中龙
Options

导购相关优化

parent b25f72bd
Showing with 295 additions and 234 deletions
src/project.config.json
......@@ -39,7 +39,7 @@
"list": []
},
"miniprogram": {
"current": 46,
"current": 47,
"list": [
{
"id": -1,
......@@ -356,10 +356,11 @@
"scene": null
},
{
"id": -1,
"name": "业绩",
"id": 47,
"name": "我的",
"pathName": "shoppingGuid/page/pages/achievement/achievement",
"query": ""
"query": "",
"scene": null
},
{
"id": 48,
......
src/shoppingGuid/component/tabBar/tabBar.wxml
......@@ -16,19 +16,21 @@
</view> -->
<!-- 新的tab bar -->
<!-- <cover-view class='bottom'> -->
<view class='bottom-tab-bar'>
<view class='tab-bar-item'
bindtap='onTapToPage'
wx:key="tabkey"
wx:for="{{tabBar}}"
wx:for-index="idx"
data-index="{{idx}}"
data-item="{{item}}"
wx:for-item="item">
<view class='out' wx:if="{{idx == 2}}">
<image src='{{item.isActive ? item.activeUrl : item.defaultUrl}}' mode='widthFix'></image>
</view>
<view class='hover' wx:if="{{idx == 2}}"></view>
<image wx:if="{{idx != 2}}" src='{{item.isActive ? item.activeUrl : item.defaultUrl}}' mode='widthFix'></image>
<view class='tab-bar-item'
bindtap='onTapToPage'
wx:key="tabkey"
wx:for="{{tabBar}}"
wx:for-index="idx"
data-index="{{idx}}"
data-item="{{item}}"
wx:for-item="item">
<view class='out' wx:if="{{idx == 2}}">
<image src='{{item.isActive ? item.activeUrl : item.defaultUrl}}' mode='widthFix'></image>
</view>
<view class='hover' wx:if="{{idx == 2}}"></view>
<image wx:if="{{idx != 2}}" src='{{item.isActive ? item.activeUrl : item.defaultUrl}}' mode='widthFix'></image>
</view>
</view>
\ No newline at end of file
</view>
<!-- </cover-view> -->
\ No newline at end of file
src/shoppingGuid/component/tabBar/tabBar.wxss
......@@ -2,6 +2,15 @@
page{
background: rgba(0, 0, 0, 0.04);
}
.bottom{
width: 100%;
height: 100rpx;
position: fixed;
bottom: 0;
left: 0;
}
.bottom-tab-bar{
position: fixed;
bottom: 0;
......
src/shoppingGuid/page/pages/achievement/achievement.js
......@@ -22,7 +22,24 @@ wxService.page({
info : {},
achievement : {},
memberPreview : {},
achivementType : 1,//1 个人 2门店
chartImg : ''
},
//切换个人和门店
onTapChangeAchivementData(e){
let index = e.currentTarget.dataset.index;
if(index == 1){
this.setData({
achivementType : index
});
}
else if(index == 2){
wx.showToast({
title: '对不起，暂时还不能查看门店数据',
icon : 'none'
});
}
},
//切换
......@@ -61,14 +78,14 @@ wxService.page({
*/
onLoad: function (options) {
let currentUserInfo = wx.getStorageSync('guidBaseInfo');
// if (!currentUserInfo) { //未登录成功
// wx.redirectTo({
// url: '/shoppingGuid/page/pages/welcomGuider/welcomGuider',
// });
// return ;
// }
if (!currentUserInfo) { //未登录成功
wx.redirectTo({
url: '/shoppingGuid/page/pages/welcomGuider/welcomGuider',
});
return ;
}
currentUserInfo = { member: { qiyeInfo: { name : '张三'}}}
// currentUserInfo = { member: { qiyeInfo: { name : '张三'}}}
let userInfo = wx.getStorageSync('guidInfo');
if (currentUserInfo.member) {
......@@ -112,6 +129,10 @@ wxService.page({
//初始化barchart
initBarChart(series){
wx.showLoading({
title: '加载中..',
});
let self = this;
let width = app.globalData.systemInfo.screenWidth - 30;
let chart = new wxCharts({
canvasId: 'columnCanvas',
......@@ -138,6 +159,28 @@ wxService.page({
width: width,
height: 250,
});
let systemInfo = wx.getSystemInfoSync();
//监听wxchart渲染完成 把 canvas保存成图片 用图片展示
chart.addEventListener('renderComplete', () => {
wx.canvasToTempFilePath({
width: systemInfo.windowWidth - 30,
height : 300,
canvasId: 'columnCanvas',
success : res => {
let url = res.tempFilePath;
self.setData({
chartImg : url
});
},
fail : err => {
console.log('err--',err)
},
complete : () => {
wx.hideLoading();
}
});
});
},
//导购招募会员概览
......
src/shoppingGuid/page/pages/achievement/achievement.wxml
<!--shoppingGuid/page/pages/achievement/achievement.wxml-->
<!-- 业绩界面 -->
<view class='main-container'>
<!-- 个人信息 -->
<view class='info'>
<view class='center'>
<view class='my-conainer'>
<!-- 我的信息 -->
<view class='top-info'>
<view class='info'>
<image src='{{avator}}' mode='aspectFit'></image>
<view class='rg-name'>
<view>{{info.member.name}}</view>
<view>{{info.memberCardNo}}</view>
<view class='info-rg'>
<view class='my-name'>{{info.member.name}}</view>
<view class='my-rank'>
<text wx:if="{{memberPreview.rank}}">今日我的招募排名 ，第 <label>{{memberPreview.rank}}</label> 位</text>
<text wx:else>当前暂无您的排名信息</text>
</view>
</view>
<!-- 今日招募 -->
<view class='today-re'>{{memberPreview.recruitAmountToday}}</view>
</view>
</view>
<!-- 今日排行 -->
<view class='today-top'>
<view class='items'>
<view class='number'>{{memberPreview.rank}}</view>
<view>我的今日招募排名</view>
<!-- tab -->
<view class='my-achive'>
<view class='my-achive-item' data-index="1" bindtap='onTapChangeAchivementData'>
<view class='type-item {{achivementType == 1 ? "active" : ""}}' >个人</view>
</view>
<view class='items'>
<view class='number2'>{{memberPreview.recruitAmountToday}}</view>
<view>今日招募</view>
<view class='my-achive-item' data-index="2" bindtap='onTapChangeAchivementData'>
<view class='type-item {{achivementType == 2 ? "active" : ""}}'>门店</view>
</view>
</view>
<!-- 招募总量 -->
<view class='total' bindtap='onTapToMyMemberList'>
<text>招募总量：</text>
<view class='number'>
<text class='total-colors'>{{memberPreview.recruitTotal}} </text>
<image src='/assets/imgs/shoppingGuide/right.png' mode='aspectFit'></image>
</view>
</view>
<!-- b本月 -->
<view class='month'>
<view class='header'>本月业绩</view>
<view class='month-data'>
<view class='data-item'>
<text class='data-item-title'>本月业绩（元）</text>
<text class='data-item-number'>{{achievement.achievementMonth}}</text>
<!-- 业绩 -->
<view class='achivement'>
<view class='number-container'>
<view class='number-item'>
<view>本月业绩（元）</view>
<view class='number' style='color:#F7B500;'>{{achievement.achievementMonth}}</view>
</view>
<view class='number-item'>
<view>本月新增会员</view>
<view class='number' style='color:#FA6400;'>{{memberPreview.recruitAmountMonth}}</view>
</view>
<view class='data-item'>
<text class='data-item-title'>本月新增会员</text>
<text class='data-item-number'>{{memberPreview.recruitAmountMonth}}</text>
<view class='number-item'>
<view>本月新增订单</view>
<view class='number' style='color:#FA6400;'>{{achievement.orderAmount}}</view>
</view>
<view class='data-item'>
<text class='data-item-title'>本月新增订单</text>
<text class='data-item-number'>{{achievement.orderAmount}}</text>
</view>
<!-- <view class='list-item'>
<text>我的金币</text>
<label>123435</label>
</view> -->
<view class='list-item' bindtap='onTapToMyMemberList'>
<text>招募总量</text>
<view class='rec-number'>
<label>{{memberPreview.recruitTotal}} </label>
<image src='/assets/imgs/shoppingGuide/right.png' mode='aspectFit'></image>
</view>
</view>
</view>
<!-- 数据筛选 -->
<view class='data-filter'>
<view class='data-filter-item {{item.isActive ? "active" : ""}}'
<!-- 月统计 -->
<view class='my-achive'>
<view class='third-item {{item.isActive ? "active" : ""}}'
wx:for="{{filterBar}}"
wx:key="filter"
bindtap='onTapChangeFilter'
......@@ -61,30 +62,37 @@
wx:for-index="idx"
wx:for-item="item">{{item.name}}</view>
</view>
<!-- 订单数据概览 -->
<view class='order-data'>
<view class='order-data-title'>订单数据概览</view>
<view class='statistic-data'>
<view class='month'>
<!-- 月统计 -->
<view class='list-item'>
<text style='color:#333333;'>订单数据概览</text>
</view>
<view class='list-item'>
<text>总销售额（￥）</text>
<text class='number'>{{currentOrderData.salesVolume}}</text>
<label>{{currentOrderData.salesVolume}}</label>
</view>
<view class='statistic-data'>
<view class='list-item'>
<text>退货额（￥） </text>
<text class='number'>{{currentOrderData.refundVolume}}</text>
<label>{{currentOrderData.refundVolume}}</label>
</view>
<view class='statistic-data'>
<text>退款率</text>
<text class='number'>{{currentOrderData.refundRate}}</text>
<view class='list-item'>
<text>退款率 </text>
<label>{{currentOrderData.refundRate}}</label>
</view>
</view>
<!-- 柱状图 -->
<view class='chart-con'>
<view class='title'>会员数据概览</view>
<!-- 会员数据概览 -->
<view class='member-data'>
<view class='data-title'>会员数据概览</view>
<view class='chart'>
<canvas canvas-id="columnCanvas" disable-scroll="true" class="columnCanvas"></canvas>
<canvas canvas-id="columnCanvas" disable-scroll="true" class="columnCanvas" hidden='{{chartImg}}'></canvas>
<image src='{{chartImg}}' wx:if="{{chartImg}}" mode='aspectFit'></image>
</view>
</view>
</view>
<!-- tabbar -->
<tab-bar index="{{4}}"></tab-bar>
<tab-bar index="{{4}}"></tab-bar>
\ No newline at end of file
src/shoppingGuid/page/pages/achievement/achievement.wxss
......@@ -11,241 +11,232 @@ view{
-webkit-box-sizing: border-box;
}
.main-container{
.my-conainer{
width: 100%;
height: auto;
}
.info{
.my-conainer .top-info{
width: 100%;
height: 150rpx;
background: #ffffff;
margin-bottom: 10rpx;
height: auto;
padding: 20rpx;
padding-bottom: 0;
}
.my-conainer .top-info .info{
width: 100%;
height: 180rpx;
border-top-left-radius: 15rpx;
border-top-right-radius: 15rpx;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 20px 0px rgba(0, 145, 255, 0.26);
position: relative;
display: flex;
padding: 30rpx;
align-items: center;
}
.info .center{
width: 94%;
.my-conainer .top-info .info .today-re{
position: absolute;
height: 150rpx;
left: 3%;
background: #0091FF ;
top: 10rpx;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
padding: 30rpx;
width: 120rpx;
height: 120rpx;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-image: url(https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/7_3_0/icon_tpday_recuit.png);
z-index: 2;
right: 30rpx;
top: 0;
padding: 45rpx 10rpx 30rpx 10rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 32rpx;
font-weight: bold;
color: #ffffff;
}
.info .center image{
display: block;
.my-conainer .top-info .info image{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.info .center .rg-name{
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
color: #ffffff;
padding-left: 10rpx;
font-size: 28rpx;
.my-conainer .top-info .info .info-rg{
padding-left: 20rpx;
}
.today-top{
display: flex;
padding: 30rpx;
background: #ffffff;
margin-bottom: 20rpx;
.my-conainer .top-info .info .info-rg .my-name{
font-size: 28rpx;
color: #333333;
margin-bottom: 8rpx;
}
.today-top .items{
flex: 1;
.my-conainer .top-info .info .info-rg .my-rank{
font-size: 24rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.today-top .items .number{
color: #0091FF;
font-weight: bold;
font-size: 28rpx;
margin-bottom: 8rpx;
}
.today-top .items .number2{
color: #333;
font-weight: bold;
margin-bottom: 8rpx;
font-size: 28rpx;
.my-conainer .top-info .info .info-rg .my-rank label{
color: #FA6400 ;
}
.today-top .items:first-child{
border-right: solid 4rpx #eeeeee;
.my-conainer .my-achive{
position: relative;
width: 100%;
height: 84rpx;
background: #f2f2f2;
z-index: 1;
display: flex;
padding: 20rpx;
}
/* 招募总量： */
.total{
.my-conainer .my-achive .my-achive-item{
flex: 0;
min-width: 50%;
max-width: 50%;
height: 100%;
font-size: 24rpx;
display: flex;
width: 100%;
background: #ffffff;
padding: 30rpx;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
margin-bottom: 20rpx;
justify-content: center;
}
.total:active{
background: #f2f2f2;
.my-conainer .my-achive .my-achive-item .type-item{
padding: 0 30rpx;
height: 44rpx;
display: flex;
align-items: center;
justify-content: center;
}
.number{
flex: 1;
.my-conainer .my-achive .third-item{
padding: 0 30rpx;
height: 44rpx;
display: flex;
justify-content: flex-end;
align-items: center;
justify-content: center;
font-size: 24rpx;
}
.number image{
width: 32rpx;
height: 32rpx;
margin-left: 30rpx;
.my-conainer .my-achive .third-item.active{
border-radius: 20px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 10px 0px rgba(0, 145, 255, 0.26);
color: #0091FF;
}
.total .number .total-colors{
color: #FA6400 ;
font-size: 28rpx;
font-weight: 550;
.my-conainer .my-achive .my-achive-item .type-item.active{
border-radius: 20px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 10px 0px rgba(0, 145, 255, 0.26);
color: #0091FF;
}
/* 本月业绩 */
.month{
width: 100%;
background: #ffffff;
padding: 30rpx;
font-size: 28rpx;
}
.month .header{
padding: 0 20rpx;
padding-bottom: 20rpx;
color: #333333;
border-bottom: solid 1px #eeeeee;
.my-conainer .my-achive .my-achive-item:first-child{
border-right: solid 4rpx #dddddd;
}
.month .month-data{
padding: 20rpx;
display: flex;
margin-top: 20rpx;
/* 业绩 */
.achivement{
width: 100%;
height: auto;
padding: 30rpx;
padding-bottom: 0;
background: #ffffff;
}
.month .month-data .data-item{
flex: 1;
.achivement .number-container{
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-content: space-around;
margin-bottom: 40rpx;
}
.month .month-data .data-item .data-item-title{
font-size: 24rpx;
.achivement .number-container .number-item{
color: #999999;
margin-bottom: 8rpx;
font-size: 24rpx;
}
.month .month-data .data-item .data-item-number{
font-size: 40rpx;
color: #FA6400 ;
font-weight: 550;
.achivement .number-container .number-item .number{
font-size: 32rpx;
font-weight: bold;
text-align: center;
margin-top: 10rpx;
}
.data-filter{
.list-item{
width: 100%;
height: 80rpx;
background: -webkit-linear-gradient(left,rgb(0,145,255),rgba(0,145,255,0.8),rgba(0,145,255,0.3));
height: auto;
padding: 30rpx 10rpx;
border-top: solid 2rpx #eeeeee;
display: flex;
align-items: center;
padding: 0 30rpx;
justify-content: space-between;
font-size: 24rpx;
}
.data-filter .data-filter-item{
height: 50rpx;
width: 120rpx;
border-radius: 25rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #ffffff;
.list-item text{
color: #999999;
}
.data-filter .data-filter-item.active{
background: #ffffff;
color: rgb(0,145,255);
.achivement .list-item label{
color: #333333;
font-weight: bold;
}
/* 订单数据概览 */
.order-data{
/* 月统计 */
.month{
width: 100%;
height: auto;
padding: 0 30rpx;
background: #ffffff;
font-size: 24rpx;
margin-bottom: 20rpx;
color: #333333;
}
.order-data .order-data-title{
padding: 30rpx 20rpx;
font-size: 28rpx;
border-bottom: solid 1px #eeeeee;
.month .list-item{
border-bottom: solid 2rpx #eeeeee;
border-top: none;
}
.statistic-data{
padding: 30rpx 20rpx;
font-size: 24rpx;
.month .list-item:last-child{
border-bottom: none;
}
.rec-number{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: solid 1px #eeeeee;
color: #666666;
flex: 1;
justify-content: flex-end;
}
.statistic-data .number{
font-weight: bold;
.rec-number:active{
opacity: 0.7;
}
.statistic-data:last-child{
border-bottom: none;
.rec-number image{
width: 28rpx;
height: 28rpx;
margin-left: 10rpx;
}
/* 图表 */
.chart-con{
width: 100%;
height: auto;
padding: 0 30rpx;
/* 会员数据 */
.member-data{
margin-top: 20rpx;
background: #ffffff;
font-size: 24rpx;
margin-bottom: 20rpx;
color: #333333;
padding-bottom: 20px;
padding: 30rpx;
}
.chart-con .title{
padding: 30rpx 20rpx;
font-size: 28rpx;
border-bottom: solid 1px #eeeeee;
margin-bottom: 20rpx;
.member-data .data-title{
padding-bottom: 20rpx;
border-bottom: solid 2rpx #eeeeee;
color: #333333;
font-weight: 24rpx;
}
.chart-con .chart{
.member-data .chart{
width: 100%;
height: auto;
position: relative;
......@@ -253,7 +244,7 @@ view{
bottom: 0;
left: 0;
right: 0;
padding-top: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
......@@ -264,4 +255,9 @@ view{
.chart canvas{
width: 100%;
height: 500rpx;
}
.member-data .chart image{
width: 100%;
height: 500rpx;
}
\ No newline at end of file
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