361dffc7d8
- 新增师傅端路由和页面配置，切换登录后默认跳转到师傅大厅 - 新增服务分类图标上传功能和增项服务管理模块 - 新增订单、申诉、结算等模型关联关系及后台控制器 - 新增师傅端TabBar组件和消息页面跳转逻辑 - 新增文件上传接口和服务计算逻辑 - 新增各类SVG图标和空状态提示
485 行
11 KiB
Vue
485 行
11 KiB
Vue
<template>
|
||
<view class="cat-page">
|
||
<!-- 沉浸式顶部橙色区域：包含状态栏、导航栏与搜索框 -->
|
||
<view class="hero-header" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||
<!-- 自定义导航栏标题区 -->
|
||
<view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
|
||
<view class="nav-left" @tap="goHome">
|
||
<image class="nav-icon" src="/static/icons/home-white.svg" mode="aspectFit" />
|
||
</view>
|
||
<view class="nav-title">
|
||
<text class="title-txt">发布订单</text>
|
||
</view>
|
||
<view class="nav-right"></view>
|
||
</view>
|
||
|
||
<!-- 搜索栏：白底圆角搜索框 + 品牌胶囊按钮 -->
|
||
<view class="search-box-wrap">
|
||
<view class="search-box">
|
||
<input
|
||
class="search-input"
|
||
v-model="keyword"
|
||
type="text"
|
||
placeholder="桌子 / 马桶 / 门锁 / 水龙头"
|
||
placeholder-class="search-placeholder"
|
||
confirm-type="search"
|
||
@confirm="onSearch"
|
||
/>
|
||
<view class="search-clear-btn" v-if="keyword" @tap="clearKeyword">
|
||
<text class="clear-txt">×</text>
|
||
</view>
|
||
<view class="search-action-btn" @tap="onSearch">
|
||
<image class="search-btn-icon" src="/static/icons/search.svg" mode="aspectFit" />
|
||
<text class="search-btn-txt">搜索</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 白色圆角全类目主体卡片区 -->
|
||
<view class="cat-card-body">
|
||
<!-- 搜索模式提示条 -->
|
||
<view class="search-tip-bar" v-if="keyword.trim()">
|
||
<text class="st-text">搜索到与“{{ keyword.trim() }}”相关的服务类目 ({{ displayCats.length }}项)</text>
|
||
<text class="st-reset" @tap="clearKeyword">重置</text>
|
||
</view>
|
||
|
||
<!-- 全类目 5 列宫格列表 -->
|
||
<view class="cat-grid" v-if="displayCats.length > 0">
|
||
<view
|
||
class="cat-item clickable-hover"
|
||
v-for="item in displayCats"
|
||
:key="item.id"
|
||
@tap="selectCategory(item)"
|
||
>
|
||
<view class="cat-icon-wrap">
|
||
<image class="cat-icon-img" :src="item.icon_url || ('/static/icons/' + (item.iconKey || 'sofa') + '.png')" mode="aspectFit" />
|
||
</view>
|
||
<text class="cat-name">{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 搜索空状态与兜底引导 -->
|
||
<view class="empty-state" v-else>
|
||
<view class="empty-icon-wrap">
|
||
<image class="empty-icon-img" src="/static/icons/scan-paste.svg" mode="aspectFit" />
|
||
</view>
|
||
<text class="empty-title">未匹配到“{{ keyword }}”标准品类</text>
|
||
<text class="empty-desc">别担心，您可以直接发布自定义订单，师傅接单后为您服务</text>
|
||
<view class="custom-publish-btn clickable-hover" @tap="goCustomOrder">
|
||
<text class="btn-txt">发布自定义需求</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品与规格选择抽屉 -->
|
||
<GoodsPickerDrawer
|
||
:visible="showDrawer"
|
||
:cat-id="currentDrawerCatId"
|
||
:cat-name="currentDrawerCatName"
|
||
@update:visible="showDrawer = $event"
|
||
@select="onSpecSelected"
|
||
@custom="goCustomOrder"
|
||
/>
|
||
|
||
<!-- 统一底部导航栏（当前处于立即下单模式） -->
|
||
<YjyfTabBar :current="'order'" />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue';
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
import YjyfTabBar from '@/components/YjyfTabBar.vue';
|
||
import GoodsPickerDrawer from '@/components/GoodsPickerDrawer.vue';
|
||
import api from '@/utils/api.js';
|
||
|
||
// 系统状态栏高度与胶囊按钮适配
|
||
const statusBarHeight = ref(20);
|
||
const navBarHeight = ref(44);
|
||
|
||
try {
|
||
const info = uni.getSystemInfoSync();
|
||
if (info && info.statusBarHeight) statusBarHeight.value = info.statusBarHeight;
|
||
if (typeof uni.getMenuButtonBoundingClientRect === 'function') {
|
||
const menu = uni.getMenuButtonBoundingClientRect();
|
||
if (menu && menu.height) navBarHeight.value = (menu.top - statusBarHeight.value) * 2 + menu.height;
|
||
}
|
||
} catch (e) {}
|
||
|
||
// 搜索关键字
|
||
const keyword = ref('');
|
||
|
||
const allCats = ref([]);
|
||
|
||
// 计算当前展示的类目（支持拼音/汉字关键词过滤）
|
||
const displayCats = computed(() => {
|
||
const kw = keyword.value.trim().toLowerCase();
|
||
if (!kw) return allCats.value;
|
||
return allCats.value.filter(c => c.name.toLowerCase().includes(kw));
|
||
});
|
||
|
||
// 规格抽屉控制
|
||
const showDrawer = ref(false);
|
||
const currentDrawerCatId = ref(0);
|
||
const currentDrawerCatName = ref('');
|
||
|
||
function selectCategory(cat) {
|
||
currentDrawerCatId.value = cat.id;
|
||
currentDrawerCatName.value = cat.name;
|
||
showDrawer.value = true;
|
||
}
|
||
|
||
function onSpecSelected(spec) {
|
||
showDrawer.value = false;
|
||
const rawAddons = spec.addons && spec.addons.length ? spec.addons : [];
|
||
const extras = rawAddons.map(ad => ({
|
||
id: ad.id,
|
||
key: 'addon_' + ad.id,
|
||
name: ad.name,
|
||
unit: ad.unit || '个',
|
||
price: Number(ad.price) || 0,
|
||
num: 0
|
||
}));
|
||
|
||
const firstGoods = {
|
||
service_id: spec.service_id,
|
||
item_name: spec.item_name,
|
||
spec_id: spec.spec_id || 0,
|
||
spec_name: spec.spec_name,
|
||
cat_id: spec.cat_id || currentDrawerCatId.value,
|
||
cat_name: spec.cat_name || currentDrawerCatName.value,
|
||
unit: spec.unit || '件',
|
||
base_price: Number(spec.base_price) || 0,
|
||
num: 1,
|
||
service_type: spec.default_service_type || 'install',
|
||
service_type_name: spec.default_service_name || '安装',
|
||
service_types: spec.service_types || [],
|
||
images: [],
|
||
extras: extras
|
||
};
|
||
uni.setStorageSync('yjyf_first_goods', firstGoods);
|
||
try {
|
||
const pages = getCurrentPages();
|
||
if (pages && pages.length > 1 && pages[pages.length - 2].route.includes('order/quick')) {
|
||
uni.navigateBack();
|
||
return;
|
||
}
|
||
} catch (e) {}
|
||
uni.navigateTo({ url: '/pages/order/quick' });
|
||
}
|
||
|
||
function goCustomOrder() {
|
||
showDrawer.value = false;
|
||
const catNameParam = encodeURIComponent(currentDrawerCatName.value || '自定义需求');
|
||
uni.navigateTo({
|
||
url: `/pages/order/quick?cat_id=${currentDrawerCatId.value}&cat_name=${catNameParam}&mode=custom`
|
||
});
|
||
}
|
||
|
||
function goHome() {
|
||
uni.switchTab({
|
||
url: '/pages/index/index',
|
||
fail: () => uni.redirectTo({ url: '/pages/index/index' })
|
||
});
|
||
}
|
||
|
||
function clearKeyword() {
|
||
keyword.value = '';
|
||
}
|
||
|
||
function onSearch() {
|
||
const kw = keyword.value.trim();
|
||
if (!kw) return;
|
||
if (displayCats.value.length === 1) {
|
||
selectCategory(displayCats.value[0]);
|
||
}
|
||
}
|
||
|
||
async function loadServerCats() {
|
||
try {
|
||
const res = await api.cats();
|
||
if (res && res.list && res.list.length > 0) {
|
||
allCats.value = res.list.map(c => ({
|
||
id: c.id,
|
||
name: c.name,
|
||
icon_url: c.icon_url || '',
|
||
iconKey: c.icon || 'sofa'
|
||
}));
|
||
}
|
||
} catch (e) {}
|
||
}
|
||
|
||
onLoad(() => {
|
||
loadServerCats();
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.cat-page {
|
||
min-height: 100vh;
|
||
background: #F6F7F9;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 顶部橙色渐变 Hero Header */
|
||
.hero-header {
|
||
background: linear-gradient(135deg, #FF9436 0%, #F0710D 100%);
|
||
padding-bottom: 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.nav-bar {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 24rpx;
|
||
}
|
||
|
||
.nav-left {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.18);
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
|
||
.nav-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.nav-title {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
text-align: center;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.title-txt {
|
||
font-size: 34rpx;
|
||
font-weight: 700;
|
||
color: #FFFFFF;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
.nav-right {
|
||
width: 72rpx;
|
||
}
|
||
|
||
/* 搜索栏：白底圆角 + 橙色胶囊按钮 */
|
||
.search-box-wrap {
|
||
padding: 16rpx 28rpx 0;
|
||
}
|
||
|
||
.search-box {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #FFFFFF;
|
||
height: 80rpx;
|
||
border-radius: 40rpx;
|
||
padding: 0 8rpx 0 28rpx;
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
font-size: 26rpx;
|
||
color: #1F2937;
|
||
height: 100%;
|
||
}
|
||
|
||
.search-placeholder {
|
||
font-size: 26rpx;
|
||
color: #9CA3AF;
|
||
}
|
||
|
||
.search-clear-btn {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
border-radius: 50%;
|
||
background: #E5E7EB;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.clear-txt {
|
||
font-size: 28rpx;
|
||
color: #6B7280;
|
||
line-height: 1;
|
||
margin-top: -2rpx;
|
||
}
|
||
|
||
.search-action-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8rpx;
|
||
background: linear-gradient(135deg, #FF9436 0%, #F0710D 100%);
|
||
height: 64rpx;
|
||
padding: 0 28rpx;
|
||
border-radius: 32rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(240, 113, 13, 0.3);
|
||
}
|
||
|
||
.search-btn-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
.search-btn-txt {
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
/* 白色卡片内容主体 */
|
||
.cat-card-body {
|
||
flex: 1;
|
||
background: #FFFFFF;
|
||
border-top-left-radius: 36rpx;
|
||
border-top-right-radius: 36rpx;
|
||
margin-top: -12rpx;
|
||
padding: 36rpx 16rpx 40rpx;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.search-tip-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12rpx 20rpx 24rpx;
|
||
border-bottom: 1rpx solid #F1F5F9;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.st-text {
|
||
font-size: 24rpx;
|
||
color: #64748B;
|
||
}
|
||
|
||
.st-reset {
|
||
font-size: 24rpx;
|
||
color: #F0710D;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 5 列宫格布局 */
|
||
.cat-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
row-gap: 36rpx;
|
||
column-gap: 12rpx;
|
||
}
|
||
|
||
.cat-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 8rpx 0;
|
||
}
|
||
|
||
.cat-icon-wrap {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 50%;
|
||
background: #FFF7F0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 12rpx;
|
||
transition: transform 0.15s ease, background 0.15s ease;
|
||
}
|
||
|
||
.cat-item:active .cat-icon-wrap {
|
||
transform: scale(0.92);
|
||
background: #FFE8D6;
|
||
}
|
||
|
||
.cat-icon-img {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
}
|
||
|
||
.cat-name {
|
||
font-size: 24rpx;
|
||
color: #334155;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
line-height: 1.25;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-width: 120rpx;
|
||
}
|
||
|
||
/* 搜索空状态 */
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 80rpx 40rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.empty-icon-wrap {
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
border-radius: 50%;
|
||
background: #F1F5F9;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.empty-icon-img {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.empty-title {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #1E293B;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.empty-desc {
|
||
font-size: 24rpx;
|
||
color: #64748B;
|
||
line-height: 1.5;
|
||
margin-bottom: 36rpx;
|
||
}
|
||
|
||
.custom-publish-btn {
|
||
background: linear-gradient(135deg, #FF9436 0%, #F0710D 100%);
|
||
padding: 0 48rpx;
|
||
height: 76rpx;
|
||
line-height: 76rpx;
|
||
border-radius: 38rpx;
|
||
box-shadow: 0 8rpx 20rpx rgba(240, 113, 13, 0.25);
|
||
}
|
||
|
||
.custom-publish-btn .btn-txt {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.clickable-hover:active {
|
||
opacity: 0.85;
|
||
}
|
||
</style>
|