吆喝
This commit is contained in:
蔡同学
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<view class="form">
|
||||
<view class="box">
|
||||
<view class="formItem">
|
||||
<view class="label">新手机号</view>
|
||||
<view class="ipt">
|
||||
<input class="uni-input" type="phone" @input="changePhone" placeholder="请输入手机号"
|
||||
:value="inputValue" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="formItem">
|
||||
<view class="label">验证码</view>
|
||||
<view class="ipt">
|
||||
<input class="uni-input" type="text" @input="changeCode" placeholder="请输入验证码" :value="code" />
|
||||
</view>
|
||||
<view class="getCodeBtn" @click="getCode">{{btnText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<button class="onname" :style="{'background':dbled?'#999':'#08d89b'}" :disabled="dbled" type="primary"
|
||||
@click="upPhone()">确认修改</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
inputValue: "",
|
||||
isUp: false,
|
||||
btnText: "获取验证码",
|
||||
interV: null,
|
||||
time: 60,
|
||||
isGetCode: false,
|
||||
code: ""
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.inputValue = options.mobile
|
||||
},
|
||||
methods: {
|
||||
changePhone(e) {
|
||||
this.inputValue = e.detail.value
|
||||
},
|
||||
changeCode(e) {
|
||||
this.code = e.detail.value;
|
||||
},
|
||||
|
||||
upPhone() {
|
||||
let that = this;
|
||||
if (!/^1[3456789]\d{9}$/.test(that.inputValue)) {
|
||||
uni.showToast({
|
||||
title: "手机号有误"
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!that.isUp) {
|
||||
that.isUp = true;
|
||||
that.$httpRequest({
|
||||
url: "/api/user/changemobile",
|
||||
method: "POST",
|
||||
data: {
|
||||
mobile: that.inputValue,
|
||||
captcha: this.captcha
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
uni.showToast({
|
||||
title: "修改成功",
|
||||
icon: "none",
|
||||
duration: 1500
|
||||
});
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "请勿频繁提交"
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
getCode() {
|
||||
if (!this.isGetCode) {
|
||||
this.isGetCode = true;
|
||||
console.log(this.inputValue);
|
||||
|
||||
if (/^1[3456789]\d{9}$/.test(this.inputValue)) {
|
||||
this.interV = setInterval(() => {
|
||||
this.time--;
|
||||
this.btnText = this.time + '秒后重新获取'
|
||||
if (this.time <= 0) {
|
||||
this.isGetCode = false;
|
||||
this.btnText == "获取验证码";
|
||||
this.time = 60;
|
||||
}
|
||||
}, 1000)
|
||||
|
||||
uni.request({
|
||||
url: this.configs.webUrl + '/api/sms/index',
|
||||
data: {
|
||||
phone: this.inputValue
|
||||
},
|
||||
success() {
|
||||
uni.showToast({
|
||||
title: "发送成功",
|
||||
icon: "none",
|
||||
duration: 1500
|
||||
})
|
||||
},
|
||||
fail() {
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "手机号有误",
|
||||
icon: "none",
|
||||
duration: 1500
|
||||
})
|
||||
this.isGetCode = false;
|
||||
}
|
||||
} else {}
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.interV)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form {
|
||||
margin: 20rpx;
|
||||
|
||||
}
|
||||
|
||||
.formItem {
|
||||
display: flex;
|
||||
height: 120rpx;
|
||||
align-items: center;
|
||||
border: 2rpx solid #F8F8F8;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 260rpx;
|
||||
font-size: 32rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
margin-left: 36rpx;
|
||||
}
|
||||
|
||||
.ipt {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.ipt input {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.getCodeBtn {
|
||||
font-size: 26rpx;
|
||||
padding: 15rpx 0;
|
||||
min-width: 220rpx;
|
||||
text-align: center;
|
||||
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.onname {
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,361 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
|
||||
<view class="list-cell b-b avatar" style="border-radius: 16rpx 16rpx 0 0;" @click="clk(0)">
|
||||
<text class="cell-tit">头像</text>
|
||||
<image :src="imgUrl+ userInfo.avatar" mode=""></image>
|
||||
<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
|
||||
</view>
|
||||
<view class="list-cell" hover-class="cell-hover" :hover-stay-time="50">
|
||||
<text class="cell-tit">昵称</text>
|
||||
<input class="uni-input" style="width: 440rpx; text-align: right;" v-model="userInfo.nickname"
|
||||
placeholder="请输入昵称" />
|
||||
<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
|
||||
</view>
|
||||
|
||||
<view class="list-cell" @tap="sex" hover-class="cell-hover" :hover-stay-time="50">
|
||||
<text class="cell-tit">性别</text>
|
||||
<text class="cell-tip">{{ userInfo.gender ? '女':'男'}}</text>
|
||||
<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
|
||||
</view>
|
||||
|
||||
<view class="list-cell" style="border-radius: 0 0 16rpx 16rpx;" @tap="onTime" hover-class="cell-hover"
|
||||
:hover-stay-time="50">
|
||||
<text class="cell-tit">生日</text>
|
||||
<text class="cell-tip">{{userInfo.dtime}}</text>
|
||||
<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
|
||||
</view>
|
||||
|
||||
<view class="list-cell m-t b-b" style="border-radius: 16rpx;"
|
||||
@click="navTo('/pagesA/myCenter/settings/mobile?mobile='+userInfo.mobile)" hover-class="cell-hover"
|
||||
:hover-stay-time="50">
|
||||
<text class="cell-tit">手机号</text>
|
||||
<text class="cell-tip">{{userInfo.mobile}}</text>
|
||||
<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
|
||||
</view>
|
||||
|
||||
<view class="practices button" @click="sexgender">保存</view>
|
||||
|
||||
<!--生日-->
|
||||
<uv-datetime-picker ref="datetimePicker" :formatter="formatter" mode="date" @confirm="dialogTime">
|
||||
</uv-datetime-picker>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let sex = ['男', '女'];
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
urls: '',
|
||||
sexsi: '',
|
||||
array: [],
|
||||
ageid: 0,
|
||||
listgrzl: [],
|
||||
msg: false,
|
||||
imgUrl: this.$config.webUrl,
|
||||
userInfo: {},
|
||||
configUrl: this.$config.webUrl,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
sexType() {
|
||||
return sex[this.sexsi];
|
||||
},
|
||||
},
|
||||
onShow() {
|
||||
this.getUsers();
|
||||
if (this.msg) {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: "none"
|
||||
});
|
||||
this.msg = false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUsers() {
|
||||
let that = this;
|
||||
that.$httpRequest({
|
||||
url: "/api/user/index",
|
||||
method: "GET"
|
||||
}).then(res => {
|
||||
that.userInfo.avatar = res.data.avatar;
|
||||
that.userInfo.nickname = res.data.nickname
|
||||
that.userInfo.gender = res.data.gender
|
||||
that.userInfo.dtime = res.data.birthday
|
||||
that.userInfo.mobile = res.data.mobile
|
||||
this.$forceUpdate()
|
||||
console.log(that.userInfo);
|
||||
uni.setStorageSync('userinfo', res.data);
|
||||
uni.setStorageSync('config', res.data.config)
|
||||
})
|
||||
|
||||
},
|
||||
unlockChange(e) {
|
||||
console.log(e.detail.value)
|
||||
let that = this;
|
||||
that.$httpRequest({
|
||||
url: "/api/user/userAutoPlay",
|
||||
method: "GET",
|
||||
data: {
|
||||
type: e.detail.value ? 1 : 0
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 1) {
|
||||
that.userInfo.auto_unlock = e.detail.value ? 1 : 0;
|
||||
uni.removeStorageSync('userinfo')
|
||||
uni.setStorageSync('userinfo', that.userInfo)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
navTo(url) {
|
||||
console.log(url)
|
||||
uni.navigateTo({
|
||||
url: url,
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
},
|
||||
navsTo(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
},
|
||||
|
||||
//选择性别
|
||||
sex() {
|
||||
uni.showActionSheet({
|
||||
itemList: sex,
|
||||
success: (res) => {
|
||||
console.log(res);
|
||||
this.userInfo.gender = res.tapIndex
|
||||
this.$forceUpdate()
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
sexgender() {
|
||||
console.log(this.userInfo.avatar);
|
||||
this.$httpRequest({
|
||||
url: "/api/user/edituser",
|
||||
method: "GET",
|
||||
data: {
|
||||
sex: this.userInfo.gender,
|
||||
nickname: this.userInfo.nickname,
|
||||
org: this.userInfo.dtime,
|
||||
avatar: this.userInfo.avatar,
|
||||
}
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: "修改成功",
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
this.getUsers();
|
||||
})
|
||||
},
|
||||
doBefore() {
|
||||
console.log('doBefore');
|
||||
},
|
||||
clk(index) {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (r) => {
|
||||
this.doUpload(r)
|
||||
}
|
||||
})
|
||||
},
|
||||
doUpload(rsp) {
|
||||
let that = this;
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
});
|
||||
uni.uploadFile({
|
||||
url: this.$config.webUrl + '/api/user/avatar?token=' + uni.getStorageSync("userinfo")
|
||||
.token, //仅为示例，非真实的接口地址
|
||||
file: rsp.tempFiles[0].path || rsp.tempFiles[0],
|
||||
filePath: rsp.tempFiles[0].path || rsp.tempFiles[0],
|
||||
name: "file",
|
||||
dataType: "json",
|
||||
formData: {
|
||||
token: uni.getStorageSync("userinfo").token,
|
||||
uid: uni.getStorageSync("userinfo").id,
|
||||
file: rsp.tempFiles[0].path || rsp.tempFiles[0]
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
|
||||
var dataarr = JSON.parse(uploadFileRes.data);
|
||||
if (dataarr.code == 1) {
|
||||
console.log(dataarr.data.url)
|
||||
let userinfo = uni.getStorageSync('userinfo');
|
||||
this.userInfo.avatar = dataarr.data.url;
|
||||
console.log(this.userInfo.avatar);
|
||||
this.getUsers()
|
||||
|
||||
|
||||
uni.removeStorage('userinfo')
|
||||
uni.setStorageSync('userinfo', userinfo)
|
||||
uni.showToast({
|
||||
title: "修改成功"
|
||||
})
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: dataarr.msg
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
});
|
||||
},
|
||||
//修改生日
|
||||
onTime() {
|
||||
this.$refs.datetimePicker.open();
|
||||
},
|
||||
formatter(type, value) {
|
||||
if (type === 'year') {
|
||||
return `${value}年`
|
||||
}
|
||||
if (type === 'month') {
|
||||
return `${value}月`
|
||||
}
|
||||
if (type === 'day') {
|
||||
return `${value}日`
|
||||
}
|
||||
return value
|
||||
},
|
||||
dialogTime(e) {
|
||||
this.userInfo.dtime = this.timestampToDate(e.value)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
timestampToDate(timestamp) {
|
||||
var date = new Date(timestamp); // 转换为Date对象
|
||||
var year = date.getFullYear(); // 获取年份
|
||||
var month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，转为两位数
|
||||
var day = ('0' + date.getDate()).slice(-2); // 获取日，转为两位数
|
||||
return year + '-' + month + '-' + day; // 拼接字符串返回
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.yyt-ellipsis {
|
||||
display: inline-block;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
text-overflow: ellipsis; //溢出用省略号显示
|
||||
white-space: nowrap; //溢出不换
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20rpx;
|
||||
background: #F7F8F9;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
padding-top: 40upx !important;
|
||||
padding-bottom: 40upx !important;
|
||||
}
|
||||
|
||||
.agess {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
height: 100%;
|
||||
line-height: 38px;
|
||||
padding-left: 200px;
|
||||
padding-right: 36px !important;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.avatar .cell-tit {
|
||||
font-weight: bold !important;
|
||||
|
||||
}
|
||||
|
||||
.avatar image {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 36px;
|
||||
width: 88upx;
|
||||
height: 88upx;
|
||||
border-radius: 50%;
|
||||
margin-top: -44upx;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.list-cell {
|
||||
display: flex;
|
||||
padding: 20upx;
|
||||
line-height: 60upx;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
|
||||
&.log-out-btn {
|
||||
margin-top: 40upx;
|
||||
|
||||
.cell-tit {
|
||||
color: $uni-color-primary;
|
||||
text-align: center;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.cell-hover {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
&.b-b:after {
|
||||
left: 30upx;
|
||||
}
|
||||
|
||||
&.m-t {
|
||||
margin-top: 16upx;
|
||||
}
|
||||
|
||||
.cell-more {
|
||||
align-self: baseline;
|
||||
|
||||
margin-left: 10upx;
|
||||
}
|
||||
|
||||
.cell-tit {
|
||||
flex: 1;
|
||||
|
||||
margin-right: 10upx;
|
||||
}
|
||||
|
||||
.cell-tip {}
|
||||
|
||||
switch {
|
||||
transform: translateX(16upx) scale(.84);
|
||||
}
|
||||
}
|
||||
|
||||
.practices {
|
||||
height: 80rpx;
|
||||
width: 100%;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(123deg, #00E075 0%, #09D89E 100%);
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
margin-top: 200rpx;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="with-fun" style="padding: 20upx;">
|
||||
<input class="uni-input" type="text" confirm-type="done" focus :placeholder="name" placeholder-style="color:#666" @input="onKeyInput" :value="inputValue" />
|
||||
</view>
|
||||
</view>
|
||||
<button class="onname" :style="{'background':dbled?'#999':'#E17503'}" :disabled="dbled" type="primary" @tap="onOKname()">确 认</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
inputValue: '',
|
||||
dbled:true,
|
||||
name:'',
|
||||
ty:''
|
||||
}
|
||||
},
|
||||
onLoad(options){
|
||||
//接收传值,id里面放的是标题，因为测试数据并没写id
|
||||
let ty = options.ty;
|
||||
let name = options.name;
|
||||
let v = options.v;
|
||||
this.ty=ty;
|
||||
this.name='请修改'+name;
|
||||
uni.setNavigationBarTitle({
|
||||
title: '修改'+name
|
||||
});
|
||||
if(v=='null'){
|
||||
this.inputValue='';
|
||||
}else{
|
||||
this.inputValue=v;
|
||||
}
|
||||
},
|
||||
onBackPress() {
|
||||
console.log('ok')
|
||||
},
|
||||
methods: {
|
||||
onKeyInput(event){
|
||||
this.inputValue = event.target.value
|
||||
let lens = event.target.value
|
||||
if(lens.length){
|
||||
this.dbled=false
|
||||
}else{
|
||||
this.dbled=true
|
||||
}
|
||||
},
|
||||
onOKname() {
|
||||
let that = this;
|
||||
that.$httpRequest({
|
||||
url:"/api/user/edituser",
|
||||
method:"GET",
|
||||
data:{
|
||||
[this.ty]: this.inputValue
|
||||
}
|
||||
}).then(res=>{
|
||||
uni.showToast({title: '修改成功',icon:"none",duration:2000})
|
||||
}).catch(err=>{
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
padding: 10upx 25upx;
|
||||
}
|
||||
.with-fun{
|
||||
background: #f8f8f8;
|
||||
position: relative;
|
||||
}
|
||||
.with-fun:after{
|
||||
position: absolute;
|
||||
content: $name;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
font-size: 32upx;
|
||||
}
|
||||
.uni-input{
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 32upx;
|
||||
background: #f8f8f8;
|
||||
|
||||
color: #666;
|
||||
}
|
||||
.uni-icon-clear,
|
||||
.uni-icon-eye {
|
||||
color: #999;
|
||||
}
|
||||
.onname{
|
||||
width: 94%;
|
||||
margin: 20upx auto;
|
||||
background: -webkit-linear-gradient(left top, #E49315 , #E17503); /* Safari 5.1 - 6.0 */
|
||||
background: -o-linear-gradient(bottom right, #E49315, #E17503); /* Opera 11.1 - 12.0 */
|
||||
background: -moz-linear-gradient(bottom right, #E49315,#E17503); /* Firefox 3.6 - 15 */
|
||||
background: linear-gradient(to bottom right, #E49315 , #E17503); /* 标准的语法（必须放在最后） */
|
||||
}
|
||||
.onnames{
|
||||
width: 94%;
|
||||
margin: 20upx auto;
|
||||
background: -webkit-linear-gradient(left top, #f1f1f1 , #f9f9f9); /* Safari 5.1 - 6.0 */
|
||||
background: -o-linear-gradient(bottom right, #f1f1f1, #f9f9f9); /* Opera 11.1 - 12.0 */
|
||||
background: -moz-linear-gradient(bottom right, #f1f1f1,#f9f9f9); /* Firefox 3.6 - 15 */
|
||||
background: linear-gradient(to bottom right, #f1f1f1 , #f9f9f9); /* 标准的语法（必须放在最后） */
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user