<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 src="@/static/icon/my03.png" mode=""></image> </button> <view class="content-in-info-r"> <view class="content-in-info-r-t baiyin-flex"> <text v-if="nameDisabled">用户名称</text> <input v-else confirm-type="确定" @confirm="inputNameConfirm" maxlength="15" type="text" value="用户名称" /> <image src="@/static/icon/my02.png" mode="" @click="nameDisabled = !nameDisabled"></image> </view> <view class="content-in-info-r-b">手机号:12385757454</view> </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="退出登录" 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'; export default { data() { return { imgBgUrl: apiBaseConfig.imgBgUrl, globalData: getApp().globalData, scrollTopHeader: 0, nameDisabled: true, 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' } ] }; }, onLoad() {}, methods: { ...mapMutations(['upDateUserInfoMount']), onChooseavatar(e) { console.log(e); return; let self = this; const { avatarUrl } = e.detail; this.fdsa = avatarUrl; console.log(avatarUrl, e, 'fsdafdsa'); wx.getFileSystemManager().readFile({ filePath: avatarUrl, //选择图片返回的相对路径 encoding: 'base64', //编码格式 success: res => { //成功的回调 console.log(res); console.log(res.data); userUpdatePOST({ headImgUrl: res.data }).then(res => { console.log(res.code, 'pppppppppppp'); if (res.code === 200) { uni.showToast({ title: '修改成功', icon: 'none' }); console.log(111111111111); // self.upDateUserInfoMount(); } }); } }); }, inputNameConfirm(e) { console.log('======inputNameConfirm:', e); }, clickJumpNPage(row) { if (row.url) { this.$uniGo.navigateTo({ url: row.url }); } }, handleLogin(){ 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>