fix: 我的收藏、个人信息编辑页面样式调整

pages.json

@@ -224,8 +224,8 @@
         {
           "path": "user_goods_collection/index",
           "style": {
-            "navigationBarTitleText": "收藏商品",
-            "navigationBarBackgroundColor": "#ffe079",
+            "navigationBarTitleText": "我的收藏",
+            "navigationBarBackgroundColor": "#ffffff",
             "navigationBarTextStyle": "black"
           }
         },
@@ -233,7 +233,7 @@
           "path": "personal_info/personal_info",
           "style": {
             "navigationBarTitleText": "个人资料",
-            "navigationBarBackgroundColor": "#ffe079",
+            "navigationBarBackgroundColor": "#F9F7F0",
             "navigationBarTextStyle": "black",
             "enablePullDownRefresh": false
           }

pages/users/personal_info/personal_info.vue

@@ -1,371 +1,392 @@
 <template>
-  <view class="personal-info">
-    <!-- 上传 -->
-    <view class="upload-box">
-      <up-upload
-        @afterRead="
-          async (e) => {
-            await afterRead(e);
-            getImage();
-          }
-        "
-        name="1"
-        :maxCount="1"
-        :previewImage="false"
-        :deletable="false"
-        :multiple="false"
-      >
-        <!-- <template #default> -->
-        <view class="upload-block">
-          <up-avatar
-            size="160rpx"
-            shape="circle"
-            :src="userInfo.avatar"
-            mode="aspectFill"
-          ></up-avatar>
-        </view>
-        <!-- </template> -->
-      </up-upload>
-    </view>
-		<view class="flex-center-between personal-info-item">
-			<text class="label_width">昵称</text>
-			<up-input
-          class="title-input"
-          placeholder="请输入"
-          type="text"
-          confirmType="完成"
-          maxlength="50"
-          :adjustPosition="false"
-          border="none"
-          :showWordLimit="true"
-          v-model="userInfo.nickname"
-					inputAlign="right"
-          @blur="changeName"
-        ></up-input>
-		</view>
-		<view class="flex-center-between personal-info-item">
-			<text class="label_width">手机号</text>
-			<text class="gray">{{telEncrypt(userInfo.phone)}}</text>
-		</view>
-		<view class="flex-center-between personal-info-item" @click="pickerSexShow = true">
-			<text class="label_width">性别</text>
-			<view class="flex-center-between">
-				<text>{{sexText}}</text>
-				<uni-icons type="right" size="21"  color="#888"></uni-icons>
+	<view class="personal-info">
+		<view class="personal-info-box">
+			<!-- 上传 -->
+			<view class="upload">
+				<view class="upload-box">
+					<up-upload @afterRead="
+				      async (e) => {
+				        await afterRead(e);
+				        getImage();
+				      }
+				    " name="1" :maxCount="1" :previewImage="false" :deletable="false" :multiple="false">
+						<view class="upload-block">
+							<up-avatar size="144rpx" shape="circle" :src="userInfo.avatar" mode="aspectFill"></up-avatar>
+							<view class="upload-block-edit flex-center">
+								<image src="@/static/images/edit@2x.png" mode=""></image>
+							</view>
+						</view>
+					</up-upload>
+				</view>
+			</view>
+			<view class="personal-list">
+				<view class="flex-center-between border-bottom personal-info-item">
+					<text class="label_width">昵称</text>
+					<up-input class="title-input" placeholder="请输入" type="text" confirmType="完成" maxlength="10"
+						:adjustPosition="false" border="none" :showWordLimit="true" v-model="userInfo.nickname" inputAlign="right"></up-input>
+				</view>
+				<view class="flex-center-between border-bottom personal-info-item">
+					<text class="label_width">手机号</text>
+					<text class="gray">{{telEncrypt(userInfo.phone)}}</text>
+				</view>
+			</view>
+			<view class="personal-list">
+				<view class="flex-center-between border-bottom personal-info-item" @click="pickerSexShow = true">
+					<text class="label_width">性别</text>
+					<view class="flex-center-between">
+						<text>{{sexText}}</text>
+						<image style="width: 32rpx;height: 32rpx;" src="/static/images/shop/go@2x.png" mode=""></image>
+					</view>
+				</view>
+				<view class="flex-center-between border-bottom personal-info-item">
+					<text class="label_width">地址</text>
+					<picker mode="multiSelector" @change="bindRegionChange" @columnchange="bindMultiPickerColumnChange"
+						:value="valueRegion" :range="multiArray">
+						<view class='flex-center-between'>
+							<view class="picker line1">{{ region[0] }}，{{ region[1] }}，{{ region[2] }}</view>
+							<image style="width: 32rpx;height: 32rpx;" src="/static/images/shop/go@2x.png" mode=""></image>
+						</view>
+					</picker>
+					
+				</view>
+				<view class="flex-center-between border-bottom personal-info-item">
+					<text class="label_width">年龄</text>
+					<up-input class="title-input" placeholder="请输入年龄" fontSize="28rpx" type="text" confirmType="完成" maxlength="3"
+						:adjustPosition="false" border="none" :showWordLimit="true" v-model="userInfo.age" inputAlign="right"></up-input>
+				</view>
+			</view>
+			<view class="personal-list">
+				<view class="flex-center-between border-bottom personal-info-item">
+					<text class="label_width">个人简介</text>
+					<up-input class="title-input" placeholder="请输入个人简介" fontSize="28rpx" type="text" confirmType="完成" maxlength="50"
+						:adjustPosition="false" border="none" :showWordLimit="true" v-model="userInfo.mark" inputAlign="right"></up-input>
+				</view>
+				<!-- <view class="flex-center-between border-bottom personal-info-item" @tap.stop="setPayword">
+					<text class="label_width">支付密码</text>
+					<text>* * * * * *</text>
+				</view> -->
 			</view>
