moin_app/pages/login/login.vue

<template>
	<view class="content">
		<view class="form">
			<view class="formItem">
				<view class="icon">
					<image src="../../static/images/icon (18).png" mode=""></image>
				</view>
				<view class="inputW">
					<u--input v-model="FormData.username" placeholder="请输入用户名" clearable></u--input>
				</view>
			</view>
			<view class="formItem">
				<view class="icon">
					<image src="../../static/images/icon (14).png" mode=""></image>
				</view>
				<view class="inputW">
					<u--input v-model="FormData.password" placeholder="请输入密码"  clearable></u--input>
				</view>
			</view>
			<!-- <view class="formItem">
				<view class="inputW">
					<u--input v-model="FormData.phone" placeholder="请输入验证码" type="number" clearable></u--input>
				</view>
				<view class="sendCode">{{ sendCode }}</view>
			</view> -->
			<view class="formItem btnBg" @click="loginFn" :class="{actvie: loginActive}">登录</view>
		</view>
	</view>
</template>

<script>
	import { login } from '@/config/api.js'
	import md5 from 'js-md5';
	export default {
		data() {
			return {
				FormData: {
					password: 'fwq1234567890',
					username: 'fangwq'
				},
				sendCode: '获取验证码'
			}
		},
		onLoad() {

		},
		computed: {
			loginActive() {
				if(this.FormData.password.length>4&&this.FormData.username.length>4) {
					return true
				}
				return false
			}
		},
		methods: {
			async loginFn() {
				let obj = Object.assign({},this.FormData)
				obj.password = md5(this.FormData.password)
				const res = await login(obj)
				console.log(res)
				if(res.code==200) {
					this.FormData = {
						password: '',
						username: ''
					}
					console.log(res)
					this.$store.commit('update_vuex_loginInfo', res.data)
					this.$goPage('/pages/index/index')
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	  .form {
		  width: 86%;
		  margin-top: 24%;
	    .formItem {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 112rpx;
			border-radius: 56rpx;
			background: #f4f7ff;
			margin-bottom: 44rpx;
			padding: 0 50rpx;
	      .icon {
			  width: 48rpx;
			  height: 48rpx;
	      }
	
	      .inputW {
			  flex: 1;
			  width: 0;
	        u--input {
	
	        }
	      }
		  .sendCode {
			  font-size: 26rpx;
			  color: rgb(192, 196, 204);;
		  }
		  &.btnBg {
			  background: $themC;
			  text-align: center;
			  font-size: 30rpx;
			  width: 100%;
			  letter-spacing: 1em;
			  opacity: 0.4;
			  &.actvie {
				  opacity: 1;
			  }
		  }
	    }
	  }
	}
</style>