LJH_Shop/niucloud/addon/mall/uni-app/pages/member/browse.vue

<template>
    <view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden" :style="themeColor()">
        <view class="px-[var(--sidebar-m)] py-[30rpx]" v-if="Object.values(browseData).length && !loading">
            <view class="mb-[30rpx] text-[var(--text-color-light6)] text-[26rpx] leading-[34rpx]">共{{browseTotal}}条，最多为您保存100条</view>
            <view class="mt-[20rpx]" v-for="(item,index) in browseData" :key="index">
                <view class="text-[36rpx] flex items-center font-700">{{ index }}</view>
                <view class="mt-[30rpx] flex flex-wrap box-border">
                    <view class="w-[216rpx] rounded-[var(--goods-rounded-mid)] mr-[20rpx] mb-[40rpx]" v-for="(goodsItem, goodsIndex) in item" :key="goodsIndex" @click="toDetail(goodsItem)">
                        <view class="relative w-[216rpx] h-[216rpx] rounded-[var(--goods-rounded-mid)] overflow-hidden">
                            <u--image width="216rpx" height="216rpx" :radius="'var(--goods-rounded-mid)'" :src="img(goodsItem.goods_cover_thumb_mid ? goodsItem.goods_cover_thumb_mid : '')" mode="aspectFill">
								<template #error>
									<image class="w-[216rpx] h-[216rpx] rounded-[var(--goods-rounded-mid)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
								</template>
							</u--image>
                            <view class="absolute top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.6)]" v-if="goodsItem.goods.delete_time > 0 ||goodsItem.goods.status != 1"></view>
                        </view>
                        <view class="mt-[20rpx] text-[24rpx]"> 
                            <view v-if="goodsItem.goods.delete_time > 0">该商品已删除</view>
                            <view v-else-if="goodsItem.goods.status != 1">该商品已下架</view>
                            <view class="flex items-baseline price-font" v-else>
                                ¥{{parseFloat(goodsItem.price).toFixed(2)}}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="empty-page" v-if="!Object.values(browseData).length && !loading">
            <image class="img" :src="img('static/resource/images/system/empty.png')" mode="aspectFit" />
            <view class="desc">暂无足迹</view>
        </view>
		<u-loading-page bg-color="rgb(248,248,248)" :loading="loading" loadingText=""></u-loading-page>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { getBrowseList } from '@/addon/mall/api/goods';
import { img, redirect } from '@/utils/common';
let loading = ref<boolean>(true);
const browseTotal = ref<number>(0);
const browseData = ref<any>([]);
const getBrowseListFn = () =>{
    loading.value = true;
    getBrowseList().then(res => {
        browseTotal.value = res.data.count;
        browseData.value = res.data.list;
        loading.value = false;
    }).catch(() => {
        loading.value = false;
    })
}
getBrowseListFn()

const toDetail = (data) =>{
    redirect({url: '/addon/mall/pages/goods/detail', param: {goods_id:data.goods_id}})
}
</script>

<style lang="scss" scoped>

</style>