product-uniapp/pages/login/index.vue

<template>
	<view class="content">
		<image class="logo" src="/static/image/bg.jpg"></image>
		
		<view class="contop">
			<text class="text">2025 USED CAR</text>
			<text class="cont">
				河南合塑实业有限公司
			</text>
		</view>
		<view class="foot">
			<button  v-if="is_login"  class="btn"  @click="mini_login">一键登录</button>
			<button v-else="is_login" class="btn"  open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录</button>
			<view class="check">
				<checkbox-group name="" style="width: 28px;">
					<label>
						<checkbox :checked="selfChecked" activeBackgroundColor="#3F435B" style="transform:scale(0.7);border-radius: 50%"/>
					</label>
				</checkbox-group>
				我同意并遵守<text class="argeen" @click="gouser">《用户服务协议》</text>以及<text class="argeen"  @click="goprivacy">《隐私政策》</text>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import { request,showToast } from '@/api/apiT.js'
	export default {
		data() {
			return {
				selfChecked: false,
				is_login:false,
			}
		},
		onLoad() {
			// this.Props.statusBarHeight = getApp().globalData.statusBarHeight
			// console.log(this.Props.statusBarHeight)
			// this.Props.capsuleTop = getApp().globalData.capsuleTop
			// this.getbg()
		},
		onShow() {
			// #ifdef MP-WEIXIN
			//小程序登录检测
			this.mini_login()
			// #endif
			// #ifndef MP-WEIXIN
			this.is_login = true
			// #endif
		},
		methods: {
			selfChangde(e) {
				this.selfChecked = !this.selfChecked;
			},
			goprivacy(){
				uni.navigateTo({
					url: '/pages/login/agreement',// 替换为你要跳转的页面路径
				});
			},
			gouser(){
				uni.navigateTo({
					url: '/pages/login/agreementuser',// 替换为你要跳转的页面路径
				});
			},
			getPhoneNumber(e) {
			    console.log(e.detail.code) // 动态令牌
			    let that = this;
				request({
					url:'miniapp/phone',
					// url:'customerLogin',
					method:'POST',
					data:{
						phone_code: e.detail.code,
					}
				}).then(res => {
					console.log(res.data.data)
					if (res.data.code == -1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						
					} else if (res.data.code == 0) {
						//返回数据接收成功
						this.mini_login();
					}
				})
			},
			mini_login() {
				let that = this;
				// if(!this.selfChecked){
				// 	uni.showToast({
				// 		title:'请先勾选同意用户服务协议以及隐私政策',
				// 		icon: 'none'
				// 	});
				// 	return false
				// }
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						console.log(loginRes);
						that.code = loginRes.code;
						// 2. 将用户登录code传递到后台置换用户SessionKey、OpenId等信息
						request({
							url:'miniapp/login',
							method:'POST',
							data:{
								code: loginRes.code
							}
						}).then(res => {
							console.log(res.data);
							uni.hideLoading()
							if (res.data.code == 0) {
								//存取session
								uni.setStorageSync('openid', res.data.data.openid);
								uni.setStorageSync('token', res.data.data.token);
								if(res.data.data.phone&&res.data.data.phone!=''&&res.data.data.phone!=null){
									uni.reLaunch({
										url: '/pages/index/index',// 替换为你要跳转的页面路径
									});
									this.is_login = true;
								}
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}	
						})
					},
					fail: () => {
						uni.showToast({
							title: '获取 code 失败',
							icon: 'none'
						});
					}
				});
			
			},
			pd_login(openid) {
				let that = this;
				request({
					url:'miniapp/phone',
					method:'POST',
					data:{
						phone_code: openid
					}
				}).then(res => {
					console.log(res.data)
					uni.reLaunch({
						url: '/pages/index/index',// 替换为你要跳转的页面路径
					});
					// if (res.data.code == -1) {
					// 	//unionid在数据库没有记录 记录就可以不需要操作
					// 	console.log('unionid在数据库没有记录 记录就可以不需要操作')
					// } else if (res.data.code == 0) {
					// 	var userid = res.data.data;
					// 	this.is_login = true;
					// 	this.getCard(openid);
					// }
				})
			},
		}
	}
</script>

<style scoped>
	>>>checkbox .wx-checkbox-input {
		border-radius: 50% !important;
		border: 2rpx solid #3F435B !important;
	}

	>>>checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		border: 2rpx solid #3F435B !important;
		background-color:#3F435B !important;
		color: #FFFFFF !important;
	}

	>>>checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		color: #FFFFFF !important;
	}
	>>>uni-checkbox .uni-checkbox-input {
		margin-right: 0;
		border-radius: 50%;
		border: 2rpx solid #3F435B;
	}
	>>>uni-checkbox .uni-checkbox-input:empty {
		border: 2rpx solid #3F435B;
		background-color: #5FFFFFF;
		opacity: 0.5;
	}
	>>>uni-checkbox .uni-checkbox-input:not(:empty) {
		border: 2rpx solid #3F435B;
		background-color: #3F435B;
		color: #FFFFFF;
	}
	.argeen{
		color: #3F435B;
	}
	.content{
		height: 100%;
		width: 100%;
		position: relative;
		background-color: white;
	}
	.logo{
		width: 100%;
		height: 830rpx;
	}
	.contop{
		position: absolute;
		top: 16%;
		text-align: center;
	}
	.text{
		font-size: 32px;
		font-weight: bold;
		background: linear-gradient(120deg, #B9773C 0%, #67450D 100%);
		-webkit-background-clip: text;
		color: transparent;
		background-clip: text;
		display: inline-block;
	}
	.cont{
		background-image: linear-gradient(#4C392B, #0A0604);
		padding: 4px 15px;
		color: #FFEBCC;
		text-align: center;
		border-radius: 6px;
		display: inline-block;
		margin-top: 12px;
		font-size: 16px;
	}
	.foot{
		width: 88%;
		margin: 30px auto;
		text-align: center;
		
	}
	.foot label{
		color: #929292;
	}
	.check{
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}
	.btn{
		background-color: #3F435B;
		color: white;
		border-radius: 50px;
		width: 100%;
		margin-bottom: 40px;
		height: 50px;
		line-height: 50px;
	}
	.radio{
		color: #929292;
		font-size: 12px;
		
	}
</style>