+			
+			
 		</view>
-		<view class="flex-center-between personal-info-item">
-			<text class="label_width">地址</text>
-      <picker mode="multiSelector" @change="bindRegionChange" @columnchange="bindMultiPickerColumnChange"
-        :value="valueRegion" :range="multiArray">
-        <view class='flex-center-between'>
-          <view class="picker line1">{{ region[0] }}，{{ region[1] }}，{{ region[2] }}</view>
-					<uni-icons type="right" size="21"  color="#888"></uni-icons>
-        </view>
-      </picker>
-      <!-- <up-input
-          class="title-input"
-          placeholder="请输入"
-          type="text"
-          confirmType="完成"
-          maxlength="50"
-          :adjustPosition="false"
-          border="none"
-          :showWordLimit="true"
-          v-model="userInfo.addres"
-					inputAlign="right"
-          @blur="change"
-        ></up-input> -->
-    </view>
-    <view class="flex-center-between personal-info-item">
-      <text class="label_width">年龄</text>
-      <up-input
-        class="title-input"
-        placeholder="请输入"
-        type="text"
-        confirmType="完成"
-        maxlength="50"
-        :adjustPosition="false"
-        border="none"
-        :showWordLimit="true"
-        v-model="userInfo.age"
-        inputAlign="right"
-      ></up-input>
-    </view>
-    <view class="flex-center-between personal-info-item">
-      <text class="label_width">个人简介</text>
-      <up-input
-        class="title-input"
-        placeholder="请输入"
-        type="text"
-        confirmType="完成"
-        maxlength="50"
-        :adjustPosition="false"
-        border="none"
-        :showWordLimit="true"
-        v-model="userInfo.mark"
-        inputAlign="right"
-      ></up-input>
-    </view>
-<!--    <view-->
-<!--      class="flex-center-between border-bottom personal-info-item"-->
-<!--      @tap.stop="setPayword"-->
-<!--    >-->
-<!--      <text class="label_width">支付密码</text>-->
-<!--      &lt;!&ndash; <up-input-->
-<!--        class="title-input"-->
-<!--        placeholder="请输入"-->
-<!--        type="text"-->
-<!--        confirmType="完成"-->
-<!--        maxlength="6"-->
-<!--        :adjustPosition="false"-->
-<!--        border="none"-->
-<!--        :showWordLimit="true"-->
-<!--        v-model="userInfo.payPassword"-->
-<!--        inputAlign="right"-->
-<!--        :password="true"-->
-<!--        :disabled="true"-->
-<!--        :passwordVisibilityToggle="false"-->
-<!--        disabledColor=""-->
-<!--      ></up-input> &ndash;&gt;-->
-<!--      <text>* * * * * *</text>-->
-<!--    </view>-->
-    <up-picker
-      @confirm="changeSex"
-      @cancel="pickerSexShow = false"
-      :show="pickerSexShow"
-      :columns="[
+		<view class="footer">
+			<view @click="submitFn" class="submit-btn">提交</view>
+		</view>
+
+		<up-picker @confirm="changeSex" @cancel="pickerSexShow = false" :show="pickerSexShow" :columns="[
         [
           { label: '男', id: 1 },
           { label: '女', id: 2 },
           { label: '保密', id: 3 },
         ],
