feat:共富商城详情和商品列表
This commit is contained in:
weiwei committed
1 parent
34cb50cdfc
commit
46c1c41331
6 files changed
+214
-17
No files matched your search
@@ -135,6 +135,25 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/prosperity-shop",
|
||||
"pages": [
|
||||
{
|
||||
"path": "goods-detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品详情",
|
||||
"disableScroll": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "shop-detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "超市详情",
|
||||
"disableScroll": true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/apply",
|
||||
"pages": [
|
||||
|
||||
@@ -251,7 +251,7 @@ const doFood = () => {
|
||||
<view class="m-x-30rpx">
|
||||
<!-- start 简介 start -->
|
||||
<view class="h-15rpx" />
|
||||
<view flex-row card p-20rpx>
|
||||
<view class="flex-row card p-20rpx">
|
||||
<image class="w-180rpx h-180rpx rounded-12rpx" :src="filePath(state.canteenDetail.logoPic)" mode="aspectFill" />
|
||||
<view class="flex-1 flex-col m-l-20rpx">
|
||||
<view class="flex-row items-center justify-between">
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>11</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<crud-layout mainIsScroll bg="/static/page/blue-bg.png">
|
||||
<image :src="filePath(state.detail.images)" class="w-full h-400rpx" mode="aspectFill" />
|
||||
<view 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">
|
||||
<text class="c-#0094ff! mr-20rpx px-2 bg-#0094ff22 rounded-2">{{ state.detail.status == "0" ? "开业中" : "未开业" }}</text>
|
||||
<text class="rounded-2 c-#0094ff px-2 bg-#0094ff22 rounded-2">{{ state.detail.businessHours }}</text>
|
||||
</view>
|
||||
<view class="second-text-24 truncate mt-1">
|
||||
<text class="mr-20rpx">营业人：{{ state.detail.contactName }}</text>
|
||||
<text class="mr-20rpx">联系：{{ state.detail.contactPhone }}</text>
|
||||
<text class="mr-20rpx">许可：{{ state.detail.licenseNo }}</text>
|
||||
</view>
|
||||
<view class="second-text-26 mt-1">
|
||||
<image class="w-24rpx h-24rpx mr-1" src="@/static/page/address.svg" />
|
||||
<text>{{ state.detail.address }}</text>
|
||||
</view>
|
||||
<marquee class="second-text-24 mt-1">{{ state.detail.remark }}</marquee>
|
||||
</view>
|
||||
|
||||
<view class="flex-row">
|
||||
<scroll-view scroll-y class="menu w-200rpx h-full pb-20rpx bg-#f6f6f6 pl--20rpx mt-2">
|
||||
<view
|
||||
class="menu_item flex-row-center"
|
||||
v-for="(v, i) in state.category"
|
||||
:key="v.id"
|
||||
:class="[{ menu_item_active: i == state.curCategoryIndex }]"
|
||||
@tap="doCategory(i)"
|
||||
>
|
||||
<view class="menu_item_title show-line">{{ v.name }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view v-if="state.goodsList.length > 0" scroll-y class="flex-1 pb-20rpx">
|
||||
<!-- <view v-for="(pV, pI) in state.foodList" :key="pI">
|
||||
<view class="m-x-15rpx">
|
||||
<product-row
|
||||
v-model="pV.productCount"
|
||||
:productId="pV.id"
|
||||
:pic="filePath(pV.picUrl)"
|
||||
:name="pV.name"
|
||||
:price="pV.price"
|
||||
:marketPrice="pV.marketPrice"
|
||||
:salesCount="pV.salesCount"
|
||||
:stock="pV.stock"
|
||||
@add="chentProductCartCount(pV)"
|
||||
@remove="chentProductCartCount(pV)"
|
||||
/>
|
||||
</view>
|
||||
</view> -->
|
||||
</scroll-view>
|
||||
<view v-else class="mx-auto mt-10 second-text-28">暂无信息</view>
|
||||
</view>
|
||||
</crud-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive } from "vue"
|
||||
import { prosperityShopApi } from "@/sheep/api"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
import { filePath } from "@/sheep/utils/file"
|
||||
|
||||
const state = reactive<any>({
|
||||
id: "",
|
||||
detail: {},
|
||||
category: [],
|
||||
curCategoryIndex: 0,
|
||||
goodsList: [],
|
||||
})
|
||||
|
||||
onLoad(async (option: any) => {
|
||||
state.id = option.id
|
||||
await getShopDetail(option.id)
|
||||
await getGoodsCategory(option.id)
|
||||
})
|
||||
|
||||
const getShopDetail = async (id: string) => {
|
||||
const { code, data, msg } = await prosperityShopApi.getShopDetail(id)
|
||||
if (code != 0) return uni.showToast({ title: msg || "超市详情获取失败", icon: "none" })
|
||||
state.detail = data
|
||||
}
|
||||
|
||||
const getGoodsCategory = async (id: string) => {
|
||||
const { code, data, msg } = await prosperityShopApi.getGoodsCategory({ merchantId: id })
|
||||
if (code != 0) return uni.showToast({ title: msg || "商品分类获取失败", icon: "none" })
|
||||
// state.category = data ?? []
|
||||
state.category = Array.from({ length: 10 }, (_, i) => ({ id: 0, name: "水果" }))
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.layout_main > scroll-view {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
&_item {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
position: relative;
|
||||
transition: all linear 0.2s;
|
||||
|
||||
&_title {
|
||||
width: 100%;
|
||||
line-height: 32rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
margin-left: 28rpx;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 64rpx;
|
||||
height: 12rpx;
|
||||
background: linear-gradient(90deg, #0094ff, #e9f5fe) !important;
|
||||
position: absolute;
|
||||
left: -64rpx;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
transition: all linear 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
&.menu_item_active {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx 0 0 20rpx;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -20rpx;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
right: 0;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
|
||||
}
|
||||
|
||||
.menu_item_title {
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -106,7 +106,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { hooks, router } from "@/sheep"
|
||||
import { onlineShopApi, prosperityShopApi } from "@/sheep/api"
|
||||
import { prosperityShopApi } from "@/sheep/api"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
import { isEmpty } from "radash"
|
||||
import { reactive, ref } from "vue"
|
||||
@@ -133,27 +133,18 @@ onLoad(async () => {
|
||||
const app = getApp()
|
||||
app._initTabbar()
|
||||
|
||||
await getClassify()
|
||||
await getShopCategory()
|
||||
})
|
||||
|
||||
// 获取分类
|
||||
const getClassify = async () => {
|
||||
const { data } = await onlineShopApi.getSpuCategory()
|
||||
state.classifyList = treeToList(data) ?? []
|
||||
// 获取超市分类
|
||||
const getShopCategory = async () => {
|
||||
const { data } = await prosperityShopApi.getShopCategory()
|
||||
state.classifyList = data ?? []
|
||||
state.classifyList.unshift({ id: "", name: "全部分类" })
|
||||
if (!isEmpty(state.classifyList)) {
|
||||
state.params.categoryId = state.classifyList[0].id
|
||||
}
|
||||
}
|
||||
const treeToList = <T extends { children?: T[] }>(tree: T[], result: T[] = []): T[] => {
|
||||
for (const node of tree) {
|
||||
result.push(node)
|
||||
if (node?.children?.length) {
|
||||
treeToList(node.children, result)
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
// 切换分类
|
||||
const doClassify = async (categoryId: string) => {
|
||||
@@ -188,7 +179,7 @@ const doPhone = async (item: string) => {
|
||||
const toDetail = async (v: any) => {
|
||||
const isLogin = await hooks.useCheckLogin()
|
||||
if (isLogin) {
|
||||
// router.jump("/pages/shop/detail", { id: v.id })
|
||||
router.jump("/pages/prosperity-shop/shop-detail", { id: v.id })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -9,4 +9,26 @@ export default {
|
||||
params: { productLimit: 5 },
|
||||
})
|
||||
},
|
||||
// 获取超市商户分类列表
|
||||
getShopCategory: (): Promise<any> => {
|
||||
return request({
|
||||
url: "/supermarket/app/mall/merchant/category/list",
|
||||
method: "GET",
|
||||
})
|
||||
},
|
||||
// 获取超市商户所属分类列表
|
||||
getShopDetail: (id: string): Promise<any> => {
|
||||
return request({
|
||||
url: `/supermarket/app/mall/merchant/${id}`,
|
||||
method: "GET",
|
||||
})
|
||||
},
|
||||
// 获取超市商品分类列表
|
||||
getGoodsCategory: (params: { merchantId: string }): Promise<any> => {
|
||||
return request({
|
||||
url: `/supermarket/app/mall/category/tree`,
|
||||
method: "GET",
|
||||
params,
|
||||
})
|
||||
},
|
||||
}
|
||||
Reference in new issue
Block a user