580 lines
14 KiB
Vue
580 lines
14 KiB
Vue
<template>
|
||
<!-- 个人资料 -->
|
||
<view class="flex-col page">
|
||
<view class="flex-col flex-1 section">
|
||
<view class="image-box-t">
|
||
<button class="img-t" open-type="chooseAvatar" @chooseavatar="chooseavatar" style="background-color: #efefef;">
|
||
<!-- <button > -->
|
||
<image v-if="userImage" class="shrink-0 image_6" :src="userImage"/>
|
||
<!-- </button> -->
|
||
<!-- <image v-else class="self-center image_5" src="https://api.ccttiot.com/smartmeter/img/static/usaBta7T92keDZwpiqjM"/> -->
|
||
</button>
|
||
<view class="text_3-box" >
|
||
<!-- <button open-type="chooseAvatar" @chooseavatar="chooseavatar"
|
||
class="font text_3">更换头像</button> -->
|
||
<button open-type="chooseAvatar" @chooseavatar="chooseavatar" class="font text_3" style="padding-top: 30rpx;">更换头像</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view @click="popupDon('请填写姓名', userlist.username)"
|
||
class="flex-row justify-between items-center self-stretch group_3 flex-box-list">
|
||
<text class="font_2 text_4">姓名</text>
|
||
<view class="flex-row items-center jiantou-d">
|
||
<text class="font">{{userlist.username}}</text>
|
||
<image class="shrink-0 image_5 ml-19" src="../../static/wode-youjianto.png" />
|
||
</view>
|
||
</view>
|
||
|
||
<view @click="sexselect('请选择性别', userlist.sex)"
|
||
class="flex-row justify-between items-center self-stretch group_4 flex-box-list">
|
||
<text class="font_2 text_5">性别</text>
|
||
<view class="flex-row items-center jiantou-d">
|
||
<text class="font text_6">{{userlist.sex === 1 ? '男' : '女'}}</text>
|
||
<image class="shrink-0 image_5 ml-21" src="../../static/wode-youjianto.png" />
|
||
</view>
|
||
</view>
|
||
<view @click="popupDon('请填写年龄',userlist.age)"
|
||
class="flex-row justify-between items-center self-stretch group_5 flex-box-list">
|
||
<text class="font_2 text_7">年龄</text>
|
||
<view class="flex-row items-center jiantou-d">
|
||
<text class="font_3">{{userlist.age}}</text>
|
||
<image class="shrink-0 image_5 ml-19" src="../../static/wode-youjianto.png" />
|
||
</view>
|
||
</view>
|
||
<view @click="popupDon('请填写蜂龄',userlist.beehive_age)"
|
||
class="flex-row justify-between items-center self-stretch group_5 flex-box-list">
|
||
<text class="font_2 text_8">蜂龄</text>
|
||
<view class="flex-row items-center jiantou-d">
|
||
<text class="font_3">{{userlist.beehive_age}}</text>
|
||
<image class="shrink-0 image_5 ml-19" src="../../static/wode-youjianto.png" />
|
||
</view>
|
||
</view>
|
||
<view @click="alterDon('请选择地区', userlist.area)"
|
||
class="flex-row justify-between items-center self-stretch group_5 flex-box-list">
|
||
<text class="font_2 text_9">地区</text>
|
||
<view class="flex-row items-center jiantou-d">
|
||
<text class="font">{{userlist.area}}</text>
|
||
<!-- <text class="font text_10">宁德</text> -->
|
||
<image class="shrink-0 image_5 image_7" src="../../static/wode-youjianto.png" />
|
||
</view>
|
||
</view>
|
||
<view class="flex-row justify-between items-center self-stretch group_5 flex-box-list">
|
||
<text class="font_2">手机号</text>
|
||
<view class="flex-row items-center jiantou-d">
|
||
<text class="font_3">{{userlist.mobile}}</text>
|
||
<image class="ml-16 shrink-0 image_5" src="../../static/wode-youjianto.png" />
|
||
</view>
|
||
</view>
|
||
<view @click="popupDon('请填写紧急联系手机号', userlist.urgency_mobile)"
|
||
class="flex-row justify-between items-center self-stretch group_5 flex-box-list">
|
||
<text class="font_2 text_11">紧急联系手机号</text>
|
||
<view class="flex-row items-center jiantou-d">
|
||
<text class="font_3">{{userlist.urgency_mobile}}</text>
|
||
<image class="ml-16 shrink-0 image_5" src="../../static/wode-youjianto.png" />
|
||
</view>
|
||
</view>
|
||
<!-- <view @click="userout" class="flex-col justify-start items-center self-stretch text-wrapper">
|
||
<text class="text_12">注销登录</text>
|
||
</view> -->
|
||
</view>
|
||
<!-- 弹出层 -->
|
||
<view>
|
||
<u-popup :closeOnClickOverlay="false" :round="30" :show="show" mode="bottom" :safeAreaInsetBottom="true" :negative-top='300'>
|
||
<view class="popup-box">
|
||
<view class="popup-top-text popup-boder-m">
|
||
<view>{{title}}</view>
|
||
<view @click="closeend">X</view>
|
||
</view>
|
||
<view class="popup-boder-m">
|
||
<u--input shape="circle" placeholder="请输入内容" border="surround" v-model="inputvalue" :cursorSpacing='150' :adjustPosition='true'></u--input>
|
||
</view>
|
||
<view class="popup-button-b" style="margin-bottom: 200rpx;">
|
||
<u-button @click="putval" color="#23693f" shape="circle" type="primary" text="确 定"></u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
<u-picker @cancel="showfengzhong=false" @confirm="confirmfengzhong" :show="showfengzhong"
|
||
:columns="fengzhongcolumns"></u-picker>
|
||
<address-picker @cancel="showst=false" :address-data="addressData" :show="showst" :columns="columns"
|
||
@confirm="confirm"></address-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../utils/request'
|
||
export default {
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
return {
|
||
fengzhongcolumns: [
|
||
// '中华蜂','意大利蜂','东北黑蜂'
|
||
[{
|
||
text: '男',
|
||
id: 1
|
||
}, {
|
||
text: '女',
|
||
id: 2
|
||
}]
|
||
],
|
||
showfengzhong: false,
|
||
columns: [],
|
||
showst: false,
|
||
addressData: ['北京市', '北京市', '东城区'],
|
||
uplistData: {
|
||
username: '',
|
||
sex: '',
|
||
age: '',
|
||
beehive_age: '',
|
||
urgency_mobile: '',
|
||
area: '',
|
||
receiver: '',
|
||
shipping_mobile: '',
|
||
shipping_area: '',
|
||
shipping_address: '',
|
||
shipping_floor: ''
|
||
},
|
||
fileList1: [], // 图片上传
|
||
title: '', // 弹出层
|
||
inputvalue: '', // 弹-输入框
|
||
list: [{
|
||
name: '男'
|
||
},
|
||
{
|
||
name: '女'
|
||
},
|
||
{
|
||
name: '未知'
|
||
}
|
||
],
|
||
show: false, // 弹出层控制变量
|
||
userlist: {}, // 个人信息数据
|
||
columns: [
|
||
['中国', '美国'],
|
||
['深圳', '厦门', '上海', '拉萨']
|
||
],
|
||
columnData: [
|
||
['深圳', '厦门', '上海', '拉萨'],
|
||
['得州', '华盛顿', '纽约', '阿拉斯加']
|
||
],
|
||
userImage: 'a'
|
||
};
|
||
},
|
||
onShow() {
|
||
this.setuser()
|
||
},
|
||
methods: {
|
||
confirmfengzhong(e) {
|
||
// console.log(e.value[0].id,'11111111');
|
||
this.update({
|
||
sex: e.value[0].id
|
||
})
|
||
this.showfengzhong = false
|
||
this.setuser()
|
||
},
|
||
sexselect() {
|
||
this.showfengzhong = true
|
||
},
|
||
confirm(e) {
|
||
// console.log('confirm', e.value)
|
||
this.update({
|
||
area: `${e.value[0]}${e.value[1]}${e.value[2]}`
|
||
})
|
||
this.showst = false
|
||
this.setuser()
|
||
},
|
||
alterDon() {
|
||
this.showst = true
|
||
},
|
||
userout() {
|
||
// console.log('退出登录')
|
||
wx.removeStorageSync('userToken');
|
||
uni.reLaunch({
|
||
url: '/pages/login/index',
|
||
});
|
||
},
|
||
chooseavatar(e) {
|
||
console.log(this.userImage)
|
||
console.log(e,'eeeeeeeeeeeeeeeeeeeee');
|
||
let token = wx.getStorageSync('userToken')
|
||
// this.avatarUrl=e.detail
|
||
let _this=this
|
||
// 上传图片到七牛云
|
||
console.log(e.detail.avatarUrl,'e.url')
|
||
let math=uni.getStorageSync('isid')+'/'+_this.$u.guid(20)
|
||
wx.uploadFile({
|
||
url: 'https://wx.beishaoyuan.com/api/index/upload',
|
||
name: 'file',
|
||
filePath: e.detail.avatarUrl,
|
||
formData: {
|
||
token: token, //后端返回的token
|
||
|
||
},
|
||
success: function(res) {
|
||
// console.log(res,'resres');
|
||
let str = JSON.parse(res.data)
|
||
console.log(str)
|
||
_this.userImage =str.data.url
|
||
_this.update({
|
||
avatar: _this.userImage
|
||
})
|
||
// _this.userImg = 'https://file.langsi.online/' + str.key
|
||
// 将上传的图片push到 数组中
|
||
}
|
||
});
|
||
|
||
},
|
||
|
||
// 图片上传
|
||
// 新增图片
|
||
async afterRead(event) {
|
||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||
let lists = [].concat(event.file)
|
||
let fileListLen = this[`fileList${event.name}`].length
|
||
lists.map((item) => {
|
||
this[`fileList${event.name}`].push({
|
||
...item,
|
||
status: 'uploading',
|
||
message: '上传中'
|
||
})
|
||
})
|
||
for (let i = 0; i < lists.length; i++) {
|
||
const result = await this.uploadFilePromise(lists[i].url)
|
||
let item = this[`fileList${event.name}`][fileListLen]
|
||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||
status: 'success',
|
||
message: '',
|
||
url: result
|
||
}))
|
||
fileListLen++
|
||
}
|
||
},
|
||
uploadFilePromise(url) {
|
||
return new Promise((resolve, reject) => {
|
||
// let a = request.put('',{})
|
||
let a = uni.uploadFile({
|
||
url: '/api/user/update', // 仅为示例，非真实的接口地址
|
||
filePath: url,
|
||
name: 'file',
|
||
formData: {
|
||
user: 'test'
|
||
},
|
||
success: (res) => {
|
||
setTimeout(() => {
|
||
resolve(res.data.data)
|
||
}, 1000)
|
||
}
|
||
});
|
||
})
|
||
},
|
||
// 地区
|
||
changeHandler(e) {
|
||
const {
|
||
columnIndex,
|
||
value,
|
||
values, // values为当前变化列的数组内容
|
||
index,
|
||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||
picker = this.$refs.uPicker
|
||
} = e
|
||
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
||
if (columnIndex === 0) {
|
||
// picker为选择器this实例，变化第二列对应的选项
|
||
picker.setColumnValues(1, this.columnData[index])
|
||
}
|
||
},
|
||
putval() {
|
||
// 判断用户有没有输入内容
|
||
if (this.inputvalue) {
|
||
// 发请求修改数据，关闭弹窗，提示用户，清空弹窗里的输入框
|
||
// this.popupDon(this.title)
|
||
|
||
|
||
if (this.title == '请填写姓名') {
|
||
this.update({
|
||
username: this.inputvalue
|
||
})
|
||
} else if (this.title == '请填写年龄') {
|
||
this.update({
|
||
age: this.inputvalue
|
||
})
|
||
} else if (this.title == '请填写蜂龄') {
|
||
this.update({
|
||
beehive_age: this.inputvalue
|
||
})
|
||
} else if (this.title == '请填写紧急联系手机号') {
|
||
this.update({
|
||
urgency_mobile: this.inputvalue
|
||
})
|
||
}
|
||
this.setuser()
|
||
this.closeend()
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: '请输入内容',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
},
|
||
async update(item) {
|
||
await request.put('/api/user/update', item).then(res => {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: res.data.msg,
|
||
})
|
||
this.setuser()
|
||
}).catch(e => {})
|
||
},
|
||
popupDon(title) {
|
||
this.title = title
|
||
if (this.title == '请填写姓名') {
|
||
this.inputvalue = this.userlist.username
|
||
} else if (this.title == '请填写年龄') {
|
||
this.inputvalue = this.userlist.age
|
||
} else if (this.title == '请填写蜂龄') {
|
||
this.inputvalue = this.userlist.beehive_age
|
||
} else if (this.title == '请填写紧急联系手机号') {
|
||
this.inputvalue = this.userlist.urgency_mobile
|
||
}else{
|
||
this.inputvalue = this.userlist.mobile
|
||
}
|
||
|
||
|
||
// if (this.inputvalue) {
|
||
// if (this.title == '请填写姓名') {
|
||
// this.update({
|
||
// username: this.inputvalue
|
||
// })
|
||
// } else if (this.title == '请填写年龄') {
|
||
// this.update({
|
||
// age: this.inputvalue
|
||
// })
|
||
// } else if (this.title == '请填写蜂龄') {
|
||
// this.update({
|
||
// beehive_age: this.inputvalue
|
||
// })
|
||
// } else if (this.title == '请填写紧急联系手机号') {
|
||
// this.update({
|
||
// urgency_mobile: this.inputvalue
|
||
// })
|
||
// }
|
||
// }
|
||
this.show = true
|
||
},
|
||
// 开启弹层
|
||
close() {
|
||
this.show = true
|
||
// console.log(this.close)
|
||
},
|
||
// 关闭弹层
|
||
closeend() {
|
||
this.show = false
|
||
this.inputvalue = ''
|
||
},
|
||
async setuser() {
|
||
const res = await request.get('/api/user/info')
|
||
// console.log(res.data.data, '111')
|
||
this.userlist = {
|
||
...res.data.data
|
||
}
|
||
this.userImage = res.data.data.avatar
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="css">
|
||
.popup-button-b {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.popup-box {
|
||
padding: 30rpx 60rpx;
|
||
border-radius: 50rpx;
|
||
}
|
||
|
||
.popupStyle {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.popup-boder-m {
|
||
margin-bottom: 90rpx;
|
||
}
|
||
|
||
.popup-top-text {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.jiantou-d {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.flex-box-list {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.img-t {
|
||
width: 144rpx;
|
||
height: 144rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.image-box-t {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.ml-19 {
|
||
margin-left: 38rpx;
|
||
}
|
||
|
||
.ml-21 {
|
||
margin-left: 42rpx;
|
||
}
|
||
|
||
.page {
|
||
background-color: #ffffff;
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
height: 100%;
|
||
}
|
||
|
||
.image_5 {
|
||
width: 25rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.section {
|
||
padding: 30rpx 46rpx 40rpx 56rpx;
|
||
background-color: #ffffff;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.image_6 {
|
||
width: 144rpx;
|
||
height: 144rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
|
||
.font {
|
||
font-size: 30rpx;
|
||
font-family: 微软雅黑;
|
||
line-height: 27.6rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.text_3::after {
|
||
border: none;
|
||
height: 90rpx;
|
||
}
|
||
|
||
.text_3 {
|
||
background-color: #ffffff;
|
||
border: 0px solid red;
|
||
margin-top: 24rpx;
|
||
font-size: 28rpx;
|
||
line-height: 25.84rpx;
|
||
height: 90rpx;
|
||
}
|
||
|
||
.text_3-box {
|
||
width: 300rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
|
||
.group_3 {
|
||
margin-top: 92rpx;
|
||
padding: 0 28rpx;
|
||
}
|
||
|
||
.font_2 {
|
||
font-size: 30rpx;
|
||
font-family: 微软雅黑;
|
||
line-height: 27.6rpx;
|
||
color: #888888;
|
||
}
|
||
|
||
.text_4 {
|
||
line-height: 27.66rpx;
|
||
}
|
||
|
||
.group_4 {
|
||
margin-top: 36rpx;
|
||
padding: 44rpx 24rpx 36rpx;
|
||
border-top: solid 2rpx #8888881a;
|
||
border-bottom: solid 2rpx #8888881a;
|
||
}
|
||
|
||
.text_5 {
|
||
line-height: 27.72rpx;
|
||
}
|
||
|
||
.text_6 {
|
||
line-height: 26.02rpx;
|
||
}
|
||
|
||
.group_5 {
|
||
padding: 40rpx 28rpx;
|
||
border-bottom: solid 2rpx #8888881a;
|
||
}
|
||
|
||
.text_7 {
|
||
line-height: 27.76rpx;
|
||
}
|
||
|
||
.font_3 {
|
||
font-size: 30rpx;
|
||
font-family: 微软雅黑;
|
||
margin-right: 20rpx;
|
||
/* line-height: 21.92rpx; */
|
||
color: #000000;
|
||
}
|
||
|
||
.text_8 {
|
||
line-height: 27.7rpx;
|
||
}
|
||
|
||
.text_9 {
|
||
line-height: 26.92rpx;
|
||
}
|
||
|
||
.text_10 {
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
.image_7 {
|
||
margin-left: 40rpx;
|
||
}
|
||
|
||
.text_11 {
|
||
line-height: 27.92rpx;
|
||
}
|
||
|
||
.text-wrapper {
|
||
text-align: center;
|
||
margin: 70rpx 12rpx 0;
|
||
padding: 28rpx 0;
|
||
background-color: #88888880;
|
||
border-radius: 40rpx;
|
||
}
|
||
|
||
.text_12 {
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
font-family: SourceHanSansCN;
|
||
line-height: 29.64rpx;
|
||
}
|
||
</style> |