2020

.eslintignore

@@ -0,0 +1,4 @@
+es
+lib
+dist
+node_modules

package.json

@@ -16,7 +16,8 @@
     "vue-router": "^3.0.5",
     "axios": "^0.18.0",
     "vuex": "^3.0.1",
-    "vuex-class": "^0.3.1"
+    "vuex-class": "^0.3.1",
+    "amfe-flexible": "^2.2.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.1",
@@ -29,7 +30,8 @@
     "eslint-plugin-vue": "^5.1.0",
     "less": "^3.8.1",
     "less-loader": "^5.0.0",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.10",
+    "postcss-pxtorem": "^4.0.1"
   },
   "eslintConfig": {
     "root": true,

src/App.vue

@@ -6,8 +6,7 @@
 
 <style>
 body {
-  font-size: 16px;
-  background-color: #f8f8f8;
+  background-color: #FFFFFF;
   -webkit-font-smoothing: antialiased;
 }
 </style>

src/main.js

@@ -1,7 +1,8 @@
 import Vue from 'vue';
 import App from './App';
 import { router } from './router';
-
+import 'amfe-flexible';
+// import './utils/rem'
 import { VueAxios } from "@/utils/request"
 
 Vue.use(VueAxios, router)

src/router.js

@@ -34,7 +34,23 @@ const routes = [
         name: 'login',
         component: () => import('./view/login'),
         meta: {
-            title: '用户登录'
+            title: '体温打卡，中国加油！'
+        }
+    },
+    {
+        path: 'staff',
+        name: 'staff',
+        component: () => import('./view/login/staff'),
+        meta: {
+            title: '体温打卡，中国加油！'
+        }
+    },
+    {
+        path: 'join',
+        name: 'join',
+        component: () => import('./view/business/join'),
+        meta: {
+            title: '体温打卡，中国加油！'
         }
     }
 ];

src/utils/rem.js

@@ -0,0 +1,16 @@
+// 设置 rem 函数
+function setRem () {
+
+    // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
+    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
+//得到html的Dom元素
+    let htmlDom = document.getElementsByTagName('html')[0];
+//设置根元素字体大小
+    htmlDom.style.fontSize= htmlWidth/20 + 'px';
+}
+// 初始化
+setRem();
+// 改变窗口大小时重新设置 rem
+window.onresize = function () {
+    setRem()
+}

src/view/business/join.vue

