修改授权页,登录页样式

This commit is contained in:
Gao xiaosong
2020-09-13 03:58:01 +08:00
parent b706b4f104
commit b275117c35
7 changed files with 285 additions and 260 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -6153,7 +6153,7 @@ page {
margin: 0.2*100rpx 0.3*100rpx 0 0.3*100rpx;
}
.cash-withdrawal{
.cash-withdrawal {
padding-top: 1.3*100rpx;
}
@ -7349,49 +7349,51 @@ page {
/*立即注册*/
.register {
background-image: linear-gradient(to bottom, #eb3729 0%, #eb3729 100%);
background-image: -moz-linear-gradient(to bottom, #eb3729 0%, #eb3729 100%);
// background-image: linear-gradient(to bottom, #eb3729 0%, #eb3729 100%);
// background-image: -moz-linear-gradient(to bottom, #eb3729 0%, #eb3729 100%);
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
// justify-content: center;
}
.register .shading {
background-image: url("https://wx.yixiang.co/static/images/registerw.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 2.86*100rpx;
padding-top: 0.7*100rpx;
}
// .register .shading {
// background-image: url("https://wx.yixiang.co/static/images/registerw.png");
// background-repeat: no-repeat;
// background-size: 100% 100%;
// width: 100%;
// height: 2.86*100rpx;
// padding-top: 0.7*100rpx;
// }
.register .shading .pictrue {
width: 1.72*100rpx;
height: 1.72*100rpx;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.8);
margin: 0 auto;
}
// .register .shading .pictrue {
// width: 1.72*100rpx;
// height: 1.72*100rpx;
// border-radius: 50%;
// background-color: rgba(255, 255, 255, 0.8);
// margin: 0 auto;
// }
.register .shading .pictrue image {
width: 1.64*100rpx;
height: 1.64*100rpx;
border-radius: 50%;
display: block;
}
// .register .shading .pictrue image {
// width: 1.64*100rpx;
// height: 1.64*100rpx;
// border-radius: 50%;
// display: block;
// }
.register .whiteBg {
width: 6.2*100rpx;
border-radius: 0.16*100rpx;
background-color: #fff;
margin: 0.3*100rpx auto 0 auto;
padding: 0.45*100rpx 0.3*100rpx 0 0.3*100rpx;
padding: 0 60rpx
}
.register .whiteBg .title {
line-height: 2em;
font-size: 0.36*100rpx;
color: #282828;
text-align: center;
text-align: left;
font-weight: bold;
margin-top: 100rpx;
margin-bottom: 50rpx;
}
.register .whiteBg .title .item~.item {
@ -7410,8 +7412,8 @@ page {
}
.register .whiteBg .list .item {
border-bottom: 1px solid #ededed;
padding: 0.47*100rpx 0 0.13*100rpx 0;
border-bottom: 1px solid #cccccc;
padding: 30rpx 0 30rpx 0rpx;
position: relative;
}
@ -7429,7 +7431,7 @@ page {
.register .whiteBg .list .item input {
font-size: 0.33*100rpx;
width: 4.9*100rpx;
width: 100%;
}
.register .whiteBg .list .item input::placeholder {
@ -7493,7 +7495,7 @@ page {
}
.register .bottom {
background-image: url("https://wx.yixiang.co/static/images/registerB.png");
// background-image: url("https://wx.yixiang.co/static/images/registerB.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 6.2*100rpx;
@ -7523,7 +7525,7 @@ page {
// #endif
z-index: 9;
border-bottom: 1px solid #f5f5f5;
// border-bottom: 1px solid #555;
}
.productSort .header .input {
@ -9307,3 +9309,9 @@ rich-text {
position: relative;
}
}
.shoppingCart,
.user,
.container {
height: 100%;
}

View File

@ -99,7 +99,9 @@ import {
ready,
wxShowLocation,
} from '@/libs/wechat'
import { isWeixin } from '@/utils'
// 判断是否是微信浏览器
if (isWeixin()) {
Vue.prototype.$deviceType = 'weixin'

View File

@ -14,7 +14,7 @@
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<view class="force-login-wrap">
<image class="logo-bg" src="@/static/images/logo_bg.png" mode="aspectFill"></image>
<!-- <image class="logo-bg" src="@/static/images/logo_bg.png" mode="aspectFill"></image> -->
<view class="force-login__content y-f">
<view class="login-notice">为了提供更优质的服务请先登录</view>
<button class="cu-btn author-btn" @tap="toLogin">去登录</button>
@ -118,13 +118,11 @@
}
.force-login-wrap {
position: fixed;
width: 100vw;
height: 100vh;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 11111;
top: 0;
background: #fff;
.logo-bg {
width: 640rpx;
@ -167,7 +165,8 @@
.author-btn {
width: 630rpx;
height: 80rpx;
background: linear-gradient(90deg, #eb3729, #eb3729);
background: linear-gradient(to right, #f35447 0%, #ff8e3c 100%);
background: -moz-linear-gradient(to right, #f35447 0%, #ff8e3c 100%);
// box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
border-radius: 40rpx;
font-size: 30rpx;

View File

@ -21,6 +21,9 @@
<view class="qr" @click="startQr()">
<image src="@/static/images/qr.png" />
</view>
<view class="qr" @click="$yrouter.push({path:'/pages/shop/GoodsEvaluate/index'})">
<image src="@/static/images/qr.png" />
</view>
</view>
<Banner :banner="banner" @getbgcolor="getbgcolor"></Banner>
<uni-notice-bar scrollable="true" @click="goRoll(singNew)" single="true" :speed="10" showIcon="true"

View File

@ -1,19 +1,9 @@
<template>
<view class="register absolute">
<view class="shading">
<view class="pictrue acea-row row-center-wrapper">
<image src="@/static/images/logo.png" />
</view>
</view>
<view class="whiteBg" v-if="formItem === 1">
<view class="title acea-row row-center-wrapper">
<view
class="item"
:class="current === index ? 'on' : ''"
v-for="(item, index) in navList"
@click="navTap(index)"
:key="index"
>{{ item }}</view>
<view class="title acea-row row-between-wrapper">
<view class="item" :class="current === index ? 'on' : ''" v-for="(item, index) in navList"
@click="navTap(index)" :key="index">{{ item }}</view>
</view>
<view class="list" :hidden="current !== 0">
<form @submit.prevent="submit">
@ -50,12 +40,8 @@
<use xlink:href="#icon-code_1" />
</svg>-->
<input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" />
<button
class="code"
:disabled="disabled"
:class="disabled === true ? 'on' : ''"
@click="code"
>{{ text }}</button>
<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''"
@click="code">{{ text }}</button>
</view>
</view>
</view>
@ -67,7 +53,9 @@
</view>
</view>
<view class="whiteBg" v-else>
<view class="title">注册账号</view>
<view class="title acea-row row-between-wrapper">
<view class="item on">注册账号</view>
</view>
<view class="list">
<view class="item">
<view>
@ -83,12 +71,8 @@
<use xlink:href="#icon-code_1" />
</svg>-->
<input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" />
<button
class="code"
:disabled="disabled"
:class="disabled === true ? 'on' : ''"
@click="code"
>{{ text }}</button>
<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''"
@click="code">{{ text }}</button>
</view>
</view>
<view class="item">
@ -99,6 +83,7 @@
<input type="password" placeholder="填写您的登录密码" v-model="password" />
</view>
</view>
<!-- #ifndef H5 -->
<view class="item">
<view>
<!-- <svg class="icon" aria-hidden="true">
@ -107,6 +92,8 @@
<input type="text" placeholder="输入邀请码" v-model="inviteCode" />
</view>
</view>
<!-- #endif -->
</view>
<view class="logon" @click="register">注册</view>
<view class="tip">
@ -114,216 +101,242 @@
<text @click="formItem = 1" class="font-color-red">立即登录</text>
</view>
</view>
<view class="bottom"></view>
</view>
</template>
<script>
import sendVerifyCode from "@/mixins/SendVerifyCode";
import { login, loginMobile, registerVerify, register } from "@/api/user";
import attrs, { required, alpha_num, chs_phone } from "@/utils/validate";
import { validatorDefaultCatch } from "@/utils/dialog";
import dayjs from "dayjs";
import cookie from "@/utils/store/cookie";
import sendVerifyCode from "@/mixins/SendVerifyCode";
import {
login,
loginMobile,
registerVerify,
register
} from "@/api/user";
import attrs, {
required,
alpha_num,
chs_phone
} from "@/utils/validate";
import {
validatorDefaultCatch
} from "@/utils/dialog";
import dayjs from "dayjs";
import cookie from "@/utils/store/cookie";
import { handleGetUserInfo } from "@/utils";
import {
handleGetUserInfo
} from "@/utils";
const BACK_URL = "login_back_url";
const BACK_URL = "login_back_url";
export default {
name: "Login",
mixins: [sendVerifyCode],
data: function() {
return {
navList: ["账号登录"],
current: 0,
account: "",
password: "",
captcha: "",
inviteCode: "",
formItem: 1,
type: "login"
};
},
methods: {
async loginMobile() {
var that = this;
const { account, captcha } = that;
try {
await that
.$validator({
account: [
required(required.message("手机号码")),
chs_phone(chs_phone.message())
],
captcha: [
required(required.message("验证码")),
alpha_num(alpha_num.message("验证码"))
]
})
.validate({
account,
captcha
});
} catch (e) {
return validatorDefaultCatch(e);
}
loginMobile({
phone: that.account,
captcha: that.captcha,
spread: cookie.get("spread")
})
.then(res => {
var data = res.data;
that.$store.commit("login", data.token, dayjs(data.expires_time));
handleGetUserInfo();
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg|| err.response.data.message,
icon: "none",
duration: 2000
});
});
export default {
name: "Login",
mixins: [sendVerifyCode],
data: function () {
return {
navList: ["账号登录"],
current: 0,
account: "",
password: "",
captcha: "",
inviteCode: "",
formItem: 1,
type: "login"
};
},
async register() {
var that = this;
const { account, captcha, password } = that;
try {
await that
.$validator({
methods: {
async loginMobile() {
var that = this;
const {
account,
captcha
} = that;
try {
await that
.$validator({
account: [
required(required.message("手机号码")),
chs_phone(chs_phone.message())
],
captcha: [
required(required.message("验证码")),
alpha_num(alpha_num.message("验证码"))
]
})
.validate({
account,
captcha
});
} catch (e) {
return validatorDefaultCatch(e);
}
loginMobile({
phone: that.account,
captcha: that.captcha,
spread: cookie.get("spread")
})
.then(res => {
var data = res.data;
that.$store.commit("login", data.token, dayjs(data.expires_time));
handleGetUserInfo();
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
});
},
async register() {
var that = this;
const {
account,
captcha,
password
} = that;
try {
await that
.$validator({
account: [
required(required.message("手机号码")),
chs_phone(chs_phone.message())
],
captcha: [
required(required.message("验证码")),
alpha_num(alpha_num.message("验证码"))
],
password: [
required(required.message("密码")),
attrs.range([6, 16], attrs.range.message("密码")),
alpha_num(alpha_num.message("密码"))
]
})
.validate({
account,
captcha,
password
});
} catch (e) {
return validatorDefaultCatch(e);
}
register({
account: that.account,
captcha: that.captcha,
password: that.password,
inviteCode: that.inviteCode,
spread: cookie.get("spread")
})
.then(res => {
uni.showToast({
title: res.msg,
icon: "success",
duration: 2000
});
that.formItem = 1;
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
});
},
async code() {
var that = this;
const {
account
} = that;
try {
await that
.$validator({
account: [
required(required.message("手机号码")),
chs_phone(chs_phone.message())
]
})
.validate({
account
});
} catch (e) {
return validatorDefaultCatch(e);
}
if (that.formItem == 2) that.type = "register";
await registerVerify({
phone: that.account,
type: that.type
})
.then(res => {
uni.showToast({
title: res.msg,
icon: "success",
duration: 2000
});
that.sendCode();
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
});
},
navTap: function (index) {
this.current = index;
},
async submit() {
const {
account,
password
} = this;
try {
await this.$validator({
account: [
required(required.message("手机号码")),
chs_phone(chs_phone.message())
],
captcha: [
required(required.message("验证码")),
alpha_num(alpha_num.message("验证码"))
required(required.message("账号")),
attrs.range([5, 16], attrs.range.message("账号")),
alpha_num(alpha_num.message("账号"))
],
password: [
required(required.message("密码")),
attrs.range([6, 16], attrs.range.message("密码")),
alpha_num(alpha_num.message("密码"))
]
})
.validate({
}).validate({
account,
captcha,
password
});
} catch (e) {
return validatorDefaultCatch(e);
}
register({
account: that.account,
captcha: that.captcha,
password: that.password,
inviteCode: that.inviteCode,
spread: cookie.get("spread")
})
.then(res => {
uni.showToast({
title: res.msg,
icon: "success",
duration: 2000
});
that.formItem = 1;
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg|| err.response.data.message,
icon: "none",
duration: 2000
});
});
},
async code() {
var that = this;
const { account } = that;
try {
await that
.$validator({
account: [
required(required.message("手机号码")),
chs_phone(chs_phone.message())
]
} catch (e) {
return validatorDefaultCatch(e);
}
login({
username: account,
password,
spread: cookie.get("spread")
})
.validate({
account
});
} catch (e) {
return validatorDefaultCatch(e);
}
if (that.formItem == 2) that.type = "register";
await registerVerify({
phone: that.account,
type: that.type
})
.then(res => {
uni.showToast({
title: res.msg,
icon: "success",
duration: 2000
});
that.sendCode();
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg|| err.response.data.message,
icon: "none",
duration: 2000
});
});
},
navTap: function(index) {
this.current = index;
},
async submit() {
const { account, password } = this;
try {
await this.$validator({
account: [
required(required.message("账号")),
attrs.range([5, 16], attrs.range.message("账号")),
alpha_num(alpha_num.message("账号"))
],
password: [
required(required.message("密码")),
attrs.range([6, 16], attrs.range.message("密码")),
alpha_num(alpha_num.message("密码"))
]
}).validate({
account,
password
});
} catch (e) {
return validatorDefaultCatch(e);
}
.then(({
data
}) => {
this.$store.commit("login", data.token, dayjs(data.expires_time));
handleGetUserInfo();
// let replace=this.$yroute.query.replace
// if(replace){
login({
username: account,
password,
spread: cookie.get("spread")
})
.then(({ data }) => {
this.$store.commit("login", data.token, dayjs(data.expires_time));
handleGetUserInfo();
// let replace=this.$yroute.query.replace
// if(replace){
// }
// this.$yrouter.replace({
// path: this.$yroute.query.replace || '/pages/home/index'
// });
})
.catch(err => {
console.log(err);
uni.showToast({
title: err.msg || err.response.data.msg|| err.response.data.message,
icon: "none",
duration: 2000
// }
// this.$yrouter.replace({
// path: this.$yroute.query.replace || '/pages/home/index'
// });
})
.catch(err => {
console.log(err);
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
});
});
}
}
}
};
};
</script>