提交 356c2535 编写于 作者: M m0_74163447

修改界面

上级 32d21a33
<template>
<view class="container">
<view class="ui-all">
<view class="avatar" @tap="avatarChoose">
<view class="imgAvatar">
<view class="iavatar" :style="'background: url('+avater+') no-repeat center/cover #eeeeee;'"></view>
</view>
<text v-if="avater">修改头像</text>
<text v-if="!avater">授权微信</text>
<button v-if="!avater" open-type="getUserInfo" @tap="getUserInfo" class="getInfo"></button>
</view>
<view class="ui-list">
<text>昵称</text>
<input type="text" :placeholder="value" :value="nickName" @input="bindnickName" placeholder-class="place" />
</view>
<view class="ui-list">
<text>手机号</text>
<input v-if="mobile" type="tel" :placeholder="value" :value="mobile" @input="bindmobile" placeholder-class="place" />
<button v-if="!mobile" open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="getInfo bun">授权手机号</button>
</view>
<view class="ui-list right">
<text>性别</text>
<picker @change="bindPickerChange" mode='selector' range-key="name" :value="index" :range="sex">
<view class="picker">
{{sex[index].name}}
</view>
</picker>
</view>
<view class="ui-list right">
<text>常住地</text>
<picker @change="bindRegionChange" mode='region'>
<view class="picker">
{{region[0]}} {{region[1]}} {{region[2]}}
</view>
</picker>
</view>
<view class="ui-list right">
<text>生日</text>
<picker mode="date" :value="date" @change="bindDateChange">
<view class="picker">
{{date}}
</view>
</picker>
</view>
<view class="ui-list">
<text>签名</text>
<textarea :placeholder="value" placeholder-class="place" :value="description" @input="binddescription"></textarea>
</view>
<button class="save" @tap="savaInfo">保 存 修 改</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value: '请填写',
sex: [{
id: 1,
name: ''
}, {
id: 2,
name: ''
}],
index: 0,
region: ['请填写'],
date: '请填写',
avater: '',
description: '',
url: '',
nickName: '',
mobile: '',
headimg: ''
}
},
methods: {
bindPickerChange(e) {
this.index = e.detail.value;
},
bindRegionChange(e) {
this.region = e.detail.value;
},
bindDateChange(e) {
this.date = e.detail.value;
},
bindnickName(e) {
this.nickName = e.detail.value;
},
bindmobile(e) {
this.mobile = e.detail.value;
},
binddescription(e) {
this.description = e.detail.value;
},
avatarChoose() {
let that = this;
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
that.imgUpload(res.tempFilePaths);
const tempFilePaths = res.tempFilePaths;
}
});
},
getUserInfo () {
uni.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
console.log(res);
uni.showToast({
title: '已授权',
icon: 'none',
duration: 2000
})
}
})
} ,
getphonenumber(e){
if(e.detail.iv){
console.log(e.detail.iv) //传后台解密换取手机号
uni.showToast({
title: '已授权',
icon: 'none',
duration: 2000
})
}
},
savaInfo() {
let that = this;
let nickname = that.nickName;
let headimg = that.headimg;
let gender = that.index + 1;
let mobile = that.mobile;
let region = that.region;
let birthday = that.date;
let description = that.description;
let updata = {};
if (!nickname) {
uni.showToast({
title: '请填写昵称',
icon: 'none',
duration: 2000
});
return;
}
updata.nickname = nickname;
if (!headimg) {
headimg = that.avater;
}
updata.headimg = headimg;
updata.gender = gender;
if (that.isPoneAvailable(mobile)) {
updata.mobile = mobile;
} else {
uni.showToast({
title: '手机号码有误,请重填',
icon: 'none',
duration: 2000
});
return;
}
if (region.length == 1) {
uni.showToast({
title: '请选择常住地',
icon: 'none',
duration: 2000
});
return;
} else {
updata.province = region[0];
updata.city = region[1];
updata.area = region[2];
}
if (birthday == "0000-00-00") {
uni.showToast({
title: '请选择生日',
icon: 'none',
duration: 2000
});
return;
}
updata.birthday = birthday;
updata.description = description;
that.updata(updata);
},
isPoneAvailable(poneInput) {
var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
if (!myreg.test(poneInput)) {
return false;
} else {
return true;
}
},
async updata(datas) {
//传后台
},
imgUpload(file) {
let that = this;
uni.uploadFile({
header: {
Authorization: uni.getStorageSync('token')
},
url:'/api/upload/image', //需传后台图片上传接口
filePath: file[0],
name: 'file',
formData: {
type: 'user_headimg'
},
success: function(res) {
var data = JSON.parse(res.data);
data = data.data;
that.avater = that.url + data.img;
that.headimg = that.url + data.img;
},
fail: function(error) {
console.log(error);
}
});
},
},
onLoad() {
}
}
</script>
<style lang="less">
.container {
display: block;
}
.ui-all {
padding: 20rpx 40rpx;
.avatar {
width: 100%;
text-align: left;
padding: 20rpx 0;
border-bottom: solid 1px #f2f2f2;
position: relative;
.imgAvatar {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
.iavatar {
width: 100%;
height: 100%;
display: block;
}
}
text {
display: inline-block;
vertical-align: middle;
color: #8e8e93;
font-size: 28rpx;
margin-left: 40rpx;
}
&:after {
content: ' ';
width: 20rpx;
height: 20rpx;
border-top: solid 1px #030303;
border-right: solid 1px #030303;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-moz-transform: rotate(45deg);
/* Firefox */
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-o-transform: rotate(45deg);
position: absolute;
top: 85rpx;
right: 0;
}
}
.ui-list {
width: 100%;
text-align: left;
padding: 20rpx 0;
border-bottom: solid 1px #f2f2f2;
position: relative;
text {
color: #4a4a4a;
font-size: 28rpx;
display: inline-block;
vertical-align: middle;
min-width: 150rpx;
}
input {
color: #030303;
font-size: 30rpx;
display: inline-block;
vertical-align: middle;
}
button{
color: #030303;
font-size: 30rpx;
display: inline-block;
vertical-align: middle;
background: none;
margin: 0;
padding: 0;
&::after{
display: none;
}
}
picker {
width: 90%;
color: #030303;
font-size: 30rpx;
display: inline-block;
vertical-align: middle;
position: absolute;
top: 30rpx;
left: 150rpx;
}
textarea {
color: #030303;
font-size: 30rpx;
vertical-align: middle;
height: 150rpx;
width: 100%;
margin-top: 50rpx;
}
.place {
color: #999999;
font-size: 28rpx;
}
}
.right:after {
content: ' ';
width: 20rpx;
height: 20rpx;
border-top: solid 1px #030303;
border-right: solid 1px #030303;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-moz-transform: rotate(45deg);
/* Firefox */
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-o-transform: rotate(45deg);
position: absolute;
top: 40rpx;
right: 0;
}
.save {
background: #030303;
border: none;
color: #ffffff;
margin-top: 40rpx;
font-size: 28rpx;
}
}
</style>
function getLocalFilePath(path) {
if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) {
return path
}
if (path.indexOf('file://') === 0) {
return path
}
if (path.indexOf('/storage/emulated/0/') === 0) {
return path
}
if (path.indexOf('/') === 0) {
var localFilePath = plus.io.convertAbsoluteFileSystem(path)
if (localFilePath !== path) {
return localFilePath
} else {
path = path.substr(1)
}
}
return '_www/' + path
}
function dataUrlToBase64(str) {
var array = str.split(',')
return array[array.length - 1]
}
var index = 0
function getNewFileId() {
return Date.now() + String(index++)
}
function biggerThan(v1, v2) {
var v1Array = v1.split('.')
var v2Array = v2.split('.')
var update = false
for (var index = 0; index < v2Array.length; index++) {
var diff = v1Array[index] - v2Array[index]
if (diff !== 0) {
update = diff > 0
break
}
}
return update
}
export function pathToBase64(path) {
return new Promise(function(resolve, reject) {
if (typeof window === 'object' && 'document' in window) {
if (typeof FileReader === 'function') {
var xhr = new XMLHttpRequest()
xhr.open('GET', path, true)
xhr.responseType = 'blob'
xhr.onload = function() {
if (this.status === 200) {
let fileReader = new FileReader()
fileReader.onload = function(e) {
resolve(e.target.result)
}
fileReader.onerror = reject
fileReader.readAsDataURL(this.response)
}
}
xhr.onerror = reject
xhr.send()
return
}
var canvas = document.createElement('canvas')
var c2x = canvas.getContext('2d')
var img = new Image
img.onload = function() {
canvas.width = img.width
canvas.height = img.height
c2x.drawImage(img, 0, 0)
resolve(canvas.toDataURL())
canvas.height = canvas.width = 0
}
img.onerror = reject
img.src = path
return
}
if (typeof plus === 'object') {
plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
entry.file(function(file) {
var fileReader = new plus.io.FileReader()
fileReader.onload = function(data) {
resolve(data.target.result)
}
fileReader.onerror = function(error) {
reject(error)
}
fileReader.readAsDataURL(file)
}, function(error) {
reject(error)
})
}, function(error) {
reject(error)
})
return
}
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
wx.getFileSystemManager().readFile({
filePath: path,
encoding: 'base64',
success: function(res) {
resolve('data:image/png;base64,' + res.data)
},
fail: function(error) {
reject(error)
}
})
return
}
reject(new Error('not support'))
})
}
export function base64ToPath(base64) {
return new Promise(function(resolve, reject) {
if (typeof window === 'object' && 'document' in window) {
base64 = base64.split(',')
var type = base64[0].match(/:(.*?);/)[1]
var str = atob(base64[1])
var n = str.length
var array = new Uint8Array(n)
while (n--) {
array[n] = str.charCodeAt(n)
}
return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type })))
}
var extName = base64.split(',')[0].match(/data\:\S+\/(\S+);/)
if (extName) {
extName = extName[1]
} else {
reject(new Error('base64 error'))
}
var fileName = getNewFileId() + '.' + extName
if (typeof plus === 'object') {
var basePath = '_doc'
var dirPath = 'uniapp_temp'
var filePath = basePath + '/' + dirPath + '/' + fileName
if (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime.innerVersion)) {
plus.io.resolveLocalFileSystemURL(basePath, function(entry) {
entry.getDirectory(dirPath, {
create: true,
exclusive: false,
}, function(entry) {
entry.getFile(fileName, {
create: true,
exclusive: false,
}, function(entry) {
entry.createWriter(function(writer) {
writer.onwrite = function() {
resolve(filePath)
}
writer.onerror = reject
writer.seek(0)
writer.writeAsBinary(dataUrlToBase64(base64))
}, reject)
}, reject)
}, reject)
}, reject)
return
}
var bitmap = new plus.nativeObj.Bitmap(fileName)
bitmap.loadBase64Data(base64, function() {
bitmap.save(filePath, {}, function() {
bitmap.clear()
resolve(filePath)
}, function(error) {
bitmap.clear()
reject(error)
})
}, function(error) {
bitmap.clear()
reject(error)
})
return
}
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
var filePath = wx.env.USER_DATA_PATH + '/' + fileName
wx.getFileSystemManager().writeFile({
filePath: filePath,
data: dataUrlToBase64(base64),
encoding: 'base64',
success: function() {
resolve(filePath)
},
fail: function(error) {
reject(error)
}
})
return
}
reject(new Error('not support'))
})
}
\ No newline at end of file
{
"id": "mmmm-image-tools",
"name": "image-tools",
"version": "1.4.0",
"description": "图像转换工具,可用于图像和base64的转换",
"keywords": [
"base64",
"保存",
"图像"
]
}
\ No newline at end of file
{
"id": "helang-tabBar",
"displayName": "底部导航栏(有动画的)",
"version": "1.0.0",
"description": "本开源代码分享了5款有动画切换效果的 底部导航栏 组件",
"keywords": [
"底部导航栏",
"动画"
],
"engines": {},
"dcloudext": {
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"dependencies": {
"@dcloudio/uni-ui": "^1.4.27",
"element-ui": "^2.15.13"
},
"name": "teamwork",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
"id": "c-userinfo",
"name": "个人信息编辑表单",
"version": "1.0.1",
"description": "通用个人中心表单,包含获取用户信息,授权手机号,上传头像等",
"keywords": [
"表单",
"用户信息",
"手机号"
]
}
\ No newline at end of file
<template>
<view>
<view class="main">
<view class="modify">
<image class="modify-icon" src="/static/my/main/modify-icon.png" @click="goToModify()"></image>
</view>
......@@ -45,12 +48,14 @@
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
iStatusBarHeight:0,
nickname:'王二蛋',
schoolName:'福州大学',
teamName:'must go',
......@@ -60,7 +65,7 @@
methods:{
goToModify() {
uni.navigateTo({
url: '/pages/my/my-modify'
url: '/pages/my/modify'
})
},
goToSetting() {
......@@ -73,11 +78,16 @@
url: '/pages/my/my-resetpassword'
})
}
},
onLoad() {
this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
plus.navigator.setStatusBarBackground('#EDEEF0');
}
}
</script>
<style>
.main {
position: absolute;
width: 100%;
......
<template>
<view>
<view class="top">
<image @click="goBack" class="back" :src="'/static/my/exit-icon.png'"></image>
<view class="title">信息修改</view>
<span class="empty"></span>
</view>
<view class="container">
<view class="ui-all">
<view class="avatar" @tap="avatarChoose">
<view class="imgAvatar">
<view class="iavatar" :style="'background: url('+avater+') no-repeat center/cover #eeeeee;'">
</view>
</view>
<text v-if="avater">修改头像</text>
<text v-if="!avater">设置头像</text>
<button v-if="!avater" open-type="getUserInfo" @tap="getUserInfo" class="getInfo"></button>
</view>
<view class="ui-list">
<text>用户名</text>
<input type="text" placeholder="请填写用户名" :value="nickName" @input="bindnickName"
placeholder-class="place" />
</view>
<view class="ui-list">
<text>手机号</text>
<input type="tel" placeholder="请填写手机号" :value="mobile" @input="bindmobile"
placeholder-class="place" />
<!-- <button v-if="!mobile" open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="getInfo bun">授权手机号</button> -->
</view>
<view class="ui-list right">
<text>性别</text>
<picker @change="bindPickerChange" mode='selector' range-key="name" :value="index1" :range="sex">
<view class="picker">
{{sex[index1].name}}
</view>
</picker>
</view>
<view class="ui-list right">
<text>学校</text>
<picker @change="bindSchoolChange" mode='selector' range-key="name" :value="index2" :range="school">
<view class="picker">
{{school[index2].name}}
</view>
</picker>
</view>
<button class="save" @tap="savaInfo">保 存 修 改</button>
</view>
</view>
</view>
</template>
<script>
import {
pathToBase64,
base64ToPath
} from 'js_sdk/mmmm-image-tools/index.js';
export default {
data() {
return {
sex: [{
id: 1,
name: ''
}, {
id: 2,
name: ''
}],
index1: 0,
school: [{
id: 1,
name: '福州大学'
}, {
id: 2,
name: 'xx大学'
}],
index2: 0,
avater: '',
// url: '',
nickName: '王二蛋',
mobile: '15305986885',
headimg: ''
}
},
methods: {
bindPickerChange(e) {
this.index1 = e.detail.value;
},
bindSchoolChange(e) {
this.index2 = e.detail.value;
},
bindnickName(e) {
this.nickName = e.detail.value;
},
bindmobile(e) {
this.mobile = e.detail.value;
},
avatarChoose() {
// let that = this;
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
var tempFilePaths = res.tempFilePaths;
pathToBase64(tempFilePaths[0]) //图像转base64工具
.then(base64 => {
this.avatar = base64;
console.log(base64);
//将文件转化为base64并显示
// that.avatarUpload(base64); //同时将头像上传至数据库进行存储
//console.log(this.avatar);
}).catch(error => {
console.error(error)
})
}
});
},
getUserInfo() {
uni.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
console.log(res);
uni.showToast({
title: '已授权',
icon: 'none',
duration: 2000
})
}
})
},
// getphonenumber(e) {
// if (e.detail.iv) {
// console.log(e.detail.iv) //传后台解密换取手机号
// uni.showToast({
// title: '已授权',
// icon: 'none',
// duration: 2000
// })
// }
// },
savaInfo() {
uni.showModal({
title: '温馨提示', //提示标题
content: '确认修改你的个人信息吗', //提示内容
showCancel: true, //是否显示取消按钮
success: function(res) {
if (res.confirm) { //confirm为ture,代表用户点击确定
console.log('点击了确定按钮');
} else if (res.cancel) { //cancel为ture,代表用户点击取消
console.log('点击了取消按钮');
}
}
})
// let that = this;
// let nickname = that.nickName;
// let headimg = that.headimg;
// let gender = that.index + 1;
// let mobile = that.mobile;
// let region = that.region;
// let birthday = that.date;
// let description = that.description;
// let updata = {};
// if (!nickname) {
// uni.showToast({
// title: '请填写昵称',
// icon: 'none',
// duration: 2000
// });
// return;
// }
// updata.nickname = nickname;
// if (!headimg) {
// headimg = that.avater;
// }
// updata.headimg = headimg;
// updata.gender = gender;
// if (that.isPoneAvailable(mobile)) {
// updata.mobile = mobile;
// } else {
// uni.showToast({
// title: '手机号码有误,请重填',
// icon: 'none',
// duration: 2000
// });
// return;
// }
// if (region.length == 1) {
// uni.showToast({
// title: '请选择常住地',
// icon: 'none',
// duration: 2000
// });
// return;
// } else {
// updata.province = region[0];
// updata.city = region[1];
// updata.area = region[2];
// }
// if (birthday == "0000-00-00") {
// uni.showToast({
// title: '请选择生日',
// icon: 'none',
// duration: 2000
// });
// return;
// }
// that.updata(updata);
},
// isPoneAvailable(poneInput) {
// var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
// if (!myreg.test(poneInput)) {
// return false;
// } else {
// return true;
// }
// },
// async updata(datas) {
// //传后台
// },
// imgUpload(file) {
// let that = this;
// uni.uploadFile({
// header: {
// Authorization: uni.getStorageSync('token')
// },
// url: '/api/upload/image', //需传后台图片上传接口
// filePath: file[0],
// name: 'file',
// formData: {
// type: 'user_headimg'
// },
// success: function(res) {
// var data = JSON.parse(res.data);
// data = data.data;
// that.avater = that.url + data.img;
// that.headimg = that.url + data.img;
// },
// fail: function(error) {
// console.log(error);
// }
// });
// },
goBack() {
uni.navigateBack({
delta: 1, //返回层数,2则上上页
})
}
},
onLoad() {
plus.navigator.setStatusBarBackground('#EDEEF0');
}
}
</script>
<style lang="less">
.container {
position: absolute;
width: 100%;
height: 100%;
display: block;
}
.top {
width: 100%;
height: 50px;
background-color: #EDEEF0;
text-align: center;
}
.back {
width: 40px;
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
float: left;
margin-left: 10px;
}
.empty {
width: 40px;
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
float: right;
margin-right: 10px;
}
.title {
font-size: 20px;
margin-top: 10px;
font-weight: bold;
color: #f1992d;
display: inline-block;
}
.ui-all {
// padding: 20rpx 40rpx;
margin-top: 20rpx;
margin-left: 40rpx;
margin-right: 40rpx;
.avatar {
width: 100%;
text-align: left;
padding: 20rpx 0;
border-bottom: solid 1px #f2f2f2;
position: relative;
.imgAvatar {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
.iavatar {
width: 100%;
height: 100%;
display: block;
}
}
text {
display: inline-block;
vertical-align: middle;
color: #8e8e93;
font-size: 28rpx;
margin-left: 40rpx;
}
&:after {
content: ' ';
width: 20rpx;
height: 20rpx;
border-top: solid 1px #030303;
border-right: solid 1px #030303;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-moz-transform: rotate(45deg);
/* Firefox */
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-o-transform: rotate(45deg);
position: absolute;
top: 85rpx;
right: 0;
}
}
.ui-list {
width: 100%;
text-align: left;
padding: 20rpx 0;
border-bottom: solid 1px #f2f2f2;
position: relative;
text {
color: #4a4a4a;
font-size: 28rpx;
display: inline-block;
vertical-align: middle;
min-width: 150rpx;
}
input {
color: #030303;
font-size: 30rpx;
display: inline-block;
vertical-align: middle;
}
button {
color: #030303;
font-size: 30rpx;
display: inline-block;
vertical-align: middle;
background: none;
margin: 0;
padding: 0;
&::after {
display: none;
}
}
picker {
width: 90%;
color: #030303;
font-size: 30rpx;
display: inline-block;
vertical-align: middle;
position: absolute;
top: 30rpx;
left: 150rpx;
}
textarea {
color: #030303;
font-size: 30rpx;
vertical-align: middle;
height: 150rpx;
width: 100%;
margin-top: 50rpx;
}
.place {
color: #999999;
font-size: 28rpx;
}
}
.right:after {
content: ' ';
width: 20rpx;
height: 20rpx;
border-top: solid 1px #030303;
border-right: solid 1px #030303;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-moz-transform: rotate(45deg);
/* Firefox */
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-o-transform: rotate(45deg);
position: absolute;
top: 40rpx;
right: 0;
}
.save {
background: #F1992D;
border: none;
color: #ffffff;
margin-top: 40rpx;
font-size: 28rpx;
}
}
</style>
\ No newline at end of file
<template>
<view class="main">
<view class="return">
<!-- <view class="return">
<view class="return-btn" @click="goBack"></view>
<text>重置密码</text>
</view> -->
<view class="top">
<image @click="goBack" class="back" :src="'/static/my/exit-icon.png'"></image>
<view class="title">重置密码</view>
<span class="empty"></span>
</view>
<view class="content">
<veiw class="password">
......@@ -27,37 +33,40 @@
<script>
export default {
data() {
return {
showPassword: true,
}
data() {
return {
showPassword: true,
}
},
methods: {
// showPwd: function() {
// this.showPassword = !this.showPassword;
// },
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('点击了取消按钮');
}
}
})
},
goBack() {
uni.navigateBack({
delta: 1, //返回层数,2则上上页
})
},
methods: {
// showPwd: function() {
// this.showPassword = !this.showPassword;
// },
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('点击了取消按钮');
}
}
})
},
goBack(){
uni.navigateBack({
delta:1,//返回层数,2则上上页
})
}
}
onload(){
plus.navigator.setStatusBarBackground('#EDEEF0');
}
}
}
</script>
<style>
......@@ -65,48 +74,77 @@
position: absolute;
width: 100%;
height: 100%;
/* background-color: #EDEEF0; */
}
.top {
width: 100%;
height: 50px;
background-color: #EDEEF0;
text-align: center;
}
.return-btn{
width: 70rpx;
height: 70rpx;
margin-top: 50rpx;
margin-left: 20rpx;
background-size:100% 100%;
background-image:url("/static/my/exit-icon.png");
background-repeat:no-repeat;
.back {
width: 40px;
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
float: left;
margin-left: 10px;
}
.empty {
width: 40px;
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
float: right;
margin-right: 10px;
}
.title {
font-size: 20px;
margin-top: 10px;
font-weight: bold;
color: #f1992d;
display: inline-block;
}
.content{
width:80%;
.content {
width: 80%;
margin-top: 50%;
margin-left: auto;
margin-right: auto;
}
.password{
.password {
margin-top: 50rpx;
height:20%;
height: 20%;
display: flex;
align-items: center;
/* border-bottom: 1px solid #ccc; */
}
.password span{
.password span {
font-size: 35rpx;
}
.password input{
.password input {
border-bottom: 1px solid #ccc;
}
.confirm{
.confirm {
height: 20%;
margin-top: 20%;
}
.confirm-btn{
background-color:#F1992D ;
.confirm-btn {
background-color: #F1992D;
color: #FFFFFF;
width:70%;
width: 70%;
height: 85rpx;
line-height: 85rpx;
margin-top: 100rpx;
......
<template>
<view class="main">
<view class="return">
<view class="return-btn" @click="goBack"></view>
<view class="top">
<image @click="goBack" class="back" :src="'/static/my/exit-icon.png'"></image>
</view>
<view class="profile">
<view class="profile-title">
......@@ -54,6 +55,9 @@
uni.navigateBack({
delta:1,//返回层数,2则上上页
})
},
onload(){
plus.navigator.setStatusBarBackground('#EDEEF0');
}
}
}
......@@ -66,19 +70,19 @@
height: 100%;
background-color: #EDEEF0;
}
.return{
.top {
width: 100%;
height: 50px;
background-color: #EDEEF0;
}
.return-btn{
width: 70rpx;
height: 70rpx;
margin-top: 50rpx;
margin-left: 50rpx;
background-size:100% 100%;
background-image:url("/static/my/exit-icon.png");
background-repeat:no-repeat;
.back {
width: 40px;
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
float: left;
margin-left: 10px;
}
.profile{
/* border: 2rpx solid #000; */
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册