-      ]"
-      keyName="label"
-      valueName="id"
-    ></up-picker>
-    <button
-      @click="submitFn"
-      class="submit-btn"
-    >提交</button>
-    <!-- 页面内 容结束 -->
-    <PayPop ref="paypopRef" :pwdlength="6" @pwd_e="handlerPwd"></PayPop>
-  </view>
+      ]" keyName="label" valueName="id"></up-picker>
+		
+		<!-- 页面内 容结束 -->
+	</view>
 </template>
 
 <script setup>
-import { ref, computed, nextTick } from "vue";
-import PayPop from "../../../components/pay-pop/pay-pop.vue";
-import { useImageUpload } from "@/hooks/useImageUpload";
-import { useAppStore } from "@/stores/app";
-import { onLoad } from "@dcloudio/uni-app";
-import { useToast } from "@/hooks/useToast";
-import { getUserInfo, userEdit, registerpayPasswordAPI } from "@/api/user";
-import { getCity } from "@/api/api.js";
-import Cache from "@/utils/cache";
-import { telEncrypt } from "@/utils/util.js";
-const paypopRef = ref(null);
-const { Toast } = useToast();
-const { imageList, afterRead, deletePic, uploadLoading } = useImageUpload({
-  pid: 5,
-  model: "book",
-});
-const appStore = useAppStore();
-const userInfo = ref({
-  avatar: "",
-  nickname: "",
-  addres: "",
-  mark: "",
-  sex: "",
-  age: "",
-});
-const pickerSexShow = ref(false);
-const sexText = computed(() => {
-  return userInfo.value.sex == 1
-    ? "男"
-    : userInfo.value.sex == 2
-    ? "女"
-    : userInfo.value.sex == 3
-    ? "保密"
-    : "未知";
-});
+	import {
+		ref,
+		computed,
+		nextTick
+	} from "vue";
+	import {
+		useImageUpload
+	} from "@/hooks/useImageUpload";
+	import {
+		useAppStore
+	} from "@/stores/app";
+	import {
+		onLoad
+	} from "@dcloudio/uni-app";
+	import {
+		useToast
+	} from "@/hooks/useToast";
+	import {
+		getUserInfo,
+		userEdit,
+		registerpayPasswordAPI
+	} from "@/api/user";
+	import {
+		getCity
+	} from "@/api/api.js";
+	import Cache from "@/utils/cache";
+	import {
+		telEncrypt
+	} from "@/utils/util.js";
+	const paypopRef = ref(null);
+	const {
+		Toast
+	} = useToast();
+	const {
+		imageList,
+		afterRead,
+		deletePic,
+		uploadLoading
+	} = useImageUpload({
+		pid: 5,
+		model: "book",
+	});
+	const appStore = useAppStore();
+	const userInfo = ref({
+		avatar: "",
+		nickname: "",
+		addres: "",
+		mark: "",
+		sex: "",
+		age: "",
+	});
+	const pickerSexShow = ref(false);
+	const sexText = computed(() => {
+		return userInfo.value.sex == 1 ?
+			"男" :
+			userInfo.value.sex == 2 ?
+			"女" :
+			userInfo.value.sex == 3 ?
+			"保密" :
+			"未知";
+	});
 