@@ -0,0 +1,217 @@
+<template>
+    <div class="join">
+        <van-row>
+            <van-col span="24">
+                <div class="dk-banner"></div>
+            </van-col>
+        </van-row>
+        <div>
+            <van-cell-group style="margin-top: 60px;" :border="false">
+
+                <van-row type="flex" justify="center">
+                    <van-col span="20">
+                        <van-field
+                                class="dk-border"
+                                v-model="enterprise_name"
+                                center
+                                clearable
+                                type="text"
+                                left-icon="smile-o"
+                                placeholder="请输入公司名称"
+                        ></van-field>
+                    </van-col>
+                </van-row>
+                <!-- 输入手机号，调起手机号键盘 -->
+                <van-row type="flex" justify="center" style="margin-top: 40px">
+                    <van-col span="20">
+                        <van-field
+                                class="dk-border"
+                                v-model="phone"
+                                center
+                                clearable
+                                type="tel"
+                                left-icon="smile-o"
+                                placeholder="请输入手机号"
+                        ></van-field>
+                    </van-col>
+                </van-row>
+
+                <!-- 允许输入整数，调起数字键盘 -->
+                <van-row type="flex" justify="center" align="center" style="margin-top: 40px">
+                    <van-col span="20">
+                        <van-field
+                                v-model="code"
+                                maxlength="6"
+                                type="digit"
+                                left-icon="smile-o"
+                                placeholder="请输入验证码"
+                                class="dk-border">
+                            <van-button
+                                    :disabled="state.smsSendBtn"
+                                    slot="button"
+                                    size="small"
+                                    type="default"
+                                    @click="sendCode"
+                                    style="border:none"
+                                    class="dk-button "
+                                    :class="state.smsSendBtn&&'dk-color'">
+                                {{!state.smsSendBtn && '获取验证码' || ('重发 '+state.time+' s')}}
+                            </van-button>
+                        </van-field>
+                    </van-col>
+
+                </van-row>
+            </van-cell-group>
+            <van-row type="flex" justify="center">
+                <van-col span="20">
+                    <van-button
+                            :loading="loading"
+                            type="small"
+                            size="large"
+                            :color="!tel||!code?'#DDDDDD':'#0177FF'"
+                            @cick="join"
+                            text="确认入驻"
+                            style="height:47px;margin-top: 65px;border-radius: 47px;font-size: 16px;border-width: 0">
+
+                    </van-button>
+                </van-col>
+            </van-row>
+
+        </div>
+
+
+        <van-row>
+            <van-col span="24">
+                <div class="dk-qrcode"></div>
+            </van-col>
+        </van-row>
+    </div>
+</template>
+
+<script>
+    import {Button, Cell, CellGroup, Field, Toast, Col, Row} from 'vant';
+    import {setStore} from "@/utils/storage";
+
+    export default {
+        name: "join",
+        components: {
+            [Button.name]: Button,
+            [Cell.name]: Cell,
+            [CellGroup.name]: CellGroup,
+            [Field.name]: Field,
+            [Col.name]: Col,
+            [Row.name]: Row,
+        },
+        data() {
+            return {
+                loading: false,
+                enterprise_name: '',
+                text: "登录",
+                phone: '',
+                code: '',
+                state: {
+                    time: 60,
+                    smsSendBtn: false,
+                },
+                url: {
+                    getSmsCaptcha: '/f/api/login/getAuthCode',
+                }
+            };
+        },
+        mounted() {
+
+        },
+        methods: {
+            login() {
+                this.loading = true;
+                //登录成功，缓存用户信息，跳转相应页面
+                setStore('login', "123");
+                this.$router.replace('goods');
+            },
+            //获取验证码
+            sendCode() {
+                if (!this.phone) {
+                    Toast('请输入手机号~');
+                    return;
+                }
+                this.state.smsSendBtn = true;
+                let interval = window.setInterval(() => {
+                    if (this.state.time-- <= 0) {
+                        this.state.time = 60;
+                        this.state.smsSendBtn = false;
+                        window.clearInterval(interval);
+                    }
+                }, 1000);
+                let smsParams = {};
+                smsParams.phone = this.phone;
+                // postAction(this.url.getSmsCaptcha, smsParams)
+                //     .then(() => {
+                //         setTimeout(Toast('验证码发送中~'), 500);
+                //     })
+                //     .catch(() => {
+                //         setTimeout(Toast('验证码发送失败~'), 500);
+                //         clearInterval(interval);
+                //         this.state.time = 60;
+                //         this.state.smsSendBtn = false;
+                //     });
+            },
+            join() {
+                if (!this.tel) {
+                    Toast('请输入手机号~');
+                    return;
+                }
+                if (!this.enterprise_name) {
+                    Toast('请输入公司名~');
+                    return;
+                }
+                if (!this.code) {
+                    Toast('请输入验证码~');
+                    return;
+                }
+                this.loading = true;
+                //登录成功，缓存用户信息，跳转相应页面
+                setStore('login', "123");
+                this.$router.replace('goods');
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .join {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .dk-banner {
+        height: 160px;
+        background: #ccc;
+    }
+
+    .dk-border {
+        font-size: 14px;
+        border: 1px solid #0177FF;
+        border-radius: 47px;
+        box-sizing: border-box;
+    }
+
+    .dk-button {
+        height: auto;
+        width: auto;
+        font-size: 14px;
+        color: #999999;
+        opacity: 1;
+    }
+
+    .dk-color {
+        color: #0177FF;
+    }
+
+
+    .dk-qrcode {
+        margin-top: 90px;
+        height: 135px;
+        background: #ccc;
+    }
+</style>

src/view/login/index.vue

@@ -1,31 +1,84 @@
 <template>
     <div class="login">
-        <van-cell-group style="margin-top: 150px;">
-            <!-- 输入手机号，调起手机号键盘 -->
-            <van-field
-                    v-model="tel"
-                    center
-                    clearable
-                    type="tel"
-                    label="手机号"
-                    placeholder="请输入手机号"
-            >
-                <van-button :disabled="state.smsSendBtn" slot="button" size="small" type="primary" @click="sendCode">
-                    {{!state.smsSendBtn && '获取验证码' || (state.time+' s')}}
-                </van-button>
-            </van-field>
-            <!-- 允许输入整数，调起数字键盘 -->
-            <van-field v-model="code" maxlength="6" type="digit" label="验证码" placeholder="请输入验证码"/>
-        </van-cell-group>
-        <van-button :loading="loading" type="primary" size="large" @click="login" style="margin: 250px 0 0 0;">
-            {{text}}
-        </van-button>
+        <van-row>
+            <van-col span="24">
+                <div class="dk-banner"></div>
+            </van-col>
+        </van-row>
+        <div>
+            <van-cell-group style="margin-top: 60px;" :border="false">
+                <!-- 输入手机号，调起手机号键盘 -->
+                <van-row type="flex" justify="center">
+                    <van-col span="20">
+                        <van-field
+                                class="dk-border"
+                                v-model="phone"
+                                center
+                                clearable
+                                type="tel"
+                                left-icon="smile-o"
+                                placeholder="请输入手机号"
+                        ></van-field>
+                    </van-col>
+                </van-row>
+
+                <!-- 允许输入整数，调起数字键盘 -->
+                <van-row type="flex" justify="center" align="center" style="margin-top: 40px">
+                    <van-col span="20">
+                        <van-field
+                                v-model="code"
+                                maxlength="6"
+                                type="digit"
+                                left-icon="smile-o"
+                                placeholder="请输入验证码"
+                                class="dk-border">
+                            <van-button
+                                    :disabled="state.smsSendBtn"
+                                    slot="button"
+                                    size="small"
+                                    type="default"
+                                    @click="sendCode"
+                                    style="border:none"
+                                    class="dk-button "
+                                    :class="state.smsSendBtn&&'dk-color'">
+                                {{!state.smsSendBtn && '获取验证码' || ('重发 '+state.time+' s')}}
+                            </van-button>
+                        </van-field>
+                    </van-col>
+
+                </van-row>
+            </van-cell-group>
+            <van-row type="flex" justify="center">
+                <van-col span="20">
+                    <van-button
+                            :loading="loading"
+                            type="small"
+                            size="large"
+                            :color="!tel||!code?'#DDDDDD':'#0177FF'"
+                            @cick="login"
+                            text="登录"
+                            style="height:47px;margin-top: 65px;border-radius: 47px;font-size: 16px;border-width: 0">
+
+                    </van-button>
+                </van-col>
+            </van-row>
+            <van-row type="flex" justify="center" style="margin-top: 10px">
+                <span class="dk-join" @click="join">企业入驻 >>></span>
+            </van-row>
+        </div>
+
+
+        <van-row>
+            <van-col span="24">
+                <div class="dk-qrcode"></div>
+            </van-col>
+        </van-row>
     </div>
 </template>
 
 <script>
-    import {postAction} from '@/api/manage'
-    import {Button, Cell, CellGroup, Field, Toast} from 'vant';
+    // import {postAction} from '@/api/manage'
+    import {Button, Cell, CellGroup, Field, Toast, Col, Row} from 'vant';
     import {setStore} from "@/utils/storage";
 
     export default {
@@ -35,12 +88,14 @@
             [Cell.name]: Cell,
             [CellGroup.name]: CellGroup,
             [Field.name]: Field,
+            [Col.name]: Col,
+            [Row.name]: Row,
         },
         data() {
             return {
                 loading: false,
                 text: "登录",
-                tel: '',
+                phone: '',
                 code: '',
                 state: {
                     time: 60,
@@ -51,6 +106,9 @@
                 }
             };
         },
+        mounted() {
+
+        },
         methods: {
             login() {
                 this.loading = true;
@@ -60,7 +118,7 @@
             },
             //获取验证码
             sendCode() {
-                if (!this.tel) {
+                if (!this.phone) {
                     Toast('请输入手机号~');
                     return;
                 }
@@ -73,17 +131,20 @@
                     }
                 }, 1000);
                 let smsParams = {};
-                smsParams.phone = this.tel;
-                postAction(this.url.getSmsCaptcha, smsParams)
-                    .then(() => {
-                        setTimeout(Toast('验证码发送中~'), 500);
-                    })
-                    .catch(() => {
-                        setTimeout(Toast('验证码发送失败~'), 500);
-                        clearInterval(interval);
-                        this.state.time = 60;
-                        this.state.smsSendBtn = false;
-                    });
+                smsParams.phone = this.phone;
+                // postAction(this.url.getSmsCaptcha, smsParams)
+                //     .then(() => {
+                //         setTimeout(Toast('验证码发送中~'), 500);
+                //     })
+                //     .catch(() => {
+                //         setTimeout(Toast('验证码发送失败~'), 500);
+                //         clearInterval(interval);
+                //         this.state.time = 60;
+                //         this.state.smsSendBtn = false;
+                //     });
+            },
+            join() {
+                this.$router.push({name: 'join'})
             }
         }
     }
@@ -91,6 +152,43 @@
 
 <style scoped>
     .login {
-        padding: 0 10px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .dk-banner {
+        height: 160px;
+        background: #ccc;
+    }
+
+    .dk-border {
+        font-size: 14px;
+        border: 1px solid #0177FF;
+        border-radius: 47px;
+        box-sizing: border-box;
+    }
+
+    .dk-button {
+        height: auto;
+        width: auto;
+        font-size: 14px;
+        color: #999999;
+        opacity: 1;
+    }
+
+    .dk-color {
+        color: #0177FF;
+    }
+
+    .dk-join {
+        font-size: 12px;
+        color: #0177FF;
+    }
+
+    .dk-qrcode {
+        margin-top: 90px;
+        height: 135px;
+        background: #ccc;
     }
-</style>
+</style>

src/view/login/staff.vue

@@ -0,0 +1,197 @@
+<template>
+    <div class="login">
+        <van-row>
+            <van-col span="24">
+                <div class="dk-banner"></div>
+            </van-col>
+        </van-row>
+        <div>
+            <van-cell-group style="margin-top: 60px;" :border="false">
+                <!-- 输入手机号，调起手机号键盘 -->
+                <van-row type="flex" justify="center">
+                    <van-col span="20">
+                        <van-field
+                                class="dk-border"
+                                v-model="phone"
+                                center
+                                clearable
+                                type="tel"
+                                left-icon="smile-o"
+                                placeholder="请输入手机号"
+                        ></van-field>
+                    </van-col>
+                </van-row>
+
+                <!-- 允许输入整数，调起数字键盘 -->
+                <van-row type="flex" justify="center" align="center" style="margin-top: 40px">
+                    <van-col span="20">
+                        <van-field
+                                v-model="code"
+                                maxlength="6"
+                                type="digit"
+                                left-icon="smile-o"
+                                placeholder="请输入验证码"
+                                class="dk-border">
+                            <van-button
+                                    :disabled="state.smsSendBtn"
+                                    slot="button"
+                                    size="small"
+                                    type="default"
+                                    @click="sendCode"
+                                    style="border:none"
+                                    class="dk-button "
+                                    :class="state.smsSendBtn&&'dk-color'">
+                                {{!state.smsSendBtn && '获取验证码' || ('重发 '+state.time+' s')}}
+                            </van-button>
+                        </van-field>
+                    </van-col>
+
+                </van-row>
+            </van-cell-group>
+            <van-row type="flex" justify="center">
+                <van-col span="20">
+                    <van-button
+                            :loading="loading"
+                            type="small"
+                            size="large"
+                            :color="!tel||!code?'#DDDDDD':'#0177FF'"
+                            @cick="login"
+                            text="登录"
+                            style="height:47px;margin-top: 65px;border-radius: 47px;font-size: 16px;border-width: 0">
+
+                    </van-button>
+                </van-col>
+            </van-row>
+            <van-row type="flex" justify="center" style="margin-top: 10px">
+                <span class="dk-join" @click="join">企业入驻 >>></span>
+            </van-row>
+        </div>
+
+
+        <van-row>
+            <van-col span="24">
+                <div class="dk-qrcode"></div>
+            </van-col>
+        </van-row>
+    </div>
+</template>
+
+<script>
+    // import {postAction} from '@/api/manage'
+    import {Button, Cell, CellGroup, Field, Toast, Col, Row} from 'vant';
+    import {setStore} from "@/utils/storage";
+
+    export default {
+        name: "staff",
+        components: {
+            [Button.name]: Button,
+            [Cell.name]: Cell,
+            [CellGroup.name]: CellGroup,
+            [Field.name]: Field,
+            [Col.name]: Col,
+            [Row.name]: Row,
+        },
+        data() {
+            return {
+                loading: false,
+                text: "登录",
+                phone: '',
+                code: '',
+                state: {
+                    time: 60,
+                    smsSendBtn: false,
+                },
+                url: {
+                    getSmsCaptcha: '/f/api/login/getAuthCode',
+                }
+            };
+        },
+        created() {
+
+        },
+        mounted() {
+
+        },
+        methods: {
+            login() {
+                this.loading = true;
+                //登录成功，缓存用户信息，跳转相应页面
+                setStore('login', "123");
+                this.$router.replace('goods');
+            },
+            //获取验证码
+            sendCode() {
+                if (!this.phone) {
+                    Toast('请输入手机号~');
+                    return;
+                }
+                this.state.smsSendBtn = true;
+                let interval = window.setInterval(() => {
+                    if (this.state.time-- <= 0) {
+                        this.state.time = 60;
+                        this.state.smsSendBtn = false;
+                        window.clearInterval(interval);
+                    }
+                }, 1000);
+                let smsParams = {};
+                smsParams.phone = this.phone;
+                // postAction(this.url.getSmsCaptcha, smsParams)
+                //     .then(() => {
+                //         setTimeout(Toast('验证码发送中~'), 500);
+                //     })
+                //     .catch(() => {
+                //         setTimeout(Toast('验证码发送失败~'), 500);
+                //         clearInterval(interval);
+                //         this.state.time = 60;
+                //         this.state.smsSendBtn = false;
+                //     });
+            },
+            join() {
+                this.$router.push({name: 'join'})
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .login {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .dk-banner {
+        height: 160px;
+        background: #ccc;
+    }
+
+    .dk-border {
+        font-size: 14px;
+        border: 1px solid #0177FF;
+        border-radius: 47px;
+        box-sizing: border-box;
+    }
+
+    .dk-button {
+        height: auto;
+        width: auto;
+        font-size: 14px;
+        color: #999999;
+        opacity: 1;
+    }
+
+    .dk-color {
+        color: #0177FF;
+    }
+
+    .dk-join {
+        font-size: 12px;
+        color: #0177FF;
+    }
+
+    .dk-qrcode {
+        margin-top: 90px;
+        height: 135px;
+        background: #ccc;
+    }
+</style>

vue.config.js

@@ -1,4 +1,7 @@
-const path = require('path')
+const path = require('path');
+const autoprefixer = require('autoprefixer');
+const pxtorem = require('postcss-pxtorem');
+
 
 function resolve(dir) {
     return path.join(__dirname, dir)
@@ -17,6 +20,7 @@ module.exports = {
     },
 
     devServer: {
+        host:'192.168.101.13',
         port: 8082,
         proxy: {
             '/happyjob': {
@@ -26,5 +30,18 @@ module.exports = {
             },
         }
     },
+    css: {
+        loaderOptions: {
+            postcss: {
+                plugins: [
+                    autoprefixer(),
+                    pxtorem({
+                        rootValue: 32,
+                        propList: ['*']
+                    })
+                ]
+            }
+        }
+    },
     lintOnSave: undefined
 };