获取短信和图形验证码

components/header/index.vue

@@ -49,6 +49,26 @@ export default {
     isShowRightIcon: {
       type: Boolean,
       default: false
+    },
+    tempId: {
+      type: String | Number,
+      default: ''
+    },
+    userId: {
+      type: String | Number,
+      default: ''
+    },
+    userName: {
+      type: String,
+      default: ''
+    },
+    avatarl: {
+      type: String,
+      default: ''
+    },
+    taskId: {
+      type: String | Number,
+      default: 7
     }
   },
   computed: {
@@ -74,9 +94,9 @@ export default {
     share() {
       let shareUrl = '';
       const { NUXT_ENV_APP } = process.env;
-      const { tempId, token, shareTitle1, shareTitle2, shareIconUrl } = this;
+      const { tempId, taskId, userName, userId, avatarl, token, shareTitle1, shareTitle2, shareIconUrl } = this;
       //shareUrl = ENV_CONFIG[NUXT_ENV_APP]['shareUrl'] + '/compaign_ssr/?id=' + tempId + '&token=' + token;
-      shareUrl = 'http://10.177.10.217:3000/compaign_ssr/login-point?id=' + tempId + '&token=' + token;
+      shareUrl = `http://10.177.10.217:3000/compaign_ssr/login-point?activityId=${tempId}&taskId=${taskId}&id=${userId}&name=${userName}&avatar=${avatarl}`;
 
       // const { id } = this.$route.query;
       // this.$sendBuriedData({

components/task-activity.vue

@@ -141,6 +141,9 @@ export default {
                         if(this.taskList[i].resourceType == 7 && this.taskList[i].resourceId == 2) {
                             this.taskList.splice(i,1);
                         }
+                        if(this.taskList[i].resourceType == 7 && this.taskList[i].resourceId == 1) {
+                            this.$emit('getTaskId',{taskId: this.taskList[i].id});
+                        }
                     }
                 }
             })

pages/index.vue

@@ -8,6 +8,11 @@
 			:share-title2="shareTitle2"
 			:share-icon-url="shareIconUrl"
       :isShowRightIcon="isShowRightIcon"
+      :tempId="activityId"
+      :userName="userName"
+      :userId="userId"
+      :avatarl="myAvatarl"
+      :taskId="taskId"
 		/>
     <!-- 顶部 -->
     <div class="top-container">
@@ -49,7 +54,8 @@
         :acToken="token"
         :userMobile="userMobile"
         :acTempId="activityId"
-        @activityTaskJump="activityTaskJump" />
+        @activityTaskJump="activityTaskJump"
+        @getTaskId="getTaskId" />
       </div>
       <div class="step bt">
         <step 
@@ -117,7 +123,10 @@ export default {
       stepTime3:'4月3日10:00-4月7日16:00',
       maxValue: 200,
       myAvatarl: '',
-      myScore: 0
+      myScore: 0,
+      userId: '',
+      userName: '',
+      taskId: ''
     }
   },
   async asyncData({ $axios }) {
@@ -166,6 +175,8 @@ export default {
       getSelfAllScore({ id: this.activityId, token: this.token }).then(res => {
         _this.myAvatarl = res.data.avatarImageUrl;
         _this.myScore = res.data.totalScore;
+        _this.userId = res.data.id;
+        _this.userName = res.data.name;
       })
     },
     // 查看活动规则
@@ -190,6 +201,10 @@ export default {
         };
       this.$router.push({path: "/perdetails",query: queryData});
     },