-//省市区选择
-const district = ref([]);
-const multiArray = ref([[], [], []]);
-const multiIndex = ref([0, 0, 0]);
-const region = ref(["省", "市", "区"]);
-const valueRegion = ref([0, 0, 0]);
+	//省市区选择
+	const district = ref([]);
+	const multiArray = ref([
+		[],
+		[],
+		[]
+	]);
+	const multiIndex = ref([0, 0, 0]);
+	const region = ref(["省", "市", "区"]);
+	const valueRegion = ref([0, 0, 0]);
 
-onLoad(() => {
-  console.log("personal_info 页面 onLoad");
-  fetchUserInfo();
-  getCityList();
-});
+	onLoad(() => {
+		fetchUserInfo();
+		getCityList();
+	});
 
-const changeSex = (e) => {
-  console.log("changeSex", e.value[0]);
-  userInfo.value.sex = e.value[0].id;
-  pickerSexShow.value = false;
-  // change();
-};
-// 设置支付密码
-const setPayword = () => {
-  console.log(111111);
+	const changeSex = (e) => {
+		userInfo.value.sex = e.value[0].id;
+		pickerSexShow.value = false;
+	};
+	// 设置支付密码
+	const setPayword = () => {
+		nextTick(() => {
+			paypopRef.value.Open();
+		});
+	};
+	const handlerPwd = async (e) => {
+		const res = await registerpayPasswordAPI({
+			account: appStore.userInfo.phone,
+			payPassword: e,
+		});
+		uni.showToast({
+			title: "修改成功",
+			duration: 2000,
+		});
+	};
+	// 获取用户头像
+	async function getImage() {
+		if (imageList.value.length > 0) {
+			if (imageList.value[0].status == "success") {
+				userInfo.value.avatar = imageList.value[0].info.url;
+			} else {
+				Toast({
+					title: "上传失败"
+				});
+			}
+		}
+		imageList.value = [];
+	}
 
-  console.log(paypopRef.value);
-  nextTick(() => {
-    paypopRef.value.Open();
-  });
-};
-const handlerPwd = async (e) => {
-  const res = await registerpayPasswordAPI({
-    account: appStore.userInfo.phone,
-    payPassword: e,
-  });
-  uni.showToast({
-    title: "修改成功",
-    duration: 2000,
-  });
-  change();
-};
-// 获取用户头像
-async function getImage() {
-  console.log("getImage", imageList.value[0]);
-  if (imageList.value.length > 0) {
-    if (imageList.value[0].status == "success") {
-      userInfo.value.avatar = imageList.value[0].info.url;
-      // change();
-    } else {
-      Toast({ title: "上传失败" });
-    }
-  }
-  imageList.value = [];
-}
-function submitFn() {
-  change();
-}
-function changeName(e) {
-  // console.log(e)
-  // console.log(userInfo.value)
-}
-const change = async () => {
-  await userEdit(userInfo.value);
-  Toast({ title: "修改成功", endtime: 1500 });
-  appStore.USERINFO();
-  setTimeout(() => {
-    uni.navigateBack();
-  }, 1600);
-  // const { data } = await getUserInfo(appStore.uid);
-  // appStore.UPDATE_userPanelInfo(data);
-};
-// 获取用户信息
-async function fetchUserInfo() {
-  try {
-    const { data } = await getUserInfo(appStore.uid);
-    userInfo.value = data;
-    userInfo.value.addres = userInfo.value.addres || "";
-    const list = userInfo.value.addres.split("-");
-    if (list.length > 0) {
-      region.value = [list[0], list[1], list[2]];
-    }
-  } catch (error) {
-    console.error("otherUserinfo", error);
-    Toast({ title: "获取用户信息失败" });
-  }
-}
+	function submitFn() {
+		change();
+	}
 
