2759

package_mine/pages/userInfo/index.js

@@ -129,8 +129,9 @@ Page({
         this.setData({form})
         this.validate(name)
     },
-    /* 上传图片 */
-    uploadImage(){
+
+    // 点击相机
+    uploadAvatar() {
         wx.chooseMedia({
             count: 1, // 最多可以选择的图片张数，默认9
             mediaType: ['image'], // 图片
@@ -147,26 +148,10 @@ Page({
                 this.validate('headimgurl')
             },
             fail: (e) => {
-                console.log(e);
+                console.log(e, '取消选择');
             }
         })
     },
-
-    // 删除图片
-    deleteImage() {
-        let form = this.data.form
-        form.headimgurl = ''
-        this.setData({ form, image: '' })
-        this.validate('headimgurl')
-    },
-
-    /** 返回 */
-    return() {
-        wx.switchTab({
-          url: '/pages/mine/index',
-        })
-    },
-
     /**
      * 图片上传oss
      */

package_mine/pages/userInfo/index.wxml

@@ -1,27 +1,21 @@
 <!--package_mine/pages/userInfo/index.wxml-->
 <view class="form_container">
+    <view class="upload_box {{formRules.headimgurl.warning? 'warning': ''}}" bindtap="uploadAvatar">
+        <image class="image_item" src="{{form.headimgurl}}" mode="aspectFill">
+        </image>
+        <image class="upload_img" src="../../../assets/img/camera.png" mode="aspectFill">
+        </image>
+        <text class="tips">请上传个人头像</text>
+    </view>
     <view class="form_item {{formRules.nickname.warning ? 'warning' : ''}}">
-        <text><text style="color: red;">*</text>用户名称：</text>
+        <text style="color: #6F6F6F;font-size: 28rpx;"><text style="color: red;">*</text>用户名称：</text>
         <view class="value_box">
-            <input style="width: 100%;height: 100%;" type="text" maxlength="100" placeholder="请输入您的姓名" placeholder-style="font-size: 24rpx; color: #A6A6A6;" adjust-position="{{true}}" value="{{form.nickname}}"
+            <input style="width: 100%;height: 100%;text-align: end;" type="text" maxlength="100" placeholder="请输入您的姓名" placeholder-style="font-size: 26rpx; color: #A6A6A6;" adjust-position="{{true}}" value="{{form.nickname}}"
     data-name="nickname" name="nickname" bindinput="bindValue" />
         </view>
         <text class="tips">请输入用户名称</text>
     </view>
-    <view class="upload_images {{formRules.headimgurl.warning? 'warning': ''}}">
-        <text><text style="color: red;">*</text>个人头像：</text>
-            <view class="image_preview" wx:if="{{form.headimgurl}}">
-                <image class="image_item" src="{{form.headimgurl}}" mode="aspectFill">
-                </image>
-                <div class="close" catchtap="deleteImage"></div>
-            </view>
-            <view class="upload_image" bindtap="uploadImage" wx:if="{{form.headimgurl.length<1}}">
-                <image style="height: 56rpx;width: 56rpx;" mode="widthFix" src="../../../assets/img/upload.png"></image>
-            </view>
-        <text class="tips">请上传个人头像</text>
-    </view>
     <view class="btn_list">
-        <view class="btn_item cancel_btn" bindtap="return">返回</view>
         <view class="btn_item submit_btn" bindtap="submit">确定</view>
     </view>
 

package_mine/pages/userInfo/index.wxss

@@ -1,29 +1,47 @@
 /* package_mine/pages/userInfo/index.wxss */
 .form_container {
     width: 100%;
-    padding: 30rpx 80rpx;
+    padding: 30rpx;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    align-items: flex-start;
+    align-items: center;
+}
+.upload_box {
+    margin-bottom: 130rpx;
+    position: relative;
+}
+.image_item {
+    width: 200rpx;
+    height: 200rpx;
+    border-radius: 50%;
+    
+}
+.upload_img {
+    width: 80rpx;
+    height: 80rpx;
+    position: absolute;
+    right: -10rpx;
+    bottom: -10rpx;
 }
 .form_item {
     width: 100%;
-    margin-bottom: 60rpx;
+    padding: 30rpx 0;
+    margin-bottom: 30rpx;
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: relative;
     font-size: 30rpx;
     color: #666666;
+    border-bottom: 1rpx solid #EDEDED;
 }
 .value_box {
     width: 420rpx;
-    background-color: #F8F8F8;
-    min-height: 68rpx;
+    /* min-height: 68rpx; */
     padding: 0 55rpx 0 20rpx;
     display: flex;
-    justify-content: flex-start;
+    justify-content: flex-end;
     align-items: center;
     border-radius: 34rpx;
     position: relative;
@@ -32,122 +50,37 @@
 }
 .tips{
     position: absolute;
-    bottom: -32rpx;
+    bottom: -40rpx;
     left: -13rpx;
     color: red;
     font-size: 24rpx;
     transform: translate(27rpx, -5rpx);
     display: none;
   }
-  .form_item.warning .tips, .use_purpose.warning .tips, .upload_images.warning .tips{
+  .form_item.warning .tips, .upload_box.warning .tips{
     display: block;
   }
 
-  /* 上传图片 */
-  .upload_images {
-    width: 100%;
-    margin-bottom: 30rpx;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    font-size: 30rpx;
-    color: #666666;
-    position: relative;
-}
-.image_preview {
-  height: 120rpx;
-  width: 120rpx;
-  margin-left: 30rpx;
-  margin-bottom: 20rpx;
-  position: relative;
-}
-.image_item {
-    height:100%;
-    width: 100%;
-    border-radius: 16rpx;
-    margin-bottom: 20rpx;
-}
-.close{
-  position: absolute;
-  top:0;
-  right:0;
-  transform: translate(40%,-40%);
-  height:40rpx;
-  width:40rpx;
-  background:rgba(179, 179, 179, 0.5);
-  border-radius: 50%;
-  z-index: 10;
-}
-.close::before{
-  content: "";
-  display: block;
-  position: absolute;
-  width: 60%;
-  height: 6rpx;
-  top:50%;
-  left:50%;
-  background:rgb(124, 124, 124);
-  transform-origin: center;
-  /* transform: ; */
-  transform: translate(-50%,-50%) rotate(45deg);
-}
-.close::after{
-  content: "";
-  display: block;
-  position: absolute;
-  width: 60%;
-  height: 6rpx;
-  top:50%;
-  left:50%;
-  background:rgb(124, 124, 124);
-  transform-origin: center;
-  /* transform: ; */
-  transform: translate(-50%,-50%) rotate(-45deg);
-}
-.upload_image {
-  width: 120rpx;
-  height: 120rpx;
-  margin-left: 40rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background-color: #F8F8F8;
-  border-radius: 34rpx;
-}
 
-.upload_image text {
-  color: rgba(0, 0, 0, 0.5);
-  font-size: 30rpx;
-}
-.note_mark {
-  margin-top: 20rpx;
-  font-size: 24rpx;
-  color: rgba(153, 153, 153, 1);
-}
 /* 按钮区 */
 .btn_list {
     width: 100%;
-    margin-top: 200rpx;
+    margin-top: 500rpx;
     padding: 10rpx 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 .btn_item {
-    width: 240rpx;
-    height: 80rpx;
+    width: 100%;
+    height: 90rpx;
     border-radius: 40rpx;
     text-align: center;
     line-height: 80rpx;
-    font-size: 26rpx;
-}
-.cancel_btn {
-    color: #333333;
-    border: 1rpx solid #E6E6E6;
-    margin-right: 20rpx;
+    font-size: 32rpx;
 }
+
 .submit_btn {
     color: #ffffff;
-    background-color: #2a82e4;
+    background-color: #3275E9;
 }