Skip to content

S
study
Commit 72944f58 authored by Facius's avatar Facius
Browse files
Options

feat: 绑定页面

parent c814ffbb
Hide whitespace changes
Inline Side-by-side
Showing with 384 additions and 1 deletion
src/pages.json
View file @ 72944f58
...@@ -137,6 +137,26 @@ ...@@ -137,6 +137,26 @@
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
"disableScroll": true "disableScroll": true
} }
},
{
"path": "boundQuestions",
"name": "learnBoundQuestions",
"style": {
"navigationBarTitleText": "绑定题库",
"navigationStyle": "custom",
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{
"path": "manualBinding",
"name": "learnManualBinding",
"style": {
"navigationBarTitleText": "手动绑定",
"navigationStyle": "custom",
"enablePullDownRefresh": false,
"disableScroll": true
}
} }
] ]
}, },
......
src/pages/learn/boundQuestions.vue 0 → 100644
View file @ 72944f58
<template>
<view class="bound-questions">
<u-navbar
back-icon-color="#191C27"
background="transparent"
title="绑定题库"
titleColor="#191C27"
:border-bottom="false"
title-bold
></u-navbar>
<view class="body-view">
<view class="image-view"
><image class="image" :src="successImage"></image
></view>
<view class="content-view">
<view class="first-line">
<view class="serial-view">1</view>
<view>
持有学习卡的学员，扫描<text class="blue-text">卡背面的条码</text
>完成绑定</view
></view
>
<view class="second-line">
<view class="left-view">
<view class="serial-view">2</view>
<view>没有学习卡的学员，可在线购买题库</view>
</view>
<u-button :custom-style="buttonStyle" @click="handleClickBuy"
>购买</u-button
>
</view>
</view>
<view class="bottom-view">
<u-button
:customStyle="customStyle"
@click="handleClick"
type="primary"
shape="circle"
>
扫码自动绑定
</u-button>
<view class="change-button" @click="$u.throttle(handleChange, 500)"
>手动输入卡号、密码绑定</view
>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {}
},
computed: {
customStyle() {
return {
height: '104rpx',
backgroundColor: '#2953FF',
color: '#FFFFFF',
fontSize: '32rpx',
fontWeight: 'bold',
}
},
buttonStyle() {
return {
width: '120rpx',
height: '56rpx',
background: '#FFFFFF',
color: '#2953FF',
fontSize: '26rpx',
borderRadius: '12rpx',
}
},
},
onLoad() {},
methods: {
handleClick() {
wx.scanCode({
onlyFromCamera: true,
success: (res) => {
console.log(res)
if (res.result) {
this.$u.route({
url: 'pages/learn/manualBinding',
params: {
code: res.result.code,
password: res.result.password,
},
})
}
},
})
},
handleClickBuy() {},
handleChange() {},
},
}
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
.bound-questions {
display: flex;
flex-direction: column;
background-image: linear-gradient(to top, #f7f9fc 0%, #e9f3ff 50%);
background-color: #f7f9fc;
background-size: 100% 520rpx;
background-repeat: no-repeat;
height: 100vh;
.body-view {
height: 100%;
overflow: auto;
padding: 10rpx 24rpx 44rpx 24rpx;
.image-view {
text-align: center;
.image {
width: 700rpx;
height: 360rpx;
background-color: red;
border-radius: 24rpx;
box-shadow: 0px 10px 16px rgba(29, 53, 155, 0.2);
}
}
.content-view {
margin-top: 60rpx;
.first-line {
display: flex;
align-items: center;
margin-bottom: 56rpx;
.blue-text {
color: #2953ff;
}
}
.second-line {
display: flex;
justify-content: space-between;
align-items: center;
.left-view {
display: flex;
align-items: center;
color: #5a6073;
font-size: 28rpx;
}
}
.serial-view {
background-color: #2953ff;
height: 40rpx;
width: 40rpx;
border-radius: 8rpx;
font-size: 28rpx;
line-height: 40rpx;
text-align: center;
color: #ffffff;
margin-right: 14rpx;
}
}
.bottom-view {
margin-top: 96rpx;
text-align: center;
.change-button {
color: #2953ff;
font-size: 26rpx;
height: 40rpx;
line-height: 40rpx;
margin-top: 30rpx;
}
}
}
}
</style>
src/pages/learn/detail.vue
View file @ 72944f58
...@@ -261,7 +261,8 @@ export default { ...@@ -261,7 +261,8 @@ export default {
.money-view { .money-view {
position: relative; position: relative;
margin-left: 30rpx;
margin-bottom: 8rpx;
.money-text { .money-text {
font-size: 24rpx; font-size: 24rpx;
color: #5a6073; color: #5a6073;
......
src/pages/learn/manualBinding.vue 0 → 100644
View file @ 72944f58
<template>
<view class="bound-questions">
<u-navbar
back-icon-color="#191C27"
background="transparent"
title="手动绑定"
titleColor="#191C27"
:border-bottom="false"
title-bold
></u-navbar>
<view class="body-view">
<view class="image-view"
><image class="image" :src="successImage"></image
></view>
<view class="content-view">
<view class="field-title">学习卡卡号</view>
<view class="field-view">
<input
type="number"
class="input-code"
:value="code"
placeholder="请输入卡号"
:placeholder-style="placeplaceholderStyle"
cursor-spacing="140"
:focus="focus"
adjust-position
/>
</view>
<view class="field-title">学习卡密码</view>
<view class="field-view">
<input
class="input-password"
password
:value="password"
placeholder="请输入密码"
:placeholder-style="placeplaceholderStyle"
cursor-spacing="140"
adjust-position
/>
</view>
</view>
<view class="bottom-view">
<u-button
:customStyle="customStyle"
@click="handleClick"
type="primary"
shape="circle"
>
绑定
</u-button>
<view class="change-button"
><u-icon class="icon-view" name="error-circle"></u-icon
>注意：学习卡完成绑定后，不支持解绑操作</view
>
</view>
</view>
</view>
</template>
<script>
import uIcon from '../../uview-ui/components/u-icon/u-icon.vue'
export default {
components: { uIcon },
data() {
return {
code: '',
password: '',
focus: false,
cursorSpacingCode: 0,
cursorSpacingPassword: 0,
}
},
computed: {
customStyle() {
return {
height: '104rpx',
backgroundColor: '#2953FF',
color: '#FFFFFF',
fontSize: '32rpx',
fontWeight: 'bold',
}
},
buttonStyle() {
return {
width: '120rpx',
height: '56rpx',
background: '#FFFFFF',
color: '#2953FF',
fontSize: '26rpx',
borderRadius: '12rpx',
}
},
placeplaceholderStyle() {
return 'color:#9EA5BB;font-size:28rpx'
},
},
onLoad(e) {
if (e && e.code) {
this.code = e.code
}
if (e && e.password) {
this.password = e.password
}
if (!this.code) {
this.focus = true
}
},
methods: {
handleClick() {},
},
}
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
.bound-questions {
display: flex;
flex-direction: column;
background-image: linear-gradient(to top, #f7f9fc 0%, #e9f3ff 50%);
background-color: #f7f9fc;
background-size: 100% 520rpx;
background-repeat: no-repeat;
height: 100vh;
.body-view {
height: 100%;
overflow: auto;
padding: 10rpx 24rpx 44rpx 24rpx;
.image-view {
text-align: center;
.image {
width: 700rpx;
height: 360rpx;
background-color: red;
border-radius: 24rpx;
box-shadow: 0px 10px 16px rgba(29, 53, 155, 0.2);
}
}
.content-view {
margin-top: 50rpx;
.field-title {
font-size: 32rpx;
font-weight: bold;
color: #191c27;
}
.field-view {
height: 104rpx;
background-color: #ffffff;
margin-top: 30rpx;
margin-bottom: 60rpx;
display: flex;
align-items: center;
justify-content: center;
border-right: 12rpx;
padding: 0 24rpx;
}
}
.bottom-view {
text-align: center;
.change-button {
color: #9ea5bb;
font-size: 24rpx;
margin-top: 20rpx;
display: flex;
align-items: center;
justify-content: center;
.icon-view {
color: #fa5a49;
font-size: 32rpx;
margin-right: 10rpx;
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment