css

assets/css/mine/bind.scss

+.page-bind {
+    height: 100vh;
+    background-color: #ffff;
+    padding-top: 116rpx;
+    .form-box {
+        padding: 0 60rpx;
+        .uni-input {
+            height: 88rpx;
+            background: #f5f5f7;
+            border-radius: 10rpx;
+            text-indent: 24rpx;
+            font-size: 26rpx;
+            border: 1px solid transparent;
+            transition: all 0.4s ease;
+            &::-webkit-input-placeholder {
+                color: #919399;
+            }
+            &:focus-within {
+                background-color: #ffffff;
+                border: 1px solid #1969f9;
+            }
+        }
+        .btn {
+            margin-top: 40rpx;
+            height: 88rpx;
+            background: #1969f9;
+            border-radius: 10rpx;
+            font-size: 28rpx;
+            color: #fff;
+        }
+    }
+    .success {
+        image {
+            width: 356rpx;
+            height: 356rpx;
+        }
+        .tt {
+            margin-top: 32rpx;
+            font-size: 28rpx;
+            color: #292b33;
+        }
+        .btn {
+            margin-top: 100rpx;
+            width: 344rpx;
+            height: 68rpx;
+            background: #1969f9;
+            border-radius: 10rpx;
+            font-size: 28rpx;
+            color: #fff;
+        }
+    }
+}

pages.json

@@ -148,6 +148,12 @@
             "style": {
                 "navigationBarTitleText": "账户设置"
             }
+        },
+        {
+            "path": "pages/mine/bindMail",
+            "style": {
+                "navigationBarTitleText": "绑定邮箱"
+            }
         }
     ],
     "globalStyle": {

pages/mine/bindMail.vue

+<template>
+    <view class="page-bind">
+        <navElement title="绑定邮箱"></navElement>
+        <view class="form-box" v-if="flag">
+            <view><input type="text" placeholder="请输入邮箱号码" class="uni-input" /></view>
+            <view class="btn row rowCenter verCenter" @click="flag = false">绑定</view>
+        </view>
+        <view class="success column rowCenter verCenter" v-else>
+            <image src="../../static/success.png"></image>
+            <text class="tt">我是一条文案文案文案</text>
+            <navigator class="btn row rowCenter verCenter" url="/login" hover-class="none">去验证</navigator>
+        </view>
+    </view>
+</template>
+
+<script>
+import { Api_Url } from '@/util/api.js';
+import { setCookie, delCookie, getCookie, startCountdown } from '@/util/util.js';
+import navElement from '@/components/nav.vue';
+export default {
+    components: {
+        navElement
+    },
+    data() {
+        return {
+            flag: true
+        };
+    },
+    onShow() {},
+    methods: {}
+};
+</script>
+
+<style lang="scss">
+@import '@/assets/css/mine/bind.scss';
+</style>

pages/mine/setting.vue

@@ -12,27 +12,27 @@
                     <text class="iconfont icon-jt"></text>
                 </view>
             </navigator>
-            <view class="box row bothSide verCenter curr">
+            <navigator class="box row bothSide verCenter curr" url="/user/bindMail" hover-class="none">
                 <view class="text"><text class="t1">邮箱</text></view>
                 <view class="right">
                     <text class="t1">绑定</text>
                     <text class="iconfont icon-jt"></text>
                 </view>
-            </view>
-            <view class="box row bothSide verCenter curr">
+            </navigator>
+            <navigator class="box row bothSide verCenter curr" url="/user/bindMail" hover-class="none">
                 <view class="text"><text class="t1">QQ号</text></view>
                 <view class="right">
                     <text class="t1">绑定</text>
                     <text class="iconfont icon-jt"></text>
                 </view>
-            </view>
-            <view class="box row bothSide verCenter curr">
+            </navigator>
+            <navigator class="box row bothSide verCenter curr" url="/user/bindMail" hover-class="none">
                 <view class="text"><text class="t1">微信号</text></view>
                 <view class="right">
                     <text class="t1">绑定</text>
                     <text class="iconfont icon-jt"></text>
                 </view>
-            </view>
+            </navigator>
             <view class="company">
                 <view class="box row bothSide verCenter curr" style="margin-bottom: 0;border-radius:0;border-bottom: 1px solid #F0F0F2;">
                     <view class="text"><text class="t1">公司信息</text></view>

router/index.js

@@ -200,6 +200,13 @@ const router = new Router({
             meta: {
                 title: '账户设置'
             }
+        },
+        {
+            path: '/pages/mine/bindMail',
+            aliasPath: '/user/bindMail',
+            meta: {
+                title: '绑定邮箱'
+            }
         }
     ]
 });