tuanfeng-shop-user/pages_category_page2/userModule/accountLogin.vue

<template>
	<!-- 登录 -->
	<!-- flex-items-plus 去除了这个类名 相当于flex的两个居中操作 alignItems justifyContent -->
	<view class="container flex-column">
		<global-loading />
		<view style="padding: 30upx 20upx 0;color: #000000;">
			<JHeader width="50" height="50" title=""></JHeader>
		</view>
		<view class="register" @click="$jump('/pages_category_page2/userModule/register', '', 0, 'reLaunch')">
			注册
		</view>
		<view class="PhoneAuthentication">
			<text class="textRL">手机号快捷登录</text>
			<text class="textTips">请先注册账号再登录</text>
		</view>
		<view class="LoginForm">
			<view class="iphoneNum-box">
				<text class="labels">手机号</text>
				<input v-model="loginQuery.account" type="texts" placeholder="请输入手机号">
			</view>
			<view v-if="loginType === 'password'" class="iphoneNum-box">
				<text class="labels">密码</text>
				<input v-model="loginQuery.password" type="texts" placeholder="请输入密码">
			</view>
			<view v-else-if="loginType === 'verificationCode'" class="iphoneNum-box">
				<text class="labels">验证码</text>
				<input v-model="loginQuery.verificationCode" type="texts" placeholder="请输入验证码">
				<view v-if="!disabled" class="getcode" @click="codede">
					{{ text }}
				</view>
				<view v-else class="awaitCode">
					{{ text }}
				</view>
			</view>
			<view class="ReadingAgreement">
				<radio
					style="transform:scale(0.8)" color="#CE2601" :checked="isReadAgreement"
					@click="isReadAgreement = !isReadAgreement"
				/>
				<view class="Agreement">
					我已阅读并同意<text class="redText">《巨蜂商城用户服务协议》</text>以及<text class="redText">《隐私政策》</text>
				</view>
			</view>
		</view>
		<tui-button
			:disabled="!isReadAgreement" type="danger" width="650rpx" margin="0 auto"
			height="82rpx"
			style="margin-top: 60rpx;" @click="login"
		>
			立即登录
		</tui-button>
		<view class="problem">
			<text @click="$jump('/pages_category_page2/userModule/register', '', 0, 'reLaunch')">没有账号？<text class="redText">去注册</text></text>
			<text>无法接收验证码？</text>
		</view>
	</view>
</template>

<script>
import sendVerifyCode from '@/mixins/SendVerifyCode'
import { J_STORAGE_KEY } from '../../config/constant'
const NET = require('../../utils/request')
const API = require('../../config/api')
import { getVerifyCodeApi } from '../../api/user'

