123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204 |
- <template>
- <view class="login">
- <view class="logo">
- <image src="../../static/images/login/logo.png" style="width: 160upx;height: 160upx;" mode="scaleToFill"></image>
- </view>
- <view class="login-from">
- <view class="input-item">
- <label for="">
- <image src="../../static/images/login/phone.png" style="width: 30upx;height: 40upx;" mode=""></image>
- </label>
- <input type="text" placeholder="请输入账号" v-model="account">
- </view>
- <view class="input-item" style="margin-bottom: 20upx;">
- <label for="">
- <image src="../../static/images/login/lock.png" style="width: 30upx;height: 40upx;" mode=""></image>
- </label>
- <input type="password" placeholder="请输入密码" v-model="password">
- </view>
- <view class="forget">
- <navigator url="/pages/user/find-pass" open-type="navigate" style="display: inline;">
- <text>忘记密码</text>
- </navigator>
- </view>
- <view class="button-item">
- <button class="login-btn" @tap="login()">登录</button>
- </view>
- <view class="button-item">
- <navigator url="/pages/register/step1" open-type="navigate">
- <button class="reg-btn">注册</button>
- </navigator>
- </view>
- <view class="use-phone">
- <navigator url="/pages/user/vcode-login" open-type="navigate" style="display: inline;">
- <text>使用手机验证码登入</text>
- </navigator>
- </view>
- </view>
- <view class="third-party">
- <view class="title"><text>第三方登录</text></view>
- <view class="content">
- <image src="../../static/images/login/wx.png" style="width: 90upx;height: 90upx;" mode="scaleToFill"></image>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- account: '',
- password: ''
- }
- },
- methods: {
- login() {
- if (this.$verified.account(this.account) &&
- this.$verified.required(this.password, "请输入密码")) {
- this.$http.post({
- url: "/user/login",
- data: {
- account: this.account,
- password: this.password
- },
- success: (res) => {
- console.log(this.$store)
- this.$store.dispatch("user/save", res.data.data.userinfo)
- uni.$emit("login_succeeded");
- uni.navigateBack();
- }
- })
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .login {
- background: $primary-color;
- height: 100vh;
- width: 750rpx;
- /* #ifdef APP-PLUS */
- padding-bottom: 60upx;
- /* #endif */
- }
- .logo {
- width: 160upx;
- height: 160upx;
- background: white;
- border-radius: 160upx;
- border: 10upx solid $primary-color;
- margin: auto;
- margin-top: -60upx;
- position: relative;
- top: 80upx;
- z-index: 999;
- }
- .login-from {
- margin: auto;
- width: 600upx;
- height: 740upx;
- background-color: white;
- border-radius: 20rpx;
- padding: 72upx;
- padding-top: 180upx;
- box-sizing: border-box;
- position: relative;
- z-index: 2;
- &::after {
- content: "";
- background: url(../../static/images/login/box-bottom.png) no-repeat;
- background-size: contain;
- width: 564upx;
- height: 30upx;
- display: block;
- position: absolute;
- bottom: -30upx;
- left: 18upx;
- z-index: -1;
- }
- }
- .input-item {
- display: flex;
- margin-bottom: 48upx;
- label {
- width: 50upx;
- }
- input {
- border-bottom: 2upx solid $primary-color;
- flex-grow: 1;
- padding: 5upx;
- font-size: 30upx;
- }
- }
- .forget {
- text-align: right;
- color: $primary-color;
- font-size: 28upx;
- }
- .login-btn,
- .reg-btn {
- height: 80upx;
- border: 2upx solid $primary-color;
- line-height: 80upx;
- margin: 30upx 0;
- font-size: 32upx;
- &::after {
- border: none;
- }
- }
- .login-btn {
- background: $primary-color;
- color: white;
- }
- .reg-btn {
- background-color: white;
- color: $primary-color;
- }
- .use-phone {
- font-size: 28upx;
- text-align: center;
- color: $primary-color;
- }
- .third-party {
- margin: auto;
- text-align: center;
- margin-top: 100upx;
- .title {
- font-size: 28upx;
- color: white;
- &::before,
- &::after {
- display: inline-block;
- width: 100upx;
- height: 0upx;
- border: 1upx solid #ff8ca8;
- transform: scaleY(0.5);
- content: "";
- margin: 8upx 20upx;
- }
- }
- .content {
- margin-top: 50upx;
- }
- }
- </style>
|