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 @@
.wx-share-wrap {
width: 375px;
height: 601.5px;
button,input{
appearance: none;
border: none;
outline: none;
}
section {
width: 375px;
height: 601.5px;
padding-bottom: 27.5px;
background: url(../img/bgtop.png) no-repeat;
background-size: 100% 100%;
.invite-info{
......@@ -226,7 +232,7 @@
height:162px;
padding: 20px 25px;
box-sizing: border-box;
margin: 0 auto;
margin: 0 auto 16px auto;
background:rgba(255,255,255,1);
border-radius:6px;
.title1{
......@@ -238,14 +244,25 @@
line-height:16px;
}
.title2{
margin-bottom: 16px;
text-align: center;
font-size:12px;
color:rgba(248,94,71,1);
line-height:12px;
}
.imgs-wrap{
display: flex;
justify-content: space-between;
div{
h3{
border-radius: 6px;
img{
width: 50px;
height: 50px;
display: block;
margin: 0 auto;
}
.img-txt{
margin-top: 8px;
font-size:12px;
color:rgba(103,104,105,1);
line-height:12px;
......@@ -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{
width: 300px;
.van-dialog__header{
font-size:18px;
color:rgba(51,51,51,1);
line-height:18px;
padding-top: 30px;
.remind-success {
width: 300px;
.van-dialog__header {
font-size: 18px;
color: rgba(51, 51, 51, 1);
line-height: 18px;
padding-top: 30px;
}
.van-dialog__content {
.van-dialog__message {
padding: 14px 24px 30px 24px;
text-align: left;
font-size: 14px;
color: rgba(103, 104, 105, 1);
line-height: 21px;
span {
font-size: 14px;
color: #449284;
line-height: 21px;
}
}
.van-dialog__content{
.van-dialog__message{
padding: 14px 24px 30px 24px;
text-align: left;
font-size:14px;
color:rgba(103,104,105,1);
line-height:21px;
span{
font-size:14px;
color:#449284;
line-height:21px;
}
}
}
.van-dialog__footer {
.van-dialog__cancel {
.van-button__text {
font-size: 17px;
color: rgba(151, 152, 153, 1);
line-height: 24px;
}
}
.van-dialog__footer{
.van-dialog__cancel{
.van-button__text{
font-size:17px;
color:rgba(151,152,153,1);
line-height:24px;
}
}
.van-dialog__confirm{
.van-button__text{
font-size:17px;
color:rgba(68,146,132,1);
line-height:24px;
}
}
.van-dialog__confirm {
.van-button__text {
font-size: 17px;
color: rgba(68, 146, 132, 1);
line-height: 24px;
}
}
}
}
.version-toast{
width: 320px;
.van-dialog__header{
font-size:18px;
color:rgba(51,51,51,1);
line-height:18px;
padding-top: 30px;
.version-toast {
width: 320px;
.van-dialog__header {
font-size: 18px;
color: rgba(51, 51, 51, 1);
line-height: 18px;
padding-top: 30px;
}
.van-dialog__content {
.van-dialog__message {
font-size: 14px;
color: rgba(103, 104, 105, 1);
line-height: 21px;
}
.van-dialog__content{
.van-dialog__message{
font-size:14px;
color:rgba(103,104,105,1);
line-height:21px;
}
}
.van-dialog__footer {
border: .5px solid rgba(0, 0, 0, .3);
.van-dialog__cancel {
.van-button__text {
font-size: 17px;
color: rgba(151, 152, 153, 1);
line-height: 24px;
}
}
.van-dialog__footer{
border: .5px solid rgba(0,0,0,.3);
.van-dialog__cancel{
.van-button__text{
font-size:17px;
color:rgba(151,152,153,1);
line-height:24px;
}
}
.van-dialog__confirm{
.van-button__text{
font-size:17px;
color:rgba(68,146,132,1);
line-height:24px;
}
}
.van-dialog__confirm {
.van-button__text {
font-size: 17px;
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 @@
<div class="imgs-wrap">
<div>
<img src="../assets/img/ico1.png" />
<h3>高血压课程</h3>
<div class="img-txt">高血压课程</div>
</div>
<div>
<img src="../assets/img/ico2.png" />
<h3>糖尿病课程</h3>
<div class="img-txt">糖尿病课程</div>
</div>
<div>
<img src="../assets/img/ico3.png" />
<h3>中医课程</h3>
<div class="img-txt">中医课程</div>
</div>
<div>
<img src="../assets/img/ico4.png" />
<h3>全科课程</h3>
<div class="img-txt">全科课程</div>
</div>
</div>
</div>
<div class="form-info">
<van-cell-group>
<van-field
v-model="mobile"
label="联系方式"
placeholder="请输入手机号"
/>
<van-field
v-model="captcha"
label="图形验证码"
placeholder="请输入"
/>
<van-field
v-model="authCode"
center
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 class="field-wrap">
<label>联系方式</label>
<input v-model="mobilePhone" type="tel" maxlength="11" placeholder="请输入手机号">
</div>
<div class="field-wrap">
<label>图形验证码</label>
<input v-model="captchaAnswer" type="text" maxlength="6" placeholder="请输入">
<div class="cap-box"><img :src="captchaImg" @click="getCaptcha"></div>
</div>
<div class="field-wrap">
<label>短信验证码</label>
<input v-model="authCode" type="tel" maxlength="6" placeholder="请输入">
<button v-if="notSend" @click="sendSms">{{btnMsg}}</button>
<van-count-down v-if="!notSend" :time="time" @finish="finishCount" :format="'ss' + 's'" />
</div>
<button class="btn-post" @click="getCourse">领取课程</button>
</div>
</section>
</div>
</template>
<script>
import { getInviteInfo, getCourseById } from '@/service';
import { getInviteInfo, getCourseById, getCaptchaGet, getAuthCode } from '@/service';
const TIMEALL = 60000; // 倒计时常量 60 秒
export default {
data(){
return {
mobile: '18217314361',
authCode: '1234', // 短信验证码
captcha: '', // 图形验证码
notSend: true,
mobilePhone: '',
authCode: '', // 短信验证码
flag: 0,
captchaImg: '', // 图形验证码图片字段
captchaToken: '', // captchaToken
captchaAnswer: '', // 输入的图形验证码
time: TIMEALL,
btnMsg: '点击获取'
}
},
async asyncData({ query }){
......@@ -80,28 +79,87 @@
name = data.name ? data.name : data.mobilePhone;
}
return {
avatarImageUrl, name, mobilePhone, id, taskId, activityId
avatarImageUrl, name, id, taskId, activityId
}
},
mounted(){
this.getCaptcha();
},
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(){
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({
mobile,
mobile: mobilePhone,
authCode,
id,
taskId,
activityId
}).then(res=>{
console.log('领取课程调用===>', res);
if(res.code=='000000' && res.data){
// 登记成功 / 领取成功
}else if(res.code=='000000' && !res.data){
// 登记失败 / 领取失败
if(res.code=='000000'){
// res.data true 登记成功 、 false 登记失败
this.$router.push({
name: 'shareResult',
query: {
status: res.data
}
})
}else {
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;
import PicaH5Login from 'pica-h5-login';
import {
CountDown,
Field,
Cell,
CellGroup,
......@@ -28,7 +29,7 @@ import WebBuriedPoint, {
sendBuriedData
} 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(Toast)
Vue.use(Dialog)
......
service/index.js
浏览文件 @ 1fc2f305
......@@ -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 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或