125 lines
4.5 KiB
Vue
125 lines
4.5 KiB
Vue
<template>
|
||
<crud-layout title="共富商城" bg="/static/page/blue-bg.png">
|
||
<z-paging ref="pageRef" height="100%" :fixed="false" v-model="pageHook.list" :default-page-size="10"
|
||
safe-area-inset-bottom :loading-more-enabled="true" :show-scrollbar="false" @query="query"
|
||
:auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false" @scroll="pageHook.scroll">
|
||
<template #top>
|
||
<view class="flex justify-between items-center my-8rpx">
|
||
<tm-text font-size="40" color="#0779FD" class="font-bold">共富商城</tm-text>
|
||
<tm-text font-size="30" color="#0779FD">优质商户，品质商品，欢迎联系购买</tm-text>
|
||
</view>
|
||
<view
|
||
class="w-full flex items-center mb-16rpx border-4rpx border-solid border-#0779fd rounded-14rpx p-r-10rpx">
|
||
<tm-input class="flex-1" v-model="state.params.keyword" type="text" height="72" minHeight="72"
|
||
fontSize="28" :showClear="true" :focus="false" placeholder="请输入超市名称" :focus-highlight="false"
|
||
color="#ECF4F9" width="100%">
|
||
<template v-slot:rightIcon>
|
||
<tm-button class="mr-8rpx px-24rpx py-26rpx text-30rpx!" size="xs" @click="search">
|
||
搜索
|
||
</tm-button>
|
||
</template>
|
||
</tm-input>
|
||
</view>
|
||
</template>
|
||
|
||
<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-160rpx h-160rpx bg-#eeeeee rounded-12rpx" :src="filePath(v.images)"
|
||
mode="aspectFill" />
|
||
<view class="ml-20rpx flex-1 overflow-hidden">
|
||
<view class="sub-text-32 truncate">{{ v.name }}</view>
|
||
<view class="second-text-26 flex justify-between my-6rpx">
|
||
<view>
|
||
<image class="w-24rpx h-24rpx mr-8rpx" src="@/static/page/phone.svg" />
|
||
<text @tap.stop="doPhone(v.contactPhone)">{{ v.contactPhone || "暂无" }}</text>
|
||
</view>
|
||
<text class="c-#0094ff! sub-text-26 px-16rpx bg-#0094ff22 rounded-2">营业</text>
|
||
</view>
|
||
<view class="second-text-26">
|
||
<image class="w-24rpx h-24rpx mr-8rpx" src="@/static/page/address.svg" />
|
||
<text>{{ v.address || "暂无" }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-x>
|
||
<view class="h-20rpx"></view>
|
||
<view class="flex">
|
||
<view class="w-180rpx flex-col items-center mr-20rpx" v-for="(pV, pI) in v.featuredProducts"
|
||
:key="pI">
|
||
<image class="size-180rpx 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">
|
||
<text class="text-26rpx color-red!">
|
||
<text class="text-22rpx">¥</text>
|
||
<text>
|
||
{{ pV.priceType == "1" ? displayPrice(pV.minPrice, "")
|
||
: displayPrice(pV.spuPrice, "") }}
|
||
</text>
|
||
</text>
|
||
</view>
|
||
<view class="w-full flex justify-between second-text-24">
|
||
<view>库存{{ pV.totalStock }}</view>
|
||
<view>{{ pV.status ? "已停售" : "在售" }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</z-paging>
|
||
</crud-layout>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { hooks, router } from "@/sheep"
|
||
import { prosperityShopApi } from "@/sheep/api"
|
||
import { onLoad } from "@dcloudio/uni-app"
|
||
import { isEmpty } from "radash"
|
||
import { reactive, ref } from "vue"
|
||
import { filePath } from "@@/utils/file"
|
||
import { displayPrice } from "@/sheep/utils/format-money"
|
||
|
||
const state = reactive<any>({
|
||
params: {
|
||
keyword: "",
|
||
},
|
||
shopList: [],
|
||
})
|
||
const pageRef = ref<any>(null)
|
||
const pageHook = hooks.usePage(pageRef, prosperityShopApi.getShopList, null, "data")
|
||
|
||
const query = (page: number, pagesize: number) => {
|
||
pageHook.startPage(page, pagesize, false, state.params)
|
||
}
|
||
|
||
onLoad(async () => {
|
||
})
|
||
|
||
// 切换分类
|
||
// const doClassify = async (categoryId: string) => {
|
||
// if (state.params.categoryId == categoryId) return
|
||
// state.params.categoryId = categoryId
|
||
// pageRef.value && pageRef.value.reload(false)
|
||
// }
|
||
|
||
// 点击搜索
|
||
const search = () => {
|
||
// state.params.categoryId = ""
|
||
pageRef.value && pageRef.value.reload(false)
|
||
}
|
||
|
||
// 联系商家
|
||
const doPhone = async (item: string) => {
|
||
if (isEmpty(item)) return uni.showToast({ title: "该商户没有预留电话", icon: "none" })
|
||
hooks.useMakePhoneCall(item.trim())
|
||
}
|
||
|
||
// 超市详情
|
||
const toDetail = async (v: any) => {
|
||
const isLogin = await hooks.useCheckLogin()
|
||
if (isLogin) {
|
||
router.jump("/pages/prosperity-shop/shop-detail", { id: v.id })
|
||
}
|
||
}
|
||
</script>
|