添加微信弹窗

public/project/css/preRegister.css

@@ -83,7 +83,7 @@ span {
 
 .top-tips {
   position: relative;
-  margin: 30px 12px 20px;
+  margin: 20px 12px 20px;
   padding: 40px 18px 20px;
   background: #FFFFFF;
   border-radius: 10px;
@@ -104,13 +104,12 @@ span {
 }
 
 .title {
-  font-size: 26px;
-  line-height: 37px;
+  font-size: 22px;
+  line-height: 32px;
   color: #ffffff;
   width: 57%;
   padding-left: 24px;
-  height: 128px;
-  margin-bottom: 10px;
+  height: 148px;
   display: flex;
   justify-content: center;
   align-items: center;

src/components/o-wx-tip/index.module.less

@@ -0,0 +1,42 @@
+.wxPopupDialog {
+  // position: relative;
+  overflow: initial;
+
+  // margin-top: -160px;
+  &::before {
+    position: absolute;
+    content: ' ';
+    top: -73px;
+    left: 50%;
+    margin-left: -86px;
+    display: inline-block;
+    background: url('../../common/images/wx-no-top.png') no-repeat top center;
+    background-size: contain;
+    width: 172px;
+    height: 154px;
+  }
+}
+
+.popupContainer {
+  background: url('../../common/images/wx-no-bg.png') no-repeat top center;
+  background-size: cover;
+  border-radius: 20px;
+  overflow: hidden;
+
+  .title1 {
+    padding-top: 57px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 500;
+    color: #3b2300;
+  }
+
+  .popupTips {
+    padding-top: 12px;
+    padding-bottom: 47px;
+    text-align: center;
+    font-size: 15px;
+    color: #777777;
+    line-height: 21px;
+  }
+}

src/components/o-wx-tip/index.tsx

@@ -1,8 +1,48 @@
-import { defineComponent } from 'vue'
+import { Popup } from 'vant'
+import { defineComponent, onMounted, ref } from 'vue'
+import styles from './index.module.less'
+import { browser } from '@/helpers/utils'
 
 export default defineComponent({
   name: 'o-wx-tip',
-  setup() {
-    return () => <>微信弹窗</>
+  props: {
+    // 是否显示微信弹窗
+    show: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: '温馨提示'
+    },
+    message: {
+      type: String,
+      default: '请使用微信打开'
+    }
+  },
+  setup(props) {
+    const showPopup = ref(false)
+    onMounted(() => {
+      if (!browser().weixin && props.show) {
+        showPopup.value = true
+        return
+      }
+    })
+    return () => (
+      <>
+        <Popup
+          v-model:show={showPopup.value}
+          round
+          style={{ width: '88%' }}
+          closeOnClickOverlay={false}
+          class={styles.wxPopupDialog}
+        >
+          <div class={styles.popupContainer}>
+            <p class={styles.title1}>{props.title}</p>
+            <p class={styles.popupTips}>{props.message}</p>
+          </div>
+        </Popup>
+      </>
+    )
   }
 })

src/student/pre-register-active/index.tsx

@@ -1,23 +1,62 @@
 import { defineComponent, onMounted, reactive } from 'vue'
 import styles from './index.module.less'
 import signinTips from './images/signin-tips.png'
-import { Button, CellGroup, Field } from 'vant'
-import { useRouter } from 'vue-router'
+import { Button, CellGroup, Field, closeToast } from 'vant'
+import { useRoute, useRouter } from 'vue-router'
+import OWxTip from '@/components/o-wx-tip'
+import { browser, getUrlCode } from '@/helpers/utils'
+import qs from 'query-string'
+import request from '@/helpers/request'
+import { goWechatAuth } from '@/state'
 
 export default defineComponent({
   name: 'pre-register',
   setup() {
     const router = useRouter()
+    const route = useRoute()
     const forms = reactive({
       loading: true,
+      code: null,
       player: null as any
     })
 
-    // onMounted(() => {})
-
     const onSubmit = () => {
       router.push('/pre-register-video')
     }
+
+    const getAppIdAndCode = async (url?: string) => {
+      try {
+        const { data } = await request.get('/api-school/open/paramConfig/wechatAppId')
+        // 判断是否有微信appId
+        if (data) {
+          closeToast()
+          goWechatAuth(data, url)
+        }
+      } catch {
+        //
+      }
+    }
+    console.log(route.fullPath)
+
+    if (browser().weixin) {
+      //授权
+      const code = getUrlCode()
+      if (!code) {
+        const newUrl =
+          window.location.origin +
+          window.location.pathname +
+          '#' +
+          route.path +
+          '?' +
+          qs.stringify({
+            ...route.query
+          })
+        getAppIdAndCode(newUrl)
+        return ''
+      } else {
+        forms.code = code
+      }
+    }
     return () => (
       <div class={styles['per-register-active']}>
         <div class={styles.flowPath}>
@@ -38,7 +77,7 @@ export default defineComponent({
             5.入团流程讲解 <br />
             三、请
             <span>“有意向”</span>让孩子加入乐团的家长
-            <span>点击“乐团预报名”</span>进行报名信息填写；
+            <span>点击“乐团报名”</span>进行报名信息填写；
           </div>
         </div>
 
@@ -69,6 +108,9 @@ export default defineComponent({
             <Button class={styles.submitBtn} onClick={onSubmit}></Button>
           </CellGroup>
         </div>
+
+        {/* 是否在微信中打开 */}
+        <OWxTip />
       </div>
     )
   }

src/student/pre-register-active/video.module.less

@@ -97,15 +97,15 @@
 
     .c1 {
       text-indent: 2em;
+
+      span {
+        color: #DD3210;
+      }
     }
   }
 
   .bottom {
     padding-top: 30px;
-
-    span {
-      color: #DD3210;
-    }
   }
 }
 

src/student/pre-register-active/video.tsx

@@ -133,15 +133,17 @@ export default defineComponent({
           <div class={styles.messageContent}>
             <p>家长您好！</p>
             <p class={styles.c1}>
-              学校管乐团正式筹备组建。请家长们合理安排时间观看家长会视频。并在明晚20:00前，进行意向确认（不想参与的，勾选“无意向”即可）。
+              请家长们合理安排时间，<span>认真观看</span>家长会内容。在<span>详细了解</span>
+              所有要求后，有意向让孩子加入乐团的家长，请在<span>明晚20:00前</span>，为孩子完成
+              <span>乐团报名</span>
             </p>
             <p class={styles.c1}>
               下周，专业老师将针对意向入团学员进行身体条件确认。谢谢各位的支持！
             </p>
 
             <p class={styles.bottom}>
-              <span>注：</span>乐团于<span>下学期</span>正式开始训练，训练时间下学期开学前另行通知，
-              <span>训练时间会与学校相关社团时间错开</span>，家长无需担心时间冲突问题。
+              注：乐团于下学期正式开始训练，训练时间下 学期开学前另行通知，训练时间会与学校其他
+              社团错开，家长无需担心时间冲突问题。
             </p>
           </div>