LocalLivingServicesUniapp/pages/login/login.vue

<template>
	<view class="zai-box">
		<app-update ref="app_update"></app-update>
		<!-- <scroll-view scroll-y class="page"> -->
		<!-- <view class="text-center" :style="[{animation: 'show ' + 0.4+ 's 1'}]"> -->
		<!-- <image src="../../static/login/bejing.png" mode='aspectFit' class="zai-header "></image> -->
		<view class="zai-header"></view>
		<!-- <view class="text-center" >
				<image src="https://static.jeecg.com/upload/test/login4_1595818039175.png" mode='aspectFit' class="zai-logo "></image>
				<view class="zai-title text-shadow ">本地生活 </view>
			</view> -->
		<view class="box padding-lr-xl login-paddingtop">
			<block>
				<view class="box-user flex align-center " :class="[shape == 'round' ? 'round' : '']">
					<!-- <view class="title"><text class="cuIcon-people margin-right-xs"></text>手机号:</view> -->
					<image src="../../static/login/Frame (27).png" mode='aspectFit' class="zai-logo "></image>
					<input placeholder="请输入手机号" name="input" v-model="phoneNo"></input>
				</view>
        <view class="box-user flex align-center"  :class="[shape=='round'?'round':'']">
          <image src="../../static/login/Frame (28).png" mode='aspectFit' class="zai-logo"></image>
          <input class="uni-input" placeholder="请输入验证码" v-model="smsCode"/>
          <view class="action">
            <text class="text-color" :disabled="!isSendSMSEnable" @click="onSMSSend"> {{ getSendBtnText }}</text>
          </view>
        </view>
       <!--   注释掉密码登录   add by hxl  2025-07-16  -->
				<!--<view class="box-user flex align-center" :class="[shape == 'round' ? 'round' : '']">
					<image src="../../static/login/Frame (26).png" mode='aspectFit' class="zai-logo "></image>
					<input placeholder="请输入密码" :password="!showPassword" v-model="password"></input>
					<view class="action text-lg">
						<text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']"
							@click="changePassword"></text>
					</view>
				</view>
				-->
				<view style="margin-top: 216upx;">
					<button class="cu-btn round lg  bg-blue " style="display: flex;" :loading="loading"
						:class="[shape == 'round' ? 'round' : '']" @tap="onLogin"><text
							space="emsp">{{ loading ? "登录中..." : " 登录/注册"}}</text>
					</button>
				</view>
       <!--  去掉注册和忘记密码  add by hxl  2025-07-16       -->
				<!--<view class="foote" style="display: flex;align-items: center;margin-top: 40rpx;justify-content: center;">
					<view class="text-color" @tap="nav('register')" style="margin-right: 53rpx;">去注册</view>
					<text style="" @tap="nav('resetpassword')">忘记密码</text>
				</view>
				-->
				<view class="flex align-center"
					style="margin-top:154rpx;color: #858585;font-size:26rpx;justify-content: center;">
					<uni-data-checkbox multiple :localdata="sex" v-model="checked" active-color="#FF852D "
						style="margin-top: 2px;transform: scale(0.7,0.7	);"></uni-data-checkbox>
					请您阅读并同意<view> <text @tap="nav('xieyi')" class="text-color"> 用户协议</text> 和 <text class="text-color"
							@tap="nav('mimi')">隐私政策</text></view>
				</view>
			</block>




			<!-- #ifdef APP-PLUS -->
			<!-- <view class="padding flex flex-direction  text-center">
					当前版本:{{version}}
				</view> -->
			<!-- #endif -->

		</view>


		<!-- </scroll-view> -->

		<!-- 登录加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="https://static.jeecg.com/upload/test/login4_1595818039175.png" mode="aspectFit" class="round">
			</image>
			<view class="gray-text">登录中...</view>
		</view>
    <u-popup  v-model="addShow" mode="center" :round="20" >
      <view class="popup-contents-add">
        <view class="tit-center">
          <text>{{msg}}</text>
        </view>
        <view class="tit tit-bottom">
          <u-line></u-line>
          <view>
            <u-button  size="small" shape="square" class="cancel-btn"
                       @click="closePage()">取消</u-button>
            <u-button  size="small" shape="square" class="btn"
                      @click="makePhoneCall()" v-if="type==='2'" >联系客服</u-button>
            <u-button  size="small" shape="square"  class="btn" @click="toLoginDown()" v-if="type==='1'">去注册</u-button>
          </view>
        </view>
      </view>
    </u-popup>
	</view>
