120 lines
3.4 KiB
Vue
120 lines
3.4 KiB
Vue
<template>
|
|
<view>
|
|
<button @click="open">关闭</button>
|
|
<uni-popup ref="popupLogin" :mask-click="false" type="bottom">
|
|
<view style="padding: 35rpx; background-color: aliceblue;">
|
|
<uni-forms ref="form" :modelValue="formData" :rules="rules">
|
|
<uni-forms-item label="姓名" name="name">
|
|
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="邮箱" name="email">
|
|
<uni-easyinput type="text" v-model="formData.email" placeholder="请输入用户名" />
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
<button @click="submit">Submit</button>
|
|
<view style="display:flex;align-items:center;justify-content:space-evenly; padding: 30rpx;">
|
|
<uni-icons type="weixin" color="#00aa00" size="48"></uni-icons>
|
|
<uni-icons type="qq" color="#686868" size="48"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<uni-popup ref="popupReg" :mask-click="false" type="bottom">
|
|
<view style="padding: 35rpx; background-color: aliceblue;">
|
|
<text>用户注册</text>
|
|
<uni-forms ref="form" :modelValue="formDataReg" :rules="rules">
|
|
<uni-forms-item label="姓名" name="avatarUrl">
|
|
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
|
<image class="avatar" :src="formDataReg.avatarUrl"
|
|
style="width: 320rpx; height: 320rpx; margin: auto;"></image>
|
|
</button>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="姓名" name="nickname">
|
|
<uni-easyinput type="nickname" placeholder="请输入昵称" v-model="formDataReg.nickname">
|
|
</uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="姓名" name="mobile">
|
|
<uni-easyinput placeholder="请输入昵称" v-model="formDataReg.mobile"></uni-easyinput>
|
|
|
|
<button v-show="showPhone" type="primary" block open-type="getPhoneNumber"
|
|
@getphonenumber="getPhone">
|
|
授权电话
|
|
</button>
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
<button @click="submit">Submit</button>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "ywxAuthModel",
|
|
data() {
|
|
return {
|
|
// 表单数据
|
|
formData: {
|
|
name: 'LiMing',
|
|
email: 'dcloud@email.com'
|
|
},
|
|
formDataReg: {
|
|
nickname: '',
|
|
avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
|
|
},
|
|
rules: {
|
|
// 对name字段进行必填验证
|
|
name: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请输入姓名',
|
|
},
|
|
{
|
|
minLength: 3,
|
|
maxLength: 5,
|
|
errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
|
|
}
|
|
]
|
|
},
|
|
// 对email字段进行必填验证
|
|
email: {
|
|
rules: [{
|
|
format: 'email',
|
|
errorMessage: '请输入正确的邮箱地址',
|
|
}]
|
|
}
|
|
},
|
|
openid: "",
|
|
loginstate: "0",
|
|
openid: "",
|
|
userEntity: null,
|
|
terminal: "",
|
|
osVersion: "",
|
|
phoneNumber: "",
|
|
showPhone: false,
|
|
showModal: false, //定义登录弹窗
|
|
}
|
|
},
|
|
onLoad: function() {},
|
|
methods: {
|
|
onChooseAvatar(e) {
|
|
console.log(e)
|
|
const {
|
|
avatarUrl
|
|
} = e.detail
|
|
|
|
this.formDataReg.avatarUrl = avatarUrl
|
|
},
|
|
open() {
|
|
this.$refs.popupReg.open()
|
|
},
|
|
close() {
|
|
this.$refs.popup.close()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|