admin/lcb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加环形进度组件，增加卖场评分页面

Browse Source
This commit is contained in:
xiaolian
2024-09-26 15:12:14 +08:00
committed by lcc
parent 8884afa9fa
commit e68a4311f9
73 changed files with 3889 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index/index.js
+30
View File
@@ -66,6 +66,29 @@ Page({
// '修改【保单上传】的相应内容，上传后需补充相应保单信息。',
],
},
//0924 新增参数
data_bg_img: _.config.licheImgUrl + 'score/index-panel-bg.png',
icon_trend_up: _.config.licheImgUrl + 'score/score-trend-up.png',
icon_trend_down: _.config.licheImgUrl + 'score/score-trend-down.png',
icon_score_top_1: _.config.licheImgUrl + 'score/score-top-1.png',
icon_score_top_2: _.config.licheImgUrl + 'score/score-top-2.png',
icon_score_top_3: _.config.licheImgUrl + 'score/score-top-3.png',
score_index_bg_up: _.config.licheImgUrl + 'score/score-bg-up.jpg',
score_index_bg_down: _.config.licheImgUrl + 'score/score-bg-down.jpg',
score_detail_bg_up: _.config.licheImgUrl + 'score/score-detail-up.png',
score_detail_bg_down: _.config.licheImgUrl + 'score/score-detail-up.jpg',
score_up_color: '#31cbad',
score_down_color: '#ff895b',
score_trend: 1, //用这个参数控制样式：1 上升 、2 下降
score_role_tab: [{
id: 1,
name: '个人'
},{
id: 2,
name: '门店'
}],
score_role_cur: 0
//0924 end
},
onLoad(options) {
@@ -518,6 +541,13 @@ Page({
})
},
//0924
changeScoreRoleTab(e){
this.setData({
score_role_cur:e.currentTarget.dataset.index
})
},
//页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh: function () {
this.setData({
pages/index/index.json
+2 -1
View File
@@ -5,6 +5,7 @@
"backgroundColor": "#ffffff",
"backgroundColorTop": "#1a1c26",
"usingComponents": {
"ec-canvas": "../../ecCanvas/components/ec-canvas/ec-canvas"
"ec-canvas": "../../ecCanvas/components/ec-canvas/ec-canvas",
"van-circle": "/vant/circle/index"
}
}
pages/index/index.wxml
+50 -13
View File
@@ -39,25 +39,62 @@
</view>
</view>
<!-- 数据看板 -->
<view class="bg-fff mb30 inner30 box-shadow-000-10-10 ulib-r10">
<view bindtap="pushLink" data-url="/pages/storeData/index" wx:if="{{userInfo.group_id>1}}">
<view class="fn-flex fn-flex-middle">
<text class="font-36">数据看板</text>
<view class="fn-flex-item text-right pt10">
<view class="font-22 color-999">详细
<i class="iconfont icon-gengduo ml5 text-middle font-26"></i>
<view class="bg-fff mb30 box-shadow-000-10-10 ulib-r10 bg-size-fullwidth bg-no-repeat bg-pos-top" style="background-image:url({{data_bg_img}});">
<view class="inner30">
<view bindtap="pushLink" data-url="/pages/storeData/index" wx:if="{{userInfo.group_id>1}}">
<view class="fn-flex fn-flex-middle">
<text class="font-36">今日看榜</text>
<view class="fn-flex-item text-right pt10">
<view class="font-22 color-999">详情<i class="iconfont icon-gengduo ml5 text-middle font-26"></i></view>
</view>
</view>
</view>
<view class="fn-flex fn-flex-wrap pt20 pb10 text-center">
<block wx:for="{{userCal.statistics}}" wx:key='index'>
<view class="wp25 relative pt20 pb20 {{index>3?'bts-1-eb':''}} {{index%4<3?'brs-1-eb':''}}" bindtap="pushLink" data-url="{{item.today.url}}">
<view class="text-bold"><text class="font-36">{{item.today.value}}</text><text class="font-28 color-666">/{{item.month.value}}</text></view>
<view class="font-22"><text>{{item.today.title}}</text><text class="color-666">/{{item.month.title}}</text></view>
</view>
</block>
</view>
</view>
<view class="fn-flex fn-flex-wrap pt20 pb10 text-center">
<block wx:for="{{userCal.statistics}}" wx:key='index'>
<view class="wp25 relative pt20 pb20 {{index>3?'bts-1-eb':''}} {{index%4<3?'brs-1-eb':''}}" bindtap="pushLink" data-url="{{item.today.url}}">
<view class="text-bold"><text class="font-36">{{item.today.value}}</text><text class="font-28 color-666">/{{item.month.value}}</text></view>
<view class="font-22"><text>{{item.today.title}}</text><text class="color-666">/{{item.month.title}}</text></view>
<!-- 0924 新增运营分 up:#31cbad, down:#ff895b-->
<view class="relative inner30" style="--circle-text-color:{{score_trend>1?score_down_color:score_up_color}};--linearcolor:{{score_trend>1?score_down_color:score_up_color}};">
<view class="absolute left-0 top-0 right-0 bottom-0 bg-custom-linear-bottom opacity-10"></view>
<view class="fn-flex fn-flex-middle fn-flex-between relative">
<text class="font-36">最新运营分</text>
<view class="text-right pt10">
<view class="ulib-r10 fn-flex overflowhidden font-24">
<block wx:for="{{score_role_tab}}" wx:key="index">
<view data-index="{{index}}" bindtap="changeScoreRoleTab" class="{{score_role_cur===index?'bg-ccc':'bg-fff'}} transition-all pl15 pr15 pt5 pb5">{{item.name}}</view>
</block>
</view>
</view>
</block>
</view>
<view class="fn-flex fn-flex-middle pt20 pb20 relative">
<view class="mr20 pt20">
<van-circle
value="{{ 30 }}"
stroke-width="10"
text="50"
layer-color="#ebebeb"
size="60"
color="{{score_trend>1?score_down_color:score_up_color}}"></van-circle>
</view>
<view class="fn-flex-item line-height-16">
<view class="fn-flex fn-flex-middle font-30">
<image src="{{score_trend>1?icon_trend_down:icon_trend_up}}" class="img-28x28 block mr10"/>
<text>较上日上升100分</text>
</view>
<view class="font-24 color-999">
<view>*更新于09月10日</view>
<view>当前显示为昨日运营情况评分</view>
</view>
</view>
<view data-url="" bindtap="pushLink" class="font-30 color-999 text-middle"><text>详情</text><i class="iconfont icon-gengduo ml5 font-30"></i></view>
</view>
</view>
<!-- 0924 end -->
</view>
<!--客户代办事项-->
<view class="bg-fff mb30 box-shadow-000-10-10 ulib-r10">
pages/score/detail.js
+146
View File
@@ -0,0 +1,146 @@
// pages/score/detail.js
import _ from '../../commons/js/commons'
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
data_bg_img: _.config.licheImgUrl + 'score/index-panel-bg.png',
icon_trend_up: _.config.licheImgUrl + 'score/score-trend-up.png',
icon_trend_down: _.config.licheImgUrl + 'score/score-trend-down.png',
icon_score_top_1: _.config.licheImgUrl + 'score/score-top-1.png',
icon_score_top_2: _.config.licheImgUrl + 'score/score-top-2.png',
icon_score_top_3: _.config.licheImgUrl + 'score/score-top-3.png',
score_index_bg_up: _.config.licheImgUrl + 'score/score-bg-up.jpg',
score_index_bg_down: _.config.licheImgUrl + 'score/score-bg-down.jpg',
score_detail_bg_up: _.config.licheImgUrl + 'score/score-detail-up.png',
score_detail_bg_down: _.config.licheImgUrl + 'score/score-detail-down.png',
score_up_color: '#31cbad',
score_down_color: '#ff895b',
score_trend: 1, //用这个参数控制样式：1 上升 、2 下降
list: [{
name: '基础分',
score: 60,
trend: 1,
data: [{
name: '正常开工',
score: '+180'
}]
}, {
name: '线索分',
score: 660,
trend: 1,
data: [{
name: '线索建档',
score: '+180'
},{
name: '添加微信',
score: '+180'
},{
name: '跟进小记',
score: '+180'
},{
name: '语音通话',
score: '+180'
},{
name: '二次派发',
score: '+180'
},{
name: '首次跟进',
score: '+180'
}]
}, {
name: '订单分',
score: 260,
trend: 1,
data: [{
name: '成交数',
score: '+180'
},{
name: '成交率',
score: '+180'
},{
name: '开票率',
score: '+180'
},{
name: '交付率',
score: '+180'
}]
}, {
name: '扣分项',
score: 260,
trend: 2,
data: [{
name: '逾期未跟进',
score: '-80'
},{
name: '战败未处理',
score: '-180'
},{
name: '开票后录单',
score: '-180'
},{
name: '建档即订单',
score: '-180'
}]
}]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
pages/score/detail.json
+3
View File
@@ -0,0 +1,3 @@
{
"usingComponents": {}
}
pages/score/detail.wxml
+46
View File
@@ -0,0 +1,46 @@
<!-- pages/score/detail.wxml -->
<view class="container relative" style="min-height:100vh;--circle-text-color:{{score_trend>1?score_down_color:score_up_color}};--linearcolor:{{score_trend>1?score_down_color:score_up_color}};">
<view class="absolute left-0 top-0 right-0 bg-custom-linear-bottom opacity-60" style="height:10vh;"></view>
<view class="relative">
<view class="inner40 relative fn-flex fn-flex-middle fn-flex-between">
<view class="text-left">
<view class="font-28 color-666">昨日运营分</view>
<view class="font-72" style="color:{{score_trend>1?score_down_color:score_up_color}}">798</view>
</view>
<view class="text-right">
<view class="font-28 color-666">上一日运营分</view>
<view class="font-72" style="color:{{score_trend>1?score_down_color:score_up_color}}">798</view>
</view>
<view
class="ulib-r750 fn-flex fn-flex-middle absolute box-center-middle font-28 pl20 pr20 pt10 pb10 overflowhidden"
style="border:2rpx solid {{score_trend>1?score_down_color:score_up_color}};"
>
<view class="absolute left-0 top-0 right-0 bottom-0 opacity-10" style="background-color:var(--circle-text-color);"></view>
<image src="{{score_trend>1?icon_trend_down:icon_trend_up}}" class="relative img-28x28 block mr10"/>
<text class="color-666 relative">较上日上升100分</text>
</view>
</view>
<view class="ml30 mr30 pb30">
<view class="font-40 text-center color-333 mb30">本期分数组成</view>
<view class="bg-fff box-shadow-000-10-10 ulib-r10">
<block wx:for="{{list}}" wx:key="index">
<view class="inner40 bbs-1-f6 fn-flex fn-flex-middle">
<view class="mr100 relative" style="width:154rpx;height:120rpx;">
<image class="img-154x154 block" src="{{item.trend>1?score_detail_bg_down:score_detail_bg_up}}" />
<text class="absolute wp100 box-center-middle text-center font-52" style="color:{{item.trend>1?score_down_color:score_up_color}}">{{item.score}}</text>
<text class="absolute wp100 left-0 text-center bottom-0 font-24 color-888">{{item.name}}</text>
</view>
<view class="fn-flex-item">
<block wx:for="{{item.data}}" wx:for-item="it" wx:for-index="idx" wx:key="idx">
<view class="fn-flex fn-flex-middle fn-flex-between pt10 pb10 font-26 color-666">
<view >{{it.name}}</view>
<view >{{it.score}}</view>
</view>
</block>
</view>
</view>
</block>
</view>
</view>
</view>
</view>
pages/score/detail.wxss
+1
View File
@@ -0,0 +1 @@
/* pages/score/detail.wxss */
pages/score/index.js
+187
View File
@@ -0,0 +1,187 @@
// pages/score/index.js
import _ from '../../commons/js/commons'
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
data_bg_img: _.config.licheImgUrl + 'score/index-panel-bg.png',
icon_trend_up: _.config.licheImgUrl + 'score/score-trend-up.png',
icon_trend_down: _.config.licheImgUrl + 'score/score-trend-down.png',
icon_score_top_1: _.config.licheImgUrl + 'score/score-top-1.png',
icon_score_top_2: _.config.licheImgUrl + 'score/score-top-2.png',
icon_score_top_3: _.config.licheImgUrl + 'score/score-top-3.png',
score_index_bg_up: _.config.licheImgUrl + 'score/score-bg-up.jpg',
score_index_bg_down: _.config.licheImgUrl + 'score/score-bg-down.jpg',
score_detail_bg_up: _.config.licheImgUrl + 'score/score-detail-up.png',
score_detail_bg_down: _.config.licheImgUrl + 'score/score-detail-up.jpg',
score_up_color: '#31cbad',
score_down_color: '#ff895b',
score_trend: 1, //用这个参数控制样式：1 上升 、2 下降
tab_date: [{
id: 1,
name: '昨日'
}, {
id: 2,
name: '本月'
}],
tab_date_cur: 0,
score_detail_data: [{
name: '998',
tip: '运营分'
}, {
name: '=',
tip: ''
}, {
name: '98',
tip: '运营分'
}, {
name: '+',
tip: ''
}, {
name: '98',
tip: '运营分'
}, {
name: '+',
tip: ''
}, {
name: '98',
tip: '运营分'
}, {
name: '+',
tip: ''
}, {
name: '98',
tip: '运营分'
}],
tab_rank: [{
id: 1,
name: '店内排名'
}, {
id: 2,
name: '门店排名'
}],
tab_rank_cur: 0,
rank_data: [{
name: '张三',
is_manager: true,
trend: 1, //1 上升 、2 下降
score: '180分'
}, {
name: '张三',
is_manager: false,
trend: 2, //1 上升 、2 下降
score: '5分'
}, {
name: '张三',
is_manager: false,
trend: 2, //1 上升 、2 下降
score: '80分'
}, {
name: '张三',
is_manager: false,
trend: 1, //1 上升 、2 下降
score: '80分'
}, {
name: '张三',
is_manager: false,
trend: 2, //1 上升 、2 下降
score: '5分'
}, {
name: '张三',
is_manager: false,
trend: 2, //1 上升 、2 下降
score: '80分'
}, {
name: '张三',
is_manager: false,
trend: 1, //1 上升 、2 下降
score: '80分'
}, {
name: '张三',
is_manager: false,
trend: 2, //1 上升 、2 下降
score: '5分'
}, {
name: '张三',
is_manager: false,
trend: 2, //1 上升 、2 下降
score: '80分'
}, {
name: '张三',
is_manager: false,
trend: 1, //1 上升 、2 下降
score: '80分'
}],
content: '<p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p><p>asdfasdf</p>',
setid: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
wx.setNavigationBarTitle({
'title': '个人运营分'
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
},
scrollToRule(){
this.setData({
setid: 'richhtml'
})
}
})
pages/score/index.json
+6
View File
@@ -0,0 +1,6 @@
{
"usingComponents": {
"van-circle": "/vant/circle/index",
"com-html": "/components/mp-html/index"
}
}
pages/score/index.wxml
+78
View File
@@ -0,0 +1,78 @@
<!-- pages/score/index.wxml -->
<view class="container relative" style="min-height:100vh;--circle-text-color:{{score_trend>1?score_down_color:score_up_color}};">
<scroll-view class="relative" scroll-y="{{true}}" scroll-into-view="{{setid}}" scroll-with-animation="{{true}}" style="height:100vh">
<view class="absolute left-0 top-0 bottom-0 right-0 bg-size-fullwidth bg-no-repeat bg-pos-top" style="background-image:url({{score_trend>1?score_index_bg_down:score_index_bg_up}});"></view>
<view class="relative inner30">
<view class="fn-flex fn-flex-middle fn-flex-between inner20">
<view class="fn-flex">
<block wx:for="{{tab_date}}" wx:key="index">
<view class="font-34 relative {{(tab_date.length-1)==index?'':'mr70'}} tab-item transition-all {{tab_date_cur==index?'tab-item-cur':'color-999'}}">{{item.name}}</view>
</block>
</view>
<view wx:if="{{content}}" bindtap="scrollToRule" class="font-20 ulib-r750 bg-f6 color-999 pt5 pb5 pl10 pr10">
<text class="iconfont icon-tishi mr5"></text><text>规则说明</text>
</view>
</view>
<view class="fn-flex fn-flex-column fn-flex-middle mb40">
<view class="font-66 text-bold pt30">
<van-circle
value="{{ 30 }}"
stroke-width="15"
text="500"
layer-color="#ebebeb"
size="120"
color="{{score_trend>1?score_down_color:score_up_color}}"></van-circle>
</view>
<view class="fn-flex fn-flex-middle fn-flex-center pt30 color-666 font-32">
<image src="{{score_trend>1?icon_trend_down:icon_trend_up}}" class="img-32x32 block mr10"/>
<text>较上日上升100分</text>
</view>
<view class="fn-flex fn-flex-middle fn-flex-center pt15 font-26 color-999">
<view>*更新于09月10日</view>
<view>当前显示为昨日运营情况评分</view>
</view>
</view>
<view class="bg-fff mb30 box-shadow-000-10-10 ulib-r10 pt40 pb40">
<view class="fn-flex fn-flex-middle fn-flex-center text-center">
<block wx:for="{{score_detail_data}}" wx:key="index">
<view class="pr15 pl15">
<view class="font-34">{{item.name}}</view>
<view class="mt5 color-666 font-22">{{item.tip}}</view>
</view>
</block>
</view>
<view class="text-center pt20">
<view class="ulib-r10 font-24 link-detail relative link-detail inline-block pt10 pb10 pl20 pr20 overflowhidden"><text>查看明细</text><text class="iconfont icon-gengduo ml5"></text></view>
</view>
<view class="text-center pt40">
<view class="ulib-r10 overflowhidden font-24 inline-block">
<block wx:for="{{tab_rank}}" wx:key="index">
<view data-index="{{index}}" bindtap="changeRankTab" class="{{tab_rank_cur===index?'bg-ccc color-666':'bg-f6 color-999'}} transition-all pl20 pr20 pt10 pb10 inline-block">{{item.name}}</view>
</block>
</view>
<view class="">
<block wx:for="{{rank_data}}" wx:key="index">
<view class="fn-flex fn-flex-middle fn-flex-between pt25 pb25 pl60 pr60">
<view class="fn-flex fn-flex-middle font-28 color-444">
<text class="text-center mr20" style="width:38rpx;" wx:if="{{index>2}}">{{index+1}}</text>
<image wx:else class="img-38x38 mr20" src="{{index==0?icon_score_top_1:index==1?icon_score_top_2:icon_score_top_3}}" />
<text>{{item.name}}</text>
<view class="ulib-r750 color-fff font-20 pl15 pr15 pb5 ml15" style="background-color:{{score_up_color}};" wx:if="{{item.is_manager}}">店长</view>
</view>
<view class="fn-flex fn-flex-middle font-28 color-666" style="width:130rpx;">
<image src="{{item.trend>1?icon_trend_down:icon_trend_up}}" class="img-32x32 block mr10"/>
<text>{{item.score}}</text>
</view>
</view>
</block>
</view>
</view>
</view>
<view wx:if="{{content}}" id="richhtml" class="bg-fff mb30 box-shadow-000-10-10 ulib-r10 inner40">
<com-html content="{{content}}" lazy-load="{{true}}"></com-html>
</view>
</view>
</scroll-view>
</view>
pages/score/index.wxss
+34
View File
@@ -0,0 +1,34 @@
/* pages/score/index.wxss */
.tab-item::before{
content: '';
position: absolute;
bottom: -12rpx;
left:50%;
transform: translateX(-50%);
width: 0;
height: 6rpx;
border-radius: 100rpx;
background-color: var(--circle-text-color);
}
.tab-item-cur{
color: var(--circle-text-color);
}
.tab-item-cur::before{
width: 50rpx;
}
.link-detail{
color: var(--circle-text-color);
/* background-color: ; */
}
.link-detail::after{
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: var(--circle-text-color);
opacity: 0.1;
}