Skip to content

Great Teamwork
Great Teamwork

_milo / Great Teamwork

通知 13
Star 0
Fork 0
Great Teamwork
Great Teamwork
提交 80366185 编写于 作者: M m0_74163447
浏览文件
操作

个人信息修改界面

上级 e7e8b5df
隐藏空白更改
内联 并排
Showing with 616 addition and 0 deletion
teamwork/pages/my/my-modify.vue 0 → 100644
浏览文件 @ 80366185
<template>
<veiw class="main">
<view class="exit">
<view class="exit-btn"></view>
</view>
<view class="head-portrait">
<view class="head-portrait-icon"></view>
</view>
<view class="info">
<veiw class="nickname">
<span>用户名：</span>
<input type="text" :value="nickname" :valplaceholder='请输入用户名'></input>
</veiw>
<veiw class="school">
<span>学&emsp;校：</span>
<select-lay class="seclectSchool" :value="school" slabel="type" svalue="typeid" placeholder="请选择学校" :options="allSchool" @selectitem="selectitem"></select-lay>
</veiw>
<veiw class="tel">
<span>手机号：</span>
<input type="number" :value="tel" :vaplaceholder='请输入手机号'></input>
</veiw>
<veiw class="gender">
<span>性&emsp;别：</span>
<radio-group @change="change">
<label>
<radio :value="'0'" checked="checked" />男
<radio :value="'1'" />女
</label>
</radio-group>
</veiw>
</view>
<view class="confirm">
<button class="confirm-btn" @click="confirmModification()">确认修改</button>
</view>
</veiw>
</template>
<script>
export default {
data() {
return {
schoolChannelid:'',
nickname:'王二蛋',
school:'福州大学',
tel:'15305986885',
allSchool: [{
type: '福州大学',
typeid: 1
}, {
type: 'xx大学',
typeid: 2
}],
sex: [{
value: 1,
label: '男'
},
{
value: 2,
label: '女'
}]
}
},
methods:{
selectitem(index, item) {
this.schoolChannelid = item.typeid;
if (index >= 0) {
this.school = this.allSchool[index].typeid;
} else {
this.school = ""
}
},
confirmModification(){
uni.showModal({
title: '温馨提示', //提示标题
content: '确认修改你的个人信息吗', //提示内容
showCancel: true, //是否显示取消按钮
success: function (res) {
if (res.confirm) { //confirm为ture，代表用户点击确定
console.log('点击了确定按钮');
} else if (res.cancel) { //cancel为ture，代表用户点击取消
console.log('点击了取消按钮');
}
}
})
}
},
}
</script>
<style>
.main {
position: absolute;
width: 100%;
height: 100%;
background-color: #EDEEF0;
}
.exit{
/* border: 2rpx solid #000; */
height: 10%;
}
.exit-btn{
width: 70rpx;
height: 70rpx;
margin-top: 50rpx;
margin-left: 50rpx;
background-size:100% 100%;
background-image:url("/static/my/my-modify/exit-icon.png");
background-repeat:no-repeat;
}
.head-portrait{
height: 25%;
}
.head-portrait-icon {
margin-top: 100rpx;
margin-left: auto;
margin-right: auto;
width: 150rpx;
height: 150rpx;
border-radius: 50%;
background-size:100% 100%;
background-image:url("/static/my/main/head-portrait.png") ;
background-repeat:no-repeat;
}
.info{
width:70%;
height: 30%;
margin-left: auto;
margin-right: auto;
}
.nickname{
height: 15%;
display: flex;
align-items: center;
width: 100%;
border-bottom: 1px solid #ccc;
}
.school{
height: 15%;
margin-top: 10%;
display: flex;
align-items: center;
width: 100%;
border-bottom: 1px solid #ccc;
}
.tel{
height: 15%;
margin-top: 10%;
display: flex;
align-items: center;
width: 100%;
border-bottom: 1px solid #ccc;
}
.gender{
margin-top: 10%;
display: flex;
align-items: center;
width: 100%;
}
.confirm{
height: 25%;
}
.confirm-btn{
background-color:#F1992D ;
color: #FFFFFF;
width:70%;
height: 85rpx;
margin-top: 100rpx;
margin-left: auto;
margin-right: auto;
border-radius: 20rpx;
}
</style>
\ No newline at end of file
teamwork/uni_modules/select-lay/components/select-lay/select-lay.vue 0 → 100644
浏览文件 @ 80366185
<template>
<view class="uni-select-lay" :style="{'z-index':zindex}">
<input type="text" :name="name" v-model="value" class="uni-select-input">
<view class="uni-select-lay-select" :class="{'active':active}">
<!-- 禁用mask -->
<view class="uni-disabled" v-if="disabled"></view>
<!-- 禁用mask -->
<!-- 清空 -->
<view class="uni-select-lay-input-close" v-if="changevalue!=''&&this.active">
<text @click.stop="removevalue"></text>
</view>
<!-- 清空 -->
<input type="text" class="uni-select-lay-input" :class="{active:changevalue!=''&&changevalue!=placeholder}"
v-model="changevalue" :disabled="disabled" :placeholder="placeholder" @focus="unifocus"
@input="intchange" @blur="uniblur">
<view class="uni-select-lay-icon" :class="{disabled:disabled}" @click.stop="select"><text></text></view>
</view>
<scroll-view class="uni-select-lay-options" :scroll-y="true" v-show="active" @scroll="selectmove"
@touchstart="movetouch">
<template v-if="!changes">
<view class="uni-select-lay-item" v-if="showplaceholder" :class="{active:value==''}"
@click.stop="selectitem(-1,null)">
{{placeholder}}
</view>
<view class="uni-select-lay-item" :class="{active:value==item[svalue]}" v-for="(item,index) in options"
:key="index" @click.stop="selectitem(index,item)">{{item[slabel]}}</view>
</template>
<!-- 搜索 -->
<template v-else>
<template v-if="vlist.length>0">
<view class="uni-select-lay-item" :class="{active:value==item[svalue]}"
v-for="(item,index) in vlist" :key="index" @click.stop="selectitem(index,item)">{{item[slabel]}}
</view>
</template>
<template v-else>
<view class="nosearch">{{changesValue}}</view>
</template>
</template>
</scroll-view>
</view>
</template>
<script>
export default {
name: "select-lay",
props: {
disabled: {
type: Boolean,
default: false
},
zindex: {
type: Number,
default: 999
},
options: {
type: Array,
default () {
return []
}
},
name: {
type: String,
default: ''
},
value: {
type: String,
default: ''
},
placeholder: {
type: String,
default: '请选择'
},
showplaceholder: {
type: Boolean,
default: true
},
slabel: {
type: String,
default: 'label'
},
svalue: {
type: String,
default: 'value'
}
},
data() {
return {
active: false, //组件是否激活，
isfocus: false, //是否有焦点
isremove: false, //是否是因为点击清空才导致的失去焦点
ismove: false, //是否是因为移动才失去焦点
changevalue: "", //搜索框同步
oldvalue: "", //数据回滚
changes: false, //正在搜索
changesValue: "",
vlist: [], //搜索框查询的列表
settimer: null //value改变定时器
};
},
mounted() {
this.itemcheck();
},
watch: {
//value改变
value() {
this.itemcheck();
},
//初始化数组
options() {
// 此处判断是否有初始value,存在则判断显示文字
this.itemcheck();
}
},
methods: {
//判断数组跟当前active值
itemcheck() {
// 此处判断是否有初始value,存在则判断显示文字
if (this.value != "") {
// 展示plachhoder
//判断数组
if (this.options.length > 0) {
this.options.forEach(item => {
if (this.value == item[this.svalue]) {
this.oldvalue = this.changevalue = item[this.slabel];
return;
}
})
}
} else {
this.oldvalue = this.changevalue = "";
}
},
//点击组件
select() {
if (this.disabled) return;
this.active = !this.active;
if (this.active) {
this.changes = false;
} else {
this.changevalue = this.oldvalue;
}
},
// 获得焦点
unifocus() {
if (this.disabled) return;
this.active = true;
this.changes = false;
this.isfocus = true;
},
// 失去焦点
uniblur() {
this.isfocus = false;
// bug 点击组件列会先触发失去焦点，此时组件列事件不执行
setTimeout(() => {
if (this.isremove || this.ismove) {
this.isremove = false;
this.ismove = false;
} else {
this.changevalue = this.oldvalue;
this.isremove = false;
this.active = false;
}
}, 153)
},
movetouch() {
setTimeout(()=>{
if(this.isfocus){
this.ismove=false;
return;
}
if (!this.ismove) this.ismove = true;
},100)
// this.changes = false;
},
selectmove() {
setTimeout(()=>{
if(this.isfocus){
this.ismove=false;
return;
}
if (!this.ismove) this.ismove = true;
},100)
// this.changes = false;
},
//移除数据
removevalue() {
this.isremove = true;
this.changes = false;
this.changevalue = "";
},
//value 改变
intchange() {
if (this.changevalue == '') {
this.changes = false;
return;
};
if (this.oldvalue == this.changevalue) {
return;
}
this.vlist = [];
this.changes = true;
this.changesValue = "正在搜索...";
if (this.settimer) {
clearTimeout(this.settimer)
}
this.settimer = setTimeout(() => {
this.vlist = this.options.filter(item => {
return item[this.slabel].includes(this.changevalue)
});
if (this.vlist.length === 0) {
this.changesValue = "暂无匹配内容！";
}
}, 600)
},
//点击组件列
selectitem(index, item) {
this.changevalue = this.oldvalue;
this.active = false;
this.$emit("selectitem", index, item)
}
}
}
</script>
<style lang="scss" scoped>
.uni-select-lay {
position: relative;
z-index: 999;
.uni-select-input {
opacity: 0;
position: absolute;
z-index: -111;
}
// select部分
.uni-select-lay-select {
user-select: none;
position: relative;
z-index: 3;
height: 36px;
padding: 0 30px 0 10px;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid rgb(229, 229, 229);
display: flex;
align-items: center;
font-size: 14px;
color: #999;
.uni-disabled {
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 19;
cursor: no-drop;
background: rgba(255, 255, 255, .5);
}
// input 框的清除按钮
.uni-select-lay-input-close {
position: absolute;
right: 35px;
top: 0;
height: 100%;
width: 15px;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
cursor: pointer;
text {
position: relative;
background: #fff;
width: 13px;
height: 13px;
border-radius: 50%;
border: 1px solid #bbb;
&::before,
&::after {
content: "";
position: absolute;
left: 20%;
top: 50%;
height: 1px;
width: 60%;
transform: rotate(45deg);
background-color: #bbb;
}
&::after {
transform: rotate(-45deg);
}
}
}
.uni-select-lay-input {
font-size: 14px;
color: #999;
display: block;
width: 98%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 30px;
box-sizing: border-box;
&.active {
color: #333
}
}
.uni-select-lay-icon {
cursor: pointer;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
&::before {
content: "";
width: 1px;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #e5e5e5;
}
text {
display: block;
width: 0;
height: 0;
border-width: 12rpx 12rpx 0;
border-style: solid;
border-color: #bbb transparent transparent;
transition: .3s;
}
&.disabled {
cursor: no-drop;
text {
width: 20rpx;
height: 20rpx;
border: 2px solid #ff0000;
border-radius: 50%;
transition: .3s;
position: relative;
z-index: 999;
&::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
margin-top: -1px;
background-color: #ff0000;
transform: rotate(45deg);
}
}
}
}
&.active .uni-select-lay-icon {
text {
transform: rotate(180deg);
}
}
}
// options部分
.uni-select-lay-options {
user-select: none;
position: absolute;
top: calc(100% + 5px);
left: 0;
width: 100%;
height: 500rpx;
// overflow-y: auto;
border-radius: 4px;
border: 1px solid rgb(229, 229, 229);
background: #fff;
padding: 5px 0;
box-sizing: border-box;
z-index: 9;
.uni-select-lay-item {
padding: 0 10px;
box-sizing: border-box;
cursor: pointer;
line-height: 2.5;
transition: .3s;
font-size: 14px;
&.active {
background: #007AFF;
color: #fff;
&:hover {
background: #007AFF;
color: #fff;
}
}
&:hover {
background-color: #f5f5f5;
}
}
.nosearch {
font-size: 16px;
line-height: 3;
text-align: center;
color: #666;
}
}
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或