export default {
	name: 'AccountLogin',
	mixins: [ sendVerifyCode ],
	data() {
		return {
			loginType: '', // password,verificationCode
			loginQuery: {
				account: '',
				verificationCode: '',
				salesId: '',
				password: ''
			},
			isReadAgreement: false
		}
	},
	onLoad(options) {
		this.loginType = options.type || ''
		this.loginQuery.salesId = uni.getStorageSync('salesId')
	},
	methods: {
		login() {
			const phoneCodeVerification = /^[1][3-9][0-9]{9}$/
			if (this.loginQuery.account == '') {
				this.$showToast('请输入手机号！')
			} else if (!phoneCodeVerification.test(this.loginQuery.account)) {
				this.$showToast('请输入正确的手机号！')
			} else {
				// uni.showLoading({
				//   mask: true,
				//   title: '正在登录...',
				//   duration: 2000,
				// });
				NET.request(API.Login, {
					type: 2,
					phone: this.loginQuery.account,
					verificationCode: this.loginQuery.verificationCode,
					password: this.loginQuery.password
				}, 'POST').then((res) => {
					uni.hideLoading()
					const item = res.data
					uni.setStorageSync(J_STORAGE_KEY, item)
					if (uni.getStorageSync('salesId')) {
						const salesId = uni.getStorageSync('salesId')
						const shopId = uni.getStorageSync('shopId')
						this.bindSalesCustomer(salesId, shopId)
						uni.removeStorageSync('salesId')
						uni.removeStorageSync('shopId')
					}
					// 购物车右上角数量
					NET.request(API.ShoppingCart, {}, 'GET').then((resCart) => {
						let cartNum = 0
						resCart.data.forEach((shopItem) => {
							shopItem.skus.forEach((goodsItem) => {
								cartNum += goodsItem.number
							})
						})
						if (cartNum > 0) {
							uni.setTabBarBadge({
								index: 3,
								text: cartNum.toString()
							})
						}
						uni.setStorageSync('allCartNum', cartNum)
					})
					setTimeout(() => {
						this.$switchTab('/pages/tabbar/user/index')
					}, 600)
				})
					.catch((res) => {
						console.dir(res)
						uni.hideLoading()
						this.$showToast(res.data.message)
					})
			}
		},
		// 获取验证码
		codede() {
			this.getVerify()
		},
		getVerify() {
			const phoneCodeVerification = /^[1][3-9][0-9]{9}$/
			if (this.loginQuery.account == '') {
				this.$showToast('请输入手机号！')
			} else if (!phoneCodeVerification.test(this.loginQuery.account)) {
				this.$showToast('请输入正确的手机号！')
			} else {
				getVerifyCodeApi({
					phone: this.loginQuery.account
				}).then((res) => {
					this.sendCode()
				})
					.catch((res) => {
						this.$showToast(res.data.message)
					})
			}
		},
		// 绑定关系
		bindSalesCustomer(salesId, storeId) {
			if (salesId && storeId) {
				// 如果已登录，静默绑定客户关系，否则跳转到登录页面
				NET.request(API.BindSalesCustomer, {
					shopId: storeId,
					distributorId: salesId
				}, 'POST').then((res) => {
					this.$showToast('绑定成功')
				})
					.catch((res) => {
						this.$showToast(res.data.message)
					})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	background-color: #FFFFFF;
	.redText {
		color: #CE2601;
	}

	.register {
		margin-top: 30rpx;
		position: relative;
		text-align: right;
		padding-right: 40rpx;
	}

	.PhoneAuthentication {
		margin-top: 15rpx;
		font-family: Source Han Sans CN;
		width: 466rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		padding: 0px 30rpx;
		gap: 8rpx;

		.textRL {
			font-size: 44rpx;
			font-weight: 600;
			line-height: 60rpx;
			color: #222229;
		}

		.textTips {
			font-size: 24rpx;
			font-weight: 350;
			line-height: 32rpx;
			color: #888889;
		}
	}

	.LoginForm {
		margin-top: 50rpx;
		width: 750rpx;

		.iphoneNum-box {
			/* 自动布局 */
			margin: 0 auto;
			height: 114rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 32rpx;
			border-bottom: 2rpx solid #E6E6E8;
			width: 690rpx;
			color: #222229;

			.labels {
				font-size: 32rpx;
				font-weight: normal;
				line-height: 48rpx;
			}
		}

		.ReadingAgreement {
			width: 710rpx;
			margin: 0 auto;
			margin-top: 33rpx;
			gap: 32rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;

			.Agreement {
				margin-left: -15rpx;
			}
		}
	}

	.problem {
		margin: 0 auto;
		margin-top: 30rpx;
		width: 654rpx;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		font-weight: 350;
		line-height: 32rpx;
		color: #878788;
	}

	.getcode {
		position: absolute;
		right: 30rpx;
		font-size: 32rpx;
		font-weight: normal;
		line-height: 48rpx;
		text-align: right;
		color: #CE2601;
	}

	.awaitCode {
		position: absolute;
		right: 30rpx;
		font-size: 32rpx;
		font-weight: normal;
		line-height: 48rpx;
		text-align: right;
		color: #888889;
	}
}
</style>