From 522591c48660b4da14d14bbd44c225cf21025f3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A2=E8=B6=8A?= <552369664@qq.com>
Date: Sun, 25 Aug 2024 14:06:33 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E3=80=91=E4=BF=AE=E5=A4=8D=E9=A1=B6=E9=83=A8=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E6=A0=8F=E8=A3=85=E4=BF=AE=E6=97=A0=E6=95=88=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../s-custom-navbar/s-custom-navbar.vue       |  27 +-
 sheep/components/s-user-card/s-user-card.vue  | 309 +++++++++---------
 2 files changed, 173 insertions(+), 163 deletions(-)

diff --git a/sheep/components/s-custom-navbar/s-custom-navbar.vue b/sheep/components/s-custom-navbar/s-custom-navbar.vue
index d5f24182..62f6e218 100644
--- a/sheep/components/s-custom-navbar/s-custom-navbar.vue
+++ b/sheep/components/s-custom-navbar/s-custom-navbar.vue
@@ -44,9 +44,9 @@
    *
    * @property {Number | String}  alwaysShow = [0,1]			    - 是否常驻
    * @property {Number | String}  styleType = [inner]			   	- 是否沉浸式
-   * @property {String | Number} type 		 					- 标题背景模式
-   * @property {String} color 		 							- 页面背景色
-   * @property {String} src 		 								- 页面背景图片
+   * @property {String | Number} type              - 标题背景模式
+   * @property {String} color                  - 页面背景色
+   * @property {String} src                    - 页面背景图片
    */
   import { computed, unref } from 'vue';
   import sheep from '@/sheep';
@@ -77,7 +77,7 @@
   });
   const navList = computed(() => {
     // #ifdef MP
-    return props.data.mapCells || [];
+    return props.data.mpCells || [];
     // #endif
     return props.data.otherCells || [];
   });
@@ -117,11 +117,12 @@
   const bgStyles = computed(() => {
     return {
       background:
-          props.data.bgType === 'img' && props.data.bgImg
+        props.data.bgType === 'img' && props.data.bgImg
           ? `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`
-          : props.data.bgColor
+          : props.data.bgColor,
     };
   });
+
   // 左侧按钮：返回上一页或首页
   function onClickLeft() {
     if (hasHistory) {
@@ -130,6 +131,7 @@
       sheep.$router.go('/pages/index/index');
     }
   }
+
   // 右侧按钮：打开快捷菜单
   function onClickRight() {
     showMenuTools();
@@ -147,44 +149,53 @@
       top: 50%;
       transform: translateY(-50%);
     }
