移动端开发

src/config/router.config.js

@@ -59,6 +59,11 @@ export const asyncRouterMap = [{
                 path: 'rongHe',
                 path: 'rongHe',
                 name: 'rongHe',
                 name: 'rongHe',
                 component: () => import('@views/hhr-view/bandwidth/rongHe.vue')
                 component: () => import('@views/hhr-view/bandwidth/rongHe.vue')
+            },
+            {
+                path: 'packageUpgrade',
+                name: 'packageUpgrade',
+                component: () => import('@views/hhr-view/bandwidth/packageUpgrade.vue')
             }
             }
         ]
         ]
     }
     }

src/views/hhr-view/bandwidth/danKuan.vue

@@ -4,11 +4,17 @@
         <van-button type="info" style="width: 150px; height: 50px;margin: 10px 20px 10px 20px;">30元/月</van-button>
         <van-button type="info" style="width: 150px; height: 50px;margin: 10px 20px 10px 20px;">30元/月</van-button>
 
 
         <van-row type="flex" justify="center">
         <van-row type="flex" justify="center">
-            <p style="width: auto; height: 40px;margin: 10px 10px 10px 10px;">面向学校：广州工商学院（花都校区）</p>
+            <p style="width: auto; height: 40px;margin: 10px 10px 0px 10px;">面向学校：广州工商学院（花都校区）</p>
         </van-row>
         </van-row>
-        <div>
-            <img  style="" src="/picture/hhr/info_logo_bg.png" style="width: 50%">
-<p>资费介绍</p>
+        <div style=" background-image: url('./picture/hhr/info_logo_bg.png');
+    background-repeat: no-repeat;
+    background-size: 50%;
+    width: 85%;
+    height: 85%;
+background-position: 70% 0%,right center;
+Text-align:center;">
+            <div style="height:60px;Text-align:center;">资费介绍</div>
+
         </div>
         </div>
     </div>
     </div>
 </template>
 </template>

src/views/hhr-view/bandwidth/rongHe.vue

 <template>
 <template>
-    <div>
-        <img src="/picture/hhr/banner.png" style="width: 100%">
-        <van-button type="info" style="width: 150px; height: 50px;margin: 10px 20px 10px 20px;">30元/月</van-button>
-
-        <van-row type="flex" justify="center">
-            <p style="width: auto; height: 40px;margin: 10px 10px 10px 10px;">面向学校：广州工商学院（花都校区）</p>
-        </van-row>
-        <div>
-            <img  style="" src="/picture/hhr/info_logo_bg.png" style="width: 50%">
-<p>资费介绍</p>
-        </div>
+    <div style=" background-image: url('./picture/hhr/01.jpg');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    width: 100%;
+    height: 150%;">
+        <div style="height:60px"></div>
+       <div  style="width: auto; height: 80px; background: white;">
+           <van-row type="flex" justify="center">
+               <span style="font-size: 28px;text-align: center;color: rgb(1,12,146);width: 80%;margin: auto">绑定29元新黑牛卡校园网提速到50M</span>
+           </van-row>
+           <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" />
+           <van-row type="flex" justify="center">
+               <span style="font-size: 22px;padding-top: 10px;text-align: center;color: black;width: 80%;margin: auto">请填写以下有效消息</span>
+           </van-row>
+           <van-form validate-first @submit="onSubmit" @failed="onFailed">
+               <van-field v-model="phone" name="phone" label="手机号" :rules="phoneRules" />
+               <van-field
+                       v-model="code"
+                       center
+                       clearable
+                       label="验证码"
+                       :rules="codeRules"
+                       placeholder="请输入短信验证码"
+               >
+                   <van-button slot="button" size="small" type="primary">发送验证码</van-button>
+               </van-field>
+              <div style=" width: 15.0rem;margin: 10px 20px 10px 70px;">
+                   <span style="color: black;font-size: 14px;"><font style="color:red">注意：</font>
+               以上填写的手机号和身份证号必须要和办理校园网的本人一致，否则无法绑定进行提速。
+                </span>
+              </div>
+               <div>
+                   <van-grid :column-num="1">
+                       <van-row >
+                           <van-col span="20" offset="2"> <div style="color: black;font-size: 17px;text-align: center;">未有电信号码请按以下按钮办理</div></van-col>
+                           <van-col span="10" offset="8"> <div style="color: black;font-size: 17px;text-align: center;"><van-sticky :offset-top="50">
+                               <van-button type="info">申请办理手机卡</van-button>
+                           </van-sticky></div></van-col>
+                       </van-row>
+
+                       <van-row type="flex" justify="center">
+                           <p style="color: red;font-size: 14px">请办理完手机卡后，重新访问此网页进行绑定，申请校园网提速。</p>
+                       </van-row>
+                   </van-grid>
+
+               </div>
+               <div style="margin: 16px;">
+                   <van-button round block type="info" native-type="submit">
+                       提交
+                   </van-button>
+               </div>
+           </van-form>
+       </div>
+
     </div>
     </div>
+
+
 </template>
 </template>
 
 
 <script>
 <script>
+    import { Toast } from 'vant';
+
     export default {
     export default {
-        name: "danKuan"
+        name:"rongHe",
+        data(){
+            this.phoneRules = [
+                { required: true, message: '请输入手机号' },
+                { validator: this.phoneValidator, message: '手机号格式错误' },
+            ];
+            this.codeRules = [
+                { required: true, message: '请输入验证码' },
+                { validator: this.codeValidator, message: '验证码错误' },
+            ];
+            return{
+                code: '',
+                phone: '',
+            }
+        }
+        ,
+
+        methods: {
+            // 校验函数返回 true 表示校验通过，false 表示不通过
+            phoneValidator(val) {
+                return /1\d{10}/.test(val);
+            },
+            // 校验函数返回 Promise 来实现异步校验
+            codeValidator(val) {
+                return new Promise(resolve => {
+                    Toast.loading('验证中...');
+
+                    setTimeout(() => {
+                        Toast.clear();
+                        resolve(/\d{6}/.test(val));
+                    }, 1000);
+                });
+            },
+            onSubmit(values) {
+                console.log('submit', values);
+            },
+            onFailed(errorInfo) {
+                console.log('failed', errorInfo);
+            },
+        },
     }
     }
+
 </script>
 </script>
 
 
 <style scoped>
 <style scoped>
-
 </style>
 </style>

src/views/hhr-view/packageUpgrade/newPackageTips.vue

+<template>
+    <div>
+        <img src="/picture/hhr/adv_img.jpg" style="width: 100%">
+        <van-button type="info" :round="true" size="large">我要领卡</van-button>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "packageUpgrade"
+    }
+</script>
+
+<style scoped>
+
+</style>