+    // 获取任务id
+    getTaskId(data) {
+      this.taskId = data.taskId;
+    },
     // 活动任务
 		activityTaskJump(data) {
       if(data.resourceType == 7) {  // 邀请好友点赞
@@ -197,7 +212,7 @@ export default {
         const { NUXT_ENV_APP } = process.env;
         const { tempId, token, shareTitle1, shareTitle2, shareIconUrl } = this;
         //shareUrl = ENV_CONFIG[NUXT_ENV_APP]['shareUrl'] + '/compaign_ssr/?id=' + tempId + '&token=' + token;
-        shareUrl = 'http://10.177.10.217:3000/compaign_ssr/login-point?id=' + tempId + '&token=' + token;
+        shareUrl = `http://10.177.10.217:3000/compaign_ssr/login-point?activityId=${tempId}&taskId=${data.id}&id=${this.userId}&name=${this.userName}&avatar=${this.myAvatarl}`;
         this.$rocNative.shareWechat({
           type: 6,
           shareId: 0,

pages/login-point/index.vue

 <template>
     <div class="point-container">
         <div class="info-text">
-            <img src="../../static/images/task-four.png" />
-            <p class="info-name">某某邀请您助力 为他点赞</p>
+            <img :src="avatarl" />
+            <p class="info-name">{{userName}}邀请您助力 为他点赞</p>
             <p class="info-award">做任务瓜分500万云鹊豆</p>
         </div>
         <div class="form-info">
@@ -21,36 +21,94 @@
                 <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>
+            <button class="btn-post" @click="gotoPoint">登录点赞 助力好友</button>
         </div>
     </div>
 </template>
 <script>
+import { getCaptchaGet, getAuthCode } from '@/service';
+const TIMEALL = 60000; // 倒计时常量 60 秒
 export default {
     data() {
         return {
             notSend: true,
+            regMobile: /^1[3456789]\d{9}$/,
             mobilePhone: '',
             captchaAnswer: '', // 输入的图形验证码
             captchaImg: '', // 图形验证码图片字段
             authCode: '', // 短信验证码
             btnMsg: '点击获取',
+            avatarl: '',
+            userName: '',
+            userId: '',
+            taskId: '',
+            activityId: '',
+            captchaImg: '',
+            captchaToken: '',
+            flag: 0,
+            time: TIMEALL
         }
     },
+    created() {
+        this.activityId = this.$route.query.activityId;
+        this.taskId = this.$route.query.taskId;
+        this.userId = this.$route.query.id;
+        this.userName = this.$route.query.userName;
+        this.avatarl = this.$route.query.avatar;
+        this.getCaptchaGet();
+    },
     methods: {
-        // 点击刷新验证码
+        // 获取图形验证码
+        getCaptchaGet() {
+            getCaptchaGet().then(res => {
+                if(res.code === '000000'){
+                    this.captchaImg = `data:image/png;base64,${res.data.content}`;
+                    this.captchaToken = res.data.token;
+                }
+            });
+        },
+        // 点击刷新图形验证码
         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);
+                }
+			})
         },
         // 发送获取短信验证码
         sendSms(){
+            const { regMobile, mobilePhone, flag, captchaToken, captchaAnswer } = this;
+            const mobileTrue = regMobile.test(mobilePhone);
+            if(!mobileTrue){
+                this.$toast('请输入正确的手机号');
+                return;
+            }
+            // 校验图形验证码
+            if(this.captchaAnswer==''){
+                this.$toast('请输入图形验证码');
+                return;
+            }
 
+            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 = '重新获取';
         },
-        getCourse() {
+        gotoPoint() {
             this.$router.push({path: "/login-point/point-result",query: {}});
         }
     }
@@ -148,6 +206,9 @@ export default {
                 background: none; 
                 border: none;
             }
+            .num {
+                line-height: 45;
+            }
             ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
                 color:rgba(199,200,201,1);
                 height: 40px;
@@ -182,5 +243,8 @@ export default {
             border: none;
         }
     }
+    .van-count-down, .van-divider {
+        line-height: 45px !important;
+    }
 }
 </style>
\ No newline at end of file

pages/login-point/point-result.vue

@@ -12,12 +12,12 @@
             </div>
             <div class="point-award">
                 <div v-if="status != 3" class="award-con">
-                    <div>达到100勤奋分，即有资格瓜分100W云鹊豆</div>
-                    <img src="../../static/images/point-award.png" />
+                    <!-- <div>达到100勤奋分，即有资格瓜分100W云鹊豆</div> -->
+                    <img src="../../static/images/point-award-new.png" />
                 </div>
             </div>
             <div class="btn">
-                <button @click="openApp">打开APP</button>
+                <button @click="openApp">{{btnText}}</button>
                 <button @click="downloadApp">下载APP</button>
             </div>
         </div>
