|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 2.1 KiB |
@ -1,150 +0,0 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<uni-section title="使用uni-ui表单" type="line"> |
|||
<uni-card :is-shadow="false" :isFull="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> |
|||
<uni-section title="使用uView表单" type="line"> |
|||
<uni-card :is-shadow="false" :isFull="true"> |
|||
<text> |
|||
使用uView的组件创建表单，提交时使用uview封装的网络请求，请求成功后再将返回的数据通过VUEX保存到本地。先发起网络请求，请求返回后再调用VUEX保存状态。 |
|||
</text> |
|||
</uni-card> |
|||
<uni-card title="uView表单" :thumbnail="vavatar" sub-title="输入框为u--input" extra="使用u--form" note="Tips"> |
|||
<u--form ref="vform" :model="formData" :rules="vrules" labelPosition="left"> |
|||
<u-form-item label="账号:" prop="userName"> |
|||
<u--input prefixIcon="account" v-model="formData.userName" type="text" placeholder="请输入账号" /> |
|||
</u-form-item> |
|||
<u-form-item label="密码:" prop="password"> |
|||
<u--input prefixIcon="lock" v-model="formData.password" type="password" placeholder="请输入密码" /> |
|||
</u-form-item> |
|||
</u--form> |
|||
<button @click="vdologin">登录</button> |
|||
</uni-card> |
|||
</uni-section> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from '@/common/req.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
avatar: '/static/uniui.png', |
|||
vavatar: '/static/uview/common/logo.png', |
|||
// 表单数据 |
|||
formData: { |
|||
userName: '', |
|||
password: '' |
|||
}, |
|||
rules: { |
|||
// 对name字段进行必填验证 |
|||
name: { |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
errorMessage: '账号不可以为空' |
|||
} |
|||
] |
|||
}, |
|||
// 对passwd字段进行必填验证 |
|||
passwd: { |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
errorMessage: '密码不可以为空' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
vrules: { |
|||
// 对name字段进行必填验证 |
|||
name: { |
|||
type: 'string', |
|||
required: true, |
|||
message: '账号不可以为空', |
|||
trigger: ['blur', 'change'] |
|||
}, |
|||
// 对passwd字段进行必填验证 |
|||
passwd: { |
|||
type: 'string', |
|||
required: true, |
|||
message: '密码不可以为空', |
|||
trigger: ['blur', 'change'] |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
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' }) |
|||
}) |
|||
.catch(er => { |
|||
console.log('EEEE:', er) |
|||
}) |
|||
}) |
|||
.catch(err => { |
|||
console.log('eeee:', err) |
|||
}) |
|||
}, |
|||
vdologin() { |
|||
let _this = this |
|||
this.$refs.vform |
|||
.validate() |
|||
.then(r => { |
|||
uni.showLoading() |
|||
// uni.showLoading({ |
|||
// mask: true, |
|||
// title: '请求中~~~' |
|||
// }) |
|||
req |
|||
.login(_this.formData) |
|||
.then(uinfo => { |
|||
uni.hideLoading() |
|||
console.log('vMMMM:', uinfo) |
|||
_this.$store.dispatch('logined', uinfo).then(() => { |
|||
getApp().globalData.username = uinfo.name |
|||
getApp().globalData.token = uinfo.token |
|||
console.log('vgd--:', getApp().globalData) |
|||
uni.redirectTo({ url: '/pages/index/index' }) |
|||
}) |
|||
}) |
|||
.catch(er => { |
|||
uni.hideLoading() |
|||
console.log('vEEEE:', er) |
|||
}) |
|||
}) |
|||
.catch(err => { |
|||
console.log('veeee:', err) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style></style> |
|||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 2.1 KiB |