移动端开发

config/local.env.js

@@ -31,6 +31,16 @@ const local = {
                     //默认所有请求都加了api前缀，需要去掉
                     '^/api/report': '/'
                 }
+            },
+            '/api/app': {
+                target: 'http://localhost:11092',
+                //target: 'http://132.97.54.60:58334',
+                ws: false,
+                changeOrigin: true,
+                pathRewrite: {
+                    //默认所有请求都加了api前缀，需要去掉
+                    '^/api/app': '/'
+                }
             }
         }
     }

src/api/app/package.js

+/**
+ * report的接口管理
+ */
+import {postAction,postFormAction} from '@/api/manage'
+
+let prefix = 'app/ciop/'
+
+let selectPackage = (params) => postAction(prefix +"packageUpgrade/selectPackage" , params);
+let sendVerificationCode = (params) => postAction(prefix +"packageUpgrade/sendVerificationCode" , params);
+
+
+export {
+    selectPackage,
+    sendVerificationCode
+
+}

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

@@ -3,18 +3,166 @@
     background-repeat: no-repeat;
     background-size: 100%;
     width: 100%;
-    height: 150%; position:relative">
-        <div style="height:500px"></div>
-        <div>
-            <van-button round block type="info" native-type="submit">优惠查询</van-button>
+    height: 100%;">
+        <img src="/picture/hhr/kefu.png" style="width: 10%;position:fixed ;right: 15px;top: 15px" @click="showPopup">
+        <div style="height: 700px;"></div>
+        <div style="font-size: 28px;text-align: center;background: white;height: 100px" class="van-hairline--surround">
+            <van-cell-group style="">
+                <van-field v-model="value" placeholder="身份证/手机号/宽带账号"/>
+            </van-cell-group>
+            <van-button round block type="info" native-type="submit" @click="selectPackage">优惠查询</van-button>
         </div>
+
+
+        <div v-show="kefushow">
+            <van-popup v-model="kefushow"
+                       style="width: 90%;height: 45%; display: flex; align-items: center;justify-content: center;">
+                <div style="border: 1px solid #e2e2e2;width: 92%;height: 90%;position: fixed;display: flex; align-items: center;justify-content: center;">
+                    <div style="font-size: 20px; color: black;text-align: center;position: fixed;top: 3px">您的专属客服</div>
+                    <img src="/picture/hhr/service-qrcode.jpg" style="width:55%;">
+                </div>
+            </van-popup>
+        </div>
+        <div v-show="show">
+            <van-popup v-model="show"  style="width: 70%;height: 13%; display: flex; align-items: center;justify-content: center;">
+                <div style=" background-image: url('./picture/hhr/div-tips-dialog.png');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    width: 100%;
+    height: 100%;font-size: 22px;padding-top: 10px;text-align: center;">
+                    <span style="">一大波优惠正在赶来中！<br>    敬请期待！</span>
+                </div>
+            </van-popup>
+        </div>
+        <div v-show="duanxing">
+            <van-popup v-model="duanxing"
+                       style="width: 80%;height: 30%; display: flex; align-items: center;justify-content: center;">
+
+                    <div style="font-size: 20px; color: black;text-align: center;position: fixed;top: 3px">{{yanzhengma}}</div>
+
+                   <van-field
+                           center
+                           clearable
+                           placeholder="请输入短信验证码"
+                           style="width: 100%;height: 30%;"
+                   >
+                       <van-button slot="button" size="small" type="info"
+                                   @click.stop.prevent="getCode"
+                       >{{codeMsg}}
+                       </van-button>
+                   </van-field>
+
+
+               <van-button round block type="info" native-type="submit">
+                   确认
+               </van-button>
+            </van-popup>
+
+        </div>
+
     </div>
 
 </template>
 
 <script>
+    import {selectPackage,sendVerificationCode} from "@/api/app/package"
+    import Vue from 'vue';
+    import {Field} from 'vant';
+
     export default {
-        name: "packageUpgrade"
+        name: "packageUpgrade",
+        data() {
+            return {
+                value: '',
+                countdown: 0,// 倒计时秒数
+                codeMsg: '获取验证码', // 按钮上的文字
+                timer: null,// 定时器
+                labelCol: {
+                    xs: { span: 24 },
+                    sm: { span: 5 },
+                },
+                wrapperCol: {
+                    xs: { span: 24 },
+                    sm: { span: 10 },
+                },
+                yanzhengma: '',
+                kefushow: false,
+                show: false,
+                duanxing: false
+            };
+        },
+        methods: {
+            getCode() {
+                let selectOrder = this.value;
+                // 验证码60秒倒计时
+                if (!this.timer) {
+                    sendVerificationCode({selectOrder}).then(res => {
+                        if (res.state == 'error'){
+                            console.log()
+                        }else {
+                            console.log()
+                        }
+                    })
+                    //初始化倒计时
+                    this.countdown=60;
+                    this.timer = setInterval(() => {
+                        if (this.countdown > 0 && this.countdown <= 60) {
+                            this.countdown--;
+                            if (this.countdown !== 0) {
+                                this.codeMsg = "重新发送(" + this.countdown + ")";
+                            } else {
+                                clearInterval(this.timer);
+                                this.codeMsg = "获取验证码";
+                                this.countdown = 0;
+                                this.timer = null;
+                            }
+                        }
+                    }, 1000)
+                }
+            },
+            selectPackage() {
+                this.kefushow=false;
+                if (this.value == "") {
+                    return;
+                } else {
+                    let selectOrder = this.value;
+                    sendVerificationCode({selectOrder}).then(res => {
+                        if (res.state == 'error'){
+                            this.show=true;
+                        }else {
+                            this.duanxing = true;
+                            this.yanzhengma=res.data
+                            //初始化倒计时
+                            this.countdown=60;
+                            this.timer = setInterval(() => {
+                                if (this.countdown > 0 && this.countdown <= 60) {
+                                    this.countdown--;
+                                    if (this.countdown !== 0) {
+                                        this.codeMsg = "重新发送(" + this.countdown + ")";
+                                    } else {
+                                        clearInterval(this.timer);
+                                        this.codeMsg = "获取验证码";
+                                        this.countdown = 0;
+                                        this.timer = null;
+                                    }
+                                }
+                            }, 1000)
+                        }
+                    })
+                }
+
+            },
+            showPopup() {
+                if(this.kefushow == true){
+                    this.kefushow = false
+                }else {
+                    this.kefushow = true
+                }
+            },
+            duanxings(){
+
+            },
+        }
     }
 </script>