hcj
7 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