feat: 商家端代码
This commit is contained in:
FlowerWater
@@ -28,9 +28,15 @@ export default defineUniPages({
|
||||
pages: [
|
||||
{ path: 'dashboard/index', style: { navigationBarTitleText: '商家工作台' } },
|
||||
{ path: 'order/list', style: { navigationBarTitleText: '订单管理' } },
|
||||
{ path: 'order/detail', style: { navigationBarTitleText: '订单详情' } },
|
||||
{ path: 'goods/list', style: { navigationBarTitleText: '商品管理' } },
|
||||
{ path: 'goods/edit', style: { navigationBarTitleText: '编辑商品' } },
|
||||
{ path: 'finance/index', style: { navigationBarTitleText: '财务中心' } },
|
||||
{ path: 'finance/settlement', style: { navigationBarTitleText: '结算记录' } },
|
||||
{ path: 'finance/withdraw', style: { navigationBarTitleText: '申请提现' } },
|
||||
{ path: 'me/index', style: { navigationBarTitleText: '商家中心' } },
|
||||
{ path: 'me/shop', style: { navigationBarTitleText: '店铺设置' } },
|
||||
{ path: 'me/account', style: { navigationBarTitleText: '账号安全' } },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
273
src/pagesMerchant/api/index.ts
Normal file
273
src/pagesMerchant/api/index.ts
Normal file
@@ -0,0 +1,273 @@
|
||||
/**
|
||||
* 商户端 API 接口
|
||||
*/
|
||||
import type {
|
||||
MerchantOrder,
|
||||
MerchantGoods,
|
||||
MerchantStats,
|
||||
FinanceOverview,
|
||||
Transaction,
|
||||
Settlement,
|
||||
WithdrawRecord,
|
||||
ShopInfo,
|
||||
GoodsFormData,
|
||||
} from '@/typings/merchant'
|
||||
import { OrderStatus, GoodsStatus } from '@/typings/merchant'
|
||||
import {
|
||||
mockMerchantStats,
|
||||
mockMerchantOrders,
|
||||
mockMerchantGoods,
|
||||
mockFinanceOverview,
|
||||
mockTransactions,
|
||||
mockSettlements,
|
||||
mockWithdrawRecords,
|
||||
mockShopInfo,
|
||||
} from '../mock'
|
||||
|
||||
// ==================== 统计 API ====================
|
||||
|
||||
/** 获取商户统计数据 */
|
||||
export function getMerchantStats(): Promise<MerchantStats> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(mockMerchantStats)
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
// ==================== 订单 API ====================
|
||||
|
||||
/** 订单查询参数 */
|
||||
interface OrderQueryParams {
|
||||
status?: OrderStatus | 'all'
|
||||
keyword?: string
|
||||
page?: number
|
||||
pageSize?: number
|
||||
}
|
||||
|
||||
/** 获取订单列表 */
|
||||
export function getMerchantOrders(params: OrderQueryParams = {}): Promise<{ list: MerchantOrder[]; total: number }> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
let list = [...mockMerchantOrders]
|
||||
|
||||
// 状态筛选
|
||||
if (params.status && params.status !== 'all') {
|
||||
list = list.filter(item => item.status === params.status)
|
||||
}
|
||||
|
||||
// 关键词搜索
|
||||
if (params.keyword) {
|
||||
const keyword = params.keyword.toLowerCase()
|
||||
list = list.filter(item =>
|
||||
item.orderNo.toLowerCase().includes(keyword) ||
|
||||
item.customerName.toLowerCase().includes(keyword)
|
||||
)
|
||||
}
|
||||
|
||||
resolve({ list, total: list.length })
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取订单详情 */
|
||||
export function getMerchantOrderDetail(id: string): Promise<MerchantOrder | null> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const order = mockMerchantOrders.find(item => item.id === id)
|
||||
resolve(order || null)
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/** 确认订单 */
|
||||
export function confirmOrder(id: string): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const order = mockMerchantOrders.find(item => item.id === id)
|
||||
if (order) {
|
||||
order.status = OrderStatus.SHIPPING
|
||||
}
|
||||
resolve(true)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 发货 */
|
||||
export function shipOrder(id: string, data: { company: string; trackingNo: string }): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const order = mockMerchantOrders.find(item => item.id === id)
|
||||
if (order) {
|
||||
order.status = OrderStatus.SHIPPED
|
||||
order.shipTime = new Date().toISOString()
|
||||
order.logistics = {
|
||||
company: data.company,
|
||||
trackingNo: data.trackingNo,
|
||||
status: '已发货',
|
||||
traces: [{ time: new Date().toISOString(), content: '商家已发货' }],
|
||||
}
|
||||
}
|
||||
resolve(true)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 添加商家备注 */
|
||||
export function addMerchantRemark(id: string, remark: string): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const order = mockMerchantOrders.find(item => item.id === id)
|
||||
if (order) {
|
||||
order.merchantRemark = remark
|
||||
}
|
||||
resolve(true)
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
// ==================== 商品 API ====================
|
||||
|
||||
/** 商品查询参数 */
|
||||
interface GoodsQueryParams {
|
||||
status?: GoodsStatus | 'all' | 'lowStock'
|
||||
keyword?: string
|
||||
page?: number
|
||||
pageSize?: number
|
||||
}
|
||||
|
||||
/** 获取商品列表 */
|
||||
export function getMerchantGoodsList(params: GoodsQueryParams = {}): Promise<{ list: MerchantGoods[]; total: number }> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
let list = [...mockMerchantGoods]
|
||||
|
||||
// 状态筛选
|
||||
if (params.status) {
|
||||
if (params.status === 'lowStock') {
|
||||
list = list.filter(item => item.stock <= 10)
|
||||
} else if (params.status !== 'all') {
|
||||
list = list.filter(item => item.status === params.status)
|
||||
}
|
||||
}
|
||||
|
||||
// 关键词搜索
|
||||
if (params.keyword) {
|
||||
const keyword = params.keyword.toLowerCase()
|
||||
list = list.filter(item => item.name.toLowerCase().includes(keyword))
|
||||
}
|
||||
|
||||
resolve({ list, total: list.length })
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取商品详情 */
|
||||
export function getMerchantGoodsDetail(id: string): Promise<MerchantGoods | null> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const goods = mockMerchantGoods.find(item => item.id === id)
|
||||
resolve(goods || null)
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/** 保存商品 */
|
||||
export function saveMerchantGoods(data: GoodsFormData): Promise<{ id: string }> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const id = data.id || `goods_${Date.now()}`
|
||||
resolve({ id })
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 更新商品状态 */
|
||||
export function updateGoodsStatus(id: string, status: GoodsStatus): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const goods = mockMerchantGoods.find(item => item.id === id)
|
||||
if (goods) {
|
||||
goods.status = status
|
||||
}
|
||||
resolve(true)
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/** 删除商品 */
|
||||
export function deleteMerchantGoods(id: string): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(true)
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
// ==================== 财务 API ====================
|
||||
|
||||
/** 获取财务概览 */
|
||||
export function getFinanceOverview(): Promise<FinanceOverview> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(mockFinanceOverview)
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取交易记录 */
|
||||
export function getTransactions(page = 1, pageSize = 20): Promise<{ list: Transaction[]; total: number }> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({ list: mockTransactions, total: mockTransactions.length })
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取结算记录 */
|
||||
export function getSettlements(page = 1, pageSize = 20): Promise<{ list: Settlement[]; total: number }> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({ list: mockSettlements, total: mockSettlements.length })
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取提现记录 */
|
||||
export function getWithdrawRecords(page = 1, pageSize = 20): Promise<{ list: WithdrawRecord[]; total: number }> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({ list: mockWithdrawRecords, total: mockWithdrawRecords.length })
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/** 申请提现 */
|
||||
export function applyWithdraw(data: { amount: number; bankAccount: string }): Promise<{ id: string }> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({ id: `withdraw_${Date.now()}` })
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
// ==================== 店铺 API ====================
|
||||
|
||||
/** 获取店铺信息 */
|
||||
export function getShopInfo(): Promise<ShopInfo> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(mockShopInfo)
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/** 更新店铺信息 */
|
||||
export function updateShopInfo(data: Partial<ShopInfo>): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
Object.assign(mockShopInfo, data)
|
||||
resolve(true)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { useMerchantStore } from '@/store/merchant'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
@@ -8,25 +9,44 @@ definePage({
|
||||
})
|
||||
|
||||
const userStore = useUserStore()
|
||||
const merchantStore = useMerchantStore()
|
||||
|
||||
// 模拟数据
|
||||
const stats = ref({
|
||||
todayOrders: 128,
|
||||
pendingOrders: 23,
|
||||
todaySales: 15680.50,
|
||||
totalGoods: 356,
|
||||
// 待办事项
|
||||
const todos = computed(() => {
|
||||
if (!merchantStore.stats) return []
|
||||
return [
|
||||
{ icon: 'i-carbon-shopping-bag', label: '待发货订单', count: merchantStore.stats.pendingOrders, path: '/pagesMerchant/order/list' },
|
||||
{ icon: 'i-carbon-warning', label: '库存预警', count: merchantStore.stats.lowStockGoods, path: '/pagesMerchant/goods/list' },
|
||||
{ icon: 'i-carbon-wallet', label: '待结算', count: `¥${(merchantStore.stats.pendingSettlement / 100).toFixed(0)}`, path: '/pagesMerchant/finance/index' },
|
||||
].filter(item => item.count)
|
||||
})
|
||||
|
||||
// 快捷操作
|
||||
const quickActions = [
|
||||
{ icon: 'i-carbon-document-add', label: '新增订单', path: '/pagesMerchant/order/list' },
|
||||
{ icon: 'i-carbon-add-alt', label: '新增商品', path: '/pagesMerchant/goods/edit' },
|
||||
{ icon: 'i-carbon-wallet', label: '财务中心', path: '/pagesMerchant/finance/index' },
|
||||
{ icon: 'i-carbon-settings', label: '店铺设置', path: '/pagesMerchant/me/index' },
|
||||
{ icon: 'i-carbon-settings', label: '店铺设置', path: '/pagesMerchant/me/shop' },
|
||||
]
|
||||
|
||||
// 加载数据
|
||||
async function loadData() {
|
||||
await merchantStore.fetchStats()
|
||||
}
|
||||
|
||||
// 跳转
|
||||
function handleAction(path: string) {
|
||||
uni.navigateTo({ url: path })
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
async function onRefresh() {
|
||||
await loadData()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -40,25 +60,43 @@ function handleAction(path: string) {
|
||||
</view>
|
||||
|
||||
<!-- 数据卡片 -->
|
||||
<view class="stats-grid">
|
||||
<view class="stats-grid" v-if="merchantStore.stats">
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">{{ stats.todayOrders }}</text>
|
||||
<text class="stat-value">{{ merchantStore.stats.todayOrders }}</text>
|
||||
<text class="stat-label">今日订单</text>
|
||||
</view>
|
||||
<view class="stat-card warning">
|
||||
<text class="stat-value">{{ stats.pendingOrders }}</text>
|
||||
<text class="stat-value">{{ merchantStore.stats.pendingOrders }}</text>
|
||||
<text class="stat-label">待处理</text>
|
||||
</view>
|
||||
<view class="stat-card success">
|
||||
<text class="stat-value">¥{{ stats.todaySales.toFixed(0) }}</text>
|
||||
<text class="stat-value">¥{{ merchantStore.stats.todaySales.toFixed(0) }}</text>
|
||||
<text class="stat-label">今日销售额</text>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">{{ stats.totalGoods }}</text>
|
||||
<text class="stat-value">{{ merchantStore.stats.totalGoods }}</text>
|
||||
<text class="stat-label">商品总数</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 待办事项 -->
|
||||
<view class="section" v-if="todos.length > 0">
|
||||
<view class="section-title">待办事项</view>
|
||||
<view class="todo-list">
|
||||
<view
|
||||
v-for="item in todos"
|
||||
:key="item.label"
|
||||
class="todo-item"
|
||||
@click="handleAction(item.path)"
|
||||
>
|
||||
<text :class="item.icon" class="todo-icon"></text>
|
||||
<text class="todo-label">{{ item.label }}</text>
|
||||
<text class="todo-count">{{ item.count }}</text>
|
||||
<text class="i-carbon-chevron-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
<view class="section">
|
||||
<view class="section-title">快捷操作</view>
|
||||
@@ -83,6 +121,9 @@ function handleAction(path: string) {
|
||||
.dashboard-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
width: 100%;
|
||||
max-width: 540px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -157,6 +198,43 @@ function handleAction(path: string) {
|
||||
}
|
||||
}
|
||||
|
||||
.todo-list {
|
||||
.todo-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.todo-icon {
|
||||
font-size: 36rpx;
|
||||
color: #ff8f0d;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.todo-label {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.todo-count {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #ff8f0d;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
font-size: 28rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
|
||||
@@ -1,38 +1,126 @@
|
||||
<script lang="ts" setup>
|
||||
import { useMerchantStore } from '@/store/merchant'
|
||||
import { getTransactions } from '@/pagesMerchant/api'
|
||||
import { TransactionType } from '@/typings/merchant'
|
||||
import type { Transaction } from '@/typings/merchant'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '财务中心',
|
||||
},
|
||||
})
|
||||
|
||||
// 模拟数据
|
||||
const finance = ref({
|
||||
balance: 125680.50,
|
||||
pendingSettlement: 23500.00,
|
||||
monthIncome: 89600.00,
|
||||
const merchantStore = useMerchantStore()
|
||||
|
||||
// 交易记录
|
||||
const transactions = ref<Transaction[]>([])
|
||||
|
||||
// 快捷操作
|
||||
const quickActions = [
|
||||
{ icon: 'i-carbon-wallet', label: '申请提现', path: '/pagesMerchant/finance/withdraw' },
|
||||
{ icon: 'i-carbon-document', label: '结算记录', path: '/pagesMerchant/finance/settlement' },
|
||||
]
|
||||
|
||||
// 获取交易类型样式
|
||||
function getTypeStyle(type: TransactionType) {
|
||||
const styles = {
|
||||
[TransactionType.INCOME]: { color: '#00c05a', prefix: '+' },
|
||||
[TransactionType.WITHDRAW]: { color: '#fa4350', prefix: '' },
|
||||
[TransactionType.REFUND]: { color: '#fa4350', prefix: '-' },
|
||||
}
|
||||
return styles[type]
|
||||
}
|
||||
|
||||
// 获取交易类型文本
|
||||
function getTypeText(type: TransactionType) {
|
||||
const texts = {
|
||||
[TransactionType.INCOME]: '订单收入',
|
||||
[TransactionType.WITHDRAW]: '提现',
|
||||
[TransactionType.REFUND]: '退款',
|
||||
}
|
||||
return texts[type]
|
||||
}
|
||||
|
||||
// 跳转
|
||||
function handleAction(path: string) {
|
||||
uni.navigateTo({ url: path })
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
async function loadData() {
|
||||
await merchantStore.fetchFinanceOverview()
|
||||
const res = await getTransactions()
|
||||
transactions.value = res.list
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="finance-page">
|
||||
<!-- 余额卡片 -->
|
||||
<view class="balance-card">
|
||||
<text class="label">可用余额</text>
|
||||
<text class="amount">¥{{ finance.balance.toFixed(2) }}</text>
|
||||
<view class="actions">
|
||||
<view class="action-btn">提现</view>
|
||||
<view class="balance-card" v-if="merchantStore.financeOverview">
|
||||
<text class="label">可用余额（元）</text>
|
||||
<text class="amount">{{ merchantStore.financeOverview.balance.toFixed(2) }}</text>
|
||||
<view class="stats">
|
||||
<view class="stat-item">
|
||||
<text class="value">{{ merchantStore.financeOverview.pendingSettlement.toFixed(2) }}</text>
|
||||
<text class="label">待结算</text>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="value">{{ merchantStore.financeOverview.monthIncome.toFixed(2) }}</text>
|
||||
<text class="label">本月收入</text>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="value">{{ (merchantStore.financeOverview.totalIncome / 10000).toFixed(1) }}万</text>
|
||||
<text class="label">累计收入</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 财务统计 -->
|
||||
<view class="stats">
|
||||
<view class="stat-item">
|
||||
<text class="value">¥{{ finance.pendingSettlement.toFixed(2) }}</text>
|
||||
<text class="label">待结算</text>
|
||||
<!-- 快捷操作 -->
|
||||
<view class="section">
|
||||
<view class="section-title">快捷操作</view>
|
||||
<view class="quick-actions">
|
||||
<view
|
||||
v-for="item in quickActions"
|
||||
:key="item.label"
|
||||
class="action-item"
|
||||
@click="handleAction(item.path)"
|
||||
>
|
||||
<view class="action-icon">
|
||||
<text :class="item.icon"></text>
|
||||
</view>
|
||||
<text class="action-label">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 交易记录 -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">交易记录</text>
|
||||
<text class="more">查看全部 ></text>
|
||||
</view>
|
||||
|
||||
<view class="transaction-list">
|
||||
<view v-if="transactions.length === 0" class="empty">
|
||||
<text>暂无交易记录</text>
|
||||
</view>
|
||||
|
||||
<view v-for="item in transactions" :key="item.id" class="transaction-item">
|
||||
<view class="info">
|
||||
<text class="type">{{ getTypeText(item.type) }}</text>
|
||||
<text class="time">{{ item.createTime }}</text>
|
||||
</view>
|
||||
<view class="amount" :style="{ color: getTypeStyle(item.type).color }">
|
||||
{{ getTypeStyle(item.type).prefix }}{{ Math.abs(item.amount).toFixed(2) }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="value">¥{{ finance.monthIncome.toFixed(2) }}</text>
|
||||
<text class="label">本月收入</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -42,7 +130,9 @@ const finance = ref({
|
||||
.finance-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20rpx;
|
||||
width: 100%;
|
||||
max-width: 540px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
@@ -50,56 +140,149 @@ const finance = ref({
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx;
|
||||
color: #fff;
|
||||
margin: 20rpx;
|
||||
|
||||
.label {
|
||||
> .label {
|
||||
font-size: 26rpx;
|
||||
opacity: 0.9;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 56rpx;
|
||||
> .amount {
|
||||
font-size: 64rpx;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-bottom: 30rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.actions {
|
||||
.action-btn {
|
||||
display: inline-block;
|
||||
padding: 16rpx 48rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
.stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 0;
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
|
||||
.value {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 22rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 1rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.stat-item {
|
||||
.section {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
padding: 24rpx;
|
||||
margin: 20rpx;
|
||||
|
||||
.value {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.label {
|
||||
.more {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
|
||||
.action-icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-size: 48rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.action-label {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.transaction-list {
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 40rpx 0;
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.transaction-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info {
|
||||
.type {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
168
src/pagesMerchant/finance/settlement.vue
Normal file
168
src/pagesMerchant/finance/settlement.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<script lang="ts" setup>
|
||||
import { getSettlements } from '@/pagesMerchant/api'
|
||||
import { SettlementStatus } from '@/typings/merchant'
|
||||
import type { Settlement } from '@/typings/merchant'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '结算记录',
|
||||
},
|
||||
})
|
||||
|
||||
const settlements = ref<Settlement[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
// 状态配置
|
||||
const statusConfig = {
|
||||
[SettlementStatus.PENDING]: { label: '待结算', color: '#ff8f0d' },
|
||||
[SettlementStatus.SETTLED]: { label: '已结算', color: '#00c05a' },
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getSettlements()
|
||||
settlements.value = res.list
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="settlement-page">
|
||||
<view v-if="settlements.length === 0" class="empty">
|
||||
<text class="i-carbon-document"></text>
|
||||
<text>暂无结算记录</text>
|
||||
</view>
|
||||
|
||||
<view v-for="item in settlements" :key="item.id" class="settlement-card">
|
||||
<view class="card-header">
|
||||
<text class="settlement-no">{{ item.settlementNo }}</text>
|
||||
<text class="status" :style="{ color: statusConfig[item.status].color }">
|
||||
{{ statusConfig[item.status].label }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="amount-row">
|
||||
<text class="label">结算金额</text>
|
||||
<text class="amount">¥{{ item.amount.toFixed(2) }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text>订单数：{{ item.orderCount }}笔</text>
|
||||
<text>周期：{{ item.period }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-footer">
|
||||
<text class="time">创建时间：{{ item.createTime }}</text>
|
||||
<text class="time" v-if="item.settledTime">结算时间：{{ item.settledTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.settlement-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20rpx;
|
||||
width: 100%;
|
||||
max-width: 540px;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
|
||||
text:first-child {
|
||||
font-size: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.settlement-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.settlement-no {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.amount-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #ff8f0d;
|
||||
}
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding-top: 16rpx;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
|
||||
.time {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
|
||||
& + .time {
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
376
src/pagesMerchant/finance/withdraw.vue
Normal file
376
src/pagesMerchant/finance/withdraw.vue
Normal file
@@ -0,0 +1,376 @@
|
||||
<script lang="ts" setup>
|
||||
import { useMerchantStore } from '@/store/merchant'
|
||||
import { getWithdrawRecords, applyWithdraw } from '@/pagesMerchant/api'
|
||||
import { WithdrawStatus, WITHDRAW_STATUS_CONFIG } from '@/typings/merchant'
|
||||
import type { WithdrawRecord } from '@/typings/merchant'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '申请提现',
|
||||
},
|
||||
})
|
||||
|
||||
const merchantStore = useMerchantStore()
|
||||
|
||||
// 提现金额
|
||||
const withdrawAmount = ref('')
|
||||
|
||||
// 银行卡列表
|
||||
const bankCards = [
|
||||
{ id: '1', name: '中国工商银行', account: '**** **** **** 1234' },
|
||||
{ id: '2', name: '中国建设银行', account: '**** **** **** 5678' },
|
||||
]
|
||||
const selectedCardIndex = ref(0)
|
||||
|
||||
// 提现记录
|
||||
const withdrawRecords = ref<WithdrawRecord[]>([])
|
||||
|
||||
// 快捷金额
|
||||
const quickAmounts = [1000, 5000, 10000]
|
||||
|
||||
// 选择快捷金额
|
||||
function selectQuickAmount(amount: number) {
|
||||
withdrawAmount.value = amount.toString()
|
||||
}
|
||||
|
||||
// 全部提现
|
||||
function withdrawAll() {
|
||||
if (merchantStore.financeOverview) {
|
||||
withdrawAmount.value = merchantStore.financeOverview.balance.toString()
|
||||
}
|
||||
}
|
||||
|
||||
// 选择银行卡
|
||||
function handleCardChange(e: any) {
|
||||
selectedCardIndex.value = e.detail.value
|
||||
}
|
||||
|
||||
// 申请提现
|
||||
async function handleWithdraw() {
|
||||
if (!withdrawAmount.value || parseFloat(withdrawAmount.value) <= 0) {
|
||||
uni.showToast({ title: '请输入提现金额', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
const amount = parseFloat(withdrawAmount.value)
|
||||
if (merchantStore.financeOverview && amount > merchantStore.financeOverview.balance) {
|
||||
uni.showToast({ title: '提现金额不能超过可用余额', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
uni.showModal({
|
||||
title: '确认提现',
|
||||
content: `确定要提现 ¥${amount.toFixed(2)} 到 ${bankCards[selectedCardIndex.value].name} 吗？`,
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({ title: '提交中...' })
|
||||
try {
|
||||
await applyWithdraw({
|
||||
amount,
|
||||
bankAccount: bankCards[selectedCardIndex.value].account,
|
||||
})
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '申请已提交', icon: 'success' })
|
||||
withdrawAmount.value = ''
|
||||
loadData()
|
||||
} catch (error) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '申请失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
async function loadData() {
|
||||
await merchantStore.fetchFinanceOverview()
|
||||
const res = await getWithdrawRecords()
|
||||
withdrawRecords.value = res.list
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="withdraw-page">
|
||||
<!-- 可用余额 -->
|
||||
<view class="balance-info" v-if="merchantStore.financeOverview">
|
||||
<text class="label">可用余额（元）</text>
|
||||
<text class="amount">{{ merchantStore.financeOverview.balance.toFixed(2) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 提现表单 -->
|
||||
<view class="withdraw-form">
|
||||
<view class="form-item">
|
||||
<text class="label">提现金额</text>
|
||||
<view class="amount-input">
|
||||
<text class="unit">¥</text>
|
||||
<input
|
||||
v-model="withdrawAmount"
|
||||
type="digit"
|
||||
placeholder="请输入提现金额"
|
||||
class="input"
|
||||
/>
|
||||
<text class="all-btn" @click="withdrawAll">全部提现</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="quick-amounts">
|
||||
<view
|
||||
v-for="amount in quickAmounts"
|
||||
:key="amount"
|
||||
class="quick-item"
|
||||
:class="{ active: withdrawAmount === amount.toString() }"
|
||||
@click="selectQuickAmount(amount)"
|
||||
>
|
||||
¥{{ amount }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label">到账银行卡</text>
|
||||
<picker :range="bankCards" range-key="name" @change="handleCardChange">
|
||||
<view class="bank-card">
|
||||
<text class="bank-name">{{ bankCards[selectedCardIndex].name }}</text>
|
||||
<text class="bank-account">{{ bankCards[selectedCardIndex].account }}</text>
|
||||
<text class="i-carbon-chevron-right"></text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="tips">
|
||||
<text class="i-carbon-information"></text>
|
||||
<text>提现申请提交后，预计1-3个工作日内到账，请耐心等待审核</text>
|
||||
</view>
|
||||
|
||||
<view class="submit-btn" @click="handleWithdraw">立即提现</view>
|
||||
</view>
|
||||
|
||||
<!-- 提现记录 -->
|
||||
<view class="section">
|
||||
<view class="section-title">提现记录</view>
|
||||
|
||||
<view v-if="withdrawRecords.length === 0" class="empty">
|
||||
<text>暂无提现记录</text>
|
||||
</view>
|
||||
|
||||
<view v-for="item in withdrawRecords" :key="item.id" class="record-item">
|
||||
<view class="info">
|
||||
<text class="amount">¥{{ item.amount.toFixed(2) }}</text>
|
||||
<text class="bank">{{ item.bankName }} {{ item.bankAccount }}</text>
|
||||
<text class="time">{{ item.applyTime }}</text>
|
||||
</view>
|
||||
<view class="status" :style="{ color: WITHDRAW_STATUS_CONFIG[item.status].color }">
|
||||
{{ WITHDRAW_STATUS_CONFIG[item.status].label }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.withdraw-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
width: 100%;
|
||||
max-width: 540px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.balance-info {
|
||||
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
|
||||
padding: 40rpx;
|
||||
color: #fff;
|
||||
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
opacity: 0.9;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 56rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.withdraw-form {
|
||||
background: #fff;
|
||||
margin: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
|
||||
.form-item {
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.unit {
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
font-size: 48rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.all-btn {
|
||||
font-size: 26rpx;
|
||||
color: #ff8f0d;
|
||||
}
|
||||
}
|
||||
|
||||
.bank-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.bank-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.bank-account {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quick-amounts {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
padding: 24rpx 0;
|
||||
|
||||
.quick-item {
|
||||
flex: 1;
|
||||
height: 64rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 8rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
|
||||
&.active {
|
||||
border-color: #ff8f0d;
|
||||
background: rgba(255, 143, 13, 0.1);
|
||||
color: #ff8f0d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8rpx;
|
||||
padding: 24rpx 0;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
|
||||
&:first-child {
|
||||
color: #ff8f0d;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
height: 88rpx;
|
||||
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
background: #fff;
|
||||
margin: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 40rpx 0;
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.record-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info {
|
||||
.amount {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.bank {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
display: block;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
844
src/pagesMerchant/goods/edit.vue
Normal file
844
src/pagesMerchant/goods/edit.vue
Normal file
@@ -0,0 +1,844 @@
|
||||
<script lang="ts" setup>
|
||||
import { useMerchantStore } from '@/store/merchant'
|
||||
import { saveMerchantGoods } from '@/pagesMerchant/api'
|
||||
import type { GoodsFormData } from '@/typings/merchant'
|
||||
import { onLoad, onBackPress } from '@dcloudio/uni-app'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '编辑商品',
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
})
|
||||
|
||||
const merchantStore = useMerchantStore()
|
||||
|
||||
// 页面参数
|
||||
const goodsId = ref('')
|
||||
|
||||
// 表单数据
|
||||
const formData = ref<GoodsFormData>({
|
||||
name: '',
|
||||
categoryId: '',
|
||||
brand: '',
|
||||
price: 0,
|
||||
costPrice: 0,
|
||||
stock: 0,
|
||||
images: [],
|
||||
description: '',
|
||||
enableSpec: false,
|
||||
specs: [],
|
||||
skuList: [],
|
||||
})
|
||||
|
||||
// 分类选项
|
||||
const categories = [
|
||||
{ id: '1', name: '手机' },
|
||||
{ id: '2', name: '耳机' },
|
||||
{ id: '3', name: '平板' },
|
||||
{ id: '4', name: '电脑' },
|
||||
]
|
||||
|
||||
// 是否编辑模式
|
||||
const isEdit = computed(() => !!goodsId.value)
|
||||
|
||||
// 加载商品详情
|
||||
async function loadGoodsDetail() {
|
||||
if (goodsId.value) {
|
||||
await merchantStore.fetchGoodsDetail(goodsId.value)
|
||||
if (merchantStore.currentGoods) {
|
||||
const goods = merchantStore.currentGoods
|
||||
formData.value = {
|
||||
id: goods.id,
|
||||
name: goods.name,
|
||||
categoryId: goods.categoryId,
|
||||
brand: goods.brand || '',
|
||||
price: goods.price,
|
||||
costPrice: goods.costPrice,
|
||||
stock: goods.stock,
|
||||
images: [...goods.images],
|
||||
description: goods.description,
|
||||
enableSpec: !!(goods.specs && goods.specs.length > 0),
|
||||
specs: goods.specs || [],
|
||||
skuList: goods.skuList || [],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 选择分类
|
||||
function handleCategoryChange(e: any) {
|
||||
formData.value.categoryId = categories[e.detail.value].id
|
||||
}
|
||||
|
||||
// 获取分类名称
|
||||
const categoryName = computed(() => {
|
||||
const cat = categories.find(c => c.id === formData.value.categoryId)
|
||||
return cat?.name || '请选择分类'
|
||||
})
|
||||
|
||||
// 添加图片
|
||||
function handleAddImage() {
|
||||
uni.chooseImage({
|
||||
count: 9 - formData.value.images.length,
|
||||
success: (res) => {
|
||||
formData.value.images.push(...res.tempFilePaths)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 删除图片
|
||||
function handleRemoveImage(index: number) {
|
||||
formData.value.images.splice(index, 1)
|
||||
}
|
||||
|
||||
// 切换多规格
|
||||
function handleToggleSpec() {
|
||||
if (!formData.value.enableSpec) {
|
||||
// 开启多规格，初始化一个规格
|
||||
formData.value.specs = [{ name: '', values: [''] }]
|
||||
formData.value.skuList = []
|
||||
} else {
|
||||
// 关闭多规格
|
||||
formData.value.specs = []
|
||||
formData.value.skuList = []
|
||||
}
|
||||
formData.value.enableSpec = !formData.value.enableSpec
|
||||
}
|
||||
|
||||
// 添加规格
|
||||
function addSpec() {
|
||||
formData.value.specs?.push({ name: '', values: [''] })
|
||||
}
|
||||
|
||||
// 删除规格
|
||||
function removeSpec(index: number) {
|
||||
formData.value.specs?.splice(index, 1)
|
||||
generateSkuList()
|
||||
}
|
||||
|
||||
// 添加规格值
|
||||
function addSpecValue(specIndex: number) {
|
||||
formData.value.specs?.[specIndex].values.push('')
|
||||
}
|
||||
|
||||
// 删除规格值
|
||||
function removeSpecValue(specIndex: number, valueIndex: number) {
|
||||
formData.value.specs?.[specIndex].values.splice(valueIndex, 1)
|
||||
generateSkuList()
|
||||
}
|
||||
|
||||
// 生成 SKU 列表
|
||||
function generateSkuList() {
|
||||
const allSpecs = formData.value.specs || []
|
||||
|
||||
// 过滤出有效的规格：只要有至少一个非空值的规格项，就视为有效（为了预览体验，允许名称暂时为空）
|
||||
const validSpecs = allSpecs.filter(s =>
|
||||
s.values && s.values.some(v => v && v.trim() !== '')
|
||||
)
|
||||
|
||||
if (validSpecs.length === 0) {
|
||||
if (allSpecs.length === 0) {
|
||||
formData.value.skuList = []
|
||||
}
|
||||
// 如果没有有效规格，则尝试清空 SKU 列表，但考虑到可能是刚清空值，保留空数组
|
||||
formData.value.skuList = []
|
||||
return
|
||||
}
|
||||
|
||||
// 笛卡尔积
|
||||
const combine = (arr: string[][]): string[][] => {
|
||||
if (arr.length === 0) return [[]]
|
||||
const [first, ...rest] = arr
|
||||
const restCombinations = combine(rest)
|
||||
return first.flatMap(v => restCombinations.map(c => [v, ...c]))
|
||||
}
|
||||
|
||||
// 使用有效规格生成组合
|
||||
const specValues = validSpecs.map(s => s.values.filter(v => v && v.trim() !== ''))
|
||||
|
||||
// 再次检查防止全空组合
|
||||
if (specValues.some(vals => vals.length === 0)) return
|
||||
|
||||
const combinations = combine(specValues)
|
||||
|
||||
formData.value.skuList = combinations.map((combo, index) => {
|
||||
const specsObj: Record<string, string> = {}
|
||||
validSpecs.forEach((spec, i) => {
|
||||
// 如果规格名称为空，使用临时占位符，确保预览可见
|
||||
// 但注意：这样生成的 sku.specs 可能会包含空键，保存时需由 validateForm 拦截
|
||||
const key = (spec.name && spec.name.trim() !== '') ? spec.name : `(未命名规格${i+1})`
|
||||
specsObj[key] = combo[i]
|
||||
})
|
||||
|
||||
// 保留已有的价格和库存
|
||||
// 匹配逻辑：尝试匹配值的组合，因为 key 可能会变
|
||||
const existing = formData.value.skuList?.find(sku => {
|
||||
const skuValues = Object.values(sku.specs).join(',')
|
||||
const currentValues = Object.values(specsObj).join(',')
|
||||
return skuValues === currentValues
|
||||
})
|
||||
|
||||
return {
|
||||
id: existing?.id || `sku_${Date.now()}_${index}`,
|
||||
specs: specsObj,
|
||||
price: existing?.price || formData.value.price,
|
||||
stock: existing?.stock || 0,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 监听规格变化
|
||||
watch(() => formData.value.specs, () => {
|
||||
generateSkuList()
|
||||
}, { deep: true })
|
||||
|
||||
// 删除 SKU
|
||||
function removeSku(index: number) {
|
||||
formData.value.skuList?.splice(index, 1)
|
||||
}
|
||||
|
||||
// 获取规格键名 (需保持与 generateSkuList 逻辑一致)
|
||||
function getSpecKey(spec: SkuSpec, index: number) {
|
||||
return (spec.name && spec.name.trim() !== '') ? spec.name : `(未命名规格${index + 1})`
|
||||
}
|
||||
|
||||
// 获取 SKU 中有效规格数量，用于显示分隔符
|
||||
function getValidSpecCount(sku: any) {
|
||||
if (!formData.value.specs) return 0
|
||||
return formData.value.specs.filter((s, i) => sku.specs[getSpecKey(s, i)] !== undefined).length
|
||||
}
|
||||
|
||||
// 验证表单
|
||||
function validateForm(): boolean {
|
||||
if (!formData.value.name.trim()) {
|
||||
uni.showToast({ title: '请输入商品名称', icon: 'none' })
|
||||
return false
|
||||
}
|
||||
// 检查是否有未命名的规格
|
||||
if (formData.value.enableSpec && formData.value.specs?.some(s => !s.name || !s.name.trim())) {
|
||||
uni.showToast({ title: '请输入规格名称', icon: 'none' })
|
||||
return false
|
||||
}
|
||||
|
||||
if (!formData.value.categoryId) {
|
||||
uni.showToast({ title: '请选择商品分类', icon: 'none' })
|
||||
return false
|
||||
}
|
||||
if (formData.value.price <= 0) {
|
||||
uni.showToast({ title: '请输入正确的售价', icon: 'none' })
|
||||
return false
|
||||
}
|
||||
if (formData.value.images.length === 0) {
|
||||
uni.showToast({ title: '请上传商品图片', icon: 'none' })
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
// 返回上一页或列表页
|
||||
function goBack() {
|
||||
const pages = getCurrentPages()
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/pagesMerchant/goods/list'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 拦截返回行为 (H5/App)
|
||||
onBackPress((options) => {
|
||||
const pages = getCurrentPages()
|
||||
if (pages.length <= 1) {
|
||||
uni.redirectTo({
|
||||
url: '/pagesMerchant/goods/list'
|
||||
})
|
||||
return true // 阻止默认返回
|
||||
}
|
||||
})
|
||||
|
||||
// 保存商品
|
||||
async function handleSave() {
|
||||
if (!validateForm()) return
|
||||
|
||||
uni.showLoading({ title: '保存中...' })
|
||||
try {
|
||||
await saveMerchantGoods(formData.value)
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
goBack()
|
||||
}, 1500)
|
||||
} catch (error) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '保存失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载时获取参数
|
||||
onLoad((options) => {
|
||||
if (options?.id) {
|
||||
goodsId.value = options.id as string
|
||||
loadGoodsDetail()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="goods-edit-page">
|
||||
<!-- 自定义导航栏 -->
|
||||
<view class="custom-navbar">
|
||||
<view class="navbar-back" @click="goBack">
|
||||
<text class="i-carbon-chevron-left"></text>
|
||||
</view>
|
||||
<text class="navbar-title">编辑商品</text>
|
||||
<view class="navbar-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<view class="form-wrapper">
|
||||
<!-- 基本信息 -->
|
||||
<view class="section">
|
||||
<view class="section-title">基本信息</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label required">商品名称</text>
|
||||
<input v-model="formData.name" placeholder="请输入商品名称" class="input" />
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label required">商品分类</text>
|
||||
<picker class="form-picker" :range="categories" range-key="name" @change="handleCategoryChange">
|
||||
<view class="picker-value">
|
||||
{{ categoryName }}
|
||||
<text class="i-carbon-chevron-right"></text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label">品牌</text>
|
||||
<input v-model="formData.brand" placeholder="请输入品牌（选填）" class="input" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 价格库存 -->
|
||||
<view class="section" v-if="!formData.enableSpec">
|
||||
<view class="section-title">价格库存</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label required">售价(¥)</text>
|
||||
<view class="input-with-unit">
|
||||
|
||||
<input v-model.number="formData.price" type="digit" placeholder="0.00" class="input" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label">成本价(¥)</text>
|
||||
<view class="input-with-unit">
|
||||
<input v-model.number="formData.costPrice" type="digit" placeholder="0.00" class="input" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label required">库存</text>
|
||||
<input v-model.number="formData.stock" type="number" placeholder="0" class="input" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品图片 -->
|
||||
<view class="section">
|
||||
<view class="section-title">商品图片</view>
|
||||
<view class="images-grid">
|
||||
<view v-for="(img, index) in formData.images" :key="index" class="image-item">
|
||||
<image :src="img" mode="aspectFill" />
|
||||
<view class="remove-btn" @click="handleRemoveImage(index)">
|
||||
<text class="i-carbon-close"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="add-image" @click="handleAddImage" v-if="formData.images.length < 9">
|
||||
<text class="i-carbon-add"></text>
|
||||
<text class="tip">添加图片</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品规格 -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">商品规格</text>
|
||||
<switch :checked="formData.enableSpec" @change="handleToggleSpec" color="#ff8f0d" />
|
||||
</view>
|
||||
|
||||
<view v-if="formData.enableSpec" class="specs-container">
|
||||
<view v-for="(spec, specIndex) in formData.specs" :key="specIndex" class="spec-group">
|
||||
<view class="spec-header">
|
||||
<input v-model="spec.name" placeholder="规格名称（如颜色）" class="spec-name-input" />
|
||||
<text class="remove-btn" @click="removeSpec(specIndex)">删除</text>
|
||||
</view>
|
||||
<view class="spec-values">
|
||||
<view v-for="(value, valueIndex) in spec.values" :key="valueIndex" class="spec-value-item">
|
||||
<input v-model="spec.values[valueIndex]" placeholder="规格值" class="spec-value-input" />
|
||||
<text class="i-carbon-close" @click="removeSpecValue(specIndex, valueIndex)" v-if="spec.values.length > 1"></text>
|
||||
</view>
|
||||
<view class="add-value-btn" @click="addSpecValue(specIndex)">
|
||||
<text class="i-carbon-add"></text>
|
||||
<text>添加规格值</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="add-spec-btn" @click="addSpec">
|
||||
<text class="i-carbon-add"></text>
|
||||
<text>添加规格</text>
|
||||
</view>
|
||||
|
||||
<!-- SKU 列表 -->
|
||||
<view v-if="formData.skuList && formData.skuList.length > 0" class="sku-list">
|
||||
<view class="sku-header">
|
||||
<view>规格</view>
|
||||
<view>价格</view>
|
||||
<view>库存</view>
|
||||
<view>操作</view>
|
||||
</view>
|
||||
<view v-for="(sku, index) in formData.skuList" :key="sku.id" class="sku-item">
|
||||
<view class="sku-specs-inputs">
|
||||
<template v-for="(spec, i) in formData.specs" :key="i">
|
||||
<view v-if="sku.specs[getSpecKey(spec, i)] !== undefined" class="spec-input-wrapper">
|
||||
<input
|
||||
v-model="sku.specs[getSpecKey(spec, i)]"
|
||||
class="mini-input"
|
||||
/>
|
||||
<text v-if="i < getValidSpecCount(sku) - 1" class="separator">/</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<input v-model.number="sku.price" type="digit" class="sku-input" placeholder="价格" />
|
||||
<input v-model.number="sku.stock" type="number" class="sku-input" placeholder="库存" />
|
||||
<view class="action-col" @click="removeSku(index)">
|
||||
<text class="delete-text">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 商品描述 -->
|
||||
<view class="section">
|
||||
<view class="section-title">商品描述</view>
|
||||
<textarea
|
||||
v-model="formData.description"
|
||||
placeholder="请输入商品描述"
|
||||
class="textarea"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<view class="footer-bar">
|
||||
<view class="save-btn" @click="handleSave">
|
||||
{{ isEdit ? '保存修改' : '发布商品' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-edit-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 140rpx;
|
||||
width: 100%;
|
||||
max-width: 540px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.custom-navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 88rpx;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
z-index: 999;
|
||||
max-width: 540px;
|
||||
margin: 0 auto;
|
||||
|
||||
.navbar-back {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
.i-carbon-chevron-left {
|
||||
font-size: 40rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.navbar-placeholder {
|
||||
width: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 160rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.required::before {
|
||||
content: '*';
|
||||
color: #fa4350;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.form-picker {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.picker-value {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.input-with-unit {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 4rpx;
|
||||
|
||||
.unit {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.input {
|
||||
text-align: right;
|
||||
flex: unset;
|
||||
width: auto;
|
||||
min-width: 160rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.images-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16rpx;
|
||||
|
||||
.image-item {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 8rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-image {
|
||||
aspect-ratio: 1;
|
||||
background: #f5f5f5;
|
||||
border: 2rpx dashed #ddd;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
|
||||
text {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
|
||||
&:first-child {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.specs-container {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.spec-group {
|
||||
background: #f9f9f9;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.spec-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.spec-name-input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
font-size: 24rpx;
|
||||
color: #fa4350;
|
||||
}
|
||||
}
|
||||
|
||||
.spec-values {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
|
||||
.spec-value-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 8rpx;
|
||||
padding: 12rpx 16rpx;
|
||||
gap: 8rpx;
|
||||
|
||||
.spec-value-input {
|
||||
width: 120rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.add-value-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
padding: 12rpx 16rpx;
|
||||
border: 1rpx dashed #ff8f0d;
|
||||
border-radius: 8rpx;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #ff8f0d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-spec-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
padding: 24rpx;
|
||||
border: 1rpx dashed #ddd;
|
||||
border-radius: 12rpx;
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sku-list {
|
||||
margin-top: 24rpx;
|
||||
background: #f9f9f9;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.sku-header {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||||
padding: 16rpx 20rpx;
|
||||
background: #f0f0f0;
|
||||
|
||||
view {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sku-item {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||||
padding: 20rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
align-items: center;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.sku-specs-inputs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* gap: 4rpx; removed to tighten space */
|
||||
|
||||
.spec-input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mini-input {
|
||||
width: 80rpx; /* narrow input */
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
padding: 4rpx 0;
|
||||
border-bottom: 1rpx dashed #ccc; /* hint it's editable */
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 0 4rpx;
|
||||
color: #999;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sku-input {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
background: #fff;
|
||||
border-radius: 8rpx;
|
||||
padding: 8rpx;
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
|
||||
.action-col {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.delete-text {
|
||||
font-size: 24rpx;
|
||||
color: #fa4350;
|
||||
padding: 8rpx 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
padding: 20rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.footer-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.save-btn {
|
||||
height: 88rpx;
|
||||
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,52 +1,214 @@
|
||||
<script lang="ts" setup>
|
||||
import { useMerchantStore } from '@/store/merchant'
|
||||
import { GoodsStatus, GOODS_STATUS_CONFIG } from '@/typings/merchant'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '商品管理',
|
||||
},
|
||||
})
|
||||
|
||||
// 模拟商品数据
|
||||
const goods = ref([
|
||||
{ id: '1', name: '苹果 iPhone 15 Pro', price: 8999.00, stock: 50, status: 'on' },
|
||||
{ id: '2', name: '华为 Mate 60 Pro', price: 6999.00, stock: 30, status: 'on' },
|
||||
{ id: '3', name: '小米 14 Ultra', price: 5999.00, stock: 0, status: 'off' },
|
||||
])
|
||||
const merchantStore = useMerchantStore()
|
||||
|
||||
function handleEdit(id: string) {
|
||||
uni.navigateTo({ url: `/pagesMerchant/goods/edit?id=${id}` })
|
||||
// Tab 状态
|
||||
const tabs = [
|
||||
{ value: 'all', label: '全部' },
|
||||
{ value: GoodsStatus.ON, label: '上架中' },
|
||||
{ value: GoodsStatus.OFF, label: '已下架' },
|
||||
{ value: 'lowStock', label: '库存预警' },
|
||||
]
|
||||
const currentTab = ref<GoodsStatus | 'all' | 'lowStock'>('all')
|
||||
|
||||
// 搜索
|
||||
const keyword = ref('')
|
||||
|
||||
// 批量选择
|
||||
const selectMode = ref(false)
|
||||
const selectedIds = ref<string[]>([])
|
||||
|
||||
// 加载商品
|
||||
async function loadGoods() {
|
||||
await merchantStore.fetchGoods({
|
||||
status: currentTab.value,
|
||||
keyword: keyword.value,
|
||||
})
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
uni.navigateTo({ url: '/pagesMerchant/goods/edit' })
|
||||
// 切换 Tab
|
||||
function handleTabChange(value: typeof currentTab.value) {
|
||||
currentTab.value = value
|
||||
loadGoods()
|
||||
}
|
||||
|
||||
// 搜索
|
||||
function handleSearch() {
|
||||
loadGoods()
|
||||
}
|
||||
|
||||
// 编辑商品
|
||||
function handleEdit(id?: string) {
|
||||
const url = id ? `/pagesMerchant/goods/edit?id=${id}` : '/pagesMerchant/goods/edit'
|
||||
uni.navigateTo({ url })
|
||||
}
|
||||
|
||||
// 切换上下架
|
||||
async function handleToggleStatus(goods: any) {
|
||||
const newStatus = goods.status === GoodsStatus.ON ? GoodsStatus.OFF : GoodsStatus.ON
|
||||
const action = newStatus === GoodsStatus.ON ? '上架' : '下架'
|
||||
|
||||
uni.showModal({
|
||||
title: `确认${action}`,
|
||||
content: `确定要${action}该商品吗？`,
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
await merchantStore.updateGoodsStatus(goods.id, newStatus)
|
||||
uni.showToast({ title: `${action}成功`, icon: 'success' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 切换选择模式
|
||||
function toggleSelectMode() {
|
||||
selectMode.value = !selectMode.value
|
||||
selectedIds.value = []
|
||||
}
|
||||
|
||||
// 选择商品
|
||||
function toggleSelect(id: string) {
|
||||
const index = selectedIds.value.indexOf(id)
|
||||
if (index > -1) {
|
||||
selectedIds.value.splice(index, 1)
|
||||
} else {
|
||||
selectedIds.value.push(id)
|
||||
}
|
||||
}
|
||||
|
||||
// 批量上下架
|
||||
async function handleBatchAction(status: GoodsStatus) {
|
||||
if (selectedIds.value.length === 0) {
|
||||
uni.showToast({ title: '请选择商品', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
for (const id of selectedIds.value) {
|
||||
await merchantStore.updateGoodsStatus(id, status)
|
||||
}
|
||||
|
||||
uni.showToast({ title: '操作成功', icon: 'success' })
|
||||
selectedIds.value = []
|
||||
selectMode.value = false
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
async function onRefresh() {
|
||||
await loadGoods()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadGoods()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="goods-list-page">
|
||||
<view class="goods-list">
|
||||
<!-- 搜索栏 -->
|
||||
<view class="search-bar">
|
||||
<wd-search
|
||||
v-model="keyword"
|
||||
placeholder="搜索商品名称"
|
||||
@search="handleSearch"
|
||||
@clear="handleSearch"
|
||||
/>
|
||||
<view class="batch-btn" @click="toggleSelectMode">
|
||||
{{ selectMode ? '取消' : '批量' }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Tab 切换 -->
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="item in goods"
|
||||
:key="item.id"
|
||||
class="goods-card"
|
||||
@click="handleEdit(item.id)"
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === tab.value }"
|
||||
@click="handleTabChange(tab.value)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<scroll-view
|
||||
class="goods-list"
|
||||
scroll-y
|
||||
refresher-enabled
|
||||
:refresher-triggered="merchantStore.loading"
|
||||
@refresherrefresh="onRefresh"
|
||||
>
|
||||
<view v-if="merchantStore.goods.length === 0" class="empty">
|
||||
<text class="i-carbon-shopping-bag"></text>
|
||||
<text>暂无商品</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-for="goods in merchantStore.goods"
|
||||
:key="goods.id"
|
||||
class="goods-card"
|
||||
@click="!selectMode && handleEdit(goods.id)"
|
||||
>
|
||||
<!-- 选择框 -->
|
||||
<view
|
||||
v-if="selectMode"
|
||||
class="checkbox"
|
||||
:class="{ checked: selectedIds.includes(goods.id) }"
|
||||
@click.stop="toggleSelect(goods.id)"
|
||||
>
|
||||
<text class="i-carbon-checkmark" v-if="selectedIds.includes(goods.id)"></text>
|
||||
</view>
|
||||
|
||||
<image :src="goods.images[0] || '/static/goods/default.jpg'" class="goods-image" mode="aspectFill" />
|
||||
|
||||
<view class="goods-info">
|
||||
<text class="goods-name">{{ item.name }}</text>
|
||||
<text class="goods-name">{{ goods.name }}</text>
|
||||
<text class="goods-category">{{ goods.categoryName }}</text>
|
||||
|
||||
<view class="goods-meta">
|
||||
<text class="price">¥{{ item.price.toFixed(2) }}</text>
|
||||
<text class="stock" :class="{ warning: item.stock === 0 }">
|
||||
库存：{{ item.stock }}
|
||||
<view class="price-stock">
|
||||
<text class="price">¥{{ goods.price.toFixed(2) }}</text>
|
||||
<text class="stock" :class="{ warning: goods.stock <= 10 }">
|
||||
库存 {{ goods.stock }}
|
||||
</text>
|
||||
</view>
|
||||
<text class="sales">销量 {{ goods.sales }}</text>
|
||||
</view>
|
||||
<view class="goods-status" :class="item.status">
|
||||
{{ item.status === 'on' ? '上架' : '下架' }}
|
||||
</view>
|
||||
|
||||
<view class="goods-actions" v-if="!selectMode">
|
||||
<view
|
||||
class="status-tag"
|
||||
:style="{ background: GOODS_STATUS_CONFIG[goods.status].color + '20', color: GOODS_STATUS_CONFIG[goods.status].color }"
|
||||
>
|
||||
{{ GOODS_STATUS_CONFIG[goods.status].label }}
|
||||
</view>
|
||||
<view class="action-btn" @click.stop="handleToggleStatus(goods)">
|
||||
{{ goods.status === GoodsStatus.ON ? '下架' : '上架' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="footer-bar" v-if="selectMode">
|
||||
<view class="selected-count">已选 {{ selectedIds.length }} 件</view>
|
||||
<view class="actions">
|
||||
<view class="action-btn" @click="handleBatchAction(GoodsStatus.ON)">批量上架</view>
|
||||
<view class="action-btn" @click="handleBatchAction(GoodsStatus.OFF)">批量下架</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 添加按钮 -->
|
||||
<view class="add-btn" @click="handleAdd">
|
||||
<view class="add-btn" @click="handleEdit()" v-if="!selectMode">
|
||||
<text class="i-carbon-add"></text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -56,47 +218,159 @@ function handleAdd() {
|
||||
.goods-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 540px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 20rpx;
|
||||
padding-bottom: 120rpx;
|
||||
background: #fff;
|
||||
|
||||
:deep(.wd-search) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.batch-btn {
|
||||
font-size: 26rpx;
|
||||
color: #ff8f0d;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
padding: 0 10rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 24rpx 0;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
color: #ff8f0d;
|
||||
font-weight: 600;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40rpx;
|
||||
height: 4rpx;
|
||||
background: #ff8f0d;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
flex: 1;
|
||||
padding-bottom: 160rpx;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
|
||||
text:first-child {
|
||||
font-size: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-card {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
padding: 20rpx;
|
||||
margin: 20rpx;
|
||||
|
||||
.checkbox {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border: 2rpx solid #ddd;
|
||||
border-radius: 50%;
|
||||
margin-right: 16rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
|
||||
&.checked {
|
||||
background: #ff8f0d;
|
||||
border-color: #ff8f0d;
|
||||
|
||||
text {
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #f5f5f5;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.goods-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
font-weight: 500;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.goods-category {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.goods-meta {
|
||||
.price-stock {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 4rpx;
|
||||
|
||||
.price {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
font-size: 32rpx;
|
||||
color: #ff8f0d;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stock {
|
||||
font-size: 24rpx;
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
|
||||
&.warning {
|
||||
@@ -104,21 +378,64 @@ function handleAdd() {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-status {
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
.sales {
|
||||
font-size: 22rpx;
|
||||
|
||||
&.on {
|
||||
background: rgba(0, 192, 90, 0.1);
|
||||
color: #00c05a;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.off {
|
||||
background: rgba(153, 153, 153, 0.1);
|
||||
color: #999;
|
||||
.goods-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-left: 16rpx;
|
||||
|
||||
.status-tag {
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 12rpx 24rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.selected-count {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
|
||||
.action-btn {
|
||||
padding: 16rpx 32rpx;
|
||||
background: #ff8f0d;
|
||||
border-radius: 32rpx;
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
185
src/pagesMerchant/me/account.vue
Normal file
185
src/pagesMerchant/me/account.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore } from '@/store/user'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '账号安全',
|
||||
},
|
||||
})
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 菜单列表
|
||||
const menuList = [
|
||||
{
|
||||
icon: 'i-carbon-locked',
|
||||
label: '修改密码',
|
||||
value: '',
|
||||
action: 'changePassword',
|
||||
},
|
||||
{
|
||||
icon: 'i-carbon-phone',
|
||||
label: '绑定手机',
|
||||
value: userStore.userInfo?.phone ? `已绑定 ${userStore.userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}` : '未绑定',
|
||||
action: 'bindPhone',
|
||||
},
|
||||
{
|
||||
icon: 'i-carbon-email',
|
||||
label: '绑定邮箱',
|
||||
value: '未绑定',
|
||||
action: 'bindEmail',
|
||||
},
|
||||
]
|
||||
|
||||
// 处理菜单点击
|
||||
function handleMenu(action: string) {
|
||||
switch (action) {
|
||||
case 'changePassword':
|
||||
uni.showToast({ title: '功能开发中', icon: 'none' })
|
||||
break
|
||||
case 'bindPhone':
|
||||
uni.showToast({ title: '功能开发中', icon: 'none' })
|
||||
break
|
||||
case 'bindEmail':
|
||||
uni.showToast({ title: '功能开发中', icon: 'none' })
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 注销账号
|
||||
function handleDeleteAccount() {
|
||||
uni.showModal({
|
||||
title: '警告',
|
||||
content: '注销账号后，所有数据将被清除且无法恢复，确定要注销吗？',
|
||||
confirmColor: '#fa4350',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({ title: '功能开发中', icon: 'none' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="account-page">
|
||||
<view class="menu-list">
|
||||
<view
|
||||
v-for="item in menuList"
|
||||
:key="item.label"
|
||||
class="menu-item"
|
||||
@click="handleMenu(item.action)"
|
||||
>
|
||||
<view class="menu-left">
|
||||
<text :class="item.icon" class="menu-icon"></text>
|
||||
<text class="menu-label">{{ item.label }}</text>
|
||||
</view>
|
||||
<view class="menu-right">
|
||||
<text class="menu-value">{{ item.value }}</text>
|
||||
<text class="i-carbon-chevron-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delete-btn" @click="handleDeleteAccount">
|
||||
注销账号
|
||||
</view>
|
||||
|
||||
<view class="tips">
|
||||
<text class="i-carbon-warning"></text>
|
||||
<text>注销账号后，您的所有数据将被永久删除且无法恢复，请谨慎操作</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.account-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20rpx;
|
||||
width: 100%;
|
||||
max-width: 540px;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 32rpx 24rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.menu-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
|
||||
.menu-icon {
|
||||
font-size: 40rpx;
|
||||
color: #ff8f0d;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
|
||||
.menu-value {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
font-size: 28rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
margin-top: 60rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #fa4350;
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12rpx;
|
||||
margin-top: 20rpx;
|
||||
padding: 0 16rpx;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
flex: 1;
|
||||
|
||||
&:first-child {
|
||||
color: #ff8f0d;
|
||||
flex: none;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore, CLIENT_TYPE_CONFIG, ClientType } from '@/store/user'
|
||||
import { useMerchantStore } from '@/store/merchant'
|
||||
import { tabbarStore } from '@/tabbar/store'
|
||||
|
||||
definePage({
|
||||
@@ -9,15 +10,32 @@ definePage({
|
||||
})
|
||||
|
||||
const userStore = useUserStore()
|
||||
const merchantStore = useMerchantStore()
|
||||
const config = CLIENT_TYPE_CONFIG[ClientType.MERCHANT]
|
||||
|
||||
// 菜单列表
|
||||
const menuList = [
|
||||
{ icon: 'i-carbon-settings', label: '店铺设置' },
|
||||
{ icon: 'i-carbon-customer-service', label: '客服中心' },
|
||||
{ icon: 'i-carbon-store', label: '店铺设置', path: '/pagesMerchant/me/shop' },
|
||||
{ icon: 'i-carbon-locked', label: '账号安全', path: '/pagesMerchant/me/account' },
|
||||
{ icon: 'i-carbon-notification', label: '消息中心', count: 3 },
|
||||
{ icon: 'i-carbon-help', label: '帮助中心' },
|
||||
{ icon: 'i-carbon-information', label: '关于我们' },
|
||||
]
|
||||
|
||||
// 加载数据
|
||||
async function loadData() {
|
||||
await merchantStore.fetchStats()
|
||||
await merchantStore.fetchShopInfo()
|
||||
}
|
||||
|
||||
// 菜单跳转
|
||||
function handleMenu(item: any) {
|
||||
if (item.path) {
|
||||
uni.navigateTo({ url: item.path })
|
||||
}
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
function handleLogout() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
@@ -31,31 +49,64 @@ function handleLogout() {
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="me-page">
|
||||
<!-- 用户信息 -->
|
||||
<!-- 用户信息卡片 -->
|
||||
<view class="user-card" :style="{ background: config.color }">
|
||||
<view class="user-info">
|
||||
<view class="avatar">
|
||||
<image :src="userStore.userInfo?.avatar || '/static/images/avatar.jpg'" mode="aspectFill"></image>
|
||||
<image :src="userStore.userInfo?.avatar || '/static/images/avatar.jpg'" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="info">
|
||||
<text class="nickname">{{ userStore.userInfo?.nickname || '商家用户' }}</text>
|
||||
<text class="nickname">{{ merchantStore.shopInfo?.name || userStore.userInfo?.nickname || '商家用户' }}</text>
|
||||
<view class="tags">
|
||||
<text class="tag">{{ config.label }}</text>
|
||||
<text class="tag" v-if="merchantStore.shopInfo">已认证</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据统计 -->
|
||||
<view class="stats" v-if="merchantStore.stats">
|
||||
<view class="stat-item">
|
||||
<text class="value">{{ merchantStore.stats.todayOrders }}</text>
|
||||
<text class="label">今日订单</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="value">{{ merchantStore.stats.totalGoods }}</text>
|
||||
<text class="label">商品数量</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="value">¥{{ (merchantStore.stats.todaySales / 100).toFixed(0) }}</text>
|
||||
<text class="label">今日销售</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 菜单列表 -->
|
||||
<view class="menu-list">
|
||||
<view v-for="item in menuList" :key="item.label" class="menu-item">
|
||||
<view
|
||||
v-for="item in menuList"
|
||||
:key="item.label"
|
||||
class="menu-item"
|
||||
@click="handleMenu(item)"
|
||||
>
|
||||
<view class="menu-left">
|
||||
<text :class="item.icon" class="menu-icon"></text>
|
||||
<text class="menu-label">{{ item.label }}</text>
|
||||
</view>
|
||||
<view class="menu-right">
|
||||
<view v-if="item.count" class="badge">{{ item.count }}</view>
|
||||
<text class="i-carbon-chevron-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退出登录 -->
|
||||
<view class="logout-btn" @click="handleLogout">退出登录</view>
|
||||
@@ -66,13 +117,19 @@ function handleLogout() {
|
||||
.me-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
width: 100%;
|
||||
max-width: 540px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
padding: 60rpx 30rpx 40rpx;
|
||||
padding: 40rpx 30rpx 30rpx;
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
@@ -88,22 +145,55 @@ function handleLogout() {
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
|
||||
.nickname {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
|
||||
.tag {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 0;
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
|
||||
.value {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 22rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
@@ -115,7 +205,7 @@ function handleLogout() {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
padding: 32rpx 24rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
@@ -125,11 +215,11 @@ function handleLogout() {
|
||||
.menu-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
gap: 20rpx;
|
||||
|
||||
.menu-icon {
|
||||
font-size: 40rpx;
|
||||
color: #666;
|
||||
color: #ff8f0d;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
@@ -137,6 +227,30 @@ function handleLogout() {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
|
||||
.badge {
|
||||
min-width: 36rpx;
|
||||
height: 36rpx;
|
||||
background: #fa4350;
|
||||
border-radius: 18rpx;
|
||||
padding: 0 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -144,7 +258,7 @@ function handleLogout() {
|
||||
margin: 40rpx 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
padding: 32rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #fa4350;
|
||||
|
||||
246
src/pagesMerchant/me/shop.vue
Normal file
246
src/pagesMerchant/me/shop.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<script lang="ts" setup>
|
||||
import { useMerchantStore } from '@/store/merchant'
|
||||
import { updateShopInfo as apiUpdateShopInfo } from '@/pagesMerchant/api'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '店铺设置',
|
||||
},
|
||||
})
|
||||
|
||||
const merchantStore = useMerchantStore()
|
||||
|
||||
// 表单数据
|
||||
const formData = ref({
|
||||
name: '',
|
||||
phone: '',
|
||||
address: '',
|
||||
businessHours: '',
|
||||
description: '',
|
||||
})
|
||||
|
||||
// 加载店铺信息
|
||||
async function loadShopInfo() {
|
||||
await merchantStore.fetchShopInfo()
|
||||
if (merchantStore.shopInfo) {
|
||||
formData.value = {
|
||||
name: merchantStore.shopInfo.name,
|
||||
phone: merchantStore.shopInfo.phone,
|
||||
address: merchantStore.shopInfo.address,
|
||||
businessHours: merchantStore.shopInfo.businessHours,
|
||||
description: merchantStore.shopInfo.description || '',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 选择头像
|
||||
function handleChooseAvatar() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
// 实际项目中这里需要上传图片
|
||||
uni.showToast({ title: '头像已选择', icon: 'success' })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 保存
|
||||
async function handleSave() {
|
||||
if (!formData.value.name.trim()) {
|
||||
uni.showToast({ title: '请输入店铺名称', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading({ title: '保存中...' })
|
||||
try {
|
||||
await apiUpdateShopInfo(formData.value)
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||||
} catch (error) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '保存失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadShopInfo()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="shop-page">
|
||||
<view class="form-wrapper">
|
||||
<!-- 店铺头像 -->
|
||||
<view class="avatar-section" @click="handleChooseAvatar">
|
||||
<text class="label">店铺头像</text>
|
||||
<view class="avatar">
|
||||
<image :src="merchantStore.shopInfo?.logo || '/static/images/shop-logo.jpg'" mode="aspectFill" />
|
||||
<text class="i-carbon-camera"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 表单 -->
|
||||
<view class="form-section">
|
||||
<view class="form-item">
|
||||
<text class="label">店铺名称</text>
|
||||
<input v-model="formData.name" placeholder="请输入店铺名称" class="input" />
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label">联系电话</text>
|
||||
<input v-model="formData.phone" type="tel" placeholder="请输入联系电话" class="input" />
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label">店铺地址</text>
|
||||
<input v-model="formData.address" placeholder="请输入店铺地址" class="input" />
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label">营业时间</text>
|
||||
<input v-model="formData.businessHours" placeholder="如：09:00 - 22:00" class="input" />
|
||||
</view>
|
||||
|
||||
<view class="form-item textarea-item">
|
||||
<text class="label">店铺简介</text>
|
||||
<textarea v-model="formData.description" placeholder="请输入店铺简介" class="textarea" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<view class="footer-bar">
|
||||
<view class="save-btn" @click="handleSave">保存</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.shop-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 140rpx;
|
||||
width: 100%;
|
||||
max-width: 540px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
text {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-section {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 24rpx;
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 28rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 160rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.textarea-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.label {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.save-btn {
|
||||
height: 88rpx;
|
||||
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
92
src/pagesMerchant/mock/finance.ts
Normal file
92
src/pagesMerchant/mock/finance.ts
Normal file
@@ -0,0 +1,92 @@
|
||||
/**
|
||||
* 商户端财务数据 Mock
|
||||
*/
|
||||
import type {
|
||||
FinanceOverview,
|
||||
Transaction,
|
||||
Settlement,
|
||||
WithdrawRecord,
|
||||
} from '@/typings/merchant'
|
||||
import {
|
||||
TransactionType,
|
||||
SettlementStatus,
|
||||
WithdrawStatus,
|
||||
} from '@/typings/merchant'
|
||||
|
||||
export const mockFinanceOverview: FinanceOverview = {
|
||||
balance: 125680.50,
|
||||
pendingSettlement: 23500.00,
|
||||
monthIncome: 89600.00,
|
||||
totalIncome: 568900.00,
|
||||
}
|
||||
|
||||
export const mockTransactions: Transaction[] = [
|
||||
{
|
||||
id: '1',
|
||||
type: TransactionType.INCOME,
|
||||
amount: 2999.00,
|
||||
balance: 125680.50,
|
||||
orderNo: 'M202312170001',
|
||||
remark: '订单收入',
|
||||
createTime: '2024-12-17 10:31:00',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
type: TransactionType.WITHDRAW,
|
||||
amount: -5000.00,
|
||||
balance: 122681.50,
|
||||
remark: '提现到银行卡',
|
||||
createTime: '2024-12-16 15:00:00',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
type: TransactionType.INCOME,
|
||||
amount: 1590.00,
|
||||
balance: 127681.50,
|
||||
orderNo: 'M202312170002',
|
||||
remark: '订单收入',
|
||||
createTime: '2024-12-17 09:46:00',
|
||||
},
|
||||
]
|
||||
|
||||
export const mockSettlements: Settlement[] = [
|
||||
{
|
||||
id: '1',
|
||||
settlementNo: 'S202312150001',
|
||||
amount: 35680.00,
|
||||
orderCount: 128,
|
||||
status: SettlementStatus.SETTLED,
|
||||
period: '2024-12-01 ~ 2024-12-15',
|
||||
settledTime: '2024-12-16 10:00:00',
|
||||
createTime: '2024-12-15 23:59:59',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
settlementNo: 'S202312310001',
|
||||
amount: 23500.00,
|
||||
orderCount: 86,
|
||||
status: SettlementStatus.PENDING,
|
||||
period: '2024-12-16 ~ 2024-12-31',
|
||||
createTime: '2024-12-17 00:00:00',
|
||||
},
|
||||
]
|
||||
|
||||
export const mockWithdrawRecords: WithdrawRecord[] = [
|
||||
{
|
||||
id: '1',
|
||||
amount: 5000.00,
|
||||
bankName: '中国工商银行',
|
||||
bankAccount: '**** **** **** 1234',
|
||||
status: WithdrawStatus.COMPLETED,
|
||||
applyTime: '2024-12-15 10:00:00',
|
||||
completeTime: '2024-12-16 15:00:00',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
amount: 10000.00,
|
||||
bankName: '中国建设银行',
|
||||
bankAccount: '**** **** **** 5678',
|
||||
status: WithdrawStatus.PENDING,
|
||||
applyTime: '2024-12-17 09:00:00',
|
||||
},
|
||||
]
|
||||
82
src/pagesMerchant/mock/goods.ts
Normal file
82
src/pagesMerchant/mock/goods.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
/**
|
||||
* 商户端商品数据 Mock
|
||||
*/
|
||||
import type { MerchantGoods } from '@/typings/merchant'
|
||||
import { GoodsStatus } from '@/typings/merchant'
|
||||
|
||||
export const mockMerchantGoods: MerchantGoods[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: '苹果 iPhone 15 Pro',
|
||||
categoryId: '1',
|
||||
categoryName: '手机',
|
||||
brand: 'Apple',
|
||||
price: 8999.00,
|
||||
costPrice: 7500.00,
|
||||
stock: 50,
|
||||
sales: 128,
|
||||
status: GoodsStatus.ON,
|
||||
images: ['/static/goods/iphone15.jpg'],
|
||||
description: '全新 iPhone 15 Pro，搭载 A17 Pro 芯片',
|
||||
specs: [
|
||||
{ name: '颜色', values: ['黑色', '白色', '蓝色'] },
|
||||
{ name: '存储', values: ['128GB', '256GB', '512GB'] },
|
||||
],
|
||||
skuList: [
|
||||
{ id: 'sku1', specs: { '颜色': '黑色', '存储': '128GB' }, price: 7999, stock: 20, image: '' },
|
||||
{ id: 'sku2', specs: { '颜色': '黑色', '存储': '256GB' }, price: 8999, stock: 15, image: '' },
|
||||
{ id: 'sku3', specs: { '颜色': '白色', '存储': '128GB' }, price: 7999, stock: 10, image: '' },
|
||||
{ id: 'sku4', specs: { '颜色': '白色', '存储': '256GB' }, price: 8999, stock: 5, image: '' },
|
||||
],
|
||||
createTime: '2024-12-01 10:00:00',
|
||||
updateTime: '2024-12-17 10:00:00',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '华为 Mate 60 Pro',
|
||||
categoryId: '1',
|
||||
categoryName: '手机',
|
||||
brand: 'HUAWEI',
|
||||
price: 6999.00,
|
||||
costPrice: 5800.00,
|
||||
stock: 30,
|
||||
sales: 86,
|
||||
status: GoodsStatus.ON,
|
||||
images: ['/static/goods/mate60.jpg'],
|
||||
description: '华为 Mate 60 Pro，搭载麒麟 9000S 芯片',
|
||||
createTime: '2024-12-02 10:00:00',
|
||||
updateTime: '2024-12-17 10:00:00',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '小米 14 Ultra',
|
||||
categoryId: '1',
|
||||
categoryName: '手机',
|
||||
brand: 'Xiaomi',
|
||||
price: 5999.00,
|
||||
costPrice: 4800.00,
|
||||
stock: 0,
|
||||
sales: 56,
|
||||
status: GoodsStatus.SOLD_OUT,
|
||||
images: ['/static/goods/mi14.jpg'],
|
||||
description: '小米 14 Ultra，徕卡影像旗舰',
|
||||
createTime: '2024-12-03 10:00:00',
|
||||
updateTime: '2024-12-17 10:00:00',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'AirPods Pro 2',
|
||||
categoryId: '2',
|
||||
categoryName: '耳机',
|
||||
brand: 'Apple',
|
||||
price: 1899.00,
|
||||
costPrice: 1500.00,
|
||||
stock: 100,
|
||||
sales: 256,
|
||||
status: GoodsStatus.ON,
|
||||
images: ['/static/goods/airpods.jpg'],
|
||||
description: 'AirPods Pro 第二代，主动降噪',
|
||||
createTime: '2024-12-04 10:00:00',
|
||||
updateTime: '2024-12-17 10:00:00',
|
||||
},
|
||||
]
|
||||
8
src/pagesMerchant/mock/index.ts
Normal file
8
src/pagesMerchant/mock/index.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* 商户端 Mock 数据统一导出
|
||||
*/
|
||||
export * from './stats'
|
||||
export * from './order'
|
||||
export * from './goods'
|
||||
export * from './finance'
|
||||
export * from './shop'
|
||||
150
src/pagesMerchant/mock/order.ts
Normal file
150
src/pagesMerchant/mock/order.ts
Normal file
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
* 商户端订单数据 Mock
|
||||
*/
|
||||
import type { MerchantOrder } from '@/typings/merchant'
|
||||
import { OrderStatus } from '@/typings/merchant'
|
||||
|
||||
export const mockMerchantOrders: MerchantOrder[] = [
|
||||
{
|
||||
id: '1',
|
||||
orderNo: 'M202312170001',
|
||||
customerName: '张三',
|
||||
customerPhone: '138****8000',
|
||||
status: OrderStatus.PENDING,
|
||||
amount: 2999.00,
|
||||
freight: 0,
|
||||
payAmount: 2999.00,
|
||||
remark: '请尽快发货',
|
||||
goods: [
|
||||
{
|
||||
id: 'g1',
|
||||
goodsId: '101',
|
||||
name: '苹果 iPhone 15 Pro 256GB',
|
||||
image: '/static/goods/iphone15.jpg',
|
||||
skuName: '黑色 256GB',
|
||||
price: 2999.00,
|
||||
quantity: 1,
|
||||
amount: 2999.00,
|
||||
},
|
||||
],
|
||||
address: {
|
||||
name: '张三',
|
||||
phone: '13800138000',
|
||||
province: '广东省',
|
||||
city: '广州市',
|
||||
district: '天河区',
|
||||
detail: '体育西路123号',
|
||||
},
|
||||
createTime: '2024-12-17 10:30:00',
|
||||
payTime: '2024-12-17 10:31:00',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
orderNo: 'M202312170002',
|
||||
customerName: '李四',
|
||||
customerPhone: '139****9000',
|
||||
status: OrderStatus.SHIPPING,
|
||||
amount: 1580.00,
|
||||
freight: 10,
|
||||
payAmount: 1590.00,
|
||||
goods: [
|
||||
{
|
||||
id: 'g2',
|
||||
goodsId: '102',
|
||||
name: '华为 Mate 60 Pro',
|
||||
image: '/static/goods/mate60.jpg',
|
||||
skuName: '白色 512GB',
|
||||
price: 1580.00,
|
||||
quantity: 1,
|
||||
amount: 1580.00,
|
||||
},
|
||||
],
|
||||
address: {
|
||||
name: '李四',
|
||||
phone: '13900139000',
|
||||
province: '广东省',
|
||||
city: '深圳市',
|
||||
district: '南山区',
|
||||
detail: '科技园南路456号',
|
||||
},
|
||||
createTime: '2024-12-17 09:45:00',
|
||||
payTime: '2024-12-17 09:46:00',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
orderNo: 'M202312170003',
|
||||
customerName: '王五',
|
||||
customerPhone: '137****7000',
|
||||
status: OrderStatus.SHIPPED,
|
||||
amount: 456.50,
|
||||
freight: 0,
|
||||
payAmount: 456.50,
|
||||
goods: [
|
||||
{
|
||||
id: 'g3',
|
||||
goodsId: '103',
|
||||
name: '小米 14 Ultra',
|
||||
image: '/static/goods/mi14.jpg',
|
||||
skuName: '黑色 256GB',
|
||||
price: 456.50,
|
||||
quantity: 1,
|
||||
amount: 456.50,
|
||||
},
|
||||
],
|
||||
address: {
|
||||
name: '王五',
|
||||
phone: '13700137000',
|
||||
province: '广东省',
|
||||
city: '佛山市',
|
||||
district: '禅城区',
|
||||
detail: '祖庙路789号',
|
||||
},
|
||||
logistics: {
|
||||
company: '顺丰速运',
|
||||
trackingNo: 'SF1234567890',
|
||||
status: '运输中',
|
||||
traces: [
|
||||
{ time: '2024-12-17 14:00:00', content: '快件已到达【广州转运中心】' },
|
||||
{ time: '2024-12-17 10:00:00', content: '快件已从【深圳宝安区】发出' },
|
||||
{ time: '2024-12-17 08:20:00', content: '快件已揽收' },
|
||||
],
|
||||
},
|
||||
createTime: '2024-12-17 08:20:00',
|
||||
payTime: '2024-12-17 08:21:00',
|
||||
shipTime: '2024-12-17 08:30:00',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
orderNo: 'M202312170004',
|
||||
customerName: '赵六',
|
||||
customerPhone: '136****6000',
|
||||
status: OrderStatus.COMPLETED,
|
||||
amount: 888.00,
|
||||
freight: 0,
|
||||
payAmount: 888.00,
|
||||
goods: [
|
||||
{
|
||||
id: 'g4',
|
||||
goodsId: '104',
|
||||
name: 'AirPods Pro 2',
|
||||
image: '/static/goods/airpods.jpg',
|
||||
skuName: '默认',
|
||||
price: 888.00,
|
||||
quantity: 1,
|
||||
amount: 888.00,
|
||||
},
|
||||
],
|
||||
address: {
|
||||
name: '赵六',
|
||||
phone: '13600136000',
|
||||
province: '广东省',
|
||||
city: '东莞市',
|
||||
district: '南城区',
|
||||
detail: '宏图路100号',
|
||||
},
|
||||
createTime: '2024-12-16 15:00:00',
|
||||
payTime: '2024-12-16 15:01:00',
|
||||
shipTime: '2024-12-16 16:00:00',
|
||||
completeTime: '2024-12-17 10:00:00',
|
||||
},
|
||||
]
|
||||
14
src/pagesMerchant/mock/shop.ts
Normal file
14
src/pagesMerchant/mock/shop.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* 商户端店铺数据 Mock
|
||||
*/
|
||||
import type { ShopInfo } from '@/typings/merchant'
|
||||
|
||||
export const mockShopInfo: ShopInfo = {
|
||||
id: 'shop_001',
|
||||
name: '数字广东旗舰店',
|
||||
logo: '/static/images/shop-logo.jpg',
|
||||
phone: '020-12345678',
|
||||
address: '广东省广州市天河区体育西路123号',
|
||||
businessHours: '09:00 - 22:00',
|
||||
description: '专注数码产品销售，正品保障',
|
||||
}
|
||||
13
src/pagesMerchant/mock/stats.ts
Normal file
13
src/pagesMerchant/mock/stats.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* 商户端统计数据 Mock
|
||||
*/
|
||||
import type { MerchantStats } from '@/typings/merchant'
|
||||
|
||||
export const mockMerchantStats: MerchantStats = {
|
||||
todayOrders: 128,
|
||||
pendingOrders: 23,
|
||||
todaySales: 15680.50,
|
||||
totalGoods: 356,
|
||||
lowStockGoods: 12,
|
||||
pendingSettlement: 8560.00,
|
||||
}
|
||||
742
src/pagesMerchant/order/detail.vue
Normal file
742
src/pagesMerchant/order/detail.vue
Normal file
@@ -0,0 +1,742 @@
|
||||
<script lang="ts" setup>
|
||||
import { useMerchantStore } from '@/store/merchant'
|
||||
import { OrderStatus, ORDER_STATUS_CONFIG } from '@/typings/merchant'
|
||||
import { shipOrder, addMerchantRemark } from '@/pagesMerchant/api'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '订单详情',
|
||||
},
|
||||
})
|
||||
|
||||
const merchantStore = useMerchantStore()
|
||||
|
||||
// 页面参数
|
||||
const orderId = ref('')
|
||||
|
||||
// 发货弹窗
|
||||
const showShipModal = ref(false)
|
||||
const shipForm = ref({
|
||||
company: '',
|
||||
trackingNo: '',
|
||||
})
|
||||
|
||||
// 备注弹窗
|
||||
const showRemarkModal = ref(false)
|
||||
const remarkInput = ref('')
|
||||
|
||||
// 物流公司列表
|
||||
const logisticsCompanies = [
|
||||
'顺丰速运',
|
||||
'中通快递',
|
||||
'圆通速递',
|
||||
'韵达快递',
|
||||
'申通快递',
|
||||
'邮政EMS',
|
||||
]
|
||||
|
||||
// 加载订单详情
|
||||
async function loadOrderDetail() {
|
||||
if (orderId.value) {
|
||||
console.log('Loading order detail:', orderId.value)
|
||||
await merchantStore.fetchOrderDetail(orderId.value)
|
||||
console.log('Order loaded:', merchantStore.currentOrder)
|
||||
}
|
||||
}
|
||||
|
||||
// 确认订单
|
||||
async function handleConfirm() {
|
||||
if (!merchantStore.currentOrder) return
|
||||
|
||||
uni.showModal({
|
||||
title: '确认订单',
|
||||
content: '确认接受此订单？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
await merchantStore.confirmOrder(merchantStore.currentOrder!.id)
|
||||
uni.showToast({ title: '确认成功', icon: 'success' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 打开发货弹窗
|
||||
function openShipModal() {
|
||||
shipForm.value = { company: '', trackingNo: '' }
|
||||
showShipModal.value = true
|
||||
}
|
||||
|
||||
// 确认发货
|
||||
async function handleShip() {
|
||||
if (!shipForm.value.company) {
|
||||
uni.showToast({ title: '请选择物流公司', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!shipForm.value.trackingNo) {
|
||||
uni.showToast({ title: '请输入运单号', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
await shipOrder(merchantStore.currentOrder!.id, shipForm.value)
|
||||
showShipModal.value = false
|
||||
uni.showToast({ title: '发货成功', icon: 'success' })
|
||||
loadOrderDetail()
|
||||
}
|
||||
|
||||
// 添加备注
|
||||
async function handleAddRemark() {
|
||||
if (!remarkInput.value.trim()) {
|
||||
uni.showToast({ title: '请输入备注内容', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
await addMerchantRemark(merchantStore.currentOrder!.id, remarkInput.value)
|
||||
showRemarkModal.value = false
|
||||
uni.showToast({ title: '备注添加成功', icon: 'success' })
|
||||
loadOrderDetail()
|
||||
}
|
||||
|
||||
// 复制订单号
|
||||
function copyOrderNo() {
|
||||
uni.setClipboardData({
|
||||
data: merchantStore.currentOrder?.orderNo || '',
|
||||
success: () => {
|
||||
uni.showToast({ title: '已复制', icon: 'success' })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 拨打电话
|
||||
function callCustomer() {
|
||||
const phone = merchantStore.currentOrder?.address.phone
|
||||
if (phone) {
|
||||
uni.makePhoneCall({ phoneNumber: phone })
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载时获取参数
|
||||
onLoad((options) => {
|
||||
console.log('Order detail page loaded with options:', options)
|
||||
if (options?.id) {
|
||||
orderId.value = options.id as string
|
||||
loadOrderDetail()
|
||||
} else {
|
||||
console.error('No order id provided')
|
||||
uni.showToast({ title: '订单ID缺失', icon: 'none' })
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="order-detail-page" v-if="merchantStore.currentOrder">
|
||||
<view class="order-wrapper">
|
||||
<!-- 订单状态 -->
|
||||
<view class="status-card" :style="{ background: ORDER_STATUS_CONFIG[merchantStore.currentOrder.status].color }">
|
||||
<text class="status-text">{{ ORDER_STATUS_CONFIG[merchantStore.currentOrder.status].label }}</text>
|
||||
<text class="status-desc" v-if="merchantStore.currentOrder.status === OrderStatus.PENDING">
|
||||
请尽快确认订单
|
||||
</text>
|
||||
<text class="status-desc" v-else-if="merchantStore.currentOrder.status === OrderStatus.SHIPPING">
|
||||
请尽快发货
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 收货地址 -->
|
||||
<view class="section address-section">
|
||||
<view class="address-header">
|
||||
<text class="i-carbon-location"></text>
|
||||
<text class="title">收货地址</text>
|
||||
<text class="call-btn" @click="callCustomer">
|
||||
<text class="i-carbon-phone"></text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="address-content">
|
||||
<view class="contact">
|
||||
<text class="name">{{ merchantStore.currentOrder.address.name }}</text>
|
||||
<text class="phone">{{ merchantStore.currentOrder.address.phone }}</text>
|
||||
</view>
|
||||
<text class="detail">
|
||||
{{ merchantStore.currentOrder.address.province }}
|
||||
{{ merchantStore.currentOrder.address.city }}
|
||||
{{ merchantStore.currentOrder.address.district }}
|
||||
{{ merchantStore.currentOrder.address.detail }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 物流信息 -->
|
||||
<view class="section" v-if="merchantStore.currentOrder.logistics">
|
||||
<view class="section-header">
|
||||
<text class="i-carbon-delivery"></text>
|
||||
<text class="title">物流信息</text>
|
||||
</view>
|
||||
<view class="logistics-info">
|
||||
<view class="logistics-company">
|
||||
<text>{{ merchantStore.currentOrder.logistics.company }}</text>
|
||||
<text class="tracking-no">{{ merchantStore.currentOrder.logistics.trackingNo }}</text>
|
||||
</view>
|
||||
<view class="logistics-traces">
|
||||
<view
|
||||
v-for="(trace, index) in merchantStore.currentOrder.logistics.traces"
|
||||
:key="index"
|
||||
class="trace-item"
|
||||
:class="{ active: index === 0 }"
|
||||
>
|
||||
<view class="trace-dot"></view>
|
||||
<view class="trace-content">
|
||||
<text class="trace-text">{{ trace.content }}</text>
|
||||
<text class="trace-time">{{ trace.time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品清单 -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<text class="i-carbon-shopping-bag"></text>
|
||||
<text class="title">商品清单</text>
|
||||
</view>
|
||||
<view class="goods-list">
|
||||
<view v-for="goods in merchantStore.currentOrder.goods" :key="goods.id" class="goods-item">
|
||||
<image :src="goods.image" class="goods-image" mode="aspectFill" />
|
||||
<view class="goods-info">
|
||||
<text class="goods-name">{{ goods.name }}</text>
|
||||
<text class="goods-sku">{{ goods.skuName }}</text>
|
||||
<view class="goods-bottom">
|
||||
<text class="price">¥{{ goods.price.toFixed(2) }}</text>
|
||||
<text class="quantity">x{{ goods.quantity }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<text class="i-carbon-document"></text>
|
||||
<text class="title">订单信息</text>
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">订单编号</text>
|
||||
<view class="value" @click="copyOrderNo">
|
||||
<text>{{ merchantStore.currentOrder.orderNo }}</text>
|
||||
<text class="i-carbon-copy"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">下单时间</text>
|
||||
<text class="value">{{ merchantStore.currentOrder.createTime }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="merchantStore.currentOrder.payTime">
|
||||
<text class="label">支付时间</text>
|
||||
<text class="value">{{ merchantStore.currentOrder.payTime }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="merchantStore.currentOrder.remark">
|
||||
<text class="label">买家备注</text>
|
||||
<text class="value remark">{{ merchantStore.currentOrder.remark }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="merchantStore.currentOrder.merchantRemark">
|
||||
<text class="label">商家备注</text>
|
||||
<text class="value remark">{{ merchantStore.currentOrder.merchantRemark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 金额信息 -->
|
||||
<view class="section amount-section">
|
||||
<view class="amount-item">
|
||||
<text class="label">商品金额</text>
|
||||
<text class="value">¥{{ merchantStore.currentOrder.amount.toFixed(2) }}</text>
|
||||
</view>
|
||||
<view class="amount-item">
|
||||
<text class="label">运费</text>
|
||||
<text class="value">¥{{ merchantStore.currentOrder.freight.toFixed(2) }}</text>
|
||||
</view>
|
||||
<view class="amount-item total">
|
||||
<text class="label">实付金额</text>
|
||||
<text class="value">¥{{ merchantStore.currentOrder.payAmount.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="footer-bar">
|
||||
<view class="action-btn" @click="showRemarkModal = true">
|
||||
添加备注
|
||||
</view>
|
||||
<view
|
||||
v-if="merchantStore.currentOrder.status === OrderStatus.PENDING"
|
||||
class="action-btn primary"
|
||||
@click="handleConfirm"
|
||||
>
|
||||
确认订单
|
||||
</view>
|
||||
<view
|
||||
v-if="merchantStore.currentOrder.status === OrderStatus.SHIPPING"
|
||||
class="action-btn primary"
|
||||
@click="openShipModal"
|
||||
>
|
||||
立即发货
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 发货弹窗 -->
|
||||
<wd-popup v-model="showShipModal" position="bottom" custom-style="border-radius: 24rpx 24rpx 0 0;">
|
||||
<view class="ship-modal">
|
||||
<view class="modal-header">
|
||||
<text class="title">填写物流信息</text>
|
||||
<text class="close" @click="showShipModal = false">×</text>
|
||||
</view>
|
||||
<view class="modal-content">
|
||||
<view class="form-item">
|
||||
<text class="label">物流公司</text>
|
||||
<picker :range="logisticsCompanies" @change="(e: any) => shipForm.company = logisticsCompanies[e.detail.value]">
|
||||
<view class="picker-value">
|
||||
{{ shipForm.company || '请选择物流公司' }}
|
||||
<text class="i-carbon-chevron-right"></text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">运单号</text>
|
||||
<input v-model="shipForm.trackingNo" placeholder="请输入运单号" class="input" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-footer">
|
||||
<view class="btn primary" @click="handleShip">确认发货</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<!-- 备注弹窗 -->
|
||||
<wd-popup v-model="showRemarkModal" position="bottom" custom-style="border-radius: 24rpx 24rpx 0 0;">
|
||||
<view class="remark-modal">
|
||||
<view class="modal-header">
|
||||
<text class="title">添加商家备注</text>
|
||||
<text class="close" @click="showRemarkModal = false">×</text>
|
||||
</view>
|
||||
<view class="modal-content">
|
||||
<textarea v-model="remarkInput" placeholder="请输入备注内容" class="textarea" />
|
||||
</view>
|
||||
<view class="modal-footer">
|
||||
<view class="btn primary" @click="handleAddRemark">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 120rpx;
|
||||
width: 100%;
|
||||
max-width: 540px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.order-wrapper {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
padding: 40rpx 30rpx;
|
||||
border-radius: 16rpx;
|
||||
color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.status-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.status-desc {
|
||||
font-size: 26rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
text:first-child {
|
||||
font-size: 32rpx;
|
||||
color: #ff8f0d;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address-section {
|
||||
.address-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.call-btn {
|
||||
margin-left: auto;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: #ff8f0d;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address-content {
|
||||
.contact {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 8rpx;
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logistics-info {
|
||||
.logistics-company {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tracking-no {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.logistics-traces {
|
||||
.trace-item {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
padding-left: 8rpx;
|
||||
|
||||
.trace-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background: #ddd;
|
||||
border-radius: 50%;
|
||||
margin-top: 8rpx;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 5rpx;
|
||||
top: 20rpx;
|
||||
width: 2rpx;
|
||||
height: 60rpx;
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
&.active .trace-dot {
|
||||
background: #ff8f0d;
|
||||
}
|
||||
|
||||
&:last-child .trace-dot::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.trace-content {
|
||||
flex: 1;
|
||||
padding-bottom: 24rpx;
|
||||
|
||||
.trace-text {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.trace-time {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
.goods-item {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
|
||||
& + .goods-item {
|
||||
margin-top: 20rpx;
|
||||
padding-top: 20rpx;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.goods-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.goods-sku {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.goods-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.price {
|
||||
font-size: 28rpx;
|
||||
color: #ff8f0d;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 16rpx 0;
|
||||
|
||||
& + .info-item {
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
|
||||
&.remark {
|
||||
color: #ff8f0d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.amount-section {
|
||||
.amount-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12rpx 0;
|
||||
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&.total {
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
padding-top: 20rpx;
|
||||
margin-top: 8rpx;
|
||||
|
||||
.label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #ff8f0d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 20rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.action-btn {
|
||||
padding: 20rpx 40rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
color: #666;
|
||||
|
||||
&.primary {
|
||||
background: #ff8f0d;
|
||||
border-color: #ff8f0d;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ship-modal, .remark-modal {
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.close {
|
||||
font-size: 48rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 44rpx;
|
||||
font-size: 30rpx;
|
||||
|
||||
&.primary {
|
||||
background: #ff8f0d;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.picker-value {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.input {
|
||||
padding: 24rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
padding: 24rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,52 +1,171 @@
|
||||
<script lang="ts" setup>
|
||||
import { useMerchantStore } from '@/store/merchant'
|
||||
import { OrderStatus, ORDER_STATUS_CONFIG } from '@/typings/merchant'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '订单管理',
|
||||
},
|
||||
})
|
||||
|
||||
// 模拟订单数据
|
||||
const orders = ref([
|
||||
{ id: '1', orderNo: 'M202312170001', customer: '张三', amount: 299.00, status: 'pending', time: '10:30' },
|
||||
{ id: '2', orderNo: 'M202312170002', customer: '李四', amount: 1580.00, status: 'processing', time: '09:45' },
|
||||
{ id: '3', orderNo: 'M202312170003', customer: '王五', amount: 456.50, status: 'completed', time: '08:20' },
|
||||
])
|
||||
const merchantStore = useMerchantStore()
|
||||
|
||||
const statusMap: Record<string, { text: string; color: string }> = {
|
||||
pending: { text: '待处理', color: '#ff8f0d' },
|
||||
processing: { text: '处理中', color: '#4d80f0' },
|
||||
completed: { text: '已完成', color: '#00c05a' },
|
||||
// Tab 状态
|
||||
const tabs = [
|
||||
{ value: 'all', label: '全部' },
|
||||
{ value: OrderStatus.PENDING, label: '待确认' },
|
||||
{ value: OrderStatus.SHIPPING, label: '待发货' },
|
||||
{ value: OrderStatus.SHIPPED, label: '已发货' },
|
||||
{ value: OrderStatus.COMPLETED, label: '已完成' },
|
||||
]
|
||||
const currentTab = ref<OrderStatus | 'all'>('all')
|
||||
|
||||
// 搜索
|
||||
const keyword = ref('')
|
||||
|
||||
// 加载订单
|
||||
async function loadOrders() {
|
||||
await merchantStore.fetchOrders({
|
||||
status: currentTab.value,
|
||||
keyword: keyword.value,
|
||||
})
|
||||
}
|
||||
|
||||
function handleOrder(id: string) {
|
||||
// 切换 Tab
|
||||
function handleTabChange(value: OrderStatus | 'all') {
|
||||
currentTab.value = value
|
||||
loadOrders()
|
||||
}
|
||||
|
||||
// 搜索
|
||||
function handleSearch() {
|
||||
loadOrders()
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
function handleDetail(id: string) {
|
||||
uni.navigateTo({ url: `/pagesMerchant/order/detail?id=${id}` })
|
||||
}
|
||||
|
||||
// 快捷确认订单
|
||||
async function handleConfirm(id: string) {
|
||||
uni.showModal({
|
||||
title: '确认订单',
|
||||
content: '确认接受此订单？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
await merchantStore.confirmOrder(id)
|
||||
uni.showToast({ title: '确认成功', icon: 'success' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
async function onRefresh() {
|
||||
await loadOrders()
|
||||
}
|
||||
|
||||
// 页面加载
|
||||
onMounted(() => {
|
||||
loadOrders()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="order-list-page">
|
||||
<view class="order-list">
|
||||
<!-- 搜索栏 -->
|
||||
<view class="search-bar">
|
||||
<wd-search
|
||||
v-model="keyword"
|
||||
placeholder="搜索订单号/客户名称"
|
||||
@search="handleSearch"
|
||||
@clear="handleSearch"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- Tab 切换 -->
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="order in orders"
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === tab.value }"
|
||||
@click="handleTabChange(tab.value)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<scroll-view
|
||||
class="order-list"
|
||||
scroll-y
|
||||
refresher-enabled
|
||||
:refresher-triggered="merchantStore.loading"
|
||||
@refresherrefresh="onRefresh"
|
||||
>
|
||||
<view v-if="merchantStore.orders.length === 0" class="empty">
|
||||
<text class="i-carbon-document"></text>
|
||||
<text>暂无订单</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-for="order in merchantStore.orders"
|
||||
:key="order.id"
|
||||
class="order-card"
|
||||
@click="handleOrder(order.id)"
|
||||
@click="handleDetail(order.id)"
|
||||
>
|
||||
<view class="order-header">
|
||||
<text class="order-no">{{ order.orderNo }}</text>
|
||||
<text class="order-status" :style="{ color: statusMap[order.status].color }">
|
||||
{{ statusMap[order.status].text }}
|
||||
<text class="order-status" :style="{ color: ORDER_STATUS_CONFIG[order.status].color }">
|
||||
{{ ORDER_STATUS_CONFIG[order.status].label }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="order-body">
|
||||
<text class="customer">客户：{{ order.customer }}</text>
|
||||
<text class="amount">¥{{ order.amount.toFixed(2) }}</text>
|
||||
|
||||
<view class="order-goods">
|
||||
<view v-for="goods in order.goods" :key="goods.id" class="goods-item">
|
||||
<image :src="goods.image" class="goods-image" mode="aspectFill" />
|
||||
<view class="goods-info">
|
||||
<text class="goods-name">{{ goods.name }}</text>
|
||||
<text class="goods-sku">{{ goods.skuName }}</text>
|
||||
<view class="goods-price">
|
||||
<text class="price">¥{{ goods.price.toFixed(2) }}</text>
|
||||
<text class="quantity">x{{ goods.quantity }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-footer">
|
||||
<text class="time">今天 {{ order.time }}</text>
|
||||
<view class="customer">
|
||||
<text class="i-carbon-user"></text>
|
||||
<text>{{ order.customerName }}</text>
|
||||
</view>
|
||||
<view class="amount">
|
||||
共{{ order.goods.length }}件 实付 <text class="total">¥{{ order.payAmount.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="order-actions" v-if="order.status === OrderStatus.PENDING || order.status === OrderStatus.SHIPPING">
|
||||
<view
|
||||
v-if="order.status === OrderStatus.PENDING"
|
||||
class="action-btn primary"
|
||||
@click.stop="handleConfirm(order.id)"
|
||||
>
|
||||
确认订单
|
||||
</view>
|
||||
<view
|
||||
v-if="order.status === OrderStatus.SHIPPING"
|
||||
class="action-btn primary"
|
||||
@click.stop="handleDetail(order.id)"
|
||||
>
|
||||
去发货
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -54,30 +173,81 @@ function handleOrder(id: string) {
|
||||
.order-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
padding: 0 10rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 24rpx 0;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
color: #ff8f0d;
|
||||
font-weight: 600;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40rpx;
|
||||
height: 4rpx;
|
||||
background: #ff8f0d;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-list {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
|
||||
text:first-child {
|
||||
font-size: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
|
||||
margin: 20rpx;
|
||||
.order-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.order-no {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
@@ -86,29 +256,114 @@ function handleOrder(id: string) {
|
||||
}
|
||||
}
|
||||
|
||||
.order-body {
|
||||
.order-goods {
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.goods-item {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
|
||||
& + .goods-item {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.goods-name {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-sku {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.customer {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
.price {
|
||||
font-size: 28rpx;
|
||||
color: #ff8f0d;
|
||||
}
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.order-footer {
|
||||
.time {
|
||||
.quantity {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 16rpx;
|
||||
|
||||
.customer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
|
||||
.total {
|
||||
font-size: 30rpx;
|
||||
color: #ff8f0d;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 16rpx;
|
||||
margin-top: 20rpx;
|
||||
padding-top: 20rpx;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
|
||||
.action-btn {
|
||||
padding: 12rpx 32rpx;
|
||||
border-radius: 32rpx;
|
||||
font-size: 24rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
color: #666;
|
||||
|
||||
&.primary {
|
||||
background: #ff8f0d;
|
||||
border-color: #ff8f0d;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
164
src/store/merchant.ts
Normal file
164
src/store/merchant.ts
Normal file
@@ -0,0 +1,164 @@
|
||||
/**
|
||||
* 商户端状态管理
|
||||
*/
|
||||
import { defineStore } from 'pinia'
|
||||
import type {
|
||||
MerchantStats,
|
||||
MerchantOrder,
|
||||
MerchantGoods,
|
||||
FinanceOverview,
|
||||
ShopInfo,
|
||||
} from '@/typings/merchant'
|
||||
import { OrderStatus, GoodsStatus } from '@/typings/merchant'
|
||||
import * as api from '@/pagesMerchant/api'
|
||||
|
||||
export const useMerchantStore = defineStore('merchant', {
|
||||
state: () => ({
|
||||
// 统计数据
|
||||
stats: null as MerchantStats | null,
|
||||
|
||||
// 订单相关
|
||||
orders: [] as MerchantOrder[],
|
||||
orderTotal: 0,
|
||||
currentOrder: null as MerchantOrder | null,
|
||||
|
||||
// 商品相关
|
||||
goods: [] as MerchantGoods[],
|
||||
goodsTotal: 0,
|
||||
currentGoods: null as MerchantGoods | null,
|
||||
|
||||
// 财务相关
|
||||
financeOverview: null as FinanceOverview | null,
|
||||
|
||||
// 店铺相关
|
||||
shopInfo: null as ShopInfo | null,
|
||||
|
||||
// 加载状态
|
||||
loading: false,
|
||||
}),
|
||||
|
||||
getters: {
|
||||
// 待处理订单数
|
||||
pendingOrderCount(state): number {
|
||||
return state.orders.filter(o =>
|
||||
o.status === OrderStatus.PENDING || o.status === OrderStatus.SHIPPING
|
||||
).length
|
||||
},
|
||||
|
||||
// 上架商品数
|
||||
onlineGoodsCount(state): number {
|
||||
return state.goods.filter(g => g.status === GoodsStatus.ON).length
|
||||
},
|
||||
|
||||
// 库存预警商品数
|
||||
lowStockGoodsCount(state): number {
|
||||
return state.goods.filter(g => g.stock <= 10).length
|
||||
},
|
||||
},
|
||||
|
||||
actions: {
|
||||
// ==================== 统计 ====================
|
||||
async fetchStats() {
|
||||
this.loading = true
|
||||
try {
|
||||
this.stats = await api.getMerchantStats()
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
// ==================== 订单 ====================
|
||||
async fetchOrders(params: { status?: OrderStatus | 'all'; keyword?: string } = {}) {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await api.getMerchantOrders(params)
|
||||
this.orders = res.list
|
||||
this.orderTotal = res.total
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
async fetchOrderDetail(id: string) {
|
||||
this.loading = true
|
||||
try {
|
||||
this.currentOrder = await api.getMerchantOrderDetail(id)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
async confirmOrder(id: string) {
|
||||
await api.confirmOrder(id)
|
||||
// 更新本地状态
|
||||
const order = this.orders.find(o => o.id === id)
|
||||
if (order) order.status = OrderStatus.SHIPPING
|
||||
if (this.currentOrder?.id === id) {
|
||||
this.currentOrder.status = OrderStatus.SHIPPING
|
||||
}
|
||||
},
|
||||
|
||||
async shipOrder(id: string, data: { company: string; trackingNo: string }) {
|
||||
await api.shipOrder(id, data)
|
||||
const order = this.orders.find(o => o.id === id)
|
||||
if (order) order.status = OrderStatus.SHIPPED
|
||||
if (this.currentOrder?.id === id) {
|
||||
this.currentOrder.status = OrderStatus.SHIPPED
|
||||
}
|
||||
},
|
||||
|
||||
// ==================== 商品 ====================
|
||||
async fetchGoods(params: { status?: GoodsStatus | 'all' | 'lowStock'; keyword?: string } = {}) {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await api.getMerchantGoodsList(params)
|
||||
this.goods = res.list
|
||||
this.goodsTotal = res.total
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
async fetchGoodsDetail(id: string) {
|
||||
this.loading = true
|
||||
try {
|
||||
this.currentGoods = await api.getMerchantGoodsDetail(id)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
async updateGoodsStatus(id: string, status: GoodsStatus) {
|
||||
await api.updateGoodsStatus(id, status)
|
||||
const goods = this.goods.find(g => g.id === id)
|
||||
if (goods) goods.status = status
|
||||
},
|
||||
|
||||
// ==================== 财务 ====================
|
||||
async fetchFinanceOverview() {
|
||||
this.loading = true
|
||||
try {
|
||||
this.financeOverview = await api.getFinanceOverview()
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
// ==================== 店铺 ====================
|
||||
async fetchShopInfo() {
|
||||
this.loading = true
|
||||
try {
|
||||
this.shopInfo = await api.getShopInfo()
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
async updateShopInfo(data: Partial<ShopInfo>) {
|
||||
await api.updateShopInfo(data)
|
||||
if (this.shopInfo) {
|
||||
Object.assign(this.shopInfo, data)
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -32,10 +32,17 @@ function handleClick(index: number) {
|
||||
}
|
||||
const url = tabbarList[index].pagePath
|
||||
tabbarStore.setCurIdx(index)
|
||||
if (tabbarCacheEnable) {
|
||||
|
||||
// 判断是否为分包页面（分包页面路径以 /pages 开头的是主包，否则是分包）
|
||||
const isSubPackagePage = !url.startsWith('/pages/')
|
||||
|
||||
if (isSubPackagePage) {
|
||||
// 分包页面使用 reLaunch 跳转
|
||||
uni.reLaunch({ url })
|
||||
} else if (tabbarCacheEnable) {
|
||||
// 主包 tabbar 页面使用 switchTab
|
||||
uni.switchTab({ url })
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
uni.navigateTo({ url })
|
||||
}
|
||||
}
|
||||
|
||||
249
src/typings/merchant.ts
Normal file
249
src/typings/merchant.ts
Normal file
@@ -0,0 +1,249 @@
|
||||
/**
|
||||
* 商户端类型定义
|
||||
*/
|
||||
|
||||
// ==================== 订单相关 ====================
|
||||
|
||||
/** 订单状态枚举 */
|
||||
export enum OrderStatus {
|
||||
PENDING = 'pending', // 待确认
|
||||
CONFIRMED = 'confirmed', // 已确认
|
||||
SHIPPING = 'shipping', // 待发货
|
||||
SHIPPED = 'shipped', // 已发货
|
||||
COMPLETED = 'completed', // 已完成
|
||||
CANCELLED = 'cancelled', // 已取消
|
||||
}
|
||||
|
||||
/** 订单状态配置 */
|
||||
export const ORDER_STATUS_CONFIG = {
|
||||
[OrderStatus.PENDING]: { label: '待确认', color: '#ff8f0d' },
|
||||
[OrderStatus.CONFIRMED]: { label: '已确认', color: '#4d80f0' },
|
||||
[OrderStatus.SHIPPING]: { label: '待发货', color: '#ff8f0d' },
|
||||
[OrderStatus.SHIPPED]: { label: '已发货', color: '#4d80f0' },
|
||||
[OrderStatus.COMPLETED]: { label: '已完成', color: '#00c05a' },
|
||||
[OrderStatus.CANCELLED]: { label: '已取消', color: '#999' },
|
||||
}
|
||||
|
||||
/** 订单商品 */
|
||||
export interface OrderGoods {
|
||||
id: string
|
||||
goodsId: string
|
||||
name: string
|
||||
image: string
|
||||
skuName: string // 规格名称
|
||||
price: number
|
||||
quantity: number
|
||||
amount: number
|
||||
}
|
||||
|
||||
/** 物流信息 */
|
||||
export interface LogisticsInfo {
|
||||
company: string // 物流公司
|
||||
trackingNo: string // 运单号
|
||||
status: string // 物流状态
|
||||
traces: LogisticsTrace[]
|
||||
}
|
||||
|
||||
/** 物流轨迹 */
|
||||
export interface LogisticsTrace {
|
||||
time: string
|
||||
content: string
|
||||
}
|
||||
|
||||
/** 收货地址 */
|
||||
export interface OrderAddress {
|
||||
name: string
|
||||
phone: string
|
||||
province: string
|
||||
city: string
|
||||
district: string
|
||||
detail: string
|
||||
}
|
||||
|
||||
/** 商户订单 */
|
||||
export interface MerchantOrder {
|
||||
id: string
|
||||
orderNo: string
|
||||
customerName: string
|
||||
customerPhone: string
|
||||
customerAvatar?: string
|
||||
status: OrderStatus
|
||||
amount: number // 订单总金额
|
||||
freight: number // 运费
|
||||
payAmount: number // 实付金额
|
||||
remark?: string // 订单备注
|
||||
merchantRemark?: string // 商家备注
|
||||
goods: OrderGoods[]
|
||||
address: OrderAddress
|
||||
logistics?: LogisticsInfo
|
||||
createTime: string
|
||||
payTime?: string
|
||||
shipTime?: string
|
||||
completeTime?: string
|
||||
}
|
||||
|
||||
// ==================== 商品相关 ====================
|
||||
|
||||
/** 商品状态枚举 */
|
||||
export enum GoodsStatus {
|
||||
ON = 'on', // 上架
|
||||
OFF = 'off', // 下架
|
||||
SOLD_OUT = 'sold_out', // 售罄
|
||||
}
|
||||
|
||||
/** 商品状态配置 */
|
||||
export const GOODS_STATUS_CONFIG = {
|
||||
[GoodsStatus.ON]: { label: '上架', color: '#00c05a' },
|
||||
[GoodsStatus.OFF]: { label: '下架', color: '#999' },
|
||||
[GoodsStatus.SOLD_OUT]: { label: '售罄', color: '#fa4350' },
|
||||
}
|
||||
|
||||
/** SKU 规格选项 */
|
||||
export interface SkuSpec {
|
||||
name: string // 规格名称，如 "颜色"
|
||||
values: string[] // 规格值列表，如 ["红色", "蓝色"]
|
||||
}
|
||||
|
||||
/** SKU 项 */
|
||||
export interface SkuItem {
|
||||
id: string
|
||||
specs: Record<string, string> // 规格组合，如 { 颜色: "红色", 尺码: "M" }
|
||||
price: number
|
||||
stock: number
|
||||
image?: string
|
||||
}
|
||||
|
||||
/** 商户商品 */
|
||||
export interface MerchantGoods {
|
||||
id: string
|
||||
name: string
|
||||
categoryId: string
|
||||
categoryName: string
|
||||
brand?: string
|
||||
price: number // 售价（单规格时使用）
|
||||
costPrice: number // 成本价
|
||||
stock: number // 库存（单规格时使用）
|
||||
sales: number // 销量
|
||||
status: GoodsStatus
|
||||
images: string[] // 商品图片
|
||||
description: string // 商品描述
|
||||
specs?: SkuSpec[] // 规格定义
|
||||
skuList?: SkuItem[] // SKU 列表
|
||||
createTime: string
|
||||
updateTime: string
|
||||
}
|
||||
|
||||
/** 商品表单数据 */
|
||||
export interface GoodsFormData {
|
||||
id?: string
|
||||
name: string
|
||||
categoryId: string
|
||||
brand?: string
|
||||
price: number
|
||||
costPrice: number
|
||||
stock: number
|
||||
images: string[]
|
||||
description: string
|
||||
enableSpec: boolean // 是否启用多规格
|
||||
specs?: SkuSpec[]
|
||||
skuList?: SkuItem[]
|
||||
}
|
||||
|
||||
// ==================== 财务相关 ====================
|
||||
|
||||
/** 财务概览 */
|
||||
export interface FinanceOverview {
|
||||
balance: number // 可用余额
|
||||
pendingSettlement: number // 待结算
|
||||
monthIncome: number // 本月收入
|
||||
totalIncome: number // 累计收入
|
||||
}
|
||||
|
||||
/** 交易类型 */
|
||||
export enum TransactionType {
|
||||
INCOME = 'income', // 收入
|
||||
WITHDRAW = 'withdraw', // 提现
|
||||
REFUND = 'refund', // 退款
|
||||
}
|
||||
|
||||
/** 交易记录 */
|
||||
export interface Transaction {
|
||||
id: string
|
||||
type: TransactionType
|
||||
amount: number
|
||||
balance: number // 交易后余额
|
||||
orderNo?: string // 关联订单号
|
||||
remark: string
|
||||
createTime: string
|
||||
}
|
||||
|
||||
/** 结算状态 */
|
||||
export enum SettlementStatus {
|
||||
PENDING = 'pending', // 待结算
|
||||
SETTLED = 'settled', // 已结算
|
||||
}
|
||||
|
||||
/** 结算记录 */
|
||||
export interface Settlement {
|
||||
id: string
|
||||
settlementNo: string
|
||||
amount: number
|
||||
orderCount: number // 订单数量
|
||||
status: SettlementStatus
|
||||
period: string // 结算周期，如 "2024-12-01 ~ 2024-12-15"
|
||||
settledTime?: string // 结算时间
|
||||
createTime: string
|
||||
}
|
||||
|
||||
/** 提现状态 */
|
||||
export enum WithdrawStatus {
|
||||
PENDING = 'pending', // 审核中
|
||||
APPROVED = 'approved', // 审核通过
|
||||
REJECTED = 'rejected', // 审核拒绝
|
||||
COMPLETED = 'completed', // 已到账
|
||||
}
|
||||
|
||||
/** 提现状态配置 */
|
||||
export const WITHDRAW_STATUS_CONFIG = {
|
||||
[WithdrawStatus.PENDING]: { label: '审核中', color: '#ff8f0d' },
|
||||
[WithdrawStatus.APPROVED]: { label: '审核通过', color: '#4d80f0' },
|
||||
[WithdrawStatus.REJECTED]: { label: '审核拒绝', color: '#fa4350' },
|
||||
[WithdrawStatus.COMPLETED]: { label: '已到账', color: '#00c05a' },
|
||||
}
|
||||
|
||||
/** 提现记录 */
|
||||
export interface WithdrawRecord {
|
||||
id: string
|
||||
amount: number
|
||||
bankName: string
|
||||
bankAccount: string
|
||||
status: WithdrawStatus
|
||||
rejectReason?: string // 拒绝原因
|
||||
applyTime: string
|
||||
completeTime?: string
|
||||
}
|
||||
|
||||
// ==================== 店铺相关 ====================
|
||||
|
||||
/** 店铺信息 */
|
||||
export interface ShopInfo {
|
||||
id: string
|
||||
name: string
|
||||
logo: string
|
||||
phone: string
|
||||
address: string
|
||||
businessHours: string // 营业时间
|
||||
description?: string
|
||||
}
|
||||
|
||||
// ==================== 统计相关 ====================
|
||||
|
||||
/** 商户统计数据 */
|
||||
export interface MerchantStats {
|
||||
todayOrders: number // 今日订单
|
||||
pendingOrders: number // 待处理订单
|
||||
todaySales: number // 今日销售额
|
||||
totalGoods: number // 商品总数
|
||||
lowStockGoods: number // 库存预警商品数
|
||||
pendingSettlement: number // 待结算金额
|
||||
}
|
||||
Reference in New Issue
Block a user