超市信息卡片样式微调

This commit is contained in:
ctw committed 2025-01-14 11:20:04 +08:00
1 parent 4259d9efe5
commit f29c64dc41
2 files changed
+79 -82

No files matched your search

+4 -3
View File
@@ -14,7 +14,7 @@
<view class="h-15rpx" />
<!-- start 简介 start -->
<view flex-row card p-20rpx>
<image class="w-160rpx h-160rpx rounded-12rpx" :src="filePath(state.detail.logoPic)" mode="aspectFill" />
<image class="w-120rpx h-120rpx rounded-12rpx" :src="filePath(state.detail.logoPic)" mode="aspectFill" />
<view class="flex-1 flex-col m-l-20rpx">
<view class="flex-row items-center justify-between">
<view class="flex-row-center sub-text-36">
@@ -24,6 +24,7 @@
<tm-tag size="s">{{ state.detail.deptName }}</tm-tag>
</view>
</view>
<view class="second-text-28">{{ state.detail.phone }}</view>
<view class="m-t-10rpx second-text-28">
<text>营业时间</text>
<text class="m-l-10rpx">
@@ -32,8 +33,8 @@
{{ state.detail.jobEndTime }}
</text>
</view>
<view class="m-t-10rpx second-text-28">
<text>超市地址</text>
<view v-if="state.detail.addressDes" class="m-t-10rpx second-text-28">
<text>地址</text>
<text class="m-l-10rpx">{{ state.detail.addressDes }}</text>
</view>
</view>
+75 -79
View File
@@ -1,94 +1,90 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, reactive } from "vue"
import { onLoad, onShow } from "@dcloudio/uni-app"
import { hooks, router } from "@@/index";
import { merchantApi } from "@@/api";
import { filePath } from "@@/utils/file";
import { hooks, router } from "@@/index"
import { merchantApi } from "@@/api"
import { filePath } from "@@/utils/file"
const state = reactive<any>({
pa: {
pagesize: 10,
type: "2",
},
});
pa: {
pagesize: 10,
type: "2",
},
})
onLoad(() => {});
onLoad(() => {})
onShow(() => {
if (pageRef.value) {
pageRef.value.reload(false);
}
});
if (pageRef.value) {
pageRef.value.reload(false)
}
})
const pageRef = ref<any>(null);
const pageHook = hooks.usePage(pageRef, merchantApi.page, null, "data.records");
const pageRef = ref<any>(null)
const pageHook = hooks.usePage(pageRef, merchantApi.page, null, "data.records")
const query = (page: number, pagesize: number) => {
pageHook.startPage(page, pagesize, false, state.pa);
};
pageHook.startPage(page, pagesize, false, state.pa)
}
const toDetail = async (v: any) => {
const isLogin = await hooks.useCheckLogin();
if (isLogin) {
router.jump("/pages/shop/detail", { id: v.id });
}
};
const isLogin = await hooks.useCheckLogin()
if (isLogin) {
router.jump("/pages/shop/detail", { id: v.id })
}
}
</script>
<template>
<crud-layout 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"
>
<view class="flex-col card p-20rpx m-b-20rpx" v-for="(v, i) in pageHook.list" :key="i" @tap="toDetail(v)">
<view class="flex-row-center">
<image class="w-120rpx h-120rpx rounded-12rpx" :src="filePath(v.logoPic)" mode="aspectFill" />
<view class="flex-1 flex-col m-l-20rpx">
<view class="flex-row items-center justify-between">
<view class="flex-row-center sub-text-34">
<text> {{ v.name }}</text>
</view>
<view>
<tm-tag size="s">{{ v.deptName }}</tm-tag>
</view>
</view>
<view class="flex items-center">
<tm-rate :half="true" :model-value="2.5" :size="24" :space="2" />
<text class="c-blue ml-1">2.5</text>
</view>
<view class="m-t-10rpx second-text-28">
<text>营业时间</text>
<text class="m-l-10rpx">
{{ v.jobStartTime }}
~
{{ v.jobEndTime }}
</text>
<text class="float-right">22km</text>
</view>
<view v-if="v.addressDes" class="m-t-10rpx second-text-28">
<text>地址</text>
<text class="m-l-10rpx">{{ v.addressDes }}</text>
</view>
</view>
</view>
<crud-layout 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"
>
<view class="flex-col card p-20rpx m-b-20rpx" v-for="(v, i) in pageHook.list" :key="i" @tap="toDetail(v)">
<view class="flex-row-center">
<image class="w-120rpx h-120rpx rounded-12rpx" :src="filePath(v.logoPic)" mode="aspectFill" />
<view class="flex-1 flex-col m-l-20rpx">
<view class="flex-row items-center justify-between">
<view class="flex-row-center sub-text-34">
<text> {{ v.name }}</text>
</view>
<view>
<tm-tag size="s">{{ v.deptName }}</tm-tag>
</view>
</view>
<view class="second-text-28">{{ v.phone }}</view>
<view class="m-t-10rpx second-text-28">
<text>营业时间</text>
<text class="m-l-10rpx">
{{ v.jobStartTime }}
~
{{ v.jobEndTime }}
</text>
</view>
<view v-if="v.addressDes" class="m-t-10rpx second-text-28">
<text>地址</text>
<text class="m-l-10rpx">{{ v.addressDes }}</text>
</view>
</view>
</view>
<view class="bg-#d2d2d277 m-1 p-1 border-rd-1 flex-row items-center">
<text class="sub-text-28 ws-nowrap">推荐理由:</text>
<text class="sub-text-24 ws-nowrap text-ellipsis overflow-hidden">
实力评分,资历好,规模大。实力评分,资历好,规模大。实力评分,资历好,规模大。
</text>
</view>
</view>
</z-paging>
</crud-layout>
<view class="bg-#d2d2d277 m-1 p-1 border-rd-1 flex-row items-center">
<text class="sub-text-28 ws-nowrap">推荐理由:</text>
<text class="sub-text-24 ws-nowrap text-ellipsis overflow-hidden">
实力评分,资历好,规模大。实力评分,资历好,规模大。实力评分,资历好,规模大。
</text>
</view>
</view>
</z-paging>
</crud-layout>
</template>