|
|
@@ -1,135 +0,0 @@
|
|
|
-<script setup lang="ts">
|
|
|
-import { StaticUrl } from '@/config'
|
|
|
-import router from '@/router'
|
|
|
-import selectAddressTemplate from '@/subPack-smqjh/components/selectAddress/index.vue?async'
|
|
|
-
|
|
|
-definePage({
|
|
|
- name: 'smqjh-goodsList',
|
|
|
- islogin: false,
|
|
|
- style: {
|
|
|
- navigationBarTitleText: '商品列表',
|
|
|
- navigationStyle: 'custom',
|
|
|
- backgroundColor: '#F4FFD1',
|
|
|
- backgroundColorTop: '#F4FFD1',
|
|
|
- },
|
|
|
-})
|
|
|
-const { name } = storeToRefs(useAddressStore())
|
|
|
-const selectAddress = ref(false)
|
|
|
-const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
|
|
|
-
|
|
|
-const classfiylist = ref([
|
|
|
- { title: '全部', icon: `${StaticUrl}/smqjh-class-all.png` },
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
-])
|
|
|
-const topNavActive = ref(0)
|
|
|
-const sortList = [
|
|
|
- { title: '距离优先', id: 1 },
|
|
|
- { title: '销量', id: 2 },
|
|
|
- { title: '价格', id: 3 },
|
|
|
-]
|
|
|
-const sortActive = ref(1)
|
|
|
-function handleTopNavChange(idx: number) {
|
|
|
- topNavActive.value = idx
|
|
|
-}
|
|
|
-function handleSortList(id: number) {
|
|
|
- sortActive.value = id
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<template>
|
|
|
- <view class="pages pb20rpx">
|
|
|
- <wd-navbar
|
|
|
- title="" custom-style="background-color:transparent !important" :bordered="false" :z-index="99"
|
|
|
- safe-area-inset-top fixed
|
|
|
- >
|
|
|
- <template #left>
|
|
|
- <view class="h-full flex items-center">
|
|
|
- <wd-icon name="arrow-left" size="22px" @click="router.back()" />
|
|
|
- <view class="ml10rpx flex items-center" @click.stop="selectAddress = true">
|
|
|
- <image :src="`${StaticUrl}/location-green.png`" class="h33.8rpx w29rpx" />
|
|
|
- <view class="ml10rpx max-w-280rpx truncate text-32rpx text-#222 font-semibold">
|
|
|
- {{ name }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </wd-navbar>
|
|
|
- <view class="sticky left-0 top-0 z-9 box-border bg-#F4FFD1 pt20rpx" :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }">
|
|
|
- <scroll-view scroll-x class="scrollx box-border w-full flex-shrink-0 whitespace-nowrap pl24rpx">
|
|
|
- <view class="flex items-end pb10rpx">
|
|
|
- <view v-for="item, idx in classfiylist" :key="idx" class="mr24rpx flex flex-col items-center justify-center" @click="handleTopNavChange(idx)">
|
|
|
- <image
|
|
|
- :src="item.icon"
|
|
|
- :class="[topNavActive == idx ? 'overflow-hidden border-solid border-[var(--them-color)] border-2rpx rounded-26rpx h84rpx w-84rpx' : 'h72rpx w-72rpx']"
|
|
|
- />
|
|
|
- <view class="mt16rpx text-22rpx" :class="[topNavActive == idx ? 'bg-[var(--them-color)] rounded-18rpx px-8rpx py2rpx text-white text-24rpx' : '']">
|
|
|
- {{ item.title }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- <view class="box-border w-full flex items-center bg-white p24rpx">
|
|
|
- <view v-for="item in sortList" :key="item.id" :class="[sortActive == item.id ? 'bg-[var(--them-color)] text-white' : 'bg-#F6F6F6 text-#222']" class="mr32rpx rounded-24rpx px16rpx py6rpx text-24rpx" @click="handleSortList(item.id)">
|
|
|
- {{ item.title }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-for="item in 10" :key="item" class="mb20rpx box-border w-full flex justify-between overflow-hidden bg-white p24rpx">
|
|
|
- <image
|
|
|
- :src="`${StaticUrl}/shu.png`"
|
|
|
- class="h160rpx w160rpx flex-shrink-0 rounded-32rpx"
|
|
|
- />
|
|
|
- <view class="ml20rpx box-border flex-1">
|
|
|
- <view class="flex items-center justify-between">
|
|
|
- <view class="text-32rpx font-semibold">
|
|
|
- 花林兰州拉面(观山湖店)
|
|
|
- </view>
|
|
|
- <view class="text-24rpx text-#AAAAAA">
|
|
|
- 月售104
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="mt20rpx text-24rpx text-#AAAAAA">
|
|
|
- 起送￥20 配送￥4
|
|
|
- </view>
|
|
|
- <view class="mt20rpx flex items-center justify-between">
|
|
|
- <view class="flex items-center text-#FFB639">
|
|
|
- <wd-icon name="star-on" size="22px" />
|
|
|
- <view class="ml8rpx text-32rpx font-semibold">
|
|
|
- 4.4分
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="text-24rpx">
|
|
|
- 15分钟 330m
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <scroll-view scroll-x class="mt24rpx w-528rpx whitespace-nowrap">
|
|
|
- <view class="flex items-center">
|
|
|
- <view v-for="items in 10" :key="items" class="mr20rpx">
|
|
|
- <image
|
|
|
- :src="`${StaticUrl}/shu.png`"
|
|
|
- class="h132rpx w132rpx flex-shrink-0 rounded-32rpx"
|
|
|
- />
|
|
|
- <view class="mt16rpx max-w-132rpx truncate text-24rpx">
|
|
|
- 番茄鸡蛋4545
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <selectAddressTemplate v-model="selectAddress" />
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-
|
|
|
-</style>
|
