main
liudan
4 months ago
parent
c4d4c58bba
commit
037a86c086
@ -0,0 +1,557 @@ |
|||||||
|
<template> |
||||||
|
<view class="wrapper" :style="colorStyle"> |
||||||
|
<view class="page-form"> |
||||||
|
<view style="margin:24rpx;border-radius:20rpx;overflow: hidden;"> |
||||||
|
<view class="item"> |
||||||
|
<view class="itemTitle"> |
||||||
|
手机号码 |
||||||
|
</view> |
||||||
|
<input type='number' :placeholder='$t(`填写手机号码`)' placeholder-class='placeholder' v-model="phone" |
||||||
|
:maxlength="11"></input> |
||||||
|
</view> |
||||||
|
<view class="item acea-row row-between-wrapper"> |
||||||
|
<view class="itemTitle"> |
||||||
|
短信验证码 |
||||||
|
</view> |
||||||
|
<input type='number' :placeholder='$t(`填写验证码`)' placeholder-class='placeholder' :maxlength="6" |
||||||
|
class="codeIput" v-model="captcha"></input> |
||||||
|
<view class="line"> |
||||||
|
|
||||||
|
</view> |
||||||
|
<button class="code font-num" :class="disabled === true ? 'on' : ''" :disabled='disabled' @click="code"> |
||||||
|
{{ text }} |
||||||
|
</button> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="newPsd" style="margin:24rpx;border-radius:20rpx;overflow: hidden;"> |
||||||
|
<view class="item"> |
||||||
|
<view class="itemTitle"> |
||||||
|
新密码 |
||||||
|
</view> |
||||||
|
<input :placeholder='$t(`请输入`)' placeholder-class='placeholder' v-model="newPsd" |
||||||
|
></input> |
||||||
|
</view> |
||||||
|
<view class="item"> |
||||||
|
<view class="itemTitle"> |
||||||
|
确认密码 |
||||||
|
</view> |
||||||
|
<input type='number' :placeholder='$t(`请输入`)' placeholder-class='placeholder' v-model="renewPsd" |
||||||
|
></input> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="btn" @click="submitData"> |
||||||
|
确认 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="protocol" v-if="pageType == 0 && !canGetPrivacySetting"> |
||||||
|
<checkbox-group @click.stop='ChangeIsDefault'> |
||||||
|
<checkbox :class="inAnimation?'trembling':''" @animationend='inAnimation=false' |
||||||
|
:checked="protocol ? true : false" /> <text @click.stop='ChangeIsDefault'>{{$t(`已阅读并同意`)}}</text> |
||||||
|
<text class="main-color" @click.stop="privacy(4)">{{$t(`《用户协议》`)}}</text> |
||||||
|
{{$t(`与`)}}<text class="main-color" @click.stop="privacy(3)">{{$t(`《隐私协议》`)}}</text> |
||||||
|
</checkbox-group> |
||||||
|
</view> |
||||||
|
<Verify @success="success" :captchaType="'clickWord'" :imgSize="{ width: '330px', height: '155px' }" |
||||||
|
ref="verify"></Verify> |
||||||
|
<editUserModal :isShow="isShow" @closeEdit="closeEdit" @editSuccess="editSuccess"> |
||||||
|
</editUserModal> |
||||||
|
<!-- #ifdef MP --> |
||||||
|
<privacyAgreementPopup v-if="canGetPrivacySetting" @onReject="onReject" @onAgree="onAgree"> |
||||||
|
</privacyAgreementPopup> |
||||||
|
<!-- #endif --> |
||||||
|
|
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
const app = getApp(); |
||||||
|
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'; |
||||||
|
import sendVerifyCode from "@/mixins/SendVerifyCode"; |
||||||
|
import colors from '@/mixins/color.js'; |
||||||
|
import editUserModal from '@/components/eidtUserModal/index.vue' |
||||||
|
import privacyAgreementPopup from '@/components/privacyAgreementPopup/index.vue' |
||||||
|
import { |
||||||
|
bindingUserPhone, |
||||||
|
verifyCode, |
||||||
|
registerVerify, |
||||||
|
updatePhone |
||||||
|
} from '@/api/api.js'; |
||||||
|
import { |
||||||
|
loginMobile, |
||||||
|
getCodeApi, |
||||||
|
getUserInfo, |
||||||
|
phoneSilenceAuth |
||||||
|
} from "@/api/user.js"; |
||||||
|
import { |
||||||
|
phoneLogin, |
||||||
|
wechatBindingPhone |
||||||
|
} from '@/api/public.js' |
||||||
|
import Routine from '@/libs/routine'; |
||||||
|
import Verify from '../components/verify/index.vue'; |
||||||
|
import Cache from '@/utils/cache'; |
||||||
|
export default { |
||||||
|
mixins: [sendVerifyCode, colors], |
||||||
|
components: { |
||||||
|
Verify, |
||||||
|
editUserModal, |
||||||
|
privacyAgreementPopup |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
statusBarHeight: statusBarHeight, |
||||||
|
pageType: 1, // 0 登录 1 绑定手机 |
||||||
|
phone: '', |
||||||
|
captcha: '', |
||||||
|
text: '获取验证码', |
||||||
|
isShow: false, |
||||||
|
protocol: false, |
||||||
|
inAnimation: false, |
||||||
|
authKey: "", |
||||||
|
backUrl: "", |
||||||
|
pageTitle: '绑定手机号', |
||||||
|
configData: Cache.get('BASIC_CONFIG'), |
||||||
|
canGetPrivacySetting: false, |
||||||
|
newPsd:null, |
||||||
|
renewPsd:null, |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad(options) { |
||||||
|
if (options.authKey) { |
||||||
|
this.authKey = options.authKey |
||||||
|
} |
||||||
|
// #ifdef MP |
||||||
|
if (wx.getPrivacySetting) { |
||||||
|
this.canGetPrivacySetting = true |
||||||
|
} |
||||||
|
// #endif |
||||||
|
|
||||||
|
this.backUrl = options.backUrl || '' |
||||||
|
if (options.pageType) { |
||||||
|
this.pageType = options.pageType || 1 |
||||||
|
this.pageTitle = options.pageType == 1 ? '绑定手机号' : '手机号登录' |
||||||
|
} |
||||||
|
let pages = getCurrentPages(); |
||||||
|
let prePage = pages[pages.length - 2]; |
||||||
|
if (prePage && prePage.route == 'pages/order_addcart/order_addcart') { |
||||||
|
this.isHome = true; |
||||||
|
} else { |
||||||
|
this.isHome = false; |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
onAgree() { |
||||||
|
this.protocol = true |
||||||
|
}, |
||||||
|
submitData() { |
||||||
|
let that = this; |
||||||
|
if (this.pageType == 0) { |
||||||
|
this.isLogin() |
||||||
|
return |
||||||
|
} |
||||||
|
if (!this.rules()) return |
||||||
|
if (!this.authKey) { |
||||||
|
let key = this.$Cache.get('snsapiKey'); |
||||||
|
this.phoneAuth(key) |
||||||
|
} else { |
||||||
|
this.phoneAuth(this.authKey) |
||||||
|
} |
||||||
|
}, |
||||||
|
rules() { |
||||||
|
let that = this; |
||||||
|
if (!this.protocol && this.pageType == 0) { |
||||||
|
uni.showToast({ |
||||||
|
title: this.$t('请先阅读并同意协议'), |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}); |
||||||
|
return false |
||||||
|
} |
||||||
|
if (!that.phone) { |
||||||
|
that.$util.Tips({ |
||||||
|
title: that.$t(`请填写手机号码`) |
||||||
|
}); |
||||||
|
return false |
||||||
|
} |
||||||
|
if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))) { |
||||||
|
that.$util.Tips({ |
||||||
|
title: that.$t(`请输入正确的手机号码`) |
||||||
|
}); |
||||||
|
return false |
||||||
|
} |
||||||
|
if (!that.captcha) { |
||||||
|
return that.$util.Tips({ |
||||||
|
title: that.$t(`请填写验证码`) |
||||||
|
}); |
||||||
|
return false |
||||||
|
} |
||||||
|
return true |
||||||
|
}, |
||||||
|
isLogin() { |
||||||
|
if (!this.rules()) return |
||||||
|
|
||||||
|
uni.showLoading({ |
||||||
|
title: this.$t(`正在登录中`) |
||||||
|
}); |
||||||
|
Routine.getCode() |
||||||
|
.then(code => { |
||||||
|
phoneLogin({ |
||||||
|
code, |
||||||
|
spread_spid: app.globalData.spid, |
||||||
|
spread_code: app.globalData.code, |
||||||
|
phone: this.phone, |
||||||
|
captcha: this.captcha, |
||||||
|
}).then(res => { |
||||||
|
uni.hideLoading(); |
||||||
|
let time = res.data.expires_time - this.$Cache.time(); |
||||||
|
this.$store.commit('LOGIN', { |
||||||
|
token: res.data.token, |
||||||
|
time: time |
||||||
|
}); |
||||||
|
this.getUserInfo(res.data.bindName); |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
uni.hideLoading(); |
||||||
|
uni.showToast({ |
||||||
|
title: err, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}); |
||||||
|
}); |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
console.log(err) |
||||||
|
}); |
||||||
|
}, |
||||||
|
phoneAuth(key) { |
||||||
|
uni.showLoading({ |
||||||
|
title: this.$t(`正在登录中`) |
||||||
|
}); |
||||||
|
let met |
||||||
|
// #ifdef MP |
||||||
|
met = phoneLogin |
||||||
|
// #endif |
||||||
|
// #ifndef MP |
||||||
|
met = wechatBindingPhone |
||||||
|
// #endif |
||||||
|
met({ |
||||||
|
phone: this.phone, |
||||||
|
captcha: this.captcha, |
||||||
|
key |
||||||
|
}).then(res => { |
||||||
|
let time = res.data.expires_time - this.$Cache.time(); |
||||||
|
this.$store.commit('LOGIN', { |
||||||
|
token: res.data.token, |
||||||
|
time: time |
||||||
|
}); |
||||||
|
this.getUserInfo(res.data.bindName); |
||||||
|
}).catch(error => { |
||||||
|
uni.hideLoading() |
||||||
|
this.$util.Tips({ |
||||||
|
title: error |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
/** |
||||||
|
* 获取个人用户信息 |
||||||
|
*/ |
||||||
|
getUserInfo(new_user) { |
||||||
|
let that = this; |
||||||
|
getUserInfo().then(res => { |
||||||
|
uni.hideLoading(); |
||||||
|
that.userInfo = res.data; |
||||||
|
uni.setStorageSync('mark',res.data.renzheng.company_name) |
||||||
|
that.$store.commit('SETUID', res.data.uid); |
||||||
|
that.$store.commit('UPDATE_USERINFO', res.data); |
||||||
|
if (new_user) { |
||||||
|
this.isShow = true |
||||||
|
} else { |
||||||
|
// // #ifdef MP |
||||||
|
// that.$util.Tips({ |
||||||
|
// title: that.$t(`登录成功`), |
||||||
|
// icon: 'success' |
||||||
|
// }, { |
||||||
|
// tab: 3, |
||||||
|
// url: this.configData.wechat_auth_switch ? 2 : 1 |
||||||
|
// }); |
||||||
|
// // #endif |
||||||
|
// // #ifndef MP |
||||||
|
// that.$util.Tips({ |
||||||
|
// title: that.$t(`登录成功`), |
||||||
|
// icon: 'success' |
||||||
|
// }, { |
||||||
|
// url: this.backUrl || 'pages/user/index' |
||||||
|
// }); |
||||||
|
// // #endif |
||||||
|
|
||||||
|
if(res.data.renzheng.status==1){ |
||||||
|
uni.showToast({ |
||||||
|
title: '登录成功', |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}); |
||||||
|
uni.switchTab({ |
||||||
|
url:"/pages/user/index", |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
uni.showToast({ |
||||||
|
title: '登录成功', |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}); |
||||||
|
uni.redirectTo({ |
||||||
|
url:"/pages/users/shiming/index" |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
success(data) { |
||||||
|
this.$refs.verify.hide() |
||||||
|
let that = this; |
||||||
|
verifyCode().then(res => { |
||||||
|
registerVerify(that.phone, 'reset', res.data.key, this.captchaType, data.captchaVerification) |
||||||
|
.then(res => { |
||||||
|
that.$util.Tips({ |
||||||
|
title: res.msg |
||||||
|
}); |
||||||
|
that.sendCode(); |
||||||
|
}).catch(err => { |
||||||
|
return that.$util.Tips({ |
||||||
|
title: err |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
/** |
||||||
|
* 发送验证码 |
||||||
|
* |
||||||
|
*/ |
||||||
|
async code() { |
||||||
|
let that = this; |
||||||
|
if (!that.phone) return that.$util.Tips({ |
||||||
|
title: that.$t(`请填写手机号码`) |
||||||
|
}); |
||||||
|
if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))) return that.$util.Tips({ |
||||||
|
title: that.$t(`请输入正确的手机号码`) |
||||||
|
}); |
||||||
|
this.$refs.verify.show(); |
||||||
|
return; |
||||||
|
}, |
||||||
|
ChangeIsDefault() { |
||||||
|
this.$set(this, 'protocol', !this.protocol); |
||||||
|
}, |
||||||
|
closeEdit() { |
||||||
|
this.isShow = false |
||||||
|
this.$util.Tips({ |
||||||
|
title: this.$t(`登录成功`), |
||||||
|
icon: 'success' |
||||||
|
}, { |
||||||
|
tab: 3, |
||||||
|
url: 2 |
||||||
|
}); |
||||||
|
}, |
||||||
|
editSuccess() { |
||||||
|
this.isShow = false |
||||||
|
}, |
||||||
|
back() { |
||||||
|
uni.navigateBack({ |
||||||
|
delta: this.configData.wechat_auth_switch ? 2 : 1 |
||||||
|
}) |
||||||
|
}, |
||||||
|
privacy(type) { |
||||||
|
uni.navigateTo({ |
||||||
|
url: "/pages/users/privacy/index?type=" + type |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.wrapper { |
||||||
|
background-color: #F5F6F7; |
||||||
|
min-height: 100vh; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.bag { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 750rpx; |
||||||
|
height: 460rpx; |
||||||
|
background: var(--view-linear); |
||||||
|
} |
||||||
|
|
||||||
|
.page-msg { |
||||||
|
padding-top: 160rpx; |
||||||
|
margin-left: 72rpx; |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 48rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #333333; |
||||||
|
line-height: 68rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.tip { |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #333333; |
||||||
|
line-height: 40rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.page-form { |
||||||
|
|
||||||
|
|
||||||
|
.item { |
||||||
|
// width: 100%; |
||||||
|
/* height: 88rpx; */ |
||||||
|
// background: #F5F5F5; |
||||||
|
/* border-radius: 45rpx; */ |
||||||
|
padding: 40rpx 30rpx; |
||||||
|
// margin-bottom: 32rpx; |
||||||
|
display: flex; |
||||||
|
border-bottom: 1px solid #EAEAEA; |
||||||
|
background-color: #fff; |
||||||
|
.itemTitle{ |
||||||
|
width:200rpx; |
||||||
|
} |
||||||
|
input { |
||||||
|
flex:1; |
||||||
|
height: 100%; |
||||||
|
font-size: 32rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.placeholder { |
||||||
|
color: #BBBBBB; |
||||||
|
font-size: 28rpx; |
||||||
|
} |
||||||
|
|
||||||
|
input.codeIput { |
||||||
|
width: 300rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.line { |
||||||
|
width: 2rpx; |
||||||
|
height: 28rpx; |
||||||
|
background: #CCCCCC; |
||||||
|
} |
||||||
|
|
||||||
|
.code { |
||||||
|
font-size: 28rpx; |
||||||
|
color: var(--view-theme); |
||||||
|
background-color: rgba(255, 255, 255, 0); |
||||||
|
} |
||||||
|
|
||||||
|
.code.on { |
||||||
|
color: #BBBBBB !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.btn { |
||||||
|
margin: 80rpx 24rpx; |
||||||
|
height: 98rpx; |
||||||
|
background: var(--view-theme); |
||||||
|
border-radius: 200rpx 200rpx 200rpx 200rpx; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
font-size: 32rpx; |
||||||
|
font-family: PingFang SC-Regular, PingFang SC; |
||||||
|
font-weight: 400; |
||||||
|
color: #FFFFFF; |
||||||
|
line-height: 44rpx; |
||||||
|
|
||||||
|
letter-spacing: 1px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.title-bar { |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: 34rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #333333; |
||||||
|
line-height: 48rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.icon { |
||||||
|
position: absolute; |
||||||
|
left: 30rpx; |
||||||
|
top: 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: 80rpx; |
||||||
|
height: 80rpx; |
||||||
|
|
||||||
|
image { |
||||||
|
width: 35rpx; |
||||||
|
height: 35rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.protocol { |
||||||
|
position: fixed; |
||||||
|
bottom: 52rpx; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
margin: 0 auto; |
||||||
|
color: #999999; |
||||||
|
font-size: 24rpx; |
||||||
|
line-height: 22rpx; |
||||||
|
text-align: center; |
||||||
|
bottom: calc(52rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/ |
||||||
|
bottom: calc(52rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/ |
||||||
|
|
||||||
|
.main-color { |
||||||
|
color: var(--view-theme); |
||||||
|
} |
||||||
|
|
||||||
|
.trembling { |
||||||
|
animation: shake 0.6s; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/deep/ uni-checkbox .uni-checkbox-input { |
||||||
|
width: 28rpx; |
||||||
|
height: 28rpx; |
||||||
|
} |
||||||
|
|
||||||
|
/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before { |
||||||
|
font-size: 24rpx; |
||||||
|
} |
||||||
|
|
||||||
|
/deep/ uni-checkbox .uni-checkbox-wrapper { |
||||||
|
margin-bottom: 1px; |
||||||
|
} |
||||||
|
|
||||||
|
/*checkbox 选项框大小 */ |
||||||
|
/deep/ checkbox .wx-checkbox-input { |
||||||
|
width: 28rpx; |
||||||
|
height: 28rpx; |
||||||
|
} |
||||||
|
|
||||||
|
/*checkbox选中后样式 */ |
||||||
|
/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked { |
||||||
|
background: white; |
||||||
|
} |
||||||
|
|
||||||
|
/*checkbox选中后图标样式 */ |
||||||
|
/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked::before { |
||||||
|
width: 28rpx; |
||||||
|
height: 28rpx; |
||||||
|
line-height: 28rpx; |
||||||
|
text-align: center; |
||||||
|
font-size: 22rpx; |
||||||
|
background: transparent; |
||||||
|
transform: translate(-50%, -50%) scale(1); |
||||||
|
-webkit-transform: translate(-50%, -50%) scale(1); |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue