Compare commits
5 Commits
84379210be
...
2579f3972d
| Author | SHA1 | Date |
|---|---|---|
hcj
|
2579f3972d | 2 months ago |
|
hcj
|
6e750da2c6 | 3 months ago |
|
hcj
|
bb49e55e75 | 3 months ago |
|
hcj
|
51fae596c6 | 4 months ago |
|
hcj
|
22784c38c7 | 4 months ago |
@ -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,237 @@ |
||||
<template> |
||||
<view class="onLineCourseItemWrap" @click="toLearn(onLineCourse)"> |
||||
<view class="onLineTitle"> |
||||
<view v-if="rejectStatus == '1'" class="backVersion">预告</view> |
||||
<view v-if="rejectStatus == '2'" class="starting">直播中<img src="./liveSteam.png" alt=""></view> |
||||
<view v-if="rejectStatus == '3'" class="preVersion">回放</view> |
||||
<view>{{ courseTime(onLineCourse.courseTime) }}</view> |
||||
<view class="onLineClassName">{{ onLineCourse.courseName }}</view> |
||||
</view> |
||||
<view class="onLineCourse">{{ onLineCourse.className }}</view> |
||||
<view class="onLineTeacher"> |
||||
<img src="http://image.bjkeyware.com/static/index/teacher.png" alt=""> |
||||
讲师: {{ onLineCourse.instructor }} |
||||
</view> |
||||
<!-- <view>{{ courseTime(onLineCourse.date_time) }}</view> --> |
||||
|
||||
<view class="onLineBtnWrap"> |
||||
<view v-if="toLearnShow" class="onLineBtn toPay">付费学习￥{{ onLineCourse.amount }}</view> |
||||
<view v-else class="onLineBtn toLearn">去学习</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { dateFormat } from '../../utils/util'; |
||||
|
||||
export default { |
||||
computed: { |
||||
toLearnShow() { |
||||
if ((this.onLineCourse.isPay == '1') && (this.onLineCourse.remark.indexOf(this.onLineCourse.courseId) == -1)) { |
||||
return true |
||||
} |
||||
return false |
||||
}, |
||||
rejectStatus() { |
||||
const endTime = new Date(this.onLineCourse.date_time).getTime() |
||||
const startTime = new Date(this.onLineCourse.courseTime).getTime() |
||||
const nowTime = new Date().getTime() |
||||
if (startTime > nowTime) { |
||||
return '1' |
||||
} else if (startTime < nowTime && endTime > nowTime) { |
||||
return '2' |
||||
} else { |
||||
return '3' |
||||
} |
||||
}, |
||||
courseTime() { |
||||
return function (val) { |
||||
const tarTime = dateFormat(new Date(val)) |
||||
const nowTime = dateFormat(new Date()) |
||||
const day = tarTime.split(' ')[0]; |
||||
const nday = nowTime.split(' ')[0]; |
||||
|
||||
let preDay = '' |
||||
if (nday === day) { |
||||
preDay = '今日' |
||||
} else if ((day.substr(0, 8) === nday.substr(0, 8)) && (day.substr(8, 10) * 1 - nday.substr(8, 10)) == 1) { |
||||
preDay = '明日' |
||||
} else { |
||||
preDay = day |
||||
} |
||||
const temp = tarTime.split(' ')[1] |
||||
const time = temp.slice(0, temp.lastIndexOf(':')); |
||||
console.log(time); |
||||
console.log(preDay + ' ' + time); |
||||
return preDay + ' ' + time |
||||
} |
||||
} |
||||
}, |
||||
props: { |
||||
onLineCourse: Object |
||||
}, |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
methods: { |
||||
toggleShow() { |
||||
if ((this.onLineCourse.isPay == '1') && (this.onLineCourse.remark.indexOf(this.onLineCourse.courseId) == -1)) { |
||||
this.onLineCourse.show = false |
||||
return |
||||
} |
||||
this.onLineCourse.show = true |
||||
return |
||||
}, |
||||
toLearn() { |
||||
this.toggleShow() |
||||
this.$emit('toLearn', this.onLineCourse) |
||||
}, |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.onLineCourseItemWrap { |
||||
height: 270rpx; |
||||
width: 700rpx; |
||||
background: linear-gradient(135deg, #FCF5F0, #ECF3FD); |
||||
box-shadow: 0rpx 2rpx 14rpx 1rpx rgba(8, 67, 140, 0.12); |
||||
border-radius: 10rpx; |
||||
margin: 0 auto; |
||||
margin-bottom: 30rpx; |
||||
|
||||
|
||||
.onLineTitle { |
||||
font-size: 32rpx; |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
font-family: PingFang SC; |
||||
font-weight: bold; |
||||
height: 88rpx; |
||||
padding: 30rpx 0 0 20rpx; |
||||
line-height: 54rpx; |
||||
|
||||
.starting { |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
font-size: 28rpx; |
||||
line-height: 40rpx; |
||||
margin-top: 7rpx; |
||||
height: 40rpx; |
||||
margin-right: 10rpx; |
||||
min-width: 120rpx; |
||||
text-align: center; |
||||
background: linear-gradient(90deg, #09B885, #0BE8A5); |
||||
border-radius: 8rpx; |
||||
|
||||
img { |
||||
margin-left: 5rpx; |
||||
width: 15rpx; |
||||
height: 15rpx; |
||||
} |
||||
} |
||||
|
||||
.backVersion { |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
font-size: 28rpx; |
||||
line-height: 35rpx; |
||||
margin-top: 10rpx; |
||||
height: 35rpx; |
||||
padding: 0 20rpx; |
||||
background: linear-gradient(90deg, #FCA041, #FD6841); |
||||
margin-right: 10rpx; |
||||
border-radius: 8rpx; |
||||
min-width: 95rpx; |
||||
} |
||||
|
||||
.preVersion { |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
font-size: 28rpx; |
||||
line-height: 35rpx; |
||||
margin-top: 10rpx; |
||||
height: 35rpx; |
||||
padding: 0 20rpx; |
||||
margin-right: 10rpx; |
||||
background: linear-gradient(90deg, #06466b, #1479b3af); |
||||
border-radius: 8rpx; |
||||
min-width: 95rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.onLineClassName { |
||||
flex:1;width: 0; |
||||
margin-left: 25rpx; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
.onLineCourse { |
||||
display: inline; |
||||
padding: 5rpx 15rpx; |
||||
border-radius: 6rpx; |
||||
font-size: 30rpx; |
||||
// width: 320rpx; |
||||
color: #1A1A1A; |
||||
line-height: 46rpx; |
||||
background: #DEE9FD; |
||||
margin-left: 18rpx; |
||||
} |
||||
|
||||
|
||||
.onLineTeacher { |
||||
margin-top: 10rpx; |
||||
margin-left: 24rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
color: #666666; |
||||
line-height: 46rpx; |
||||
|
||||
img { |
||||
width: 20rpx; |
||||
height: 20rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
} |
||||
|
||||
.onLineBtnWrap { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
margin: 0 25rpx; |
||||
} |
||||
|
||||
.onLineBtn { |
||||
min-width: 209rpx; |
||||
padding: 0 5rpx; |
||||
height: 56rpx; |
||||
line-height: 56rpx; |
||||
border-radius: 28rpx; |
||||
// width: 209rpx; |
||||
width: 167rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 24rpx; |
||||
color: #FFFFFF; |
||||
line-height: 56rpx; |
||||
text-align: center; |
||||
} |
||||
|
||||
.toLearn { |
||||
background: linear-gradient(90deg, #FB8C16, #FEC36E); |
||||
} |
||||
|
||||
.toPay { |
||||
background: linear-gradient(90deg, #5EA6FD, #1A81F9); |
||||
border: 1px solid #AAD1FE; |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 348 B |
@ -0,0 +1,68 @@ |
||||
<template> |
||||
<view class="posterWrapper"> |
||||
<view>haibao</view> |
||||
<button @click="drawPoster">生成海报</button> |
||||
<view class="my_canvas_box"> |
||||
<!-- <canvas></canvas> --> |
||||
<view>长按分享</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import com from '../../utils/comstemutil' |
||||
|
||||
export default { |
||||
|
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
onload(query) { |
||||
// console.log('123'); |
||||
|
||||
// scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene |
||||
const scene = decodeURIComponent(query.scene) |
||||
console.log(scene); |
||||
|
||||
}, |
||||
methods: { |
||||
drawPoster() { |
||||
const currentPage = getCurrentPages() |
||||
const route = currentPage[currentPage.length - 1].route |
||||
const options = currentPage[currentPage.length - 1].options |
||||
let path = '' |
||||
if (Object.keys(options).length == 0) { |
||||
path = route |
||||
} else { |
||||
options.forEach((ele, index) => { |
||||
if (index == 0) { |
||||
path = route + '?' + ele + '=' + index |
||||
} else { |
||||
path = route + '&' + ele + '=' + index |
||||
} |
||||
}); |
||||
} |
||||
this.draw(path) |
||||
}, |
||||
async draw(path) { |
||||
// const tok = await com.refreshToken() |
||||
// return |
||||
let accessToken = uni.getStorageSync('accessToken') |
||||
|
||||
const data = { |
||||
"path": path, |
||||
"width": 430 |
||||
} |
||||
const res = await this.http.quickPost('https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=' + accessToken, data, true) |
||||
console.log(res); |
||||
|
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.posterWrapper {} |
||||
</style> |
||||
@ -0,0 +1,105 @@ |
||||
<template> |
||||
<view class="courseInfo"> |
||||
<view>xxxxx</view> |
||||
<view @click="startLearn">开始学习</view> |
||||
<view @click="openInputCode">输入口令</view> |
||||
<view @click="pay">付费学习</view> |
||||
|
||||
<u-modal v-model="show"> |
||||
<view class="slot-content"> |
||||
<view v-if="toggleFlag === 'tolearn'"> |
||||
<label>www.baidu.com</label> |
||||
</view> |
||||
<view v-else class="input-list"> |
||||
<!-- input输入框 --> |
||||
<input class="input-item" v-if="focus" adjust-position="false" auto-blur="true" |
||||
@blur="inputCodeBlur" @input="inputCode" :focus="focus" v-model="code" @focus="inputFocus" |
||||
type="number" oneTimeCode maxlength="6" /> |
||||
<!-- 验证码输入框 --> |
||||
<view class="code-list" @click="focusClick"> |
||||
<view class="code-item" v-for="(item, index) in 6" :key="index" |
||||
:style="(index == code.length && focus ? 'border-color:#3c9cff;' : '')">{{ code[index] || '' |
||||
}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</u-modal> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
toggleFlag:'', |
||||
show: false, |
||||
focus: false, |
||||
code: '' |
||||
} |
||||
}, |
||||
methods: { |
||||
startLearn() { |
||||
this.show = true |
||||
this.toggleFlag = 'tolearn' |
||||
}, |
||||
focusClick() { |
||||
this.focus = true |
||||
}, |
||||
pay() { |
||||
console.log('pay for this'); |
||||
}, |
||||
openInputCode() { |
||||
this.show = true |
||||
}, |
||||
inputCode(e) { |
||||
let value = e.detail.value |
||||
this.code = value |
||||
}, |
||||
inputFocus(e) { |
||||
console.log(e); |
||||
}, |
||||
inputCodeBlur(e) { |
||||
let value = e.detail.value |
||||
this.focus = false |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.courseInfo { |
||||
.slot-content { |
||||
font-size: 28rpx; |
||||
color: $u-content-color; |
||||
padding-left: 30rpx; |
||||
} |
||||
|
||||
.input-list { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.input-item { |
||||
width: 0rpx; |
||||
} |
||||
|
||||
.code-list { |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
|
||||
.code-item { |
||||
width: 80rpx; |
||||
height: 80rpx; |
||||
text-align: center; |
||||
line-height: 80rpx; |
||||
border: 1rpx solid #eee; |
||||
border-radius: 10rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,13 @@ |
||||
<template> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
@ -0,0 +1,491 @@ |
||||
<template> |
||||
<view class="onLineCourseWrap" v-show="courseItem.courseName"> |
||||
<view class="onLineTitle"> |
||||
<img src="http://image.bjkeyware.com/static/index/olCourse.png" alt=""> |
||||
<view style="max-width: calc(100% - 100rpx);word-break: break-all">{{ courseItem.courseName }}</view> |
||||
</view> |
||||
<view class="onLineTime">时间: {{ yyyDate(courseItem.courseTime) }}</view> |
||||
<view class="onLineTeacher">讲师：{{ courseItem.instructor }}</view> |
||||
<view class="onLine" v-show="courseItem.title">职称：{{ courseItem.title }}</view> |
||||
<view class="onLineContent">授课内容: {{ courseItem.courseContent }}</view> |
||||
<view class="onLineMask" v-show="maskShow"> |
||||
<!-- <img src="http://image.bjkeyware.com/static/index/arr.png" alt=""> --> |
||||
<img src="" alt=""> |
||||
<view class="learnBtnWrap"> |
||||
<view v-if="courseItem.status == '1'" class="learnBtn" @click="startLearn('pay')">付费学习￥{{ |
||||
courseItem.amount }}</view> |
||||
<view v-if="courseItem.status == '1'" class="passBtn" @click="startLearn('code')">输入口令学习</view> |
||||
</view> |
||||
</view> |
||||
<view v-show="!maskShow" class="startLeranBtn" @click="urlShow = true">开始学习</view> |
||||
<u-modal v-model="show" title="请输入口令" :show-confirm-button="false"> |
||||
<view class="slot-content"> |
||||
<view class="input-list"> |
||||
<!-- input输入框 --> |
||||
<input class="input-item" v-if="focus" adjust-position="false" auto-blur="true" |
||||
@blur="inputCodeBlur" @input="inputCode" :focus="focus" v-model="code" @focus="inputFocus" |
||||
type="number" oneTimeCode maxlength="6" /> |
||||
<!-- 验证码输入框 --> |
||||
<view class="code-list" @click="focusClick"> |
||||
<view class="code-item" v-for="(_, index) in 4" :key="index" |
||||
:style="(index == code.length && focus ? 'border-color:#3c9cff;' : '')">{{ code[index] || '' |
||||
}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="codeBtnCoup"> |
||||
<view class="codeBtn canle" @click="show = false">取消</view> |
||||
<view class="codeBtn sure" @click="submitCode">确定</view> |
||||
</view> |
||||
</view> |
||||
</u-modal> |
||||
<u-modal v-model="urlShow" title="学习链接" :show-confirm-button="false"> |
||||
<view class="slot-content"> |
||||
<view class="courseContent" style="text-align: center;"> |
||||
<view style="color: #2084F9;">请使用腾讯会议打开</view> |
||||
<view style="font-weight: 500;">{{ courseItem.url }}</view> |
||||
</view> |
||||
<view class="codeBtnCoup" style="justify-content: center;margin-top: 0;"> |
||||
<view class="codeBtn sure" style="width: 80%;border-radius: 5rpx;" @click="copy">复制</view> |
||||
</view> |
||||
</view> |
||||
</u-modal> |
||||
<!-- <u-popup style="background:#66666;padding: 20px;" v-model="isPopupShow" @close="close" mode="bottom" |
||||
length="80%" height='60%' border-radius="15" :closeable='true' :mask-close-able="false"> |
||||
<view style="background:#66666;padding:15px 20px 30px 20px; "> |
||||
<view style="background-color: #FFFFFF;"> |
||||
<view class="horizontalline"></view> |
||||
<view> |
||||
<view class="commodity"> |
||||
<p>课程名称：</p> |
||||
<p style="color:#333333;">{{ courseItem.courseName }}</p> |
||||
</view> |
||||
<view class="commodity"> |
||||
<p>商品价格：</p> |
||||
<p style="color:#333333;"> |
||||
<span>￥{{ '9.9' }}</span> |
||||
</p> |
||||
</view> |
||||
<view class="commodity"> |
||||
<p>支付金额：</p> |
||||
<p style="color:#FD461A;margin-top: -3px;" v-if="addPriceAll != 0"> |
||||
<span>¥ </span> |
||||
<span style="font-size:40rpx;margin-left:10rpx;font-weight: 800;">{{ addPriceAll |
||||
}}</span> |
||||
</p> |
||||
<p style="color:#FD461A;margin-top: -3px;" v-else> |
||||
<span>限时免费</span> |
||||
</p> |
||||
</view> |
||||
<view class="commodity"> |
||||
<p>支付方式：</p> |
||||
<p style="color:#FD461A;margin-top: -3px;"> |
||||
<u-radio-group v-model="payTypeBig" placement="row"> |
||||
<u-radio name="0">微信支付</u-radio> |
||||
<u-radio name="1" :disabled="lingqianIS">{{ lingqianIS ? '零钱不足' : '零钱' }}</u-radio> |
||||
</u-radio-group> |
||||
</p> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<u-line></u-line> |
||||
<view class="codeBtnCoup" style="justify-content: center;"> |
||||
<view class="codeBtn sure" style="width: 80%;" @click="payOrder">支付</view> |
||||
</view> |
||||
</u-popup> --> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { dateFormat } from '../../../utils/util'; |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
maskShow: true, |
||||
show: false, |
||||
focus: false, |
||||
code: '', |
||||
courseItem: {}, |
||||
courseId: '', |
||||
urlShow: false, |
||||
url: '', |
||||
learnStatus: false, |
||||
// isPopupShow: false, |
||||
// payTypeBig: '0', |
||||
// lingqianIS: false |
||||
} |
||||
}, |
||||
computed: { |
||||
yyyDate() { |
||||
return function (val) { |
||||
return dateFormat(new Date(val)) |
||||
} |
||||
} |
||||
}, |
||||
onLoad(course) { |
||||
const id = course.courseId |
||||
this.courseId = id |
||||
this.http.quickGet('/course/online/course/' + id).then(res => { |
||||
this.courseItem = res.data.data |
||||
if ((this.courseItem.status == 0) || course.learnStatus == 'true') { |
||||
this.maskShow = false |
||||
} |
||||
}) |
||||
}, |
||||
methods: { |
||||
payOrder() { |
||||
|
||||
}, |
||||
close() { |
||||
this.isPopupShow = false |
||||
// console.log('close'); |
||||
}, |
||||
startLearn(val) { |
||||
if (val == 'code') { |
||||
this.show = true |
||||
} else if (val == 'pay') { |
||||
// this.isPopupShow = true |
||||
this.toPay() |
||||
} |
||||
// this.toggleFlag = 'tolearn' |
||||
}, |
||||
toPay() { |
||||
const userinform = uni.getStorageSync('wxUserInfo'); |
||||
if (!userinform) { |
||||
uni.showToast({ title: '登录失效，请重新登录', icon: 'none', duration: 1000 }); |
||||
setTimeout(() => { |
||||
uni.navigateTo({ |
||||
url: '/pages/personal/login' |
||||
}) |
||||
}, 1000) |
||||
return |
||||
} |
||||
const id = userinform.userId |
||||
// const data = { |
||||
// courseId: this.tooldetilsdata.tool.toolId, |
||||
// amount: this.cartnumber, |
||||
// deliverType: this.tooldetilsdata.tool.deliverType, |
||||
// price: '', |
||||
// payType: 'W06', |
||||
// paytype: 'W06', |
||||
// toolType: this.tooldetilsdata.tool.toolType, |
||||
// userId: id |
||||
// } |
||||
const data = { |
||||
"price": this.courseItem.amount, |
||||
"payType": "W06", |
||||
"userId": id, |
||||
// "recordName": this.courseItem.courseName, |
||||
// "toolId":this.courseItem.courseId |
||||
} |
||||
// return |
||||
const _this = this |
||||
this.http.quickPost(`/play/course/pay`, data, true).then(res => { |
||||
// console.log(res); |
||||
if (res.data.data.retcode == 'SUCCESS') { |
||||
const info = JSON.parse(res.data.data.payinfo) |
||||
console.log(info); |
||||
// return |
||||
// 06 小程序 |
||||
// 01 扫码 |
||||
// return |
||||
uni.requestPayment({ |
||||
timeStamp: info.timeStamp, |
||||
nonceStr: info.nonceStr, |
||||
package: info.package, |
||||
signType: info.signType, |
||||
paySign: info.paySign, |
||||
success(r) { |
||||
const sucData = { |
||||
"price": _this.courseItem.amount, |
||||
"payType": "W06", |
||||
"userId": id, |
||||
"recordName": _this.courseItem.courseName, |
||||
"toolId": _this.courseItem.courseId |
||||
} |
||||
_this.http.quickPost(`/play/course/pay/succes`, sucData, true).then(res => { }) |
||||
uni.showToast({ |
||||
icon: 'none', |
||||
title: '支付成功' |
||||
}) |
||||
_this.maskShow = false |
||||
// that.isPopupShow = false |
||||
// setTimeout(() => { |
||||
// uni.navigateTo({ |
||||
// url: '/pages/personal/ordernumber/ordernumber?current=0' |
||||
// }) |
||||
// }, 1000) |
||||
}, |
||||
fail(error) { |
||||
console.log(error); |
||||
uni.showToast({ |
||||
icon: 'none', |
||||
title: '支付失败' |
||||
}) |
||||
} |
||||
}) |
||||
} else { |
||||
uni.showToast({ |
||||
icon: 'none', |
||||
title: '支付错误，请联系管理员' |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
focusClick() { |
||||
this.focus = true |
||||
}, |
||||
pay() { |
||||
console.log('pay for this'); |
||||
}, |
||||
openInputCode() { |
||||
this.show = true |
||||
}, |
||||
inputCode(e) { |
||||
if (this.code.length > 4) { |
||||
return |
||||
} |
||||
let value = e.detail.value |
||||
this.code = value |
||||
}, |
||||
inputFocus(e) { |
||||
console.log(e); |
||||
}, |
||||
inputCodeBlur(e) { |
||||
let value = e.detail.value |
||||
this.focus = false |
||||
}, |
||||
copy() { |
||||
uni.setClipboardData({ |
||||
data: this.courseItem.url, // 这里是个坑接受字符串类型 value转化为字符串 |
||||
success: function () { |
||||
//调用方法成功 |
||||
uni.showToast({ |
||||
title: '已复制到剪切板', |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
}) |
||||
this.urlShow = false |
||||
}, |
||||
submitCode() { |
||||
this.http.quickPost('/train/course/enterPasswd/' + this.courseId, { password: this.code }, true).then(res => { |
||||
if (res.data.code != 200) { |
||||
uni.showToast({ |
||||
title: res.data.msg, |
||||
icon: 'none', |
||||
duration: 2000, |
||||
}) |
||||
} else { |
||||
// this.url = res.data.data |
||||
this.maskShow = false |
||||
} |
||||
}) |
||||
this.code = '' |
||||
this.show = false |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.commodity { |
||||
display: flex; |
||||
color: #808080; |
||||
font-size: 32rpx; |
||||
margin: 20px 0; |
||||
} |
||||
|
||||
.commodity input { |
||||
min-height: 40rpx !important; |
||||
} |
||||
|
||||
.onLineCourseWrap { |
||||
margin: 25rpx; |
||||
height: calc(100% - 50rpx); |
||||
background: #FFFFFF; |
||||
border-radius: 10rpx; |
||||
padding: 24rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 27rpx; |
||||
color: #404040; |
||||
|
||||
.onLineTitle { |
||||
font-weight: bold; |
||||
font-size: 30rpx; |
||||
color: #000000; |
||||
line-height: 46rpx; |
||||
margin: 30rpx 0; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
img { |
||||
width: 38rpx; |
||||
height: 38rpx; |
||||
margin-right: 20rpx; |
||||
} |
||||
} |
||||
|
||||
.onLineTime { |
||||
margin: 15rpx 0; |
||||
} |
||||
|
||||
.onLineTeacher { |
||||
margin: 20rpx 0; |
||||
} |
||||
|
||||
.onLine { |
||||
margin: 20rpx 0; |
||||
} |
||||
|
||||
.onLineContent { |
||||
margin: 20rpx 0; |
||||
line-height: 46rpx; |
||||
// line-height: 1.5; |
||||
} |
||||
|
||||
.onLineMask { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
img { |
||||
width: 46rpx; |
||||
height: 111rpx; |
||||
margin: 619rpx 0 0 50%; |
||||
} |
||||
|
||||
.learnBtnWrap { |
||||
width: 279rpx; |
||||
margin-top: 211rpx; |
||||
margin-left: 50%; |
||||
transform: translate(-50%); |
||||
|
||||
.learnBtn { |
||||
width: 279rpx; |
||||
height: 67rpx; |
||||
background: linear-gradient(90deg, #5EA6FD, #1A81F9); |
||||
box-shadow: 0rpx 1rpx 20rpx 1rpx rgba(13, 92, 187, 0.53); |
||||
margin-bottom: 30rpx; |
||||
border-radius: 33rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 30rpx; |
||||
color: #FFFFFF; |
||||
line-height: 65rpx; |
||||
text-align: center; |
||||
} |
||||
|
||||
.passBtn { |
||||
margin-bottom: 90rpx; |
||||
height: 67rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 30rpx; |
||||
color: #1578ED; |
||||
line-height: 65rpx; |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.startLeranBtn { |
||||
position: fixed; |
||||
bottom: 69rpx; |
||||
width: 646rpx; |
||||
height: 70rpx; |
||||
background: linear-gradient(90deg, #5EA6FD, #1A81F9); |
||||
box-shadow: 0rpx 1rpx 20rpx 1rpx rgba(13, 92, 187, 0.4); |
||||
border-radius: 35rpx; |
||||
|
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 30rpx; |
||||
color: #FFFFFF; |
||||
line-height: 65rpx; |
||||
text-align: center; |
||||
} |
||||
|
||||
.slot-content { |
||||
font-size: 28rpx; |
||||
color: $u-content-color; |
||||
padding-left: 30rpx; |
||||
} |
||||
|
||||
.input-list { |
||||
padding-top: 20rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.input-item { |
||||
width: 0rpx; |
||||
} |
||||
|
||||
.code-list { |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-around; |
||||
|
||||
.code-item { |
||||
width: 80rpx; |
||||
height: 80rpx; |
||||
text-align: center; |
||||
line-height: 80rpx; |
||||
border: 1rpx solid #eee; |
||||
border-radius: 10rpx; |
||||
background: #EAEEF3; |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
.codeBtnCoup { |
||||
padding: 20rpx; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-top: 40rpx; |
||||
|
||||
.codeBtn { |
||||
width: 250rpx; |
||||
line-height: 70rpx; |
||||
border-radius: 35rpx; |
||||
text-align: center; |
||||
font-size: 28rpx; |
||||
color: #FFFFFF; |
||||
} |
||||
|
||||
.sure { |
||||
background: linear-gradient(90deg, #5EA6FD, #1A81F9); |
||||
} |
||||
|
||||
.canle { |
||||
color: #666666; |
||||
border: 1px solid #E0E0E0; |
||||
} |
||||
} |
||||
|
||||
.courseContent { |
||||
width: 372rpx; |
||||
text-overflow: ellipsis; |
||||
white-space: normal; |
||||
word-break: break-all; |
||||
margin: 30rpx auto 0 auto; |
||||
font-family: PingFang SC; |
||||
font-weight: bold; |
||||
font-size: 28rpx; |
||||
line-height: 49rpx; |
||||
// background-color: #000000; |
||||
text-align: center; |
||||
} |
||||
|
||||
|
||||
} |
||||
</style> |
||||
|
Before Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
@ -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,145 @@ |
||||
<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 |
||||
console.log(testerStatus); |
||||
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,368 @@ |
||||
<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" :duration="swipeDuration" next-margin="30rpx" |
||||
:current="currentImgIndex" @change="changeswiper"> |
||||
<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: '0', |
||||
avatar: '', |
||||
phoneuserinfo: '', |
||||
nickName: '', |
||||
currentImgIndex: 0, |
||||
swipeDuration:0, |
||||
stateMap: Object.freeze({ |
||||
'未达成': 'currentGrow3', |
||||
'已达成': 'currentGrow1', |
||||
'当前等级': 'currentGrow2' |
||||
}), |
||||
levelColor: Object.freeze(levelColor) |
||||
} |
||||
}, |
||||
methods: { |
||||
toToggle(url) { |
||||
uni.navigateTo({ |
||||
url: `./${url}` |
||||
}) |
||||
}, |
||||
changeswiper(e) { |
||||
this.currentImgIndex = e.detail.current |
||||
} |
||||
}, |
||||
onShow() { |
||||
|
||||
}, |
||||
onLoad() { |
||||
this.http.quickGet('/getInfo', true).then(res => { |
||||
const { growthValue } = res.data.user |
||||
this.myScore = growthValue || 0 |
||||
this.currentImgIndex = getLevel(this.myScore).level |
||||
this.swipeDuration = 500 |
||||
}) |
||||
this.phoneuserinfo = uni.getStorageSync('wxUserInfo'); |
||||
this.avatar = uni.getStorageSync('avatar'); |
||||
this.nickName = uni.getStorageSync('nickName'); |
||||
}, |
||||
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,109 @@ |
||||
<template> |
||||
<view class="allcourseWrapper"> |
||||
<view v-if="onLineList.length"> |
||||
<view v-for="course in onLineList" :key="course.courseId"> |
||||
<onLineCourseItem :onLineCourse="course" @toLearn="toLearn"></onLineCourseItem> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { dateFormat } from '@/utils/util'; |
||||
import onLineCourseItem from '@/components/onLineCourseItem/index.vue' |
||||
|
||||
export default { |
||||
components: { |
||||
onLineCourseItem |
||||
}, |
||||
data() { |
||||
return { |
||||
onLineList: [], |
||||
total: 10, |
||||
classId: '', |
||||
className: '', |
||||
queryParams: { |
||||
pageSize: 10, |
||||
pageNum: 1, |
||||
}, |
||||
} |
||||
}, |
||||
onShow() { |
||||
// const classId = options.id |
||||
// const className = options.name |
||||
// this.className = className |
||||
// // console.log(options) |
||||
// this.classId = classId |
||||
// uni.setNavigationBarTitle({ title: className }) |
||||
this.getCourseList() |
||||
}, |
||||
methods: { |
||||
async toLearn(course) { |
||||
if (!course.signUp && course.isPay == '0') { |
||||
const res = await this.http.quickPost(`/train/online/signUp/${course.courseId}`, {}, true) |
||||
if (res.data.code == 200) { |
||||
uni.navigateTo({ |
||||
url: `/pages/index/testtraining/onLineCourse?courseId=${course.courseId}` |
||||
}) |
||||
} |
||||
else { |
||||
return |
||||
} |
||||
} else { |
||||
uni.navigateTo({ |
||||
url: `/pages/index/testtraining/onLineCourse?courseId=${course.courseId}&learnStatus=${course.show ? true : false}` |
||||
}) |
||||
} |
||||
}, |
||||
pagionChange(e) { |
||||
console.log(e); |
||||
this.queryParams.pageNum = e.current |
||||
this.getCourseList() |
||||
}, |
||||
async getCourseList() { |
||||
let accessToken = uni.getStorageSync('accessToken') |
||||
if (accessToken) { |
||||
const wxUserInfo = uni.getStorageSync('wxUserInfo') |
||||
const userId = wxUserInfo.userId |
||||
this.http.quickGet(`/course/online/courses?userId=${userId}`).then((res) => { |
||||
// console.log(res); |
||||
this.onLineList = res.data.data |
||||
console.log(this.onLineList); |
||||
|
||||
}) |
||||
} else { |
||||
this.http.quickGet(`/course/online/courses`, false).then((res) => { |
||||
// console.log(res); |
||||
this.onLineList = res.data.data |
||||
console.log(this.onLineList); |
||||
|
||||
}) |
||||
} |
||||
}, |
||||
async onReachBottom() { |
||||
if (this.total <= this.queryParams.pageSize) { |
||||
return |
||||
} |
||||
this.queryParams.pageSize += 10 |
||||
this.getCourseList() |
||||
console.log("onReachBottom"); |
||||
}, |
||||
async onReachBottom() { |
||||
// if (this.total <= this.queryParams.pageSize) { |
||||
// return |
||||
// } |
||||
// this.queryParams.pageSize += 10 |
||||
// this.getCourseList() |
||||
console.log("onReachBottom"); |
||||
}, |
||||
|
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.allcourseWrapper { |
||||
// text-align: center; |
||||
margin: 20rpx; |
||||
} |
||||
</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