更换头像页面

pages.json

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

static/base_css.css

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

subpkg/userInfo/userInfo.vue

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