+
     .nav-icon {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       left: 20rpx;
+
       .inner-icon-box {
         border: 1px solid rgba(#fff, 0.4);
         background: none !important;
       }
+
       .icon-box {
         background: #ffffff;
-        box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08),
-          0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
+        box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
         border-radius: 30rpx;
         width: 134rpx;
         height: 56rpx;
         margin-left: 8rpx;
+
         .line {
           width: 2rpx;
           height: 24rpx;
           background: #e5e5e7;
         }
+
         .sicon-back {
           font-size: 32rpx;
         }
+
         .sicon-home {
           font-size: 32rpx;
         }
+
         .sicon-more {
           font-size: 32rpx;
         }
+
         .icon-button {
           width: 67rpx;
           height: 56rpx;
+
           &-left:hover {
             background: rgba(0, 0, 0, 0.16);
             border-radius: 30rpx 0px 0px 30rpx;
           }
+
           &-right:hover {
             background: rgba(0, 0, 0, 0.16);
             border-radius: 0px 30rpx 30rpx 0px;
diff --git a/sheep/components/s-user-card/s-user-card.vue b/sheep/components/s-user-card/s-user-card.vue
index 920fd57d..754d5361 100644
--- a/sheep/components/s-user-card/s-user-card.vue
+++ b/sheep/components/s-user-card/s-user-card.vue
@@ -1,186 +1,185 @@
 <!-- 装修用户组件：用户卡片 -->
 <template>
-	<view class="ss-user-info-wrap ss-p-t-50" :style="[bgStyle, { marginLeft: `${data.space}px` }]">
-		<view class="ss-flex ss-col-center ss-row-between ss-m-b-20">
-			<view class="left-box ss-flex ss-col-center ss-m-l-36">
-				<view class="avatar-box ss-m-r-24">
-					<image class="avatar-img" :src="
+  <view class="ss-user-info-wrap ss-p-t-50" :style="[bgStyle, { marginLeft: `${data.space}px` }]">
+    <view class="ss-flex ss-col-center ss-row-between ss-m-b-20">
+      <view class="left-box ss-flex ss-col-center ss-m-l-36">
+        <view class="avatar-box ss-m-r-24">
+          <image class="avatar-img" :src="
               isLogin
                 ? sheep.$url.cdn(userInfo.avatar)
-                : sheep.$url.static('/static/img/shop/default_avatar.png')
-            " mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')"></image>
-				</view>
-				<view>
-					<view class="nickname-box ss-flex ss-col-center">
-						<view class="nick-name ss-m-r-20">{{ userInfo?.nickname || nickname }}</view>
-					</view>
-				</view>
-			</view>
-			<view class="right-box ss-m-r-52">
-				<button class="ss-reset-button" @tap="showShareModal">
-					<text class="sicon-qrcode"></text>
-				</button>
-			</view>
-		</view>
+                : sheep.$url.static('/static/img/shop/default_avatar.png')"
+                 mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')">
+          </image>
+        </view>
+        <view>
+          <view class="nickname-box ss-flex ss-col-center">
+            <view class="nick-name ss-m-r-20">{{ userInfo?.nickname || nickname }}</view>
+          </view>
+        </view>
+      </view>
+      <view class="right-box ss-m-r-52">
+        <button class="ss-reset-button" @tap="showShareModal">
+          <text class="sicon-qrcode"></text>
+        </button>
+      </view>
+    </view>
 
-		<!-- 提示绑定手机号 先隐藏 yudao 需要再修改 -->
-		<view
+    <!-- 提示绑定手机号 先隐藏 yudao 需要再修改 -->
+    <view
       class="bind-mobile-box ss-flex ss-row-between ss-col-center"
       v-if="isLogin && !userInfo.mobile"
     >
       <view class="ss-flex">
         <text class="cicon-mobile-o" />
-        <view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全 </view>
+        <view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全</view>
       </view>
       <button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button>
     </view>
-	</view>
+  </view>
 </template>
 
 <script setup>
-	/**
-	 * 用户卡片
-	 *
-	 * @property {Number} leftSpace 									- 容器左间距
-	 * @property {Number} rightSpace 									- 容器右间距
-	 *
-	 * @property {String} avatar 					- 头像
-	 * @property {String} nickname 					- 昵称
-	 * @property {String} vip		  				- 等级
-	 * @property {String} collectNum 				- 收藏数
-	 * @property {String} likeNum 					- 点赞数
-	 *
-	 *
-	 */
-	import {
-		computed,
-		reactive
-	} from 'vue';
-	import sheep from '@/sheep';
-	import {
-		showShareModal,
-		showAuthModal
-	} from '@/sheep/hooks/useModal';
+  /**
+   * 用户卡片
+   *
+   * @property {Number} leftSpace                  - 容器左间距
+   * @property {Number} rightSpace                  - 容器右间距
+   *
+   * @property {String} avatar          - 头像
+   * @property {String} nickname          - 昵称
+   * @property {String} vip              - 等级
+   * @property {String} collectNum        - 收藏数
+   * @property {String} likeNum          - 点赞数
+   *
+   *
+   */
+  import { computed } from 'vue';
+  import sheep from '@/sheep';
+  import {
+    showShareModal,
+    showAuthModal,
+  } from '@/sheep/hooks/useModal';
 
-	// 用户信息
-	const userInfo = computed(() => sheep.$store('user').userInfo);
-	console.log('用户信息', userInfo)
+  // 用户信息
+  const userInfo = computed(() => sheep.$store('user').userInfo);
+  console.log('用户信息', userInfo);
 
-	// 是否登录
-	const isLogin = computed(() => sheep.$store('user').isLogin);
-	// 接收参数
-	const props = defineProps({
-		// 装修数据
-		data: {
-		  type: Object,
-		  default: () => ({}),
-		},
-		// 装修样式
-		styles: {
-		  type: Object,
-		  default: () => ({}),
-		},
-		// 头像
-		avatar: {
-			type: String,
-			default: '',
-		},
-		nickname: {
-			type: String,
-			default: '请先登录',
-		},
-		vip: {
-			type: [String, Number],
-			default: '1',
-		},
-		collectNum: {
-			type: [String, Number],
-			default: '1',
-		},
-		likeNum: {
-			type: [String, Number],
-			default: '1',
-		},
-	});
-	
-	// 设置背景样式
-	const bgStyle = computed(() => {
-	  // 直接从 props.styles 解构
-	  const { bgType, bgImg, bgColor } = props.styles; 
-	
-	  // 根据 bgType 返回相应的样式
-	  return {
-		background: bgType === 'img'
-			? `url(${bgImg}) no-repeat top center / 100% 100%`
-			: bgColor
-		};
-	});
-	// 绑定手机号
-	function onBind() {
-		showAuthModal('changeMobile');
-	}
+  // 是否登录
+  const isLogin = computed(() => sheep.$store('user').isLogin);
+  // 接收参数
+  const props = defineProps({
+    // 装修数据
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 装修样式
+    styles: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 头像
+    avatar: {
+      type: String,
+      default: '',
+    },
+    nickname: {
+      type: String,
+      default: '请先登录',
+    },
+    vip: {
+      type: [String, Number],
+      default: '1',
+    },
+    collectNum: {
+      type: [String, Number],
+      default: '1',
+    },
+    likeNum: {
+      type: [String, Number],
+      default: '1',
+    },
+  });
+
+  // 设置背景样式
+  const bgStyle = computed(() => {
+    // 直接从 props.styles 解构
+    const { bgType, bgImg, bgColor } = props.styles;
+
+    // 根据 bgType 返回相应的样式
+    return {
+      background: bgType === 'img'
+        ? `url(${bgImg}) no-repeat top center / 100% 100%`
+        : bgColor,
+    };
+  });
+
+  // 绑定手机号
+  function onBind() {
+    showAuthModal('changeMobile');
+  }
 </script>
 
 <style lang="scss" scoped>
-	.ss-user-info-wrap {
-		box-sizing: border-box;
+  .ss-user-info-wrap {
+    box-sizing: border-box;
 
-		.avatar-box {
-			width: 100rpx;
-			height: 100rpx;
-			border-radius: 50%;
-			overflow: hidden;
+    .avatar-box {
+      width: 100rpx;
+      height: 100rpx;
+      border-radius: 50%;
+      overflow: hidden;
 
-			.avatar-img {
-				width: 100%;
-				height: 100%;
-			}
-		}
+      .avatar-img {
+        width: 100%;
+        height: 100%;
+      }
+    }
 
-		.nick-name {
-			font-size: 34rpx;
-			font-weight: 400;
-			color: #333333;
-			line-height: normal;
-		}
+    .nick-name {
+      font-size: 34rpx;
+      font-weight: 400;
+      color: #333333;
+      line-height: normal;
+    }
 
-		.vip-img {
-			width: 30rpx;
-			height: 30rpx;
-		}
+    .vip-img {
+      width: 30rpx;
+      height: 30rpx;
+    }
 
-		.sicon-qrcode {
-			font-size: 40rpx;
-		}
-	}
+    .sicon-qrcode {
+      font-size: 40rpx;
+    }
+  }
 
-	.bind-mobile-box {
-		width: 100%;
-		height: 84rpx;
-		padding: 0 34rpx 0 44rpx;
-		box-sizing: border-box;
-		background: #ffffff;
-		box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);
+  .bind-mobile-box {
+    width: 100%;
+    height: 84rpx;
+    padding: 0 34rpx 0 44rpx;
+    box-sizing: border-box;
+    background: #ffffff;
+    box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);
 
-		.cicon-mobile-o {
-			font-size: 30rpx;
-			color: #ff690d;
-		}
+    .cicon-mobile-o {
+      font-size: 30rpx;
+      color: #ff690d;
+    }
 
-		.mobile-title {
-			font-size: 24rpx;
-			font-weight: 500;
-			color: #ff690d;
-		}
+    .mobile-title {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #ff690d;
+    }
 
-		.bind-btn {
-			width: 100rpx;
-			height: 50rpx;
-			background: #ff6100;
-			border-radius: 25rpx;
-			font-size: 24rpx;
-			font-weight: 500;
-			color: #ffffff;
-		}
-	}
+    .bind-btn {
+      width: 100rpx;
+      height: 50rpx;
+      background: #ff6100;
+      border-radius: 25rpx;
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #ffffff;
+    }
+  }
 </style>
\ No newline at end of file