个人资料更新

api/user/index.js

@@ -0,0 +1,17 @@
+import http from '@/http/api.js'
+
+export function getCarUserDetail() {
+    return http.request({
+        url: '/blade-user/carowner/getCarUserDetail',
+        method: 'POST'
+    })
+}
+
+
+export function updateCarUserDetail(data) {
+    return http.request({
+        url: '/blade-user/carowner/updateCarUserDetail',
+        method: 'POST',
+        data: data
+    })
+}

pages/me/index.vue

@@ -1,206 +1,204 @@
 <template>
-	<view>
-		<view style="background-color:#03803B;height: 250rpx;">
-			<view style="padding: 33rpx;display: flex;align-items: center;">
-				<view class="">
-					<image :src="userData.avatar||avatarUrl" style="width:100rpx;height: 100rpx;border-radius: 50%;"
-						mode="scaleToFill" @click="showActionSheet">
-					</image>
-				</view>
-				<view style="color:#fff;margin-left: 13rpx;font-size: 30rpx;font-weight: 500;">
-					{{userData.user_name?userData.user_name:''}}
-				</view>
-			</view>
-		</view>
-		<view class="card" style="margin-top: 20rpx;display: flex;align-items: center;">
-			<u-cell-group :border="false">
-				<u-cell title="个人资料" :clickable="true" @click="allClick('个人资料')">
-					<view slot="icon">
-						<image src="/static/images/me/100.png" style="width:26rpx;height: 27rpx;margin-right: 10rpx;"
-							mode="scaleToFill">
-						</image>
-					</view>
-					<view slot="right-icon">
-						<uni-icons type="right" size="18" color='#CCCCCC'></uni-icons>
-					</view>
-				</u-cell>
-				<u-cell title="门店信息" :clickable="true" @click="allClick('门店信息')">
-					<view slot="icon">
-						<image src="/static/images/me/101.png" style="width:26rpx;height: 27rpx;margin-right: 10rpx;"
-							mode="scaleToFill">
-						</image>
-					</view>
-					<view slot="right-icon">
-						<uni-icons type="right" size="18" color='#CCCCCC'></uni-icons>
-					</view>
-				</u-cell>
-				<u-cell title="设置" :clickable="true" :border="false" @click="setUp">
-					<view slot="icon">
-						<image src="/static/images/me/103.png" style="width:26rpx;height: 27rpx;margin-right: 10rpx;"
-							mode="scaleToFill">
-						</image>
-					</view>
-					<view slot="right-icon">
-						<uni-icons type="right" size="18" color='#CCCCCC'></uni-icons>
-					</view>
-				</u-cell>
-			</u-cell-group>
-		</view>
-		<!-- 提取去登录 -->
-		<u-modal :show="adminShow" :showCancelButton="true" content='当前还未登录请先登录！！' @confirm="adminConfirm"
-			@cancel="adminCancel"></u-modal>
-	</view>
+  <view>
+    <view style="background-color:#03803B;height: 250rpx;">
+      <view style="padding: 33rpx;display: flex;align-items: center;">
+        <view class="">
+          <image :src="userData.avatar||avatarUrl" style="width:100rpx;height: 100rpx;border-radius: 50%;"
+                 mode="scaleToFill" @click="showActionSheet">
+          </image>
+        </view>
+        <view style="color:#fff;margin-left: 13rpx;font-size: 30rpx;font-weight: 500;">
+          {{ userData.name ? userData.name : '' }}
+        </view>
+      </view>
+    </view>
+    <view class="card" style="margin-top: 20rpx;display: flex;align-items: center;">
+      <u-cell-group :border="false">
+        <u-cell title="个人资料" :clickable="true" @click="allClick('个人资料')">
+          <view slot="icon">
+            <image src="/static/images/me/100.png" style="width:26rpx;height: 27rpx;margin-right: 10rpx;"
+                   mode="scaleToFill">
+            </image>
+          </view>
+          <view slot="right-icon">
+            <uni-icons type="right" size="18" color='#CCCCCC'></uni-icons>
+          </view>
+        </u-cell>
+        <u-cell title="门店信息" :clickable="true" @click="allClick('门店信息')">
+          <view slot="icon">
+            <image src="/static/images/me/101.png" style="width:26rpx;height: 27rpx;margin-right: 10rpx;"
+                   mode="scaleToFill">
+            </image>
+          </view>
+          <view slot="right-icon">
+            <uni-icons type="right" size="18" color='#CCCCCC'></uni-icons>
+          </view>
+        </u-cell>
+        <u-cell title="设置" :clickable="true" :border="false" @click="setUp">
+          <view slot="icon">
+            <image src="/static/images/me/103.png" style="width:26rpx;height: 27rpx;margin-right: 10rpx;"
+                   mode="scaleToFill">
+            </image>
+          </view>
+          <view slot="right-icon">
+            <uni-icons type="right" size="18" color='#CCCCCC'></uni-icons>
+          </view>
+        </u-cell>
+      </u-cell-group>
+    </view>
+    <!-- 提取去登录 -->
+    <u-modal :show="adminShow" :showCancelButton="true" content='当前还未登录请先登录！！' @confirm="adminConfirm"
+             @cancel="adminCancel"></u-modal>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				avatarUrl: '/static/images/me/head.png',
-				tempFilePaths: [],
-				userData: uni.getStorageSync('userInfo'),
-				adminShow: false,
-			}
-		},
-		onShow() {
-		},
-		methods: {
-			showActionSheet() {
-				uni.showActionSheet({
-					itemList: ['拍照', '从相册选择'],
-					success: (res) => {
-						if (res.tapIndex === 0) {
-							this.chooseMedia('camera')
-						} else {
-							this.chooseMedia('album')
-						}
-					}
-				})
-			},
-			chooseMedia(sourceType) {
-				uni.chooseMedia({
-					count: 1,
-					mediaType: ['image'],
-					sourceType: [sourceType],
-					sizeType: ['original', 'compressed'],
-					camera: 'front',
-					success: (res) => {
-						// this.avatarUrl = res.tempFiles[0].tempFilePath
-						this.tempFilePaths = res.tempFiles.map(file => file.tempFilePath)
-						this.uploadFiles()
-					},
-					fail: (err) => {
-						console.log(err)
-					},
-				})
-			},
-			uploadFiles() {
-				const uploadTasks = this.tempFilePaths.map((filePath, index) => {
-					return new Promise((resolve, reject) => {
-						uni.uploadFile({
-							url: 'https://lt.echepei.com/api/blade-resource/oss/endpoint/put-file',
-							filePath: filePath,
-							name: 'file',
-							header: {
-								'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken'),
-								appId: uni.getAccountInfoSync().miniProgram.appId
-							},
-							success: (uploadRes) => {
-								let obj = {
-									id: this.userData.userId,
-									avatar: JSON.parse(uploadRes.data).data.link
-								}
-								// updateUserAvatar(obj).then(res => {
-								// 	uni.showToast({
-								// 		title: "上传成功",
-								// 		icon: "none",
-								// 		mask: true
-								// 	});
-								// 	this.getUserData()
-								// })
-							},
-							fail: (err) => {
-								reject(err)
-							}
-						})
-					})
-				})
-			},
-			// 确认
-			adminConfirm() {
-				uni.clearStorageSync();
-				uni.redirectTo({
-					url: '/pages/login/index'
-				})
-			},
-			// 取消
-			adminCancel() {
-				uni.switchTab({
-					url: '/pages/me/index'
-				})
-			},
-			setUp() {
-				this.$u.route('/pages/me/setting');
-			},
-			clickMeans() {
-				uni.showToast({
-					title: "开发中",
-					icon: "none",
-				});
-				return
-				uni.$u.route('/pages/views/personalInformation/index');
-			},
-			allClick(name){
-				if(name=='门店信息'){
-					uni.navigateTo({
-						url: '/pages/me/storeInfo'
-					});
-				}
-				if(name=='个人资料'){
-					uni.navigateTo({
-						url: '/pages/me/userInfo'
-					});
-				}
-			}
-		}
-	}
+import {getCarUserDetail, updateCarUserDetail} from "../../api/user/index";
+
+export default {
+  data() {
+    return {
+      avatarUrl: '/static/images/me/head.png',
+      tempFilePaths: [],
+      userData: {},
+      adminShow: false,
+    }
+  },
+  onShow() {
+    this.getUserInfo()
+  },
+  methods: {
+    updateUserAvatar(avatar) {
+      updateCarUserDetail({avatar: avatar, id: this.userData.id}).then(res => {
+        uni.showToast({
+          title: res.msg,
+          icon: "none",
+        });
+      })
+    },
+    async getUserInfo() {
+      const userInfo = await getCarUserDetail()
+      this.userData = userInfo.data
+    },
+    showActionSheet() {
+      uni.showActionSheet({
+        itemList: ['拍照', '从相册选择'],
+        success: (res) => {
+          if (res.tapIndex === 0) {
+            this.chooseMedia('camera')
+          } else {
+            this.chooseMedia('album')
+          }
+        }
+      })
+    },
+    chooseMedia(sourceType) {
+      uni.chooseMedia({
+        count: 1,
+        mediaType: ['image'],
+        sourceType: [sourceType],
+        sizeType: ['original', 'compressed'],
+        camera: 'front',
+        success: (res) => {
+          // this.avatarUrl = res.tempFiles[0].tempFilePath
+          this.tempFilePaths = res.tempFiles.map(file => file.tempFilePath)
+          this.uploadFiles()
+        },
+        fail: (err) => {
+          console.log(err)
+        },
+      })
+    },
+    uploadFiles() {
+      const uploadTasks = this.tempFilePaths.map((filePath, index) => {
+        return new Promise((resolve, reject) => {
+          uni.uploadFile({
+            url: 'https://b2b.gubersail.com:9000/api/blade-resource/oss/endpoint/put-file',
+            filePath: filePath,
+            name: 'file',
+            header: {
+              'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken'),
+              appId: uni.getAccountInfoSync().miniProgram.appId
+            },
+            success: (uploadRes) => {
+              this.userData.avatar = JSON.parse(uploadRes.data).data.link
+              this.updateUserAvatar(this.userData.avatar)
+            },
+            fail: (err) => {
+              reject(err)
+            }
+          })
+        })
+      })
+    },
+    // 确认
+    adminConfirm() {
+      uni.clearStorageSync();
+      uni.redirectTo({
+        url: '/pages/login/index'
+      })
+    },
+    // 取消
+    adminCancel() {
+      uni.switchTab({
+        url: '/pages/me/index'
+      })
+    },
+    setUp() {
+      this.$u.route('/pages/me/setting');
+    },
+    allClick(name) {
+      if (name == '门店信息') {
+        uni.navigateTo({
+          url: '/pages/me/storeInfo'
+        });
+      }
+      if (name == '个人资料') {
+        uni.navigateTo({
+          url: '/pages/me/userInfo'
+        });
+      }
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
-	.action-sheet {
-		background: #fff;
-		border-radius: 24rpx 24rpx 0 0;
-		padding: 30rpx;
-	}
+.action-sheet {
+  background: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  padding: 30rpx;
+}
+
+.action-item {
+  padding: 28rpx 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1rpx solid #f5f5f5;
 
-	.action-item {
-		padding: 28rpx 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-bottom: 1rpx solid #f5f5f5;
+  text {
+    margin-left: 20rpx;
+    font-size: 30rpx;
+  }
+}
 
-		text {
-			margin-left: 20rpx;
-			font-size: 30rpx;
-		}
-	}
+.cancel-btn {
+  padding: 28rpx 0;
+  text-align: center;
+  color: #ff2442;
+  font-size: 30rpx;
+  margin-top: 20rpx;
+}
 
-	.cancel-btn {
-		padding: 28rpx 0;
-		text-align: center;
-		color: #ff2442;
-		font-size: 30rpx;
-		margin-top: 20rpx;
-	}
-	.card {
-		margin: 0 32rpx;
-		background-color: #fff;
-		border-radius: 14rpx;
+.card {
+  margin: 0 32rpx;
+  background-color: #fff;
+  border-radius: 14rpx;
 
-		::v-deep .u-cell__title-text {
-			font-size: 24rpx;
-			font-weight: 400;
-			color: #797979;
-		}
-	}
-</style>
+  ::v-deep .u-cell__title-text {
+    font-size: 24rpx;
+    font-weight: 400;
+    color: #797979;
+  }
+}
+</style>

pages/me/userInfo.vue

@@ -1,112 +1,163 @@
 <template>
-	<view>
-		<view style="padding: 0 62rpx;background-color: #ffffff;">
-			<uni-forms ref="form" :modelValue="form" :border="true" label-width="80">
-				<uni-forms-item name="consumerName" label="头像">
-					<view style="display: flex;justify-content: flex-end;">
-						<image :src="form.avatar||avatarUrl" style="width:100rpx;height: 100rpx;border-radius: 50%;"
-							mode="scaleToFill" @click="showActionSheet">
-						</image>
-					</view>
-				</uni-forms-item>
-				<uni-forms-item name="consumerName" label="用户名">
-					<uni-easyinput v-model="form.consumerName" class="right-align" placeholder-class="placeholder-right"
-						placeholder="请输入用户名" :inputBorder="false" :clearable="false"></uni-easyinput>
-				</uni-forms-item>
-				<uni-forms-item name="consumerPhone" label="手机号">
-					<uni-easyinput v-model="form.consumerPhone" class="right-align"
-						placeholder-class="placeholder-right" placeholder=" " :inputBorder="false" :disabled="true"
-						:clearable="false"></uni-easyinput>
-				</uni-forms-item>
-			</uni-forms>
-		</view>
-	</view>
+  <view class="page-container">
+    <view class="form-wrapper">
+      <uni-forms ref="form" :modelValue="form" :border="true" label-width="80">
+        <uni-forms-item name="consumerName" label="头像">
+          <view style="display: flex; justify-content: flex-end;">
+            <image
+                :src="form.avatar || avatarUrl"
+                style="width:100rpx; height: 100rpx; border-radius: 50%;"
+                mode="scaleToFill"
+                @click="showActionSheet"
+            />
+          </view>
+        </uni-forms-item>
+        <uni-forms-item name="name" label="用户名">
+          <uni-easyinput
+              v-model="form.name"
+              class="right-align"
+              placeholder-class="placeholder-right"
+              placeholder="请输入用户名"
+              :inputBorder="false"
+              :clearable="false"
+          />
+        </uni-forms-item>
+        <uni-forms-item name="phone" label="手机号">
+          <uni-easyinput
+              v-model="form.phone"
+              class="right-align"
+              disabled
+              placeholder=" "
+              :inputBorder="false"
+              :disabled="true"
+              :clearable="false"
+          />
+        </uni-forms-item>
+      </uni-forms>
+    </view>
+
+    <!-- 固定在底部、带间距的按钮区域 -->
+    <view class="button-area">
+      <debounce-button bgColor="#03803B" @click="updateUser">更新</debounce-button>
+    </view>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				avatarUrl: '/static/images/me/head.png',
-				tempFilePaths: [],
-				form: {}
-			}
-		},
-		onLoad() {
+import {getCarUserDetail, updateCarUserDetail} from "../../api/user/index";
 
-		},
-		methods: {
-			showActionSheet() {
-				uni.showActionSheet({
-					itemList: ['拍照', '从相册选择'],
-					success: (res) => {
-						if (res.tapIndex === 0) {
-							this.chooseMedia('camera')
-						} else {
-							this.chooseMedia('album')
-						}
-					}
-				})
-			},
-			chooseMedia(sourceType) {
-				uni.chooseMedia({
-					count: 1,
-					mediaType: ['image'],
-					sourceType: [sourceType],
-					sizeType: ['original', 'compressed'],
-					camera: 'front',
-					success: (res) => {
-						// this.avatarUrl = res.tempFiles[0].tempFilePath
-						this.tempFilePaths = res.tempFiles.map(file => file.tempFilePath)
-						this.uploadFiles()
-					},
-					fail: (err) => {
-						console.log(err)
-					},
-				})
-			},
-			uploadFiles() {
-				const uploadTasks = this.tempFilePaths.map((filePath, index) => {
-					return new Promise((resolve, reject) => {
-						uni.uploadFile({
-							url: 'https://lt.echepei.com/api/blade-resource/oss/endpoint/put-file',
-							filePath: filePath,
-							name: 'file',
-							header: {
-								'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken'),
-								appId: uni.getAccountInfoSync().miniProgram.appId
-							},
-							success: (uploadRes) => {
-								let obj = {
-									id: this.userData.userId,
-									avatar: JSON.parse(uploadRes.data).data.link
-								}
-								// updateUserAvatar(obj).then(res => {
-								// 	uni.showToast({
-								// 		title: "上传成功",
-								// 		icon: "none",
-								// 		mask: true
-								// 	});
-								// 	this.getUserData()
-								// })
-							},
-							fail: (err) => {
-								reject(err)
-							}
-						})
-					})
-				})
-			},
-		}
-	}
+export default {
+  data() {
+    return {
+      avatarUrl: '/static/images/me/head.png',
+      tempFilePaths: [],
+      form: {}
+    }
+  },
+  onLoad() {
+    this.getUserInfo()
+  },
+  methods: {
+    updateUser() {
+      if (!this.form.name) {
+        uni.showToast({
+          title: '请输入用户名',
+          icon: "none",
+        });
+        return false;
+      }
+      updateCarUserDetail({name: this.form.name, avatar: this.form.avatar, id: this.form.id}).then(res => {
+        uni.showToast({
+          title: res.msg,
+          icon: "none",
+        });
+      })
+    },
+    async getUserInfo() {
+      const userInfo = await getCarUserDetail()
+      this.form = userInfo.data
+    },
+    showActionSheet() {
+      uni.showActionSheet({
+        itemList: ['拍照', '从相册选择'],
+        success: (res) => {
+          if (res.tapIndex === 0) {
+            this.chooseMedia('camera')
+          } else {
+            this.chooseMedia('album')
+          }
+        }
+      })
+    },
+    chooseMedia(sourceType) {
+      uni.chooseMedia({
+        count: 1,
+        mediaType: ['image'],
+        sourceType: [sourceType],
+        sizeType: ['original', 'compressed'],
+        camera: 'front',
+        success: (res) => {
+          // this.avatarUrl = res.tempFiles[0].tempFilePath
+          this.tempFilePaths = res.tempFiles.map(file => file.tempFilePath)
+          this.uploadFiles()
+        },
+        fail: (err) => {
+          console.log(err)
+        },
+      })
+    },
+    uploadFiles() {
+      const uploadTasks = this.tempFilePaths.map((filePath, index) => {
+        return new Promise((resolve, reject) => {
+          uni.uploadFile({
+            url: 'https://b2b.gubersail.com:9000/api/blade-resource/oss/endpoint/put-file',
+            filePath: filePath,
+            name: 'file',
+            header: {
+              'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken'),
+              appId: uni.getAccountInfoSync().miniProgram.appId
+            },
+            success: (uploadRes) => {
+              this.form.avatar = JSON.parse(uploadRes.data).data.link
+            },
+            fail: (err) => {
+              reject(err)
+            }
+          })
+        })
+      })
+    },
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-	// ::v-deep .uni-section {
-	// 	padding: 0 62rpx;
-	// }
-	::v-deep .uni-forms-item.is-direction-left {
+::v-deep .uni-forms-item.is-direction-left {
+
+  align-items: center !important;
+}
+
+.page-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh; // 占满整个视口高度
+  padding: 0 62rpx;
+  background-color: #ffffff;
+  box-sizing: border-box;
+}
+
+.form-wrapper {
+  flex: 1; // 占据剩余空间，把按钮“挤”到底部
+  padding-top: 30rpx; // 可选：顶部留白
+}
+
+.button-area {
+  padding: 30rpx 20rpx 50rpx;
+  width: 100%;
+  max-width: calc(750rpx - 62rpx * 2);
+}
 
-		align-items: center !important;
-	}
-</style>
+.button-area {
+  padding: 30rpx 20rpx calc(50rpx + env(safe-area-inset-bottom));
+}
+</style>