فهرست منبع

feat:用户头像更换 昵称修改 及 其他优化

DaMowang 3 سال پیش
والد
کامیت
68a3a1b0f7
8فایلهای تغییر یافته به همراه238 افزوده شده و 32 حذف شده
  1. 3 0
      src/main.js
  2. 6 0
      src/pages.json
  3. 1 3
      src/pages/cash/index.vue
  4. 13 3
      src/pages/index/index.vue
  5. 49 26
      src/pages/my/index.vue
  6. 144 0
      src/pages/my/userinfo.vue
  7. 1 0
      src/pages/sign/index.vue
  8. 21 0
      src/utils/up.js

+ 3 - 0
src/main.js

@@ -19,6 +19,9 @@ Vue.prototype.$cof = cof;
 import hosts from "@/request/config";
 Vue.prototype.$hosts = hosts;
 
+import { up } from "@/utils/up";
+Vue.prototype.$up = up;
+
 import { goto } from '@/utils/myfun.js';
 Vue.prototype.goto = goto;
 

+ 6 - 0
src/pages.json

@@ -150,6 +150,12 @@
 				"navigationBarTitleText": "订单详情"
 			}
 		},
+		{
+			"path": "pages/my/userinfo",
+			"style": {
+				"navigationBarTitleText": "基本信息"
+			}
+		},
 		{
 			"path": "pages/top-up/index",
 			"style": {

+ 1 - 3
src/pages/cash/index.vue

@@ -128,7 +128,7 @@ export default {
     uploadImgs(img) {
       var that = this;
       uni.uploadFile({
-        url: "http://api_test.haocha13.cn/v1/user/upload",
+        url: that.$hosts.Hhost + "user/upload",
         filePath: img,
         name: "image",
         header: {
@@ -136,8 +136,6 @@ export default {
         },
         success: function (res) {
           uni.hideToast();
-        //   console.log(res,"wwwww", res.data);
-        //   console.log(res.data.code,"qqqqqqqqqq", res.data.data.src);
         let resTwo = JSON.parse(decodeURIComponent(res.data))
           if (resTwo.code === 0) {
             that.imgs = resTwo.data.src;

+ 13 - 3
src/pages/index/index.vue

@@ -255,7 +255,7 @@ export default {
     margin: 20rpx 0 20rpx;
     padding: 20rpx 0;
     border-radius: 18rpx;
-    box-shadow: 2px 2px 13px 1px rgba(17, 18, 29, 0.08);
+    box-shadow: 4rpx 4rpx 26rpx 2rpx rgba(17, 18, 29, 0.08);
 
     .area_list {
         display: inline-block;
@@ -316,10 +316,20 @@ export default {
   flex-wrap: wrap;
   flex-direction: row;
   .product {
-    width: 50%;
-    padding: 20rpx 10rpx;
+    // width: 50%;
+    // padding: 20rpx 10rpx;
     display: flex;
     flex-direction: column;
+
+    margin-bottom: 20rpx;
+    width: 48.5%;
+    padding-bottom: 6px;
+    // border: 1px solid #eee;
+    border-radius: 5px;
+    box-shadow: 4rpx 4rpx 26rpx 2rpx rgba(17, 18, 29, 0.08);
+    &:nth-child(2n){
+        margin-left: 3%;
+    }
   }
 
   .product-image {

+ 49 - 26
src/pages/my/index.vue

@@ -4,11 +4,7 @@
 			<!-- 用户信息 -->
 			<view class="uerInfo mar_t16 flex_r">
 				<view class="user_img">
-					<image class="image" :src="
-              userinfo && userinfo.head_pic != ''
-                ? userinfo.head_pic
-                : 'https://tea.soowin.com/mnt/image/m_avar.jpg'
-            " mode=""></image>
+					<image @click="upheadimg" class="image" :src="userinfo.head_pic" mode=""></image>
 					<view class="coupon_info flex_r flex_ac" v-if="isShiMing" @tap="goToAutonym">
 						完成实名认证,享受更多权益
 						<image src="/static/my/f_close.png" mode="widthFix" class="close_icon" @tap.stop="closeAuto">
@@ -18,12 +14,12 @@
 				</view>
 				<block v-if="userinfo && userinfo != ''">
 					<view class="user_con flex_c">
-						<view class="user_name flex_r flex_ae ellipsis">{{ userinfo.nickname
-              }}<text>({{
-                  userinfo.is_authentication == 0 ? "未实名" : "已实名"
-                }})</text></view>
+						<view class="user_name flex_r flex_ae ellipsis">
+							<view @click="goto('/pages/my/userinfo')">{{ userinfo.nickname }}</view>
+							<text>({{ userinfo.is_authentication == 0 ? "未实名" : "已实名" }})</text>
+						</view>
 						<view class="flex_r flex_ac">
-							<view class="user_level flex_r mar_t10">
+							<view class="user_level clearfix">
 								<image class="level_img" src="/static/my/huangguan.png" mode=""></image>
 								<view class="level_text">{{ userinfo.level_name }}</view>
 							</view>
@@ -35,12 +31,7 @@
 					</view>
 					<view class="user_option flex_r flex_ac">
 						<image class="code_img" src="/static/my/f_img_code.png" @tap="getImgPage" mode=""></image>
-						<!--            <image
-              class="code_img"
-              src="/static/my/setting.png"
-              @tap="getToSetting"
-              mode=""
-            ></image> -->
+						<!-- <image class="code_img" src="/static/my/setting.png" @tap="getToSetting"></image> -->
 					</view>
 				</block>
 				<block v-else>
@@ -259,7 +250,7 @@
 	// import { ReqApi } from "@/utils/reqTools.js";
 	import authorizeModule from "@/components/authorize-module/index";
 	// import newauthorize from "@/components/authorize-module/new";
-	import uniCopy from "../../utils/copy";
+	import uniCopy from "@/utils/copy";
 	import {
 		get,
 		post,
@@ -284,7 +275,9 @@
 				unid: "",
 				
 				isGetUserInfo:false,
-				invited:''
+				invited:'',
+
+				updataUserimg: {},
 			};
 		},
 		onLoad: function(options) {
@@ -359,7 +352,6 @@
 			autoGetUserInfo(res){
 				this.showAuth = false;
 				this.isGetUserInfo = false
-				console.log(res,"获取到的用户信息")
 			},
 			getuserInfo() {
 				post("/user/userinfo").then((res) => {
@@ -463,6 +455,28 @@
 					url: "/pages/my-acc-money/my-acc-money",
 				});
 			},
+
+			// 更换头像
+			upheadimg() {
+				let that = this;
+				uni.chooseImage({
+					count: 1, // 最多可以选择的图片张数,默认9
+					sizeType: ["compressed"], // original 原图,compressed 压缩图,默认二者都有
+					sourceType: ["album", "camera"], // album 从相册选图,camera 使用相机,默认二者都有
+					success: function (res) {
+						var arr = res.tempFiles;
+						that.$up(arr[0].path).then(res => {
+							post("user/setup", {
+								head_pic: res,
+								nickname: that.userinfo.nickname
+							}).then((res) => {
+								that.getuserInfo();
+								appEv.errTips("更换成功");
+							});
+						});
+					},
+				});
+			},
 		},
 	};
 </script>
@@ -580,18 +594,18 @@
 	}
 
 	.level_text {
-		padding: 0 16rpx;
-		border-radius: 13rpx;
-		font-size: 20rpx;
 		color: #6b2909;
-		margin-left: -14rpx;
-		margin-top: 6rpx;
+		// padding: 0 16rpx;
+		// border-radius: 13rpx;
+		// font-size: 20rpx;
+		// margin-left: -14rpx;
+		// margin-top: 6rpx;
 	}
 
 	.user_name {
 		width: 100%;
 		overflow: hidden;
-		font-size: 46rpx;
+		font-size: 44rpx;
 		color: #121212;
 		font-family: "SourceHanSansSC-Medium";
 		font-weight: 500;
@@ -750,11 +764,20 @@
 	}
 
 	.user_level {
+		margin-top: 10rpx;
 		background: linear-gradient(to right, #ffeabd, #ffc479);
-		padding: 10rpx 20rpx;
+		padding: 5rpx 20rpx;
 		box-sizing: border-box;
 		border-radius: 6rpx;
 		overflow: hidden;
+		.level_img,.level_text{
+			// vertical-align: middle;
+			float: left;
+		}
+		.level_text{
+			font-size: 28rpx;
+			margin-left: 12rpx;
+		}
 	}
 
 	// 功能列表-end

+ 144 - 0
src/pages/my/userinfo.vue

@@ -0,0 +1,144 @@
+<template>
+  <view class="container">
+    <view class="list flex_r flex_ac">
+      <view class="list_title flex_r flex_ac flex_jb"
+        ><text>头</text><text>像:</text></view
+      >
+      <img @click="upheadimg" :src="formDa.head_pic" alt="" srcset="" class="head_pic" />
+    </view>
+    <view class="list flex_r flex_ac">
+      <view class="list_title flex_r flex_ac flex_jb"
+        ><text>昵</text><text>称:</text></view
+      >
+      <input
+        type="text"
+        class="flex_grow"
+        v-model="formDa.nickname"
+        placeholder="请输入昵称"
+      />
+    </view>
+    <view class="confimBtn flex_r flex_ac flex_jc" @tap="upda">提交</view>
+  </view>
+</template>
+
+<script>
+let app = getApp();
+let appEv = app.$vm.$options;
+import { get, post } from "@/request/api.js";
+export default {
+  data() {
+    return {
+      formDa: {},
+    };
+  },
+  onLoad() {
+    this.loadData();
+  },
+  methods: {
+    loadData(){
+        let da = uni.getStorageSync("userinfo");
+        this.formDa.nickname = da.nickname;
+        this.formDa.head_pic = da.head_pic;
+    },
+    upheadimg() {
+      // 上传图片uploadImg
+      let that = this;
+      uni.chooseImage({
+        count: 1, // 最多可以选择的图片张数,默认9
+        sizeType: ["compressed"], // original 原图,compressed 压缩图,默认二者都有
+        sourceType: ["album", "camera"], // album 从相册选图,camera 使用相机,默认二者都有
+        success: function (res) {
+          var arr = res.tempFiles;
+          that.$up(arr[0].path).then(res => {
+            that.$set(that.formDa, "head_pic", res);
+            // that.formDa.head_pic = res;
+          });
+        },
+      });
+    },
+    upda() {
+      post("user/setup", this.formDa).then((res) => {
+        if (res.code === 0) {
+          appEv.errTips(res.msg);
+          this.getuserInfo();
+        }
+      });
+    },
+    getuserInfo() {
+      post("/user/userinfo").then((res) => {
+        if (res.code === 0) {
+          uni.setStorageSync("userinfo", res.data.data);
+          this.loadData();
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+// 页面配置
+.container {
+  width: 100%;
+  overflow: hidden;
+  border-top: 20rpx solid #f5f5f5;
+}
+// 页面配置-end
+
+// 表单
+.list input {
+  font-size: 30rpx;
+  color: #343434;
+}
+.list_title {
+  width: 120rpx;
+  overflow: hidden;
+  margin-right: 100rpx;
+  font-size: 30rpx;
+  color: #535353;
+}
+.confimBtn {
+  width: 329rpx;
+  height: 73rpx;
+  margin: 74rpx auto 0;
+  background: #18bb88;
+  font-size: 40rpx;
+  color: #fff;
+}
+.option {
+  width: 172rpx;
+  height: 54rpx;
+  border-radius: 4rpx;
+  background-color: #18bb88;
+  color: #fff;
+  font-size: 26rpx;
+  margin-left: 12rpx;
+}
+.list {
+  width: 100%;
+  height: 92rpx;
+  background-color: #fff;
+  padding: 0 60rpx;
+  box-sizing: border-box;
+  border-bottom: 3rpx solid rgba(0, 0, 0, 0.12);
+  &:first-child {
+    height: 120rpx;
+    justify-content: space-between;
+  }
+}
+
+.g_color {
+  background-color: #e8e8e8;
+  color: #ff5758;
+}
+// 表单-end
+
+.flex_grow {
+  text-align: right;
+}
+.head_pic {
+  width: 92rpx;
+  height: 92rpx;
+  border-radius: 50%;
+}
+</style>

+ 1 - 0
src/pages/sign/index.vue

@@ -629,6 +629,7 @@ page {
 .Boutique {
     width: 100%;
     overflow: hidden;
+    margin-top: 50rpx;
 }
 
 .bou_list:nth-child(2n) {

+ 21 - 0
src/utils/up.js

@@ -0,0 +1,21 @@
+import hosts from "@/request/config";
+export function up(img) {
+    return new Promise((resolve, reject) => {
+        uni.uploadFile({
+            url: hosts.Hhost + "fileUpload",
+            filePath: img,
+            name: "images",
+            header: {
+                token: uni.getStorageSync("token"),
+            },
+            success: function (res) {
+                let da = JSON.parse(res.data)
+                if (da.code === 0) {
+                    resolve(da.data.images)
+                } else {
+                    reject(da.data.images)
+                }
+            },
+        });
+    });
+}