Skip to content

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

导购相关优化

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