254 lines
6.6 KiB
Vue
254 lines
6.6 KiB
Vue
<!-- 服务商登录页 -->
|
|
<template>
|
|
<view class="page">
|
|
<view class="login-now f-56 fw-5 c333">
|
|
立即登录
|
|
</view>
|
|
<view class="login-r f-32 fw-4 color-c">
|
|
登录以实现您的需求
|
|
</view>
|
|
<view class="">
|
|
<u-form class="form-box" :model="form" :rules="rules" ref="uForm">
|
|
<u-form-item border-bottom>
|
|
<u-input type="number" disabledColor="#ffffff" disabled maxlength="11" placeholder="服务商类型" placeholder-class="placeholder-class" border="none" v-model="identityName">
|
|
<view class="flex" slot="suffix" @click="identityShow = true">
|
|
<text class="f-30 c111">{{ identityName }}</text>
|
|
<u-icon name="arrow-right" color="#999999" size="12"></u-icon>
|
|
</view>
|
|
</u-input>
|
|
</u-form-item>
|
|
<u-form-item class="mt-44" border-bottom prop="phone">
|
|
<u-input type="number" maxlength="11" placeholder="请输入手机号码" placeholder-class="placeholder-class" border="none" v-model="form.phone"></u-input>
|
|
</u-form-item>
|
|
<u-form-item border-bottom class="mt-44" prop="captcha">
|
|
<u-input type="number" maxlength="6" placeholder="请输入验证码" placeholder-class="placeholder-class" border="none" v-model="form.captcha" >
|
|
<text class="f-30 c111" v-show="!codeStatus" slot="suffix">{{resendCodeTime}}秒重新获取</text>
|
|
<text class="f-30 c111" v-show="codeStatus" slot="suffix" @click="getCode">获取验证码</text>
|
|
</u-input>
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
<view class="agreement-box flex align-center" @click="agreement">
|
|
<view class="frame flex justify-center align-center" :style="agree ? 'background: #13AFA8;' : 'border: 2rpx solid #999999'">
|
|
<u-icon v-show="agree" name="checkmark" size="8" color="#fff"></u-icon>
|
|
</view>
|
|
<view class="f-26 c444">
|
|
我已阅读并同意<text class="c-primary">{{' 用户协议 '}}</text>和<text class="c-primary">{{' 隐私政策 '}}</text>
|
|
</view>
|
|
</view>
|
|
<u-button class="login-btn mt-8" color="#13AFA8" shape="circle" @click="loginSumbit">登录</u-button>
|
|
<view class="order-login fixed f-28 c-primary fw-5 text-center">
|
|
<text class="serve-login" @click="gotoServeLogin">司机端登录</text>
|
|
<u-safe-bottom></u-safe-bottom>
|
|
</view>
|
|
<u-picker
|
|
:show="identityShow"
|
|
:columns="identityList"
|
|
title="请选择"
|
|
keyName="text"
|
|
confirmColor="#13AFA8"
|
|
cancelColor="#999999"
|
|
@confirm="confirm"
|
|
@cancel="cancel"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getSendCode } from '@/api/login';
|
|
export default {
|
|
data() {
|
|
return {
|
|
agree: false,
|
|
codeStatus: true,
|
|
identityShow: false,
|
|
resendCodeTime: 60,
|
|
timer: null,
|
|
identityName: '车商',
|
|
identityList: [[
|
|
// {keyName: 'platform', text: '平台'},
|
|
{keyName: 'repair', text: '维修店'},
|
|
{keyName: 'carDealers', text: '车商'}
|
|
]],
|
|
form: {
|
|
phone: '18739735805',
|
|
captcha: '999999',
|
|
sid: 'carDealers'
|
|
},
|
|
rules: {
|
|
phone: [
|
|
{
|
|
required: true,
|
|
message: '请输入手机号',
|
|
trigger: ['change','blur'],
|
|
},
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
return uni.$u.test.mobile(value);
|
|
},
|
|
message: '手机号码不正确',
|
|
trigger: ['blur'],
|
|
}
|
|
],
|
|
captcha: {
|
|
type: 'string',
|
|
required: true,
|
|
len: 6,
|
|
message: '请填写6位验证码',
|
|
trigger: ['blur']
|
|
},
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
confirm(e) {
|
|
console.log(e.value[0].text);
|
|
this.identityName = e.value[0].text
|
|
this.form.sid = e.value[0].keyName
|
|
this.identityShow = false
|
|
},
|
|
cancel() {
|
|
this.identityShow = false
|
|
},
|
|
selectClick(e) {
|
|
console.log(e);
|
|
},
|
|
agreement() {
|
|
console.log(this.agree);
|
|
this.agree = !this.agree
|
|
console.log(this.agree);
|
|
},
|
|
// 切换登录
|
|
gotoServeLogin() {
|
|
uni.reLaunch({
|
|
url: '/pages/login/driver-login'
|
|
})
|
|
},
|
|
// 获取验证码
|
|
getCode() {
|
|
if(this.form.phone) {
|
|
if(this.codeStatus) {
|
|
this.codeStatus = false
|
|
this.timer = setInterval(() => {
|
|
this.resendCodeTime--
|
|
if(this.resendCodeTime == 0) {
|
|
this.codeStatus = true
|
|
clearInterval(this.timer)
|
|
}
|
|
}, 1000)
|
|
getSendCode(this.form).then(res => {
|
|
console.log(res);
|
|
}).catch(err => {
|
|
console.log('请求失败', err);
|
|
})
|
|
}
|
|
|
|
} else {
|
|
uni.$u.toast('请先输入手机号')
|
|
}
|
|
},
|
|
// 登录
|
|
loginSumbit() {
|
|
console.log('登录');
|
|
if(this.agree) {
|
|
uni.showLoading({
|
|
title: '登录中'
|
|
})
|
|
this.$refs.uForm.validate().then(res => {
|
|
if(this.form.sid == 'platform') {
|
|
uni.hideLoading()
|
|
uni.$u.toast('平台模块开发中')
|
|
} else if (this.form.sid == 'repair') {
|
|
this.$store.dispatch('RepairLogin', this.form).then(res => {
|
|
uni.hideLoading()
|
|
uni.$u.toast('登录成功')
|
|
uni.setStorageSync('userType', 'repair')
|
|
uni.switchTab({
|
|
url: '/pages/repair/tabbar/repair'
|
|
})
|
|
})
|
|
} else if ( this.form.sid == 'carDealers') {
|
|
this.$store.dispatch('CarShopLogin', this.form).then(res => {
|
|
console.log(res,'车商登录');
|
|
uni.hideLoading()
|
|
// uni.$u.toast('车商模块开发中')
|
|
uni.setStorageSync('userType', 'carDealers')
|
|
uni.switchTab({
|
|
url: '/pages/carShop/maintainOrder/maintainOrder'
|
|
})
|
|
})
|
|
}
|
|
// phoneLogin(this.form).then(res => {
|
|
// console.log(res);
|
|
// }).catch(err => {
|
|
// console.log(err);
|
|
// })
|
|
}).catch(err => {
|
|
uni.$u.toast('信息填入错误')
|
|
})
|
|
} else {
|
|
uni.$u.toast('请先阅读用并同意勾选户协议和隐私协议')
|
|
}
|
|
}
|
|
},
|
|
onReady() {
|
|
this.$refs.uForm.setRules(this.rules)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
padding: 290rpx 60rpx;
|
|
}
|
|
.login-now {
|
|
line-height: 84rpx;
|
|
}
|
|
.login-r {
|
|
margin-top: 8rpx;
|
|
line-height: 48rpx;
|
|
}
|
|
.form-box {
|
|
margin-top: 42rpx;
|
|
width: 100%;
|
|
}
|
|
.agreement-box {
|
|
margin-top: 32rpx;
|
|
line-height: 36rpx;
|
|
.frame {
|
|
margin-right: 14rpx;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.login-btn {
|
|
width: 630rpx;
|
|
height: 96rpx;
|
|
border-radius: 50rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
}
|
|
.order-login {
|
|
bottom: 24rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
.serve-login {
|
|
border-bottom: 1rpx solid #13AFA8;
|
|
}
|
|
}
|
|
.color-c {
|
|
color: #CDCDCD;
|
|
}
|
|
.mt-44 {
|
|
margin-top: 44rpx;
|
|
}
|
|
.placeholder-class {
|
|
font-size: 30rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
color: #A4A7A6;
|
|
}
|
|
</style>
|