登录

pages/login/index.js

@@ -0,0 +1,83 @@
+import Toast from '@vant/weapp/toast/toast';
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        isAgree: true
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+    toPhoneLodin() {
+        if (!this.data.isAgree) return Toast({
+            message: '请阅读并勾选用户协议',
+            position: 'bottom'
+        });
+        wx.navigateTo({
+            url: './phone'
+        })
+    },
+    agreementChange({
+        detail
+    }) {
+        this.setData({
+            isAgree: detail
+        })
+    },
+
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/login/index.json

@@ -0,0 +1,6 @@
+{
+    "navigationBarTitleText": "登录",
+    "usingComponents": {
+        "Agreement": "./modules/agreement"
+    }
+}

pages/login/index.scss

@@ -0,0 +1,17 @@
+page {
+    background: #ffffff;
+}
+
+.login-fun {
+    width: 650rpx;
+    height: 90rpx;
+    border-radius: 16rpx !important;
+    font-size: 28rpx;
+    font-family: PingFang SC-Regular, PingFang SC;
+    color: #FFFFFF;
+}
+
+.phone-login {
+    color: #666666 !important;
+}
+

pages/login/index.wxml

@@ -0,0 +1,9 @@
+<view style="width: 100vw;text-align: center; margin-top: 480rpx;">
+    <van-button custom-class='login-fun' color="linear-gradient(90deg, #3874F6 0%, #095DE0 100%);">微信用户一键登录</van-button>
+    <view style="height: 30rpx;" />
+    <van-button custom-class='login-fun phone-login' color="#CCCCCC" plain bindtap="toPhoneLodin">手机号登录/注册</van-button>
+</view>
+
+<view style="height: 60rpx;" />
+<Agreement isAgree='{{isAgree}}' bindcallBack='agreementChange' />
+<van-toast id="van-toast" />

pages/login/modules/agreement.js

@@ -0,0 +1,35 @@
+// pages/login/modules/agreement.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        isAgree: {
+            type: Boolean
+        },
+        callBack: {
+            type: Function
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        /* 修改授权 */
+        isAgreeChange() {
+            let isAgree = !this.data.isAgree
+            this.setData({
+                isAgree
+            })
+            this.triggerEvent("callBack", isAgree)
+        }
+    }
+})

pages/login/modules/agreement.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "van-checkbox": "@vant/weapp/checkbox/index"
+    }
+}

pages/login/modules/agreement.scss

@@ -0,0 +1,20 @@
+/* 登录协议 */
+.agreement {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+
+    .con {
+        width: 376rpx;
+        text-align: center;
+        font-size: 24rpx !important;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #666666 !important;
+        padding-top: 40rpx;
+        margin-left: -10rpx;
+
+        text {
+            color: #3874F6;
+        }
+    }
+}

pages/login/modules/agreement.wxml

@@ -0,0 +1,3 @@
+<view class="agreement">
+    <van-checkbox icon-size="28rpx" label-class='con' value="{{ isAgree }}" bind:change="isAgreeChange">登录代表您已同意 <text>用户服务协议</text>、<text>隐私协议</text></van-checkbox>
+</view>

pages/login/phone.js

@@ -0,0 +1,151 @@
+import Toast from '@vant/weapp/toast/toast';
+const _Http = getApp().globalData.http;
+const md5 = require("../../utils/md5");
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        isAgree: true,
+        phoneNumber: "",
+        password: "",
+        inputType: "password", //密码输入框类型
+        memory: true, //记忆
+        disabled: true, //是否禁用
+        loading: false, //登陆中
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        this.setData({
+            ...wx.getStorageSync('loginMsg')
+        })
+        this.allowOrNot()
+    },
+    /* 用户登录 */
+    userLogin() {
+        if (this.data.loading || this.data.disabled) return;
+        if (!this.data.isAgree) return Toast({
+            message: '请阅读并勾选用户协议',
+            position: 'bottom'
+        });
+        this.setData({
+            loading: true
+        })
+        /* "accountno": this.data.phoneNumber,
+            "password": md5.hexMD5(this.data.password), */
+        _Http.login({
+            "accountno": "test",
+            "password": "e10adc3949ba59abbe56e057f20f883e",
+            "systemclient": "wechatapp"
+        }).then(res => {
+            console.log("登录", res)
+            this.setData({
+                loading: false
+            })
+            if (res.msg != '成功') return wx.showToast({
+                title: res.msg,
+                icon: "none"
+            })
+            wx.setStorageSync('account_list', res.account_list)
+            wx.setStorageSync('loginMsg', {
+                phoneNumber: this.data.phoneNumber,
+                password: (this.data.memory) ? this.data.password : ''
+            })
+            wx.switchTab({
+                url: '/pages/tabbar/home/index'
+            })
+        })
+    },
+    /* 改变密码输入框类型 */
+    changePasswordType() {
+        this.setData({
+            inputType: this.data.inputType == "text" ? 'password' : 'text'
+        })
+    },
+    /* 授权 */
+    agreementChange({
+        detail
+    }) {
+        this.setData({
+            isAgree: detail
+        })
+    },
+    /* 手机号 */
+    inputPhone(e) {
+        this.setData({
+            phoneNumber: e.detail.value.trim()
+        })
+        this.allowOrNot()
+    },
+    /* 密码 */
+    inputPassword(e) {
+        this.setData({
+            password: e.detail.value.trim()
+        })
+        this.allowOrNot()
+    },
+    /* 验证是否允许登录 */
+    allowOrNot() {
+        this.setData({
+            disabled: (this.data.phoneNumber.length == 11 && this.data.password.length >= 6) ? false : true
+        })
+    },
+    /* 是否记忆密码 */
+    isMemory() {
+        this.setData({
+            memory: !this.data.memory
+        })
+    },
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/login/phone.json