</template>

<script>
	import {
		ACCESS_TOKEN,
		USER_NAME,
		USER_INFO
	} from "@/common/util/constants"
	import {
		mapActions
	} from "vuex"
	import configService from '@/common/service/config.service.js';
	import appUpdate from "@/components/yzhua006-update/app-update.vue"; //app更新组件
  import eventBus from '@/common/util/event-bus.js';
	export default {
		components: {
			appUpdate
		},
		data() {
			return {
        msg:'',
        type:'',
        addShow:false,
        phoneMsg:'',//手机信息
				sex: [{
					text: '',
					value: 1
				}],
				checked: [],
				shape: '', //round 圆形
				loading: false,
				userName: '',
				password: '',
				phoneNo: '',
				smsCode: '',
				showPassword: false, //是否显示明文
				loginWay: 1, //1: 账密，2：验证码
				smsCountDown: 0,
				smsCountInterval: null,
				toggleDelay: false,
				version: '',
				//第三方登录相关信息
				thirdType: "",
				thirdLoginInfo: "",
				thirdLoginState: false,
				bindingPhoneModal: false,
				thirdUserUuid: '',
				url: {
					bindingThirdPhone: '/sys/thirdLogin/bindingThirdPhone'
				}
			};
		},
		onLoad: function() {
			// #ifdef APP-PLUS
			var that = this
			plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
				that.version = wgtinfo.version
			});
			// #endif
      eventBus.on('openPage', this.openPage);
		},
    onUnload() {
      eventBus.off('openPage', this.openPage);
    },
		beforeCreate() {
			setTimeout(() => {
				this.$refs.app_update.update(); //调用子组件检查更新方法
				setTimeout(() => {
					if (this.$refs.app_update.popup_show == true && this.$refs.app_update.force == true) {}
				}, 100)
			}, 500)
		},
		computed: {

			isSendSMSEnable() {
				return this.smsCountDown <= 0 && this.phoneNo.length > 4;
			},
			getSendBtnText() {
				if (this.smsCountDown > 0) {
					return this.smsCountDown + '秒后发送';
				} else {
					return '发送验证码';
				}
			},
			canSMSLogin() {
				return this.phoneNo.length > 4 && this.smsCode.length > 4;
			},
			canPwdLogin() {
				return this.phoneNo.length > 4 && this.password.length > 4;
			},
		},
		methods: {
			...mapActions(["mLogin", "PhoneLogin", "ThirdLogin"]),
			nav(url) {
				this.$Router.push({
					name: url
				})
				// uni.navigateTo({
				// 	url: url
				// });
			},
			//  登录
			onLogin: function() {

				if (!this.checked || this.checked.length == 0) {
					this.$tip.toast('请阅读后勾选并同意《平台协议》及《隐私协议》政策');
					return;
				}
				if (!this.phoneNo || this.phoneNo.length == 0) {
					this.$tip.toast('请填写手机号');
					return;
				}
				if (!this.smsCode || this.smsCode.length == 0) {
					this.$tip.toast('请填写验证码');
					return;
				}
				let loginParams = {
          phone: this.phoneNo,
					code: this.smsCode,
				}
				//this.loading = true;

				this.mLogin(loginParams).then((res) => {
					this.loading = false;
					if (res.data.success) {
						// #ifdef APP-PLUS
						this.saveClientId()
						// #endif
						// #ifndef APP-PLUS
						this.$tip.success('登录成功!')
						this.$Router.replaceAll({
							name: 'index'
						})
						// uni.navigateTo({
						// 	url: '/pages/index/index'
						// })
						// #endif
					} else {
						this.$tip.alert(res.data.message);
					}
				}).catch((err) => {
					let msg = err.data.message || "请求出现错误，请稍后再试"
					this.loading = false;
					this.$tip.alert(msg);
				}).finally(() => {
					this.loading = false;
				})
			},
			saveClientId() {
				var randomNum = new Date().getTime();
				this.$http.get("/sys/user/saveClientId", {
					params: {
						clientId: randomNum
					}
				}).then(res => {
					console.log("res::saveClientId>", res)
					this.$tip.success('登录成功!')
					this.$Router.replaceAll({
						name: 'index'
					})
				})
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			onSMSSend() {
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
				if (!this.phoneNo || this.phoneNo.length == 0) {
					this.$tip.toast('请输入手机号');
					return false
				}
				if (!checkPhone.test(this.phoneNo)) {
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				this.$http.get("/merchant/app/merLogin/send/code", {
					params: {
            phone: this.phoneNo
					}
				}).then(res => {
					if (res.data.success) {
						this.smsCountDown = 60;
						this.startSMSTimer();
					} else {
						this.smsCountDown = 0;
						this.$tip.toast(res.data.message);
					}
				});
			},
			startSMSTimer() {
				this.smsCountInterval = setInterval(() => {
					this.smsCountDown--;
					if (this.smsCountDown <= 0) {
						clearInterval(this.smsCountInterval);
					}
				}, 1000);
			},
      //关闭页面
      closePage(){
        this.loading = false;
        this.addShow = false;
        this.msg = "";
        this.type = "";
      },
      //打开页面
      openPage(data){
        this.loading = false;
        this.addShow = true;
        this.msg = data.msg;
        this.type = data.type;
      },
      //打电话
      makePhoneCall() {
        uni.makePhoneCall({
          phoneNumber: '40088888888',
          success: () => {
            console.log('拨打电话成功')
          },
          fail: (err) => {
            console.log('拨打电话失败', err)
            uni.showToast({
              title: '拨打电话失败',
              icon: 'none'
            })
          }
        })
      },
      //跳转到下载页面
      toLoginDown(){
        window.location.href = configService.apiUrl + '/downloadApp/download.html';
      },
		},
		beforeDestroy() {
			if (this.smsCountInterval) {
				clearInterval(this.smsCountInterval);
			}
		},
	}
</script>

<style scoped lang="scss">
	page {
		background: #FFFFFF;
		height: 100%;
	}

	.uni-data-checklist {
		flex: none;

		::v-deep.checklist-group .checklist-box {
			margin-right: 0 !important;
		}
	}

	.footer {
		position: fixed;
		bottom: 54upx;
		font-size: 12px;
		background: #FFFFFF;
		color: #999999;
		text-align: center;
		width: 100%;
		// left: 50%;
		// transform: translateX(-50%);
	}

	.text-color {
		color: #449AFF;
		margin: 0 10upx;
	}

	.login-paddingtop {
		// padding-top: 100upx;
		padding: 100upx 32upx 0 32upx;
	}

	.zai-box {
		background: #FFFFFF;
		height: 100%;

		.zai-header {
			width: 100%;
			height: 432upx;
			background-image: url(../../static/login/beijing.png);
			background-size: cover;
		}

		// padding: 0 20upx;
		// padding-top: 100upx;
		// position: relative;
	}

	.zai-logo {
		width: 20px;
		height: 20px;
	}

	.box-user {
		border-bottom: 1px solid #EFEFEF;
		min-height: 45px;

		image {
			margin-right: 10px;
		}

		input {
			font-size: 14px;
			flex: 1;
		}
	}

	.zai-title {
		font-size: 58upx;
		color: #000000;
		text-align: center;
	}

	.input-placeholder,
	.zai-input {
		color: #94afce;
	}

	.zai-label {
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}

	.zai-btn {
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
	}

	.zai-btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1upx, 1upx);
	}
  .popup-contents-add {
    width: 600rpx;
    height: 350rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
    >view {
      width: 100%;
    }

    >view.tit {
      height: 100rpx;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-around;
      padding: 0 20rpx;
      box-sizing: border-box;

      text {
        padding-top: 20rpx;
        box-sizing: border-box;
        font-size: 40rpx;
        font-weight: 600;
      }
    }

    .tit-center {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text {
        padding: 10rpx;
        box-sizing: border-box;
        font-size: 28rpx;
        font-weight: 400;
      }
    }

    .tit-bottom {
      >view {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16rpx;
      }
    }

    >view.tit-bottom {
      padding: 0;
    }
  }
  .btn {
    border-radius: 50rpx;
    width: 200rpx;
    background-color: #0081ff;
    color: #ffffff;
    padding: 10rpx 20rpx;
    text-align: center;
    box-sizing: border-box;
  }
  .cancel-btn {
    border-radius: 50rpx;
    width: 200rpx;
    padding: 10rpx 20rpx;  // 上下左右内边距
    text-align: center;  // 文字居中
    box-sizing: border-box;  // 确保内边距不会增加按钮总尺寸
  }
</style>