更新报名缴费与报名样式改版

public/project/schoolRegister.html

@@ -144,7 +144,7 @@
       :close-on-click-overlay="false">
       <div class="submit-container">
         <p class="submit-title">提交成功</p>
-        <p class="submit-tips">感谢您的参与！</p>
+        <p class="submit-tips">感谢您的参与!</p>
         <div @click="onLinkUrl" class="submit-btn"></div>
       </div>
     </van-popup>

src/components/o-popup/index.tsx

@@ -28,6 +28,10 @@ export default defineComponent({
     zIndex: {
       type: Number,
       default: 2018
+    },
+    onClose: {
+      type: Function,
+      default: () => {}
     }
   },
   data() {
@@ -53,6 +57,7 @@ export default defineComponent({
     onHash() {
       this.$emit('update:modelValue', false)
       this.isDestroy = false
+      this.onClose && this.onClose()
     },
     onPopupClose(val: boolean) {
       this.$emit('update:modelValue', val)
@@ -65,7 +70,7 @@ export default defineComponent({
         const splitUrl = window.location.hash.slice(1).split('?')
         const query = qs.parse(splitUrl[1])
         let times = 0
-        for (let key in query) {
+        for (const key in query) {
           times++
         }
         const origin = window.location.href

src/helpers/validate.ts

@@ -19,7 +19,7 @@ export function vaildStudentUrl() {
 }
 
 export function checkPhone(phone: string) {
-  const phoneRule = /^((13[0-9])|(14(0|[5-7]|9))|(15([0-3]|[5-9]))|(16(2|[5-7]))|(17[0-8])|(18[0-9])|(19([0-3]|[5-9])))\\d{8}$/;
+  const phoneRule = /^((13[0-9])|(14(0|[5-7]|9))|(15([0-3]|[5-9]))|(16(2|[5-7]))|(17[0-8])|(18[0-9])|(19([0-3]|[5-9])))\d{8}$/;
   return phoneRule.test(phone);
 }
 

src/school/companion-teacher/companion-teacher-register.tsx

@@ -170,6 +170,7 @@ export default defineComponent({
 
     const onSendCode = () => {
       // 发送验证码
+      console.log(state.forms.phone)
       if (!checkPhone(state.forms.phone as any)) {
         return showToast('请输入正确的手机号码')
       }

src/school/manage-teacher/manage-teacher-register.module.less

@@ -46,7 +46,7 @@ span {
     }
 
     .van-form {
-      margin-top: 174px;
+      margin-top: 220px;
       /* background: #F8F8F8; */
       overflow: hidden;
       /* margin: 290px 13px 14px; */
@@ -120,7 +120,7 @@ span {
   line-height: 22px;
   text-shadow: 0px 1px 5px #ff5e20;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
 }
 
 .tips img {

src/school/manage-teacher/manage-teacher-register.tsx

@@ -166,7 +166,7 @@ export default defineComponent({
             title: '提示',
             message: res.message,
             theme: 'round-button',
-            confirmButtonColor: '#64A9FF'
+            confirmButtonColor: '#FF8057'
           })
 
           state.qrCodeStatus = true
@@ -221,7 +221,7 @@ export default defineComponent({
         showDialog({
           message: '信息获取失败，请联系老师',
           theme: 'round-button',
-          confirmButtonColor: '#64A9FF'
+          confirmButtonColor: '#FF8057'
         })
       }
     })
@@ -363,14 +363,14 @@ export default defineComponent({
               {{
                 input: () => (
                   <RadioGroup
-                    checked-color="#64A9FF"
+                    checked-color="#FF8057"
                     v-model={state.forms.gender}
                     direction="horizontal"
                   >
                     <Tag
                       size="large"
                       type="primary"
-                      color={!(state.forms.gender === 1) ? '#EAEAEA' : '#64A9FF'}
+                      color={!(state.forms.gender === 1) ? '#EAEAEA' : '#FF8057'}
                       textColor={!(state.forms.gender === 1) ? '#AAA' : '#FFF'}
                       class={styles.radioSection}
                       round
@@ -380,7 +380,7 @@ export default defineComponent({
                     <Tag
                       size="large"
                       type="primary"
-                      color={!(state.forms.gender === 0) ? '#EAEAEA' : '#64A9FF'}
+                      color={!(state.forms.gender === 0) ? '#EAEAEA' : '#FF8057'}
                       textColor={!(state.forms.gender === 0) ? '#AAA' : '#FFF'}
                       class={styles.radioSection}
                       round
@@ -403,7 +403,7 @@ export default defineComponent({
               {{
                 button: () =>
                   state.countDownStatus ? (
-                    <Button type="primary" round size="small" color="#64A9FF" onClick={onSendCode}>
+                    <Button type="primary" round size="small" color="#FF8057" onClick={onSendCode}>
                       发送验证码
                     </Button>
                   ) : (
@@ -427,7 +427,7 @@ export default defineComponent({
               v-model={state.checked}
               icon-size="16"
               style="margin-right: 6px"
-              checked-color="#64A9FF"
+              checked-color="#FF8057"
             ></Checkbox>
             <div>
               <span
@@ -456,7 +456,7 @@ export default defineComponent({
             block
             round
             class={styles['btn-submit']}
-            color="#64A9FF"
+            color="#FF8057"
             loading={state.btnLoading}
             native-type="submit"
           >
@@ -476,7 +476,7 @@ export default defineComponent({
               <p class={styles['submit-tips']}>请下载管乐团管理端APP</p>
               <Button
                 type="primary"
-                color="#64A9FF"
+                color="#FF8057"
                 block
                 round
                 onClick={() => {

src/student/music-group/pre-apply/order-detail.tsx

@@ -18,6 +18,7 @@ import MemberBao from '../member-bao'
 import GoodsDetail from '../goods-detail'
 import ODialog from '@/components/o-dialog'
 import { orderStatus } from '@/constant'
+import QrcodePayment from './qrcode-payment'
 
 export default defineComponent({
   name: 'order-detail',
@@ -472,19 +473,27 @@ export default defineComponent({
           />
         </Popup>
 
-        <Popup
+        <OPopup
+          v-model:modelValue={state.showQrcode}
+          onClose={() => {
+            // 二维码关闭时清除定时器
+            clearInterval(state.orderTimer)
+          }}
+        >
+          <QrcodePayment url={state.qrCodeUrl} />
+        </OPopup>
+        {/* <Popup
           v-model:show={state.showQrcode}
           style={{ background: 'transparent', overflow: 'initial' }}
           safeAreaInsetBottom={true}
           class={styles.popupCode}
           closeable
           onClose={() => {
-            // 二维码关闭时清除订单器
+            // 二维码关闭时清除定时器
             clearInterval(state.orderTimer)
           }}
         >
           <div class={styles.codeContainer}>
-            {/* <i class={styles.codeClose} onClick={() => (state.showQrcode = false)}></i> */}
             <div class={styles.codeImg}>
               <div class={styles.codeContent}>
                 <h2 class={styles.codeTitle}>
@@ -504,8 +513,6 @@ export default defineComponent({
                 <div class={styles.codeTips}>
                   <div class={styles.tipsTitle}>使用说明：</div>
                   <div class={styles.tipsContent}>
-                    {/* 1.长按二维码保存图片到相册（或截屏保存到相册） */}
-                    {/* <br /> */}
                     1.打开{state.pay_channel === 'wx_pub' ? '微信' : '支付宝'}扫一扫
                     <br />
                     2.选择相册中的二维码
@@ -516,7 +523,7 @@ export default defineComponent({
               </div>
             </div>
           </div>
-        </Popup>
+        </Popup> */}
 
         <OPopup v-model:modelValue={state.authShow}>
           <UserAuth onSuccess={onAuthSuccess} hideHeader={!browser().isApp} />

src/student/music-group/pre-apply/qrcode-payment/index.module.less

@@ -0,0 +1,129 @@
+.saveShareImage {
+  position: relative;
+  min-height: 100vh;
+  overflow: hidden;
+  &::before {
+    content: ' ';
+    background: linear-gradient(134deg, #ff906c 0%, #ff602d 100%);
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+  }
+}
+
+.previewSection {
+  z-index: -1;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+.topImage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.shareContaienr {
+  position: relative;
+  margin: 212px 22px 0;
+  padding-top: 50px;
+  padding-bottom: 23px;
+  background: #ffffff;
+  border-radius: 18px;
+  text-align: center;
+
+  &.orchestraContainer {
+    margin-top: 168px;
+    padding-top: 20px;
+    .schoolName {
+      font-size: 20px;
+      font-weight: 500;
+      color: #f67146;
+      line-height: 28px;
+    }
+  }
+
+  &.tips {
+    margin-top: 15px;
+    padding: 12px 22px 15px;
+    text-align: left;
+    .tipsTitle {
+      font-size: 15px;
+      font-weight: 500;
+      color: #f16437;
+      line-height: 21px;
+    }
+    .tipsContent {
+      padding-top: 7px;
+      font-size: 13px;
+      color: #333333;
+      line-height: 20px;
+    }
+  }
+
+  .schoolLogo {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    // transform: translate(-50%, -50%);
+    margin-top: -38px;
+    margin-left: -38px;
+    width: 76px;
+    height: 76px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 3px solid #fff;
+    background-color: #fff;
+  }
+
+  .schoolName {
+    font-size: 17px;
+    font-weight: 500;
+    color: #000000;
+    line-height: 24px;
+    padding: 0 30px 0;
+  }
+  .shareType {
+    font-size: 15px;
+    padding: 8px 0 20px;
+    color: #000000;
+    line-height: 21px;
+    span {
+      color: #f67146;
+    }
+  }
+  .qrcodeSection {
+    width: 150px;
+    height: 150px;
+    background: url('@/school/save-share-image/images/icon-qrcode-bg.png') no-repeat center center;
+    background-size: contain;
+    margin: 0 auto;
+    padding: 14px;
+  }
+  .memo {
+    display: inline-block;
+    margin: 17px 0 11px;
+    background: linear-gradient(135deg, #ff9c63 0%, #ff7144 100%);
+    border-radius: 18px;
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 22px;
+    padding: 6px 16px;
+  }
+  .endTime {
+    font-size: 13px;
+    color: #666666;
+    line-height: 18px;
+    span {
+      color: #ff8057;
+    }
+  }
+}

src/student/music-group/pre-apply/qrcode-payment/index.tsx

@@ -0,0 +1,50 @@
+import { defineComponent } from 'vue'
+import { Image } from 'vant'
+import styles from './index.module.less'
+import orchestraTopBg from '@/school/save-share-image/images/orchestra-top_bg.png'
+import OQrcode from '@/components/o-qrcode'
+
+export default defineComponent({
+  name: 'qrcode-payment',
+  props: {
+    url: {
+      type: String,
+      default: ''
+    },
+    pay_channel: {
+      type: String,
+      default: 'wx_pub'
+    }
+  },
+  setup(props) {
+    return () => (
+      <div class={[styles.saveShareImage]}>
+        <Image src={orchestraTopBg} class={styles.topImage} />
+        <div class={[styles.shareContaienr, styles.orchestraContainer]}>
+          <div class={styles.schoolName}>报名缴费</div>
+          <div class={styles.shareType}>
+            请截图下方二维码
+            <span>登录支付宝扫码支付</span>
+          </div>
+
+          <div class={styles.qrcodeSection}>
+            <OQrcode text={props.url} logoSize={'small'} size={'100%'} />
+          </div>
+
+          <div class={styles.memo}>请在30分钟内扫码支付</div>
+        </div>
+
+        <div class={[styles.shareContaienr, styles.tips]}>
+          <div class={styles.tipsTitle}>使用说明：</div>
+          <div class={styles.tipsContent}>
+            1.打开{props.pay_channel === 'wx_pub' ? '微信' : '支付宝'}扫一扫
+            <br />
+            2.选择相册中的二维码
+            <br />
+            3.请在30分钟内扫码支付
+          </div>
+        </div>
+      </div>
+    )
+  }
+})

src/views/follow-account/index.tsx

@@ -0,0 +1,21 @@
+import { Image } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import topBg from './images/top_bg.png'
+import bottomBg from './images/bottom_bg.png'
+import btn from './images/btn.png'
+import content1 from './images/content1.png'
+import content2 from './images/content2.png'
+import iconSmall from './images/iconSmall.png'
+
+export default defineComponent({
+  name: 'follow-account',
+  setup() {
+    return () => (
+      <div class={styles.followAccount}>
+        <Image src={content1} />
+        <Image src={content2} />
+      </div>
+    )
+  }
+})