316702372/anxinyan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust user appraisal order flow

Browse Source
This commit is contained in:
wushumin
2026-05-21 17:56:35 +08:00
parent cfd21b462a
commit d0c4332468
8 changed files with 163 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
user-app/src/pages.json
View File

@@ -25,18 +25,6 @@
"navigationBarTitleText": "选择商品信息"
}
},
{
"path": "pages/appraisal/extra",
"style": {
"navigationBarTitleText": "补充商品信息"
}
},
{
"path": "pages/appraisal/upload",
"style": {
"navigationBarTitleText": "上传鉴定资料"
}
},
{
"path": "pages/appraisal/confirm",
"style": {

24
user-app/src/pages/appraisal/confirm.vue
View File

@@ -12,9 +12,10 @@ const store = useAppraisalStore();
const preview = computed(() => store.preview);
const loading = computed(() => !store.preview);
const submitting = computed(() => false);
const purchasePriceText = computed(() => {
const price = Number(preview.value?.product_summary.price || 0);
return price > 0 ? `¥${price}` : "未填写";
const productCategoryBrandText = computed(() => {
const categoryName = preview.value?.product_summary.category_name || "";
const brandName = preview.value?.product_summary.brand_name || "未填写";
return categoryName ? `${categoryName} / ${brandName}` : "";
});
const addressSheetVisible = ref(false);
const addressesLoading = ref(false);
@@ -163,10 +164,11 @@ onShow(fetchAddresses);
<template>
<view class="app-page app-page--tight">
<FlowStepHeader
:step="6"
:step="3"
:total="3"
title="确认订单并支付"
desc="提交前请再次确认服务、商品资料与寄回地址，提交后会生成正式鉴定单并进入履约流程。"
:chips="['确认商品信息', '确认资料', '提交后生成正式鉴定单']"
desc="提交前请再次确认服务、商品信息与寄回地址，提交后会生成正式鉴定单并进入履约流程。"
:chips="['确认服务', '确认商品', '提交后生成正式鉴定单']"
/>
<view v-if="loading" class="notice-card">
@@ -180,10 +182,6 @@ onShow(fetchAddresses);
<text class="summary-card__label">鉴定服务</text>
<text class="summary-card__value">{{ preview?.service_summary.service_provider_text || '中检鉴定' }}</text>
</view>
<view class="summary-card__row">
<text class="summary-card__label">资料进度</text>
<text class="summary-card__value">{{ preview?.upload_summary.uploaded_count || 0 }} 项资料已完成</text>
</view>
</view>
<view class="section summary-card">
@@ -194,11 +192,7 @@ onShow(fetchAddresses);
</view>
<view class="summary-card__row">
<text class="summary-card__label">品类 / 品牌</text>
<text class="summary-card__value">{{ preview?.product_summary.category_name || '' }} / {{ preview?.product_summary.brand_name || '' }}</text>
</view>
<view class="summary-card__row">
<text class="summary-card__label">购买价格</text>
<text class="summary-card__value">{{ purchasePriceText }}</text>
<text class="summary-card__value">{{ productCategoryBrandText }}</text>
</view>
</view>

187
user-app/src/pages/appraisal/product.vue
View File

@@ -1,13 +1,13 @@
<script setup lang="ts">
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { appraisalApi, type CatalogOption, type CategoryOption } from "../../api/appraisal";
import { appraisalApi, type CategoryOption } from "../../api/appraisal";
import FlowStepHeader from "../../components/FlowStepHeader.vue";
import { useAppraisalStore } from "../../stores/appraisal";
import { isMissingDraftError, rebuildDraftFromStore } from "../../utils/appraisal-flow";
import { showErrorToast, showInfoToast, withLoading } from "../../utils/feedback";
type PickerType = "category" | "brand";
type PickerType = "category";
type CategoryPickerItem = {
id: number;
name: string;
@@ -18,50 +18,28 @@ type CategoryPickerItem = {
const store = useAppraisalStore();
const categories = ref<CategoryPickerItem[]>([]);
const brands = ref<CatalogOption[]>([]);
const pageLoading = ref(false);
const submitting = ref(false);
const loadError = ref("");
const activePicker = ref<PickerType | "">("");
const pickerKeyword = ref("");
const canContinue = computed(() => Boolean(store.product.categoryId && store.product.brandId));
const canContinue = computed(() => Boolean(store.product.categoryId));
const brandNameForSave = computed(() => store.product.brandName.trim());
const productSummary = computed(() => [
store.product.categoryName || "未选品类",
store.product.brandName || "未选品牌",
brandNameForSave.value || "未填品牌",
].join(" / "));
const pickerMeta = computed(() => {
if (activePicker.value === "category") {
return {
title: "选择品类",
desc: "品类将持续扩展，建议统一通过搜索选择器完成选择，后续更便于拓展更多鉴定业务。",
options: categories.value,
label: (item: CategoryPickerItem) => item.name || "",
emptyText: "暂无可用品类",
searchPlaceholder: "搜索品类名称",
};
}
if (activePicker.value === "brand") {
return {
title: "选择品牌",
desc: "支持搜索品牌名称，选择后即可进入下一步。",
options: brands.value,
label: (item: CatalogOption) => item.brand_name || "",
emptyText: "当前品类下暂无品牌数据",
searchPlaceholder: "搜索品牌名称",
};
}
return {
title: "选择品牌",
desc: "支持搜索品牌名称，选择后即可进入下一步。",
options: brands.value,
label: (item: CatalogOption) => item.brand_name || "",
emptyText: "当前品类下暂无品牌数据",
searchPlaceholder: "搜索品牌名称",
title: "选择品类",
desc: "品类将持续扩展，建议统一通过搜索选择器完成选择，后续更便于拓展更多鉴定业务。",
options: categories.value,
label: (item: CategoryPickerItem) => item.name || "",
emptyText: "暂无可用品类",
searchPlaceholder: "搜索品类名称",
};
});
@@ -71,33 +49,14 @@ const filteredPickerOptions = computed(() => {
return pickerMeta.value.options;
}
const options = pickerMeta.value.options as Array<CatalogOption | CategoryPickerItem>;
const options = pickerMeta.value.options;
return options.filter((item) =>
pickerMeta.value.label(item as never).toLowerCase().includes(keyword),
pickerMeta.value.label(item).toLowerCase().includes(keyword),
);
});
function pickerOptionKey(item: CatalogOption | CategoryPickerItem) {
if (activePicker.value === "category") {
return String((item as CategoryPickerItem).id);
}
if (activePicker.value === "brand") {
return String((item as CatalogOption).brand_id || "");
}
return "";
}
async function loadBrands() {
if (!store.product.categoryId) {
brands.value = [];
return;
}
const data = await appraisalApi.getBrands(store.product.categoryId);
brands.value = data.list;
if (!store.product.brandId && brands.value.length) {
selectBrand(brands.value[0], false);
}
function pickerOptionKey(item: CategoryPickerItem) {
return String(item.id);
}
function selectCategory(item: CategoryPickerItem) {
@@ -105,10 +64,7 @@ function selectCategory(item: CategoryPickerItem) {
categoryId: item.id,
categoryName: item.name,
brandId: 0,
brandName: "",
});
brands.value = [];
loadBrands();
}
async function loadCategories() {
@@ -121,16 +77,6 @@ async function loadCategories() {
}));
}
function selectBrand(item: CatalogOption, closeSheet = true) {
store.setProduct({
brandId: item.brand_id || 0,
brandName: item.brand_name || "",
});
if (closeSheet) {
closePicker();
}
}
function openPicker(type: PickerType) {
activePicker.value = type;
pickerKeyword.value = "";
@@ -141,52 +87,56 @@ function closePicker() {
pickerKeyword.value = "";
}
function confirmPicker(item: CatalogOption) {
if (activePicker.value === "category") {
selectCategory(item as unknown as CategoryPickerItem);
closePicker();
return;
}
if (activePicker.value === "brand") {
selectBrand(item);
}
function confirmPicker(item: CategoryPickerItem) {
selectCategory(item);
closePicker();
}
function isPickerCurrent(item: CatalogOption | CategoryPickerItem) {
if (activePicker.value === "category") {
return Number((item as CategoryPickerItem).id) === Number(store.product.categoryId || 0);
}
if (activePicker.value === "brand") {
return Number((item as CatalogOption).brand_id || 0) === Number(store.product.brandId || 0);
}
return false;
function isPickerCurrent(item: CategoryPickerItem) {
return Number(item.id) === Number(store.product.categoryId || 0);
}
function setBrandName(event: unknown) {
const value = typeof event === "string"
? event
: (event as { detail?: { value?: string } })?.detail?.value || "";
store.setProduct({
brandId: 0,
brandName: value,
});
}
async function goNext() {
if (submitting.value) return;
if (!canContinue.value) {
showInfoToast("请先完成品类和品牌选择");
showInfoToast("请先选择品类");
return;
}
store.setProduct({
brandId: 0,
brandName: brandNameForSave.value,
});
submitting.value = true;
try {
await withLoading("正在保存商品信息", async () => {
await appraisalApi.saveDraft({
draft_id: store.draftId,
current_step: 2,
current_step: 3,
service_provider: store.serviceProvider,
product_info: {
category_id: store.product.categoryId,
brand_id: store.product.brandId,
brand_id: 0,
brand_name: store.product.brandName,
},
});
});
loadError.value = "";
store.setCurrentStep(2);
uni.navigateTo({ url: "/pages/appraisal/extra" });
store.setCurrentStep(3);
store.setPreview(null);
uni.navigateTo({ url: "/pages/appraisal/confirm" });
} catch (error) {
loadError.value = "商品信息保存失败，请确认字典接口是否正常。";
loadError.value = "商品信息保存失败，请稍后重试或联系管理员检查服务。";
showErrorToast(error, "商品信息保存失败");
} finally {
submitting.value = false;
@@ -226,7 +176,7 @@ onLoad(async () => {
categoryId,
categoryName,
brandId: Number(draft.product_info.brand_id || 0),
brandName: "",
brandName: draft.product_info.brand_name || "",
});
} else if (store.product.categoryId) {
const currentCategory = categories.value.find((item) => item.id === store.product.categoryId);
@@ -242,21 +192,11 @@ onLoad(async () => {
}
}
await loadBrands();
if (store.product.brandId) {
const brand = brands.value.find((item) => item.brand_id === store.product.brandId);
if (brand?.brand_name) {
store.setProduct({ brandName: brand.brand_name });
}
}
loadError.value = "";
} catch (error) {
if (isMissingDraftError(error)) {
try {
await rebuildDraftFromStore(store);
await loadBrands();
loadError.value = "";
showInfoToast("草稿已自动恢复，可继续填写商品信息。");
} catch (recoverError) {
@@ -278,29 +218,30 @@ onLoad(async () => {
<view class="app-page app-page--tight">
<FlowStepHeader
:step="2"
:total="3"
title="选择商品信息"
desc="只需确认本次送检商品的品类和品牌，其他细节可在后续补充说明中填写。"
:chips="['选择品类', '选择品牌']"
desc="只需确认本次送检商品的品类，品牌可按实际情况选填，其他细节可在后续补充说明中填写。"
:chips="['选择品类', '品牌选填']"
/>
<view class="section form-panel">
<view class="form-panel__title">当前识别路径</view>
<view class="form-panel__desc">当前步骤仅用于确定商品大类和品牌，便于匹配资料模板与服务流程。</view>
<view class="form-panel__desc">当前步骤用于确定商品大类，便于匹配资料模板与服务流程。</view>
<view class="selection-summary-card">
<view class="selection-summary-card__title">{{ productSummary }}</view>
<view class="selection-summary-card__desc">
{{ canContinue ? "已完成基础商品信息" : "请选择品类和品牌后继续" }}
{{ canContinue ? "已完成基础商品信息" : "请选择品类后继续" }}
</view>
</view>
</view>
<view class="section form-panel">
<view class="form-panel__title">商品识别信息</view>
<view class="form-panel__desc">品牌列表会随品类变化，支持搜索快速定位。</view>
<view class="form-panel__desc">品类来源于后台资料配置，品牌由用户按实际商品自行填写。</view>
<view v-if="pageLoading" class="notice-card">
<view class="notice-card__title">正在加载商品字典</view>
<view class="notice-card__desc">品类和品牌数据加载完成后即可继续选择。</view>
<view class="notice-card__desc">品类数据加载完成后即可继续选择。</view>
</view>
<view v-if="loadError" class="notice-card">
@@ -323,17 +264,17 @@ onLoad(async () => {
</view>
<view class="form-group">
<view class="form-group__label">品牌</view>
<view :class="['selector-card', store.product.brandId ? 'selector-card--selected' : '']" @click="openPicker('brand')">
<view class="selector-card__main">
<view class="selector-card__value">{{ store.product.brandName || "请选择品牌" }}</view>
<view class="selector-card__meta">当前品类下共 {{ brands.length }} 个品牌，支持搜索。</view>
</view>
<view class="selector-card__side">
<view v-if="store.product.brandId" class="selector-card__badge">已选品牌</view>
<view class="selector-card__action">选择</view>
</view>
<view class="form-group__label">品牌（选填）</view>
<view class="field-box">
<input
:value="store.product.brandName"
class="field-input"
maxlength="128"
placeholder="请输入品牌名称，可不填"
@input="setBrandName"
/>
</view>
<view class="form-group__hint">不确定品牌时可留空，后续补充说明中仍可描述商品细节。</view>
</view>
</view>
@@ -356,11 +297,11 @@ onLoad(async () => {
<view
v-for="item in filteredPickerOptions"
:key="pickerOptionKey(item)"
:class="['picker-sheet__option', isPickerCurrent(item as CatalogOption) ? 'picker-sheet__option--selected' : '']"
@click="confirmPicker(item as CatalogOption)"
:class="['picker-sheet__option', isPickerCurrent(item) ? 'picker-sheet__option--selected' : '']"
@click="confirmPicker(item)"
>
<view class="picker-sheet__option-title">{{ pickerMeta.label(item as never) }}</view>
<view class="picker-sheet__option-action">{{ isPickerCurrent(item as CatalogOption) ? '已选' : '选择' }}</view>
<view class="picker-sheet__option-title">{{ pickerMeta.label(item) }}</view>
<view class="picker-sheet__option-action">{{ isPickerCurrent(item) ? '已选' : '选择' }}</view>
</view>
<view v-if="filteredPickerOptions.length === 0" class="picker-sheet__empty">

1
user-app/src/pages/appraisal/service.vue
View File

@@ -96,6 +96,7 @@ function chooseProvider(code: keyof typeof providerMeta) {
<view class="app-page app-page--tight">
<FlowStepHeader
:step="1"
:total="3"
title="选择鉴定服务"
desc="对比安心验与中检两种服务方式，确认本次送检适合的出具机构和结果交付标准。"
:chips="['服务流程一致', '机构与报告不同', '价格时效有差异']"

7
user-app/src/utils/appraisal-flow.ts
View File

@@ -12,14 +12,15 @@ export async function rebuildDraftFromStore(store: AppraisalStore) {
const draft = await appraisalApi.createDraft(store.serviceProvider || "anxinyan");
store.setDraft(draft.draft_id);
if (store.product.categoryId && store.product.brandId) {
if (store.product.categoryId) {
await appraisalApi.saveDraft({
draft_id: draft.draft_id,
current_step: 2,
current_step: 3,
service_provider: store.serviceProvider,
product_info: {
category_id: store.product.categoryId,
brand_id: store.product.brandId,
brand_id: store.product.brandId || 0,
brand_name: store.product.brandName.trim(),
},
});
}