@@ -34,22 +34,39 @@ export default {
     data() {
         return {
             pointText1: "",
-            pointText2: ""
+            pointText2: "",
+            btnText: ""
         }
     },
     created() {
         if(this.status == 1) {
-            this.pointText1 = "点赞成功，感谢您为TA拿下5勤奋分",
-            this.pointText2 = "登陆云鹊医APP，您也可获得75勤奋分"
+            this.pointText1 = "点赞成功，感谢您为TA拿下5勤奋分";
+            this.pointText2 = "登陆云鹊医APP，您也可获得75勤奋分";
+            this.btnText = "打开APP参与瓜分云鹊豆";
         }else if(this.status == 2) {
-            this.pointText1 = "点赞成功",
-            this.pointText2 = "登陆云鹊医APP，参加活动瓜分云鹊豆"
+            this.pointText1 = "点赞成功";
+            this.pointText2 = "登陆云鹊医APP，参加活动瓜分云鹊豆";
+            this.btnText = "打开APP参与瓜分云鹊豆";
         }else if(this.status == 3) {
-            this.pointText1 = "点赞成功，该活动已结束",
-            this.pointText2 = "登陆云鹊医APP，查看更多精彩内容"
+            this.pointText1 = "该活动已结束";
+            this.pointText2 = "登陆云鹊医APP，查看更多精彩内容";
+            this.btnText = "打开APP";
         }else if(this.status = 4) {
-            this.pointText1 = "抱歉！您的点赞次数已达3次上限！",
-            this.pointText2 = "登陆云鹊医APP，您也可获得75勤奋分"
+            this.pointText1 = "抱歉！您的点赞次数已达3次上限！";
+            this.pointText2 = "登陆云鹊医APP，您也可获得75勤奋分";
+            this.btnText = "打开APP参与瓜分云鹊豆";
+        }else if(this.status == 5){
+            this.pointText1 = "点赞成功";
+            this.pointText2 = "登陆云鹊医APP，您也可获得75勤奋分";
+            this.btnText = "打开APP参与瓜分云鹊豆";
+        }else if(this.status == 6) {
+            this.pointText1 = "抱歉！您的点赞次数已达3次上限！";
+            this.pointText2 = "登陆云鹊医APP，参加活动瓜分云鹊豆";
+            this.btnText = "打开APP参与瓜分云鹊豆";
+        }else {
+            this.pointText1 = "点赞成功";
+            this.pointText2 = "登陆云鹊医APP，参加活动瓜分云鹊豆";
+            this.btnText = "打开APP参与瓜分云鹊豆";
         }
     },
     methods: {
@@ -69,7 +86,7 @@ export default {
     .point-bg {
         width: 100%;
         height: 100vh;
-        background-image:url('../../static/images/background.png');
+        background-image:url('../../static/images/result-bg.png');
         background-size: 100% 100%;
     }
     .point-status {
@@ -94,16 +111,16 @@ export default {
     }
     .point-award {
         .award-con {
-            background: #fff;
+            // background: #fff;
             border-radius: 20px 20px 0px 0px;
             padding: 0px 18px;
-            div {
-                padding: 14px;
-                font-size: 15px;
-                color: #DD364F;
-                text-align: center;
-                font-weight: 700;
-            }
+            // div {
+            //     padding: 14px;
+            //     font-size: 15px;
+            //     color: #DD364F;
+            //     text-align: center;
+            //     font-weight: 700;
+            // }
             img {
                 width: 100%;
             }
@@ -111,7 +128,7 @@ export default {
     }
     .btn {
         text-align: center;
-        background: #fff;
+        // background: #fff;
         padding: 40px 0px 91px;
         margin-top: -1px;
         button {
@@ -119,18 +136,20 @@ export default {
             width: 335px;
             height: 40px;
             border-radius: 23px;
-            background: #fff;
+            background: none;
             color: gba(255,255,255,1);
-            font-size: 16px;
+            font-size: 14px;
             border: none;
+            font-weight: 700;
         }
         button:first-child {
-            background:linear-gradient(90deg,rgba(241,104,57,1) 0%,rgba(220,49,81,1) 100%);
-            color: #fff;
+            background: linear-gradient(180deg,#FFD4A7 0%,#FF6B24 100%);
+            color: #900822;
             margin-bottom: 12px;
         }
         button:last-child {
-            border: 1PX solid rgba(230,77,69,1);
+            color: #fff;
+            border: 1px solid #fff;
         }
     }
 }

plugins/vue-inject.js

@@ -3,7 +3,27 @@ import { BASE_URL } from '@/utils/enumerate';
 import rocNative from '@/utils/jsbridge';
 import WebBuriedPoint, { sendBuriedData } from 'web-buried-point';
 import { callApp } from 'pica-call-app'; // H5唤起APP组件
-import VConsole from 'vconsole/dist/vconsole.min.js'
+import VConsole from 'vconsole/dist/vconsole.min.js';
+
+import {
+	CountDown,
+	Field,
+	Cell,
+	CellGroup,
+	Button,
+	Dialog,
+	Toast,
+	Checkbox,
+	Popup,
+	CheckboxGroup,
+	RadioGroup,
+	Radio,
+	Progress,
+	ImagePreview,
+	Uploader,
+	Overlay,
+	Loading
+} from 'vant';
 
 const { name } = require('../package.json');
 const cookies = require('cookie-universal')();
@@ -20,6 +40,9 @@ Vue.prototype.$sendBuriedData = sendBuriedData;
 Vue.prototype.$callApp = callApp;
 
 // Vue.use(PicaCallApp);
+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(Toast)
+Vue.use(Dialog)
 
 if (name === 'nuxt_ssr') throw Error('需要给当前项目起一个有意义的名称，多英文单词用 _ 拼接，不能有空格。修改文件：package.json (name)');
 // Vue.use(WebBuriedPoint, {

service/index.js

@@ -58,3 +58,21 @@ export const getSelfActivity = async (data) => {
   });
 }
 
+// 获取图形验证码
+export const getCaptchaGet = async () => {
+  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
+    },
+  })
+}
\ No newline at end of file