You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
<template>
|
|
|
|
|
<view class="u-page">
|
|
|
|
|
<uni-section title="使用uni-ui表单" type="line">
|
|
|
|
|
<uni-card :is-shadow="false" :isFull="true" :border="true">
|
|
|
|
|
<text>
|
|
|
|
|
使用uni-ui的组件创建表单，提交时使用的request.api.js中的网络请求方式，在VUEX里发起登录请求并将结果保存到本地。先调用VUEX，在VUEX中发送网络请求。
|
|
|
|
|
</text>
|
|
|
|
|
</uni-card>
|
|
|
|
|
<uni-card title="uni-ui的表单" :thumbnail="avatar" sub-title="输入框为uni-easyinput" extra="使用uni-forms"
|
|
|
|
|
note="Tips">
|
|
|
|
|
<uni-forms ref="form" :modelValue="formData" :rules="rules">
|
|
|
|
|
<uni-forms-item label="账号:" name="userName">
|
|
|
|
|
<uni-easyinput prefixIcon="person" type="text" v-model="formData.userName"
|
|
|
|
|
placeholder="请输入账号" />
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
<uni-forms-item label="密码:" name="password">
|
|
|
|
|
<uni-easyinput prefixIcon="locked" type="password" v-model="formData.password"
|
|
|
|
|
placeholder="请输入密码" />
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
</uni-forms>
|
|
|
|
|
<button @click="dologin">登录</button>
|
|
|
|
|
</uni-card>
|
|
|
|
|
</uni-section>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
avatar: '/static/uniui.png',
|
|
|
|
|
vavatar: '/static/uview/common/logo.png',
|
|
|
|
|
// 表单数据
|
|
|
|
|
formData: {
|
|
|
|
|
userName: 'admin',
|
|
|
|
|
password: '111111'
|
|
|
|
|
},
|
|
|
|
|
rules: {
|
|
|
|
|
// 对name字段进行必填验证
|
|
|
|
|
name: {
|
|
|
|
|
rules: [{
|
|
|
|
|
required: true,
|
|
|
|
|
errorMessage: '账号不可以为空'
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
// 对passwd字段进行必填验证
|
|
|
|
|
passwd: {
|
|
|
|
|
rules: [{
|
|
|
|
|
required: true,
|
|
|
|
|
errorMessage: '密码不可以为空'
|
|
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
dologin() {
|
|
|
|
|
let _this = this
|
|
|
|
|
this.$refs.form
|
|
|
|
|
.validate()
|
|
|
|
|
.then(r => {
|
|
|
|
|
_this.$store
|
|
|
|
|
.dispatch('login', _this.formData)
|
|
|
|
|
.then(uinfo => {
|
|
|
|
|
console.log('MMMM:', uinfo)
|
|
|
|
|
getApp().globalData.username = uinfo.name
|
|
|
|
|
getApp().globalData.token = uinfo.token
|
|
|
|
|
console.log('gd--:', getApp().globalData)
|
|
|
|
|
// uni.redirectTo({
|
|
|
|
|
// url: '/pages/index/index',
|
|
|
|
|
// })
|
|
|
|
|
uni.switchTab({
|
|
|
|
|
url: '../home/AddFragment'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
.catch(er => {
|
|
|
|
|
console.log('EEEE:', er)
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
.catch(err => {
|
|
|
|
|
console.log('eeee:', err)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style></style>
|