-function bindRegionChange(e) {
-  const mi = multiIndex.value;
-  const province = district.value[mi[0]] || { child: [] };
-  const ma = multiArray.value;
-  const value = e.detail.value;
-  region.value = [ma[0][value[0]], ma[1][value[1]], ma[2][value[2]]];
-  userInfo.value.addres = region.value.join("-");
-  valueRegion.value = [0, 0, 0];
-  //   change();
-  initialize();
-}
+	const change = async () => {
+		await userEdit(userInfo.value);
+		Toast({
+			title: "修改成功",
+			endtime: 1500
+		});
+		appStore.USERINFO();
+		setTimeout(() => {
+			uni.navigateBack();
+		}, 1600);
+	};
+	// 获取用户信息
+	async function fetchUserInfo() {
+		try {
+			const {
+				data
+			} = await getUserInfo(appStore.uid);
+			userInfo.value = data;
+			userInfo.value.addres = userInfo.value.addres || "";
+			const list = userInfo.value.addres.split("-");
+			if (list.length > 0) {
+				region.value = [list[0], list[1], list[2]];
+			}
+		} catch (error) {
+			console.error("otherUserinfo", error);
+			Toast({
+				title: "获取用户信息失败"
+			});
+		}
+	}
 
-function getCityList() {
-  getCity().then((res) => {
-    district.value = res.data;
-    let oneDay = 24 * 3600 * 1000;
-    Cache.setItem({ name: "cityList", value: res.data, expires: oneDay * 7 }); //设置七天过期时间
-    initialize();
-  });
-}
-function initialize() {
-  if (district.value.length) {
-    let province = [],
-      city = [],
-      area = [];
-    let cityChildren = district.value[0].child || [];
-    let areaChildren = cityChildren.length ? cityChildren[0].child || [] : [];
-    district.value.forEach((item) => province.push(item.name));
-    cityChildren.forEach((item) => city.push(item.name));
-    areaChildren.forEach((item) => area.push(item.name));
-    multiArray.value = [province, city, area];
-  }
-}
-function bindMultiPickerColumnChange(e) {
-  const column = e.detail.column;
-  const value = e.detail.value;
-  const ma = multiArray.value;
-  const mi = multiIndex.value;
-  mi[column] = value;
-  switch (column) {
-    case 0:
-      const currentCity = district.value[value] || { child: [] };
-      const areaList = currentCity.child[0] || { child: [] };
-      ma[1] = currentCity.child.map((item) => item.name);
-      ma[2] = areaList.child.map((item) => item.name);
-      break;
-    case 1:
-      const cityList = district.value[mi[0]].child[mi[1]].child || [];
-      ma[2] = cityList.map((item) => item.name);
-      break;
-    case 2:
-      break;
-  }
-  multiArray.value = [...ma];
-  multiIndex.value = [...mi];
-}
-</script>
+	function bindRegionChange(e) {
+		const mi = multiIndex.value;
+		const province = district.value[mi[0]] || {
+			child: []
+		};
+		const ma = multiArray.value;
+		const value = e.detail.value;
+		region.value = [ma[0][value[0]], ma[1][value[1]], ma[2][value[2]]];
+		userInfo.value.addres = region.value.join("-");
+		valueRegion.value = [0, 0, 0];
+		//   change();
+		initialize();
+	}
+
+	function getCityList() {
+		getCity().then((res) => {
+			district.value = res.data;
+			let oneDay = 24 * 3600 * 1000;
+			Cache.setItem({
+				name: "cityList",
+				value: res.data,
+				expires: oneDay * 7
+			}); //设置七天过期时间
+			initialize();
+		});
+	}
 
