修改用户媒体展示

src/pages/my/my.vue

@@ -38,7 +38,7 @@
 							<wd-icon v-if="isLogin" name="arrow-right" size="24rpx" color="#fff" class="ml-8rpx" />
 						</view>
 						<view v-if="isLogin" class="ml-8rpx mt-8rpx text-24rpx leading-34rpx text-[#fff]">
-							账号: {{ formatAccount(user.account || user.mobile) }}
+							账号: {{ My.handleFormatAccount(user.account || user.mobile) }}
 						</view>
 					</view>
 					<view class="relative ml-20rpx" @click="router.navigateTo('/bundle/wallet/wallet')">
@@ -99,7 +99,7 @@
 				</view>
 
 				<view class="grid grid-cols-3 gap-16rpx">
-					<view v-for="(item, index) in storeInfo.image_arr" :key="index"
+					<view v-for="(item, index) in storeMediaList" :key="index"
 						class="relative aspect-square w-full overflow-hidden rounded-8rpx"
 						@click="My.handlePreviewMedia(index)">
 							<wd-img width="100%" height="100%" :src="item" mode="aspectFill" />
@@ -108,9 +108,9 @@
 								<wd-img width="60rpx" height="60rpx" :src="`${OSS}images/store/my/image5.png')`" />
 							</view> -->
 							<!-- 超出6张显示遮罩 -->
-							<view v-if="storeInfo.image_arr.length > 6"
+							<view v-if="mediaCount > 6 && index === 5"
 								class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
-								<text class="text-32rpx text-[#fff] font-bold">+{{ Number(storeInfo.image_arr.length - 6) }}</text>
+								<text class="text-32rpx text-[#fff] font-bold">+{{ Number(mediaCount - 6) }}</text>
 							</view>
 					</view>
 				</view>
@@ -123,10 +123,9 @@
 <script lang="ts" setup>
 import type { IUserResult } from '@/api/types/user'
 import { getUserInfo } from '@/api/user'
-import { useUserStore } from '@/store'
+import { useUserStore, useStoreStore } from '@/store'
 import { router } from '@/utils/tools'
 import { getStoreDetails } from '@/api/store'
-import { useStoreStore } from '@/store'
 
 const OSS = inject('OSS')
 const navbarHeight = inject('navbarHeight')
@@ -167,23 +166,9 @@ const storeInfo = ref({
 })
 
 // 门店媒体列表（视频/图片）
-const storeMediaList = ref([
+const storeMediaList = ref([])
-	{ type: 'video', url: `${OSS}images/my/store_video_thumb.jpg`, overlay: null },
+const mediaCount = ref<number>(0)
-	{ type: 'image', url: `${OSS}images/my/store_image1.jpg`, overlay: null },
-	{ type: 'image', url: `${OSS}images/my/store_image2.jpg`, overlay: null },
-	{ type: 'image', url: `${OSS}images/my/store_image3.jpg`, overlay: null },
-	{ type: 'image', url: `${OSS}images/my/store_image4.jpg`, overlay: null },
-	{ type: 'image', url: `${OSS}images/my/store_image5.jpg`, overlay: 8 },
-])
 
-// 格式化账号显示（152****3412格式）
-function formatAccount(account: string) {
-	if (!account)
-		return ''
-	if (account.length <= 7)
-		return account
-	return `${account.substring(0, 3)}****${account.substring(account.length - 4)}`
-}
 
 onShow(() => {
 	const userStore = useUserStore()
@@ -227,8 +212,12 @@ const My = {
 	 */
 	handleGetStoreDetails: async () => {
 		const storeDetails = await getStoreDetails(useStore.defaultStore.id)
+		// 只取前6条图片
+		if (storeDetails.details.image_arr && Array.isArray(storeDetails.details.image_arr)) {
+			storeMediaList.value = storeDetails.details.image_arr.slice(0, 6)
+		}
 		storeInfo.value = storeDetails.details
-		console.log("🚀 ~ storeInfo.value:", storeInfo.value)
+		mediaCount.value = storeInfo.value.image_arr.length
 	},
 
 	// 跳转到个人信息
@@ -257,29 +246,34 @@ const My = {
 
 	// 预览媒体（视频/图片）
 	handlePreviewMedia: (index: number) => {
-		const item = storeMediaList.value[index]
+		const urls = storeInfo.value.image_arr.map(item => item)
-		if (item.type === 'video') {
+		
-			// 播放视频
-			uni.previewMedia({
-				sources: [
-					{
-						url: item.url,
-						type: 'video'
-					}
-				],
-				current: 0
-			})
-		}
-		else {
-			// 预览图片
-			const urls = storeMediaList.value
-				.filter(i => i.type === 'image' && !i.overlay)
-				.map(i => i.url)
 		uni.previewImage({
 			current: index,
 			urls,
 		})
-		}
+		// if (item.type === 'video') {
+		// 	// 播放视频
+		// 	uni.previewMedia({
+		// 		sources: [
+		// 			{
+		// 				url: item.url,
+		// 				type: 'video'
+		// 			}
+		// 		],
+		// 		current: 0
+		// 	})
+		// }
+		// else {
+		// 	// 预览图片
+		// 	const urls = storeMediaList.value
+		// 		.filter(i => i.type === 'image' && !i.overlay)
+		// 		.map(i => i.url)
+		// 	uni.previewImage({
+		// 		current: index,
+		// 		urls,
+		// 	})
+		// }
 	},
 
 	/**
@@ -292,6 +286,18 @@ const My = {
 			router.navigateTo('/pages/login/login')
 		}
 	},
+
+	/**
+	 * 格式化显示账号
+	 * @param account 账号
+	 */
+	handleFormatAccount: (account: string) => {
+		if (!account)
+			return ''
+		if (account.length <= 7)
+			return account
+		return `${account.substring(0, 3)}****${account.substring(account.length - 4)}`
+	}
 }
 </script>