吆喝
This commit is contained in:
蔡同学
@@ -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>
|
||||
Reference in New Issue
Block a user