xk-doctor-wx/components/doctor-login/doctor-login.vue

<template>
	<view class="container safe-area-inset-bottom">
		<view class="title">欢迎登录</view>
		<view class="box">
			<view class="info">
				<view class="pwd">
					<d-input
						:maxlength="11"
						height="96"
						v-model="form.mobile"
						:prefixIcon="require('../../static/image/act.png')"
						borderRadius="96rpx"
						prefixIconSize="40rpx"
						placeholder="请输入手机号"
						:placeholder-style="{ fontSize: '32rpx' }"
						:custom-style="{ fontSize: '32rpx', paddingLeft: '60rpx' }"
					/>
				</view>

				<view class="pwd">
					<d-input
						height="96"
						v-model="form.password"
						type="password"
            :prefixIcon="require('../../static/image/pwd.png')"
						password
            borderRadius="96rpx"
            prefixIconSize="40rpx"
						placeholder="请输入登录密码"
						:placeholder-style="{ fontSize: '32rpx' }"
						:custom-style="{ fontSize: '32rpx', paddingLeft: '60rpx' }"
					/>
				</view>

				<view class="pwd">
					<u-field v-model="smsCode"
                   placeholder="请填写验证码"
                   :prefixIcon="require('../../static/image/pwd.png')"
                   :placeholder-style="{ fontSize: '32rpx', paddingLeft: '60rpx' }"
                   :custom-style="{ fontSize: '32rpx', paddingLeft: '60rpx' }"
          >
            <template slot="icon">
<!--              <image src="../../../../static/image/pwd.png"></image>-->
              <u-icon
                  size="40"
                  name="chat"
                  style="margin-left: 15rpx"
                  @click="form.check = !form.check"
              ></u-icon>
            </template>
						<u-button size="mini" slot="right" @click="getCode">{{ codeText }}</u-button>
					</u-field>
					<u-verification-code ref="uCode" @change="codeChange" class="code"></u-verification-code>
				</view>

				<view class="flex-row" style="margin-top: 88rpx;">
					<u-icon
						size="35"
						:color="form.check ? '#6ACDBB' : '#e0fdff'"
						name="checkmark-circle-fill"
						@click="form.check = !form.check"
					></u-icon>
					<view class="agreement">
						我已阅读并同意
						<text @click="$go('/subPackages/sub_agreement/agreement?type=service_user_agreement')">《用户服务协议》</text>
						和
						<text @click="$go('/subPackages/sub_agreement/agreement?type=service_privacy_agreement')">《隐私权政策》</text>
					</view>
				</view>

				<view class="btn">
					<u-button :throttle-time="20" shape="circle" @click="submitLogin" :ripple="true" :loading="loading">
						登录
					</u-button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
import { sendDoctorWxCode, doctorWxLogin } from '@/api/doctorAuth.js';
import {
	saveLoginSession,
	fetchProfileAfterLogin,
	navigateAfterLogin,
} from '@/utils/loginSession.js';
import { buildDoctorWxAuthExtra } from '@/utils/doctorWxAuth.js';

export default {
	name: 'DoctorLogin',
	data() {
		return {
			form: {
				mobile: '',
				password: '',
				check: false,
			},
			smsCode: '',
			codeText: '',
			loading: false,
			pendingLoginPayload: null,
		};
	},
	methods: {
		codeChange(text) {
			this.codeText = text;
		},
		getCode() {
			if (!this.$refs.uCode.canGetCode) {
				this.$u.toast('倒计时结束后再发送');
				return;
			}
			if (!this.form.mobile) {
				this.$toast('请输入手机号');
				return;
			}
			if (!this.form.password) {
				this.$toast('请输入密码');
				return;
			}
			uni.showLoading({ title: '正在获取验证码' });
			sendDoctorWxCode(this.form.mobile, this.form.password)
				.then((res) => {
					if (res.code === 0) {
						this.$refs.uCode.start();
						if (res.result && res.result.code) {
							this.smsCode = res.result.code;
						}
					}
				})
				.finally(() => {
					uni.hideLoading();
				});
		},
		submitLogin() {
			if (!this.form.mobile) {
				this.$toast('请输入手机号');
				return;
			}
			if (!this.smsCode) {
				this.$toast('请输入验证码');
				return;
			}
			if (!this.form.check) {
				this.$toast('请勾选协议');
				return;
			}
			this.doLogin({});
		},
		doLogin(extra = {}) {
			this.loading = true;
			const payload = {
				phone: this.form.mobile,
				password: this.form.password,
				code: this.smsCode,
				...extra,
			};
			doctorWxLogin(payload)
				.then((res) => {
					if (res.code !== 0 || !res.result) {
						return Promise.reject(new Error(res.message || res.msg || '登录失败'));
					}
					const result = res.result;
					if (result.need_select) {
						const accounts = Array.isArray(result.accounts) ? result.accounts : [];
						if (!accounts.length) {
							return Promise.reject(new Error('请选择登录账号'));
						}
						this.pendingLoginPayload = payload;
						this.loading = false;
						return new Promise((resolve) => {
							this.$nextTick(() => {
								this.$emit('need-select', {
									accounts,
									defaultAccountId: result.default_account_id,
									defaultAccountType: result.default_account_type,
								});
								resolve(null);
							});
						});
					}
					return this.finishLogin(result);
				})
				.catch((err) => {
					this.$toast(err.message || '登录失败');
				})
				.finally(() => {
					this.loading = false;
				});
		},
		onAccountPicked(account) {
			this.doLogin(buildDoctorWxAuthExtra(account));
		},
		async finishLogin(result) {
			saveLoginSession(result);
			await fetchProfileAfterLogin(result);
			this.$toast('登录成功');
			if (result.account_type !== 'admin') {
				uni.$emit('user-login');
			}
			setTimeout(() => {
				navigateAfterLogin(result);
			}, 400);
		},
	},
};
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	height: 100vh;
	padding-bottom: env(safe-area-inset-bottom);
}

.title {
	width: 750rpx;
	padding-top: 200rpx;
	text-align: center;
	font-size: 48rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #0D111A;
	background: linear-gradient(180deg, #EAF2FF 0%, #FFFFFF 100%);
	margin-bottom: 60rpx;
}

.flex-row {
	display: flex;
	flex-direction: row;
	margin-bottom: 34rpx;

	.agreement {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #6C7380;
		margin-left: 16rpx;

		text {
			color: #2979FF;
			size: 24rpx;
		}
	}
}

.box {
	box-sizing: border-box;
	padding: 0 52rpx;
}

.code {
	font-size: 32rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #1777FF;
	background: #F9FAFB;
}

.pwd {
	width: 646rpx;
	height: 96rpx;
	background: #F9FAFB;
	border-radius: 48rpx 48rpx 48rpx 48rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #CCCCCC;
	margin: 0rpx 0 30rpx;

	::v-deep button {
		color: #1777FF;
		border: 0;
	}
}

.btn {
	::v-deep button {
		width: 648rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #6ACDBB;
		border: 0;
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}
}
</style>