uniapp 推广员申请页面
parent
6d93d5ca16
commit
7c79be72d2
|
|
@ -452,6 +452,12 @@
|
|||
"navigationBarTitleText": "登录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "promoter/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "推广员申请"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "goods_comment_list/index",
|
||||
"style": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,515 @@
|
|||
<template>
|
||||
<div class="login-wrapper">
|
||||
<div class="logo-wrap">
|
||||
<img src="/static/images/mallLogo.png" style="width:105rpx;height:105rpx;"></image>
|
||||
<img src="/static/images/mall.png" style="width:233rpx;height:43rpx;"></image>
|
||||
</div>
|
||||
<view class="title">登录</view>
|
||||
<div class="whiteBg">
|
||||
<div class="list">
|
||||
<form @submit.prevent="submit">
|
||||
<div class="item">
|
||||
<div class="acea-row row-middle" v-if="current === 0">
|
||||
<image src="/static/images/user_1.png" style="width: 40rpx; height: 40rpx;"></image>
|
||||
<input type="text" class="texts" placeholder="请输入您的账号" v-model="mobile" required />
|
||||
</div>
|
||||
<div class="acea-row row-middle" v-else>
|
||||
<image src="/static/images/phone_2.png" style="width: 40rpx; height: 40rpx;"></image>
|
||||
<input type="text" class="texts" placeholder="请输入您的手机号" v-model="mobile" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" v-if="current === 0">
|
||||
<div class="acea-row row-middle">
|
||||
<image src="/static/images/code_3.png" style="width: 40rpx; height: 40rpx;"></image>
|
||||
<input type="password" class="texts" placeholder="填写登录密码" v-model="password" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" v-else>
|
||||
<div class="acea-row row-middle">
|
||||
<image src="/static/images/code_4.png" style="width: 40rpx; height: 40rpx;"></image>
|
||||
<input type="text" maxlength="6" placeholder="请输入您的验证码" class="texts" v-model="captcha" />
|
||||
</div>
|
||||
<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">
|
||||
{{ text }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<u-button class="logon" @click="loginMobile" v-if="current !== 0" :loading="loading" loading-text="登录中" :disabled="loading">登录</u-button>
|
||||
<u-button class="logon" @click="submit" v-if="current === 0" :loading="loading" loading-text="登录中" :disabled="loading">登录</u-button>
|
||||
<div class="tips">
|
||||
<!-- <div @click="jumpRegister">注册账号</div> -->
|
||||
<div @click="current = current === 1 ? 0 : 1">{{ current === 1 ? '账号密码登录' : '短信验证码登录' }}</div>
|
||||
<div @click="jumpRetrievePassword">找回密码</div>
|
||||
</div>
|
||||
<div class="protocol-wrap">
|
||||
<u-checkbox-group v-model="checked">
|
||||
<u-checkbox size="30" shape="circle" activeColor="#F35981" name="同意"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
<view class="text">我已阅读并同意 <span class="link" @click="onLinkUserPrivacy">《创盈商城用户协议》</span></view>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import dayjs from "@/plugin/dayjs/dayjs.min.js";
|
||||
import sendVerifyCode from "@/mixins/SendVerifyCode";
|
||||
import {
|
||||
loginH5,
|
||||
loginMobile,
|
||||
registerVerify,
|
||||
register,
|
||||
// getCodeApi,
|
||||
getUserInfo
|
||||
} from "@/api/user";
|
||||
import attrs, {
|
||||
required,
|
||||
alpha_num,
|
||||
chs_phone
|
||||
} from "@/utils/validate";
|
||||
import {
|
||||
validatorDefaultCatch
|
||||
} from "@/utils/dialog";
|
||||
import {
|
||||
getLogo,
|
||||
appAuth,
|
||||
appleLogin
|
||||
} from "@/api/public";
|
||||
import {
|
||||
VUE_APP_API_URL
|
||||
} from "@/utils";
|
||||
|
||||
const BACK_URL = "login_back_url";
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
mixins: [sendVerifyCode],
|
||||
data: function() {
|
||||
return {
|
||||
current: 1,
|
||||
mobile: "",
|
||||
password: "",
|
||||
captcha: "",
|
||||
type: "login",
|
||||
logoUrl: "",
|
||||
checked: [],
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
mounted: function() {
|
||||
// this.getLogoImage();
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
onLinkUserPrivacy(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/users/privacy/index'
|
||||
})
|
||||
},
|
||||
async getLogoImage() {
|
||||
let that = this;
|
||||
getLogo().then(res => {
|
||||
that.logoUrl = res.data.logoUrl ? res.data.logoUrl : '/static/images/logo2.png';
|
||||
});
|
||||
},
|
||||
async loginMobile() {
|
||||
let that = this;
|
||||
if (!that.mobile) return that.$util.Tips({
|
||||
title: '请填写手机号码'
|
||||
});
|
||||
if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(that.mobile)) return that.$util.Tips({
|
||||
title: '请输入正确的手机号码'
|
||||
});
|
||||
if (!that.captcha) return that.$util.Tips({
|
||||
title: '请填写验证码'
|
||||
});
|
||||
if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
|
||||
title: '请输入正确的验证码'
|
||||
});
|
||||
if(that.checked.length === 0) return that.$util.Tips({
|
||||
title: '请勾选同意用户协议'
|
||||
});
|
||||
that.loading = true
|
||||
loginMobile({
|
||||
mobile: that.mobile,
|
||||
code: that.captcha,
|
||||
spread_spid: that.$Cache.get("spread")
|
||||
})
|
||||
.then(res => {
|
||||
let data = res.data;
|
||||
let newTime = Math.round(new Date() / 1000);
|
||||
this.$store.commit("LOGIN", {
|
||||
'token': res.data.accessToken,
|
||||
'refreshToken': res.data.refreshToken
|
||||
});
|
||||
that.getUserInfo(data);
|
||||
})
|
||||
.catch(res => {
|
||||
that.$util.Tips({
|
||||
title: res
|
||||
});
|
||||
}).finally(()=>{
|
||||
that.loading = false
|
||||
})
|
||||
},
|
||||
async register() {
|
||||
|
||||
let that = this;
|
||||
if (!that.mobile) return that.$util.Tips({
|
||||
title: '请填写手机号码'
|
||||
});
|
||||
if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(that.mobile)) return that.$util.Tips({
|
||||
title: '请输入正确的手机号码'
|
||||
});
|
||||
if (!that.captcha) return that.$util.Tips({
|
||||
title: '请填写验证码'
|
||||
});
|
||||
if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
|
||||
title: '请输入正确的验证码'
|
||||
});
|
||||
if (!that.password) return that.$util.Tips({
|
||||
title: '请填写密码'
|
||||
});
|
||||
if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/i.test(that.password)) return that.$util.Tips({
|
||||
title: '您输入的密码过于简单'
|
||||
});
|
||||
register({
|
||||
mobile: that.mobile,
|
||||
captcha: that.captcha,
|
||||
password: that.password,
|
||||
spread: that.$Cache.get("spread")
|
||||
})
|
||||
.then(res => {
|
||||
that.$util.Tips({
|
||||
title: res
|
||||
});
|
||||
that.formItem = 1;
|
||||
})
|
||||
.catch(res => {
|
||||
that.$util.Tips({
|
||||
title: res
|
||||
});
|
||||
});
|
||||
},
|
||||
jumpRegister() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/users/register/index'
|
||||
})
|
||||
},
|
||||
jumpRetrievePassword() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/users/retrievePassword/index'
|
||||
})
|
||||
},
|
||||
async code() {
|
||||
let that = this;
|
||||
if (!that.mobile) return that.$util.Tips({
|
||||
title: '请填写手机号码'
|
||||
});
|
||||
if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(that.mobile)) return that.$util.Tips({
|
||||
title: '请输入正确的手机号码'
|
||||
});
|
||||
await registerVerify(that.mobile, 1)
|
||||
.then(res => {
|
||||
that.$util.Tips({
|
||||
title: res.message
|
||||
});
|
||||
that.sendCode();
|
||||
})
|
||||
.catch(err => {
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
},
|
||||
navTap: function(index) {
|
||||
this.current = index;
|
||||
},
|
||||
async submit() {
|
||||
let that = this;
|
||||
if (!that.mobile) return that.$util.Tips({
|
||||
title: '请填写账号'
|
||||
});
|
||||
if (!/^[\w\d]{5,16}$/i.test(that.mobile)) return that.$util.Tips({
|
||||
title: '请输入正确的账号'
|
||||
});
|
||||
if (!that.password) return that.$util.Tips({
|
||||
title: '请填写密码'
|
||||
});
|
||||
if(that.checked.length === 0) return that.$util.Tips({
|
||||
title: '请勾选同意用户协议'
|
||||
});
|
||||
that.loading = true
|
||||
loginH5({
|
||||
mobile: that.mobile,
|
||||
password: that.password,
|
||||
spread: that.$Cache.get("spread")
|
||||
})
|
||||
.then(({
|
||||
data
|
||||
}) => {
|
||||
this.$store.commit("LOGIN", {
|
||||
'token': data.accessToken,
|
||||
'refreshToken': data.refreshToken
|
||||
});
|
||||
that.getUserInfo(data);
|
||||
})
|
||||
.catch(e => {
|
||||
that.$util.Tips({
|
||||
title: e
|
||||
});
|
||||
}).finally(()=>{
|
||||
that.loading = false
|
||||
})
|
||||
},
|
||||
getUserInfo(data) {
|
||||
uni.showLoading({
|
||||
title: '正在获取用户信息...',
|
||||
mask: true
|
||||
})
|
||||
this.$store.commit("SETUID", data.userId);
|
||||
getUserInfo().then(res => {
|
||||
this.$store.commit("UPDATE_USERINFO", res.data);
|
||||
// let backUrl = this.$Cache.get(BACK_URL) || "/pages/index/index";
|
||||
let backUrl = "/pages/member_application/index";
|
||||
// let backUrl = "/pages/index/index";
|
||||
// if (backUrl.indexOf('/pages/users/login/index') !== -1) {
|
||||
// backUrl = '/pages/index/index';
|
||||
// }
|
||||
uni.reLaunch({
|
||||
url: backUrl
|
||||
});
|
||||
}).finally(()=>{
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.appLogin {
|
||||
margin-top: 60rpx;
|
||||
|
||||
.hds {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #B4B4B4;
|
||||
|
||||
.line {
|
||||
width: 68rpx;
|
||||
height: 1rpx;
|
||||
background: #CCCCCC;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.apple-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 30rpx;
|
||||
background: #000;
|
||||
border-radius: 34rpx;
|
||||
font-size: 40rpx;
|
||||
|
||||
.icon-s-pingguo {
|
||||
color: #fff;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wx {
|
||||
margin-right: 30rpx;
|
||||
background-color: #61C64F;
|
||||
}
|
||||
|
||||
.mima {
|
||||
background-color: #28B3E9;
|
||||
}
|
||||
|
||||
.yanzheng {
|
||||
background-color: #F89C23;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.code img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.acea-row.row-middle {
|
||||
input {
|
||||
margin-left: 20rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.login-wrapper {
|
||||
padding: 30rpx 52rpx;
|
||||
background: url('@/static/images/bg-linear.png') center 0 no-repeat;
|
||||
background-size:100% 672rpx;
|
||||
|
||||
.logo-wrap {
|
||||
margin: 185rpx 0 85rpx 0;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
img{
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.shading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
/* #ifdef APP-VUE */
|
||||
margin-top: 50rpx;
|
||||
/* #endif */
|
||||
/* #ifndef APP-VUE */
|
||||
|
||||
margin-top: 200rpx;
|
||||
/* #endif */
|
||||
|
||||
|
||||
image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.whiteBg {
|
||||
|
||||
margin-top: 46rpx;
|
||||
|
||||
.list {
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
margin-bottom: 38rpx;
|
||||
height: 98rpx;
|
||||
display: flex;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.code {
|
||||
width: 197rpx;
|
||||
text-align: center;
|
||||
line-height: 96rpx;
|
||||
background: #FFF3F6;
|
||||
border: 1px solid #F54275;
|
||||
border-radius: 15rpx;
|
||||
font-size: 28rpx;
|
||||
color: #F03A76;
|
||||
margin-left: 19rpx;
|
||||
}
|
||||
|
||||
.row-middle {
|
||||
position: relative;
|
||||
padding: 28rpx;
|
||||
background: #fff;
|
||||
border: 1px solid #BFBFBF;
|
||||
border-radius: 15rpx;
|
||||
flex: 1;
|
||||
|
||||
.texts {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
height: 42rpx;
|
||||
line-height: 42rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 87rpx;
|
||||
margin-top: 137rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
background: linear-gradient(0deg, #E63163 0%, #FF819F 100%);
|
||||
border-radius: 44rpx;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin: 60rpx 20rpx 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #000;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.protocol-wrap{
|
||||
margin: 131rpx 0 80rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.text{
|
||||
font-size: 24rpx;
|
||||
color: #000;
|
||||
.link{
|
||||
color: #F35981;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue