wangxiaowei/chazhi_store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改用户媒体展示

Browse Source
This commit is contained in:
wangxiaowei
2025-12-18 01:04:56 +08:00
parent ecb2498795
commit 7531f9b144
1 changed files with 52 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/pages/my/my.vue
View File

@ -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([
{ type: 'video', url: `${OSS}images/my/store_video_thumb.jpg`, overlay: null },
{ 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 },
])
const storeMediaList = ref([])
const mediaCount = ref<number>(0)
// 格式化账号显示（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]
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,
})
}
const urls = storeInfo.value.image_arr.map(item => item)
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>