zianxin/pj_h5_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:共富商城商品sku和商品搜索

Browse Source
This commit is contained in:
weiwei committed 2025-09-10 12:10:45 +08:00
1 parent 4ef150f57b
commit 4cc0ac316e
4 files changed
+79 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/prosperity-shop/goods-detail.vue
+20 -7
View File
@@ -1,18 +1,18 @@
<template>
<crud-layout mainIsScroll bg="/static/page/blue-bg.png">
<image :src="filePath(state.detail.coverImage)" class="w-full h-500rpx" mode="aspectFill" />
<image :src="filePath(state.detail.coverImage)" class="w-full h-500rpx bg-#eeeeee" mode="aspectFill" />
<view v-if="state.detail.id" class="card p-20rpx mt-10rpx mx-20rpx bg-gradient-to-b from-#0094ff33 to-#fff">
<view class="w-full flex justify-between items-center">
<view class="flex items-center">
<text class="second-text-36 line-through">¥</text>
<text class="second-text-34 line-through">¥</text>
<text class="font-bold second-text-40 line-through mr-2">{{ state.detail.originalPrice.toFixed(2) }}</text>
<text class="text-36rpx color-red! mr-1">¥</text>
<text class="text-34rpx color-red!">¥</text>
<text class="text-46rpx font-bold color-red!">{{ state.detail.spuPrice.toFixed(2) }}</text>
<text class="view-clip px-2 text-22rpx c-white bg-#167aff ml-2 rounded-r-1 rounded-lt-1">到手价</text>
<text class="view-clip px-2 text-22rpx c-white bg-red ml-2 rounded-r-1 rounded-lt-1">到手价</text>
</view>
<view class="main-text-32 c-red! font-italic">
<text>约省</text>
<text class="text-44rpx">{{ Number(state.detail.originalPrice) - Number(state.detail.spuPrice) }}</text>
<text class="text-44rpx mx-1">{{ Number(state.detail.originalPrice) - Number(state.detail.spuPrice) }}</text>
<text>元</text>
</view>
</view>
@@ -28,10 +28,22 @@
<text class="mr-20rpx">剩余库存 {{ state.detail.totalStock }}</text>
</view>
</view>
<view class="mt-20rpx flex-col justify-between card p-20rpx mx-20rpx">
<view class="mt-20rpx card p-20rpx mx-20rpx">
<view class="prefix_title">包装单位</view>
<view class="bg-#1879ff09 rounded-1 my-2 p-3" v-for="(item, index) in state.detail.skuList" :key="index">
<view class="sub-text-30">{{ item.skuName }}</view>
<view class="second-text-28 mt-1 flex justify-between items-center">
<text>售价 {{ displayPrice(item.price) }}</text>
<text>重量 {{ item.weightG }}克</text>
<text>库存 {{ item.stock }}</text>
</view>
</view>
</view>
<view class="mt-20rpx card p-20rpx mx-20rpx">
<view class="prefix_title">商品描述</view>
<view class="mt-20rpx overflow-auto text-26rpx!" v-html="state.detail.description"></view>
</view>
<view class="h-30rpx" />
</crud-layout>
</template>
@@ -40,6 +52,7 @@ import { onLoad } from "@dcloudio/uni-app"
import { reactive } from "vue"
import { prosperityShopApi } from "@/sheep/api"
import { filePath } from "@/sheep/utils/file"
import { displayPrice } from "@/sheep/utils/formatMoney"
const state = reactive<any>({
id: "",
@@ -75,7 +88,7 @@ const getGoodsDetail = async (id: string) => {
bottom: 0rpx;
width: 20rpx;
height: 20rpx;
background: radial-gradient(circle at 0 0, transparent 72%, #1879ff 0);
background: radial-gradient(circle at 0 0, transparent 80%, red 0);
}
}
</style>
src/pages/prosperity-shop/shop-detail.vue
+57 -12
View File
@@ -1,9 +1,16 @@
<template>
<crud-layout mainIsScroll bg="/static/page/blue-bg.png" @scroll="scroll">
<view class="w-full h-400rpx relative">
<image :src="filePath(state.detail.images)" class="w-full h-full" mode="aspectFill" />
<image :src="filePath(state.detail.images)" class="w-full h-full bg-#eeeeee" mode="aspectFill" />
<view class="absolute w-full h-full top-0 left-0" :style="filterStyle"></view>
</view>
<view
class="fixed right-20 h-72rpx bg-#ECF4F9cc px-20rpx top-20 flex items-center flex-nowrap overflow-hidden rounded-20rpx"
:style="searchStyle"
>
<image class="w-36rpx h-36rpx" src="@/static/page/shop-goods-search.png" />
<text v-if="scrollDetail.scrollTop > 30" class="bg-#eeeeee44 whitespace-nowrap overflow-hidden second-text-26 ml-2">搜索商品</text>
</view>
<view v-if="state.detail.id" class="card p-20rpx mt-10rpx mx-20rpx">
<view class="w-full sub-text-32 truncate">{{ state.detail.name }}</view>
<view class="sub-text-24 mt-1">
@@ -22,7 +29,7 @@
</view>
<view class="flex mt-2">
<scroll-view scroll-y class="menu w-200rpx mb-20rpx bg-#f6f6f6 pl-20rpx" style="height: calc(100vh - 400rpx)">
<scroll-view scroll-y class="menu w-200rpx mb-20rpx bg-#f6f6f6 pl-20rpx" style="height: calc(100vh - 420rpx)">
<view
class="menu_item flex-row-center"
v-for="(v, i) in state.category"
@@ -35,7 +42,7 @@
</scroll-view>
<scroll-view v-if="state.goodsList.length > 0" scroll-y class="flex-1 overflow-hidden pb-20rpx flex">
<view v-for="v in state.goodsList" :key="v.id" class="card flex mx-15rpx mb-2 p-2" @click="doGoods(v.id)">
<image :src="filePath(v.coverImage)" class="size-180rpx rounded-12rpx" mode="aspectFill" />
<image :src="filePath(v.coverImage)" class="size-160rpx rounded-12rpx bg-#eeeeee" mode="aspectFill" />
<view class="flex-1 ml-2 overflow-hidden">
<view class="truncate sub-text-30">{{ v.title }}</view>
<view>
@@ -46,15 +53,16 @@
<text class="second-text-26">库存 {{ v.totalStock }}</text>
</view>
<view>
<text class="color-red mr-1">
<text class="second-text-28 line-through mr-1">
<text class="text-26rpx">¥</text>
<text class="text-30rpx font-bold">{{ v.spuPrice.toFixed(2).split(".")[0] }}.</text>
<text class="text-26rpx font-bold">{{ v.spuPrice.toFixed(2).split(".")[1] }}</text>
</text>
<text class="second-text-24 line-through">
<text class="text-24rpx">¥</text>
<text class="font-bold">{{ v.originalPrice.toFixed(2) }}</text>
</text>
<text class="color-red">
<text class="text-26rpx">¥</text>
<text class="text-32rpx font-bold">{{ v.spuPrice.toFixed(2).split(".")[0] }}.</text>
<text class="text-30rpx font-bold">{{ v.spuPrice.toFixed(2).split(".")[1] }}</text>
</text>
<text class="view-clip px-1 text-18rpx c-white bg-red ml-1 rounded-r-1 rounded-lt-1">到手价</text>
</view>
</view>
</view>
@@ -71,6 +79,15 @@ import { onLoad } from "@dcloudio/uni-app"
import { filePath } from "@/sheep/utils/file"
import treeToList from "@/sheep/utils/tree-to-list"
interface scrollDetail {
deltaX: number
deltaY: number
scrollHeight: number
scrollLeft: number
scrollTop: number
scrollWidth: number
}
const state = reactive<any>({
id: "",
detail: {},
@@ -78,7 +95,7 @@ const state = reactive<any>({
curCategoryIndex: 0,
goodsList: [],
})
const layoutScroll = ref(0)
const scrollDetail = ref<scrollDetail>({} as scrollDetail)
onLoad(async (option: any) => {
if (!option.id) return uni.showToast({ title: "参数错误", icon: "error" })
@@ -123,17 +140,33 @@ const doCategory = async (index: number) => {
}
const scroll = (e: any) => {
layoutScroll.value = e.detail.scrollTop
scrollDetail.value = e.detail
console.log(e)
}
const filterStyle = computed(() => {
const scrollY = layoutScroll.value
const scrollY = scrollDetail.value.scrollTop
const blur = Math.min(1, scrollY / 400) * 20
return {
backdropFilter: `blur(${blur}rpx)`,
}
})
const searchStyle = computed(() => {
const minWidth = 10
const scrollY = scrollDetail.value.scrollTop
const scrollHeight = scrollDetail.value.scrollHeight
const scrollWidth = scrollDetail.value.scrollWidth
const calcWidth = (scrollY / scrollHeight) * scrollWidth
if (isNaN(calcWidth)) return { width: `${minWidth}%` }
if (calcWidth < 2) return { width: `${calcWidth + minWidth}%` }
return {
width: `${calcWidth + minWidth}%`,
border: `2rpx solid #1879ff`,
// opacity: Math.max(1,),
}
})
const doGoods = (id: string) => {
if (!id) return uni.showToast({ title: "商品id不存在", icon: "none" })
uni.navigateTo({
@@ -213,4 +246,16 @@ const doGoods = (id: string) => {
}
}
}
.view-clip {
position: relative;
&::before {
content: "";
position: absolute;
left: -18rpx;
bottom: 0rpx;
width: 20rpx;
height: 20rpx;
background: radial-gradient(circle at 0 0, transparent 80%, red 0);
}
}
</style>
src/pages/tabbar/prosperityShop.vue
+2 -2
View File
@@ -57,7 +57,7 @@
<view class="card p-20rpx mb-20rpx" v-for="(v, i) in pageHook.list" :key="i" @tap="toDetail(v)">
<view class="flex">
<image class="w-150rpx h-150rpx rounded-12rpx" :src="filePath(v.images)" mode="aspectFill" />
<image class="w-150rpx h-150rpx bg-#eeeeee rounded-12rpx" :src="filePath(v.images)" mode="aspectFill" />
<view class="ml-20rpx flex-1 overflow-hidden">
<view class="sub-text-30 truncate">{{ v.name }}</view>
<view class="second-text-26 truncate">
@@ -80,7 +80,7 @@
<scroll-view scroll-x>
<view class="flex mt-2">
<view class="w-160rpx flex-col items-center mr-20rpx" v-for="(pV, pI) in v.featuredProducts" :key="pI">
<image class="w-160rpx h-160rpx rounded-12rpx" :src="filePath(pV.coverImage)" mode="aspectFill" />
<image class="w-160rpx h-160rpx rounded-12rpx bg-#eeeeee" :src="filePath(pV.coverImage)" mode="aspectFill" />
<view class="w-full mt-4rpx sub-text-24 truncate">{{ pV.title }}</view>
<view class="w-full flex justify-between pr-1">
<text class="main-text-26 color-red!">
src/static/page/shop-goods-search.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB