提交 80c9c3c5 编写于 作者: 芊里

生物认证,个人资料完成修改

上级 57405b69
......@@ -127,7 +127,8 @@
}
}, {
"path": "pages/ucenter/edit/edit",
"path": "uni_modules/uni-id-users/pages/uni-id-users/edit",
// "path": "pages/ucenter/edit/edit",
"style": {
"navigationBarTitleText": "编辑资料"
}
......
<template>
<view class="content">
<uni-list>
<uni-list-item>
<template v-slot:body>
<view class="avatar-box">
<image class="avatar-img" :src="(userInfo && userInfo.avatar) || '/static/uni-center/logo.png'" @click="chooseImg" mode="aspectFill"></image>
</view>
</template>
</uni-list-item>
<uni-list-item title="姓名" :right-text="userInfo && userInfo.name"></uni-list-item>
</uni-list>
</view>
</template>
<script>
import {
mapGetters,
mapMutations
} from 'vuex';
const db = uniCloud.database();
const userTable = db.collection('uni-id-users')
export default {
data() {
return {
}
},
computed: {
...mapGetters({
userInfo: 'user/info'
})
},
onLoad() {
if(!this.userInfo)console.error('判断登录状态,如果没有登录则没有userinfo,页面报错');
},
methods: {
...mapMutations({
login:'user/login'
}),
// 选择图片
chooseImg(){
uni.chooseImage({
count:1,
success:(res)=> {
uni.$on('uploadAvatarAfter', ({url})=>{
console.log(url);
this.uploadUserInfo({avatar:url});
})
let options = {
width:600,
height:600
}
uni.navigateTo({
url:'./uploadCutImageToUnicloud?path=' + res.tempFilePaths[0] + `&options=${JSON.stringify(options)}`,
animationType:"fade-in"
});
}
})
},
/**
* @param {Object} data 更新用户信息
* key 需要更新的用户字段
* value 更新后的用户字段值
*/
uploadUserInfo(data){
console.log(this.userInfo._id)
userTable.doc(this.userInfo._id)
.update(data)
.then(res=>{
console.log(data)
this.login(data)
})
.catch(err=>{
console.log(err);
})
}
}
}
</script>
<style>
.content{
width: 750rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
/* align-items: center; */
flex: 1;
}
.avatar-box{
width: 700rpx;
height: 200rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
}
.avatar-img{
width: 150rpx;
height: 150rpx;
border-radius: 75rpx;
border: #F8F8F8 solid 1px;
}
</style>
......@@ -17,15 +17,15 @@ export default {
},
methods:{
successFn(e){
uni.getImageInfo({
src:e.url,
complete: (e) => {
console.log(e);
}
})
// uni.getImageInfo({
// src:e.url,
// complete: (e) => {
// console.log(e);
// }
// })
this.uploadImgToUnicloud(e.url,(url)=>{
//console.log(url);
uni.$emit('uploadAvatarAfter', {url});
this.getOpenerEventChannel().emit('uploadAvatarAfter', {url})
uni.navigateBack()
})
},
......
......@@ -66,7 +66,7 @@
}),
toEdit(){
uni.navigateTo({
url: '/pages/ucenter/edit/edit'
url: '/uni_modules/uni-id-users/pages/uni-id-users/edit'
});
},
changePwd(){
......@@ -142,8 +142,9 @@
});
},
fail:(err)=> {
console.log(`认证失败:${err.errCode}`);
uni.showToast({
title: `认证失败:${err.errCode}`,
title: `认证失败`,
icon: 'none'
});
}
......
{
"bsonType": "object",
"required": ["name"],
"permission": {
"read": true,
"create": false,
"update": false,
"delete": false
},
"properties": {
"_id": {
"description": "ID,系统自动生成"
},
"parent_id": {
"bsonType": "string",
"description": "父级部门ID",
"parentKey": "_id"
},
"name": {
"bsonType": "string",
"description": "部门名称",
"title": "部门名称",
"trim": "both"
},
"level": {
"bsonType": "int",
"description": "部门层级,为提升检索效率而作的冗余设计"
},
"sort": {
"bsonType": "int",
"description": "部门在当前层级下的顺序,由小到大",
"title": "显示顺序"
},
"manager_uid": {
"bsonType": "string",
"description": "部门主管的userid, 参考`uni-id-users` 表",
"foreignKey": "uni-id-users._id"
},
"create_date": {
"bsonType": "timestamp",
"description": "部门创建时间",
"forceDefaultValue": {
"$env": "now"
}
}
}
}
{
"bsonType": "object",
"required": ["role_id"],
"permission": {
"read": false,
"create": false,
"update": false,
"delete": false
},
"properties": {
"_id": {
"description": "存储文档 ID,系统自动生成"
},
"role_id": {
"title": "唯一ID",
"bsonType": "string",
"description": "角色唯一标识,不可修改,不允许重复",
"trim": "both"
},
"role_name": {
"title": "名称",
"bsonType": "string",
"description": "角色名称",
"trim": "both"
},
"permission": {
"title": "权限",
"bsonType": "array",
"foreignKey": "uni-id-permissions.permission_id",
"description": "角色拥有的权限列表"
},
"comment": {
"title": "备注",
"bsonType": "string",
"description": "备注",
"trim": "both"
},
"create_date": {
"bsonType": "timestamp",
"description": "创建时间",
"forceDefaultValue": {
"$env": "now"
}
}
}
}
## 0.3.1(2021-04-15)
- 修复 本地数据概率无法回显时问题
## 0.3.0(2021-04-07)
- 新增 支持云端非树形表结构数据
- 修复 根节点 parent_field 字段等于null时选择界面错乱问题
## 0.2.0(2021-03-15)
- 修复 nodeclick、popupopened、popupclosed事件无法触发的问题
## 0.1.9(2021-03-09)
......
<template>
<view class="uni-data-tree">
<view class="uni-data-tree-input" @click="handleInput">
<slot :options="options" :data="inputSelected" :error="errorMessage">
<view class="input-value" :class="{'input-value-border': border}">
<text v-if="errorMessage" class="selected-area error-text">{{errorMessage}}</text>
<view v-else-if="loading && !isOpened" class="selected-area">
<uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
</view>
<scroll-view v-else-if="inputSelected.length" class="selected-area" scroll-x="true">
<view class="selected-list">
<view class="selected-item" v-for="(item,index) in inputSelected" :key="index">
<text>{{item.text}}</text><text v-if="index<inputSelected.length-1" class="input-split-line">{{split}}</text>
</view>
</view>
</scroll-view>
<text v-else class="selected-area placeholder">{{placeholder}}</text>
<view class="arrow-area" v-if="!readonly">
<view class="input-arrow"></view>
</view>
</view>
</slot>
</view>
<view class="uni-data-tree-cover" v-if="isOpened" @click="handleClose"></view>
<view class="uni-data-tree-dialog" v-if="isOpened">
<view class="dialog-caption">
<view class="title-area">
<text class="dialog-title">{{popupTitle}}</text>
</view>
<view class="dialog-close" @click="handleClose">
<view class="dialog-close-plus" data-id="close"></view>
<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
</view>
</view>
<data-picker-view class="picker-view" ref="pickerView" v-model="value" :localdata="localdata" :preload="preload"
:collection="collection" :field="field" :orderby="orderby" :where="where" :step-searh="stepSearh" :self-field="selfField"
:parent-field="parentField" :managed-mode="true" @change="onchange" @datachange="ondatachange" @nodeclick="onnodeclick"></data-picker-view>
</view>
</view>
</template>
<script>
import dataPicker from "../uni-data-pickerview/uni-data-picker.js"
import DataPickerView from "../uni-data-pickerview/uni-data-pickerview.vue"
/**
* uni-data-picker
* @description uni-data-picker
* @tutorial https://uniapp.dcloud.net.cn/uniCloud/uni-data-picker
* @property {String} popup-title 弹出窗口标题
* @property {Array} localdata 本地数据,参考
* @property {Boolean} border = [true|false] 是否有边框
* @property {Boolean} readonly = [true|false] 是否仅读
* @property {Boolean} preload = [true|false] 是否预加载数据
* @value true 开启预加载数据,点击弹出窗口后显示已加载数据
* @value false 关闭预加载数据,点击弹出窗口后开始加载数据
* @property {Boolean} step-searh = [true|false] 是否分布查询
* @value true 启用分布查询,仅查询当前选中节点
* @value false 关闭分布查询,一次查询出所有数据
* @property {String|DBFieldString} self-field 分布查询当前字段名称
* @property {String|DBFieldString} parent-field 分布查询父字段名称
* @property {String|DBCollectionString} collection 表名
* @property {String|DBFieldString} field 查询字段,多个字段用 `,` 分割
* @property {String} orderby 排序字段及正序倒叙设置
* @property {String|JQLString} where 查询条件
* @event {Function} popupshow 弹出的选择窗口打开时触发此事件
* @event {Function} popuphide 弹出的选择窗口关闭时触发此事件
*/
export default {
name: 'UniDataPicker',
mixins: [dataPicker],
components: {
DataPickerView
},
props: {
options: {
type: [Object, Array],
default () {
return {}
}
},
popupTitle: {
type: String,
default: '请选择'
},
placeholder: {
type: String,
default: '请选择'
},
heightMobile: {
type: String,
default: ''
},
readonly: {
type: Boolean,
default: false
},
border: {
type: Boolean,
default: true
},
split: {
type: String,
default: '/'
}
},
data() {
return {
isOpened: false,
inputSelected: []
}
},
created() {
this.form = this.getForm('uniForms')
this.formItem = this.getForm('uniFormsItem')
if (this.formItem) {
if (this.formItem.name) {
this.rename = this.formItem.name
this.form.inputChildrens.push(this)
}
}
this.$nextTick(() => {
this.load()
})
},
methods: {
onPropsChange() {
this._treeData = []
this.selectedIndex = 0
this.load()
},
load() {
if (this.readonly) {
this._processReadonly(this.localdata, this.value)
return
}
if (this.isLocaldata) {
this.loadData()
this.inputSelected = this.selected.slice(0)
} else if (this.value.length) {
this.getTreePath(() => {
this.inputSelected = this.selected.slice(0)
})
}
},
getForm(name = 'uniForms') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false;
parentName = parent.$options.name;
}
return parent;
},
show() {
this.isOpened = true
this.$nextTick(() => {
this.$refs.pickerView.updateData({
treeData: this._treeData,
selected: this.selected,
selectedIndex: this.selectedIndex
})
<template>
<view class="uni-data-tree">
<view class="uni-data-tree-input" @click="handleInput">
<slot :options="options" :data="inputSelected" :error="errorMessage">
<view class="input-value" :class="{'input-value-border': border}">
<text v-if="errorMessage" class="selected-area error-text">{{errorMessage}}</text>
<view v-else-if="loading && !isOpened" class="selected-area">
<uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
</view>
<scroll-view v-else-if="inputSelected.length" class="selected-area" scroll-x="true">
<view class="selected-list">
<view class="selected-item" v-for="(item,index) in inputSelected" :key="index">
<text>{{item.text}}</text><text v-if="index<inputSelected.length-1" class="input-split-line">{{split}}</text>
</view>
</view>
</scroll-view>
<text v-else class="selected-area placeholder">{{placeholder}}</text>
<view class="arrow-area" v-if="!readonly">
<view class="input-arrow"></view>
</view>
</view>
</slot>
</view>
<view class="uni-data-tree-cover" v-if="isOpened" @click="handleClose"></view>
<view class="uni-data-tree-dialog" v-if="isOpened">
<view class="dialog-caption">
<view class="title-area">
<text class="dialog-title">{{popupTitle}}</text>
</view>
<view class="dialog-close" @click="handleClose">
<view class="dialog-close-plus" data-id="close"></view>
<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
</view>
</view>
<data-picker-view class="picker-view" ref="pickerView" v-model="value" :localdata="localdata" :preload="preload"
:collection="collection" :field="field" :orderby="orderby" :where="where" :step-searh="stepSearh" :self-field="selfField"
:parent-field="parentField" :managed-mode="true" @change="onchange" @datachange="ondatachange" @nodeclick="onnodeclick"></data-picker-view>
</view>
</view>
</template>
<script>
import dataPicker from "../uni-data-pickerview/uni-data-picker.js"
import DataPickerView from "../uni-data-pickerview/uni-data-pickerview.vue"
/**
* uni-data-picker
* @description uni-data-picker
* @tutorial https://uniapp.dcloud.net.cn/uniCloud/uni-data-picker
* @property {String} popup-title 弹出窗口标题
* @property {Array} localdata 本地数据,参考
* @property {Boolean} border = [true|false] 是否有边框
* @property {Boolean} readonly = [true|false] 是否仅读
* @property {Boolean} preload = [true|false] 是否预加载数据
* @value true 开启预加载数据,点击弹出窗口后显示已加载数据
* @value false 关闭预加载数据,点击弹出窗口后开始加载数据
* @property {Boolean} step-searh = [true|false] 是否分布查询
* @value true 启用分布查询,仅查询当前选中节点
* @value false 关闭分布查询,一次查询出所有数据
* @property {String|DBFieldString} self-field 分布查询当前字段名称
* @property {String|DBFieldString} parent-field 分布查询父字段名称
* @property {String|DBCollectionString} collection 表名
* @property {String|DBFieldString} field 查询字段,多个字段用 `,` 分割
* @property {String} orderby 排序字段及正序倒叙设置
* @property {String|JQLString} where 查询条件
* @event {Function} popupshow 弹出的选择窗口打开时触发此事件
* @event {Function} popuphide 弹出的选择窗口关闭时触发此事件
*/
export default {
name: 'UniDataPicker',
mixins: [dataPicker],
components: {
DataPickerView
},
props: {
options: {
type: [Object, Array],
default () {
return {}
}
},
popupTitle: {
type: String,
default: '请选择'
},
placeholder: {
type: String,
default: '请选择'
},
heightMobile: {
type: String,
default: ''
},
readonly: {
type: Boolean,
default: false
},
border: {
type: Boolean,
default: true
},
split: {
type: String,
default: '/'
}
},
data() {
return {
isOpened: false,
inputSelected: []
}
},
created() {
this.form = this.getForm('uniForms')
this.formItem = this.getForm('uniFormsItem')
if (this.formItem) {
if (this.formItem.name) {
this.rename = this.formItem.name
this.form.inputChildrens.push(this)
}
}
this.$nextTick(() => {
this.load()
})
},
methods: {
onPropsChange() {
this._treeData = []
this.selectedIndex = 0
this.load()
},
load() {
if (this.readonly) {
this._processReadonly(this.localdata, this.value)
return
}
if (this.isLocaldata) {
this.loadData()
this.inputSelected = this.selected.slice(0)
} else if (!this.parentField && !this.selfField && this.value) {
this.getNodeData(() => {
this.inputSelected = this.selected.slice(0)
})
} else if (this.value.length) {
this.getTreePath(() => {
this.inputSelected = this.selected.slice(0)
})
}
},
getForm(name = 'uniForms') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false;
parentName = parent.$options.name;
}
return parent;
},
show() {
this.isOpened = true
this.$nextTick(() => {
this.$refs.pickerView.updateData({
treeData: this._treeData,
selected: this.selected,
selectedIndex: this.selectedIndex
})
})
this.$emit('popupopened')
},
hide() {
this.$emit('popupopened')
},
hide() {
this.isOpened = false
this.$emit('popupclosed')
},
handleInput() {
if (this.readonly) {
return
}
this.show()
},
handleClose(e) {
this.hide()
this.$emit('popupclosed')
},
handleInput() {
if (this.readonly) {
return
}
this.show()
},
handleClose(e) {
this.hide()
},
onnodeclick(e) {
this.$emit('nodeclick', e)
},
ondatachange(e) {
this._treeData = this.$refs.pickerView._treeData
},
onchange(e) {
this.hide()
this.inputSelected = e
this._dispatchEvent(e)
},
_processReadonly(dataList, valueArray) {
var isTree = dataList.findIndex((item) => {
return item.children
})
if (isTree > -1) {
if (Array.isArray(valueArray)) {
let inputValue = valueArray[valueArray.length - 1]
if (typeof inputValue === 'object' && inputValue.value) {
inputValue = inputValue.value
}
}
this.inputSelected = this._findNodePath(inputValue, this.localdata)
return
}
let result = []
for (let i = 0; i < valueArray.length; i++) {
var value = valueArray[i]
var item = dataList.find((v) => {
return v.value == value
})
if (item) {
result.push(item)
}
}
if (result.length) {
this.inputSelected = result
}
},
_filterForArray(data, valueArray) {
var result = []
for (let i = 0; i < valueArray.length; i++) {
var value = valueArray[i]
var found = data.find((item) => {
return item.value == value
})
if (found) {
result.push(found)
}
}
return result
},
_dispatchEvent(selected) {
var value = new Array(selected.length)
for (var i = 0; i < selected.length; i++) {
value[i] = selected[i].value
}
if (this.formItem) {
const item = selected[selected.length - 1]
this.formItem.setValue(item.value)
}
this.$emit('change', {
detail: {
value: selected
}
})
}
}
}
</script>
<style scoped>
.uni-data-tree {
position: relative;
font-size: 14px;
}
.error-text {
color: #DD524D;
}
},
ondatachange(e) {
this._treeData = this.$refs.pickerView._treeData
},
onchange(e) {
this.hide()
this.inputSelected = e
this._dispatchEvent(e)
},
_processReadonly(dataList, valueArray) {
var isTree = dataList.findIndex((item) => {
return item.children
})
if (isTree > -1) {
if (Array.isArray(valueArray)) {
let inputValue = valueArray[valueArray.length - 1]
if (typeof inputValue === 'object' && inputValue.value) {
inputValue = inputValue.value
}
}
this.inputSelected = this._findNodePath(inputValue, this.localdata)
return
}
let result = []
for (let i = 0; i < valueArray.length; i++) {
var value = valueArray[i]
var item = dataList.find((v) => {
return v.value == value
})
if (item) {
result.push(item)
}
}
if (result.length) {
this.inputSelected = result
}
},
_filterForArray(data, valueArray) {
var result = []
for (let i = 0; i < valueArray.length; i++) {
var value = valueArray[i]
var found = data.find((item) => {
return item.value == value
})
if (found) {
result.push(found)
}
}
return result
},
_dispatchEvent(selected) {
var value = new Array(selected.length)
for (var i = 0; i < selected.length; i++) {
value[i] = selected[i].value
}
if (this.formItem) {
const item = selected[selected.length - 1]
this.formItem.setValue(item.value)
}
this.$emit('change', {
detail: {
value: selected
}
})
}
}
}
</script>
<style scoped>
.uni-data-tree {
position: relative;
font-size: 14px;
}
.error-text {
color: #DD524D;
}
.input-value {
/* #ifndef APP-NVUE */
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
font-size: 14px;
line-height: 38px;
padding: 0 5px;
overflow: hidden;
/* #ifdef APP-NVUE */
height: 40px;
/* #endif */
}
.input-value-border {
border: 1px solid #e5e5e5;
border-radius: 5px;
}
.selected-area {
flex: 1;
overflow: hidden;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
/* #endif */
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
font-size: 14px;
line-height: 38px;
padding: 0 5px;
overflow: hidden;
/* #ifdef APP-NVUE */
height: 40px;
/* #endif */
}
.input-value-border {
border: 1px solid #e5e5e5;
border-radius: 5px;
}
.selected-area {
flex: 1;
overflow: hidden;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.load-more {
/* #ifndef APP-NVUE */
margin-right: auto;
/* #endif */
/* #ifdef APP-NVUE */
width: 40px;
/* #endif */
}
.selected-list {
/* #endif */
/* #ifdef APP-NVUE */
width: 40px;
/* #endif */
}
.selected-list {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: nowrap;
padding: 0 5px;
}
.selected-item {
flex-direction: row;
/* #endif */
flex-direction: row;
flex-wrap: nowrap;
padding: 0 5px;
}
.selected-item {
flex-direction: row;
padding: 0 1px;
/* #ifndef APP-NVUE */
white-space: nowrap;
/* #endif */
}
.placeholder {
color: grey;
}
.input-split-line {
opacity: .5;
}
.arrow-area {
position: relative;
/* #endif */
}
.placeholder {
color: grey;
}
.input-split-line {
opacity: .5;
}
.arrow-area {
position: relative;
width: 20px;
/* #ifndef APP-NVUE */
/* #ifndef APP-NVUE */
margin-left: auto;
display: flex;
/* #endif */
justify-content: center;
transform: rotate(-45deg);
transform-origin: center;
}
.input-arrow {
width: 7px;
height: 7px;
border-left: 1px solid #999;
border-bottom: 1px solid #999;
}
.uni-data-tree-cover {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .4);
/* #endif */
justify-content: center;
transform: rotate(-45deg);
transform-origin: center;
}
.input-arrow {
width: 7px;
height: 7px;
border-left: 1px solid #999;
border-bottom: 1px solid #999;
}
.uni-data-tree-cover {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .4);
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
z-index: 100;
}
.uni-data-tree-dialog {
position: fixed;
left: 0;
top: 20%;
right: 0;
bottom: 0;
background-color: #FFFFFF;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
/* #endif */
flex-direction: column;
z-index: 100;
}
.uni-data-tree-dialog {
position: fixed;
left: 0;
top: 20%;
right: 0;
bottom: 0;
background-color: #FFFFFF;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
z-index: 102;
overflow: hidden;
/* #ifdef APP-NVUE */
width: 750rpx;
/* #endif */
}
.dialog-caption {
position: relative;
/* #endif */
flex-direction: column;
z-index: 102;
overflow: hidden;
/* #ifdef APP-NVUE */
width: 750rpx;
/* #endif */
}
.dialog-caption {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
border-bottom: 1px solid #f0f0f0;
}
.title-area {
/* #endif */
flex-direction: row;
border-bottom: 1px solid #f0f0f0;
}
.title-area {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
/* #endif */
align-items: center;
/* #ifndef APP-NVUE */
margin: auto;
/* #endif */
padding: 0 10px;
}
.dialog-title {
font-weight: bold;
line-height: 44px;
}
.dialog-close {
position: absolute;
top: 0;
right: 0;
/* #endif */
padding: 0 10px;
}
.dialog-title {
font-weight: bold;
line-height: 44px;
}
.dialog-close {
position: absolute;
top: 0;
right: 0;
bottom: 0;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
padding: 0 15px;
}
.dialog-close-plus {
width: 16px;
height: 2px;
background-color: #666;
border-radius: 2px;
transform: rotate(45deg);
}
.dialog-close-rotate {
position: absolute;
transform: rotate(-45deg);
}
.picker-view {
flex: 1;
overflow: hidden;
}
/* #ifdef H5 */
@media all and (min-width: 768px) {
.uni-data-tree-cover {
background-color: transparent;
}
.uni-data-tree-dialog {
position: absolute;
top: 100%;
height: auto;
min-height: 400px;
max-height: 50vh;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, .3);
}
.dialog-caption {
display: none;
}
}
/* #endif */
/* #endif */
flex-direction: row;
align-items: center;
padding: 0 15px;
}
.dialog-close-plus {
width: 16px;
height: 2px;
background-color: #666;
border-radius: 2px;
transform: rotate(45deg);
}
.dialog-close-rotate {
position: absolute;
transform: rotate(-45deg);
}
.picker-view {
flex: 1;
overflow: hidden;
}
/* #ifdef H5 */
@media all and (min-width: 768px) {
.uni-data-tree-cover {
background-color: transparent;
}
.uni-data-tree-dialog {
position: absolute;
top: 100%;
height: auto;
min-height: 400px;
max-height: 50vh;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, .3);
}
.dialog-caption {
display: none;
}
}
/* #endif */
</style>
......@@ -105,7 +105,11 @@ export default {
return this.localdata.length > 0
},
postField() {
return `${this.field}, ${this.parentField} as parent_value`
let fields = [this.field];
if (this.parentField) {
fields.push(`${this.parentField} as parent_value`);
}
return fields.join(',');
}
},
created() {
......@@ -192,6 +196,23 @@ export default {
return db
},
getNodeData(callback) {
if (this.loading) {
return
}
this.loading = true
this.getCommand({
field: this.postField,
where: this._pathWhere()
}).then((res) => {
this.loading = false
this.selected = res.result.data
callback && callback()
}).catch((err) => {
this.loading = false
this.errorMessage = err
})
},
getTreePath(callback) {
if (this.loading) {
return
......@@ -280,13 +301,29 @@ export default {
this.errorMessage = err
})
},
_pathWhere() {
let result = []
let where_field = this._getParentNameByField();
if (where_field) {
result.push(`${where_field} == '${this.value}'`)
}
if (this.where) {
return `(${this.where}) && (${result.join(' || ')})`
}
return result.join(' || ')
},
_postWhere() {
let result = []
let selected = this.selected
result.push(`${this.parentField} == null`)
let parentField = this.parentField
if (parentField) {
result.push(`${parentField} == null || ${parentField} == ""`)
}
if (selected.length) {
for (var i = 0; i < selected.length - 1; i++) {
result.push(`${this.parentField} == '${selected[i].value}'`)
result.push(`${parentField} == '${selected[i].value}'`)
}
}
......@@ -309,6 +346,24 @@ export default {
return result.join(' || ')
},
_getParentNameByField() {
const fields = this.field.split(',');
let where_field = null;
for (let i = 0; i < fields.length; i++) {
const items = fields[i].split('as');
if (items.length < 2) {
continue;
}
if (items[1].trim() === 'value') {
where_field = items[0].trim();
break;
}
}
return where_field
},
_isTreeView() {
return (this.parentField && this.selfField)
},
_updateSelected() {
var dl = this.dataList
var sl = this.selected
......@@ -388,7 +443,7 @@ export default {
child[key] = node[key]
}
}
if (parent_value !== null) {
if (parent_value !== undefined) {
child.parent_value = parent_value
}
result.push(child)
......
......@@ -110,6 +110,11 @@
hasNodes
} = this._updateBindData()
if (!this._isTreeView()) {
this.onSelectedChange(node, true)
return
}
if (this.isLocaldata && (!hasNodes || isleaf)) {
this.onSelectedChange(node, true)
return
......
{
"id": "uni-data-picker",
"displayName": "DataPicker 数据驱动的picker选择器",
"version": "0.2.0",
"version": "0.3.1",
"description": "Picker选择器",
"keywords": [
"",
......
## DataPicker 级联选择
> **组件名:uni-data-picker**
> 代码块: `uDataPicker`
> 关联组件:`uni-data-pickerview`、`uni-load-more`。
......@@ -18,6 +19,7 @@
在uniCloud数据表中新建表“uni-id-address”和“opendb-city-china”,这2个表的schema自带foreignKey关联。在“uni-id-address”表的表结构页面使用schema2code生成前端页面,会自动生成地址管理的维护页面,自动从“opendb-city-china”表包含的中国所有省市区信息里选择地址。
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ,请自行手动安装
> - 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
......@@ -50,11 +52,12 @@
|parent-field |String | | |分步查询时父字段名称|
|collection |String | | |表名。支持输入多个表名,用 `,` 分割|
|field |String | | |查询字段,多个字段用 `,` 分割|
|where |String | | |查询条件,内容较多,另见jql文档:[详情](https://uniapp.dcloud.net.cn/uniCloud/unicloud-db?id=jsquery)|
|where |String | | |查询条件,内容较多,另见jql文档:[详情](https://uniapp.dcloud.net.cn/uniCloud/uni-clientDB?id=jsquery)|
|orderby |String | | |排序字段及正序倒叙设置|
|popup-title |String | | |弹出层标题|
> ****
> `collection/where/orderby` 和 `<unicloud-db>` 的用法一致,[详情](https://uniapp.dcloud.net.cn/uniCloud/unicloud-db)
......@@ -75,6 +78,7 @@
#### 云端数据
> **注意事项**
> - 云端数据需要关联服务空间
> - 下面示例中使用的表 `opendb-city-china`(中国城市省市区数据,含港澳台), 在[uniCloud控制台](https://unicloud.dcloud.net.cn/)使用opendb创建,[详情](https://gitee.com/dcloud/opendb)
......@@ -82,12 +86,14 @@
```html
<template>
<view>
<uni-data-picker placeholder="请选择地址" popup-title="请选择城市" collection="opendb-city-china" field="code as value, name as text" orderby="value asc" :step-searh="true" :self-field="code" parent-field="parent_code"
<uni-data-picker placeholder="请选择地址" popup-title="请选择城市" collection="opendb-city-china" field="code as value, name as text" orderby="value asc" :step-searh="true" self-field="code" parent-field="parent_code"
@change="onchange" @nodeclick="onnodeclick">
</uni-data-picker>
</view>
</template>
```
```js
<script>
export default {
data() {
......@@ -117,7 +123,9 @@
<uni-data-picker :localdata="items" popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
</view>
</template>
```
```js
<script>
export default {
data() {
......@@ -178,6 +186,7 @@
```
> **注意事项**
> `localdata` 和 `collection` 同时配置时,`localdata` 优先
......@@ -192,7 +201,9 @@
</uni-data-picker>
</view>
</template>
```
```js
<script>
export default {
data() {
......
// 表单校验规则由 schema2code 生成,不建议直接修改校验规则,而建议通过 schema2code 生成, 详情: https://uniapp.dcloud.net.cn/uniCloud/schema
const validator = {
"role_id": {
"rules": [
{
"required": true
},
{
"format": "string"
}
],
"label": "唯一ID"
},
"role_name": {
"rules": [
{
"format": "string"
}
],
"label": "名称"
},
"permission": {
"rules": [
{
"format": "array"
}
],
"label": "权限"
},
"comment": {
"rules": [
{
"format": "string"
}
],
"label": "备注"
},
"create_date": {
"rules": [
{
"format": "timestamp"
}
]
}
}
const enumConverter = {}
export { validator, enumConverter }
{
"id": "uni-id-roles",
"displayName": "uni-id-roles",
"version": "1.0.0",
"description": "",
"keywords": [
"uni-id-roles"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"uniCloud",
"Admin插件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uni-dateformat",
"uni-badge",
"uni-icons",
"uni-load-more",
"uni-link",
"uni-forms",
"uni-group",
"uni-list",
"uni-fab",
"uni-datetime-picker",
"uni-data-picker",
"uni-file-picker",
"uni-easyinput",
"uni-data-checkbox"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "u",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
<template>
<view class="uni-container">
<uni-forms ref="form" :value="formData" validate-trigger="submit" err-show-type="toast">
<uni-forms-item name="role_id" label="唯一ID" required>
<uni-easyinput placeholder="角色唯一标识,不可修改,不允许重复" v-model="formData.role_id" trim="both" />
</uni-forms-item>
<uni-forms-item name="role_name" label="名称">
<uni-easyinput placeholder="角色名称" v-model="formData.role_name" trim="both" />
</uni-forms-item>
<uni-forms-item name="permission" label="权限">
<uni-data-checkbox :multiple="true" v-model="formData.permission" />
</uni-forms-item>
<uni-forms-item name="comment" label="备注">
<uni-easyinput placeholder="备注" v-model="formData.comment" trim="both" />
</uni-forms-item>
<uni-forms-item name="create_date" label="">
<uni-datetime-picker return-type="timestamp" :value="formData.create_date" />
</uni-forms-item>
<view class="uni-button-group">
<button type="primary" class="uni-button" @click="submit">提交</button>
</view>
</uni-forms>
</view>
</template>
<script>
import { validator } from '../../js_sdk/validator/uni-id-roles.js';
const db = uniCloud.database();
const dbCollectionName = 'uni-id-roles';
function getValidator(fields) {
let reuslt = {}
for (let key in validator) {
if (fields.indexOf(key) > -1) {
reuslt[key] = validator[key]
}
}
return reuslt
}
export default {
data() {
return {
formData: {
"role_id": "",
"role_name": "",
"permission": [],
"comment": "",
"create_date": null
},
formOptions: {},
rules: {
...getValidator(["role_id","role_name","permission","comment","create_date"])
}
}
},
onReady() {
this.$refs.form.setRules(this.rules)
},
methods: {
/**
* 触发表单提交
*/
submit() {
uni.showLoading({
mask: true
})
this.$refs.form.submit().then((res) => {
this.submitForm(res)
}).catch((errors) => {
uni.hideLoading()
})
},
submitForm(value) {
// 使用 clientDB 提交数据
db.collection(dbCollectionName).add(value).then((res) => {
uni.showToast({
icon: 'none',
title: '新增成功'
})
this.getOpenerEventChannel().emit('refreshData')
setTimeout(() => uni.navigateBack(), 500)
}).catch((err) => {
uni.showModal({
content: err.message || '请求服务失败',
showCancel: false
})
}).finally(() => {
uni.hideLoading()
})
}
}
}
</script>
<style>
.uni-container {
padding: 15px;
}
.uni-input-border,
.uni-textarea-border {
width: 100%;
font-size: 14px;
color: #666;
border: 1px #e5e5e5 solid;
border-radius: 5px;
box-sizing: border-box;
}
.uni-input-border {
padding: 0 10px;
height: 35px;
}
.uni-textarea-border {
padding: 10px;
height: 80px;
}
.uni-button-group {
margin-top: 50px;
display: flex;
justify-content: center;
}
.uni-button {
width: 184px;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
line-height: 1;
margin: 0;
}
</style>
<template>
<view class="container">
<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="options" collection="uni-id-roles" field="role_id,role_name,permission,comment,create_date" :where="queryWhere" :getone="true" :manual="true">
<view v-if="error">{{error.message}}</view>
<view v-else-if="loading">
<uni-load-more :contentText="loadMore" status="loading"></uni-load-more>
</view>
<view v-else-if="data">
<view>
<text>唯一ID:</text>
<text>{{data.role_id}}</text>
</view>
<view>
<text>名称:</text>
<text>{{data.role_name}}</text>
</view>
<view>
<text>权限:</text>
<text>{{data.permission}}</text>
</view>
<view>
<text>备注:</text>
<text>{{data.comment}}</text>
</view>
<view>
<text>create_date:</text>
<uni-dateformat :date="data.create_date" :threshold="[0, 0]" />
</view>
</view>
</unicloud-db>
<view class="btns">
<button type="primary" @click="handleUpdate">修改</button>
<button type="warn" class="btn-delete" @click="handleDelete">删除</button>
</view>
</view>
</template>
<script>
// 由schema2code生成,包含校验规则和enum静态数据
import { enumConverter } from '../../js_sdk/validator/uni-id-roles.js';
export default {
data() {
return {
queryWhere: '',
loadMore: {
contentdown: '',
contentrefresh: '',
contentnomore: ''
},
options: {
// 将scheme enum 属性静态数据中的value转成text
...enumConverter
}
}
},
onLoad(e) {
this._id = e.id
},
onReady() {
if (this._id) {
this.queryWhere = '_id=="' + this._id + '"'
}
},
methods: {
handleUpdate() {
// 打开修改页面
uni.navigateTo({
url: '../uni-id-roles/edit?id=' + this._id,
events: {
// 监听修改页面成功修改数据后, 刷新当前页面数据
refreshData: () => {
this.$refs.udb.loadData({
clear: true
})
}
}
})
},
handleDelete() {
this.$refs.udb.remove(this._id, {
success: (res) => {
// 删除数据成功后跳转到list页面
uni.navigateTo({
url: '../uni-id-roles/list'
})
}
})
}
}
}
</script>
<style>
.container {
padding: 10px;
}
.btns {
margin-top: 10px;
display: flex;
flex-direction: row;
}
.btns button {
flex: 1;
}
.btn-delete {
margin-left: 10px;
}
</style>
<template>
<view class="uni-container">
<uni-forms ref="form" :value="formData" validate-trigger="submit" err-show-type="toast">
<uni-forms-item name="role_id" label="唯一ID" required>
<uni-easyinput placeholder="角色唯一标识,不可修改,不允许重复" v-model="formData.role_id" trim="both" />
</uni-forms-item>
<uni-forms-item name="role_name" label="名称">
<uni-easyinput placeholder="角色名称" v-model="formData.role_name" trim="both" />
</uni-forms-item>
<uni-forms-item name="permission" label="权限">
<uni-data-checkbox :multiple="true" v-model="formData.permission" />
</uni-forms-item>
<uni-forms-item name="comment" label="备注">
<uni-easyinput placeholder="备注" v-model="formData.comment" trim="both" />
</uni-forms-item>
<uni-forms-item name="create_date" label="">
<uni-datetime-picker return-type="timestamp" :value="formData.create_date" />
</uni-forms-item>
<view class="uni-button-group">
<button type="primary" class="uni-button" @click="submit">提交</button>
</view>
</uni-forms>
</view>
</template>
<script>
import { validator } from '../../js_sdk/validator/uni-id-roles.js';
const db = uniCloud.database();
const dbCollectionName = 'uni-id-roles';
function getValidator(fields) {
let reuslt = {}
for (let key in validator) {
if (fields.indexOf(key) > -1) {
reuslt[key] = validator[key]
}
}
return reuslt
}
export default {
data() {
return {
formData: {
"role_id": "",
"role_name": "",
"permission": [],
"comment": "",
"create_date": null
},
formOptions: {},
rules: {
...getValidator(["role_id","role_name","permission","comment","create_date"])
}
}
},
onLoad(e) {
const id = e.id
this.formDataId = id
this.getDetail(id)
},
onReady() {
this.$refs.form.setRules(this.rules)
},
methods: {
/**
* 触发表单提交
*/
submit() {
uni.showLoading({
mask: true
})
this.$refs.form.submit().then((res) => {
this.submitForm(res)
}).catch((errors) => {
uni.hideLoading()
})
},
submitForm(value) {
// 使用 clientDB 提交数据
db.collection(dbCollectionName).doc(this.formDataId).update(value).then((res) => {
uni.showToast({
icon: 'none',
title: '修改成功'
})
this.getOpenerEventChannel().emit('refreshData')
setTimeout(() => uni.navigateBack(), 500)
}).catch((err) => {
uni.showModal({
content: err.message || '请求服务失败',
showCancel: false
})
}).finally(() => {
uni.hideLoading()
})
},
/**
* 获取表单数据
* @param {Object} id
*/
getDetail(id) {
uni.showLoading({
mask: true
})
db.collection(dbCollectionName).doc(id).get().then((res) => {
const data = res.result.data[0]
if (data) {
this.formData = data
}
}).catch((err) => {
uni.showModal({
content: err.message || '请求服务失败',
showCancel: false
})
}).finally(() => {
uni.hideLoading()
})
}
}
}
</script>
<style>
.uni-container {
padding: 15px;
}
.uni-input-border,
.uni-textarea-border {
width: 100%;
font-size: 14px;
color: #666;
border: 1px #e5e5e5 solid;
border-radius: 5px;
box-sizing: border-box;
}
.uni-input-border {
padding: 0 10px;
height: 35px;
}
.uni-textarea-border {
padding: 10px;
height: 80px;
}
.uni-button-group {
margin-top: 50px;
display: flex;
justify-content: center;
}
.uni-button {
width: 184px;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
line-height: 1;
margin: 0;
}
</style>
<template>
<view class="container">
<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" collection="uni-id-roles" field="">
<view v-if="error">{{error.message}}</view>
<view v-else-if="data">
<uni-list>
<uni-list-item v-for="(item, index) in data" :key="index" showArrow :clickable="true" @click="handleItemClick(item._id)">
<view slot="body">
<!-- 此处默认显示为_id,请根据需要自行修改为其他字段 -->
{{item._id}}
</view>
</uni-list-item>
</uni-list>
</view>
<uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
</unicloud-db>
<uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
</view>
</template>
<script>
export default {
data() {
return {
loadMore: {
contentdown: '',
contentrefresh: '',
contentnomore: ''
}
}
},
onPullDownRefresh() {
this.$refs.udb.loadData({
clear: true
}, () => {
uni.stopPullDownRefresh()
})
},
onReachBottom() {
this.$refs.udb.loadMore()
},
methods: {
handleItemClick(id) {
uni.navigateTo({
url: './detail?id=' + id
})
},
fabClick() {
// 打开新增页面
uni.navigateTo({
url: './add',
events: {
// 监听新增数据成功后, 刷新当前页面数据
refreshData: () => {
this.$refs.udb.loadData({
clear: true
})
}
}
})
}
}
}
</script>
<style>
</style>
// 表单校验规则由 schema2code 生成,不建议直接修改校验规则,而建议通过 schema2code 生成, 详情: https://uniapp.dcloud.net.cn/uniCloud/schema
const validator = {
"avatar": {
"rules": [{
"format": "string"
}],
"label": "头像地址"
},
"gender": {
"rules": [{
"format": "int"
},
{
"range": [{
"text": "未知",
"value": 0
},
{
"text": "",
"value": 1
},
{
"text": "",
"value": 2
}
]
}
],
"defaultValue": 0,
"label": "性别"
},
"mobile": {
"rules": [{
"format": "string"
},
{
"pattern": "^\\+?[0-9-]{3,20}$"
}
],
"label": "手机号码"
},
"nickname": {
"rules": [{
required: true,
errorMessage: '请输入昵称',
},
{
minLength: 3,
maxLength: 10,
errorMessage: '昵称长度在 {minLength} 到 {maxLength} 个字符',
}
],
"label": "昵称"
}
}
const enumConverter = {
"gender_valuetotext": {
"0": "未知",
"1": "",
"2": ""
}
}
export {
validator,
enumConverter
}
{
"id": "uni-id-users",
"displayName": "uni-id-users",
"version": "1.0.0",
"description": "",
"keywords": [
"uni-id-users"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"uniCloud",
"Admin插件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uni-dateformat",
"uni-badge",
"uni-icons",
"uni-load-more",
"uni-link",
"uni-forms",
"uni-group",
"uni-list",
"uni-fab",
"uni-datetime-picker",
"uni-data-picker",
"uni-file-picker",
"uni-easyinput",
"uni-data-checkbox"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "u",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
<template>
<view class="uni-container">
<uni-forms ref="form" :value="formData" validate-trigger="submit" err-show-type="toast">
<uni-forms-item name="avatar" label="头像地址">
<uni-easyinput placeholder="头像地址" v-model="formData.avatar" trim="both" />
</uni-forms-item>
<uni-forms-item name="gender" label="性别">
<uni-data-checkbox v-model="formData.gender" :localdata="formOptions.gender_localdata" />
</uni-forms-item>
<uni-forms-item name="mobile" label="手机号码">
<uni-easyinput placeholder="手机号码" v-model="formData.mobile" trim="both" />
</uni-forms-item>
<uni-forms-item name="nickname" label="昵称">
<uni-easyinput placeholder="用户昵称" v-model="formData.nickname" trim="both" />
</uni-forms-item>
<view class="uni-button-group">
<button type="primary" class="uni-button" @click="submit">提交</button>
</view>
</uni-forms>
</view>
</template>
<script>
import { validator } from '../../js_sdk/validator/uni-id-users.js';
const db = uniCloud.database();
const dbCollectionName = 'uni-id-users';
function getValidator(fields) {
let reuslt = {}
for (let key in validator) {
if (fields.indexOf(key) > -1) {
reuslt[key] = validator[key]
}
}
return reuslt
}
export default {
data() {
return {
formData: {
"avatar": "",
"gender": 0,
"mobile": "",
"nickname": ""
},
formOptions: {
"gender_localdata": [
{
"text": "未知",
"value": 0
},
{
"text": "",
"value": 1
},
{
"text": "",
"value": 2
}
]
},
rules: {
...getValidator(["avatar","gender","mobile","nickname"])
}
}
},
onReady() {
this.$refs.form.setRules(this.rules)
},
methods: {
/**
* 触发表单提交
*/
submit() {
uni.showLoading({
mask: true
})
this.$refs.form.submit().then((res) => {
this.submitForm(res)
}).catch((errors) => {
uni.hideLoading()
})
},
submitForm(value) {
// 使用 clientDB 提交数据
db.collection(dbCollectionName).add(value).then((res) => {
uni.showToast({
icon: 'none',
title: '新增成功'
})
this.getOpenerEventChannel().emit('refreshData')
setTimeout(() => uni.navigateBack(), 500)
}).catch((err) => {
uni.showModal({
content: err.message || '请求服务失败',
showCancel: false
})
}).finally(() => {
uni.hideLoading()
})
}
}
}
</script>
<style>
.uni-container {
padding: 15px;
}
.uni-input-border,
.uni-textarea-border {
width: 100%;
font-size: 14px;
color: #666;
border: 1px #e5e5e5 solid;
border-radius: 5px;
box-sizing: border-box;
}
.uni-input-border {
padding: 0 10px;
height: 35px;
}
.uni-textarea-border {
padding: 10px;
height: 80px;
}
.uni-button-group {
margin-top: 50px;
display: flex;
justify-content: center;
}
.uni-button {
width: 184px;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
line-height: 1;
margin: 0;
}
</style>
<template>
<view class="container">
<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="options" collection="uni-id-users,opendb-department,uni-id-roles" field="avatar,gender,mobile,nickname" :where="queryWhere" :getone="true" :manual="true">
<view v-if="error">{{error.message}}</view>
<view v-else-if="loading">
<uni-load-more :contentText="loadMore" status="loading"></uni-load-more>
</view>
<view v-else-if="data">
<view>
<text>头像地址:</text>
<text>{{data.avatar}}</text>
</view>
<view>
<text>性别:</text>
<text>{{options.gender_valuetotext[data.gender]}}</text>
</view>
<view>
<text>手机号码:</text>
<text>{{data.mobile}}</text>
</view>
<view>
<text>昵称:</text>
<text>{{data.nickname}}</text>
</view>
</view>
</unicloud-db>
<view class="btns">
<button type="primary" @click="handleUpdate">修改</button>
<button type="warn" class="btn-delete" @click="handleDelete">删除</button>
</view>
</view>
</template>
<script>
// 由schema2code生成,包含校验规则和enum静态数据
import { enumConverter } from '../../js_sdk/validator/uni-id-users.js';
export default {
data() {
return {
queryWhere: '',
loadMore: {
contentdown: '',
contentrefresh: '',
contentnomore: ''
},
options: {
// 将scheme enum 属性静态数据中的value转成text
...enumConverter
}
}
},
onLoad(e) {
this._id = e.id
},
onReady() {
if (this._id) {
this.queryWhere = '_id=="' + this._id + '"'
}
},
methods: {
handleUpdate() {
// 打开修改页面
uni.navigateTo({
url: '../uni-id-users/edit?id=' + this._id,
events: {
// 监听修改页面成功修改数据后, 刷新当前页面数据
refreshData: () => {
this.$refs.udb.loadData({
clear: true
})
}
}
})
},
handleDelete() {
this.$refs.udb.remove(this._id, {
success: (res) => {
// 删除数据成功后跳转到list页面
uni.navigateTo({
url: '../uni-id-users/list'
})
}
})
}
}
}
</script>
<style>
.container {
padding: 10px;
}
.btns {
margin-top: 10px;
display: flex;
flex-direction: row;
}
.btns button {
flex: 1;
}
.btn-delete {
margin-left: 10px;
}
</style>
<template>
<view class="uni-container">
<uni-forms ref="form" :value="formData" :rules="rules" validate-trigger="submit" err-show-type="toast">
<uni-list-item>
<template v-slot:body>
<view class="avatar-box">
<image class="avatar-img" :src="formData.avatar || '/static/uni-center/logo.png'" @click="chooseImg" mode="aspectFill"></image>
</view>
</template>
</uni-list-item>
<uni-forms-item name="gender" label="性别" required>
<uni-data-checkbox v-model="formData.gender" :localdata="formOptions.gender_localdata" />
</uni-forms-item>
<uni-forms-item name="mobile" label="手机号码" required>
<uni-easyinput placeholder="手机号码" :disabled="true" v-model="formData.mobile" trim="both" />
</uni-forms-item>
<uni-forms-item name="nickname" label="昵称" required>
<uni-easyinput placeholder="用户昵称" v-model="formData.nickname" trim="both" />
</uni-forms-item>
<view class="uni-button-group">
<button type="primary" class="uni-button" @click="submit">修改</button>
</view>
</uni-forms>
</view>
</template>
<script>
import {
validator
} from '../../js_sdk/validator/uni-id-users.js';
import {
mapMutations
} from 'vuex';
const db = uniCloud.database();
const dbCollectionName = 'uni-id-users';
function getValidator(fields) {
let reuslt = {}
for (let key in validator) {
if (fields.indexOf(key) > -1) {
reuslt[key] = validator[key]
}
}
return reuslt
}
export default {
data() {
return {
formData: {
"avatar": "",
"gender": 1,
"mobile": "",
"nickname": ""
},
formOptions: {
"gender_localdata": [{
"text": "",
"value": 1
},
{
"text": "",
"value": 2
}
]
},
rules: {
...getValidator(["avatar", "gender", "mobile", "nickname"])
}
}
},
onLoad(e) {
let id = "60795c140983f8000192f235";
id = uni.getStorageSync('uni_id_uid');
this.formDataId = id
this.getDetail(id)
},
onReady() {
this.$refs.form.setRules(this.rules)
},
methods: {
...mapMutations({
setUserInfo:'user/login'
}),
// 选择图片
chooseImg(){
uni.chooseImage({
count:1,
success:(res)=> {
// 头像剪裁尺寸
let options = {
width:600,
height:600
}
uni.navigateTo({
url: '/pages/ucenter/edit/uploadCutImageToUnicloud',
success: res => {},
fail: () => {},
complete: () => {}
});
// 剪裁并上传头像
uni.navigateTo({
url:'/pages/ucenter/edit/uploadCutImageToUnicloud?path=' + res.tempFilePaths[0] + `&options=${JSON.stringify(options)}`,
animationType:"fade-in",
events:{
uploadAvatarAfter:({url})=>{
this.formData.avatar = url;
this.submitForm({avatar:url});
}
}
});
}
})
},
/**
* 触发表单提交
*/
submit() {
uni.showLoading({
mask: true
})
this.$refs.form.submit().then((res) => {
console.log(res);
this.submitForm(res)
}).catch((errors) => {
uni.hideLoading()
})
},
submitForm(value) {
// 使用 clientDB 提交数据
db.collection(dbCollectionName).doc(this.formDataId).update(value).then((res) => {
uni.showToast({
icon: 'none',
title: '修改成功'
})
this.setUserInfo(value);
// this.getOpenerEventChannel().emit('refreshData')
setTimeout(() => uni.navigateBack(), 500)
}).catch((err) => {
uni.showModal({
content: err.message || '请求服务失败',
showCancel: false
})
}).finally(() => {
uni.hideLoading()
})
},
/**
* 获取表单数据
* @param {Object} id
*/
getDetail(id) {
uni.showLoading({
mask: true
})
db.collection(dbCollectionName).doc(id).field('avatar,gender,mobile,nickname').get().then((res) => {
const data = res.result.data[0]
if (data) {
this.formData = data
}
}).catch((err) => {
uni.showModal({
content: err.message || '请求服务失败',
showCancel: false
})
}).finally(() => {
uni.hideLoading()
})
}
}
}
</script>
<style>
.uni-container {
padding: 15px;
}
.uni-input-border,
.uni-textarea-border {
width: 100%;
font-size: 14px;
color: #666;
border: 1px #e5e5e5 solid;
border-radius: 5px;
box-sizing: border-box;
}
.uni-input-border {
padding: 0 10px;
height: 35px;
}
.uni-textarea-border {
padding: 10px;
height: 80px;
}
.uni-button-group {
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.uni-button {
width: 184px;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
line-height: 1;
margin: 0;
}
.avatar-box{
width: 700rpx;
height: 200rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
}
.avatar-img{
width: 150rpx;
height: 150rpx;
border-radius: 75rpx;
border: #F8F8F8 solid 3px;
}
</style>
<template>
<view class="container">
<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" collection="uni-id-users" field="">
<view v-if="error">{{error.message}}</view>
<view v-else-if="data">
<uni-list>
<uni-list-item v-for="(item, index) in data" :key="index" showArrow :clickable="true" @click="handleItemClick(item._id)">
<view slot="body">
<!-- 此处默认显示为_id,请根据需要自行修改为其他字段 -->
{{item._id}}
</view>
</uni-list-item>
</uni-list>
</view>
<uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
</unicloud-db>
<uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
</view>
</template>
<script>
export default {
data() {
return {
loadMore: {
contentdown: '',
contentrefresh: '',
contentnomore: ''
}
}
},
onPullDownRefresh() {
this.$refs.udb.loadData({
clear: true
}, () => {
uni.stopPullDownRefresh()
})
},
onReachBottom() {
this.$refs.udb.loadMore()
},
methods: {
handleItemClick(id) {
uni.navigateTo({
url: './detail?id=' + id
})
},
fabClick() {
// 打开新增页面
uni.navigateTo({
url: './add',
events: {
// 监听新增数据成功后, 刷新当前页面数据
refreshData: () => {
this.$refs.udb.loadData({
clear: true
})
}
}
})
}
}
}
</script>
<style>
</style>
......@@ -370,7 +370,7 @@ $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
/* #endif */
height: $uni-img-size-base;
width: $uni-img-size-base;
margin-right: 10px;
marin-right: 10px;
}
.uni-icon-wrapper {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册