wx-qhb/pages/login/login.vue

<template>
	<!-- 登录 -->
	<view style="padding: 0 44rpx;">
		<view class="" style="text-align: center;margin-top: 156rpx;">
			<image src="../../static/images/logo.png" style="width: 350rpx;height: 350rpx;" mode=""></image>
		</view>
		<button open-type="getPhoneNumber" class="login-btn" @getphonenumber="tologin">
			微信授权登录
		</button>
		<view class="" style="margin-top: 42rpx;display: flex;">
			<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
				<u-checkbox shape="circle" :customStyle="{marginBottom: '8px'}" :name="1">
				</u-checkbox>
			</u-checkbox-group>
			<text class='fontYin'>我已阅读并同意</text>
			<text class='fontYin' style='color:#F83224'>《用户协议》</text>
			<text class='fontYin'>和</text>
			<text class='fontYin' style='color:#F83224'>隐私协议》</text>
		</view>
		<view class="">
			<text>账号</text>
			<input type="text" v-model="mobile"/>
		</view>
		<view class="">
			<text>密码</text>
			<input type="text" v-model="password" />
		</view>
		<view class="" @click="login()">
			登录
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile:'',
				password:'',
				checkboxValue1:[]
			};
		},
		methods: {
			checkboxChange(n) {
				console.log('change', n);  
			},
			login(){
				uni.$u.http.post('/api/login', {mobile: this.mobile, password: '123456'}).then((res)=>{
					console.log(res);
				})  
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-btn {
		width: 662rpx;
		height: 96rpx;
		background: #F83224;
		box-shadow: 0rpx 16rpx 40rpx -12rpx rgba(255, 21, 21, 0.5);
		border-radius: 48rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
		font-style: normal;
	}

	.fontYin {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}
</style>