-<style lang="scss">
-.personal-info {
-  padding: 0 30rpx;
+	function initialize() {
+		if (district.value.length) {
+			let province = [],
+				city = [],
+				area = [];
+			let cityChildren = district.value[0].child || [];
+			let areaChildren = cityChildren.length ? cityChildren[0].child || [] : [];
+			district.value.forEach((item) => province.push(item.name));
+			cityChildren.forEach((item) => city.push(item.name));
+			areaChildren.forEach((item) => area.push(item.name));
+			multiArray.value = [province, city, area];
+		}
+	}
 
-  .upload-block {
-    display: flex;
-    justify-content: center;
-    width: 90vw;
-    box-sizing: border-box;
-    padding: 80rpx 0;
-  }
-  .personal-info-item {
-    height: 100rpx;
-    line-height: 100rpx;
-    padding: 0 30rpx;
-    box-sizing: border-box;
-    border-radius: 16rpx;
-    background-color: #FFF;
-    margin-bottom: 30rpx;
-    .label_width {
-      width: 200rpx;
-      display: inline-block;
-    }
-  }
-  .submit-btn {
-    font-size: 32rpx;
-    color: #333;
-    height: 88rpx;
-    line-height: 88rpx;
-    border-radius: 16rpx;
-    background-color: #F8C008;
-    border: none;
-    margin-top: 20px;
-  }
-}
+	function bindMultiPickerColumnChange(e) {
+		const column = e.detail.column;
+		const value = e.detail.value;
+		const ma = multiArray.value;
+		const mi = multiIndex.value;
+		mi[column] = value;
+		switch (column) {
+			case 0:
+				const currentCity = district.value[value] || {
+					child: []
+				};
+				const areaList = currentCity.child[0] || {
+					child: []
+				};
+				ma[1] = currentCity.child.map((item) => item.name);
+				ma[2] = areaList.child.map((item) => item.name);
+				break;
+			case 1:
+				const cityList = district.value[mi[0]].child[mi[1]].child || [];
+				ma[2] = cityList.map((item) => item.name);
+				break;
+			case 2:
+				break;
+		}
+		multiArray.value = [...ma];
+		multiIndex.value = [...mi];
+	}
+</script>
+<style>
+	page {
+		background: #F9F7F0;
+	}
 </style>
+<style lang="scss" scoped>
+	page{
+		height: 100%;
+	}
+
+	.personal-info {
+		.personal-info-box {
+			padding: 0 16rpx;
+
+			.upload {
+				padding: 16rpx 0;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.upload-box {
+				width: 145rpx;
+				height: 145rpx;
+				border-radius: 50%;
+				border: 1rpx solid #CCCCCC;
+			}
+		}
+
+		.upload-block {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: relative;
+
+			.upload-block-edit {
+				bottom: 0;
+				right: 12rpx;
+				position: absolute;
+				width: 40rpx;
+				height: 40rpx;
+				background: #F8C008;
+				border-radius: 20rpx;
+				image {
+					width: 24rpx;
+					height: 24rpx;
+				}
+			}
+		}
+		.personal-list {
+			margin-bottom: 16rpx;
+			padding: 0 16rpx;
+			background: #FFFFFF;
+			border-radius: 16rpx;
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+
+		.personal-info-item {
+			min-height: 100rpx;
+			border-bottom: 1rpx solid #F1F3F8; 
+			&:last-child {
+				border-bottom: none;
+			}
+
+			.label_width {
+				width: 200rpx;
+				display: inline-block;
+			}
+		}
+	}
+	.footer {
+		width: 100%;
+		bottom: 0;
+		position: fixed;
+		padding: 22rpx 32rpx 56rpx;
+		background: #FFFFFF;
+		.submit-btn {
+			font-weight: bold;
+			font-size: 32rpx;
+			text-align: center;
+			line-height: 88rpx;
+			background: #F8C008;
+			border-radius: 16rpx;
+		}
+	}
+</style>