kylin
/
zdxtDrillProgram
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

更换头像页面

h5_css
蟑螂恶霸 2 years ago
parent
633bfcdef3
commit
ffde59be9c
3 changed files with 115 additions and 81 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      pages.json
  2. 6
      static/base_css.css
  3. 187
      subpkg/userInfo/userInfo.vue

3
pages.json
View File

@ -194,7 +194,8 @@
"style" : "style" :
{ {
"navigationBarTitleText" : "", "navigationBarTitleText" : "",
"enablePullDownRefresh" : false "enablePullDownRefresh" : false,
"navigationStyle": "custom"
} }
}] }]
}], }],

6
static/base_css.css
View File

@ -267,16 +267,12 @@ h3.contit span {
position: relative; position: relative;
top: 0; top: 0;
width: 100%; width: 100%;
height: calc(100% - 60rpx); height: calc(100% - 8vh);
background-image: linear-gradient(to bottom, #bac6fc, transparent 40%); background-image: linear-gradient(to bottom, #bac6fc, transparent 40%);
box-sizing: content-box; box-sizing: content-box;
overflow: hidden; overflow: hidden;
} }
.mainwrap3 {
overflow-y: hidden;
}
.tabwrap { .tabwrap {
position: fixed; position: fixed;
top: 220rpx; top: 220rpx;

187
subpkg/userInfo/userInfo.vue
View File

@ -1,83 +1,96 @@
<template> <template>
<view> <view class="wrap">
<view class="item"> <navigation title="建议与意见反馈"></navigation>
<view class="tip">编辑用户昵称</view> <view class="mainwrap2">
<input type="nickname" @blur="updateUserNameMethod" v-model="name" > <view class="table_index">
</view> <view class="item">
<view class="line"></view> <view class="tip">编辑用户昵称</view>
<view class="item" @click="chooseImage()"> <input type="nickname" @blur="updateUserNameMethod" v-model="name">
<view class="tip">点击修改头像</view> </view>
<image :src="avatarUrl"></image> <view class="line"></view>
<view class="item" @click="chooseImage()">
<view class="tip">点击修改头像</view>
<image :src="avatarUrl"></image>
</view>
</view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import {mapState,mapMutations} from 'vuex' import {
mapState,
mapMutations
} from 'vuex'
export default { export default {
data() { data() {
return { return {
avatarUrl:"", avatarUrl: "",
name:"" name: ""
}; };
}, },
onLoad(options) { onLoad(options) {
wx.cloud.init({ traceUser: true}); wx.cloud.init({
traceUser: true
});
this.avatarUrl = options.avatarUrl this.avatarUrl = options.avatarUrl
this.name = options.name this.name = options.name
}, },
computed: { computed: {
...mapState('m_user', ['userId']) ...mapState('m_user', ['userId'])
}, },
methods:{ methods: {
...mapMutations('m_user', ['updateUserName','updateAvatarUrl', 'updateRedirectInfo']), ...mapMutations('m_user', ['updateUserName', 'updateAvatarUrl', 'updateRedirectInfo']),
//选择图片 //选择图片
chooseImage() { chooseImage() {
wx.chooseMedia({ wx.chooseMedia({
count: 1, count: 1,
mediaType: ['image'], mediaType: ['image'],
sizeType: ['compressed'], //可以指定是原图还是压缩图，这里用压缩 sizeType: ['compressed'], //可以指定是原图还是压缩图，这里用压缩
sourceType: ['album', 'camera'], //从相册选择 sourceType: ['album', 'camera'], //从相册选择
success: (res) => { success: (res) => {
this.updateUserAvatarUrl(res.tempFiles[0].tempFilePath) this.updateUserAvatarUrl(res.tempFiles[0].tempFilePath)
} }
}) })
}, },
//编辑名称 //编辑名称
async updateUserNameMethod(){ async updateUserNameMethod() {
const { const {
data: res data: res
} = await uni.$http.post('/small/wechat/editInfo',{guid:this.userId,nickname:this.name}) } = await uni.$http.post('/small/wechat/editInfo', {
guid: this.userId,
nickname: this.name
})
if (!res.success) return uni.$showMsg() if (!res.success) return uni.$showMsg()
this.updateUserName(this.name) this.updateUserName(this.name)
uni.showToast({ uni.showToast({
icon:'none', icon: 'none',
title:'编辑成功' title: '编辑成功'
}) })
}, },
async updateUserAvatarUrl(url){ async updateUserAvatarUrl(url) {
//wx.uploadFile本身有一个this，所以要通过外部var _this = this 把this带进来 //wx.uploadFile本身有一个this，所以要通过外部var _this = this 把this带进来
var _this = this　 var _this = this
wx.uploadFile({ wx.uploadFile({
url: uni.$http.baseUrl + '/small/wechat/editUserAvatar', url: uni.$http.baseUrl + '/small/wechat/editUserAvatar',
filePath: url, filePath: url,
name: 'file', name: 'file',
formData:{ formData: {
'guid':this.userId 'guid': this.userId
}, },
success:function(res){ success: function(res) {
if (res.data!=null) { if (res.data != null) {
const obj = JSON.parse(res.data); const obj = JSON.parse(res.data);
if (obj==null || !obj.success) return uni.$showMsg() if (obj == null || !obj.success) return uni.$showMsg()
_this.avatarUrl = uni.$http.baseUrl + obj.data; _this.avatarUrl = uni.$http.baseUrl + obj.data;
_this.updateAvatarUrl(uni.$http.baseUrl + obj.data) _this.updateAvatarUrl(uni.$http.baseUrl + obj.data)
uni.showToast({ uni.showToast({
icon:'none', icon: 'none',
title:'编辑成功' title: '编辑成功'
}) })
} }
}, },
}) })
}, },
} }
@ -85,34 +98,58 @@
</script> </script>
<style lang="scss"> <style lang="scss">
.item { @import url("@/static/base_css.css");
display: flex;
align-items: center;
justify-content: space-between;
margin: 15rpx;
border-bottom: 1rpx solid gray;
padding-bottom: 20rpx;
}
.tip { .table_index {
font-size: 44rpx; margin: 3% 3% 0;
margin: 20rpx; padding: 50rpx 30rpx;
color: red; width: 94%;
} height: 82vh;
background-image: linear-gradient(to bottom, #fff, transparent);
border-radius: 20rpx;
box-sizing: border-box;
}
.item image { .item {
width: 200rpx; display: flex;
height: 200rpx; align-items: center;
border-radius: 10rpx; justify-content: space-between;
margin: 10rpx 30rpx; margin: 15rpx;
border-bottom: 1px solid #e5e5e5;
padding-bottom: 20rpx;
}
} .tip {
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
font-size: 14px;
color: #606266;
height: 72rpx;
padding: 0 24rpx 0 0;
vertical-align: middle;
flex-shrink: 0;
box-sizing: border-box;
}
.item input { .item input {
flex: 1; flex: 1;
border: 1px solid gray; padding: 5rpx 10rpx;
border-radius: 20rpx; height: 70rpx;
padding: 5rpx 15rpx; flex-direction: row;
} align-items: center;
border-radius: 4px;
border: 0 none;
box-sizing: border-box;
border-radius: 20rpx;
text-align: right;
}
</style> .item image {
width: 150rpx;
height: 150rpx;
border-radius: 10rpx;
margin: 10rpx;
}
</style>
Write Preview
Loading…
Cancel
Save