hcj
3 months ago
parent
bb49e55e75
commit
6e750da2c6
@ -0,0 +1,42 @@ |
|||||||
|
<template> |
||||||
|
<span> |
||||||
|
<!-- <span v-show="level ==>{{ level }}</span> --> |
||||||
|
<span v-show="level == 1" class="levelTag v1">V{{ level }}</span> |
||||||
|
<span v-show="level == 2" class="levelTag v2">V{{ level }}</span> |
||||||
|
<span v-show="level == 3" class="levelTag v3">V{{ level }}</span> |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
level: Number |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.levelTag { |
||||||
|
padding: 5rpx 6rpx; |
||||||
|
border-radius: 50%; |
||||||
|
color: #FFFFFF; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 12px; |
||||||
|
margin-left: 10rpx; |
||||||
|
line-height: 23px; |
||||||
|
} |
||||||
|
|
||||||
|
.v1 { |
||||||
|
background: linear-gradient(0deg, #29F19C, #02A1F9); |
||||||
|
} |
||||||
|
|
||||||
|
.v2 { |
||||||
|
background: linear-gradient(0deg, #015EEA, #00C0FA); |
||||||
|
} |
||||||
|
|
||||||
|
.v3 { |
||||||
|
background: linear-gradient(0deg, #FACC22, #F83600); |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,169 @@ |
|||||||
|
<template> |
||||||
|
<view class="rulesWrap"> |
||||||
|
<view class="rulesImage"> |
||||||
|
<img src="http://image.bjkeyware.com/static/index/rulesBanner.png" alt=""> |
||||||
|
</view> |
||||||
|
<view class="rulesGroup"> |
||||||
|
<view class="rulesTitle">等级及对应成长值：</view> |
||||||
|
<u-table width="100%"> |
||||||
|
<u-tr style="font-size: 25rpx;"> |
||||||
|
<u-th style="width: 11%;">等级</u-th> |
||||||
|
<u-th style="width: 30%;">对应成长值</u-th> |
||||||
|
<u-th style="width: 59%;">权益等级</u-th> |
||||||
|
</u-tr> |
||||||
|
<u-tr v-for="(item, index) in scoreArray" :key="index" style="" v-show="index != scoreArray.length -1"> |
||||||
|
<u-td style="width: 11%;">{{ scoreComputed(item.minScore, index, |
||||||
|
'myLevel') }}</u-td> |
||||||
|
<u-td style=" width: 30%;"> |
||||||
|
<view>{{ |
||||||
|
scoreComputed(item.minScore, index, |
||||||
|
'scoreRange') }}</view> |
||||||
|
</u-td> |
||||||
|
<u-td style="width: 59%;"> |
||||||
|
<view> 新增竞标 <span :style="{ |
||||||
|
text: 'left', |
||||||
|
color: scoreComputed(item.minScore, index, |
||||||
|
'myGradeEquity') != '无门槛' ? '#FF5A4D' : '' |
||||||
|
}">{{ scoreComputed(item.minScore, index, |
||||||
|
'myGradeEquity') }}</span> 的众包任务的资格</view> |
||||||
|
</u-td> |
||||||
|
</u-tr> |
||||||
|
|
||||||
|
</u-table> |
||||||
|
</view> |
||||||
|
<view class="rulesGroup"> |
||||||
|
<view class="rulesTitle">成长值获取途径：</view> |
||||||
|
<view class="growWays"> |
||||||
|
<view v-for="(item, index) in staticWays" :key="index"> |
||||||
|
<view class="waysTitle">{{ index + 1 }}. {{ item.split(' ')[0] }}</view> |
||||||
|
<view class="waysInfo">{{ item.split(' ')[1] }}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="moreWays">更多获取途径敬请期待</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
const staticWays = [ |
||||||
|
'实名认证 通过在我的页面完成实名认证，可获取50成长值', |
||||||
|
'云员工认证 通过去PC端https://bjkeyware.com/ability/user完成云员工认证可获得300成长值', |
||||||
|
'竞标任务 竞标成功后，实施验收通过后，可自动获取到200成长值' |
||||||
|
] |
||||||
|
import { scoreStrategies, getLevel } from '@/utils/userlevel'; |
||||||
|
const scoreArray = JSON.parse(JSON.stringify(scoreStrategies)).reverse() |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
scoreArray: scoreArray, |
||||||
|
staticWays: staticWays |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
scoreComputed() { |
||||||
|
return (min, index, tag) => { |
||||||
|
const { level, equity } = getLevel(min) |
||||||
|
if (tag == 'myLevel') { |
||||||
|
return 'L' + level |
||||||
|
} else if (tag == 'myGradeEquity') { |
||||||
|
return equity |
||||||
|
} else { |
||||||
|
if (index == this.scoreArray.length - 1) { |
||||||
|
return `X ≥ ${this.scoreArray[index].minScore}` |
||||||
|
} |
||||||
|
const max = this.scoreArray[index + 1].minScore |
||||||
|
return `${min} ≤X<${max} ` |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.u-td view { |
||||||
|
text-align: start; |
||||||
|
font-size: 24rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.u-th view { |
||||||
|
text-align: start !important; |
||||||
|
font-size: 23rpx; |
||||||
|
padding-left: 15rpx; |
||||||
|
background-color: #EAF1FD !important; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.u-td { |
||||||
|
text-align: start !important; |
||||||
|
flex: none !important; |
||||||
|
} |
||||||
|
|
||||||
|
.u-th { |
||||||
|
font-size: 26rpx; |
||||||
|
text-align: start !important; |
||||||
|
padding-left: 15rpx; |
||||||
|
background-color: #EAF1FD !important; |
||||||
|
flex: none !important; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.rulesWrap { |
||||||
|
padding: 35rpx 25rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
|
||||||
|
.rulesImage { |
||||||
|
img { |
||||||
|
height: 200rpx; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.rulesGroup { |
||||||
|
margin: 30rpx auto; |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 10rpx; |
||||||
|
padding: 0 20rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
padding: 30rpx 25rpx 30rpx 25rpx; |
||||||
|
margin: 25rpx 0; |
||||||
|
|
||||||
|
.rulesTitle { |
||||||
|
font-size: 28rpx; |
||||||
|
color: #000000; |
||||||
|
font-weight: bold; |
||||||
|
line-height: 50rpx; |
||||||
|
margin-bottom: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.growWays { |
||||||
|
line-height: 42rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
|
||||||
|
.waysTitle { |
||||||
|
color: #333333; |
||||||
|
} |
||||||
|
|
||||||
|
.waysInfo { |
||||||
|
color: #666666; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.moreWays { |
||||||
|
margin-top: 40rpx; |
||||||
|
text-align: center; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #5F6975; |
||||||
|
line-height: 25rpx; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,144 @@ |
|||||||
|
<template> |
||||||
|
<view class="taskWrap"> |
||||||
|
<view class="taskItem" v-for="(task, index) in taskArrays" :key="index"> |
||||||
|
<view> |
||||||
|
<view class="taskItemTitle">{{ task.lable }}</view> |
||||||
|
<view class="taskItemInfo"><span style="margin-right: 15rpx;color: #FC4A4A;">+{{ task.score }} |
||||||
|
</span>成长值 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view v-if="!task.state" class="taskBtn missonSuccess" @click="dropTo(task.url)"> |
||||||
|
{{ '去完成' }} |
||||||
|
</view> |
||||||
|
<view v-else class="taskBtn missonFaild"> |
||||||
|
{{ '已完成' }} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
const taskArrays = [ |
||||||
|
{ lable: '实名认证', score: '50', url: '/pages/personal/setup/certification', state: false }, |
||||||
|
{ lable: '云员工认证', score: '300', url: 'cloud', state: false }, |
||||||
|
{ lable: '去竞标任务', score: '200', url: '', state: false }, |
||||||
|
] |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
taskArrays: taskArrays, |
||||||
|
phoneuserinfo: null |
||||||
|
} |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
this.phoneuserinfo = uni.getStorageSync('wxUserInfo'); |
||||||
|
this.http.quickGet('/getInfo', true).then(res => { |
||||||
|
const { testerStatus } = res.data.user |
||||||
|
if (testerStatus == 1) { |
||||||
|
this.taskArrays[0].state = true |
||||||
|
} else if (testerStatus == 2) { |
||||||
|
this.taskArrays[0].state = true |
||||||
|
this.taskArrays[1].state = true |
||||||
|
} else if (testerStatus == 0) { |
||||||
|
this.taskArrays[0].state = false |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
dropTo(url) { |
||||||
|
if (url == 'cloud') { |
||||||
|
uni.showModal({ |
||||||
|
title: `云员工认证请前往PC端`, |
||||||
|
content: 'PC端网址：https://bjkeyware.com', |
||||||
|
showCancel: false, |
||||||
|
confirmText: '复制网址', |
||||||
|
success: function (res) { |
||||||
|
if (res.confirm) { |
||||||
|
uni.setClipboardData({ |
||||||
|
data: url, |
||||||
|
success: function () { |
||||||
|
uni.showToast({ |
||||||
|
title: '复制成功', |
||||||
|
}) |
||||||
|
}, |
||||||
|
fail: function () { |
||||||
|
uni.showToast({ |
||||||
|
title: '复制失败', |
||||||
|
}) |
||||||
|
}, |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
if (url) { |
||||||
|
uni.navigateTo({ |
||||||
|
url: `${url}` |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
uni.switchTab({ |
||||||
|
url: '/pages/index/testcrowdsourc/testcrowdsourc', |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.taskWrap { |
||||||
|
padding: 35rpx 0; |
||||||
|
|
||||||
|
.taskItem { |
||||||
|
width: 700rpx; |
||||||
|
height: 150rpx; |
||||||
|
background: linear-gradient(90deg, #E2EDFD, #E5E4FE); |
||||||
|
box-shadow: 0rpx 1rpx 10rpx 1rpx rgba(32, 37, 44, 0.2); |
||||||
|
border-radius: 10rpx; |
||||||
|
margin: 0 auto 30rpx auto; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
padding: 35rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
|
||||||
|
.taskItemTitle { |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 30rpx; |
||||||
|
color: #000; |
||||||
|
line-height: 38rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.taskItemInfo { |
||||||
|
margin-top: 20rpx; |
||||||
|
font-size: 26rpx; |
||||||
|
color: #666666; |
||||||
|
line-height: 38rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.taskBtn { |
||||||
|
width: 130rpx; |
||||||
|
height: 46rpx; |
||||||
|
border-radius: 23rpx; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
line-height: 46rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.missonSuccess { |
||||||
|
background: linear-gradient(90deg, #39DA8C, #2B8EFE); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.missonFaild { |
||||||
|
background: linear-gradient(90deg, #FAD126, #FF544F); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,360 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<view class="gradeWrap"> |
||||||
|
<view style="margin: 0 50rpx;display: flex;align-items: center;"> |
||||||
|
<view @click="gouserHome"> |
||||||
|
<img style='width:55px;height:55px;border-radius: 50%' v-if='avatar' |
||||||
|
:src="avatar && avatar.indexOf('http') == 0 ? avatar : base + avatar" alt=""> |
||||||
|
<img v-else style='width:55px;height:55px;border-radius: 50%' |
||||||
|
src="../../../static/crowd/defaultAva.jpg" alt=""> |
||||||
|
</view> |
||||||
|
<p v-if='phoneuserinfo.companyName' style='margin-bottom:5px;font-size:17px;font-weight:600;'> |
||||||
|
{{ phoneuserinfo.companyName }} |
||||||
|
</p> |
||||||
|
<p v-else style='margin-bottom:5px;font-size:17px;font-weight:600;margin-left: 10rpx;'>{{ nickName }} |
||||||
|
</p> |
||||||
|
</view> |
||||||
|
<view class="gradeSwiperWrap"> |
||||||
|
<swiper class="gradeSwiper" previous-margin="30rpx" next-margin="30rpx"> |
||||||
|
<swiper-item v-for="(index) in scoreArray.length - 1" :key="index"> |
||||||
|
<view class="swiper-item gradeSwiperItem"> |
||||||
|
<view class="bothSide"> |
||||||
|
<view> |
||||||
|
<view class="currentState">{{ currentGrade(scoreArray[index].minScore, index, true) |
||||||
|
}}</view> |
||||||
|
<view class="currentLevel">Lv. {{ index }}</view> |
||||||
|
</view> |
||||||
|
<view @click="toToggle('gradeTask')" |
||||||
|
v-show="currentGrade(scoreArray[index].minScore, index, true) == '当前等级'" |
||||||
|
class="toGrow">去升级 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="grailLayout"> |
||||||
|
<view>Lv. {{ index }}</view> |
||||||
|
<view style="font-size: 24rpx;color: #666666;">已获得{{ myScore }}成长值</view> |
||||||
|
<view>Lv. {{ index + 1 }}</view> |
||||||
|
</view> |
||||||
|
<view class="splitLine"> |
||||||
|
<view class="progress" :style="{ width: progressWidth(index) }"></view> |
||||||
|
</view> |
||||||
|
<view class="grailLayout"> |
||||||
|
<view>{{ scoreArray[index].minScore }}</view> |
||||||
|
<view |
||||||
|
v-if="'currentGrow1' == stateMap[currentGrade(scoreArray[index].minScore, index, true)]" |
||||||
|
class="currentGrow1">{{ currentGrade(scoreArray[index].minScore, index, false) }} |
||||||
|
</view> |
||||||
|
<view |
||||||
|
v-if="'currentGrow2' == stateMap[currentGrade(scoreArray[index].minScore, index, true)]" |
||||||
|
class="currentGrow2">{{ currentGrade(scoreArray[index].minScore, index, false) }} |
||||||
|
</view> |
||||||
|
<view |
||||||
|
v-if="'currentGrow3' == stateMap[currentGrade(scoreArray[index].minScore, index, true)]" |
||||||
|
class="currentGrow3">{{ currentGrade(scoreArray[index].minScore, index, false) }} |
||||||
|
</view> |
||||||
|
<view>{{ index == scoreArray.length - 1 ? scoreArray[scoreArray.length - 1].minScore : |
||||||
|
scoreArray[index + 1]['minScore'] }} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</swiper-item> |
||||||
|
</swiper> |
||||||
|
</view> |
||||||
|
<view class="newRight"><img src="http://image.bjkeyware.com/static/index/myRight.png" alt=""> 新增权益</view> |
||||||
|
<view class="rightInfo">新增竞标 <span :style="{ color: levelColor[level] }">{{ level }}</span> 的众包任务的资格</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="rulesGroup"> |
||||||
|
<view @click="toToggle('growInfo')"> |
||||||
|
<view>成长值明细</view><img src="http://image.bjkeyware.com/static/index/xia.png" alt=""> |
||||||
|
</view> |
||||||
|
<view @click="toToggle('gradeRules')"> |
||||||
|
<view>等级规则</view><img src="http://image.bjkeyware.com/static/index/xia.png" alt=""> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
const levelColor = { |
||||||
|
'V1': '#6740E5', |
||||||
|
'V2': '#E86914', |
||||||
|
'V3': '#9752FF', |
||||||
|
} |
||||||
|
|
||||||
|
import { scoreStrategies, getLevel } from '@/utils/userlevel'; |
||||||
|
const scoreArray = JSON.parse(JSON.stringify(scoreStrategies)).reverse() |
||||||
|
|
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
scoreArray: Object.freeze(scoreArray), |
||||||
|
myScore: '1900', |
||||||
|
avatar: '', |
||||||
|
phoneuserinfo: '', |
||||||
|
nickName: '', |
||||||
|
stateMap: Object.freeze({ |
||||||
|
'未达成': 'currentGrow3', |
||||||
|
'已达成': 'currentGrow1', |
||||||
|
'当前等级': 'currentGrow2' |
||||||
|
}), |
||||||
|
levelColor: Object.freeze(levelColor) |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
toToggle(url) { |
||||||
|
uni.navigateTo({ |
||||||
|
url: `./${url}` |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
this.http.quickGet('/getInfo',true).then(res=>{ |
||||||
|
const {growthValue} = res.data.user |
||||||
|
this.myScore = growthValue || 0 |
||||||
|
}) |
||||||
|
this.phoneuserinfo = uni.getStorageSync('wxUserInfo'); |
||||||
|
this.avatar = uni.getStorageSync('avatar'); |
||||||
|
this.nickName = uni.getStorageSync('nickName'); |
||||||
|
}, |
||||||
|
created() { |
||||||
|
console.log(this.scoreArray); |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
level() { |
||||||
|
const { _, equity } = getLevel(this.myScore) |
||||||
|
return equity |
||||||
|
}, |
||||||
|
currentGrade() { |
||||||
|
return (min, index, tag) => { |
||||||
|
// if (index == this.scoreArray.length - 1) { |
||||||
|
// return '未达成' |
||||||
|
// } |
||||||
|
const max = this.scoreArray[index + 1]['minScore'] |
||||||
|
if (this.myScore >= max) { |
||||||
|
return '已达成' |
||||||
|
} else if (this.myScore <= max && this.myScore >= min) { |
||||||
|
let result = '' |
||||||
|
result = tag ? '当前等级' : `还差${max - this.myScore}可升级` |
||||||
|
return result |
||||||
|
} else { |
||||||
|
return '未达成' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
progressWidth() { |
||||||
|
return (index) => { |
||||||
|
const max = this.scoreArray[index + 1]['minScore'] |
||||||
|
if (this.myScore > max) { |
||||||
|
return '100%' |
||||||
|
} else if (this.myScore < this.scoreArray[index]['minScore']) { |
||||||
|
return '0%' |
||||||
|
} else { |
||||||
|
return (((this.myScore - this.scoreArray[index]['minScore']) / (max - this.scoreArray[index]['minScore'])) * 100).toFixed(2) + "%" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.gradeWrap { |
||||||
|
background-color: #e3e6fe; |
||||||
|
border-bottom-left-radius: 60rpx; |
||||||
|
border-bottom-right-radius: 60rpx; |
||||||
|
|
||||||
|
padding: 20rpx 0; |
||||||
|
|
||||||
|
.gradeSwiperWrap { |
||||||
|
|
||||||
|
.gradeSwiper { |
||||||
|
height: 300rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
|
||||||
|
.gradeSwiperItem { |
||||||
|
padding: 22rpx 0rpx; |
||||||
|
box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(30, 66, 111, 0.15); |
||||||
|
border-radius: 10rpx; |
||||||
|
margin: 0 10rpx; |
||||||
|
background: url('http://image.bjkeyware.com/static/index/gradeBg.png') no-repeat 0 0; |
||||||
|
background-size: 100% 100%; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.bothSide { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
font-family: PingFang SC; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.toGrow { |
||||||
|
width: 130rpx; |
||||||
|
height: 46rpx; |
||||||
|
background: linear-gradient(90deg, #5EA6FD, #1A81F9); |
||||||
|
border-radius: 23rpx; |
||||||
|
text-align: center; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 26rpx; |
||||||
|
color: #FFFFFF; |
||||||
|
line-height: 46rpx; |
||||||
|
position: absolute; |
||||||
|
bottom: 10rpx; |
||||||
|
right: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.currentState { |
||||||
|
width: 150rpx; |
||||||
|
line-height: 46rpx; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 26rpx; |
||||||
|
color: #333333; |
||||||
|
background: #EAF1FD; |
||||||
|
text-align: center; |
||||||
|
border-radius: 0rpx 23rpx 23rpx 0rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.currentLevel { |
||||||
|
margin: 30rpx 40rpx; |
||||||
|
height: 28rpx; |
||||||
|
font-weight: 800; |
||||||
|
font-size: 36rpx; |
||||||
|
color: #000000; |
||||||
|
line-height: 38rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.splitLine { |
||||||
|
margin: 10rpx auto; |
||||||
|
width: 572rpx; |
||||||
|
height: 10rpx; |
||||||
|
// background: #98C5FB; |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 5rpx; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.progress { |
||||||
|
position: absolute; |
||||||
|
height: 10rpx; |
||||||
|
width: 15%; |
||||||
|
background: #98C5FB; |
||||||
|
border-radius: 5rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.grailLayout { |
||||||
|
margin-top: 10rpx; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
margin: 0 40rpx; |
||||||
|
|
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 26rpx; |
||||||
|
color: #333333; |
||||||
|
line-height: 38rpx; |
||||||
|
|
||||||
|
.currentGrow1 { |
||||||
|
background: url('http://image.bjkeyware.com/static/index/currentState1.png') no-repeat 0 0; |
||||||
|
min-width: 10rpx; |
||||||
|
padding: 0 20rpx; |
||||||
|
height: 50rpx; |
||||||
|
line-height: 58rpx; |
||||||
|
background-size: 100% 100%; |
||||||
|
text-align: center; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 24rpx; |
||||||
|
color: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
.currentGrow2 { |
||||||
|
background: url('http://image.bjkeyware.com/static/index/currentState2.png') no-repeat 0 0; |
||||||
|
min-width: 10rpx; |
||||||
|
padding: 0 20rpx; |
||||||
|
height: 50rpx; |
||||||
|
line-height: 58rpx; |
||||||
|
background-size: 100% 100%; |
||||||
|
text-align: center; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 24rpx; |
||||||
|
color: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
.currentGrow3 { |
||||||
|
background: url('http://image.bjkeyware.com/static/index/currentState3.png') no-repeat 0 0; |
||||||
|
min-width: 10rpx; |
||||||
|
padding: 0 20rpx; |
||||||
|
height: 50rpx; |
||||||
|
line-height: 58rpx; |
||||||
|
background-size: 100% 100%; |
||||||
|
text-align: center; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 24rpx; |
||||||
|
color: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.newRight { |
||||||
|
height: 29rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 30rpx; |
||||||
|
color: #000000; |
||||||
|
line-height: 38rpx; |
||||||
|
margin: 30rpx 50rpx 20rpx 50rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 41rpx; |
||||||
|
height: 37rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.rightInfo { |
||||||
|
margin: 0rpx 50rpx; |
||||||
|
padding-bottom: 20rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 24rpx; |
||||||
|
color: #4D4D4D; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.rulesGroup { |
||||||
|
width: 683rpx; |
||||||
|
height: 180rpx; |
||||||
|
margin: 30rpx auto; |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 10rpx; |
||||||
|
padding: 0 40rpx; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 13rpx; |
||||||
|
height: 21rpx; |
||||||
|
} |
||||||
|
|
||||||
|
>view { |
||||||
|
height: 50%; |
||||||
|
line-height: 90rpx; |
||||||
|
border-bottom: 1px solid #EDEDED; |
||||||
|
; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,77 @@ |
|||||||
|
<template> |
||||||
|
<view class="rulesGroupWrap"> |
||||||
|
<view class="rulesGroup"> |
||||||
|
<view v-for="(item, index) in growthDetail" :key="index"> |
||||||
|
<view class="rulesItem"> |
||||||
|
<view>{{ item.title }}</view> |
||||||
|
<view><span style="color: #FC4A4A;margin-right: 15rpx;">+{{ item.growthValue }} </span> 成长值</view> |
||||||
|
</view> |
||||||
|
<view class="rulesTime">{{ item.date }}</view> |
||||||
|
</view> |
||||||
|
<view v-if="growthDetail.length == 0">暂无信息</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
onShow() { |
||||||
|
this.http.quickGet('/getInfo', true).then(res => { |
||||||
|
console.log(res.data.user.growthDetail); |
||||||
|
|
||||||
|
this.growthDetail = JSON.parse(res.data.user.growthDetail) |
||||||
|
}) |
||||||
|
console.log(this.growthDetail); |
||||||
|
|
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
growthDetail: [] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.rulesGroupWrap { |
||||||
|
padding: 30rpx 0; |
||||||
|
|
||||||
|
.rulesGroup { |
||||||
|
width: 683rpx; |
||||||
|
margin: 0rpx auto; |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 10rpx; |
||||||
|
padding: 0 40rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
padding: 5rpx 25rpx 55rpx 25rpx; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 13rpx; |
||||||
|
height: 21rpx; |
||||||
|
} |
||||||
|
|
||||||
|
>view { |
||||||
|
border-bottom: 1px solid #EDEDED; |
||||||
|
padding: 25rpx 0; |
||||||
|
|
||||||
|
.rulesItem { |
||||||
|
font-size: 30rpx; |
||||||
|
color: #1A1A1A; |
||||||
|
line-height: 38rpx; |
||||||
|
line-height: 50rpx; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
.rulesTime { |
||||||
|
margin-top: 10rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
color: #808080; |
||||||
|
line-height: 38rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
/* 使用策略模式、消除if else语句 |
||||||
|
* 若等级规则增加、给scoreStrategies数组添加对象即可 所有和等级相关的都会随之更改 |
||||||
|
* 食用方式： |
||||||
|
* const { level, equity} = getLevel(score) |
||||||
|
* level:等级 equity:权益 |
||||||
|
*/ |
||||||
|
|
||||||
|
export const scoreStrategies = [ |
||||||
|
{ minScore: 5000, level: "4" }, |
||||||
|
{ minScore: 2000, level: "3" }, |
||||||
|
{ minScore: 500, level: "2" }, |
||||||
|
{ minScore: 100, level: "1" }, |
||||||
|
{ minScore: 0, level: "0" }, |
||||||
|
]; |
||||||
|
|
||||||
|
export const gradeEquity = function (level) { |
||||||
|
return `${level * 1 === 0 ? "无门槛" : "V" + level}`; |
||||||
|
}; |
||||||
|
|
||||||
|
export function getLevel(score) { |
||||||
|
for (let i = 0; i < scoreStrategies.length; i++) { |
||||||
|
if (score >= scoreStrategies[i].minScore) { |
||||||
|
return { |
||||||
|
level: scoreStrategies[i].level, |
||||||
|
equity: gradeEquity(`${scoreStrategies[i].level}`), |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
console.error(`score=${score},无法确定等级`); |
||||||
|
return "无法确定等级"; |
||||||
|
/* |
||||||
|
strategyV1: function (score) { |
||||||
|
return score >= 0 && score <= 600 ? "V1" : null; |
||||||
|
}, |
||||||
|
strategyV2: function (score) { |
||||||
|
return score >= 0 && score <= 600 ? "V1" : null; |
||||||
|
}, |
||||||
|
strategyV3: function (score) { |
||||||
|
return score >= 0 && score <= 600 ? "V1" : null; |
||||||
|
}, |
||||||
|
strategyV4: function (score) { |
||||||
|
return score >= 0 && score <= 600 ? "V1" : null; |
||||||
|
}, |
||||||
|
}; |
||||||
|
*/ |
||||||
|
// const levelMap = {};
|
||||||
|
// for (let strategy in scoreStrategies) {
|
||||||
|
// const level = scoreStrategies(strategy)(score);
|
||||||
|
// if (level) {
|
||||||
|
// return level;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// console.error(`score=${score},无法确定等级`);
|
||||||
|
// return "无法确定等级";
|
||||||
|
} |
||||||
Loading…
Reference in new issue