专属客服和注册

H5/src/views/customer-service.vue

+<template>
+  <div class="customer-service">
+    <div class="nav">
+      <van-icon
+        name="arrow-left"
+        size="20"
+        class="nav-left"
+        @click="$router.go(-1)"
+      />
+      <span class="nav-title">专属客服</span>
+    </div>
+    <div class="panel-box">
+        <div class="panel-content">
+            <div class="title">客服二维码</div>
+           <img src="@/assets/images/logo.png" class="qrCode" alt="">
+           <div class="save-code">
+              <p>保存二维码</p> 
+              <p>打开微信扫一扫添加客服</p>
+           </div>
+           <van-button>保存</van-button>
+        </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "customerService",
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    handleUrl(urlName) {
+      this.$router.push({ name: urlName });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+$white: #ffffff;
+.customer-service {
+  width: 100%;
+  height: 298px;
+  background-image: url("../assets/images/森林状态.png");
+  background-size: cover;
+  .nav {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 46px;
+    color: #fff;
+    .nav-left {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 52px;
+      height: 100%;
+      line-height: 46px;
+      text-align: center;
+    }
+    .nav-title {
+      max-width: 60%;
+      margin: 0 auto;
+      font-weight: bold;
+      font-size: 16px;
+    }
+  }
+  .panel-box{
+      height: calc(100vh - 86px);
+      padding: 0 15px;
+      margin-top: 15px;
+    .panel-content{
+        width: 100%;
+        height: 100%;
+        background-color: #ffffff;
+        box-shadow: 0px 2px 12px 0px 
+		rgba(6, 0, 1, 0.04);
+	    border-radius: 4px;
+        padding-top: 45px;
+        box-sizing: border-box;
+        .title{
+            font-size: 18px;
+            font-weight: normal;
+            font-stretch: normal;
+            line-height: 26px;
+            letter-spacing: 0px;
+            color: #333333;
+            text-align: center;
+        }
+        .qrCode{
+            width: 128px;
+            height: 130px;
+            margin: 80px auto 30px; 
+            display: block;
+        }
+        .save-code{
+            font-size: 14px;
+            font-weight: normal;
+            font-stretch: normal;
+            line-height: 16px;
+            letter-spacing: 0px;
+            color: #999999;
+        }
+        .van-button{
+            width: 160px;
+            height: 36px;
+            background-color: #88c678;
+            border-radius: 4px;
+            font-size: 18px;
+            color: #ffffff;
+            margin:  85px auto 0 ;
+            display: block;
+        }
+      
+    }
+  }
+ 
+}
+</style>

H5/src/views/register.vue

+<template>
+<div class="register-container">
+    <van-icon name="arrow-left" @click="$router.go(-1)" />
+    <img src="@/assets/images/logo.png" class="logo-img" alt="">
+    <div class="form-content">
+       <van-cell-group>
+            <van-field
+                :value="value"
+                placeholder="请输入用户名"
+                :border="hasBorder"
+                bind:change="onChange"
+            >
+            <img class="icon-user" src="@/assets/images/icon-user.png" slot="left-icon" alt="">
+            </van-field>
+            <van-field
+                :value="value"
+                placeholder="请输入验证码"
+                :border="hasBorder"
+                bind:change="onChange"
+            >
+              <img class="icon-user" src="@/assets/images/icon-code.png" slot="left-icon" alt="">
+              <van-button slot="button" size="small" type="primary" class="verify-code">发送验证码</van-button>
+            </van-field>
+             <van-field
+                :value="value"
+                placeholder="请输入推荐人邀请码（非必填）"
+                :border="hasBorder"
+                bind:change="onChange"
+            >
+            <img class="icon-user" src="@/assets/images/icon-invite-code.png" slot="left-icon" alt="">
+            </van-field>
+        </van-cell-group>
+        <van-button  class="btn-submit" @click="register">注册</van-button>
+    </div>
+    <van-overlay 
+        :show="show" 
+        class-name="registerEorr"
+        @click="onClickHide">
+        <div class="wrapper" @click.stop>
+           <div class="title">{{title}}</div>
+           <div class="error-tip"></div>
+           <div class="tip">{{tip}}</div>
+           <van-button>确定</van-button>
+        </div>
+    </van-overlay>
+</div>
+</template>
+<script>
+export default {
+     name:'register',
+     data(){
+         return {
+             value:'',
+             hasBorder:false,
+             show: true,
+             title:'注册失败',
+             tip:'该推荐人邀请码不存在，请重新填写'
+         }
+     },
+    methods: {
+        register(){
+            //  this.show = true
+    
+        },
+        onClickHide(){
+            this.show = false
+        }
+     }
+ }
+</script>
+<style lang="scss" scoped>
+.register-container{
+    height: 100vh;
+    background-color: #ffffff;
+    padding: 54px 15px 0 15px;
+    box-sizing: border-box;
+    overflow: hidden;
+    .van-icon-arrow-left{
+        position: absolute;
+        left: 15px;
+        top: 9px;
+        // display: block;
+        // font-size: 25px;
+        // color: #333;
+        // margin: 13px 0 0 15px;
+    }
+    .logo-img{
+        width: 102px;
+        height: 102px;
+        display: block;
+        margin: 0 auto 50px;
+    }
+    .form-content{
+        padding:  0 15px;
+        .van-field__left-icon{
+           display: flex;
+           align-items: center;
+        }
+        .van-cell-group::after{
+            display: none;
+        }
+        .van-cell{
+            background-color: #f9f9f9;
+            border-radius: 25px;
+            margin-bottom: 20px;
+        }
+    }
+    .icon-user{
+        width: 18px;
+        height:18px;
+    }
+    .icon-code{
+        width: 16px;
+        height:18px;
+    }
+    .icon-code{
+        width: 17px;
+        height:17px;
+    }
+    .btn-submit{
+        width: 100%;
+        height: 44px;
+        background-image: linear-gradient(72deg, 
+            #88c678 0%, 
+            #95e87f 100%), 
+        linear-gradient(
+            #999999, 
+            #999999);
+        background-blend-mode: normal, 
+            normal;
+        border-radius: 22px;
+        color: #ffffff;
+        font-size: 18px;
+        margin-top: 20px;
+    }
+    .verify-code{
+        background-color: transparent;
+        border: none;
+        color: #88c677;
+    }
+    .van-overlay.registerEorr{
+        .wrapper{
+            width: 315px;
+            height: 293px;
+            position: absolute;
+            background-color: #ffffff;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -60%);
+            padding: 30px 0;
+            text-align: center;
+            box-sizing: border-box;
+            border-radius: 4px;
+            .title{
+                font-size: 20px;
+                font-weight: normal;
+                font-stretch: normal;
+                line-height: 20px;
+                letter-spacing: 0px;
+                color: #333333;
+            }
+            .error-tip{
+                width: 72px;
+                height: 72px;
+                border: 6px solid #ff0000;
+                border-radius: 50%;
+                font-size: 48px;
+                font-weight:bold;
+                color: #ff0000;
+                margin: 25px auto;
+                position: relative;
+                &:before,&:after{
+                    content: "";
+                    display: inline-block;
+                    width: 6px;
+                    height: 30px;
+                    background-color:  #ff0000;
+                    border-radius: 4px;
+                    transform-origin:center ;
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                }
+                &:before{
+                    transform:translate(-50%,-50%) rotate(45deg);
+                }
+                &:after{
+                       transform:translate(-50%,-50%) rotate(-45deg);
+                }
+            }
+            .tip{
+                font-size: 14px;
+                font-weight: normal;
+                font-stretch: normal;
+                line-height: 20px;
+                color: #999999;
+            }
+            .van-button{
+                width: 160px;
+                height: 36px;
+                background-color: #88c678;
+                border-radius: 18px;
+                color: #ffffff;
+                margin-top: 25px;
+            }
+        }
+
+    }
+}
+</style>
\ No newline at end of file