<style> page { background: #f5f5f5 } .user-line { padding: 0 15px; height: 70px; background: #fff; border-top: 1px #f5f5f5 solid; display: flex; align-items: center } .ul-left { color: #585858; font-size: 14px } .ul-right { width: 60%; margin-left: auto; display: flex; align-items: center; justify-content: flex-end } .ulr-name { color: #9b9b9b; font-size: 13px } .ulr-img { width: 50px; height: 50px } .ulr-img image { width: 100%; height: 100%; border-radius: 100% } .ulr-jiantou { width: 16px; height: 16px; margin-left: 10px } .ulr-jiantou image { width: 100%; height: 100% } </style> <template> <view id="box"> <view class="user-line"> <view class="ul-left"><text>头像</text></view> <view class="ul-right" @tap="upImgs"> <view class="ulr-img"> <image :src="userInfo.avatar ? userInfo.avatar : '/static/img/user-avatar2.png'" mode="aspectFill"> </image> </view> <view class="ulr-jiantou"> <image src="/static/img/ic_next.png"></image> </view> </view> </view> <view class="user-line" @tap="tapOpen" :data-url="'/pages/user/userinfo/mobile'"> <view class="ul-left"><text>手机号码</text></view> <view class="ul-right"> <view class="ulr-name"> <text>{{userInfo.mobile}}</text> </view> </view> </view> <view class="user-line" @tap="tapOpen" :data-url="'/pages/user/userinfo/area?val='+ userInfo.region"> <view class="ul-left"><text>地区</text></view> <view class="ul-right"> <view class="ulr-name"> <text>{{userInfo.region || "请输入省市区"}}</text> </view> <view class="ulr-jiantou"> <image src="/static/img/ic_next.png"></image> </view> </view> </view> <view class="user-line" @tap="tapOpen" :data-url="'/pages/user/userinfo/nickname?val='+ userInfo.nickname"> <view class="ul-left"><text>昵称</text></view> <view class="ul-right"> <view class="ulr-name"> <text>{{userInfo.nickname}}</text> </view> <view class="ulr-jiantou"> <image src="/static/img/ic_next.png"></image> </view> </view> </view> <view class="user-line" @tap="tapOpen" data-url="/pages/user/address/address"> <view class="ul-left"><text>地址管理</text></view> <view class="ul-right"> <view class="ulr-name"> <text></text> </view> <view class="ulr-jiantou"> <image src="/static/img/ic_next.png"></image> </view> </view> </view> <view class="user-line" @tap="tapOpen" data-url="/pages/user/userinfo/password"> <view class="ul-left"><text>修改密码</text></view> <view class="ul-right"> <view class="ulr-name"> <text></text> </view> <view class="ulr-jiantou"> <image src="/static/img/ic_next.png"></image> </view> </view> </view> </view> </template> <script> import { mapState, mapMutations } from 'vuex' export default { computed: mapState(['user']), data() { return { userInfo: {} } }, onShow() { this.getData(); }, methods: { ...mapMutations(['loginOut']), getData() { this .request .post("userInfo") .then(res => { if (res.code == 200) { this.userInfo = res.data; } else { this.utils.Tip(res.msg); } }) .catch(err => { this.utils.Tip("网络错误,请稍后尝试"); }); }, /** * 打开文件 * @param {Object} ev */ tapOpen: function(ev) { console.log(ev) let url = ev.currentTarget.dataset.url uni.navigateTo({ url: url }); }, upImgs: function() { // #ifdef APP-PLUS this.$store.dispatch('permission/requestPermissions', 'WRITE_EXTERNAL_STORAGE').then(res => { // if (res !== 1) return; console.log(res,'11'); this.upImg(); }); return; // #endif // #ifndef APP this.upImg(); // #endif }, upImg: function() { uni.chooseImage({ count: 1, sizeType: ['compressed'], success: (res) => { let img = res.tempFilePaths[0]; this.utils.loadIng(); this .request .post("qiniu") .then(res => { uni.uploadFile({ url: 'https://up-z0.qiniup.com', filePath: img, name: 'file', formData: { 'key': res.data.mk_str, 'token': res.data.token }, success: (uploadFileRes) => { this.request.post("saveAvatar", { img: res.data.url }).then( (res2) => { uni.hideLoading(); if (res2.code == 200) { this.userInfo.avatar = res.data .url; } else { this.utils.Tip(res2.msg); } }).catch(err => { this.utils.Tip("网络错误,请稍后尝试"); }); }, fail: () => { uni.hideLoading(); this.utils.Tip("上传失败,请重新尝试"); } }); }) .catch(err => { uni.hideLoading(); this.utils.Tip("请重新上传图片"); }); } }); }, }, } </script>