XiXingWL/AnHanNET-UniAPP
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加个人资料页面

Browse Source 
Signed-off-by: AnHanTech <admin@xixingwl.cn>
This commit is contained in:
AnHanTech
2023-02-12 21:43:46 +08:00
parent 1d507ee53a
commit d4206d476d
50 changed files with 9943 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

264
member/profile/profile.vue Normal file
View File

@@ -0,0 +1,264 @@
<template>
<view class="container">
<view class="example">
<!-- 基础表单校验 -->
<uni-forms ref="valiForm" :rules="rules" :modelValue="formData">
<uni-forms-item label="签名">
<uni-easyinput type="textarea" :disabled="isDisabled" v-model="formData.introduction" placeholder="请输入自我介绍" />
</uni-forms-item>
<uni-forms-item label="昵称" name="name">
<uni-easyinput v-model="formData.name" placeholder="请输入姓名" :disabled="isDisabled"/>
</uni-forms-item>
<uni-forms-item label="性别">
<uni-data-checkbox v-model="formData.sex" :localdata="sexs" :disabled="isDisabled" />
</uni-forms-item>
<uni-forms-item label="生日">
<uni-datetime-picker type="date" return-type="timestamp" v-model="formData.datetimesingle" :disabled="isDisabled" />
</uni-forms-item>
<uni-forms-item label="身高" name="name">
<uni-easyinput v-model="formData.name" type="number" placeholder="请输入姓名" :disabled="isDisabled"/>
</uni-forms-item>
<uni-forms-item label="所在地">
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
</uni-forms-item>
<uni-forms-item label="学历">
<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled"></uni-data-select>
</uni-forms-item>
<uni-forms-item label="职业">
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
</uni-forms-item>
<uni-forms-item label="企业">
<uni-easyinput v-model="formData.name" type="number" placeholder="请输入姓名" :disabled="isDisabled" />
</uni-forms-item>
<uni-forms-item label="家乡">
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
</uni-forms-item>
<uni-forms-item label="自我介绍" name="introduction">
<uni-easyinput type="textarea" v-model="formData.introduction" placeholder="请输入自我介绍" :disabled="isDisabled" />
</uni-forms-item>
<uni-forms-item label="月收入">
<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled"></uni-data-select>
</uni-forms-item>
<uni-forms-item label="婚姻">
<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled"></uni-data-select>
</uni-forms-item>
<uni-forms-item label="房产">
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
</uni-forms-item>
<uni-forms-item label="所在地">
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
</uni-forms-item>
<uni-forms-item label="年龄">
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
</uni-forms-item>
<uni-forms-item label="身高">
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
</uni-forms-item>
<uni-forms-item label="学历">
<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled"></uni-data-select>
</uni-forms-item>
</uni-forms>
<button type="primary" @click="submit('valiForm')">提交</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isDisabled:true,
// 基础表单数据
formData: {
name: '',
age: '',
introduction: '',
sex: 2,
hobby: [5],
datetimesingle: 1627529992399
},
educations: [{
value: 0,
text: "篮球"
},
{
value: 1,
text: "足球"
},
{
value: 2,
text: "游泳"
},
],
// 单选数据源
sexs: [{
text: '男',
value: 0
}, {
text: '女',
value: 1
}, {
text: '保密',
value: 2
}],
// 多选数据源
hobbys: [{
text: '跑步',
value: 0
}, {
text: '游泳',
value: 1
}, {
text: '绘画',
value: 2
}, {
text: '足球',
value: 3
}, {
text: '篮球',
value: 4
}, {
text: '其他',
value: 5
}],
// 分段器数据
current: 0,
items: ['左对齐', '顶部对齐'],
// 校验表单数据
valiFormData: {
name: '',
age: '',
introduction: '',
},
// 校验规则
rules: {
name: {
rules: [{
required: true,
errorMessage: '姓名不能为空'
}]
},
age: {
rules: [{
required: true,
errorMessage: '年龄不能为空'
}, {
format: 'number',
errorMessage: '年龄只能输入数字'
}]
}
},
// 自定义表单数据
customFormData: {
name: '',
age: '',
hobby: []
},
// 自定义表单校验规则
customRules: {
name: {
rules: [{
required: true,
errorMessage: '姓名不能为空'
}]
},
age: {
rules: [{
required: true,
errorMessage: '年龄不能为空'
}]
},
hobby: {
rules: [{
format: 'array'
},
{
validateFunction: function(rule, value, data, callback) {
if (value.length < 2) {
callback('请至少勾选两个兴趣爱好')
}
return true
}
}
]
}
}
}
},
onLoad() {},
onReady() {
// 设置自定义表单校验规则，必须在节点渲染完毕后执行
//this.$refs.customForm.setRules(this.customRules)
},
methods: {
onClickItem(e) {
console.log(e);
this.current = e.currentIndex
},
submit(ref) {
this.$refs[ref].validate().then(res => {
console.log('success', res);
uni.showToast({
title: `校验通过`
})
}).catch(err => {
console.log('err', err);
})
},
}
}
</script>
<style lang="scss">
.container{
background-color: transparent;
}
.example {
padding: 15px;
background-color: #fff;
background-color: transparent;
}
.segmented-control {
margin-bottom: 15px;
}
.button-group {
margin-top: 15px;
display: flex;
justify-content: space-around;
}
.form-item {
display: flex;
align-items: center;
}
.button {
display: flex;
align-items: center;
height: 35px;
margin-left: 10px;
}
.uni-forms-item button {
line-height: 36rpx;
}
.uni-forms-item {
position: relative;
display: flex;
margin-bottom: 10rpx;
}
</style>