|
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 |