更换头像页面

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,5 +1,8 @@
 <template>
-	<view>
+	<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">
@@ -10,10 +13,15 @@
 					<image :src="avatarUrl"></image>
 				</view>
 			</view>
+		</view>
+	</view>
 </template>
 
 <script>
-	import {mapState,mapMutations} from 'vuex'
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex'
 	export default {
 		data() {
 			return {
@@ -22,7 +30,9 @@
 			};
 		},
 		onLoad(options) {
-			wx.cloud.init({ traceUser: true});
+			wx.cloud.init({
+				traceUser: true
+			});
 			this.avatarUrl = options.avatarUrl
 			this.name = options.name
 		},
@@ -48,7 +58,10 @@
 			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({
@@ -58,7 +71,7 @@
 			},
 			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,
@@ -85,34 +98,58 @@
 </script>
 
 <style lang="scss">
+	@import url("@/static/base_css.css");
+
+	.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 {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		margin: 15rpx;
-    border-bottom: 1rpx solid gray;
+		border-bottom: 1px solid #e5e5e5;
 		padding-bottom: 20rpx;
 	}
 
 	.tip {
-    font-size: 44rpx;
-    margin: 20rpx;
-    color: red;
-}
-
-.item image {
-    width: 200rpx;
-    height: 200rpx;
-    border-radius: 10rpx;
-    margin: 10rpx 30rpx;
-
+		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;
+		padding: 5rpx 10rpx;
+		height: 70rpx;
+		flex-direction: row;
+		align-items: center;
+		border-radius: 4px;
+		border: 0 none;
+		box-sizing: border-box;
 		border-radius: 20rpx;
-    padding: 5rpx 15rpx;
+		text-align: right;
 	}
 
+	.item image {
+		width: 150rpx;
+		height: 150rpx;
+		border-radius: 10rpx;
+		margin: 10rpx;
+	}
 </style>