Skip to content

Y
year-end-activitiy
提交 1fc2f305 编写于 作者: tao.wu's avatar tao.wu
浏览文件
操作

领取页面页面联调接口

上级 0982471b
显示空白字符变更
内嵌 并排
正在显示 包含 330 行增加 和 107 行删除
assets/style/index.less
浏览文件 @ 1fc2f305
...@@ -189,9 +189,15 @@ ...@@ -189,9 +189,15 @@
.wx-share-wrap { .wx-share-wrap {
width: 375px; width: 375px;
height: 601.5px; height: 601.5px;
button,input{
appearance: none;
border: none;
outline: none;
}
section { section {
width: 375px; width: 375px;
height: 601.5px; height: 601.5px;
padding-bottom: 27.5px;
background: url(../img/bgtop.png) no-repeat; background: url(../img/bgtop.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.invite-info{ .invite-info{
...@@ -226,7 +232,7 @@ ...@@ -226,7 +232,7 @@
height:162px; height:162px;
padding: 20px 25px; padding: 20px 25px;
box-sizing: border-box; box-sizing: border-box;
margin: 0 auto; margin: 0 auto 16px auto;
background:rgba(255,255,255,1); background:rgba(255,255,255,1);
border-radius:6px; border-radius:6px;
.title1{ .title1{
...@@ -238,14 +244,25 @@ ...@@ -238,14 +244,25 @@
line-height:16px; line-height:16px;
} }
.title2{ .title2{
margin-bottom: 16px;
text-align: center; text-align: center;
font-size:12px; font-size:12px;
color:rgba(248,94,71,1); color:rgba(248,94,71,1);
line-height:12px; line-height:12px;
} }
.imgs-wrap{ .imgs-wrap{
display: flex;
justify-content: space-between;
div{ div{
h3{ border-radius: 6px;
img{
width: 50px;
height: 50px;
display: block;
margin: 0 auto;
}
.img-txt{
margin-top: 8px;
font-size:12px; font-size:12px;
color:rgba(103,104,105,1); color:rgba(103,104,105,1);
line-height:12px; line-height:12px;
...@@ -253,5 +270,100 @@ ...@@ -253,5 +270,100 @@
} }
} }
} }
.form-info{
width:345px;
// height:162px;
padding: 15px;
box-sizing: border-box;
margin: 0 auto 16px auto;
background:rgba(255,255,255,1);
border-radius:6px;
.field-wrap{
display: flex;
justify-content: flex-start;
width: 315px;
height: 45px;
line-height: 45px;
padding: 0 20px;
box-sizing: border-box;
background:rgba(248,249,250,1);
border-radius:22.5px;
margin-bottom: 10px;
position: relative;
.cap-box{
width: 90px;
height: 35px;
top: 5px;
right: 5px;
position: absolute;
img{
width: 100%;
height: 100%;
display: block;
border-radius:22.5px;
}
}
button{
width:56px;
height:40px;
top: 2.5px;
right: 20px;
position: absolute;
font-size:14px;
color:rgba(151,152,153,1);
line-height:40px;
background: none;
}
label{
margin-top: 2.5px;
font-size:14px;
font-weight:700;
display: block;
width: 112px;
height: 40px;
line-height: 40px;
color:rgba(55,56,57,1);
}
input{
margin-top: 2.5px;
font-size:14px;
width: 130px;
height: 40px;
line-height:40px;
background: none;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color:rgba(199,200,201,1);
height: 40px;
line-height:40px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:rgba(199,200,201,1);
height: 40px;
line-height:40px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:rgba(199,200,201,1);
height: 40px;
line-height:40px;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:rgba(199,200,201,1);
height: 40px;
line-height:40px;
}
}
.btn-post{
width: 315px;
height: 45px;
margin-top: 10px;
background:linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
border-radius:22.5px;
font-size:15px;
font-weight:700;
color:rgba(255,255,255,1);
line-height:15px;
}
}
} }
} }
\ No newline at end of file
assets/style/revant.less
浏览文件 @ 1fc2f305
.remind-success{ .remind-success {
width: 300px; width: 300px;
.van-dialog__header{
font-size:18px; .van-dialog__header {
color:rgba(51,51,51,1); font-size: 18px;
line-height:18px; color: rgba(51, 51, 51, 1);
line-height: 18px;
padding-top: 30px; padding-top: 30px;
} }
.van-dialog__content{
.van-dialog__message{ .van-dialog__content {
.van-dialog__message {
padding: 14px 24px 30px 24px; padding: 14px 24px 30px 24px;
text-align: left; text-align: left;
font-size:14px; font-size: 14px;
color:rgba(103,104,105,1); color: rgba(103, 104, 105, 1);
line-height:21px; line-height: 21px;
span{
font-size:14px; span {
color:#449284; font-size: 14px;
line-height:21px; color: #449284;
line-height: 21px;
} }
} }
} }
.van-dialog__footer{
.van-dialog__cancel{ .van-dialog__footer {
.van-button__text{ .van-dialog__cancel {
font-size:17px; .van-button__text {
color:rgba(151,152,153,1); font-size: 17px;
line-height:24px; color: rgba(151, 152, 153, 1);
line-height: 24px;
} }
} }
.van-dialog__confirm{
.van-button__text{ .van-dialog__confirm {
font-size:17px; .van-button__text {
color:rgba(68,146,132,1); font-size: 17px;
line-height:24px; color: rgba(68, 146, 132, 1);
line-height: 24px;
} }
} }
} }
} }
.version-toast{
.version-toast {
width: 320px; width: 320px;
.van-dialog__header{
font-size:18px; .van-dialog__header {
color:rgba(51,51,51,1); font-size: 18px;
line-height:18px; color: rgba(51, 51, 51, 1);
line-height: 18px;
padding-top: 30px; padding-top: 30px;
} }
.van-dialog__content{
.van-dialog__message{ .van-dialog__content {
font-size:14px; .van-dialog__message {
color:rgba(103,104,105,1); font-size: 14px;
line-height:21px; color: rgba(103, 104, 105, 1);
line-height: 21px;
} }
} }
.van-dialog__footer{
border: .5px solid rgba(0,0,0,.3); .van-dialog__footer {
.van-dialog__cancel{ border: .5px solid rgba(0, 0, 0, .3);
.van-button__text{
font-size:17px; .van-dialog__cancel {
color:rgba(151,152,153,1); .van-button__text {
line-height:24px; font-size: 17px;
color: rgba(151, 152, 153, 1);
line-height: 24px;
} }
} }
.van-dialog__confirm{
.van-button__text{ .van-dialog__confirm {
font-size:17px; .van-button__text {
color:rgba(68,146,132,1); font-size: 17px;
line-height:24px; color: rgba(68, 146, 132, 1);
line-height: 24px;
} }
} }
} }
} }
.wx-share-wrap {
.van-count-down {
line-height: 45px;
right: 20px;
position: absolute;
}
}
\ No newline at end of file
pages/shareActive.vue
浏览文件 @ 1fc2f305
...@@ -13,61 +13,60 @@ ...@@ -13,61 +13,60 @@
<div class="imgs-wrap"> <div class="imgs-wrap">
<div> <div>
<img src="../assets/img/ico1.png" /> <img src="../assets/img/ico1.png" />
<h3>高血压课程</h3> <div class="img-txt">高血压课程</div>
</div> </div>
<div> <div>
<img src="../assets/img/ico2.png" /> <img src="../assets/img/ico2.png" />
<h3>糖尿病课程</h3> <div class="img-txt">糖尿病课程</div>
</div> </div>
<div> <div>
<img src="../assets/img/ico3.png" /> <img src="../assets/img/ico3.png" />
<h3>中医课程</h3> <div class="img-txt">中医课程</div>
</div> </div>
<div> <div>
<img src="../assets/img/ico4.png" /> <img src="../assets/img/ico4.png" />
<h3>全科课程</h3> <div class="img-txt">全科课程</div>
</div> </div>
</div> </div>
</div> </div>
<div class="form-info"> <div class="form-info">
<van-cell-group> <div class="field-wrap">
<van-field <label>联系方式</label>
v-model="mobile" <input v-model="mobilePhone" type="tel" maxlength="11" placeholder="请输入手机号">
label="联系方式" </div>
placeholder="请输入手机号" <div class="field-wrap">
/> <label>图形验证码</label>
<input v-model="captchaAnswer" type="text" maxlength="6" placeholder="请输入">
<van-field <div class="cap-box"><img :src="captchaImg" @click="getCaptcha"></div>
v-model="captcha" </div>
label="图形验证码" <div class="field-wrap">
placeholder="请输入" <label>短信验证码</label>
/> <input v-model="authCode" type="tel" maxlength="6" placeholder="请输入">
<button v-if="notSend" @click="sendSms">{{btnMsg}}</button>
<van-field <van-count-down v-if="!notSend" :time="time" @finish="finishCount" :format="'ss' + 's'" />
v-model="authCode" </div>
center <button class="btn-post" @click="getCourse">领取课程</button>
clearable
label="短信验证码"
placeholder="请输入"
>
<van-button slot="button" size="small" type="primary">发送验证码</van-button>
</van-field>
</van-cell-group>
<van-button @click="getCourse" slot="button" type="primary">领取课程</van-button>
</div> </div>
</section> </section>
</div> </div>
</template> </template>
<script> <script>
import { getInviteInfo, getCourseById } from '@/service'; import { getInviteInfo, getCourseById, getCaptchaGet, getAuthCode } from '@/service';
const TIMEALL = 60000; // 倒计时常量 60 秒
export default { export default {
data(){ data(){
return { return {
mobile: '18217314361', notSend: true,
authCode: '1234', // 短信验证码 mobilePhone: '',
captcha: '', // 图形验证码 authCode: '', // 短信验证码
flag: 0,
captchaImg: '', // 图形验证码图片字段
captchaToken: '', // captchaToken
captchaAnswer: '', // 输入的图形验证码
time: TIMEALL,
btnMsg: '点击获取'
} }
}, },
async asyncData({ query }){ async asyncData({ query }){
...@@ -80,28 +79,87 @@ ...@@ -80,28 +79,87 @@
name = data.name ? data.name : data.mobilePhone; name = data.name ? data.name : data.mobilePhone;
} }
return { return {
avatarImageUrl, name, mobilePhone, id, taskId, activityId avatarImageUrl, name, id, taskId, activityId
} }
}, },
mounted(){
this.getCaptcha();
},
methods: { methods: {
// 点击刷新验证码
getCaptcha(){
getCaptchaGet().then(res=>{
if(res.code==='000000'){
this.captchaImg = `data:image/png;base64,${res.data.content}`;
this.captchaToken = res.data.token;
}else{
this.$toast(res.message);
}
})
},
// 领取课程事件
getCourse(){ getCourse(){
const { mobile, authCode, id, taskId, activityId } = this; if(this.mobilePhone=='' || this.mobilePhone.length!=11){
this.$toast('请输入正确的手机号');
return;
}
if(this.authCode==''){
this.$toast('请输入短信验证码');
return;
}
const { mobilePhone, authCode, id, taskId, activityId } = this;
// 调用领取课程接口
getCourseById({ getCourseById({
mobile, mobile: mobilePhone,
authCode, authCode,
id, id,
taskId, taskId,
activityId activityId
}).then(res=>{ }).then(res=>{
console.log('领取课程调用===>', res); if(res.code=='000000'){
if(res.code=='000000' && res.data){ // res.data true 登记成功 、 false 登记失败
// 登记成功 / 领取成功 this.$router.push({
}else if(res.code=='000000' && !res.data){ name: 'shareResult',
// 登记失败 / 领取失败 query: {
status: res.data
}
})
}else { }else {
this.$toast(res.message); this.$toast(res.message);
} }
}) })
},
// 发送获取短信验证码
sendSms(){
if(this.mobilePhone=='' || this.mobilePhone.length!=11){
this.$toast('请输入正确的手机号');
return;
}
// 校验图形验证码
if(this.captchaAnswer==''){
this.$toast('请输入图形验证码');
return;
}
// this.notSend = false;
const { mobilePhone, flag, captchaToken, captchaAnswer } = this;
getAuthCode({mobilePhone, flag, captchaToken, captchaAnswer}).then(res=>{
// 发送成功
if(res.code=='000000'){
this.notSend = false;
}else{
this.$toast(res.message);
this.getCaptcha();
}
})
},
// 倒计时结束
finishCount(){
this.time = TIMEALL;
this.notSend = true;
this.btnMsg = '重新获取';
} }
} }
} }
......
pages/shareResult.vue 0 → 100644
浏览文件 @ 1fc2f305
<template>
<div>
<h1>result-share</h1>
</div>
</template>
<script>
export default {
asyncData({ query }){
console.log(query)
const { status } = query; // 上个页面传递过来领取结果， false 为已领取， true 为领取成功
}
}
</script>
\ No newline at end of file
plugins/vueComponent.js
浏览文件 @ 1fc2f305
...@@ -7,6 +7,7 @@ Vue.prototype.$picaWxShare = PicaWxShare; ...@@ -7,6 +7,7 @@ Vue.prototype.$picaWxShare = PicaWxShare;
import PicaH5Login from 'pica-h5-login'; import PicaH5Login from 'pica-h5-login';
import { import {
CountDown,
Field, Field,
Cell, Cell,
CellGroup, CellGroup,
...@@ -28,7 +29,7 @@ import WebBuriedPoint, { ...@@ -28,7 +29,7 @@ import WebBuriedPoint, {
sendBuriedData sendBuriedData
} from 'web-buried-point'; } from 'web-buried-point';
Vue.use(Field).use(Cell).use(CellGroup).use(Button).use(Popup).use(Checkbox).use(CheckboxGroup).use(RadioGroup).use(Radio).use(Progress).use(ImagePreview).use(Uploader).use(Overlay).use(Loading); Vue.use(CountDown).use(Field).use(Cell).use(CellGroup).use(Button).use(Popup).use(Checkbox).use(CheckboxGroup).use(RadioGroup).use(Radio).use(Progress).use(ImagePreview).use(Uploader).use(Overlay).use(Loading);
Vue.use(PicaH5Login); Vue.use(PicaH5Login);
Vue.use(Toast) Vue.use(Toast)
Vue.use(Dialog) Vue.use(Dialog)
......
service/index.js
浏览文件 @ 1fc2f305
...@@ -71,3 +71,22 @@ export const getCourseById = ({ mobile, authCode, id, taskId, activityId }) => { ...@@ -71,3 +71,22 @@ export const getCourseById = ({ mobile, authCode, id, taskId, activityId }) => {
}, },
}) })
} }
// 获取图形验证码
export const getCaptchaGet = () => {
return request({
url: `account/account/captcha`,
method: 'get'
})
}
// 获取短信验证码
export const getAuthCode = ({ mobilePhone, flag, captchaToken, captchaAnswer }) => {
return request({
url: `account/account/authCode`,
method: 'get',
params: {
mobilePhone, flag, captchaToken, captchaAnswer
},
})
}
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或