@@ -0,0 +1,8 @@
+{
+    "navigationBarTitleText": "手机登录",
+    "usingComponents": {
+        "Agreement": "./modules/agreement",
+        "van-checkbox": "@vant/weapp/checkbox/index",
+        "van-cell": "@vant/weapp/cell/index"
+    }
+}

pages/login/phone.scss

@@ -0,0 +1,49 @@
+page {
+    background: #ffffff;
+}
+
+.iconfont {
+    color: var(--assist);
+}
+
+.input {
+    text-align: left;
+    margin-left: 50rpx;
+}
+
+.image {
+    width: 40rpx !important;
+    height: 40rpx !important;
+}
+
+.box {
+    display: flex;
+    justify-content: space-between;
+    width: 690rpx;
+    margin: 40rpx auto 0;
+    font-family: PingFang SC-Regular, PingFang SC;
+
+    .checkbox {
+        font-size: 24rpx;
+        color: #666666;
+        margin-top: -3rpx;
+    }
+
+    .label {
+        margin-left: -10rpx;
+    }
+
+    .view {
+        font-size: 24rpx;
+        color: #999999;
+    }
+}
+
+.login {
+    width: 650rpx;
+    height: 90rpx;
+    border-radius: 16rpx !important;
+    font-size: 28rpx;
+    font-family: PingFang SC-Regular, PingFang SC;
+    color: #FFFFFF;
+}

pages/login/phone.wxml

@@ -0,0 +1,22 @@
+<view style="height: 420rpx;" />
+<van-cell>
+    <text slot='icon' class="iconfont icon-a-wodemendianxinxidianhua" />
+    <input class="input" type="number" value='{{phoneNumber}}' bindinput="inputPhone" placeholder="请输入手机号" />
+</van-cell>
+<van-cell>
+    <text slot='icon' class="iconfont icon-a-wodemima" />
+    <input class="input" type="{{inputType}}" bindinput="inputPassword" value="{{password}}" placeholder="请输入密码" />
+    <image slot='right-icon' bindtap="changePasswordType" class="image" src="{{inputType=='password'?'/static/image/dp-show.svg':'/static/image/dp-none.svg'}}" />
+</van-cell>
+
+<view class="box">
+    <van-checkbox custom-class='checkbox' label-class='label' icon-size="28rpx" value="{{ memory }}" shape="square" bind:change="isMemory">
+        记住密码
+    </van-checkbox>
+    <navigator url="/pages/tabbar/mine/changePassword/index" class="view">忘记密码?</navigator>
+</view>
+<view style="width: 100vw; text-align: center;margin-top: 60rpx;">
+    <van-button disabled='{{disabled}}' custom-class='login' bindtap="userLogin" loading='{{loading}}' loading-text="登陆中..." color='linear-gradient(90deg, #3874F6 0%, #095DE0 100%);'>登录</van-button>
+</view>
+<Agreement isAgree='{{isAgree}}' bindcallBack='agreementChange' />
+<van-toast id="van-toast" />

static/image/dp-none.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20"><defs><style>.a,.c{fill:#999;}.a{stroke:#707070;}.b{clip-path:url(#a);}</style><clipPath id="a"><rect class="a" width="20" height="20" transform="translate(1492 114)"/></clipPath></defs><g class="b" transform="translate(-1492 -114)"><path class="c" d="M22.326,9.7a.833.833,0,0,0-1.3-1.041,11.612,11.612,0,0,1-8.516,3.854A11.694,11.694,0,0,1,3.993,8.655.833.833,0,0,0,2.691,9.7a10.866,10.866,0,0,0,1.385,1.361L2.614,12.838,3.9,13.895l1.514-1.845A13.439,13.439,0,0,0,7.608,13.2L6.77,15.524l1.567.566.851-2.354a12.754,12.754,0,0,0,2.488.4v2.536h1.667V14.139a12.743,12.743,0,0,0,2.531-.416l.86,2.352L18.3,15.5l-.847-2.316a13.389,13.389,0,0,0,2.088-1.1l1.505,1.858L22.339,12.9,20.887,11.1A10.894,10.894,0,0,0,22.326,9.7Z" transform="translate(1489.492 111.492)"/></g></svg>

static/image/dp-show.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20"><defs><style>.a,.c{fill:#999;}.a{stroke:#707070;}.b{clip-path:url(#a);}</style><clipPath id="a"><rect class="a" width="20" height="20" transform="translate(325 126)"/></clipPath></defs><g class="b" transform="translate(-325 -126)"><path class="c" d="M13.332,6.574a10.712,10.712,0,0,0-10,6.818,10.742,10.742,0,0,0,20,0,10.711,10.711,0,0,0-10-6.818m0,11.364a4.545,4.545,0,1,1,4.545-4.545,4.5,4.5,0,0,1-4.545,4.545m0-7.273a2.727,2.727,0,1,0,2.727,2.727,2.679,2.679,0,0,0-2.727-2.727" transform="translate(321.668 122.607)"/></g></svg>