大商创(移动端) -- day02

路由 router

index.js

import Vue from "vue";
import VueRouter from "vue-router";

const originalPush = VueRouter.prototype.push
// 重写原型上的push方法，统一处理错误信息
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(VueRouter)
const routes = [
    {
        path:"/",
        redirect:"/index"
    },
    {
        path:"/index", // 首页
        component:()=>import('@/views/HomePage/HomeIndex.vue')
    },
    {
        path:"/category", // 分类
        component:()=>import('@/views/CategoryModule/CategoryIndex.vue')
    },
    {
        path:"/login", // 短信登录
        // name:"login",
        component:()=>import('@/views/MineModule/loginIndex.vue'),
        meta:{
            flag:true
        }
    },
    {
        path:'/mine',   // 个人中心
        // name:'mine',
        component:()=>import('@/views/MineModule/MineIndex.vue'),
    },
    {
        path:"/Details", //详情
        component:()=>import('@/views/HomePage/components/DetailsPage.vue'),
        meta:{
            flag:true
        }
    },
   
]
export default new VueRouter({
    routes,
})

styles

base.css

*{
    margin: 0;
    padding: 0;
}
.flex{
    display: flex;
    align-items: center;
}
.flex-sp{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.flex-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-column{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.flex-wrap{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.flex-j{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.flex-top{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.flex-cook{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.flex-son{
    flex:1;
}
.title{
    font-size: 12px;
}

登录 MineModule

loginIndex.vue

<!--  -->
<template>
    <div class='loginIndex'>
        <div class="container">
            <van-icon name="cross" @click="Cross"/>
            <div class="wap">
                <img class="wap_logo" src="../../assets/images/wap_logo.jpg" alt="">
            </div>
            <div class="input-box">
                <div class="iconfont icon-shouji"></div>
                <input type="text" v-model="mobile" placeholder="请输入手机号" class="input">
            </div>
            <div class="input-box">
                <div class="iconfont icon-tupian"></div>
                <input type="text" v-model="captcha" placeholder="请输入图片验证码" class="input">
                <div>
                    <img :src="captchaObj.captcha" @click="getcaptcha" class="captchaImg" alt="">
                </div>
            </div>
            <div class="input-box">
                <div class="iconfont icon-yanzhengma"></div>
                <input type="text" v-model="code" placeholder="请输入短信验证码" class="input">
                <button class="getcode" :disabled="isDisabled" @click="getCode">{{ codeText }}</button>
            </div>
            <div class="checkBox">
                <van-checkbox v-model="allow_login" checked-color="red">
                    我已阅读并同意 <span @click="showPopup" style="color:#4b89dc">《隐私声明3》</span>
                </van-checkbox>
            </div>
            <button class="info" @click="Info">短信快捷登录</button>
        </div>
         <!-- 同意协议 -->
         <van-popup v-model="show" round closeable position="bottom" :style="{ height:'50%'}">
            <div class="text">
                <h4>隐私政策</h4>
                <p>商创网以此声明对本站用户隐私保护的许诺。随着本站服务范围的扩大，会随时更新隐私声明。我们欢迎您随时查看隐私声明。详细隐私政策，您可参考</p>
                <p>商创网非常重视对用户隐私权的保护，用户的邮件及手机号等个人资料为用户重要隐私，本站承诺不会将个人资料用作它途；承诺不会在未获得用户许可的情况下擅自将用户的个人资料信息出租或出售给任何第三方，但以下情况除外：111</p>
                <p>A、用户同意让第三方共享资料；</p>
                <p>B、用户为享受产品和服务同意公开其个人资料；</p>
                <p>C、本站发现用户违反了本站服务条款或本站其它使用规定。</p>
                <p><strong>使用说明</strong></p>
                <p>商创网用户可以通过设定的密码来保护账户和资料安全。用户应当对其密码的保密负全部责任。请不要和他人分享此信息。如果您使用的是公共电脑，请在离开电脑时退出商创网、以保证您的信息不被后来的使用者获取。</p>
                <p><strong>服务条款说明</strong></p>
                <p>接受商创网的用户同时受本站用户协议的约束。</p>
                <p>新增此条</p>
                <p>新增词条05181055</p>
                <p>新增词条05181100</p>
                <button class="login-button" @click="close">我已同意</button>
            </div>
        </van-popup>
    </div>
    </template>
    
    <script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    import '@/assets/iconfont/iconfont.css'
    import { Captcha,Sms,Login } from '@/api/home/index';
    import { Toast } from 'vant';
    export default {
        name:"login",
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
    //这里存放数据
    return {
        show:false,//隐私声明隐藏
        mobile:"",//手机号
        captcha:"",//图片验证码
        client: "",//客户端类型
        code:"",//短信验证码
        allow_login: false,//是否同意协议
        captchaObj: {},
        codeText:"获取验证码",
        isDisabled:false,//获取验证码按钮是否可用
    };
    },
    //监听属性 类似于data概念
    computed: {
        num(){
            return this.allow_login ? "1":"0";//复选框被选中为1，未选中为0
        }
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 点击返回到首页
        Cross(){
            let that = this;
            that.$router.push({
                path:"/index"
            })
        },

        // 关闭隐私声明
        close(){
            this.show = !this.show
        },
        // 显示与隐藏同意协议
        showPopup(){
            this.show = !this.show
        },
    
        // 图形验证码接口封装
        CaptchaFull(){
            let that = this;
            Captcha().then(res=>{
                console.log('res',res);
                that.captchaObj= res.data.data;
                that.client = res.data.data.client;
                console.log("client",that.client);
                
            })
        },
        // 点击图形验证码刷新验证码
        getcaptcha(){
            this.CaptchaFull()
        },
        // 获取短信验证码
        getCode(){
            let that = this;
            console.log("mobile",that.mobile);
            console.log("captcha",that.captcha);
            console.log("pullcode",that.pullcode);
            
            if(that.mobile == ""){
                Toast({
                    message: '请输入手机号和图片验证码',
                    duration: 1000,
                });
            }
    
            if(that,this.captcha == ""){
                Toast({
                    message: '请输入手机号和图片验证码',
                    duration: 1000,
                });
            }
            if(that,this.pullcode == ""){
                Toast({
                    message: '请输入手机号和图片验证码',
                    duration: 1000,
                });
            }
            Sms({
                mobile: that.mobile,
                captcha: that.captcha,
                client: that.client,
    
            }).then(res=>{
                console.log("res",res);
            })
        },
        // 登录
        Info(){
            let that = this;
            if(that.mobile != "" && that.captcha != "" && that.code != ""){
                if(that.allow_login){
                    Login({
                        mobile: that.mobile,
                        client: that.client,
                        code: that.code,
                        allow_login: that.allow_login,
                    }).then(res=>{
                        console.log('res',res);
                        if(res.data.status == 'success'){
                            localStorage.setItem("token",res.data.data)
                            that.$router.push({path:"/mine"})
                            Toast({
                                message: '短信发送成功',
                                duration: 1000,
                            });
                        }else{
                            Toast({
                            message: '短信验证码已失效，请重新获取',
                            duration: 1000,
                            })
                        }
                    })
    
                }else{
                Toast({
                    message: '请勾选并同意协议',
                    duration: 1000,
                })
            }
            }
        }
       
    },
    beforeCreate() {}, //生命周期 - 创建之前
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.CaptchaFull()
    },
    beforeMount() {}, //生命周期 - 挂载之前
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    
    },
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
    }
    </script>
    <style lang="less" scoped>
        .loginIndex{
            // width: 100%;
            // height: 100%;
            background-color: rgb(255, 255, 255);
            position: relative;
            z-index: 999;
            .container{
                width: 90%;
                height: 100%;
                // background-color: skyblue;
                margin: 0 auto;
                .wap{
                    margin: 30px auto;
                    width: 80px;
                    height: 80px;
                    .wap_logo{
                        border-radius: 50%;
                        width: 100%;
                    }
                }
                .input-box{
                    height: 30px;
                    line-height: 30px;
                    padding: 5px 0;
                    -webkit-box-sizing: content-box;
                    box-sizing: content-box;
                    border-bottom: 1px solid #dcdcdc;
                    margin-bottom: 5%;
                    display: flex;
                    .input{
                        border: none;
                        outline: none;
                        flex: 1;
                        width: 100%;
                        font-size: 16px;
                        margin-left: 10px;
                    }
                    .captchaImg{
                        width: 60px;
                    } 
                    .getcode{
                        width: 80px;
                        background-color: white;
                        font-size: 12px;
                        color: gray;
                        border: 1px solid #dcdcdc;
                        border-radius: 20px;
                    }
                }
                .checkBox{
                    font-size: 12px;
                }
                .info{
                    width: 100%;
                    height: 40px;
                    background-color: red;
                    border: none;
                    border-radius: 20px;
                    margin-top: 20px;
                    color: white;
                    font-size: 16px;
                }
                
            }
            .text{
                width: 100%;
                box-sizing: border-box;
                padding: 10px;
                color: #333333;
                line-height: 1.8;
                h4{
                    text-align: center;
                    font-size: 18px;
                    margin-bottom: 10px;
                }
                p{
                    font-size: 14px;

                }
                .login-button{
                    width: 100%;
                    text-align: center;
                    font-size: 14px;
                    background-color: red;
                    color: white;
                    border: none;
                    border-radius: 25px;
                }
            }
        }
    </style>

接口api/home

index.js

import instance from "@/utils/request";
// console.log('instance',instance());
// 精选社区等
export let homeList = (params)=>{
    return instance({
        url:'/goods/type_list',
        params
    })
}

// 首页顶部切换
export let ElectricList =(params)=>{
    return instance({
        url:"/visual/visual_second_category",
        params,
    })
}

// 图形验证码
export let Captcha=(params)=>{
    return instance({
        url:"/misc/captcha",
        params,
    })
}


// 短信验证码
export let Sms=(data)=>{
    return instance({
        url:"/misc/sms/send",
        method:"post",
        data,
    })
}

// 登录
export let Login=(data)=>{
    return instance({
        url:"/user/fast-login",
        method:"post",
        data,
    })
}


// 退出登录
export let login_config=()=>{
    return instance({
        url:"user/login_config",
        method:"get"
    })
    }


// 详情页面
export let DetailsList=(data)=>{
    return instance({
        url:"/goods/show",
        method:"post",
        data,
    })
}


// 分类
export let Catalog=(params)=>{
    return instance({
        url:"/catalog/list",
        params,
    })
}

export let Catalog2=(id)=>{
    return instance({
        url:`/catalog/list/${id}`,
        
    })
}