<template> <view class="content"> <image class="content-bg" src="@/static/icon/my01.png" mode=""></image> <view :style="{ height: `calc(${globalData.statusBarHeight}rpx + 158rpx)` }"></view> <view class="content-in"> <view class="content-in-info baiyin-flex baiyin-flex-c-b"> <button class="content-in-info-l" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar"> <image v-if="!headImgUrl" src="@/static/icon/my03.png" mode=""></image> <image v-else :src="headImgUrl" mode=""></image> </button> <view v-if="token" class="content-in-info-r"> <view class="content-in-info-r-t baiyin-flex"> <text v-if="nameDisabled">{{nickname}}</text> <input v-else confirm-type="确定" @confirm="inputNameConfirm" maxlength="15" type="text" :value="nickname" /> <image src="@/static/icon/my02.png" mode="" @click="nameDisabled = !nameDisabled"></image> </view> <view class="content-in-info-r-b" v-if="mobile">手机号:{{mobile}}</view> </view> <view class="content-in-info-r-b" v-else> 未登录 </view> </view> <view class="content-in-item baiyin-flex baiyin-flex-c-sb baiyin-flex-c-b" v-for="(item, index) in list" :key="index" @click="index != 0 ? clickJumpNPage(item) : null"> <!-- 联系客服生成 --> <button class="content-in-item-btn" v-if="index === 0" open-type="contact"></button> <view class="baiyin-flex baiyin-flex-c-b"> <image :src="item.icon" mode=""></image> <text>{{ item.title }}</text> </view> <image src="@/static/icon/my09.png" mode=""></image> </view> <view class="content-in-btn" @click="handleLogin"> <u-button :text="token ? '退出登录' : '登录'" color="#EA654E" :customStyle="{ width: '560rpx', height: '80rpx', borderRadius: '10rpx', padding: '0rpx', margin: '178rpx 0rpx 0rpx 65rpx' }" ></u-button> </view> </view> <com-navbar :leftIcon="false" bgColor="transparent" title="我的" :titleStyle="{ color: '#ffffff', fontSize: '34rpx' }" /> <com-tabbar :list="[ { name: '首页', icon: '/static/tabbar/tb1.png', selectIcon: '/static/tabbar/td1.png', url: '/pages/home/index', type: 'type' }, { name: '我的需求', icon: '/static/tabbar/tb2.png', selectIcon: '/static/tabbar/td2.png', url: '/pages/demand/index', type: 'type' }, { name: '发布', icon: '/static/tabbar/fb.png', selectIcon: '/static/tabbar/fb.png', url: '/pages/release/index', type: 'type' }, { name: '动态', icon: '/static/tabbar/tb3.png', selectIcon: '/static/tabbar/td3.png', url: '/pages/order/index', type: 'type' }, { name: '我的', icon: '/static/tabbar/tb4.png', selectIcon: '/static/tabbar/td4.png', url: '', type: 'myCenter' } ]" /> </view> </template> <script> import apiBaseConfig from '@/config/index.js'; import { mapMutations } from 'vuex'; import {updateUserMsg} from '@/api/system/index.js' export default { data() { return { imgBgUrl: apiBaseConfig.imgBgUrl, globalData: getApp().globalData, scrollTopHeader: 0, nameDisabled: true, nickname:'用户名称', mobile:'',//手机号 list: [ { icon: require('@/static/icon/my04.png'), title: '联系客服' }, { icon: require('@/static/icon/my05.png'), title: '意见反馈', url: '/my/feedback/index' }, { icon: require('@/static/icon/my06.png'), title: '我的邀请', url: '/my/invite/index' }, { icon: require('@/static/icon/my07.png'), title: '用户协议', url: '/my/agreeOn/index' }, { icon: require('@/static/icon/my08.png'), title: '我的优惠券', url: '/my/coupon/index?type=coupon' } ], token:'', uploadUrl: apiBaseConfig.upload, headImgUrl:'' }; }, onLoad() { let that = this console.log(that.$store.state.login.userInfo.user,'打死你') if(that.$store.state.login.userInfo && that.$store.state.login.userInfo.user && that.$store.state.login.userInfo.user.nickname){ that.nickname = that.$store.state.login.userInfo.user.nickname } if(that.$store.state.login.userInfo && that.$store.state.login.userInfo.user && that.$store.state.login.userInfo.user.headImgUrl){ that.headImgUrl = that.$store.state.login.userInfo.user.headImgUrl } let token = uni.getStorageSync('token') console.log('token',token) if(token){ that.token = token } let mobile = uni.getStorageSync('mobile') that.mobile = mobile }, methods: { onChooseavatar(e) { console.log(e,'1211'); // return; let that = this; const { avatarUrl } = e.detail; that.fdsa = avatarUrl; that.uploadFilePromise(avatarUrl) }, uploadFilePromise(url) { let that = this return new Promise((resolve, reject) => { let a = uni.uploadFile({ url: this.uploadUrl, // 仅为示例,非真实的接口地址 filePath: url, name: 'file', header: { 'Authorization': `Bearer ${uni.getStorageSync('token')}` }, success: (res) => { const { data } = JSON.parse(res.data); that.updateUser({headImgUrl:data.url}) setTimeout(() => { resolve(data.url) }, 1000) } }); }) }, inputNameConfirm(e) { console.log('======inputNameConfirm:', e.detail.value); let that = this this.updateUser({nickname:e.detail.value}) }, async updateUser(data){ let that = this const back_data = await updateUserMsg(data) console.log(back_data) const {code} = back_data if(code === 200){ uni.showToast({ title:'修改成功!', icon:'none' }) } }, clickJumpNPage(row) { if (row.url) { this.$uniGo.navigateTo({ url: row.url }); } }, handleLogin(){ if(this.token){ uni.showModal({ content: '是否要退出登录', success: (res) => { if (res.confirm) { uni.showToast({ title:'退出成功!', icon:'none' }) //执行退出 uni.clearStorageSync() this.token = uni.getStorageSync('token') } } }) }else{ this.$uniGo.navigateTo({ url:'/my/login/login' }) } } } }; </script> <style> page { background-color: #f7f8f9; } </style> <style lang="scss" scoped> .content { &-bg { width: 100%; height: 340rpx; position: absolute; top: 0%; left: 0%; z-index: -1; } &-in { width: calc(100% - 30rpx * 2); margin: 0rpx 30rpx 0; &-info { padding: 35rpx 30rpx; background-color: #ffffff; border-radius: 14rpx; margin-bottom: 16rpx; &-l { width: 120rpx; height: 120rpx; margin: 0 30rpx 0 0; padding: 0rpx; border: none; outline: none; background: transparent; image { width: 100%; height: 100%; border-radius: 50%; } } &-l::after { border: none; } &-r { &-t { margin-bottom: 17rpx; input, text { font-size: 36rpx; font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi; font-weight: 500; color: #666666; margin-right: 34rpx; } image { width: 32rpx; height: 32rpx; margin-top: 5rpx; } } &-b { font-size: 24rpx; font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi; font-weight: 400; color: #666666; } } } &-item { padding: 26rpx 22rpx; background-color: #ffffff; border-radius: 10rpx; box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.05); margin-bottom: 16rpx; position: relative; &-btn { position: absolute; top: 0%; left: 0%; padding: 0rpx; width: 100%; height: 100%; outline: none; border: none; background: transparent; border-radius: 10rpx; } &-btn::after { outline: none; border: none; } > image { width: 34rpx; height: 34rpx; } > view { font-size: 24rpx; font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi; font-weight: 400; color: #333333; image { margin-right: 12rpx; width: 28rpx; height: 28rpx; } } } &-item:last-child { margin-bottom: 0rpx; } } } </style>