Commit 222ec30f by licheng

chore: 删除mall模块

parent 7905e573
import request from '@/config/axios'
export interface BannerVO {
id: number
title: string
picUrl: string
status: number
url: string
position: number
sort: number
memo: string
}
// 查询Banner管理列表
export const getBannerPage = async (params) => {
return await request.get({ url: `/promotion/banner/page`, params })
}
// 查询Banner管理详情
export const getBanner = async (id: number) => {
return await request.get({ url: `/promotion/banner/get?id=` + id })
}
// 新增Banner管理
export const createBanner = async (data: BannerVO) => {
return await request.post({ url: `/promotion/banner/create`, data })
}
// 修改Banner管理
export const updateBanner = async (data: BannerVO) => {
return await request.put({ url: `/promotion/banner/update`, data })
}
// 删除Banner管理
export const deleteBanner = async (id: number) => {
return await request.delete({ url: `/promotion/banner/delete?id=` + id })
}
import request from '@/config/axios'
/**
* 商品品牌
*/
export interface BrandVO {
/**
* 品牌编号
*/
id?: number
/**
* 品牌名称
*/
name: string
/**
* 品牌图片
*/
picUrl: string
/**
* 品牌排序
*/
sort?: number
/**
* 品牌描述
*/
description?: string
/**
* 开启状态
*/
status: number
}
// 创建商品品牌
export const createBrand = (data: BrandVO) => {
return request.post({ url: '/product/brand/create', data })
}
// 更新商品品牌
export const updateBrand = (data: BrandVO) => {
return request.put({ url: '/product/brand/update', data })
}
// 删除商品品牌
export const deleteBrand = (id: number) => {
return request.delete({ url: `/product/brand/delete?id=${id}` })
}
// 获得商品品牌
export const getBrand = (id: number) => {
return request.get({ url: `/product/brand/get?id=${id}` })
}
// 获得商品品牌列表
export const getBrandParam = (params: PageParam) => {
return request.get({ url: '/product/brand/page', params })
}
// 获得商品品牌精简信息列表
export const getSimpleBrandList = () => {
return request.get({ url: '/product/brand/list-all-simple' })
}
import request from '@/config/axios'
/**
* 产品分类
*/
export interface CategoryVO {
/**
* 分类编号
*/
id?: number
/**
* 父分类编号
*/
parentId?: number
/**
* 分类名称
*/
name: string
/**
* 移动端分类图
*/
picUrl: string
/**
* 分类排序
*/
sort: number
/**
* 开启状态
*/
status: number
}
// 创建商品分类
export const createCategory = (data: CategoryVO) => {
return request.post({ url: '/product/category/create', data })
}
// 更新商品分类
export const updateCategory = (data: CategoryVO) => {
return request.put({ url: '/product/category/update', data })
}
// 删除商品分类
export const deleteCategory = (id: number) => {
return request.delete({ url: `/product/category/delete?id=${id}` })
}
// 获得商品分类
export const getCategory = (id: number) => {
return request.get({ url: `/product/category/get?id=${id}` })
}
// 获得商品分类列表
export const getCategoryList = (params: any) => {
return request.get({ url: '/product/category/list', params })
}
import request from '@/config/axios'
export interface CommentVO {
id: number
userId: number
userNickname: string
userAvatar: string
anonymous: boolean
orderId: number
orderItemId: number
spuId: number
spuName: string
skuId: number
visible: boolean
scores: number
descriptionScores: number
benefitScores: number
content: string
picUrls: string
replyStatus: boolean
replyUserId: number
replyContent: string
replyTime: Date
}
// 查询商品评论列表
export const getCommentPage = async (params) => {
return await request.get({ url: `/product/comment/page`, params })
}
// 查询商品评论详情
export const getComment = async (id: number) => {
return await request.get({ url: `/product/comment/get?id=` + id })
}
// 添加自评
export const createComment = async (data: CommentVO) => {
return await request.post({ url: `/product/comment/create`, data })
}
// 显示 / 隐藏评论
export const updateCommentVisible = async (data: any) => {
return await request.put({ url: `/product/comment/update-visible`, data })
}
// 商家回复
export const replyComment = async (data: any) => {
return await request.put({ url: `/product/comment/reply`, data })
}
import request from '@/config/axios'
export interface Favorite {
id?: number
userId?: string // 用户编号
spuId?: number | null // 商品 SPU 编号
}
// 获得 ProductFavorite 列表
export const getFavoritePage = (params: PageParam) => {
return request.get({ url: '/product/favorite/page', params })
}
import request from '@/config/axios'
/**
* 获得商品浏览记录分页
*
* @param params 请求参数
*/
export const getBrowseHistoryPage = (params: any) => {
return request.get({ url: '/product/browse-history/page', params })
}
import request from '@/config/axios'
/**
* 商品属性
*/
export interface PropertyVO {
id?: number
/** 名称 */
name: string
/** 备注 */
remark?: string
}
/**
* 属性值
*/
export interface PropertyValueVO {
id?: number
/** 属性项的编号 */
propertyId?: number
/** 名称 */
name: string
/** 备注 */
remark?: string
}
// ------------------------ 属性项 -------------------
// 创建属性项
export const createProperty = (data: PropertyVO) => {
return request.post({ url: '/product/property/create', data })
}
// 更新属性项
export const updateProperty = (data: PropertyVO) => {
return request.put({ url: '/product/property/update', data })
}
// 删除属性项
export const deleteProperty = (id: number) => {
return request.delete({ url: `/product/property/delete?id=${id}` })
}
// 获得属性项
export const getProperty = (id: number): Promise<PropertyVO> => {
return request.get({ url: `/product/property/get?id=${id}` })
}
// 获得属性项分页
export const getPropertyPage = (params: PageParam) => {
return request.get({ url: '/product/property/page', params })
}
// 获得属性项精简列表
export const getPropertySimpleList = (): Promise<PropertyVO[]> => {
return request.get({ url: '/product/property/simple-list' })
}
// ------------------------ 属性值 -------------------
// 获得属性值分页
export const getPropertyValuePage = (params: PageParam & any) => {
return request.get({ url: '/product/property/value/page', params })
}
// 获得属性值
export const getPropertyValue = (id: number): Promise<PropertyValueVO> => {
return request.get({ url: `/product/property/value/get?id=${id}` })
}
// 创建属性值
export const createPropertyValue = (data: PropertyValueVO) => {
return request.post({ url: '/product/property/value/create', data })
}
// 更新属性值
export const updatePropertyValue = (data: PropertyValueVO) => {
return request.put({ url: '/product/property/value/update', data })
}
// 删除属性值
export const deletePropertyValue = (id: number) => {
return request.delete({ url: `/product/property/value/delete?id=${id}` })
}
// 获得属性值精简列表
export const getPropertyValueSimpleList = (propertyId: number): Promise<PropertyValueVO[]> => {
return request.get({ url: '/product/property/value/simple-list', params: { propertyId } })
}
import request from '@/config/axios'
export interface Property {
propertyId?: number // 属性编号
propertyName?: string // 属性名称
valueId?: number // 属性值编号
valueName?: string // 属性值名称
}
export interface Sku {
id?: number // 商品 SKU 编号
name?: string // 商品 SKU 名称
spuId?: number // SPU 编号
properties?: Property[] // 属性数组
price?: number | string // 商品价格
marketPrice?: number | string // 市场价
costPrice?: number | string // 成本价
barCode?: string // 商品条码
picUrl?: string // 图片地址
stock?: number // 库存
weight?: number // 商品重量,单位:kg 千克
volume?: number // 商品体积,单位:m^3 平米
firstBrokeragePrice?: number | string // 一级分销的佣金
secondBrokeragePrice?: number | string // 二级分销的佣金
salesCount?: number // 商品销量
}
export interface GiveCouponTemplate {
id?: number
name?: string // 优惠券名称
}
export interface Spu {
id?: number
name?: string // 商品名称
categoryId?: number // 商品分类
keyword?: string // 关键字
unit?: number | undefined // 单位
picUrl?: string // 商品封面图
sliderPicUrls?: string[] // 商品轮播图
introduction?: string // 商品简介
deliveryTypes?: number[] // 配送方式
deliveryTemplateId?: number | undefined // 运费模版
brandId?: number // 商品品牌编号
specType?: boolean // 商品规格
subCommissionType?: boolean // 分销类型
skus?: Sku[] // sku数组
description?: string // 商品详情
sort?: number // 商品排序
giveIntegral?: number // 赠送积分
virtualSalesCount?: number // 虚拟销量
price?: number // 商品价格
combinationPrice?: number // 商品拼团价格
seckillPrice?: number // 商品秒杀价格
salesCount?: number // 商品销量
marketPrice?: number // 市场价
costPrice?: number // 成本价
stock?: number // 商品库存
createTime?: Date // 商品创建时间
status?: number // 商品状态
}
// 获得 Spu 列表
export const getSpuPage = (params: PageParam) => {
return request.get({ url: '/product/spu/page', params })
}
// 获得 Spu 列表 tabsCount
export const getTabsCount = () => {
return request.get({ url: '/product/spu/get-count' })
}
// 创建商品 Spu
export const createSpu = (data: Spu) => {
return request.post({ url: '/product/spu/create', data })
}
// 更新商品 Spu
export const updateSpu = (data: Spu) => {
return request.put({ url: '/product/spu/update', data })
}
// 更新商品 Spu status
export const updateStatus = (data: { id: number; status: number }) => {
return request.put({ url: '/product/spu/update-status', data })
}
// 获得商品 Spu
export const getSpu = (id: number) => {
return request.get({ url: `/product/spu/get-detail?id=${id}` })
}
// 获得商品 Spu 详情列表
export const getSpuDetailList = (ids: number[]) => {
return request.get({ url: `/product/spu/list?spuIds=${ids}` })
}
// 删除商品 Spu
export const deleteSpu = (id: number) => {
return request.delete({ url: `/product/spu/delete?id=${id}` })
}
// 导出商品 Spu Excel
export const exportSpu = async (params: any) => {
return await request.download({ url: '/product/spu/export-excel', params })
}
// 获得商品 SPU 精简列表
export const getSpuSimpleList = async () => {
return request.get({ url: '/product/spu/list-all-simple' })
}
import request from '@/config/axios'
export interface ArticleVO {
id: number
categoryId: number
title: string
author: string
picUrl: string
introduction: string
browseCount: string
sort: number
status: number
spuId: number
recommendHot: boolean
recommendBanner: boolean
content: string
}
// 查询文章管理列表
export const getArticlePage = async (params: any) => {
return await request.get({ url: `/promotion/article/page`, params })
}
// 查询文章管理详情
export const getArticle = async (id: number) => {
return await request.get({ url: `/promotion/article/get?id=` + id })
}
// 新增文章管理
export const createArticle = async (data: ArticleVO) => {
return await request.post({ url: `/promotion/article/create`, data })
}
// 修改文章管理
export const updateArticle = async (data: ArticleVO) => {
return await request.put({ url: `/promotion/article/update`, data })
}
// 删除文章管理
export const deleteArticle = async (id: number) => {
return await request.delete({ url: `/promotion/article/delete?id=` + id })
}
import request from '@/config/axios'
export interface ArticleCategoryVO {
id: number
name: string
picUrl: string
status: number
sort: number
}
// 查询文章分类列表
export const getArticleCategoryPage = async (params) => {
return await request.get({ url: `/promotion/article-category/page`, params })
}
// 查询文章分类精简信息列表
export const getSimpleArticleCategoryList = async () => {
return await request.get({ url: `/promotion/article-category/list-all-simple` })
}
// 查询文章分类详情
export const getArticleCategory = async (id: number) => {
return await request.get({ url: `/promotion/article-category/get?id=` + id })
}
// 新增文章分类
export const createArticleCategory = async (data: ArticleCategoryVO) => {
return await request.post({ url: `/promotion/article-category/create`, data })
}
// 修改文章分类
export const updateArticleCategory = async (data: ArticleCategoryVO) => {
return await request.put({ url: `/promotion/article-category/update`, data })
}
// 删除文章分类
export const deleteArticleCategory = async (id: number) => {
return await request.delete({ url: `/promotion/article-category/delete?id=` + id })
}
import request from '@/config/axios'
import { Sku, Spu } from '@/api/mall/product/spu'
export interface BargainActivityVO {
id?: number
name?: string
startTime?: Date
endTime?: Date
status?: number
helpMaxCount?: number // 达到该人数,才能砍到低价
bargainCount?: number // 最大帮砍次数
totalLimitCount?: number // 最大购买次数
spuId: number
skuId: number
bargainFirstPrice: number // 砍价起始价格,单位分
bargainMinPrice: number // 砍价底价
stock: number // 活动库存
randomMinPrice?: number // 用户每次砍价的最小金额,单位:分
randomMaxPrice?: number // 用户每次砍价的最大金额,单位:分
}
// 砍价活动所需属性。选择的商品和属性的时候使用方便使用活动的通用封装
export interface BargainProductVO {
spuId: number
skuId: number
bargainFirstPrice: number // 砍价起始价格,单位分
bargainMinPrice: number // 砍价底价
stock: number // 活动库存
}
// 扩展 Sku 配置
export type SkuExtension = Sku & {
productConfig: BargainProductVO
}
export interface SpuExtension extends Spu {
skus: SkuExtension[] // 重写类型
}
// 查询砍价活动列表
export const getBargainActivityPage = async (params: any) => {
return await request.get({ url: '/promotion/bargain-activity/page', params })
}
// 查询砍价活动详情
export const getBargainActivity = async (id: number) => {
return await request.get({ url: '/promotion/bargain-activity/get?id=' + id })
}
// 新增砍价活动
export const createBargainActivity = async (data: BargainActivityVO) => {
return await request.post({ url: '/promotion/bargain-activity/create', data })
}
// 修改砍价活动
export const updateBargainActivity = async (data: BargainActivityVO) => {
return await request.put({ url: '/promotion/bargain-activity/update', data })
}
// 关闭砍价活动
export const closeBargainActivity = async (id: number) => {
return await request.put({ url: '/promotion/bargain-activity/close?id=' + id })
}
// 删除砍价活动
export const deleteBargainActivity = async (id: number) => {
return await request.delete({ url: '/promotion/bargain-activity/delete?id=' + id })
}
import request from '@/config/axios'
export interface BargainHelpVO {
id: number
record: number
userId: number
reducePrice: number
endTime: Date
}
// 查询砍价记录列表
export const getBargainHelpPage = async (params) => {
return await request.get({ url: `/promotion/bargain-help/page`, params })
}
import request from '@/config/axios'
export interface BargainRecordVO {
id: number
activityId: number
userId: number
spuId: number
skuId: number
bargainFirstPrice: number
bargainPrice: number
status: number
orderId: number
endTime: Date
}
// 查询砍价记录列表
export const getBargainRecordPage = async (params) => {
return await request.get({ url: `/promotion/bargain-record/page`, params })
}
import request from '@/config/axios'
import { Sku, Spu } from '@/api/mall/product/spu'
export interface CombinationActivityVO {
id?: number
name?: string
spuId?: number
totalLimitCount?: number
singleLimitCount?: number
startTime?: Date
endTime?: Date
userSize?: number
totalCount?: number
successCount?: number
orderUserCount?: number
virtualGroup?: number
status?: number
limitDuration?: number
combinationPrice?: number
products: CombinationProductVO[]
}
// 拼团活动所需属性
export interface CombinationProductVO {
spuId: number
skuId: number
combinationPrice: number // 拼团价格
}
// 扩展 Sku 配置
export type SkuExtension = Sku & {
productConfig: CombinationProductVO
}
export interface SpuExtension extends Spu {
skus: SkuExtension[] // 重写类型
}
// 查询拼团活动列表
export const getCombinationActivityPage = async (params: any) => {
return await request.get({ url: '/promotion/combination-activity/page', params })
}
// 查询拼团活动详情
export const getCombinationActivity = async (id: number) => {
return await request.get({ url: '/promotion/combination-activity/get?id=' + id })
}
// 获得拼团活动列表,基于活动编号数组
export const getCombinationActivityListByIds = (ids: number[]) => {
return request.get({ url: `/promotion/combination-activity/list-by-ids?ids=${ids}` })
}
// 新增拼团活动
export const createCombinationActivity = async (data: CombinationActivityVO) => {
return await request.post({ url: '/promotion/combination-activity/create', data })
}
// 修改拼团活动
export const updateCombinationActivity = async (data: CombinationActivityVO) => {
return await request.put({ url: '/promotion/combination-activity/update', data })
}
// 关闭拼团活动
export const closeCombinationActivity = async (id: number) => {
return await request.put({ url: '/promotion/combination-activity/close?id=' + id })
}
// 删除拼团活动
export const deleteCombinationActivity = async (id: number) => {
return await request.delete({ url: '/promotion/combination-activity/delete?id=' + id })
}
import request from '@/config/axios'
export interface CombinationRecordVO {
id: number // 拼团记录编号
activityId: number // 拼团活动编号
nickname: string // 用户昵称
avatar: string // 用户头像
headId: number // 团长编号
expireTime: string // 过期时间
userSize: number // 可参团人数
userCount: number // 已参团人数
status: number // 拼团状态
spuName: string // 商品名字
picUrl: string // 商品图片
virtualGroup: boolean // 是否虚拟成团
startTime: string // 开始时间 (订单付款后开始的时间)
endTime: string // 结束时间(成团时间/失败时间)
}
// 查询拼团记录列表
export const getCombinationRecordPage = async (params: any) => {
return await request.get({ url: '/promotion/combination-record/page', params })
}
// 获得拼团记录的概要信息
export const getCombinationRecordSummary = async () => {
return await request.get({ url: '/promotion/combination-record/get-summary' })
}
import request from '@/config/axios'
// TODO @dhb52:vo 缺少
// 删除优惠劵
export const deleteCoupon = async (id: number) => {
return request.delete({
url: `/promotion/coupon/delete?id=${id}`
})
}
// 获得优惠劵分页
export const getCouponPage = async (params: PageParam) => {
return request.get({
url: '/promotion/coupon/page',
params: params
})
}
// 发送优惠券
export const sendCoupon = async (data: any) => {
return request.post({
url: '/promotion/coupon/send',
data: data
})
}
import request from '@/config/axios'
export interface CouponTemplateVO {
id: number
name: string
status: number
totalCount: number
takeLimitCount: number
takeType: number
usePrice: number
productScope: number
productScopeValues: number[]
validityType: number
validStartTime: Date
validEndTime: Date
fixedStartTerm: number
fixedEndTerm: number
discountType: number
discountPercent: number
discountPrice: number
discountLimitPrice: number
takeCount: number
useCount: number
}
// 创建优惠劵模板
export function createCouponTemplate(data: CouponTemplateVO) {
return request.post({
url: '/promotion/coupon-template/create',
data: data
})
}
// 更新优惠劵模板
export function updateCouponTemplate(data: CouponTemplateVO) {
return request.put({
url: '/promotion/coupon-template/update',
data: data
})
}
// 更新优惠劵模板的状态
export function updateCouponTemplateStatus(id: number, status: [0, 1]) {
const data = {
id,
status
}
return request.put({
url: '/promotion/coupon-template/update-status',
data: data
})
}
// 删除优惠劵模板
export function deleteCouponTemplate(id: number) {
return request.delete({
url: '/promotion/coupon-template/delete?id=' + id
})
}
// 获得优惠劵模板
export function getCouponTemplate(id: number) {
return request.get({
url: '/promotion/coupon-template/get?id=' + id
})
}
// 获得优惠劵模板分页
export function getCouponTemplatePage(params: PageParam) {
return request.get({
url: '/promotion/coupon-template/page',
params: params
})
}
// 获得优惠劵模板分页
export function getCouponTemplateList(ids: number[]): Promise<CouponTemplateVO[]> {
return request.get({
url: `/promotion/coupon-template/list?ids=${ids}`
})
}
// 导出优惠劵模板 Excel
export function exportCouponTemplateExcel(params: PageParam) {
return request.get({
url: '/promotion/coupon-template/export-excel',
params: params,
responseType: 'blob'
})
}
import request from '@/config/axios'
import { Sku, Spu } from '@/api/mall/product/spu'
export interface DiscountActivityVO {
id?: number
spuId?: number
name?: string
status?: number
remark?: string
startTime?: Date
endTime?: Date
products?: DiscountProductVO[]
}
// 限时折扣相关 属性
export interface DiscountProductVO {
spuId: number
skuId: number
discountType: number
discountPercent: number
discountPrice: number
}
// 扩展 Sku 配置
export type SkuExtension = Sku & {
productConfig: DiscountProductVO
}
export interface SpuExtension extends Spu {
skus: SkuExtension[] // 重写类型
}
// 查询限时折扣活动列表
export const getDiscountActivityPage = async (params) => {
return await request.get({ url: '/promotion/discount-activity/page', params })
}
// 查询限时折扣活动详情
export const getDiscountActivity = async (id: number) => {
return await request.get({ url: '/promotion/discount-activity/get?id=' + id })
}
// 新增限时折扣活动
export const createDiscountActivity = async (data: DiscountActivityVO) => {
return await request.post({ url: '/promotion/discount-activity/create', data })
}
// 修改限时折扣活动
export const updateDiscountActivity = async (data: DiscountActivityVO) => {
return await request.put({ url: '/promotion/discount-activity/update', data })
}
// 关闭限时折扣活动
export const closeDiscountActivity = async (id: number) => {
return await request.put({ url: '/promotion/discount-activity/close?id=' + id })
}
// 删除限时折扣活动
export const deleteDiscountActivity = async (id: number) => {
return await request.delete({ url: '/promotion/discount-activity/delete?id=' + id })
}
import request from '@/config/axios'
export interface DiyPageVO {
id?: number
templateId?: number
name: string
remark: string
previewPicUrls: string[]
property: string
}
// 查询装修页面列表
export const getDiyPagePage = async (params: any) => {
return await request.get({ url: `/promotion/diy-page/page`, params })
}
// 查询装修页面详情
export const getDiyPage = async (id: number) => {
return await request.get({ url: `/promotion/diy-page/get?id=` + id })
}
// 新增装修页面
export const createDiyPage = async (data: DiyPageVO) => {
return await request.post({ url: `/promotion/diy-page/create`, data })
}
// 修改装修页面
export const updateDiyPage = async (data: DiyPageVO) => {
return await request.put({ url: `/promotion/diy-page/update`, data })
}
// 删除装修页面
export const deleteDiyPage = async (id: number) => {
return await request.delete({ url: `/promotion/diy-page/delete?id=` + id })
}
// 获得装修页面属性
export const getDiyPageProperty = async (id: number) => {
return await request.get({ url: `/promotion/diy-page/get-property?id=` + id })
}
// 更新装修页面属性
export const updateDiyPageProperty = async (data: DiyPageVO) => {
return await request.put({ url: `/promotion/diy-page/update-property`, data })
}
import request from '@/config/axios'
import { DiyPageVO } from '@/api/mall/promotion/diy/page'
export interface DiyTemplateVO {
id?: number
name: string
used: boolean
usedTime?: Date
remark: string
previewPicUrls: string[]
property: string
}
export interface DiyTemplatePropertyVO extends DiyTemplateVO {
pages: DiyPageVO[]
}
// 查询装修模板列表
export const getDiyTemplatePage = async (params: any) => {
return await request.get({ url: `/promotion/diy-template/page`, params })
}
// 查询装修模板详情
export const getDiyTemplate = async (id: number) => {
return await request.get({ url: `/promotion/diy-template/get?id=` + id })
}
// 新增装修模板
export const createDiyTemplate = async (data: DiyTemplateVO) => {
return await request.post({ url: `/promotion/diy-template/create`, data })
}
// 修改装修模板
export const updateDiyTemplate = async (data: DiyTemplateVO) => {
return await request.put({ url: `/promotion/diy-template/update`, data })
}
// 删除装修模板
export const deleteDiyTemplate = async (id: number) => {
return await request.delete({ url: `/promotion/diy-template/delete?id=` + id })
}
// 使用装修模板
export const useDiyTemplate = async (id: number) => {
return await request.put({ url: `/promotion/diy-template/use?id=` + id })
}
// 获得装修模板属性
export const getDiyTemplateProperty = async (id: number) => {
return await request.get<DiyTemplatePropertyVO>({
url: `/promotion/diy-template/get-property?id=` + id
})
}
// 更新装修模板属性
export const updateDiyTemplateProperty = async (data: DiyTemplateVO) => {
return await request.put({ url: `/promotion/diy-template/update-property`, data })
}
import request from '@/config/axios'
export interface KeFuConversationRespVO {
id: number // 编号
userId: number // 会话所属用户
userAvatar: string // 会话所属用户头像
userNickname: string // 会话所属用户昵称
lastMessageTime: Date // 最后聊天时间
lastMessageContent: string // 最后聊天内容
lastMessageContentType: number // 最后发送的消息类型
adminPinned: boolean // 管理端置顶
userDeleted: boolean // 用户是否可见
adminDeleted: boolean // 管理员是否可见
adminUnreadMessageCount: number // 管理员未读消息数
createTime?: string // 创建时间
}
// 客服会话 API
export const KeFuConversationApi = {
// 获得客服会话列表
getConversationList: async () => {
return await request.get({ url: '/promotion/kefu-conversation/list' })
},
// 获得客服会话
getConversation: async (id: number) => {
return await request.get({ url: `/promotion/kefu-conversation/get?id=` + id })
},
// 客服会话置顶
updateConversationPinned: async (data: any) => {
return await request.put({
url: '/promotion/kefu-conversation/update-conversation-pinned',
data
})
},
// 删除客服会话
deleteConversation: async (id: number) => {
return await request.delete({ url: `/promotion/kefu-conversation/delete?id=${id}` })
}
}
import request from '@/config/axios'
export interface KeFuMessageRespVO {
id: number // 编号
conversationId: number // 会话编号
senderId: number // 发送人编号
senderAvatar: string // 发送人头像
senderType: number // 发送人类型
receiverId: number // 接收人编号
receiverType: number // 接收人类型
contentType: number // 消息类型
content: string // 消息
readStatus: boolean // 是否已读
createTime: Date // 创建时间
}
// 客服会话 API
export const KeFuMessageApi = {
// 发送客服消息
sendKeFuMessage: async (data: any) => {
return await request.post({
url: '/promotion/kefu-message/send',
data
})
},
// 更新客服消息已读状态
updateKeFuMessageReadStatus: async (conversationId: number) => {
return await request.put({
url: '/promotion/kefu-message/update-read-status?conversationId=' + conversationId
})
},
// 获得消息列表(流式加载)
getKeFuMessageList: async (params: any) => {
return await request.get({ url: '/promotion/kefu-message/list', params })
}
}
import request from '@/config/axios'
import { Sku, Spu } from '@/api/mall/product/spu' // 积分商城活动 VO
// 积分商城活动 VO
export interface PointActivityVO {
id: number // 积分商城活动编号
spuId: number // 积分商城活动商品
status: number // 活动状态
stock: number // 积分商城活动库存
totalStock: number // 积分商城活动总库存
remark?: string // 备注
sort: number // 排序
createTime: string // 创建时间
products: PointProductVO[] // 积分商城商品
// ========== 商品字段 ==========
spuName: string // 商品名称
picUrl: string // 商品主图
marketPrice: number // 商品市场价,单位:分
//======================= 显示所需兑换积分最少的 sku 信息 =======================
point: number // 兑换积分
price: number // 兑换金额,单位:分
}
// 秒杀活动所需属性
export interface PointProductVO {
id?: number // 积分商城商品编号
activityId?: number // 积分商城活动 id
spuId?: number // 商品 SPU 编号
skuId: number // 商品 SKU 编号
count: number // 可兑换数量
point: number // 兑换积分
price: number // 兑换金额,单位:分
stock: number // 积分商城商品库存
activityStatus?: number // 积分商城商品状态
}
// 扩展 Sku 配置
export type SkuExtension = Sku & {
productConfig: PointProductVO
}
export interface SpuExtension extends Spu {
skus: SkuExtension[] // 重写类型
}
export interface SpuExtension0 extends Spu {
pointStock: number // 积分商城活动库存
pointTotalStock: number // 积分商城活动总库存
point: number // 兑换积分
pointPrice: number // 兑换金额,单位:分
}
// 积分商城活动 API
export const PointActivityApi = {
// 查询积分商城活动分页
getPointActivityPage: async (params: any) => {
return await request.get({ url: `/promotion/point-activity/page`, params })
},
// 查询积分商城活动详情
getPointActivity: async (id: number) => {
return await request.get({ url: `/promotion/point-activity/get?id=` + id })
},
// 查询积分商城活动列表,基于活动编号数组
getPointActivityListByIds: async (ids: number[]) => {
return request.get({ url: `/promotion/point-activity/list-by-ids?ids=${ids}` })
},
// 新增积分商城活动
createPointActivity: async (data: PointActivityVO) => {
return await request.post({ url: `/promotion/point-activity/create`, data })
},
// 修改积分商城活动
updatePointActivity: async (data: PointActivityVO) => {
return await request.put({ url: `/promotion/point-activity/update`, data })
},
// 删除积分商城活动
deletePointActivity: async (id: number) => {
return await request.delete({ url: `/promotion/point-activity/delete?id=` + id })
},
// 关闭秒杀活动
closePointActivity: async (id: number) => {
return await request.put({ url: '/promotion/point-activity/close?id=' + id })
}
}
import request from '@/config/axios'
export interface RewardActivityVO {
id?: number
name?: string
startTime?: Date
endTime?: Date
startAndEndTime?: Date[] // 只前端使用
remark?: string
conditionType?: number
productScope?: number
rules: RewardRule[]
// 如下仅用于表单,不提交
productScopeValues?: number[] // 商品范围:值为品类编号列表、商品编号列表
productCategoryIds?: number[]
productSpuIds?: number[]
}
// 优惠规则
export interface RewardRule {
limit?: number
discountPrice?: number
freeDelivery?: boolean
point: number
giveCouponTemplateCounts?: {
[key: number]: number
}
}
// 新增满减送活动
export const createRewardActivity = async (data: RewardActivityVO) => {
return await request.post({ url: '/promotion/reward-activity/create', data })
}
// 更新满减送活动
export const updateRewardActivity = async (data: RewardActivityVO) => {
return await request.put({ url: '/promotion/reward-activity/update', data })
}
// 查询满减送活动列表
export const getRewardActivityPage = async (params) => {
return await request.get({ url: '/promotion/reward-activity/page', params })
}
// 查询满减送活动详情
export const getReward = async (id: number) => {
return await request.get({ url: '/promotion/reward-activity/get?id=' + id })
}
// 删除满减送活动
export const deleteRewardActivity = async (id: number) => {
return await request.delete({ url: '/promotion/reward-activity/delete?id=' + id })
}
// 关闭满减送活动
export const closeRewardActivity = async (id: number) => {
return await request.put({ url: '/promotion/reward-activity/close?id=' + id })
}
import request from '@/config/axios'
import { Sku, Spu } from '@/api/mall/product/spu'
export interface SeckillActivityVO {
id?: number
spuId?: number
name?: string
status?: number
remark?: string
startTime?: Date
endTime?: Date
sort?: number
configIds?: string
orderCount?: number
userCount?: number
totalPrice?: number
totalLimitCount?: number
singleLimitCount?: number
stock?: number
totalStock?: number
seckillPrice?: number
products?: SeckillProductVO[]
}
// 秒杀活动所需属性
export interface SeckillProductVO {
skuId: number
spuId: number
seckillPrice: number
stock: number
}
// 扩展 Sku 配置
export type SkuExtension = Sku & {
productConfig: SeckillProductVO
}
export interface SpuExtension extends Spu {
skus: SkuExtension[] // 重写类型
}
// 查询秒杀活动列表
export const getSeckillActivityPage = async (params) => {
return await request.get({ url: '/promotion/seckill-activity/page', params })
}
// 查询秒杀活动列表,基于活动编号数组
export const getSeckillActivityListByIds = (ids: number[]) => {
return request.get({ url: `/promotion/seckill-activity/list-by-ids?ids=${ids}` })
}
// 查询秒杀活动详情
export const getSeckillActivity = async (id: number) => {
return await request.get({ url: '/promotion/seckill-activity/get?id=' + id })
}
// 新增秒杀活动
export const createSeckillActivity = async (data: SeckillActivityVO) => {
return await request.post({ url: '/promotion/seckill-activity/create', data })
}
// 修改秒杀活动
export const updateSeckillActivity = async (data: SeckillActivityVO) => {
return await request.put({ url: '/promotion/seckill-activity/update', data })
}
// 关闭秒杀活动
export const closeSeckillActivity = async (id: number) => {
return await request.put({ url: '/promotion/seckill-activity/close?id=' + id })
}
// 删除秒杀活动
export const deleteSeckillActivity = async (id: number) => {
return await request.delete({ url: '/promotion/seckill-activity/delete?id=' + id })
}
import request from '@/config/axios'
// 秒杀时段 VO
export interface SeckillConfigVO {
id: number // 编号
name: string // 秒杀时段名称
startTime: string // 开始时间点
endTime: string // 结束时间点
sliderPicUrls: string[] // 秒杀轮播图
status: number // 活动状态
}
// 秒杀时段 API
export const SeckillConfigApi = {
// 查询秒杀时段分页
getSeckillConfigPage: async (params: any) => {
return await request.get({ url: `/promotion/seckill-config/page`, params })
},
// 查询秒杀时段列表
getSimpleSeckillConfigList: async () => {
return await request.get({ url: `/promotion/seckill-config/list` })
},
// 查询秒杀时段详情
getSeckillConfig: async (id: number) => {
return await request.get({ url: `/promotion/seckill-config/get?id=` + id })
},
// 新增秒杀时段
createSeckillConfig: async (data: SeckillConfigVO) => {
return await request.post({ url: `/promotion/seckill-config/create`, data })
},
// 修改秒杀时段
updateSeckillConfig: async (data: SeckillConfigVO) => {
return await request.put({ url: `/promotion/seckill-config/update`, data })
},
// 删除秒杀时段
deleteSeckillConfig: async (id: number) => {
return await request.delete({ url: `/promotion/seckill-config/delete?id=` + id })
},
// 修改时段配置状态
updateSeckillConfigStatus: async (id: number, status: number) => {
const data = {
id,
status
}
return request.put({ url: '/promotion/seckill-config/update-status', data: data })
}
}
/** 数据对照 Response VO */
export interface DataComparisonRespVO<T> {
value: T
reference: T
}
import request from '@/config/axios'
import dayjs from 'dayjs'
import { DataComparisonRespVO } from '@/api/mall/statistics/common'
import { formatDate } from '@/utils/formatTime'
/** 会员分析 Request VO */
export interface MemberAnalyseReqVO {
times: dayjs.ConfigType[]
}
/** 会员分析 Response VO */
export interface MemberAnalyseRespVO {
visitUserCount: number
orderUserCount: number
payUserCount: number
atv: number
comparison: DataComparisonRespVO<MemberAnalyseComparisonRespVO>
}
/** 会员分析对照数据 Response VO */
export interface MemberAnalyseComparisonRespVO {
registerUserCount: number
visitUserCount: number
rechargeUserCount: number
}
/** 会员地区统计 Response VO */
export interface MemberAreaStatisticsRespVO {
areaId: number
areaName: string
userCount: number
orderCreateUserCount: number
orderPayUserCount: number
orderPayPrice: number
}
/** 会员性别统计 Response VO */
export interface MemberSexStatisticsRespVO {
sex: number
userCount: number
}
/** 会员统计 Response VO */
export interface MemberSummaryRespVO {
userCount: number
rechargeUserCount: number
rechargePrice: number
expensePrice: number
}
/** 会员终端统计 Response VO */
export interface MemberTerminalStatisticsRespVO {
terminal: number
userCount: number
}
/** 会员数量统计 Response VO */
export interface MemberCountRespVO {
/** 用户访问量 */
visitUserCount: string
/** 注册用户数量 */
registerUserCount: number
}
/** 会员注册数量 Response VO */
export interface MemberRegisterCountRespVO {
date: string
count: number
}
// 查询会员统计
export const getMemberSummary = () => {
return request.get<MemberSummaryRespVO>({
url: '/statistics/member/summary'
})
}
// 查询会员分析数据
export const getMemberAnalyse = (params: MemberAnalyseReqVO) => {
return request.get<MemberAnalyseRespVO>({
url: '/statistics/member/analyse',
params: { times: [formatDate(params.times[0]), formatDate(params.times[1])] }
})
}
// 按照省份,查询会员统计列表
export const getMemberAreaStatisticsList = () => {
return request.get<MemberAreaStatisticsRespVO[]>({
url: '/statistics/member/area-statistics-list'
})
}
// 按照性别,查询会员统计列表
export const getMemberSexStatisticsList = () => {
return request.get<MemberSexStatisticsRespVO[]>({
url: '/statistics/member/sex-statistics-list'
})
}
// 按照终端,查询会员统计列表
export const getMemberTerminalStatisticsList = () => {
return request.get<MemberTerminalStatisticsRespVO[]>({
url: '/statistics/member/terminal-statistics-list'
})
}
// 获得用户数量量对照
export const getUserCountComparison = () => {
return request.get<DataComparisonRespVO<MemberCountRespVO>>({
url: '/statistics/member/user-count-comparison'
})
}
// 获得会员注册数量列表
export const getMemberRegisterCountList = (
beginTime: dayjs.ConfigType,
endTime: dayjs.ConfigType
) => {
return request.get<MemberRegisterCountRespVO[]>({
url: '/statistics/member/register-count-list',
params: { times: [formatDate(beginTime), formatDate(endTime)] }
})
}
import request from '@/config/axios'
/** 支付统计 */
export interface PaySummaryRespVO {
/** 充值金额,单位分 */
rechargePrice: number
}
/** 获取钱包充值金额 */
export const getWalletRechargePrice = async () => {
return await request.get<PaySummaryRespVO>({ url: `/statistics/pay/summary` })
}
import request from '@/config/axios'
import { DataComparisonRespVO } from '@/api/mall/statistics/common'
export interface ProductStatisticsVO {
id: number
day: string
spuId: number
spuName: string
spuPicUrl: string
browseCount: number
browseUserCount: number
favoriteCount: number
cartCount: number
orderCount: number
orderPayCount: number
orderPayPrice: number
afterSaleCount: number
afterSaleRefundPrice: number
browseConvertPercent: number
}
// 商品统计 API
export const ProductStatisticsApi = {
// 获得商品统计分析
getProductStatisticsAnalyse: (params: any) => {
return request.get<DataComparisonRespVO<ProductStatisticsVO>>({
url: '/statistics/product/analyse',
params
})
},
// 获得商品状况明细
getProductStatisticsList: (params: any) => {
return request.get<ProductStatisticsVO[]>({
url: '/statistics/product/list',
params
})
},
// 导出获得商品状况明细 Excel
exportProductStatisticsExcel: (params: any) => {
return request.download({
url: '/statistics/product/export-excel',
params
})
},
// 获得商品排行榜分页
getProductStatisticsRankPage: async (params: any) => {
return await request.get({
url: `/statistics/product/rank-page`,
params
})
}
}
import request from '@/config/axios'
import dayjs from 'dayjs'
import { formatDate } from '@/utils/formatTime'
import { DataComparisonRespVO } from '@/api/mall/statistics/common'
/** 交易统计 Response VO */
export interface TradeSummaryRespVO {
yesterdayOrderCount: number
monthOrderCount: number
yesterdayPayPrice: number
monthPayPrice: number
}
/** 交易状况 Request VO */
export interface TradeTrendReqVO {
times: [dayjs.ConfigType, dayjs.ConfigType]
}
/** 交易状况统计 Response VO */
export interface TradeTrendSummaryRespVO {
time: string
turnoverPrice: number
orderPayPrice: number
rechargePrice: number
expensePrice: number
walletPayPrice: number
brokerageSettlementPrice: number
afterSaleRefundPrice: number
}
/** 交易订单数量 Response VO */
export interface TradeOrderCountRespVO {
/** 待发货 */
undelivered?: number
/** 待核销 */
pickUp?: number
/** 退款中 */
afterSaleApply?: number
/** 提现待审核 */
auditingWithdraw?: number
}
/** 交易订单统计 Response VO */
export interface TradeOrderSummaryRespVO {
/** 支付订单商品数 */
orderPayCount?: number
/** 总支付金额,单位:分 */
orderPayPrice?: number
}
/** 订单量趋势统计 Response VO */
export interface TradeOrderTrendRespVO {
/** 日期 */
date: string
/** 订单数量 */
orderPayCount: number
/** 订单支付金额 */
orderPayPrice: number
}
// 查询交易统计
export const getTradeStatisticsSummary = () => {
return request.get<DataComparisonRespVO<TradeSummaryRespVO>>({
url: '/statistics/trade/summary'
})
}
// 获得交易状况统计
export const getTradeStatisticsAnalyse = (params: TradeTrendReqVO) => {
return request.get<DataComparisonRespVO<TradeTrendSummaryRespVO>>({
url: '/statistics/trade/analyse',
params: formatDateParam(params)
})
}
// 获得交易状况明细
export const getTradeStatisticsList = (params: TradeTrendReqVO) => {
return request.get<TradeTrendSummaryRespVO[]>({
url: '/statistics/trade/list',
params: formatDateParam(params)
})
}
// 导出交易状况明细
export const exportTradeStatisticsExcel = (params: TradeTrendReqVO) => {
return request.download({
url: '/statistics/trade/export-excel',
params: formatDateParam(params)
})
}
// 获得交易订单数量
export const getOrderCount = async () => {
return await request.get<TradeOrderCountRespVO>({ url: `/statistics/trade/order-count` })
}
// 获得交易订单数量对照
export const getOrderComparison = async () => {
return await request.get<DataComparisonRespVO<TradeOrderSummaryRespVO>>({
url: `/statistics/trade/order-comparison`
})
}
// 获得订单量趋势统计
export const getOrderCountTrendComparison = (
type: number,
beginTime: dayjs.ConfigType,
endTime: dayjs.ConfigType
) => {
return request.get<DataComparisonRespVO<TradeOrderTrendRespVO>[]>({
url: '/statistics/trade/order-count-trend',
params: { type, beginTime: formatDate(beginTime), endTime: formatDate(endTime) }
})
}
/** 时间参数需要格式化, 确保接口能识别 */
const formatDateParam = (params: TradeTrendReqVO) => {
return { times: [formatDate(params.times[0]), formatDate(params.times[1])] } as TradeTrendReqVO
}
import request from '@/config/axios'
export interface TradeAfterSaleVO {
id?: number | null // 售后编号,主键自增
no?: string // 售后单号
status?: number | null // 退款状态
way?: number | null // 售后方式
type?: number | null // 售后类型
userId?: number | null // 用户编号
applyReason?: string // 申请原因
applyDescription?: string // 补充描述
applyPicUrls?: string[] // 补充凭证图片
orderId?: number | null // 交易订单编号
orderNo?: string // 订单流水号
orderItemId?: number | null // 交易订单项编号
spuId?: number | null // 商品 SPU 编号
spuName?: string // 商品 SPU 名称
skuId?: number | null // 商品 SKU 编号
properties?: ProductPropertiesVO[] // 属性数组
picUrl?: string // 商品图片
count?: number | null // 退货商品数量
auditTime?: Date // 审批时间
auditUserId?: number | null // 审批人
auditReason?: string // 审批备注
refundPrice?: number | null // 退款金额,单位:分。
payRefundId?: number | null // 支付退款编号
refundTime?: Date // 退款时间
logisticsId?: number | null // 退货物流公司编号
logisticsNo?: string // 退货物流单号
deliveryTime?: Date // 退货时间
receiveTime?: Date // 收货时间
receiveReason?: string // 收货备注
}
export interface ProductPropertiesVO {
propertyId?: number | null // 属性的编号
propertyName?: string // 属性的名称
valueId?: number | null //属性值的编号
valueName?: string // 属性值的名称
}
// 获得交易售后分页
export const getAfterSalePage = async (params) => {
return await request.get({ url: `/trade/after-sale/page`, params })
}
// 获得交易售后详情
export const getAfterSale = async (id: any) => {
return await request.get({ url: `/trade/after-sale/get-detail?id=${id}` })
}
// 同意售后
export const agree = async (id: any) => {
return await request.put({ url: `/trade/after-sale/agree?id=${id}` })
}
// 拒绝售后
export const disagree = async (data: any) => {
return await request.put({ url: `/trade/after-sale/disagree`, data })
}
// 确认收货
export const receive = async (id: any) => {
return await request.put({ url: `/trade/after-sale/receive?id=${id}` })
}
// 拒绝收货
export const refuse = async (id: any) => {
return await request.put({ url: `/trade/after-sale/refuse?id=${id}` })
}
// 确认退款
export const refund = async (id: any) => {
return await request.put({ url: `/trade/after-sale/refund?id=${id}` })
}
import request from '@/config/axios'
// 查询佣金记录列表
export const getBrokerageRecordPage = async (params: any) => {
return await request.get({ url: `/trade/brokerage-record/page`, params })
}
// 查询佣金记录详情
export const getBrokerageRecord = async (id: number) => {
return await request.get({ url: `/trade/brokerage-record/get?id=` + id })
}
import request from '@/config/axios'
export interface BrokerageUserVO {
id: number
bindUserId: number
bindUserTime: Date
brokerageEnabled: boolean
brokerageTime: Date
price: number
frozenPrice: number
nickname: string
avatar: string
}
// 创建分销用户
export const createBrokerageUser = (data: any) => {
return request.post({ url: '/trade/brokerage-user/create', data })
}
// 查询分销用户列表
export const getBrokerageUserPage = async (params: any) => {
return await request.get({ url: `/trade/brokerage-user/page`, params })
}
// 查询分销用户详情
export const getBrokerageUser = async (id: number) => {
return await request.get({ url: `/trade/brokerage-user/get?id=` + id })
}
// 修改推广员
export const updateBindUser = async (data: any) => {
return await request.put({ url: `/trade/brokerage-user/update-bind-user`, data })
}
// 清除推广员
export const clearBindUser = async (data: any) => {
return await request.put({ url: `/trade/brokerage-user/clear-bind-user`, data })
}
// 修改推广资格
export const updateBrokerageEnabled = async (data: any) => {
return await request.put({ url: `/trade/brokerage-user/update-brokerage-enable`, data })
}
import request from '@/config/axios'
export interface BrokerageWithdrawVO {
id: number
userId: number
price: number
feePrice: number
totalPrice: number
type: number
userName: string
userAccount: string
bankName: string
bankAddress: string
qrCodeUrl: string
status: number
auditReason: string
auditTime: Date
remark: string
payTransferId?: number
transferChannelCode?: string
transferTime?: Date
transferErrorMsg?: string
}
// 查询佣金提现列表
export const getBrokerageWithdrawPage = async (params: any) => {
return await request.get({ url: `/trade/brokerage-withdraw/page`, params })
}
// 查询佣金提现详情
export const getBrokerageWithdraw = async (id: number) => {
return await request.get({ url: `/trade/brokerage-withdraw/get?id=` + id })
}
// 佣金提现 - 通过申请
export const approveBrokerageWithdraw = async (id: number) => {
return await request.put({ url: `/trade/brokerage-withdraw/approve?id=` + id })
}
// 审核佣金提现 - 驳回申请
export const rejectBrokerageWithdraw = async (data: BrokerageWithdrawVO) => {
return await request.put({ url: `/trade/brokerage-withdraw/reject`, data })
}
import request from '@/config/axios'
export interface ConfigVO {
brokerageEnabled: boolean
brokerageEnabledCondition: number
brokerageBindMode: number
brokeragePosterUrls: string
brokerageFirstPercent: number
brokerageSecondPercent: number
brokerageWithdrawMinPrice: number
brokerageFrozenDays: number
brokerageWithdrawTypes: string
}
// 查询交易中心配置详情
export const getTradeConfig = async () => {
return await request.get({ url: `/trade/config/get` })
}
// 保存交易中心配置
export const saveTradeConfig = async (data: ConfigVO) => {
return await request.put({ url: `/trade/config/save`, data })
}
import request from '@/config/axios'
export interface DeliveryExpressVO {
id: number
code: string
name: string
logo: string
sort: number
status: number
}
// 查询快递公司列表
export const getDeliveryExpressPage = async (params: PageParam) => {
return await request.get({ url: '/trade/delivery/express/page', params })
}
// 查询快递公司详情
export const getDeliveryExpress = async (id: number) => {
return await request.get({ url: '/trade/delivery/express/get?id=' + id })
}
// 获得快递公司精简信息列表
export const getSimpleDeliveryExpressList = () => {
return request.get({ url: '/trade/delivery/express/list-all-simple' })
}
// 新增快递公司
export const createDeliveryExpress = async (data: DeliveryExpressVO) => {
return await request.post({ url: '/trade/delivery/express/create', data })
}
// 修改快递公司
export const updateDeliveryExpress = async (data: DeliveryExpressVO) => {
return await request.put({ url: '/trade/delivery/express/update', data })
}
// 删除快递公司
export const deleteDeliveryExpress = async (id: number) => {
return await request.delete({ url: '/trade/delivery/express/delete?id=' + id })
}
// 导出快递公司 Excel
export const exportDeliveryExpressApi = async (params) => {
return await request.download({ url: '/trade/delivery/express/export-excel', params })
}
import request from '@/config/axios'
export interface DeliveryExpressTemplateVO {
id: number
name: string
chargeMode: number
sort: number
templateCharge: ExpressTemplateChargeVO[]
templateFree: ExpressTemplateFreeVO[]
}
export declare type ExpressTemplateChargeVO = {
areaIds: number[]
startCount: number
startPrice: number
extraCount: number
extraPrice: number
}
export declare type ExpressTemplateFreeVO = {
areaIds: number[]
freeCount: number
freePrice: number
}
// 查询快递运费模板列表
export const getDeliveryExpressTemplatePage = async (params: PageParam) => {
return await request.get({ url: '/trade/delivery/express-template/page', params })
}
// 查询快递运费模板详情
export const getDeliveryExpressTemplate = async (id: number) => {
return await request.get({ url: '/trade/delivery/express-template/get?id=' + id })
}
// 查询快递运费模板详情
export const getSimpleTemplateList = async () => {
return await request.get({ url: '/trade/delivery/express-template/list-all-simple' })
}
// 新增快递运费模板
export const createDeliveryExpressTemplate = async (data: DeliveryExpressTemplateVO) => {
return await request.post({ url: '/trade/delivery/express-template/create', data })
}
// 修改快递运费模板
export const updateDeliveryExpressTemplate = async (data: DeliveryExpressTemplateVO) => {
return await request.put({ url: '/trade/delivery/express-template/update', data })
}
// 删除快递运费模板
export const deleteDeliveryExpressTemplate = async (id: number) => {
return await request.delete({ url: '/trade/delivery/express-template/delete?id=' + id })
}
import request from '@/config/axios'
export interface DeliveryPickUpStoreVO {
id: number
name: string
introduction: string
phone: string
areaId: number
detailAddress: string
logo: string
openingTime: string
closingTime: string
latitude: number
longitude: number
status: number
verifyUserIds: number[] // 绑定用户编号组数
}
// 查询自提门店列表
export const getDeliveryPickUpStorePage = async (params: any) => {
return await request.get({ url: '/trade/delivery/pick-up-store/page', params })
}
// 查询自提门店详情
export const getDeliveryPickUpStore = async (id: number) => {
return await request.get({ url: '/trade/delivery/pick-up-store/get?id=' + id })
}
// 查询自提门店精简列表
export const getSimpleDeliveryPickUpStoreList = async (): Promise<DeliveryPickUpStoreVO[]> => {
return await request.get({ url: '/trade/delivery/pick-up-store/simple-list' })
}
// 新增自提门店
export const createDeliveryPickUpStore = async (data: DeliveryPickUpStoreVO) => {
return await request.post({ url: '/trade/delivery/pick-up-store/create', data })
}
// 修改自提门店
export const updateDeliveryPickUpStore = async (data: DeliveryPickUpStoreVO) => {
return await request.put({ url: '/trade/delivery/pick-up-store/update', data })
}
// 删除自提门店
export const deleteDeliveryPickUpStore = async (id: number) => {
return await request.delete({ url: '/trade/delivery/pick-up-store/delete?id=' + id })
}
// 绑定自提店员
export const bindStoreStaffId = async (data: any) => {
return await request.post({ url: '/trade/delivery/pick-up-store/bind', data })
}
import request from '@/config/axios'
export interface OrderVO {
// ========== 订单基本信息 ==========
id?: number | null // 订单编号
no?: string // 订单流水号
createTime?: Date | null // 下单时间
type?: number | null // 订单类型
terminal?: number | null // 订单来源
userId?: number | null // 用户编号
userIp?: string // 用户 IP
userRemark?: string // 用户备注
status?: number | null // 订单状态
productCount?: number | null // 购买的商品数量
finishTime?: Date | null // 订单完成时间
cancelTime?: Date | null // 订单取消时间
cancelType?: number | null // 取消类型
remark?: string // 商家备注
// ========== 价格 + 支付基本信息 ==========
payOrderId?: number | null // 支付订单编号
payStatus?: boolean // 是否已支付
payTime?: Date | null // 付款时间
payChannelCode?: string // 支付渠道
totalPrice?: number | null // 商品原价(总)
discountPrice?: number | null // 订单优惠(总)
deliveryPrice?: number | null // 运费金额
adjustPrice?: number | null // 订单调价(总)
payPrice?: number | null // 应付金额(总)
// ========== 收件 + 物流基本信息 ==========
deliveryType?: number | null // 发货方式
pickUpStoreId?: number // 自提门店编号
pickUpVerifyCode?: string // 自提核销码
deliveryTemplateId?: number | null // 配送模板编号
logisticsId?: number | null // 发货物流公司编号
logisticsNo?: string // 发货物流单号
deliveryTime?: Date | null // 发货时间
receiveTime?: Date | null // 收货时间
receiverName?: string // 收件人名称
receiverMobile?: string // 收件人手机
receiverPostCode?: number | null // 收件人邮编
receiverAreaId?: number | null // 收件人地区编号
receiverAreaName?: string //收件人地区名字
receiverDetailAddress?: string // 收件人详细地址
// ========== 售后基本信息 ==========
afterSaleStatus?: number | null // 售后状态
refundPrice?: number | null // 退款金额
// ========== 营销基本信息 ==========
couponId?: number | null // 优惠劵编号
couponPrice?: number | null // 优惠劵减免金额
pointPrice?: number | null // 积分抵扣的金额
vipPrice?: number | null // VIP 减免金额
items?: OrderItemRespVO[] // 订单项列表
// 下单用户信息
user?: {
id?: number | null
nickname?: string
avatar?: string
}
// 推广用户信息
brokerageUser?: {
id?: number | null
nickname?: string
avatar?: string
}
// 订单操作日志
logs?: OrderLogRespVO[]
}
export interface OrderLogRespVO {
content?: string
createTime?: Date
userType?: number
}
export interface OrderItemRespVO {
// ========== 订单项基本信息 ==========
id?: number | null // 编号
userId?: number | null // 用户编号
orderId?: number | null // 订单编号
// ========== 商品基本信息 ==========
spuId?: number | null // 商品 SPU 编号
spuName?: string //商品 SPU 名称
skuId?: number | null // 商品 SKU 编号
picUrl?: string //商品图片
count?: number | null //购买数量
// ========== 价格 + 支付基本信息 ==========
originalPrice?: number | null //商品原价(总)
originalUnitPrice?: number | null //商品原价(单)
discountPrice?: number | null //商品优惠(总)
payPrice?: number | null //商品实付金额(总)
orderPartPrice?: number | null //子订单分摊金额(总)
orderDividePrice?: number | null //分摊后子订单实付金额(总)
// ========== 营销基本信息 ==========
// TODO 芋艿:在捉摸一下
// ========== 售后基本信息 ==========
afterSaleStatus?: number | null // 售后状态
properties?: ProductPropertiesVO[] //属性数组
}
export interface ProductPropertiesVO {
propertyId?: number | null // 属性的编号
propertyName?: string // 属性的名称
valueId?: number | null //属性值的编号
valueName?: string // 属性值的名称
}
/** 交易订单统计 */
export interface TradeOrderSummaryRespVO {
/** 订单数量 */
orderCount?: number
/** 订单金额 */
orderPayPrice?: string
/** 退款单数 */
afterSaleCount?: number
/** 退款金额 */
afterSalePrice?: string
}
// 查询交易订单列表
export const getOrderPage = async (params: any) => {
return await request.get({ url: `/trade/order/page`, params })
}
// 查询交易订单统计
export const getOrderSummary = async (params: any) => {
return await request.get<TradeOrderSummaryRespVO>({ url: `/trade/order/summary`, params })
}
// 查询交易订单详情
export const getOrder = async (id: number | null) => {
return await request.get({ url: `/trade/order/get-detail?id=` + id })
}
// 查询交易订单物流详情
export const getExpressTrackList = async (id: number | null) => {
return await request.get({ url: `/trade/order/get-express-track-list?id=` + id })
}
export interface DeliveryVO {
id?: number // 订单编号
logisticsId: number | null // 物流公司编号
logisticsNo: string // 物流编号
}
// 订单发货
export const deliveryOrder = async (data: DeliveryVO) => {
return await request.put({ url: `/trade/order/delivery`, data })
}
// 订单备注
export const updateOrderRemark = async (data: any) => {
return await request.put({ url: `/trade/order/update-remark`, data })
}
// 订单调价
export const updateOrderPrice = async (data: any) => {
return await request.put({ url: `/trade/order/update-price`, data })
}
// 修改订单地址
export const updateOrderAddress = async (data: any) => {
return await request.put({ url: `/trade/order/update-address`, data })
}
// 订单核销
export const pickUpOrder = async (id: number) => {
return await request.put({ url: `/trade/order/pick-up-by-id?id=${id}` })
}
// 订单核销
export const pickUpOrderByVerifyCode = async (pickUpVerifyCode: string) => {
return await request.put({
url: `/trade/order/pick-up-by-verify-code`,
params: { pickUpVerifyCode }
})
}
// 查询核销码对应的订单
export const getOrderByPickUpVerifyCode = async (pickUpVerifyCode: string) => {
return await request.get<OrderVO>({
url: `/trade/order/get-by-pick-up-verify-code`,
params: { pickUpVerifyCode }
})
}
......@@ -355,90 +355,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
]
},
{
path: '/mall/product', // 商品中心
component: Layout,
name: 'ProductCenter',
meta: {
hidden: true
},
children: [
{
path: 'spu/add',
component: () => import('@/views/mall/product/spu/form/index.vue'),
name: 'ProductSpuAdd',
meta: {
noCache: false, // 需要缓存
hidden: true,
canTo: true,
icon: 'ep:edit',
title: '商品添加',
activeMenu: '/mall/product/spu'
}
},
{
path: 'spu/edit/:id(\\d+)',
component: () => import('@/views/mall/product/spu/form/index.vue'),
name: 'ProductSpuEdit',
meta: {
noCache: true,
hidden: true,
canTo: true,
icon: 'ep:edit',
title: '商品编辑',
activeMenu: '/mall/product/spu'
}
},
{
path: 'spu/detail/:id(\\d+)',
component: () => import('@/views/mall/product/spu/form/index.vue'),
name: 'ProductSpuDetail',
meta: {
noCache: true,
hidden: true,
canTo: true,
icon: 'ep:view',
title: '商品详情',
activeMenu: '/mall/product/spu'
}
},
{
path: 'property/value/:propertyId(\\d+)',
component: () => import('@/views/mall/product/property/value/index.vue'),
name: 'ProductPropertyValue',
meta: {
noCache: true,
hidden: true,
canTo: true,
icon: 'ep:view',
title: '商品属性值',
activeMenu: '/product/property'
}
}
]
},
{
path: '/mall/trade', // 交易中心
component: Layout,
name: 'TradeCenter',
meta: {
hidden: true
},
children: [
{
path: 'order/detail/:id(\\d+)',
component: () => import('@/views/mall/trade/order/detail/index.vue'),
name: 'TradeOrderDetail',
meta: { title: '订单详情', icon: 'ep:view', activeMenu: '/mall/trade/order' }
},
{
path: 'after-sale/detail/:id(\\d+)',
component: () => import('@/views/mall/trade/afterSale/detail/index.vue'),
name: 'TradeAfterSaleDetail',
meta: { title: '退款详情', icon: 'ep:view', activeMenu: '/mall/trade/after-sale' }
}
]
},
{
path: '/member',
component: Layout,
name: 'MemberCenter',
......
<template>
<div class="flex flex-col gap-2 bg-[var(--el-bg-color-overlay)] p-6">
<div class="flex items-center justify-between text-gray-500">
<span>{{ title }}</span>
<el-tag>{{ tag }}</el-tag>
</div>
<div class="flex flex-row items-baseline justify-between">
<CountTo :prefix="prefix" :end-val="value" :decimals="decimals" class="text-3xl" />
<span :class="toNumber(percent) > 0 ? 'text-red-500' : 'text-green-500'">
{{ Math.abs(toNumber(percent)) }}%
<Icon :icon="toNumber(percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'" class="!text-sm" />
</span>
</div>
<el-divider class="mb-1! mt-2!" />
<div class="flex flex-row items-center justify-between text-sm">
<span class="text-gray-500">昨日数据</span>
<span>{{ prefix || '' }}{{ reference }}</span>
</div>
</div>
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import { toNumber } from 'lodash-es'
import { calculateRelativeRate } from '@/utils'
/** 交易对照卡片 */
defineOptions({ name: 'ComparisonCard' })
const props = defineProps({
title: propTypes.string.def('').isRequired,
tag: propTypes.string.def(''),
prefix: propTypes.string.def(''),
value: propTypes.number.def(0).isRequired,
reference: propTypes.number.def(0).isRequired,
decimals: propTypes.number.def(0)
})
// 计算环比
const percent = computed(() =>
calculateRelativeRate(props.value as number, props.reference as number)
)
</script>
<template>
<el-card shadow="never">
<template #header>
<CardTitle title="用户统计" />
</template>
<!-- 折线图 -->
<Echart :height="300" :options="lineChartOptions" />
</el-card>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs'
import { EChartsOption } from 'echarts'
import * as MemberStatisticsApi from '@/api/mall/statistics/member'
import { formatDate } from '@/utils/formatTime'
import { CardTitle } from '@/components/Card'
/** 会员用户统计卡片 */
defineOptions({ name: 'MemberStatisticsCard' })
const loading = ref(true) // 加载中
/** 折线图配置 */
const lineChartOptions = reactive<EChartsOption>({
dataset: {
dimensions: ['date', 'count'],
source: []
},
grid: {
left: 20,
right: 20,
bottom: 20,
top: 80,
containLabel: true
},
legend: {
top: 50
},
series: [{ name: '注册量', type: 'line', smooth: true, areaStyle: {} }],
toolbox: {
feature: {
// 数据区域缩放
dataZoom: {
yAxisIndex: false // Y轴不缩放
},
brush: {
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
},
saveAsImage: { show: true, name: '会员统计' } // 保存为图片
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show: false
},
axisLabel: {
formatter: (date: string) => formatDate(date, 'MM-DD')
}
},
yAxis: {
axisTick: {
show: false
}
}
}) as EChartsOption
const getMemberRegisterCountList = async () => {
loading.value = true
// 查询最近一月数据
const beginTime = dayjs().subtract(30, 'd').startOf('d')
const endTime = dayjs().endOf('d')
const list = await MemberStatisticsApi.getMemberRegisterCountList(beginTime, endTime)
// 更新 Echarts 数据
if (lineChartOptions.dataset && lineChartOptions.dataset['source']) {
lineChartOptions.dataset['source'] = list
}
loading.value = false
}
/** 初始化 **/
onMounted(() => {
getMemberRegisterCountList()
})
</script>
<template>
<el-card shadow="never">
<template #header>
<CardTitle title="运营数据" />
</template>
<div class="flex flex-row flex-wrap items-center gap-8 p-4">
<div
v-for="item in data"
:key="item.name"
class="h-20 w-20% flex flex-col cursor-pointer items-center justify-center gap-2"
@click="handleClick(item.routerName)"
>
<CountTo
:decimals="item.decimals"
:end-val="item.value"
:prefix="item.prefix"
class="text-3xl"
/>
<span class="text-center">{{ item.name }}</span>
</div>
</div>
</el-card>
</template>
<script lang="ts" setup>
import * as ProductSpuApi from '@/api/mall/product/spu'
import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
import * as PayStatisticsApi from '@/api/mall/statistics/pay'
import { CardTitle } from '@/components/Card'
/** 运营数据卡片 */
defineOptions({ name: 'OperationDataCard' })
const router = useRouter() // 路由
/** 数据 */
const data = reactive({
orderUndelivered: { name: '待发货订单', value: 9, routerName: 'TradeOrder' },
orderAfterSaleApply: { name: '退款中订单', value: 4, routerName: 'TradeAfterSale' },
orderWaitePickUp: { name: '待核销订单', value: 0, routerName: 'TradeOrder' },
productAlertStock: { name: '库存预警', value: 0, routerName: 'ProductSpu' },
productForSale: { name: '上架商品', value: 0, routerName: 'ProductSpu' },
productInWarehouse: { name: '仓库商品', value: 0, routerName: 'ProductSpu' },
withdrawAuditing: { name: '提现待审核', value: 0, routerName: 'TradeBrokerageWithdraw' },
rechargePrice: {
name: '账户充值',
value: 0.0,
prefix: '¥',
decimals: 2,
routerName: 'PayWalletRecharge'
}
})
/** 查询订单数据 */
const getOrderData = async () => {
const orderCount = await TradeStatisticsApi.getOrderCount()
if (orderCount.undelivered != null) {
data.orderUndelivered.value = orderCount.undelivered
}
if (orderCount.afterSaleApply != null) {
data.orderAfterSaleApply.value = orderCount.afterSaleApply
}
if (orderCount.pickUp != null) {
data.orderWaitePickUp.value = orderCount.pickUp
}
if (orderCount.auditingWithdraw != null) {
data.withdrawAuditing.value = orderCount.auditingWithdraw
}
}
/** 查询商品数据 */
const getProductData = async () => {
// TODO: @芋艿:这个接口的返回值,是不是用命名字段更好些?
const productCount = await ProductSpuApi.getTabsCount()
data.productForSale.value = productCount['0']
data.productInWarehouse.value = productCount['1']
data.productAlertStock.value = productCount['3']
}
/** 查询钱包充值数据 */
const getWalletRechargeData = async () => {
const paySummary = await PayStatisticsApi.getWalletRechargePrice()
data.rechargePrice.value = paySummary.rechargePrice
}
/**
* 跳转到对应页面
*
* @param routerName 路由页面组件的名称
*/
const handleClick = (routerName: string) => {
router.push({ name: routerName })
}
/** 激活时 */
onActivated(() => {
getOrderData()
getProductData()
getWalletRechargeData()
})
/** 初始化 **/
onMounted(() => {
getOrderData()
getProductData()
getWalletRechargeData()
})
</script>
<template>
<el-card shadow="never">
<template #header>
<CardTitle title="快捷入口" />
</template>
<div class="flex flex-row flex-wrap gap-8 p-4">
<div
v-for="menu in menuList"
:key="menu.name"
class="h-20 w-20% flex flex-col cursor-pointer items-center justify-center gap-2"
@click="handleMenuClick(menu.routerName)"
>
<div
:class="menu.bgColor"
class="h-48px w-48px flex items-center justify-center rounded text-white"
>
<Icon :icon="menu.icon" class="text-7.5!" />
</div>
<span>{{ menu.name }}</span>
</div>
</div>
</el-card>
</template>
<script lang="ts" setup>
/** 快捷入口卡片 */
import { CardTitle } from '@/components/Card'
defineOptions({ name: 'ShortcutCard' })
const router = useRouter() // 路由
/** 菜单列表 */
const menuList = [
{ name: '用户管理', icon: 'ep:user-filled', bgColor: 'bg-red-400', routerName: 'MemberUser' },
{
name: '商品管理',
icon: 'fluent-mdl2:product',
bgColor: 'bg-orange-400',
routerName: 'ProductSpu'
},
{ name: '订单管理', icon: 'ep:list', bgColor: 'bg-yellow-500', routerName: 'TradeOrder' },
{
name: '售后管理',
icon: 'ri:refund-2-line',
bgColor: 'bg-green-600',
routerName: 'TradeAfterSale'
},
{
name: '分销管理',
icon: 'fa-solid:project-diagram',
bgColor: 'bg-cyan-500',
routerName: 'TradeBrokerageUser'
},
{
name: '优惠券',
icon: 'ep:ticket',
bgColor: 'bg-blue-500',
routerName: 'PromotionCoupon'
},
{
name: '拼团活动',
icon: 'fa:group',
bgColor: 'bg-purple-500',
routerName: 'PromotionBargainActivity'
},
{
name: '佣金提现',
icon: 'vaadin:money-withdraw',
bgColor: 'bg-rose-500',
routerName: 'TradeBrokerageWithdraw'
}
]
/**
* 跳转到菜单对应页面
*
* @param routerName 路由页面组件的名称
*/
const handleMenuClick = (routerName: string) => {
router.push({ name: routerName })
}
</script>
<template>
<el-card shadow="never">
<template #header>
<div class="flex flex-row items-center justify-between">
<CardTitle title="交易量趋势" />
<!-- 查询条件 -->
<div class="flex flex-row items-center gap-2">
<el-radio-group v-model="timeRangeType" @change="handleTimeRangeTypeChange">
<el-radio-button v-for="[key, value] in timeRange.entries()" :key="key" :value="key">
{{ value.name }}
</el-radio-button>
</el-radio-group>
</div>
</div>
</template>
<!-- 折线图 -->
<Echart :height="300" :options="eChartOptions" />
</el-card>
</template>
<script lang="ts" setup>
import dayjs, { Dayjs } from 'dayjs'
import { EChartsOption } from 'echarts'
import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
import { fenToYuan } from '@/utils'
import { formatDate } from '@/utils/formatTime'
import { CardTitle } from '@/components/Card'
/** 交易量趋势 */
defineOptions({ name: 'TradeTrendCard' })
enum TimeRangeTypeEnum {
DAY30 = 1,
WEEK = 7,
MONTH = 30,
YEAR = 365
} // 日期类型
const timeRangeType = ref(TimeRangeTypeEnum.DAY30) // 日期快捷选择按钮, 默认30天
const loading = ref(true) // 加载中
// 时间范围 Map
const timeRange = new Map()
.set(TimeRangeTypeEnum.DAY30, {
name: '30天',
series: [
{ name: '订单金额', type: 'bar', smooth: true, data: [] },
{ name: '订单数量', type: 'line', smooth: true, data: [] }
]
})
.set(TimeRangeTypeEnum.WEEK, {
name: '周',
series: [
{ name: '上周金额', type: 'bar', smooth: true, data: [] },
{ name: '本周金额', type: 'bar', smooth: true, data: [] },
{ name: '上周数量', type: 'line', smooth: true, data: [] },
{ name: '本周数量', type: 'line', smooth: true, data: [] }
]
})
.set(TimeRangeTypeEnum.MONTH, {
name: '月',
series: [
{ name: '上月金额', type: 'bar', smooth: true, data: [] },
{ name: '本月金额', type: 'bar', smooth: true, data: [] },
{ name: '上月数量', type: 'line', smooth: true, data: [] },
{ name: '本月数量', type: 'line', smooth: true, data: [] }
]
})
.set(TimeRangeTypeEnum.YEAR, {
name: '年',
series: [
{ name: '去年金额', type: 'bar', smooth: true, data: [] },
{ name: '今年金额', type: 'bar', smooth: true, data: [] },
{ name: '去年数量', type: 'line', smooth: true, data: [] },
{ name: '今年数量', type: 'line', smooth: true, data: [] }
]
})
/** 图表配置 */
const eChartOptions = reactive<EChartsOption>({
grid: {
left: 20,
right: 20,
bottom: 20,
top: 80,
containLabel: true
},
legend: {
top: 50,
data: []
},
series: [],
toolbox: {
feature: {
// 数据区域缩放
dataZoom: {
yAxisIndex: false // Y轴不缩放
},
brush: {
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
},
saveAsImage: { show: true, name: '订单量趋势' } // 保存为图片
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
xAxis: {
type: 'category',
inverse: true,
boundaryGap: false,
axisTick: {
show: false
},
data: [],
axisLabel: {
formatter: (date: string) => {
switch (timeRangeType.value) {
case TimeRangeTypeEnum.DAY30:
return formatDate(date, 'MM-DD')
case TimeRangeTypeEnum.WEEK:
let weekDay = formatDate(date, 'ddd')
if (weekDay == '0') weekDay = '日'
return '周' + weekDay
case TimeRangeTypeEnum.MONTH:
return formatDate(date, 'D')
case TimeRangeTypeEnum.YEAR:
return formatDate(date, 'M') + '月'
default:
return date
}
}
}
},
yAxis: {
axisTick: {
show: false
}
}
}) as EChartsOption
/** 时间范围类型单选按钮选中 */
const handleTimeRangeTypeChange = async () => {
// 设置时间范围
let beginTime: Dayjs
let endTime: Dayjs
switch (timeRangeType.value) {
case TimeRangeTypeEnum.WEEK:
beginTime = dayjs().startOf('week')
endTime = dayjs().endOf('week')
break
case TimeRangeTypeEnum.MONTH:
beginTime = dayjs().startOf('month')
endTime = dayjs().endOf('month')
break
case TimeRangeTypeEnum.YEAR:
beginTime = dayjs().startOf('year')
endTime = dayjs().endOf('year')
break
case TimeRangeTypeEnum.DAY30:
default:
beginTime = dayjs().subtract(30, 'day').startOf('d')
endTime = dayjs().endOf('d')
break
}
// 发送时间范围选中事件
await getOrderCountTrendComparison(beginTime, endTime)
}
/** 查询订单数量趋势对照数据 */
const getOrderCountTrendComparison = async (
beginTime: dayjs.ConfigType,
endTime: dayjs.ConfigType
) => {
loading.value = true
// 查询数据
const list = await TradeStatisticsApi.getOrderCountTrendComparison(
timeRangeType.value,
beginTime,
endTime
)
// 处理数据
const dates: string[] = []
const series = [...timeRange.get(timeRangeType.value).series]
for (let item of list) {
dates.push(item.value.date)
if (series.length === 2) {
series[0].data.push(fenToYuan(item?.value?.orderPayPrice || 0)) // 当前金额
series[1].data.push(item?.value?.orderPayCount || 0) // 当前数量
} else {
series[0].data.push(fenToYuan(item?.reference?.orderPayPrice || 0)) // 对照金额
series[1].data.push(fenToYuan(item?.value?.orderPayPrice || 0)) // 当前金额
series[2].data.push(item?.reference?.orderPayCount || 0) // 对照数量
series[3].data.push(item?.value?.orderPayCount || 0) // 当前数量
}
}
eChartOptions.xAxis!['data'] = dates
eChartOptions.series = series
// legend在4个切换到2个的时候,还是显示成4个,需要手动配置一下
eChartOptions.legend['data'] = series.map((item) => item.name)
loading.value = false
}
/** 初始化 **/
onMounted(() => {
handleTimeRangeTypeChange()
})
</script>
<template>
<doc-alert title="商城手册(功能开启)" url="https://doc.iocoder.cn/mall/build/" />
<div class="flex flex-col">
<!-- 数据对照 -->
<el-row :gutter="16" class="row">
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
<ComparisonCard
tag="今日"
title="销售额"
prefix="¥"
:decimals="2"
:value="fenToYuan(orderComparison?.value?.orderPayPrice || 0)"
:reference="fenToYuan(orderComparison?.reference?.orderPayPrice || 0)"
/>
</el-col>
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
<ComparisonCard
tag="今日"
title="用户访问量"
:value="userComparison?.value?.visitUserCount || 0"
:reference="userComparison?.reference?.visitUserCount || 0"
/>
</el-col>
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
<ComparisonCard
tag="今日"
title="订单量"
:value="orderComparison?.value?.orderPayCount || 0"
:reference="orderComparison?.reference?.orderPayCount || 0"
/>
</el-col>
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
<ComparisonCard
tag="今日"
title="新增用户"
:value="userComparison?.value?.registerUserCount || 0"
:reference="userComparison?.reference?.registerUserCount || 0"
/>
</el-col>
</el-row>
<el-row :gutter="16" class="row">
<el-col :md="12">
<!-- 快捷入口 -->
<ShortcutCard />
</el-col>
<el-col :md="12">
<!-- 运营数据 -->
<OperationDataCard />
</el-col>
</el-row>
<el-row :gutter="16" class="mb-4">
<el-col :md="18" :sm="24">
<!-- 会员概览 -->
<MemberFunnelCard />
</el-col>
<el-col :md="6" :sm="24">
<!-- 会员终端 -->
<MemberTerminalCard />
</el-col>
</el-row>
<!-- 交易量趋势 -->
<TradeTrendCard class="mb-4" />
<!-- 会员统计 -->
<MemberStatisticsCard />
</div>
</template>
<script lang="ts" setup>
import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
import * as MemberStatisticsApi from '@/api/mall/statistics/member'
import { DataComparisonRespVO } from '@/api/mall/statistics/common'
import { TradeOrderSummaryRespVO } from '@/api/mall/statistics/trade'
import { MemberCountRespVO } from '@/api/mall/statistics/member'
import { fenToYuan } from '@/utils'
import ComparisonCard from './components/ComparisonCard.vue'
import MemberStatisticsCard from './components/MemberStatisticsCard.vue'
import OperationDataCard from './components/OperationDataCard.vue'
import ShortcutCard from './components/ShortcutCard.vue'
import TradeTrendCard from './components/TradeTrendCard.vue'
import MemberTerminalCard from '@/views/mall/statistics/member/components/MemberTerminalCard.vue'
import MemberFunnelCard from '@/views/mall/statistics/member/components/MemberFunnelCard.vue'
/** 商城首页 */
defineOptions({ name: 'MallHome' })
const loading = ref(true) // 加载中
const orderComparison = ref<DataComparisonRespVO<TradeOrderSummaryRespVO>>() // 交易对照数据
const userComparison = ref<DataComparisonRespVO<MemberCountRespVO>>() // 用户对照数据
/** 查询交易对照卡片数据 */
const getOrderComparison = async () => {
orderComparison.value = await TradeStatisticsApi.getOrderComparison()
}
/** 查询会员用户数量对照卡片数据 */
const getUserCountComparison = async () => {
userComparison.value = await MemberStatisticsApi.getUserCountComparison()
}
/** 初始化 **/
onMounted(async () => {
loading.value = true
await Promise.all([getOrderComparison(), getUserCountComparison()])
loading.value = false
})
</script>
<style lang="scss" scoped>
.row {
.el-col {
margin-bottom: 1rem;
}
}
</style>
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="80px"
v-loading="formLoading"
>
<el-form-item label="品牌名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入品牌名称" />
</el-form-item>
<el-form-item label="品牌图片" prop="picUrl">
<UploadImg v-model="formData.picUrl" :limit="1" :is-show-tip="false" />
</el-form-item>
<el-form-item label="品牌排序" prop="sort">
<el-input-number v-model="formData.sort" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="品牌状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:value="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="品牌描述">
<el-input v-model="formData.description" type="textarea" placeholder="请输入品牌描述" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { CommonStatusEnum } from '@/utils/constants'
import * as ProductBrandApi from '@/api/mall/product/brand'
defineOptions({ name: 'ProductBrandForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formType = ref('') // 表单的类型:create - 新增;update - 修改
const formData = ref({
id: undefined,
name: '',
picUrl: '',
status: CommonStatusEnum.ENABLE,
description: ''
})
const formRules = reactive({
name: [{ required: true, message: '品牌名称不能为空', trigger: 'blur' }],
picUrl: [{ required: true, message: '品牌图片不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '品牌排序不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await ProductBrandApi.getBrand(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as ProductBrandApi.BrandVO
if (formType.value === 'create') {
await ProductBrandApi.createBrand(data)
message.success(t('common.createSuccess'))
} else {
await ProductBrandApi.updateBrand(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
name: '',
picUrl: '',
status: CommonStatusEnum.ENABLE,
description: ''
}
formRef.value?.resetFields()
}
</script>
<template>
<doc-alert title="商城手册(功能开启)" url="https://doc.iocoder.cn/mall/build/" />
<!-- 搜索工作栏 -->
<ContentWrap>
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="品牌名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入品牌名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['product:brand:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" row-key="id" default-expand-all>
<el-table-column label="品牌名称" prop="name" sortable />
<el-table-column label="品牌图片" align="center" prop="picUrl">
<template #default="scope">
<img v-if="scope.row.picUrl" :src="scope.row.picUrl" alt="品牌图片" class="h-30px" />
</template>
</el-table-column>
<el-table-column label="品牌排序" align="center" prop="sort" />
<el-table-column label="开启状态" align="center" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['product:brand:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['product:brand:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗:添加/修改 -->
<BrandForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as ProductBrandApi from '@/api/mall/product/brand'
import BrandForm from './BrandForm.vue'
defineOptions({ name: 'ProductBrand' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref<any[]>([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: undefined,
status: undefined,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await ProductBrandApi.getBrandParam(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await ProductBrandApi.deleteBrand(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="120px"
v-loading="formLoading"
>
<el-form-item label="上级分类" prop="parentId">
<el-select v-model="formData.parentId" placeholder="请选择上级分类">
<el-option :key="0" label="顶级分类" :value="0" />
<el-option
v-for="item in categoryList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="分类名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入分类名称" />
</el-form-item>
<el-form-item label="移动端分类图" prop="picUrl">
<UploadImg v-model="formData.picUrl" :limit="1" :is-show-tip="false" />
<div style="font-size: 10px" class="pl-10px">推荐 180x180 图片分辨率</div>
</el-form-item>
<el-form-item label="分类排序" prop="sort">
<el-input-number v-model="formData.sort" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="开启状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:value="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { CommonStatusEnum } from '@/utils/constants'
import * as ProductCategoryApi from '@/api/mall/product/category'
defineOptions({ name: 'ProductCategory' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formType = ref('') // 表单的类型:create - 新增;update - 修改
const formData = ref({
id: undefined,
name: '',
picUrl: '',
status: CommonStatusEnum.ENABLE
})
const formRules = reactive({
parentId: [{ required: true, message: '请选择上级分类', trigger: 'blur' }],
name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
picUrl: [{ required: true, message: '分类图片不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '分类排序不能为空', trigger: 'blur' }],
status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const categoryList = ref<any[]>([]) // 分类树
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await ProductCategoryApi.getCategory(id)
} finally {
formLoading.value = false
}
}
// 获得分类树
categoryList.value = await ProductCategoryApi.getCategoryList({ parentId: 0 })
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as ProductCategoryApi.CategoryVO
if (formType.value === 'create') {
await ProductCategoryApi.createCategory(data)
message.success(t('common.createSuccess'))
} else {
await ProductCategoryApi.updateCategory(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
name: '',
picUrl: '',
status: CommonStatusEnum.ENABLE
}
formRef.value?.resetFields()
}
</script>
<template>
<el-tree-select
v-model="selectCategoryId"
:data="categoryList"
:props="defaultProps"
:multiple="multiple"
:show-checkbox="multiple"
class="w-1/1"
node-key="id"
placeholder="请选择商品分类"
/>
</template>
<script lang="ts" setup>
import { defaultProps, handleTree } from '@/utils/tree'
import * as ProductCategoryApi from '@/api/mall/product/category'
import { oneOfType } from 'vue-types'
import { propTypes } from '@/utils/propTypes'
/** 商品分类选择组件 */
defineOptions({ name: 'ProductCategorySelect' })
const props = defineProps({
// 选中的ID
modelValue: oneOfType<number | number[]>([Number, Array<Number>]),
// 是否多选
multiple: propTypes.bool.def(false),
// 上级品类的编号
parentId: propTypes.number.def(undefined)
})
/** 选中的分类 ID */
const selectCategoryId = computed({
get: () => {
return props.modelValue
},
set: (val: number | number[]) => {
emit('update:modelValue', val)
}
})
/** 分类选择 */
const emit = defineEmits(['update:modelValue'])
/** 初始化 **/
const categoryList = ref<ProductCategoryApi.CategoryVO[]>([]) // 分类树
onMounted(async () => {
// 获得分类树
const data = await ProductCategoryApi.getCategoryList({ parentId: props.parentId })
categoryList.value = handleTree(data, 'id', 'parentId')
})
</script>
<template>
<doc-alert title="【商品】商品分类" url="https://doc.iocoder.cn/mall/product-category/" />
<!-- 搜索工作栏 -->
<ContentWrap>
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="分类名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入分类名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['product:category:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" row-key="id" default-expand-all>
<el-table-column label="名称" min-width="240" prop="name" sortable />
<el-table-column label="分类图标" align="center" min-width="80" prop="picUrl">
<template #default="scope">
<img :src="scope.row.picUrl" alt="移动端分类图" class="h-36px" />
</template>
</el-table-column>
<el-table-column label="排序" align="center" min-width="150" prop="sort" />
<el-table-column label="状态" align="center" min-width="150" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="操作" align="center" min-width="180">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['product:category:update']"
>
编辑
</el-button>
<el-button
link
type="primary"
v-if="scope.row.parentId > 0"
@click="handleViewSpu(scope.row.id)"
v-hasPermi="['product:spu:query']"
>
查看商品
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['product:category:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</ContentWrap>
<!-- 表单弹窗:添加/修改 -->
<CategoryForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { handleTree } from '@/utils/tree'
import { dateFormatter } from '@/utils/formatTime'
import * as ProductCategoryApi from '@/api/mall/product/category'
import CategoryForm from './CategoryForm.vue'
defineOptions({ name: 'ProductCategory' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<any[]>([]) // 列表的数据
const queryParams = reactive({
name: undefined
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await ProductCategoryApi.getCategoryList(queryParams)
list.value = handleTree(data, 'id', 'parentId')
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await ProductCategoryApi.deleteCategory(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 查看商品操作 */
const router = useRouter() // 路由
const handleViewSpu = (id: number) => {
router.push({
name: 'ProductSpu',
query: { categoryId: id }
})
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<template>
<Dialog v-model="dialogVisible" title="添加虚拟评论">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="formRules"
label-width="100px"
>
<el-form-item label="商品" prop="spuId">
<SpuShowcase v-model="formData.spuId" :limit="1" />
</el-form-item>
<el-form-item v-if="formData.spuId" label="商品规格" prop="skuId">
<div class="h-60px w-60px" @click="handleSelectSku">
<div v-if="skuData && skuData.picUrl">
<el-image :src="skuData.picUrl" />
</div>
<div v-else class="select-box">
<Icon icon="ep:plus" />
</div>
</div>
</el-form-item>
<el-form-item label="用户头像" prop="userAvatar">
<UploadImg v-model="formData.userAvatar" height="60px" width="60px" />
</el-form-item>
<el-form-item label="用户名称" prop="userNickname">
<el-input v-model="formData.userNickname" placeholder="请输入用户名称" />
</el-form-item>
<el-form-item label="评论内容" prop="content">
<el-input v-model="formData.content" type="textarea" />
</el-form-item>
<el-form-item label="描述星级" prop="descriptionScores">
<el-rate v-model="formData.descriptionScores" />
</el-form-item>
<el-form-item label="服务星级" prop="benefitScores">
<el-rate v-model="formData.benefitScores" />
</el-form-item>
<el-form-item label="评论图片" prop="picUrls">
<UploadImgs v-model="formData.picUrls" :limit="9" height="60px" width="60px" />
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
<SkuTableSelect ref="skuTableSelectRef" :spu-id="formData.spuId" @change="handleSkuChange" />
</template>
<script lang="ts" setup>
import * as CommentApi from '@/api/mall/product/comment'
import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
import * as ProductSpuApi from '@/api/mall/product/spu'
import SkuTableSelect from '@/views/mall/product/spu/components/SkuTableSelect.vue'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formType = ref('') // 表单的类型:create - 新增;update - 修改
const formData = ref({
id: undefined,
userId: undefined,
userNickname: undefined,
userAvatar: undefined,
spuId: 0,
skuId: undefined,
descriptionScores: 5,
benefitScores: 5,
content: undefined,
picUrls: []
})
const formRules = reactive({
spuId: [{ required: true, message: '商品不能为空', trigger: 'blur' }],
skuId: [{ required: true, message: '规格不能为空', trigger: 'blur' }],
userAvatar: [{ required: true, message: '用户头像不能为空', trigger: 'blur' }],
userNickname: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
content: [{ required: true, message: '评论内容不能为空', trigger: 'blur' }],
descriptionScores: [{ required: true, message: '描述星级不能为空', trigger: 'blur' }],
benefitScores: [{ required: true, message: '服务星级不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const skuData = ref({
id: -1,
name: '',
picUrl: ''
})
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await CommentApi.getComment(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
if (formType.value === 'create') {
await CommentApi.createComment(unref(formData.value) as any)
message.success(t('common.createSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
userId: undefined,
userNickname: undefined,
userAvatar: undefined,
spuId: 0,
skuId: undefined,
descriptionScores: 5,
benefitScores: 5,
content: undefined,
picUrls: []
}
formRef.value?.resetFields()
}
/** SKU 表格选择 */
const skuTableSelectRef = ref()
const handleSelectSku = () => {
skuTableSelectRef.value.open()
}
const handleSkuChange = (sku: ProductSpuApi.Sku) => {
skuData.value = sku
formData.value.skuId = sku.id
}
</script>
<style>
.select-box {
display: flex;
width: 100%;
height: 100%;
border: 1px dashed var(--el-border-color-darker);
border-radius: 8px;
align-items: center;
justify-content: center;
}
</style>
<template>
<Dialog title="回复" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="回复内容" prop="replyContent">
<el-input type="textarea" v-model="formData.replyContent" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitReplyForm" type="primary" :disabled="formLoading">确 定 </el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import * as CommentApi from '@/api/mall/product/comment'
import { ElInput } from 'element-plus'
defineOptions({ name: 'ProductComment' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formData = ref({
id: undefined,
replyContent: undefined
})
const formRules = reactive({
replyContent: [{ required: true, message: '回复内容不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (id?: number) => {
resetForm()
formData.value.id = id
dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitReplyForm = async () => {
// 校验表单
const valid = await formRef?.value?.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
await CommentApi.replyComment(formData.value)
message.success(t('common.createSuccess'))
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
replyContent: undefined
}
formRef.value?.resetFields()
}
</script>
<template>
<doc-alert title="【商品】商品评价" url="https://doc.iocoder.cn/mall/product-comment/" />
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="回复状态" prop="replyStatus">
<el-select v-model="queryParams.replyStatus" class="!w-240px">
<el-option label="已回复" :value="true" />
<el-option label="未回复" :value="false" />
</el-select>
</el-form-item>
<el-form-item label="商品名称" prop="spuName">
<el-input
v-model="queryParams.spuName"
placeholder="请输入商品名称"
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="用户名称" prop="userNickname">
<el-input
v-model="queryParams.userNickname"
placeholder="请输入用户名称"
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="订单编号" prop="orderId">
<el-input
v-model="queryParams.orderId"
placeholder="请输入订单编号"
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="评论时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" />
重置
</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['product:comment:create']"
>
<Icon icon="ep:plus" class="mr-5px" />
添加虚拟评论
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="false">
<el-table-column label="评论编号" align="center" prop="id" min-width="80" />
<el-table-column label="商品信息" align="center" min-width="400">
<template #default="scope">
<div class="row flex items-center gap-x-4px">
<el-image
v-if="scope.row.skuPicUrl"
:src="scope.row.skuPicUrl"
:preview-src-list="[scope.row.skuPicUrl]"
class="h-40px w-40px shrink-0"
preview-teleported
/>
<div>{{ scope.row.spuName }}</div>
<el-tag
v-for="property in scope.row.skuProperties"
:key="property.propertyId"
class="mr-10px"
>
{{ property.propertyName }}: {{ property.valueName }}
</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="用户名称" align="center" prop="userNickname" width="100" />
<el-table-column label="商品评分" align="center" prop="descriptionScores" width="90" />
<el-table-column label="服务评分" align="center" prop="benefitScores" width="90" />
<el-table-column label="评论内容" align="center" prop="content" min-width="210">
<template #default="scope">
<p>{{ scope.row.content }}</p>
<div class="flex justify-center gap-x-4px">
<el-image
v-for="(picUrl, index) in scope.row.picUrls"
:key="index"
:src="picUrl"
:preview-src-list="scope.row.picUrls"
:initial-index="index"
class="h-40px w-40px"
preview-teleported
/>
</div>
</template>
</el-table-column>
<el-table-column
label="回复内容"
align="center"
prop="replyContent"
min-width="250"
show-overflow-tooltip
/>
<el-table-column
label="评论时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180"
/>
<el-table-column label="是否展示" align="center" width="80px">
<template #default="scope">
<el-switch
v-model="scope.row.visible"
:active-value="true"
:inactive-value="false"
v-hasPermi="['product:comment:update']"
@change="handleVisibleChange(scope.row)"
/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" min-width="60px" fixed="right">
<template #default="scope">
<el-button
link
type="primary"
@click="handleReply(scope.row.id)"
v-hasPermi="['product:comment:update']"
>
回复
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗:添加/修改 -->
<CommentForm ref="formRef" @success="getList" />
<!-- 回复表单弹窗 -->
<ReplyForm ref="replyFormRef" @success="getList" />
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import * as CommentApi from '@/api/mall/product/comment'
import CommentForm from './CommentForm.vue'
import ReplyForm from './ReplyForm.vue'
defineOptions({ name: 'ProductComment' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
replyStatus: null,
spuName: null,
userNickname: null,
orderId: null,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await CommentApi.getCommentPage(queryParams)
// visible 如果为 null,会导致刷新的时候触发 e-switch 的 change 事件
data.list.forEach((item) => {
if (!item.visible) {
item.visible = false
}
})
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 回复按钮操作 **/
const replyFormRef = ref()
const handleReply = (id: number) => {
replyFormRef.value.open(id)
}
/** 显示/隐藏 **/
const handleVisibleChange = async (row: CommentApi.CommentVO) => {
if (loading.value) {
return
}
let changedValue = row.visible
try {
await message.confirm(changedValue ? '是否显示评论?' : '是否隐藏评论?')
await CommentApi.updateCommentVisible({ id: row.id, visible: changedValue })
await getList()
} catch {
row.visible = !changedValue
}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<template>
<Dialog v-model="dialogVisible" :title="dialogTitle">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="formRules"
label-width="80px"
>
<el-form-item label="名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" />
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import * as PropertyApi from '@/api/mall/product/property'
defineOptions({ name: 'ProductPropertyForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formType = ref('') // 表单的类型:create - 新增;update - 修改
const formData = ref({
id: undefined,
name: ''
})
const formRules = reactive({
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await PropertyApi.getProperty(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as PropertyApi.PropertyVO
if (formType.value === 'create') {
await PropertyApi.createProperty(data)
message.success(t('common.createSuccess'))
} else {
await PropertyApi.updateProperty(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
name: ''
}
formRef.value?.resetFields()
}
</script>
<template>
<doc-alert title="【商品】商品属性" url="https://doc.iocoder.cn/mall/product-property/" />
<!-- 搜索工作栏 -->
<ContentWrap>
<el-form
ref="queryFormRef"
:inline="true"
:model="queryParams"
class="-mb-15px"
label-width="68px"
>
<el-form-item label="名称" prop="name">
<el-input
v-model="queryParams.name"
class="!w-240px"
clearable
placeholder="请输入名称"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
end-placeholder="结束日期"
start-placeholder="开始日期"
type="daterange"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon class="mr-5px" icon="ep:search" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon class="mr-5px" icon="ep:refresh" />
重置
</el-button>
<el-button
v-hasPermi="['product:property:create']"
plain
type="primary"
@click="openForm('create')"
>
<Icon class="mr-5px" icon="ep:plus" />
新增
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column align="center" label="编号" min-width="60" prop="id" />
<el-table-column align="center" label="属性名称" prop="name" min-width="150" />
<el-table-column :show-overflow-tooltip="true" align="center" label="备注" prop="remark" />
<el-table-column
:formatter="dateFormatter"
align="center"
label="创建时间"
prop="createTime"
width="180"
/>
<el-table-column align="center" label="操作">
<template #default="scope">
<el-button
v-hasPermi="['product:property:update']"
link
type="primary"
@click="openForm('update', scope.row.id)"
>
编辑
</el-button>
<el-button link type="primary" @click="goValueList(scope.row.id)">属性值</el-button>
<el-button
v-hasPermi="['product:property:delete']"
link
type="danger"
@click="handleDelete(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNo"
:total="total"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗:添加/修改 -->
<PropertyForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
import * as PropertyApi from '@/api/mall/product/property'
import PropertyForm from './PropertyForm.vue'
const { push } = useRouter()
defineOptions({ name: 'ProductProperty' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: undefined,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await PropertyApi.getPropertyPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await PropertyApi.deleteProperty(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 跳转商品属性列表 */
const goValueList = (id: number) => {
push({ name: 'ProductPropertyValue', params: { propertyId: id } })
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<template>
<Dialog v-model="dialogVisible" :title="dialogTitle">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="formRules"
label-width="80px"
>
<el-form-item label="属性编号" prop="category">
<el-input v-model="formData.propertyId" disabled="" />
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" />
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import * as PropertyApi from '@/api/mall/product/property'
defineOptions({ name: 'ProductPropertyValueForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formType = ref('') // 表单的类型:create - 新增;update - 修改
const formData = ref({
id: undefined,
propertyId: undefined,
name: '',
remark: ''
})
const formRules = reactive({
propertyId: [{ required: true, message: '属性不能为空', trigger: 'blur' }],
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, propertyId: number, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
formData.value.propertyId = propertyId
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await PropertyApi.getPropertyValue(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as PropertyApi.PropertyValueVO
if (formType.value === 'create') {
await PropertyApi.createPropertyValue(data)
message.success(t('common.createSuccess'))
} else {
await PropertyApi.updatePropertyValue(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
propertyId: undefined,
name: '',
remark: ''
}
formRef.value?.resetFields()
}
</script>
<template>
<!-- 搜索工作栏 -->
<ContentWrap>
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="属性项" prop="propertyId">
<el-select v-model="queryParams.propertyId" class="!w-240px" disabled>
<el-option
v-for="item in propertyOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
plain
type="primary"
@click="openForm('create')"
v-hasPermi="['product:property:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" min-width="60" prop="id" />
<el-table-column label="属性值名称" align="center" min-width="150" prop="name" />
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['product:property:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['product:property:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗:添加/修改 -->
<ValueForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
import * as PropertyApi from '@/api/mall/product/property'
import ValueForm from './ValueForm.vue'
defineOptions({ name: 'ProductPropertyValue' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const { params } = useRoute() // 查询参数
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
propertyId: params.propertyId,
name: undefined
})
const queryFormRef = ref() // 搜索的表单
const propertyOptions = ref([]) // 属性项的列表
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await PropertyApi.getPropertyValuePage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, queryParams.propertyId, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await PropertyApi.deletePropertyValue(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 初始化 **/
onMounted(async () => {
await getList()
// 属性项下拉框数据
propertyOptions.value.push(await PropertyApi.getProperty(queryParams.propertyId))
})
</script>
<template>
<Dialog v-model="dialogVisible" :appendToBody="true" title="选择规格" width="700">
<el-table v-loading="loading" :data="list" show-overflow-tooltip>
<el-table-column label="#" width="55">
<template #default="{ row }">
<el-radio :value="row.id" v-model="selectedSkuId" @change="handleSelected(row)"
>&nbsp;
</el-radio>
</template>
</el-table-column>
<el-table-column label="图片" min-width="80">
<template #default="{ row }">
<el-image
:src="row.picUrl"
class="h-30px w-30px"
:preview-src-list="[row.picUrl]"
preview-teleported
/>
</template>
</el-table-column>
<el-table-column label="规格" align="center" min-width="80">
<template #default="{ row }">
{{ row.properties?.map((p) => p.valueName)?.join(' ') }}
</template>
</el-table-column>
<el-table-column align="center" label="销售价(元)" min-width="80">
<template #default="{ row }">
{{ fenToYuan(row.price) }}
</template>
</el-table-column>
</el-table>
</Dialog>
</template>
<script lang="ts" setup>
import { ElTable } from 'element-plus'
import * as ProductSpuApi from '@/api/mall/product/spu'
import { propTypes } from '@/utils/propTypes'
import { fenToYuan } from '@/utils'
defineOptions({ name: 'SkuTableSelect' })
const props = defineProps({
spuId: propTypes.number.def(null)
})
const message = useMessage() // 消息弹窗
const list = ref<any[]>([]) // 列表的数据
const loading = ref(false) // 列表的加载中
const dialogVisible = ref(false) // 弹窗的是否展示
const selectedSkuId = ref() // 选中的商品 spuId
/** 选中时触发 */
const handleSelected = (row: ProductSpuApi.Sku) => {
emits('change', row)
// 关闭弹窗
dialogVisible.value = false
selectedSkuId.value = undefined
}
// 确认选择时的触发事件
const emits = defineEmits<{
(e: 'change', spu: ProductSpuApi.Sku): void
}>()
/** 打开弹窗 */
const open = () => {
dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 查询列表 */
const getSpuDetail = async () => {
loading.value = true
try {
const spu = await ProductSpuApi.getSpu(props.spuId)
list.value = spu.skus
} finally {
loading.value = false
}
}
/** 初始化 **/
onMounted(async () => {})
watch(
() => props.spuId,
() => {
if (!props.spuId) {
return
}
getSpuDetail()
}
)
</script>
<template>
<div class="flex flex-wrap items-center gap-8px">
<div v-for="(spu, index) in productSpus" :key="spu.id" class="select-box spu-pic">
<el-tooltip :content="spu.name">
<div class="relative h-full w-full">
<el-image :src="spu.picUrl" class="h-full w-full" />
<Icon
v-show="!disabled"
class="del-icon"
icon="ep:circle-close-filled"
@click="handleRemoveSpu(index)"
/>
</div>
</el-tooltip>
</div>
<el-tooltip content="选择商品" v-if="canAdd">
<div class="select-box" @click="openSpuTableSelect">
<Icon icon="ep:plus" />
</div>
</el-tooltip>
</div>
<!-- 商品选择对话框(表格形式) -->
<SpuTableSelect ref="spuTableSelectRef" :multiple="limit != 1" @change="handleSpuSelected" />
</template>
<script lang="ts" setup>
import * as ProductSpuApi from '@/api/mall/product/spu'
import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue'
import { propTypes } from '@/utils/propTypes'
import { oneOfType } from 'vue-types'
import { isArray } from '@/utils/is'
// 商品橱窗,一般用于与商品建立关系时使用
// 提供功能:展示商品列表、添加商品、移除商品
defineOptions({ name: 'SpuShowcase' })
const props = defineProps({
modelValue: oneOfType<number | Array<number>>([Number, Array]).isRequired,
// 限制数量:默认不限制
limit: propTypes.number.def(Number.MAX_VALUE),
disabled: propTypes.bool.def(false)
})
// 计算是否可以添加
const canAdd = computed(() => {
// 情况一:禁用时不可以添加
if (props.disabled) return false
// 情况二:未指定限制数量时,可以添加
if (!props.limit) return true
// 情况三:检查已添加数量是否小于限制数量
return productSpus.value.length < props.limit
})
// 商品列表
const productSpus = ref<ProductSpuApi.Spu[]>([])
watch(
() => props.modelValue,
async () => {
const ids = isArray(props.modelValue)
? // 情况一:多选
props.modelValue
: // 情况二:单选
props.modelValue
? [props.modelValue]
: []
// 不需要返显
if (ids.length === 0) {
productSpus.value = []
return
}
// 只有商品发生变化之后,才去查询商品
if (productSpus.value.length === 0 || productSpus.value.some((spu) => !ids.includes(spu.id!))) {
productSpus.value = await ProductSpuApi.getSpuDetailList(ids)
}
},
{ immediate: true }
)
/** 商品表格选择对话框 */
const spuTableSelectRef = ref()
// 打开对话框
const openSpuTableSelect = () => {
spuTableSelectRef.value.open(productSpus.value)
}
/**
* 选择商品后触发
*
* @param spus 选中的商品列表
*/
const handleSpuSelected = (spus: ProductSpuApi.Spu | ProductSpuApi.Spu[]) => {
productSpus.value = isArray(spus) ? spus : [spus]
emitSpuChange()
}
/**
* 删除商品
*
* @param index 商品索引
*/
const handleRemoveSpu = (index: number) => {
productSpus.value.splice(index, 1)
emitSpuChange()
}
const emit = defineEmits(['update:modelValue', 'change'])
const emitSpuChange = () => {
if (props.limit === 1) {
const spu = productSpus.value.length > 0 ? productSpus.value[0] : null
emit('update:modelValue', spu?.id || 0)
emit('change', spu)
} else {
emit(
'update:modelValue',
productSpus.value.map((spu) => spu.id)
)
emit('change', productSpus.value)
}
}
</script>
<style lang="scss" scoped>
.select-box {
display: flex;
width: 60px;
height: 60px;
border: 1px dashed var(--el-border-color-darker);
border-radius: 8px;
align-items: center;
justify-content: center;
}
.spu-pic {
position: relative;
}
.del-icon {
position: absolute;
top: -10px;
right: -10px;
z-index: 1;
width: 20px !important;
height: 20px !important;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment