SmartBeehive/pages/my.vue
2024-07-03 18:03:01 +08:00

186 lines
4.1 KiB
Vue

<template>
<view class="page">
<u-navbar is-back="false" :title="title" :border-bottom="false" :background="bgc" title-color='#000'
title-size='36' :title-bold='true' height='45' id="navbar">
</u-navbar>
<view class="atv">
<button
v-if="imglist == ''" style="border: 0;outline: none;width: 220rpx;padding-left: 0rpx;height: 220rpx;border-radius: 50%;background: #D8D8D8;"
type="primary reverse" open-type="chooseAvatar" @chooseavatar="getImage">
</button>
<button
v-else style="border: 0;outline: none;width: 220rpx;padding-left: 0rpx;height: 220rpx;border-radius: 50%;"
type="primary reverse" open-type="chooseAvatar" @chooseavatar="getImage">
<image :src="imglist" mode=""></image>
</button>
</view>
<view class="change">
<!-- 身份切换 -->
</view>
<view class="btn_li" @click="btnpage(1)">
隐私政策 <view class="iconfont icon-xiangyou1"></view>
</view>
<view class="btn_li" @click="btnpage(2)">
用户协议 <view class="iconfont icon-xiangyou1"></view>
</view>
<view class="btn_li" @click="btnpage(3)">
关于我们 <view class="iconfont icon-xiangyou1"></view>
</view>
<view class="btn_li" @click="btnsz">
设置 <view class="iconfont icon-xiangyou1"></view>
</view>
<!-- <input type="text" style="margin-left: 50rpx;border: 1px solid #ccc;width: 500rpx;margin-top: 30rpx;" placeholder="aaaaa" :placeholder-style="{}"/> -->
<tab-bar :indexs='4' style=""></tab-bar>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: " #F4FAF8",
},
title: "我的",
userobj:{},
imglist:'',
token:''
}
},
onLoad() {
this.getQiniuToken()
this.getyh()
},
onShow() {
},
methods: {
btnpage(num){
if(num == 1){
uni.navigateTo({
url:'/page_user/about?tit=' + '隐私政策'
})
}else if(num == 2){
uni.navigateTo({
url:'/page_user/about?tit=' + '用户协议'
})
}else if(num == 3){
uni.navigateTo({
url:'/page_user/about?tit=' + '关于我们'
})
}
},
getyh() {
this.$u.get(`app/user/userInfo`).then(res => {
if (res.code == 200) {
this.userobj = res.data
this.imglist = res.data.avatar
}
})
},
btnsz(){
uni.navigateTo({
url:'/page_user/user_set'
})
},
getImage(e) {
let _this = this
let math = 'static/' + _this.$u.guid(20)
const tempFilePaths = e.detail.avatarUrl
wx.uploadFile({
url: 'https://up-z2.qiniup.com',
name: 'file',
filePath: tempFilePaths,
formData: {
token: _this.token,
key: 'smartmeter/img/' + math
},
success: function(res) {
let str = JSON.parse(res.data)
console.log(str.key)
let img = 'https://api.ccttiot.com/' + str.key
_this.imglist = img
let data = {
avatar:_this.imglist
}
_this.$u.put("/app/user",data).then((res) => {
if (res.code == 200) {
uni.showToast({
title: '头像更新成功',
icon: 'success',
duration:1000
})
}
})
}
})
},
getQiniuToken() {
this.$u.get("/common/qiniu/uploadInfo").then((res) => {
if (res.code == 200) {
this.token = res.token
}
});
},
}
}
</script>
<style lang="scss">
page {
background-color: #FAFDFD;
}
.input-placeholder{
color: red;
}
.page {
// position: relative;
width: 750rpx;
.atv {
width: 206rpx;
height: 206rpx;
background: #D8D8D8;
border-radius: 50%;
margin: 100rpx auto 0;
image {
width: 222rpx;
height: 222rpx;
border-radius: 50%;
}
}
.change {
width: 100%;
text-align: center;
margin-top: 38rpx;
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
}
.btn_li {
margin: 38rpx auto 0;
padding: 22rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
width: 658rpx;
height: 88rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
border-radius: 20rpx 20rpx 20rpx 20rpx;
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
}
}
</style>