初始项目
This commit is contained in:
liupopo
373
mallplusui-uniapp-app/pages/public/index.vue
Normal file
373
mallplusui-uniapp-app/pages/public/index.vue
Normal file
@@ -0,0 +1,373 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="login-t">
|
||||
<image class="login-logo" :src="logoImage" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="login-m">
|
||||
<view class="login-item">
|
||||
<input type="number" v-model="mobile" :maxlength="maxMobile" placeholder="请输入手机号码" focus placeholder-class="login-item-i-p" />
|
||||
</view>
|
||||
<view class="login-item flc">
|
||||
<input class="login-item-input" placeholder-class="login-item-i-p" type="text" v-model="code" placeholder="请输入验证码" />
|
||||
<view :class="sendCodeBtn" @click="sendCode" v-if="verification">发送验证码</view>
|
||||
<view class="btn btn-g" v-if="!verification">{{ timer }} 秒后重新获取</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="login-b">
|
||||
<!-- #ifdef H5|APP-PLUS|APP-PLUS-NVUE -->
|
||||
<view v-if="user_wx_id">
|
||||
<button :class="regButtonClass" @click="toBind()" hover-class="btn-hover">登录</button>
|
||||
</view>
|
||||
<view v-else>
|
||||
<button :class="regButtonClass" @click="login()" hover-class="btn-hover">登录</button>
|
||||
<view class="login-other flc">
|
||||
<view class="fz12 item" @click="selectLoginType">
|
||||
密码登录
|
||||
</view>
|
||||
<view class="fz12 item" @click="toReg">
|
||||
注册
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP -->
|
||||
<button :class="regButtonClass" @click="showTopTips()" hover-class="btn-hover">登录</button>
|
||||
<!-- #endif -->
|
||||
|
||||
</view>
|
||||
<mallplusCopyright></mallplusCopyright>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import store from '@/store/index';
|
||||
import { goBack, jumpBackPage } from '@/config/mixins.js'
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
mixins: [goBack,jumpBackPage],
|
||||
data() {
|
||||
return {
|
||||
maxMobile: 11,
|
||||
mobile: '', // 用户手机号
|
||||
code: '', // 短信验证码
|
||||
user_wx_id: '', //授权id
|
||||
verification: true, // 通过v-show控制显示获取还是倒计时
|
||||
timer: 60, // 定义初始时间为60s
|
||||
btnb: 'btn btn-square btn-c btn-all', //按钮背景
|
||||
type: '', // 有值是第三方登录账号绑定
|
||||
isWeixinBrowser: this.$common.isWeiXinBrowser()
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
if (option.user_wx_id) {
|
||||
this.user_wx_id = option.user_wx_id
|
||||
uni.setNavigationBarTitle({
|
||||
title: '绑定手机号'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// H5第三方授权登录绑定
|
||||
// if (option.type && option.type === 'bind') {
|
||||
// this.type = option.type
|
||||
// uni.setNavigationBarTitle({
|
||||
// title: '绑定手机号'
|
||||
// })
|
||||
// }
|
||||
},
|
||||
computed: {
|
||||
// 验证手机号
|
||||
rightMobile() {
|
||||
let res = {}
|
||||
if (!this.mobile) {
|
||||
res.status = false
|
||||
res.msg = '请输入手机号'
|
||||
} else if (!/^1[3456789]{1}\d{9}$/gi.test(this.mobile)) {
|
||||
res.status = false
|
||||
res.msg = '手机号格式不正确'
|
||||
} else {
|
||||
res.status = true
|
||||
}
|
||||
return res
|
||||
},
|
||||
// 动态计算发送验证码按钮样式
|
||||
sendCodeBtn() {
|
||||
let btn = 'btn btn-g'
|
||||
if (this.mobile.length === this.maxMobile && this.rightMobile.status) {
|
||||
return btn + ' btn-b'
|
||||
} else {
|
||||
return btn
|
||||
}
|
||||
},
|
||||
// 动态更改登录按钮bg
|
||||
regButtonClass() {
|
||||
return this.mobile && this.mobile.length === this.maxMobile && this.code
|
||||
? this.btnb + ' btn-b'
|
||||
: this.btnb
|
||||
},
|
||||
logoImage() {
|
||||
return '/static/missing-face.png'
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
let _this = this
|
||||
let userToken = _this.$db.get('userToken')
|
||||
if (userToken) {
|
||||
uni.switchTab({
|
||||
url: '/pages/member/index/index'
|
||||
})
|
||||
return true
|
||||
}
|
||||
_this.timer = parseInt(_this.$db.get('timer'))
|
||||
if (_this.timer != null && _this.timer > 0) {
|
||||
_this.countDown()
|
||||
_this.verification = false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 发送短信验证码
|
||||
sendCode() {
|
||||
if (!this.rightMobile.status) {
|
||||
this.$common.errorToShow(this.rightMobile.msg)
|
||||
} else {
|
||||
this.$common.loadToShow('发送中...')
|
||||
setTimeout(() => {
|
||||
this.$common.loadToHide()
|
||||
this.$api.sms({ mobile: this.mobile, code: 'login' }, res => {
|
||||
if (res.status) {
|
||||
this.timer = 60
|
||||
this.verification = false
|
||||
this.$common.successToShow(res.msg)
|
||||
this.countDown() // 执行验证码计时
|
||||
// this.btnb = 'btn btn-square btn-all btn-b';
|
||||
} else {
|
||||
this.$common.errorToShow(res.msg)
|
||||
}
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
// 去注册
|
||||
toReg() {
|
||||
this.$common.navigateTo('/pages/login/register/index')
|
||||
},
|
||||
// 验证码倒计时
|
||||
countDown() {
|
||||
let auth_timer = setInterval(() => {
|
||||
// 定时器设置每秒递减
|
||||
this.timer-- // 递减时间
|
||||
uni.setStorage({
|
||||
key: 'timer',
|
||||
data: this.timer,
|
||||
success: function() {}
|
||||
})
|
||||
if (this.timer <= 0) {
|
||||
this.verification = true // 60s时间结束还原v-show状态并清除定时器
|
||||
clearInterval(auth_timer)
|
||||
}
|
||||
}, 1000)
|
||||
},
|
||||
// 登录
|
||||
login() {
|
||||
var _this = this
|
||||
if (!_this.rightMobile.status) {
|
||||
_this.$common.errorToShow(_this.rightMobile.msg)
|
||||
} else {
|
||||
// 短信验证码登录
|
||||
if (!_this.code) {
|
||||
_this.$common.errorToShow('请输入短信验证码!')
|
||||
} else {
|
||||
let data = {
|
||||
mobile: _this.mobile,
|
||||
code: _this.code
|
||||
}
|
||||
|
||||
let invicode = _this.$db.get('invitecode')
|
||||
if (invicode) {
|
||||
data.invitecode = invicode
|
||||
}
|
||||
|
||||
_this.$api.smsLogin(data, res => {
|
||||
if (res.status) {
|
||||
this.$db.set('userToken', res.data)
|
||||
_this.redirectHandler()
|
||||
} else {
|
||||
_this.$common.errorToShow(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 重定向跳转 或者返回上一个页面
|
||||
redirectHandler() {
|
||||
this.$common.successToShow('登录成功!', () => {
|
||||
this.$db.set('timer', 0)
|
||||
this.$db.del('invitecode')
|
||||
this.handleBack()
|
||||
})
|
||||
},
|
||||
// 跳转到普通登录
|
||||
toLogin() {
|
||||
uni.navigateTo({
|
||||
url: '../../login/login/index'
|
||||
})
|
||||
},
|
||||
//提交按钮
|
||||
showTopTips: function() {
|
||||
let _this = this
|
||||
if (_this.mobile == '') {
|
||||
_this.$common.errorToShow('请输入手机号码')
|
||||
return false
|
||||
}
|
||||
if (this.code == '') {
|
||||
_this.$common.errorToShow('请输入验证码')
|
||||
return false
|
||||
}
|
||||
if (_this.user_wx_id == 0) {
|
||||
_this.$common.errorToShow('登录失败，请稍后再试', function() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
})
|
||||
return false
|
||||
}
|
||||
var platform = 2
|
||||
//1就是h5登陆（h5端和微信公众号端），2就是微信小程序登陆，3是支付宝小程序，4是app，5是pc
|
||||
// #ifdef MP-ALIPAY
|
||||
platform = 3
|
||||
// #endif
|
||||
// #ifdef APP-PLUS||APP-PLUS-NVUE
|
||||
platform = 4
|
||||
// #endif
|
||||
var data = {
|
||||
mobile: _this.mobile,
|
||||
code: _this.code,
|
||||
platform: platform, //平台id，标识是小程序登陆的
|
||||
user_wx_id: _this.user_wx_id //微信小程序接口存不了session，所以要绑定的id只能传到前台
|
||||
}
|
||||
//有推荐码的话，带上
|
||||
var invitecode = _this.$db.get('invitecode')
|
||||
if (invitecode) {
|
||||
data.invitecode = invitecode
|
||||
}
|
||||
_this.$api.smsLogin(data, function(res) {
|
||||
if (res.status) {
|
||||
_this.$db.set('userToken', res.data)
|
||||
_this.redirectHandler()
|
||||
} else {
|
||||
//报错了
|
||||
_this.$common.errorToShow(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 公众号第三方登录账号绑定
|
||||
toBind() {
|
||||
if (this.mobile == '') {
|
||||
this.$common.errorToShow('请输入手机号码')
|
||||
return false
|
||||
}
|
||||
if (this.code == '') {
|
||||
this.$common.errorToShow('请输入验证码')
|
||||
return false
|
||||
}
|
||||
|
||||
let data = {
|
||||
mobile: this.mobile,
|
||||
code: this.code,
|
||||
user_wx_id:this.user_wx_id
|
||||
}
|
||||
|
||||
// 获取邀请码
|
||||
let invicode = this.$db.get('invitecode')
|
||||
if (invicode) {
|
||||
data.invitecode = invicode
|
||||
}
|
||||
|
||||
this.$api.smsLogin(data, res => {
|
||||
if (res.status) {
|
||||
this.$db.set('userToken', res.data)
|
||||
this.redirectHandler()
|
||||
} else {
|
||||
this.$common.errorToShow(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 切换登录方式
|
||||
selectLoginType() {
|
||||
this.$common.redirectTo('./index1')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - 90upx);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
height: 100vh;
|
||||
/* #endif */
|
||||
background-color: #fff;
|
||||
|
||||
padding: 0upx 100upx;
|
||||
}
|
||||
.login-t {
|
||||
text-align: center;
|
||||
padding: 50upx 0;
|
||||
}
|
||||
.login-logo {
|
||||
width: 180upx;
|
||||
height: 180upx;
|
||||
border-radius: 20upx;
|
||||
background-color: #f8f8f8;
|
||||
/* margin: 0 auto; */
|
||||
}
|
||||
.login-m {
|
||||
margin-bottom: 100upx;
|
||||
}
|
||||
.login-item {
|
||||
border-bottom: 2upx solid #d0d0d0;
|
||||
overflow: hidden;
|
||||
padding: 10upx;
|
||||
color: #333;
|
||||
margin-bottom: 30upx;
|
||||
}
|
||||
.login-item-input {
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.login-item .btn {
|
||||
border: none;
|
||||
width: 40%;
|
||||
text-align: right;
|
||||
padding: 0;
|
||||
&.btn-b {
|
||||
background: none;
|
||||
color: #333 !important;
|
||||
}
|
||||
}
|
||||
.login-b .btn {
|
||||
color: #999;
|
||||
}
|
||||
.btn-b {
|
||||
color: #fff !important;
|
||||
}
|
||||
.login-other {
|
||||
margin-bottom: 40upx;
|
||||
.item {
|
||||
padding: 20upx 0;
|
||||
}
|
||||
}
|
||||
.btn-square {
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
}
|
||||
</style>
|
||||
605
mallplusui-uniapp-app/pages/public/login.vue
Normal file
605
mallplusui-uniapp-app/pages/public/login.vue
Normal file
@@ -0,0 +1,605 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="left-bottom-sign"></view>
|
||||
<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
|
||||
<view class="right-top-sign"></view>
|
||||
<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
|
||||
<view class="wrapper">
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="left-top-sign">{{ sysInfo.name }}LOGIN</view>
|
||||
<view class="welcome">欢迎回来！{{ sysInfo.name }}</view>
|
||||
<view class="input-content">
|
||||
<view class="input-item">
|
||||
<text class="tit">手机号码</text>
|
||||
<input type="number" v-model="phone" placeholder="请输入手机号码" />
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<text class="tit">密码</text>
|
||||
<input type="password" placeholder="请输入密码" v-model="password" @confirm="toLogin" />
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
|
||||
<view class="forget-section" @click="toForget">忘记密码?</view>
|
||||
<view class="forget-section" @click="toLoginCode">验证码登录</view>
|
||||
<br/>
|
||||
<view class="register-section">
|
||||
还没有账号?
|
||||
<text @click="toRegist">马上注册</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="confirm-btn" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true" v-if="isGetPhone == false">微信登录</button>
|
||||
<button class="confirm-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="isGetPhone == true">获取手机号</button>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="left-top-sign">{{ sysInfo.name }}LOGIN</view>
|
||||
<view class="welcome">欢迎回来！{{ sysInfo.name }}</view>
|
||||
<view class="input-content">
|
||||
<view class="input-item">
|
||||
<text class="tit">手机号码</text>
|
||||
<input type="number" v-model="phone" placeholder="请输入手机号码" />
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<text class="tit">密码</text>
|
||||
<input type="password" placeholder="请输入密码" v-model="password" @confirm="toLogin" />
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
|
||||
|
||||
<!-- <button v-if="isWeiXin == 1" class="confirm-btn" @click="wechatH5Login" :disabled="logining">微信授权登录</button> -->
|
||||
|
||||
<view class="forget-section" @click="toForget">忘记密码?</view>
|
||||
<view class="forget-section" @click="toLoginCode">验证码登录</view>
|
||||
<br/><view class="register-section">
|
||||
还没有账号?
|
||||
<text @click="toRegist">马上注册</text>
|
||||
</view>
|
||||
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
|
||||
<mallplusCopyright></mallplusCopyright>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import store from '@/store/index';
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
phone: '',
|
||||
password: '',
|
||||
isWeiXin: 0,
|
||||
sysInfo: '',
|
||||
logining: false,
|
||||
isGetPhone: false,
|
||||
info: ''
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
let isWeiXin = this.$common.isWeiXinBrowser();
|
||||
if (isWeiXin) {
|
||||
this.isWeiXin = 1;
|
||||
}
|
||||
this.sysInfo = this.$db.get('sysInfo');
|
||||
},
|
||||
computed: {
|
||||
...mapState(['hasLogin', 'userInfo'])
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login']),
|
||||
inputChange(e) {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
this[key] = e.detail.value;
|
||||
},
|
||||
toForget() {
|
||||
uni.navigateTo({
|
||||
url: '../../pagesU/user/forget'
|
||||
});
|
||||
},
|
||||
toLoginCode() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/public/loginCode'
|
||||
});
|
||||
},
|
||||
navBack() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
},
|
||||
toRegist() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/public/reg'
|
||||
});
|
||||
},
|
||||
wechatH5Login() {
|
||||
const that = this;
|
||||
let href = window.location.origin;
|
||||
let page = that.$api.prePage();
|
||||
let prePath = '/pages/index/index';
|
||||
if (page) {
|
||||
prePath = page.__page__.path;
|
||||
}
|
||||
|
||||
window.location =
|
||||
'https://open.weixin.qq.com/connect/oauth2/authorize?' +
|
||||
'appid=' +
|
||||
Api.h5Appid +
|
||||
'&redirect_uri=' +
|
||||
escape(href) +
|
||||
'&response_type=code&scope=snsapi_userinfo&state=mallplus#wechat_redirect';
|
||||
},
|
||||
wxGetUserInfo: function(res) {
|
||||
if (!res.detail.iv) {
|
||||
uni.showToast({
|
||||
title: '您取消了授权,登录失败',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
// this.login(res.detail.rawData);
|
||||
const that = this;
|
||||
let datas = '';
|
||||
let errmsg = '';
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: function(loginRes) {
|
||||
|
||||
var params = {
|
||||
code: loginRes.code,
|
||||
userInfo: res.detail.rawData,
|
||||
cloudID: res.detail.cloudID,
|
||||
encrypted_data: res.detail.encryptedData,
|
||||
iv: res.detail.iv,
|
||||
source: 2,
|
||||
signature: res.detail.signature
|
||||
};
|
||||
that.loginByWeixinNoPhone(params);
|
||||
}
|
||||
});
|
||||
},
|
||||
loginByWeixinNoPhone(datas) {
|
||||
var that = this;
|
||||
wx.request({
|
||||
url: Api.BASEURI + Api.index.appletLogin_by_weixin,
|
||||
method: 'post',
|
||||
data: datas,
|
||||
success: function(res) {
|
||||
uni.showToast({
|
||||
title: '登录成功'
|
||||
});
|
||||
that.login(res.data.data);
|
||||
that.$db.set('token', res.data.data.tokenHead + res.data.data.token);
|
||||
that.$db.set('userInfos', res.data.data.userInfo);
|
||||
|
||||
setTimeout(function() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 微信登录
|
||||
*/
|
||||
wxGetUserInfo1: function(res) {
|
||||
let ress = res;
|
||||
console.log('-----getUserInfo-----', ress);
|
||||
if (!ress.detail.iv) {
|
||||
uni.showToast({
|
||||
title: '您取消了授权,登录失败',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
const that = this;
|
||||
let datas = '';
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: function(loginRes) {
|
||||
console.log('=====login=====', loginRes);
|
||||
var params = {
|
||||
code: loginRes.code,
|
||||
userInfo: ress.detail.rawData,
|
||||
cloudID: ress.detail.cloudID,
|
||||
encrypted_data: ress.detail.encryptedData,
|
||||
iv: ress.detail.iv,
|
||||
source: 2,
|
||||
signature: ress.detail.signature
|
||||
};
|
||||
that.getAppletOpenId(params);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取openid
|
||||
*/
|
||||
getAppletOpenId(params) {
|
||||
var that = this;
|
||||
wx.request({
|
||||
url: Api.BASEURI + Api.index.getAppletOpenId,
|
||||
data: params,
|
||||
method: 'post',
|
||||
success: function(info) {
|
||||
// openid seession_key 存入缓存
|
||||
that.$db.set('openId', info.data.data.openid);
|
||||
that.$db.set('session_key', info.data.data.session_key);
|
||||
|
||||
that.info = {
|
||||
openid: info.data.data.openid,
|
||||
code: params.code,
|
||||
userInfo: params.userInfo,
|
||||
cloudID: params.cloudID,
|
||||
encrypted_data: params.encryptedData,
|
||||
iv: params.iv,
|
||||
source: 2,
|
||||
signature: params.signature
|
||||
};
|
||||
that.loginByWeixin(that.info);
|
||||
},
|
||||
fail: function(e) {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
},
|
||||
loginByWeixin(datas) {
|
||||
var that = this;
|
||||
wx.request({
|
||||
url: Api.BASEURI + Api.index.appletLogin_by_weixin,
|
||||
method: 'post',
|
||||
data: datas,
|
||||
success: function(res) {
|
||||
console.log('--loginByWeixin--', res);
|
||||
if (res.data.code == 500) {
|
||||
if (res.data.data == '登录失败 请先绑定手机号') {
|
||||
uni.showToast({
|
||||
title: res.data.data,
|
||||
icon: 'none'
|
||||
});
|
||||
that.isGetPhone = true;
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '登录成功'
|
||||
});
|
||||
that.login(res.data.data);
|
||||
that.$db.set('token', res.data.data.tokenHead + res.data.data.token);
|
||||
that.$db.set('userInfos', res.data.data.userInfo);
|
||||
|
||||
setTimeout(function() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 微信获取手机号
|
||||
*/
|
||||
getPhoneNumber(params) {
|
||||
var that = this;
|
||||
wx.request({
|
||||
url: Api.BASEURI + Api.index.getWxPhone,
|
||||
method: 'post',
|
||||
header: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
data: {
|
||||
openid: uni.getStorageSync('openId'),
|
||||
keyStr: uni.getStorageSync('session_key'),
|
||||
ivStr: params.detail.iv,
|
||||
encDataStr: params.detail.encryptedData
|
||||
},
|
||||
success: function(res) {
|
||||
console.log('--getPhoneNumber--', res);
|
||||
if (res.data.code == 200) {
|
||||
uni.setStorageSync('phone', res.data.data);
|
||||
that.info['phone'] = res.data.data;
|
||||
that.loginByWeixin(that.info);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
appLogin() {
|
||||
uni.getProvider({
|
||||
service: 'oauth',
|
||||
success: function(res) {
|
||||
console.log(res.provider);
|
||||
//支持微信、qq和微博等
|
||||
if (~res.provider.indexOf('weixin')) {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: function(loginRes) {
|
||||
console.log('-------获取openid(unionid)-----');
|
||||
console.log(JSON.stringify(loginRes));
|
||||
// 获取用户信息
|
||||
uni.getUserInfo({
|
||||
provider: 'weixin',
|
||||
success: function(info) {
|
||||
console.log('-------获取微信用户所有-----');
|
||||
console.log(JSON.stringify(info.userInfo));
|
||||
let logparams1 = { logs: JSON.stringify(info.userInfo) };
|
||||
Api.apiCall('get', Api.index.logs, logparams1);
|
||||
// 与服务器交互将数据提交到服务端数据库
|
||||
uni.request({
|
||||
url: Api.BASEURI + Api.index.appLogin,
|
||||
method: 'POST',
|
||||
header: { 'content-type': 'application/x-www-form-urlencoded' },
|
||||
data: {
|
||||
sex: info.userInfo.gender,
|
||||
city: info.userInfo.country + '-' + info.userInfo.province + '-' + info.userInfo.city,
|
||||
source: 1,
|
||||
openid: info.userInfo.openId,
|
||||
unionid: info.userInfo.openId,
|
||||
nickname: info.userInfo.nickName,
|
||||
headimgurl: info.userInfo.avatarUrl
|
||||
},
|
||||
success: res => {
|
||||
console.log(JSON.stringify(res));
|
||||
|
||||
// 登录成功 记录会员信息到本地
|
||||
if (res) {
|
||||
uni.setStorageSync('userInfo', res.data.userInfo);
|
||||
uni.setStorageSync('token', res.data.tokenHead + res.data.token);
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
} else {
|
||||
uni.showToast({ title: res.data });
|
||||
}
|
||||
},
|
||||
fail: e => {
|
||||
console.log(JSON.stringify(e));
|
||||
}
|
||||
});
|
||||
let logparams = { logs: JSON.stringify(info.userInfo) };
|
||||
Api.apiCall('get', Api.index.logs, logparams);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
async toLogin() {
|
||||
var that = this;
|
||||
let phoneReg = /^1[1-9][0-9]\d{8}$/;
|
||||
try {
|
||||
if (this.phone == '') {
|
||||
throw '请填写手机号';
|
||||
}
|
||||
if (!phoneReg.test(this.phone)) {
|
||||
throw '手机号格式有误';
|
||||
}
|
||||
if (this.password == '') {
|
||||
throw '请填写密码';
|
||||
}
|
||||
} catch (err) {
|
||||
this.$api.msg(err);
|
||||
return;
|
||||
}
|
||||
this.logining = false;
|
||||
let params = { phone: this.phone, password: this.password };
|
||||
let data = await Api.apiCall('post', Api.index.login, params);
|
||||
//this.logining = false;
|
||||
if (data) {
|
||||
console.log(data);
|
||||
that.login(data);
|
||||
uni.setStorageSync('userInfos', data.userInfo);
|
||||
uni.setStorageSync('token', data.tokenHead + data.token);
|
||||
console.log(uni.getStorageSync('token'));
|
||||
uni.switchTab({
|
||||
url: '/pages/index/user'
|
||||
});
|
||||
}
|
||||
},
|
||||
getuserinfoh5appwx() {
|
||||
var that = this;
|
||||
uni.login({
|
||||
success: res => {
|
||||
// res 对象格式
|
||||
|
||||
uni.getUserInfo({
|
||||
success: info => {
|
||||
// 与服务器交互将数据提交到服务端数据库
|
||||
uni.request({
|
||||
url: Api.BASEURI + Api.index.appLogin,
|
||||
method: 'POST',
|
||||
header: { 'content-type': 'application/x-www-form-urlencoded' },
|
||||
data: {
|
||||
sex: info.userInfo.gender,
|
||||
city: info.userInfo.country + '-' + info.userInfo.province + '-' + info.userInfo.city,
|
||||
|
||||
source: 1,
|
||||
unionid: info.userInfo.openId,
|
||||
openid: info.userInfo.openId,
|
||||
nickname: info.userInfo.nickName,
|
||||
headimgurl: info.userInfo.avatarUrl
|
||||
},
|
||||
success: res => {
|
||||
console.log(JSON.stringify(res.data.data));
|
||||
// 登录成功 记录会员信息到本地
|
||||
if (res) {
|
||||
console.log(res);
|
||||
that.login(res.data.data);
|
||||
uni.setStorageSync('userInfos', res.data.data.userInfo);
|
||||
uni.setStorageSync('token', res.data.data.tokenHead + res.data.data.token);
|
||||
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
} else {
|
||||
uni.showToast({ title: res.data });
|
||||
}
|
||||
},
|
||||
fail: e => {
|
||||
console.log(JSON.stringify(e));
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({ title: '微信登录授权失败' });
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({ title: '微信登录授权失败' });
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
.container {
|
||||
padding-top: 115px;
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
.wrapper {
|
||||
position: relative;
|
||||
z-index: 90;
|
||||
background: #fff;
|
||||
padding-bottom: 40upx;
|
||||
}
|
||||
.back-btn {
|
||||
position: absolute;
|
||||
left: 40upx;
|
||||
z-index: 9999;
|
||||
padding-top: var(--status-bar-height);
|
||||
top: 40upx;
|
||||
font-size: 40upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.left-top-sign {
|
||||
font-size: 120upx;
|
||||
color: $page-color-base;
|
||||
position: relative;
|
||||
left: -16upx;
|
||||
}
|
||||
.right-top-sign {
|
||||
position: absolute;
|
||||
top: 80upx;
|
||||
right: -30upx;
|
||||
z-index: 95;
|
||||
&:before,
|
||||
&:after {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 400upx;
|
||||
height: 80upx;
|
||||
background: #b4f3e2;
|
||||
}
|
||||
&:before {
|
||||
transform: rotate(50deg);
|
||||
border-radius: 0 50px 0 0;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
right: -198upx;
|
||||
top: 0;
|
||||
transform: rotate(-50deg);
|
||||
border-radius: 50px 0 0 0;
|
||||
/* background: pink; */
|
||||
}
|
||||
}
|
||||
.left-bottom-sign {
|
||||
position: absolute;
|
||||
left: -270upx;
|
||||
bottom: -320upx;
|
||||
border: 100upx solid #d0d1fd;
|
||||
border-radius: 50%;
|
||||
padding: 180upx;
|
||||
}
|
||||
.welcome {
|
||||
position: relative;
|
||||
left: 50upx;
|
||||
top: -90upx;
|
||||
font-size: 46upx;
|
||||
color: #555;
|
||||
text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.input-content {
|
||||
padding: 0 60upx;
|
||||
}
|
||||
.input-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 0 30upx;
|
||||
background: $page-color-light;
|
||||
height: 120upx;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 50upx;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tit {
|
||||
height: 50upx;
|
||||
line-height: 56upx;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-base;
|
||||
}
|
||||
input {
|
||||
height: 60upx;
|
||||
font-size: $font-base + 2upx;
|
||||
color: $font-color-dark;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 630upx;
|
||||
height: 76upx;
|
||||
line-height: 76upx;
|
||||
border-radius: 50px;
|
||||
margin-top: 70upx;
|
||||
background: $uni-color-primary;
|
||||
color: #fff;
|
||||
font-size: $font-lg;
|
||||
&:after {
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
.forget-section {
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-spec;
|
||||
text-align: center;
|
||||
margin-top: 40upx;
|
||||
}
|
||||
.register-section {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 50upx;
|
||||
width: 100%;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-base;
|
||||
text-align: center;
|
||||
text {
|
||||
color: $font-color-spec;
|
||||
margin-left: 10upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
371
mallplusui-uniapp-app/pages/public/loginCode.vue
Normal file
371
mallplusui-uniapp-app/pages/public/loginCode.vue
Normal file
@@ -0,0 +1,371 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="left-bottom-sign"></view>
|
||||
<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
|
||||
<view class="right-top-sign"></view>
|
||||
<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
|
||||
<view class="wrapper">
|
||||
<view class="left-top-sign">LOGIN</view>
|
||||
<view class="welcome">欢迎回来！</view>
|
||||
<view class="input-content">
|
||||
<view class="input-item">
|
||||
<text class="tit">手机号码</text>
|
||||
<input type="number" v-model="phone" placeholder="请输入手机号码" />
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<text class="tit">验证码</text>
|
||||
<view class="input-item-right">
|
||||
<input type="number" maxlength="6" placeholder="请输入验证码" v-model="code" @confirm="toLogin" style="width: 70%;" />
|
||||
<view class="codeText" v-if="coding == false" @click="getCode()">获取验证码</view>
|
||||
<view class="authTime" v-else>{{ auth_time }}秒</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
|
||||
<view class="forget-section" @click="toLoginPwd">密码登录</view>
|
||||
</view>
|
||||
<view class="register-section">
|
||||
还没有账号?
|
||||
<text @click="toRegist">马上注册</text>
|
||||
</view>
|
||||
<mallplusCopyright></mallplusCopyright>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import store from '@/store/index';
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
phone: '',
|
||||
code: '',
|
||||
logining: false,
|
||||
coding: false,
|
||||
auth_time: 60
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
let isWeiXin = this.$common.isWeiXinBrowser();
|
||||
if (isWeiXin) {
|
||||
this.isWeiXin = 1;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['hasLogin', 'userInfo'])
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login']),
|
||||
inputChange(e) {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
this[key] = e.detail.value;
|
||||
},
|
||||
toLoginPwd() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/public/login'
|
||||
});
|
||||
},
|
||||
navBack() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
},
|
||||
toRegist() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/public/reg'
|
||||
});
|
||||
},
|
||||
async toLogin() {
|
||||
var that = this;
|
||||
let phoneReg = /^1[1-9][0-9]\d{8}$/;
|
||||
try {
|
||||
if (this.phone == '') {
|
||||
throw '请填写手机号';
|
||||
}
|
||||
if (!phoneReg.test(this.phone)) {
|
||||
throw '手机号格式有误';
|
||||
}
|
||||
if (this.code == '') {
|
||||
throw '请填写密码';
|
||||
}
|
||||
} catch (err) {
|
||||
this.$api.msg(err);
|
||||
return;
|
||||
}
|
||||
this.logining = false;
|
||||
let params = { phone: this.phone, authCode: this.code };
|
||||
let data = await Api.apiCall('post', Api.index.loginByCode, params);
|
||||
//this.logining = false;
|
||||
if (data) {
|
||||
console.log(data);
|
||||
that.login(data)
|
||||
uni.setStorageSync('userInfos', data.userInfo);
|
||||
uni.setStorageSync('token', data.tokenHead + data.token);
|
||||
console.log(uni.getStorageSync('token'))
|
||||
uni.switchTab({
|
||||
url: '/pages/index/user'
|
||||
});
|
||||
}
|
||||
},
|
||||
// 获取验证码
|
||||
async getCode() {
|
||||
var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
|
||||
if (!myreg.test(this.phone)) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请输入正确的手机号码'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
//设置倒计时秒
|
||||
this.auth_time = 60;
|
||||
this.coding = true;
|
||||
var auth_timetimer = setInterval(() => {
|
||||
this.auth_time--;
|
||||
if (this.auth_time < 0) {
|
||||
this.coding = false;
|
||||
clearInterval(auth_timetimer);
|
||||
}
|
||||
}, 1000);
|
||||
//获取验证码
|
||||
let params = { phone: this.phone};
|
||||
let data = await Api.apiCall('post', Api.index.sendCodes, params);
|
||||
if (data) {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取openid
|
||||
*/
|
||||
getAppletOpenId(params) {
|
||||
var that = this;
|
||||
wx.request({
|
||||
url: Api.BASEURI + Api.index.getAppletOpenId,
|
||||
data: params,
|
||||
method: 'post',
|
||||
success: function(info) {
|
||||
// openid seession_key 存入缓存
|
||||
that.$db.set('openId', info.data.data.openid);
|
||||
that.$db.set('session_key', info.data.data.session_key);
|
||||
|
||||
that.info = {
|
||||
openid: info.data.data.openid,
|
||||
code: params.code,
|
||||
userInfo: params.userInfo,
|
||||
cloudID: params.cloudID,
|
||||
encrypted_data: params.encryptedData,
|
||||
iv: params.iv,
|
||||
source: 2,
|
||||
signature: params.signature
|
||||
};
|
||||
that.loginByWeixin(that.info);
|
||||
},
|
||||
fail: function(e) {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
},
|
||||
loginByWeixin(datas) {
|
||||
var that = this;
|
||||
wx.request({
|
||||
url: Api.BASEURI + Api.index.appletLogin_by_weixin,
|
||||
method: 'post',
|
||||
data: datas,
|
||||
success: function(res) {
|
||||
console.log('--loginByWeixin--', res);
|
||||
if (res.data.code == 500) {
|
||||
if (res.data.data == '手机号为空，请先绑定手机号') {
|
||||
uni.showToast({
|
||||
title: res.data.data,
|
||||
icon: 'none'
|
||||
});
|
||||
that.isGetPhone = true;
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '登录成功'
|
||||
});
|
||||
that.login(res.data.data);
|
||||
that.$db.set('token', res.data.data.tokenHead + res.data.data.token);
|
||||
that.$db.set('userInfos', res.data.data.userInfo);
|
||||
|
||||
setTimeout(function() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
.container {
|
||||
padding-top: 115px;
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
.wrapper {
|
||||
position: relative;
|
||||
z-index: 90;
|
||||
background: #fff;
|
||||
padding-bottom: 40upx;
|
||||
}
|
||||
.input-item-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.codeText {
|
||||
font-size: 28upx;
|
||||
width: 25%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fa436a;
|
||||
}
|
||||
.authTime {
|
||||
font-size: 28upx;
|
||||
width: 25%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fa436a;
|
||||
}
|
||||
.back-btn {
|
||||
position: absolute;
|
||||
left: 40upx;
|
||||
z-index: 9999;
|
||||
padding-top: var(--status-bar-height);
|
||||
top: 40upx;
|
||||
font-size: 40upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.left-top-sign {
|
||||
font-size: 120upx;
|
||||
color: $page-color-base;
|
||||
position: relative;
|
||||
left: -16upx;
|
||||
}
|
||||
.right-top-sign {
|
||||
position: absolute;
|
||||
top: 80upx;
|
||||
right: -30upx;
|
||||
z-index: 95;
|
||||
&:before,
|
||||
&:after {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 400upx;
|
||||
height: 80upx;
|
||||
background: #b4f3e2;
|
||||
}
|
||||
&:before {
|
||||
transform: rotate(50deg);
|
||||
border-radius: 0 50px 0 0;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
right: -198upx;
|
||||
top: 0;
|
||||
transform: rotate(-50deg);
|
||||
border-radius: 50px 0 0 0;
|
||||
/* background: pink; */
|
||||
}
|
||||
}
|
||||
.left-bottom-sign {
|
||||
position: absolute;
|
||||
left: -270upx;
|
||||
bottom: -320upx;
|
||||
border: 100upx solid #d0d1fd;
|
||||
border-radius: 50%;
|
||||
padding: 180upx;
|
||||
}
|
||||
.welcome {
|
||||
position: relative;
|
||||
left: 50upx;
|
||||
top: -90upx;
|
||||
font-size: 46upx;
|
||||
color: #555;
|
||||
text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.input-content {
|
||||
padding: 0 60upx;
|
||||
}
|
||||
.input-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 0 30upx;
|
||||
background: $page-color-light;
|
||||
height: 120upx;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 50upx;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tit {
|
||||
height: 50upx;
|
||||
line-height: 56upx;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-base;
|
||||
}
|
||||
input {
|
||||
height: 60upx;
|
||||
font-size: $font-base + 2upx;
|
||||
color: $font-color-dark;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 630upx;
|
||||
height: 76upx;
|
||||
line-height: 76upx;
|
||||
border-radius: 50px;
|
||||
margin-top: 70upx;
|
||||
background: $uni-color-primary;
|
||||
color: #fff;
|
||||
font-size: $font-lg;
|
||||
&:after {
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
.forget-section {
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-spec;
|
||||
text-align: center;
|
||||
margin-top: 40upx;
|
||||
}
|
||||
.register-section {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 50upx;
|
||||
width: 100%;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-base;
|
||||
text-align: center;
|
||||
text {
|
||||
color: $font-color-spec;
|
||||
margin-left: 10upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
256
mallplusui-uniapp-app/pages/public/reg.vue
Normal file
256
mallplusui-uniapp-app/pages/public/reg.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="left-bottom-sign"></view>
|
||||
<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
|
||||
<view class="right-top-sign"></view>
|
||||
<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
|
||||
<view class="wrapper">
|
||||
<view class="left-top-sign">注册</view>
|
||||
<view class="welcome">欢迎回来！</view>
|
||||
<view class="input-content">
|
||||
<view class="input-item">
|
||||
<text class="tit">手机号码</text>
|
||||
<input type="number" v-model="phone" placeholder="请输入手机号码" />
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<text class="tit">密码</text>
|
||||
<input type="password" placeholder="请输入密码" v-model="password" @confirm="reg" />
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<text class="tit">确认密码</text>
|
||||
<input type="password" placeholder="请输入确认密码" v-model="confimpassword" @confirm="reg" />
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<text class="tit">邀请码</text>
|
||||
<input type="number" v-model="invitecode" placeholder="请输入邀请码" />
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="reg" :disabled="logining">注册</button>
|
||||
|
||||
<view class="forget-section" @click="toForget">忘记密码?</view>
|
||||
</view>
|
||||
<view class="register-section">
|
||||
已经有账号?
|
||||
<text @click="toRegist">马上登录</text>
|
||||
</view>
|
||||
<mallplusCopyright></mallplusCopyright>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations } from 'vuex';
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
invitecode:'',
|
||||
phone: '',
|
||||
password: '',
|
||||
confimpassword: '',
|
||||
logining: false
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
|
||||
inputChange(e) {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
this[key] = e.detail.value;
|
||||
},
|
||||
navBack() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
},
|
||||
toForget(){
|
||||
uni.navigateTo({
|
||||
url: '../../pagesU/user/forget'
|
||||
})
|
||||
},
|
||||
toRegist() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/public/login'
|
||||
});
|
||||
},
|
||||
async reg() {
|
||||
let phoneReg = /^1[1-9][0-9]\d{8}$/;
|
||||
try {
|
||||
if (this.phone == '') {
|
||||
throw '请填写手机号';
|
||||
}
|
||||
if (!phoneReg.test(this.phone)) {
|
||||
throw '手机号格式有误';
|
||||
}
|
||||
if (this.password == '') {
|
||||
throw '请填写密码';
|
||||
}
|
||||
} catch (err) {
|
||||
this.$api.msg(err);
|
||||
return;
|
||||
}
|
||||
|
||||
let params ;
|
||||
//有推荐码的话，带上
|
||||
var invitecode = this.$db.get('invitecode')
|
||||
if (invitecode) {
|
||||
data.invitecode = invitecode
|
||||
params = { phone: this.phone, password: this.password, confimpassword: this.confimpassword ,source:3,invitecode:invitecode};
|
||||
}else {
|
||||
params = { phone: this.phone, password: this.password, confimpassword: this.confimpassword ,source:3,invitecode:this.invitecode};
|
||||
}
|
||||
let data = await Api.apiCall('post', Api.index.simpleReg, params);
|
||||
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/pages/public/login'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
.container {
|
||||
padding-top: 115px;
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 120vh;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
.wrapper {
|
||||
position: relative;
|
||||
z-index: 90;
|
||||
background: #fff;
|
||||
padding-bottom: 30upx;
|
||||
}
|
||||
.back-btn {
|
||||
position: absolute;
|
||||
left: 40upx;
|
||||
z-index: 9999;
|
||||
padding-top: var(--status-bar-height);
|
||||
top: 40upx;
|
||||
font-size: 40upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.left-top-sign {
|
||||
font-size: 120upx;
|
||||
color: $page-color-base;
|
||||
position: relative;
|
||||
left: -16upx;
|
||||
}
|
||||
.right-top-sign {
|
||||
position: absolute;
|
||||
top: 80upx;
|
||||
right: -30upx;
|
||||
z-index: 95;
|
||||
&:before,
|
||||
&:after {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 400upx;
|
||||
height: 80upx;
|
||||
background: #b4f3e2;
|
||||
}
|
||||
&:before {
|
||||
transform: rotate(50deg);
|
||||
border-radius: 0 50px 0 0;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
right: -198upx;
|
||||
top: 0;
|
||||
transform: rotate(-50deg);
|
||||
border-radius: 50px 0 0 0;
|
||||
/* background: pink; */
|
||||
}
|
||||
}
|
||||
.left-bottom-sign {
|
||||
position: absolute;
|
||||
left: -270upx;
|
||||
bottom: -320upx;
|
||||
border: 100upx solid #d0d1fd;
|
||||
border-radius: 50%;
|
||||
padding: 180upx;
|
||||
}
|
||||
.welcome {
|
||||
position: relative;
|
||||
left: 50upx;
|
||||
top: -90upx;
|
||||
font-size: 46upx;
|
||||
color: #555;
|
||||
text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.input-content {
|
||||
padding: 0 60upx;
|
||||
}
|
||||
.input-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 0 30upx;
|
||||
background: $page-color-light;
|
||||
height: 120upx;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 50upx;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tit {
|
||||
height: 50upx;
|
||||
line-height: 56upx;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-base;
|
||||
}
|
||||
input {
|
||||
height: 60upx;
|
||||
font-size: $font-base + 2upx;
|
||||
color: $font-color-dark;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 630upx;
|
||||
height: 76upx;
|
||||
line-height: 76upx;
|
||||
border-radius: 50px;
|
||||
margin-top: 70upx;
|
||||
background: $uni-color-primary;
|
||||
color: #fff;
|
||||
font-size: $font-lg;
|
||||
&:after {
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
.forget-section {
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-spec;
|
||||
text-align: center;
|
||||
margin-top: 40upx;
|
||||
}
|
||||
.register-section {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 40upx;
|
||||
width: 100%;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-base;
|
||||
text-align: center;
|
||||
text {
|
||||
color: $font-color-spec;
|
||||
margin-left: 10upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user