Merge branch 'master' of http://192.168.0.115:3000/chenzimin2/ZGZQBWG

game/src/api.js

@@ -98,6 +98,20 @@ export async function checkLoginStatusAndProcess() {
     return false
   }
 }
+export async function sendEmail(address) {
+  const res = await axios({
+    method: 'post',
+    url: `${process.env.VUE_APP_DEPLOY_ORIGIN}/api/show/sendEmail`,
+    data: {
+      userName: address,
+    },
+  })
+  if (res.data.code !== 0) {
+    throw (`${res.data.msg}`)
+  } else {
+    return
+  }
+}
 export async function signUp(account, phone, password, verifiCode) {
   const pwdEncrypted = encodeStr(Base64.encode(password))
   const res = await axios({

game/src/views/ExamPaper2.vue

@@ -146,10 +146,10 @@ import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import dayjs from 'dayjs'
-import { shuffle } from 'lodash'
 import { addScore, getScore, getExamQuestionList, notifyQuit } from '@/api.js'
 import GameRule from '@/components/GameRule.vue'
 import NotifyComp from '@/components/NotifyComp.vue'
+import { Base64 } from "js-base64"
 import MusicBg from '@/assets/audio/1.mp3'
 
 
@@ -165,10 +165,24 @@ const {
 const isShowRule = ref(false)
 
 const isShowLoading = ref(true)
+
 getExamQuestionList().then((res) => {
   questionList.value = res.map((questionItem) => {
     const optionsAndAnswer = JSON.parse(questionItem.answer)
-    console.log(optionsAndAnswer)
+
+    // 对正确答案解密
+    const decodeStr = (str) => {
+      const NUM = 2
+      const str1 = str.substring(8)
+      const str2 = str1.substring(0, str1.length - 8)
+      const front = str2.slice(-NUM)
+      const end = str2.substring(0, str2.length - 8 - NUM)
+      return front + end
+    }
+    optionsAndAnswer.correct = Base64.decode(decodeStr(optionsAndAnswer.correct))
+
+    // console.log(optionsAndAnswer)
+
     const ret = {
       question: questionItem.question,
       answerOptions: optionsAndAnswer.answer.map((answerItem) => {

game/src/views/ExamPaper3.vue

@@ -12,7 +12,10 @@
         class="return-home"
         @click="onClickReturnHome"
       />
-      <button class="game-rule" />
+      <button
+        class="game-rule"
+        @click="isShowRule = true"
+      />
     </div>
     <img
       class="star"
@@ -41,6 +44,13 @@
         返回首页
       </button>
     </div>
+
+    <GameRule
+      v-show="isShowRule"
+      game-title="一起来助农"
+      :rich-text="store.state.gameRuleList[1].rtf"
+      @close="isShowRule=false"
+    />
   </div>
 </template>
 
@@ -49,11 +59,14 @@ import { ref, computed, watch, onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import { notifyQuit } from '@/api.js'
+import GameRule from '@/components/GameRule.vue'
 
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
+const isShowRule = ref(false)
+
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,

game/src/views/SignUp.vue

@@ -31,6 +31,35 @@
         @blur="isAccountInputOver=true"
       >
     </div>
+    <div class="form-item form-item-verifi">
+      <div class="title">
+        <img
+          src="@/assets/images/icon-mail.png"
+          alt=""
+          draggable="false"
+        >
+        <span>邮箱验证码</span>
+      </div>
+      <div class="row">
+        <input
+          v-model="verifiCode"
+          placeholder="请输入4位验证码"
+          :class="{
+            invalid: isVerifiCodeInputOver && !isVerifiCodeValid
+          }"
+          @blur="isVerifiCodeInputOver=true"
+        >
+        <button
+          class="get-verifi-code"
+          :class="{
+            disabled: isVerifiCodeSent
+          }"
+          @click="onClickVerifiCode"
+        >
+          {{ isVerifiCodeSent ? `${verifiCodeCountDown}s` : '发送验证码' }}
+        </button>
+      </div>
+    </div>
     <div class="form-item">
       <div class="title">
         <img
@@ -88,44 +117,12 @@
         @blur="isPasswordRepeatInputOver=true"
       >
     </div>
-    <div class="form-item form-item-verifi">
-      <div class="title">
-        <!-- <img
-          src="@/assets/images/icon-lock.png"
-          alt=""
-          draggable="false"
-        > -->
-        <span>验证码</span>
-      </div>
-      <div class="row">
-        <input
-          v-model="verifiCode"
-          placeholder="请输入验证码"
-          :class="{
-            invalid: isVerifiCodeInputOver && !isVerifiCodeValid
-          }"
-          @blur="isVerifiCodeInputOver=true"
-        >
-        <button
-          class="get-verifi-code"
-          @click="onClickVerifiCode"
-        >
-          <img
-            v-if="isShowVerifiCode"
-            class=""
-            :src="`${$env.VUE_APP_DEPLOY_ORIGIN}/api/show/getRandCode`"
-            alt=""
-            draggable="false"
-          >
-        </button>
-      </div>
-    </div>
 
     <button
       class="submit"
       @click="submit"
     >
-      注册并登录
+      注册
     </button>
     <button
       class="return"
@@ -140,8 +137,8 @@
 import { ref, computed, watch, onMounted, nextTick, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
-import { showDialog } from 'vant'
-import { signUp, login } from '@/api.js'
+import { showDialog, showNotify } from 'vant'
+import { sendEmail, signUp, login } from '@/api.js'
 
 const route = useRoute()
 const router = useRouter()
@@ -155,14 +152,17 @@ const {
 } = useSizeAdapt(390, 752)
 
 const account = ref('')
+const verifiCode = ref('')
 const phone = ref('')
 const password = ref('')
 const passwordRepeat = ref('')
-const verifiCode = ref('')
 
 const accountTrimed = computed(() => {
   return account.value.trim()
 })
+const verifiCodeTrimed = computed(() => {
+  return verifiCode.value.trim()
+})
 const phoneTrimed = computed(() => {
   return phone.value.toString().trim()
 })
@@ -172,12 +172,14 @@ const passwordTrimed = computed(() => {
 const passwordRepeatTrimed = computed(() => {
   return passwordRepeat.value.trim()
 })
-const verifiCodeTrimed = computed(() => {
-  return verifiCode.value.trim()
-})
+
 
 const isAccountValid = computed(() => {
-  return !!accountTrimed.value
+  const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
+  return pattern.test(accountTrimed.value)
+})
+const isVerifiCodeValid = computed(() => {
+  return verifiCodeTrimed.value.length > 0
 })
 const isPhoneValid = computed(() => {
   return phoneTrimed.value.length === 11
@@ -188,33 +190,71 @@ const isPasswordValid = computed(() => {
 const isPasswordRepeatValid = computed(() => {
   return passwordTrimed.value === passwordRepeatTrimed.value
 })
-const isVerifiCodeValid = computed(() => {
-  return verifiCodeTrimed.value.length > 0
-})
+
 
 const isAccountInputOver = ref(false)
+const isVerifiCodeInputOver = ref(false)
 const isPhoneInputOver = ref(false)
 const isPasswordInputOver = ref(false)
 const isPasswordRepeatInputOver = ref(false)
-const isVerifiCodeInputOver = ref(false)
 
-const isShowVerifiCode = ref(true)
+// todo: 倒计时搬移到组件外部
+const isVerifiCodeSent = ref(false)
+const verifiCodeCountDown = ref(60)
+watch(isVerifiCodeSent, (v) => {
+  if (v) {
+    setInterval(() => {
+      verifiCodeCountDown.value--
+      if (verifiCodeCountDown.value === 0) {
+        isVerifiCodeSent.value = false
+        verifiCodeCountDown.value = 60
+      }
+    }, 1000)
+  }
+})
 const onClickVerifiCode = utils.throttle(() => {
-  isShowVerifiCode.value = false
-  nextTick(() => {
-    isShowVerifiCode.value = true
+  if (isVerifiCodeSent.value) {
+    return
+  }
+  if (!isAccountValid.value) {
+    showDialog({
+      message: '请正确输入邮箱',
+      theme: 'round-button',
+    })
+    isAccountInputOver.value = true
+    return
+  }
+  sendEmail(accountTrimed.value).then(() => {
+    showNotify({
+      type: 'success',
+      message: `验证码已发送至邮箱${accountTrimed.value}，请在邮箱中查收`,
+    })
+    isVerifiCodeSent.value = true
+  }).catch((e) => {
+    showDialog({
+      message: e,
+      theme: 'round-button',
+    })
   })
 }, 333)
 
 function submit() {
   if (!isAccountValid.value) {
     showDialog({
-      message: '请正确输入邮箱',
+      message: '请输入正确的邮箱信息',
       theme: 'round-button',
     })
     isAccountInputOver.value = true
     return
   }
+  if (!isVerifiCodeValid.value) {
+    showDialog({
+      message: '正确输入验证码',
+      theme: 'round-button',
+    })
+    isVerifiCodeInputOver.value = true
+    return
+  }
   if (!isPhoneValid.value) {
     showDialog({
       message: '请正确输入手机号',
@@ -239,22 +279,12 @@ function submit() {
     isPasswordRepeatInputOver.value = true
     return
   }
-  if (!isVerifiCodeValid.value) {
-    showDialog({
-      message: '请输入验证码',
-      theme: 'round-button',
-    })
-    isVerifiCodeInputOver.value = true
-    return
-  }
 
   signUp(accountTrimed.value, phoneTrimed.value, passwordTrimed.value, verifiCodeTrimed.value).then(() => {
     showDialog({
       message: '注册成功',
       theme: 'round-button',
     }).then(() => {
-      login(accountTrimed.value, passwordTrimed.value)
-    }).then(() => {
       router.replace({
         name: 'HomeView'
       })
@@ -341,24 +371,6 @@ function submit() {
     }
   }
   >.form-item{
-    >.title{
-      width: 100%;
-      display: flex;
-      align-items: center;
-      margin-bottom: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      >img{
-        width: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        height: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        margin-right: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      }
-      >span{
-        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-family: Source Han Sans SC, Source Han Sans SC;
-        font-weight: 400;
-        color: #D1B489;
-        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      }
-    }
     >div.row{
       display: flex;
       justify-content: space-between;
@@ -385,9 +397,19 @@ function submit() {
         border-bottom: 1px solid red;
       }
       >button.get-verifi-code{
-        height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        >img{
-          height: 100%;
+        width: calc(108 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        background: #FFFFFF;
+        border-radius: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        border: 1px solid #D1B489;
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-weight: 400;
+        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        color: #D1B489;
+        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        text-align: center;
+        &.disabled{
+          pointer-events: none;
         }
       }
     }