hcj
3 months ago
parent
f10d809d14
commit
a83497dbd0
|
After Width: | Height: | Size: 900 B |
@ -0,0 +1,41 @@ |
||||
<template> |
||||
<span> |
||||
<span v-show="level !== 0" :class="`levelTag v${level}`"> V{{ level }}</span> |
||||
</span> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
level: Number |
||||
}, |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.levelTag { |
||||
width: 21px; |
||||
height: 21px; |
||||
padding: 5px; |
||||
border-radius: 50%; |
||||
color: #FFFFFF; |
||||
|
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 12px; |
||||
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,7 @@ |
||||
export const PAYREQUEST = [ |
||||
'KMFlow软件产品升级，新架构引领未来（2元一条）', |
||||
'航天型号信息化与软件技术交流会（2元一条）', |
||||
'如何快速高效的完成接口通讯协议测试（2元一条）', |
||||
'如何保障软件测试充分性之逻辑覆盖率统计（2元一条）', |
||||
'中国一汽红旗新能源汽车软件质量大会（2元一条）' |
||||
] |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,177 @@ |
||||
<template> |
||||
<div> |
||||
<div class="model_title"> |
||||
<div class="model_title_top"> |
||||
<img src="/assets/homepage/rihhj.png" alt="" /> |
||||
<p>有偿资讯专区</p> |
||||
<img src="/assets/homepage/lesftt.png" alt="" /> |
||||
</div> |
||||
<div class="model_title_text">注册会员购买资讯</div> |
||||
</div> |
||||
<div class="moedel1_content payRequestWrap"> |
||||
<div class="payRequest"> |
||||
<div v-for="(item, index) in PAYREQUEST" :key="index" |
||||
:class="((index % 2) != 0) ? 'payRequestItem payRequestItemOdd' : 'payRequestItem'"> |
||||
<div>{{ item }}</div> |
||||
<div class="payReqBtn" @click="payForClick">购买资讯</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- <payRequestDialog ref="payRequestDialog"></payRequestDialog> --> |
||||
<div class="maskdialogS" style="text-align: center" v-if="payReqDialog"> |
||||
<div class="maskdialogSClose" @click="payReqDialog = false">×</div> |
||||
<div style="height: 60px"> |
||||
</div> |
||||
<img width="150px" src="/assets/train/whiteQrCode.png" alt=""> |
||||
<div style="text-align: center;margin: 10px 0;">请使用支付宝或微信扫描付款</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { PAYREQUEST } from '@/const/text/payRequest'; |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
PAYREQUEST: PAYREQUEST, |
||||
payReqDialog: false |
||||
} |
||||
}, |
||||
methods: { |
||||
payForClick() { |
||||
// this.$refs.payRequestDialog.dialogVisible = true |
||||
this.payReqDialog = true |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.model_title { |
||||
margin-top: 50px; |
||||
margin-bottom: 50px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
} |
||||
|
||||
.model_title_top { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.model_title_top p { |
||||
font-weight: bold !important; |
||||
font-size: 32px !important; |
||||
color: #1a1a1a; |
||||
margin: 0 15px; |
||||
} |
||||
|
||||
.model_title_top2 { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
margin: 15px 0; |
||||
} |
||||
|
||||
.model_title_top2 p { |
||||
font-weight: bold !important; |
||||
font-size: 25px !important; |
||||
color: #1a1a1a; |
||||
margin: 0 13px 0 15px; |
||||
} |
||||
|
||||
.model_title_img { |
||||
width: 526px; |
||||
height: 28px; |
||||
} |
||||
|
||||
.model_title_text { |
||||
font-weight: 500; |
||||
font-size: 16px; |
||||
color: #595959; |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.moedel1_content { |
||||
margin: 0 auto; |
||||
width: 100%; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
align-content: space-between; |
||||
height: 310px; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.payRequestWrap { |
||||
margin-bottom: 50px; |
||||
width: 1200px; |
||||
height: 381px; |
||||
padding: 25px; |
||||
background: #FFFFFF; |
||||
box-shadow: 0px 4px 34px 6px rgba(14, 97, 205, 0.1); |
||||
border-radius: 6px; |
||||
} |
||||
|
||||
.moedel1_content .payRequest { |
||||
width: 100%; |
||||
/* // height: 381px; */ |
||||
border-radius: 4px; |
||||
border: 1px solid #EDEDED; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-around; |
||||
} |
||||
|
||||
.payRequestItem { |
||||
font-weight: 500; |
||||
font-size: 15px; |
||||
color: #1A1A1A; |
||||
line-height: 60px; |
||||
border-radius: 4px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding: 0 20px; |
||||
height: 66px; |
||||
} |
||||
|
||||
.payReqBtn { |
||||
width: 113px; |
||||
height: 36px; |
||||
line-height: 36px; |
||||
background: linear-gradient(90deg, #5EA6FD, #1A81F9); |
||||
border-radius: 4px; |
||||
text-align: center; |
||||
font-family: PingFang SC; |
||||
font-size: 15px; |
||||
color: #FFFFFF; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.maskdialogS { |
||||
width: 592px; |
||||
/* height: 503px; */ |
||||
background: #ffffff; |
||||
box-shadow: 0px 4px 21px 4px rgba(19, 106, 189, 0.15); |
||||
z-index: 2000; |
||||
position: fixed; |
||||
top: 45%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
padding-bottom: 10px; |
||||
} |
||||
|
||||
.maskdialogSClose { |
||||
position: absolute; |
||||
top: 15px; |
||||
right: 30px; |
||||
font-weight: 400; |
||||
font-size: 25px; |
||||
color: #858994; |
||||
cursor: pointer; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<el-dialog class="payDialog" title="" v-if="dialogVisible" :visible.sync="dialogVisible" width="width"> |
||||
<div style="text-align: center;"> |
||||
<img src="" alt=""> |
||||
<div>请使用支付宝或微信扫描付款</div> |
||||
</div> |
||||
<!-- <div slot="footer"> |
||||
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button> |
||||
</div> --> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
dialogVisible: false |
||||
} |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
/* .payDialog { |
||||
width: 892px; |
||||
margin: 0 auto; |
||||
} */ |
||||
</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