forked from gxwebsoft/mp-10550
feat(ticket): 添加水票功能模块
- 新增水票相关API接口，包括水票模板、用户水票、消费日志和水票释放功能 - 添加水票管理页面，实现水票的增删改查和详情展示功能 - 实现水票的分页查询和列表展示界面 - 替换原有的礼品卡功能为水票功能，在首页导航中更新路由链接 - 添加水票详情页面，支持二维码展示和兑换码复制功能 - 实现水票的状态管理和使用流程控制
This commit is contained in:
105
src/api/glt/gltTicketTemplate/index.ts
Normal file
105
src/api/glt/gltTicketTemplate/index.ts
Normal file
@@ -0,0 +1,105 @@
|
||||
import request from '@/utils/request';
|
||||
import type { ApiResult, PageResult } from '@/api';
|
||||
import type { GltTicketTemplate, GltTicketTemplateParam } from './model';
|
||||
|
||||
/**
|
||||
* 分页查询水票
|
||||
*/
|
||||
export async function pageGltTicketTemplate(params: GltTicketTemplateParam) {
|
||||
const res = await request.get<ApiResult<PageResult<GltTicketTemplate>>>(
|
||||
'/glt/glt-ticket-template/page',
|
||||
{
|
||||
params
|
||||
}
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询水票列表
|
||||
*/
|
||||
export async function listGltTicketTemplate(params?: GltTicketTemplateParam) {
|
||||
const res = await request.get<ApiResult<GltTicketTemplate[]>>(
|
||||
'/glt/glt-ticket-template',
|
||||
{
|
||||
params
|
||||
}
|
||||
);
|
||||
if (res.code === 0 && res.data) {
|
||||
return res.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加水票
|
||||
*/
|
||||
export async function addGltTicketTemplate(data: GltTicketTemplate) {
|
||||
const res = await request.post<ApiResult<unknown>>(
|
||||
'/glt/glt-ticket-template',
|
||||
data
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改水票
|
||||
*/
|
||||
export async function updateGltTicketTemplate(data: GltTicketTemplate) {
|
||||
const res = await request.put<ApiResult<unknown>>(
|
||||
'/glt/glt-ticket-template',
|
||||
data
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除水票
|
||||
*/
|
||||
export async function removeGltTicketTemplate(id?: number) {
|
||||
const res = await request.del<ApiResult<unknown>>(
|
||||
'/glt/glt-ticket-template/' + id
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除水票
|
||||
*/
|
||||
export async function removeBatchGltTicketTemplate(data: (number | undefined)[]) {
|
||||
const res = await request.del<ApiResult<unknown>>(
|
||||
'/glt/glt-ticket-template/batch',
|
||||
{
|
||||
data
|
||||
}
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据id查询水票
|
||||
*/
|
||||
export async function getGltTicketTemplate(id: number) {
|
||||
const res = await request.get<ApiResult<GltTicketTemplate>>(
|
||||
'/glt/glt-ticket-template/' + id
|
||||
);
|
||||
if (res.code === 0 && res.data) {
|
||||
return res.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
55
src/api/glt/gltTicketTemplate/model/index.ts
Normal file
55
src/api/glt/gltTicketTemplate/model/index.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
import type { PageParam } from '@/api';
|
||||
|
||||
/**
|
||||
* 水票
|
||||
*/
|
||||
export interface GltTicketTemplate {
|
||||
//
|
||||
id?: number;
|
||||
// 关联商品ID
|
||||
goodsId?: number;
|
||||
// 名称
|
||||
name?: string;
|
||||
// 启用
|
||||
enabled?: boolean;
|
||||
// 单位名称
|
||||
unitName?: string;
|
||||
// 最小购买数量
|
||||
minBuyQty?: number;
|
||||
// 起始发送数量
|
||||
startSendQty?: number;
|
||||
// 买赠：买1送4 => gift_multiplier=4
|
||||
giftMultiplier?: number;
|
||||
// 是否把购买量也计入套票总量（默认仅计入赠送量）
|
||||
includeBuyQty?: boolean;
|
||||
// 每期释放数量（默认每月释放10）
|
||||
monthlyReleaseQty?: number;
|
||||
// 总共释放多少期（若配置>0，则按期数平均分摊）
|
||||
releasePeriods?: number;
|
||||
// 首期释放时机：0=支付成功当刻；1=下个月同日
|
||||
firstReleaseMode?: number;
|
||||
// 用户ID
|
||||
userId?: number;
|
||||
// 排序(数字越小越靠前)
|
||||
sortNumber?: number;
|
||||
// 备注
|
||||
comments?: string;
|
||||
// 状态, 0正常, 1冻结
|
||||
status?: number;
|
||||
// 是否删除, 0否, 1是
|
||||
deleted?: number;
|
||||
// 租户id
|
||||
tenantId?: number;
|
||||
// 创建时间
|
||||
createTime?: string;
|
||||
// 修改时间
|
||||
updateTime?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 水票搜索条件
|
||||
*/
|
||||
export interface GltTicketTemplateParam extends PageParam {
|
||||
id?: number;
|
||||
keywords?: string;
|
||||
}
|
||||
105
src/api/glt/gltUserTicket/index.ts
Normal file
105
src/api/glt/gltUserTicket/index.ts
Normal file
@@ -0,0 +1,105 @@
|
||||
import request from '@/utils/request';
|
||||
import type { ApiResult, PageResult } from '@/api';
|
||||
import type { GltUserTicket, GltUserTicketParam } from './model';
|
||||
|
||||
/**
|
||||
* 分页查询我的水票
|
||||
*/
|
||||
export async function pageGltUserTicket(params: GltUserTicketParam) {
|
||||
const res = await request.get<ApiResult<PageResult<GltUserTicket>>>(
|
||||
'/glt/glt-user-ticket/page',
|
||||
{
|
||||
params
|
||||
}
|
||||
);
|
||||
if (res.code === 0 && res.data) {
|
||||
return res.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询我的水票列表
|
||||
*/
|
||||
export async function listGltUserTicket(params?: GltUserTicketParam) {
|
||||
const res = await request.get<ApiResult<GltUserTicket[]>>(
|
||||
'/glt/glt-user-ticket',
|
||||
{
|
||||
params
|
||||
}
|
||||
);
|
||||
if (res.code === 0 && res.data) {
|
||||
return res.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加我的水票
|
||||
*/
|
||||
export async function addGltUserTicket(data: GltUserTicket) {
|
||||
const res = await request.post<ApiResult<unknown>>(
|
||||
'/glt/glt-user-ticket',
|
||||
data
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改我的水票
|
||||
*/
|
||||
export async function updateGltUserTicket(data: GltUserTicket) {
|
||||
const res = await request.put<ApiResult<unknown>>(
|
||||
'/glt/glt-user-ticket',
|
||||
data
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除我的水票
|
||||
*/
|
||||
export async function removeGltUserTicket(id?: number) {
|
||||
const res = await request.del<ApiResult<unknown>>(
|
||||
'/glt/glt-user-ticket/' + id
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除我的水票
|
||||
*/
|
||||
export async function removeBatchGltUserTicket(data: (number | undefined)[]) {
|
||||
const res = await request.del<ApiResult<unknown>>(
|
||||
'/glt/glt-user-ticket/batch',
|
||||
{
|
||||
data
|
||||
}
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据id查询我的水票
|
||||
*/
|
||||
export async function getGltUserTicket(id: number) {
|
||||
const res = await request.get<ApiResult<GltUserTicket>>(
|
||||
'/glt/glt-user-ticket/' + id
|
||||
);
|
||||
if (res.code === 0 && res.data) {
|
||||
return res.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
66
src/api/glt/gltUserTicket/model/index.ts
Normal file
66
src/api/glt/gltUserTicket/model/index.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
import type { PageParam } from '@/api';
|
||||
|
||||
/**
|
||||
* 我的水票
|
||||
*/
|
||||
export interface GltUserTicket {
|
||||
//
|
||||
id?: number;
|
||||
// 模板ID
|
||||
templateId?: number;
|
||||
// 模板名称
|
||||
templateName?: string;
|
||||
// 商品ID
|
||||
goodsId?: number;
|
||||
// 订单ID
|
||||
orderId?: number;
|
||||
// 订单编号
|
||||
orderNo?: string;
|
||||
// 订单商品ID
|
||||
orderGoodsId?: number;
|
||||
// 总数量
|
||||
totalQty?: number;
|
||||
// 可用数量
|
||||
availableQty?: number;
|
||||
// 冻结数量
|
||||
frozenQty?: number;
|
||||
// 已使用数量
|
||||
usedQty?: number;
|
||||
// 已释放数量
|
||||
releasedQty?: number;
|
||||
// 用户ID
|
||||
userId?: number;
|
||||
// 用户昵称
|
||||
nickname?: string;
|
||||
// 用户头像
|
||||
avatar?: string;
|
||||
// 用户手机号
|
||||
phone?: string;
|
||||
// 排序(数字越小越靠前)
|
||||
sortNumber?: number;
|
||||
// 备注
|
||||
comments?: string;
|
||||
// 状态, 0正常, 1冻结
|
||||
status?: number;
|
||||
// 是否删除, 0否, 1是
|
||||
deleted?: number;
|
||||
// 租户id
|
||||
tenantId?: number;
|
||||
// 创建时间
|
||||
createTime?: string;
|
||||
// 修改时间
|
||||
updateTime?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 我的水票搜索条件
|
||||
*/
|
||||
export interface GltUserTicketParam extends PageParam {
|
||||
id?: number;
|
||||
templateId?: number;
|
||||
userId?: number;
|
||||
phone?: string;
|
||||
keywords?: string;
|
||||
// 状态过滤：0正常，1冻结
|
||||
status?: number;
|
||||
}
|
||||
105
src/api/glt/gltUserTicketLog/index.ts
Normal file
105
src/api/glt/gltUserTicketLog/index.ts
Normal file
@@ -0,0 +1,105 @@
|
||||
import request from '@/utils/request';
|
||||
import type { ApiResult, PageResult } from '@/api';
|
||||
import type { GltUserTicketLog, GltUserTicketLogParam } from './model';
|
||||
|
||||
/**
|
||||
* 分页查询消费日志
|
||||
*/
|
||||
export async function pageGltUserTicketLog(params: GltUserTicketLogParam) {
|
||||
const res = await request.get<ApiResult<PageResult<GltUserTicketLog>>>(
|
||||
'/glt/glt-user-ticket-log/page',
|
||||
{
|
||||
params
|
||||
}
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询消费日志列表
|
||||
*/
|
||||
export async function listGltUserTicketLog(params?: GltUserTicketLogParam) {
|
||||
const res = await request.get<ApiResult<GltUserTicketLog[]>>(
|
||||
'/glt/glt-user-ticket-log',
|
||||
{
|
||||
params
|
||||
}
|
||||
);
|
||||
if (res.code === 0 && res.data) {
|
||||
return res.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加消费日志
|
||||
*/
|
||||
export async function addGltUserTicketLog(data: GltUserTicketLog) {
|
||||
const res = await request.post<ApiResult<unknown>>(
|
||||
'/glt/glt-user-ticket-log',
|
||||
data
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改消费日志
|
||||
*/
|
||||
export async function updateGltUserTicketLog(data: GltUserTicketLog) {
|
||||
const res = await request.put<ApiResult<unknown>>(
|
||||
'/glt/glt-user-ticket-log',
|
||||
data
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除消费日志
|
||||
*/
|
||||
export async function removeGltUserTicketLog(id?: number) {
|
||||
const res = await request.del<ApiResult<unknown>>(
|
||||
'/glt/glt-user-ticket-log/' + id
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除消费日志
|
||||
*/
|
||||
export async function removeBatchGltUserTicketLog(data: (number | undefined)[]) {
|
||||
const res = await request.del<ApiResult<unknown>>(
|
||||
'/glt/glt-user-ticket-log/batch',
|
||||
{
|
||||
data
|
||||
}
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据id查询消费日志
|
||||
*/
|
||||
export async function getGltUserTicketLog(id: number) {
|
||||
const res = await request.get<ApiResult<GltUserTicketLog>>(
|
||||
'/glt/glt-user-ticket-log/' + id
|
||||
);
|
||||
if (res.code === 0 && res.data) {
|
||||
return res.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
53
src/api/glt/gltUserTicketLog/model/index.ts
Normal file
53
src/api/glt/gltUserTicketLog/model/index.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import type { PageParam } from '@/api';
|
||||
|
||||
/**
|
||||
* 消费日志
|
||||
*/
|
||||
export interface GltUserTicketLog {
|
||||
//
|
||||
id?: number;
|
||||
// 用户水票ID
|
||||
userTicketId?: number;
|
||||
// 变更类型
|
||||
changeType?: number;
|
||||
// 可更改
|
||||
changeAvailable?: number;
|
||||
// 更改冻结状态
|
||||
changeFrozen?: number;
|
||||
// 已使用更改
|
||||
changeUsed?: number;
|
||||
// 可用后
|
||||
availableAfter?: number;
|
||||
// 冻结后
|
||||
frozenAfter?: number;
|
||||
// 使用后
|
||||
usedAfter?: number;
|
||||
// 订单ID
|
||||
orderId?: number;
|
||||
// 订单编号
|
||||
orderNo?: string;
|
||||
// 用户ID
|
||||
userId?: number;
|
||||
// 排序(数字越小越靠前)
|
||||
sortNumber?: number;
|
||||
// 备注
|
||||
comments?: string;
|
||||
// 状态, 0正常, 1冻结
|
||||
status?: number;
|
||||
// 是否删除, 0否, 1是
|
||||
deleted?: number;
|
||||
// 租户id
|
||||
tenantId?: number;
|
||||
// 创建时间
|
||||
createTime?: string;
|
||||
// 修改时间
|
||||
updateTime?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 消费日志搜索条件
|
||||
*/
|
||||
export interface GltUserTicketLogParam extends PageParam {
|
||||
id?: number;
|
||||
keywords?: string;
|
||||
}
|
||||
105
src/api/glt/gltUserTicketRelease/index.ts
Normal file
105
src/api/glt/gltUserTicketRelease/index.ts
Normal file
@@ -0,0 +1,105 @@
|
||||
import request from '@/utils/request';
|
||||
import type { ApiResult, PageResult } from '@/api';
|
||||
import type { GltUserTicketRelease, GltUserTicketReleaseParam } from './model';
|
||||
|
||||
/**
|
||||
* 分页查询水票释放
|
||||
*/
|
||||
export async function pageGltUserTicketRelease(params: GltUserTicketReleaseParam) {
|
||||
const res = await request.get<ApiResult<PageResult<GltUserTicketRelease>>>(
|
||||
'/glt/glt-user-ticket-release/page',
|
||||
{
|
||||
params
|
||||
}
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询水票释放列表
|
||||
*/
|
||||
export async function listGltUserTicketRelease(params?: GltUserTicketReleaseParam) {
|
||||
const res = await request.get<ApiResult<GltUserTicketRelease[]>>(
|
||||
'/glt/glt-user-ticket-release',
|
||||
{
|
||||
params
|
||||
}
|
||||
);
|
||||
if (res.code === 0 && res.data) {
|
||||
return res.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加水票释放
|
||||
*/
|
||||
export async function addGltUserTicketRelease(data: GltUserTicketRelease) {
|
||||
const res = await request.post<ApiResult<unknown>>(
|
||||
'/glt/glt-user-ticket-release',
|
||||
data
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改水票释放
|
||||
*/
|
||||
export async function updateGltUserTicketRelease(data: GltUserTicketRelease) {
|
||||
const res = await request.put<ApiResult<unknown>>(
|
||||
'/glt/glt-user-ticket-release',
|
||||
data
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除水票释放
|
||||
*/
|
||||
export async function removeGltUserTicketRelease(id?: number) {
|
||||
const res = await request.del<ApiResult<unknown>>(
|
||||
'/glt/glt-user-ticket-release/' + id
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除水票释放
|
||||
*/
|
||||
export async function removeBatchGltUserTicketRelease(data: (number | undefined)[]) {
|
||||
const res = await request.del<ApiResult<unknown>>(
|
||||
'/glt/glt-user-ticket-release/batch',
|
||||
{
|
||||
data
|
||||
}
|
||||
);
|
||||
if (res.code === 0) {
|
||||
return res.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据id查询水票释放
|
||||
*/
|
||||
export async function getGltUserTicketRelease(id: number) {
|
||||
const res = await request.get<ApiResult<GltUserTicketRelease>>(
|
||||
'/glt/glt-user-ticket-release/' + id
|
||||
);
|
||||
if (res.code === 0 && res.data) {
|
||||
return res.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.message));
|
||||
}
|
||||
38
src/api/glt/gltUserTicketRelease/model/index.ts
Normal file
38
src/api/glt/gltUserTicketRelease/model/index.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
import type { PageParam } from '@/api';
|
||||
|
||||
/**
|
||||
* 水票释放
|
||||
*/
|
||||
export interface GltUserTicketRelease {
|
||||
//
|
||||
id?: string;
|
||||
// 水票ID
|
||||
userTicketId?: string;
|
||||
// 用户ID
|
||||
userId?: number;
|
||||
// 周期编号
|
||||
periodNo?: number;
|
||||
// 释放数量
|
||||
releaseQty?: number;
|
||||
// 释放时间
|
||||
releaseTime?: string;
|
||||
// 状态
|
||||
status?: number;
|
||||
// 是否删除, 0否, 1是
|
||||
deleted?: number;
|
||||
// 租户id
|
||||
tenantId?: number;
|
||||
// 创建时间
|
||||
createTime?: string;
|
||||
// 修改时间
|
||||
updateTime?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 水票释放搜索条件
|
||||
*/
|
||||
export interface GltUserTicketReleaseParam extends PageParam {
|
||||
id?: number;
|
||||
userId?: number;
|
||||
keywords?: string;
|
||||
}
|
||||
@@ -53,10 +53,12 @@ export default {
|
||||
"wallet/wallet",
|
||||
"coupon/index",
|
||||
"points/points",
|
||||
"gift/index",
|
||||
"gift/redeem",
|
||||
"gift/detail",
|
||||
"gift/add",
|
||||
"ticket/index",
|
||||
"ticket/detail",
|
||||
// "gift/index",
|
||||
// "gift/redeem",
|
||||
// "gift/detail",
|
||||
// "gift/add",
|
||||
"store/verification",
|
||||
"store/orders/index",
|
||||
"theme/index",
|
||||
|
||||
@@ -182,7 +182,7 @@ function Home() {
|
||||
key: 'ticket',
|
||||
title: '我的水票',
|
||||
icon: <Ticket size={30} />,
|
||||
onClick: () => Taro.navigateTo({ url: '/user/gift/index' }),
|
||||
onClick: () => Taro.navigateTo({ url: '/user/ticket/index' }),
|
||||
},
|
||||
{
|
||||
key: 'order',
|
||||
|
||||
4
src/user/ticket/add.config.ts
Normal file
4
src/user/ticket/add.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '新增收货地址',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
323
src/user/ticket/add.tsx
Normal file
323
src/user/ticket/add.tsx
Normal file
@@ -0,0 +1,323 @@
|
||||
import {useEffect, useState, useRef} from "react";
|
||||
import {useRouter} from '@tarojs/taro'
|
||||
import {Button, Loading, CellGroup, Input, TextArea, Form, Switch, InputNumber, Radio, Image} from '@nutui/nutui-react-taro'
|
||||
import {Edit, Upload as UploadIcon} from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {View} from '@tarojs/components'
|
||||
import {ShopArticle} from "@/api/shop/shopArticle/model";
|
||||
import {getShopArticle, addShopArticle, updateShopArticle} from "@/api/shop/shopArticle";
|
||||
import FixedButton from "@/components/FixedButton";
|
||||
|
||||
const AddShopArticle = () => {
|
||||
const {params} = useRouter();
|
||||
const [loading, setLoading] = useState<boolean>(true)
|
||||
const [formData, setFormData] = useState<ShopArticle>({
|
||||
type: 0, // 默认常规文章
|
||||
status: 0, // 默认已发布
|
||||
permission: 0, // 默认所有人可见
|
||||
recommend: 0, // 默认不推荐
|
||||
showType: 10, // 默认小图展示
|
||||
virtualViews: 0, // 默认虚拟阅读量
|
||||
actualViews: 0, // 默认实际阅读量
|
||||
sortNumber: 0 // 默认排序
|
||||
})
|
||||
const formRef = useRef<any>(null)
|
||||
|
||||
// 判断是编辑还是新增模式
|
||||
const isEditMode = !!params.id
|
||||
const articleId = params.id ? Number(params.id) : undefined
|
||||
|
||||
// 文章类型选项
|
||||
const typeOptions = [
|
||||
{ text: '常规文章', value: 0 },
|
||||
{ text: '视频文章', value: 1 }
|
||||
]
|
||||
|
||||
// 状态选项
|
||||
const statusOptions = [
|
||||
{ text: '已发布', value: 0 },
|
||||
{ text: '待审核', value: 1 },
|
||||
{ text: '已驳回', value: 2 },
|
||||
{ text: '违规内容', value: 3 }
|
||||
]
|
||||
|
||||
// 可见性选项
|
||||
const permissionOptions = [
|
||||
{ text: '所有人可见', value: 0 },
|
||||
{ text: '登录可见', value: 1 },
|
||||
{ text: '密码可见', value: 2 }
|
||||
]
|
||||
|
||||
// 显示方式选项
|
||||
const showTypeOptions = [
|
||||
{ text: '小图展示', value: 10 },
|
||||
{ text: '大图展示', value: 20 }
|
||||
]
|
||||
|
||||
const reload = async () => {
|
||||
// 如果是编辑模式，加载文章数据
|
||||
if (isEditMode && articleId) {
|
||||
try {
|
||||
const article = await getShopArticle(articleId)
|
||||
setFormData(article)
|
||||
// 更新表单值
|
||||
if (formRef.current) {
|
||||
formRef.current.setFieldsValue(article)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载文章失败:', error)
|
||||
Taro.showToast({
|
||||
title: '加载文章失败',
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 图片上传处理
|
||||
const handleImageUpload = async () => {
|
||||
try {
|
||||
const res = await Taro.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera']
|
||||
});
|
||||
|
||||
if (res.tempFilePaths && res.tempFilePaths.length > 0) {
|
||||
// 这里应该调用上传接口，暂时使用本地路径
|
||||
const imagePath = res.tempFilePaths[0];
|
||||
setFormData({
|
||||
...formData,
|
||||
image: imagePath
|
||||
});
|
||||
|
||||
Taro.showToast({
|
||||
title: '图片选择成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
Taro.showToast({
|
||||
title: '图片选择失败',
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const submitSucceed = async (values: any) => {
|
||||
try {
|
||||
// 准备提交的数据
|
||||
const submitData = {
|
||||
...formData,
|
||||
...values,
|
||||
};
|
||||
|
||||
// 如果是编辑模式，添加id
|
||||
if (isEditMode && articleId) {
|
||||
submitData.articleId = articleId;
|
||||
}
|
||||
|
||||
// 执行新增或更新操作
|
||||
if (isEditMode) {
|
||||
await updateShopArticle(submitData);
|
||||
} else {
|
||||
await addShopArticle(submitData);
|
||||
}
|
||||
|
||||
Taro.showToast({
|
||||
title: `${isEditMode ? '更新' : '保存'}成功`,
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
Taro.navigateBack();
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error);
|
||||
Taro.showToast({
|
||||
title: `${isEditMode ? '更新' : '保存'}失败`,
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const submitFailed = (error: any) => {
|
||||
console.log(error, 'err...')
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
// 动态设置页面标题
|
||||
Taro.setNavigationBarTitle({
|
||||
title: isEditMode ? '编辑文章' : '新增文章'
|
||||
});
|
||||
|
||||
reload().then(() => {
|
||||
setLoading(false)
|
||||
})
|
||||
}, [isEditMode]);
|
||||
|
||||
if (loading) {
|
||||
return <Loading className={'px-2'}>加载中</Loading>
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
ref={formRef}
|
||||
divider
|
||||
initialValues={formData}
|
||||
labelPosition="left"
|
||||
onFinish={(values) => submitSucceed(values)}
|
||||
onFinishFailed={(errors) => submitFailed(errors)}
|
||||
>
|
||||
{/* 基本信息 */}
|
||||
<CellGroup title="基本信息">
|
||||
<Form.Item
|
||||
name="title"
|
||||
label="文章标题"
|
||||
required
|
||||
rules={[{ required: true, message: '请输入文章标题' }]}
|
||||
initialValue={formData.title}
|
||||
>
|
||||
<Input placeholder="请输入文章标题" maxLength={100}/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="overview" label="文章概述" initialValue={formData.overview}>
|
||||
<TextArea placeholder="请输入文章概述，用于列表展示" maxLength={200} rows={3}/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="detail"
|
||||
label="文章内容"
|
||||
required
|
||||
rules={[{ required: true, message: '请输入文章内容' }]}
|
||||
initialValue={formData.detail}
|
||||
>
|
||||
<TextArea placeholder="请输入文章内容" maxLength={10000} rows={8}/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="author" label="作者" initialValue={formData.author}>
|
||||
<Input placeholder="请输入作者名称" maxLength={50}/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="source" label="来源" initialValue={formData.source}>
|
||||
<Input placeholder="请输入文章来源" maxLength={100}/>
|
||||
</Form.Item>
|
||||
</CellGroup>
|
||||
|
||||
{/* 文章设置 */}
|
||||
<CellGroup title="文章设置">
|
||||
<Form.Item name="type" label="文章类型" initialValue={formData.type}>
|
||||
<Radio.Group direction="horizontal" value={formData.type}>
|
||||
{typeOptions.map(option => (
|
||||
<Radio key={option.value} value={option.value}>
|
||||
{option.text}
|
||||
</Radio>
|
||||
))}
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="status" label="发布状态" initialValue={formData.status}>
|
||||
<Radio.Group direction="horizontal" value={formData.status}>
|
||||
{statusOptions.map(option => (
|
||||
<Radio key={option.value} value={option.value}>
|
||||
{option.text}
|
||||
</Radio>
|
||||
))}
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="permission" label="可见性" initialValue={formData.permission}>
|
||||
<Radio.Group direction="horizontal" value={formData.permission}>
|
||||
{permissionOptions.map(option => (
|
||||
<Radio key={option.value} value={option.value}>
|
||||
{option.text}
|
||||
</Radio>
|
||||
))}
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="showType" label="显示方式" initialValue={formData.showType}>
|
||||
<Radio.Group direction="horizontal" value={formData.showType}>
|
||||
{showTypeOptions.map(option => (
|
||||
<Radio key={option.value} value={option.value}>
|
||||
{option.text}
|
||||
</Radio>
|
||||
))}
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</CellGroup>
|
||||
|
||||
{/* 高级设置 */}
|
||||
<CellGroup title="高级设置">
|
||||
<Form.Item name="recommend" label="推荐文章" initialValue={formData.recommend}>
|
||||
<Switch
|
||||
checked={formData.recommend === 1}
|
||||
onChange={(checked) =>
|
||||
setFormData({...formData, recommend: checked ? 1 : 0})
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="price" label="付费金额" initialValue={formData.price}>
|
||||
<Input placeholder="0.00" type="number"/>
|
||||
<View className="text-xs text-gray-500 mt-1">单位：元</View>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="virtualViews" label="虚拟阅读量" initialValue={formData.virtualViews}>
|
||||
<InputNumber min={0} defaultValue={formData.virtualViews || 0}/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="actualViews" label="实际阅读量" initialValue={formData.actualViews}>
|
||||
<InputNumber min={0} defaultValue={formData.actualViews || 0}/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="sortNumber" label="排序" initialValue={formData.sortNumber}>
|
||||
<InputNumber min={0} defaultValue={formData.sortNumber || 0}/>
|
||||
<View className="text-xs text-gray-500 mt-1">数字越小越靠前</View>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="tags" label="标签" initialValue={formData.tags}>
|
||||
<Input placeholder="请输入标签，多个标签用逗号分隔" maxLength={200}/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="topic" label="话题" initialValue={formData.topic}>
|
||||
<Input placeholder="请输入话题" maxLength={100}/>
|
||||
</Form.Item>
|
||||
</CellGroup>
|
||||
|
||||
{/* 图片上传 */}
|
||||
<CellGroup title="文章图片">
|
||||
<Form.Item name="image" label="封面图片" initialValue={formData.image}>
|
||||
<View className="flex items-center gap-3">
|
||||
{formData.image && (
|
||||
<Image
|
||||
src={formData.image}
|
||||
width="80"
|
||||
height="80"
|
||||
radius="8"
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
fill="outline"
|
||||
icon={<UploadIcon />}
|
||||
onClick={handleImageUpload}
|
||||
>
|
||||
{formData.image ? '更换图片' : '上传图片'}
|
||||
</Button>
|
||||
</View>
|
||||
</Form.Item>
|
||||
</CellGroup>
|
||||
|
||||
{/* 提交按钮 */}
|
||||
<FixedButton text={isEditMode ? '更新文章' : '发布文章'} onClick={() => submitSucceed} icon={<Edit />} />
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddShopArticle;
|
||||
5
src/user/ticket/detail.config.ts
Normal file
5
src/user/ticket/detail.config.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '礼品卡详情',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff'
|
||||
})
|
||||
335
src/user/ticket/detail.tsx
Normal file
335
src/user/ticket/detail.tsx
Normal file
@@ -0,0 +1,335 @@
|
||||
import {useState, useEffect} from "react";
|
||||
import {useRouter} from '@tarojs/taro'
|
||||
import {Button, ConfigProvider, Divider} from '@nutui/nutui-react-taro'
|
||||
import {Gift, Clock, Location, Phone, Copy, QrCode} from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import {ShopGift} from "@/api/shop/shopGift/model";
|
||||
import {getShopGift} from "@/api/shop/shopGift";
|
||||
import GiftCardShare from "@/components/GiftCardShare";
|
||||
import SimpleQRCodeModal from "@/components/SimpleQRCodeModal";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const GiftCardDetail = () => {
|
||||
const router = useRouter()
|
||||
const [gift, setGift] = useState<ShopGift | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [showShare, setShowShare] = useState(false)
|
||||
const [showQRCode, setShowQRCode] = useState(false)
|
||||
const giftId = router.params.id
|
||||
|
||||
useEffect(() => {
|
||||
if (giftId) {
|
||||
loadGiftDetail()
|
||||
}
|
||||
}, [giftId])
|
||||
|
||||
const loadGiftDetail = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const data = await getShopGift(Number(giftId))
|
||||
setGift(data)
|
||||
} catch (error) {
|
||||
console.error('获取礼品卡详情失败:', error)
|
||||
Taro.showToast({
|
||||
title: '获取礼品卡详情失败',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取礼品卡类型文本
|
||||
const getGiftTypeText = (type?: number) => {
|
||||
switch (type) {
|
||||
case 10: return '礼品劵'
|
||||
case 20: return '虚拟礼品卡'
|
||||
case 30: return '服务礼品卡'
|
||||
default: return '水票'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取礼品卡面值显示
|
||||
const getGiftValueDisplay = () => {
|
||||
if (!gift || !gift.faceValue) return ''
|
||||
return `¥${gift.faceValue}`
|
||||
}
|
||||
|
||||
// 获取使用条件文本
|
||||
const getUsageText = () => {
|
||||
if (!gift) return ''
|
||||
|
||||
if (gift.instructions) {
|
||||
return gift.instructions
|
||||
}
|
||||
|
||||
switch (gift.type) {
|
||||
case 10: return '请到指定门店使用此礼品卡'
|
||||
case 20: return '可在线上平台直接使用'
|
||||
case 30: return '请联系客服预约服务时间'
|
||||
default: return '请按照使用说明进行操作'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取有效期文本
|
||||
const getValidityText = () => {
|
||||
if (!gift) return ''
|
||||
|
||||
if (gift.validDays) {
|
||||
return `有效期${gift.validDays}天`
|
||||
} else if (gift.expireTime) {
|
||||
return `有效期至 ${dayjs(gift.expireTime).format('YYYY年MM月DD日')}`
|
||||
} else {
|
||||
return '长期有效'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取礼品卡状态
|
||||
const getGiftStatus = () => {
|
||||
if (!gift) return { status: 0, text: '未知', color: 'default' }
|
||||
|
||||
switch (gift.status) {
|
||||
case 0:
|
||||
return { status: 0, text: '可使用', color: 'success' }
|
||||
case 1:
|
||||
return { status: 1, text: '已使用', color: 'warning' }
|
||||
case 2:
|
||||
return { status: 2, text: '已过期', color: 'danger' }
|
||||
default:
|
||||
return { status: 0, text: '未知', color: 'default' }
|
||||
}
|
||||
}
|
||||
|
||||
// 使用礼品卡 - 打开二维码弹窗
|
||||
const handleUseGift = () => {
|
||||
if (!gift) return
|
||||
setShowQRCode(true)
|
||||
}
|
||||
|
||||
// 点击二维码图标
|
||||
const handleQRCodeClick = () => {
|
||||
if (!gift) return
|
||||
setShowQRCode(true)
|
||||
}
|
||||
|
||||
// 复制兑换码
|
||||
const handleCopyCode = () => {
|
||||
if (!gift?.code) return
|
||||
|
||||
Taro.setClipboardData({
|
||||
data: gift.code,
|
||||
success: () => {
|
||||
Taro.showToast({
|
||||
title: '兑换码已复制',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
Taro.showToast({
|
||||
title: '复制失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const handleBack = () => {
|
||||
Taro.navigateBack()
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<View className="flex justify-center items-center h-screen">
|
||||
<Text>加载中...</Text>
|
||||
</View>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
if (!gift) {
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<View className="flex flex-col justify-center items-center h-screen">
|
||||
<Text className="text-gray-500 mb-4">礼品卡不存在</Text>
|
||||
<Button onClick={handleBack}>返回</Button>
|
||||
</View>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
const statusInfo = getGiftStatus()
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
{/* 礼品卡卡片 */}
|
||||
<View className="m-4 p-6 rounded-2xl text-white" style={{background: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)'}}>
|
||||
<View className="flex items-center justify-between mb-4">
|
||||
<View className="w-full">
|
||||
<Text className="text-4xl font-bold">{getGiftValueDisplay()}</Text>
|
||||
<Text className="opacity-90 mt-1 px-2">{getGiftTypeText(gift.type)}</Text>
|
||||
</View>
|
||||
<View
|
||||
className="p-2 bg-white bg-opacity-20 rounded-lg cursor-pointer"
|
||||
onClick={handleQRCodeClick}
|
||||
>
|
||||
<QrCode size="24" />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text className="text-xl font-semibold mb-2">{gift.name}</Text>
|
||||
<Text className="text-base opacity-90 px-2">{gift.description || getUsageText()}</Text>
|
||||
|
||||
{/* 兑换码 */}
|
||||
{gift.code && (
|
||||
<View className="mt-4 p-3 bg-white bg-opacity-20 rounded-lg">
|
||||
<View className="flex items-center justify-between">
|
||||
<View>
|
||||
<Text className="text-sm opacity-80 px-2">兑换码</Text>
|
||||
<Text className="text-lg font-mono font-bold">{gift.code}</Text>
|
||||
</View>
|
||||
<Button
|
||||
size="small"
|
||||
fill="outline"
|
||||
icon={<Copy />}
|
||||
onClick={handleCopyCode}
|
||||
className="border-white text-white"
|
||||
>
|
||||
复制
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 详细信息 */}
|
||||
<View className="bg-white mx-4 rounded-xl p-4">
|
||||
<Text className="text-lg font-semibold">使用说明</Text>
|
||||
|
||||
<View className={'mt-4'}>
|
||||
<View className="flex items-center mb-3">
|
||||
<Clock size="16" className="text-gray-400 mr-3" />
|
||||
<View>
|
||||
<Text className="text-gray-400 text-sm">有效期</Text>
|
||||
<Text className="text-blue-500 text-sm px-1">{getValidityText()}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Divider />
|
||||
|
||||
<View className="flex items-center mb-3">
|
||||
<Gift size="16" className="text-gray-400 mr-3" />
|
||||
<View>
|
||||
<Text className="text-gray-400 text-sm">类型</Text>
|
||||
<Text className="text-blue-500 text-sm px-1">{getGiftTypeText(gift.type)}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{gift.useLocation && (
|
||||
<>
|
||||
<Divider />
|
||||
<View className="flex items-center">
|
||||
<Location size="16" className="text-gray-400 mr-3" />
|
||||
<View>
|
||||
<Text className="text-gray-400 text-sm">使用地址</Text>
|
||||
<Text className="text-blue-500 text-sm px-1">{gift.useLocation}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
|
||||
{gift.contactInfo && (
|
||||
<>
|
||||
<Divider />
|
||||
<View className="flex items-center">
|
||||
<Phone size="16" className="text-gray-400 mr-3" />
|
||||
<View>
|
||||
<Text className="text-gray-600 text-sm">客服联系</Text>
|
||||
<Text className="text-gray-900">{gift.contactInfo}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
|
||||
{gift.instructions && (
|
||||
<>
|
||||
<Divider />
|
||||
<View>
|
||||
<Text className="text-gray-600 text-sm mb-2">使用说明</Text>
|
||||
<Text className="text-gray-900 leading-relaxed">{gift.instructions}</Text>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
|
||||
{gift.takeTime && (
|
||||
<>
|
||||
<Divider />
|
||||
<View>
|
||||
<Text className="text-gray-600 text-sm mb-2">使用记录</Text>
|
||||
<Text className="text-gray-900">使用时间：{dayjs(gift.takeTime).format('YYYY-MM-DD HH:mm')}</Text>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 底部操作按钮 */}
|
||||
{statusInfo.status === 0 && (
|
||||
<View className="fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-100">
|
||||
<View className="flex gap-3">
|
||||
{gift.code && (
|
||||
<Button
|
||||
fill="outline"
|
||||
size="large"
|
||||
className="flex-1"
|
||||
icon={<Copy />}
|
||||
onClick={handleCopyCode}
|
||||
>
|
||||
复制兑换码
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
className="flex-1"
|
||||
onClick={handleUseGift}
|
||||
>
|
||||
立即使用
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 分享弹窗 */}
|
||||
{gift && (
|
||||
<GiftCardShare
|
||||
visible={showShare}
|
||||
giftCard={{
|
||||
id: gift.id || 0,
|
||||
name: gift.name || '',
|
||||
type: gift.type || 10,
|
||||
faceValue: gift.faceValue || '0',
|
||||
code: gift.code,
|
||||
description: gift.description
|
||||
}}
|
||||
onClose={() => setShowShare(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 二维码弹窗 */}
|
||||
{gift && (
|
||||
<SimpleQRCodeModal
|
||||
visible={showQRCode}
|
||||
onClose={() => setShowQRCode(false)}
|
||||
qrContent={gift.code + ''}
|
||||
giftName={gift.goodsName || gift.name}
|
||||
faceValue={gift.faceValue}
|
||||
/>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default GiftCardDetail;
|
||||
5
src/user/ticket/index.config.ts
Normal file
5
src/user/ticket/index.config.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的水票',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff'
|
||||
})
|
||||
251
src/user/ticket/index.tsx
Normal file
251
src/user/ticket/index.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import { useState } from 'react';
|
||||
import Taro, { useDidShow } from '@tarojs/taro';
|
||||
import {
|
||||
ConfigProvider,
|
||||
Empty,
|
||||
InfiniteLoading,
|
||||
Loading,
|
||||
PullToRefresh,
|
||||
SearchBar,
|
||||
Tabs,
|
||||
TabPane,
|
||||
Tag
|
||||
} from '@nutui/nutui-react-taro';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import { pageGltUserTicket } from '@/api/glt/gltUserTicket';
|
||||
import type { GltUserTicket } from '@/api/glt/gltUserTicket/model';
|
||||
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
const UserTicketList = () => {
|
||||
const [list, setList] = useState<GltUserTicket[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [page, setPage] = useState(1);
|
||||
const [total, setTotal] = useState(0);
|
||||
// 0-正常 1-冻结
|
||||
const [activeTab, setActiveTab] = useState<string>('0');
|
||||
|
||||
const getUserId = () => {
|
||||
const raw = Taro.getStorageSync('UserId');
|
||||
const id = Number(raw);
|
||||
return Number.isFinite(id) && id > 0 ? id : undefined;
|
||||
};
|
||||
|
||||
const showTicketDetail = (ticket: GltUserTicket) => {
|
||||
const lines: string[] = [];
|
||||
if (ticket.templateName) lines.push(`水票：${ticket.templateName}`);
|
||||
lines.push(`可用：${ticket.availableQty ?? 0}`);
|
||||
lines.push(`总量：${ticket.totalQty ?? 0}`);
|
||||
lines.push(`已用：${ticket.usedQty ?? 0}`);
|
||||
lines.push(`冻结：${ticket.frozenQty ?? 0}`);
|
||||
lines.push(`已释放：${ticket.releasedQty ?? 0}`);
|
||||
if (ticket.orderNo) lines.push(`订单号：${ticket.orderNo}`);
|
||||
Taro.showModal({
|
||||
title: '水票详情',
|
||||
content: lines.join('\n'),
|
||||
showCancel: false
|
||||
});
|
||||
};
|
||||
|
||||
const reloadWithTab = async (tab: string, isRefresh = true, keywords?: string) => {
|
||||
if (loading) return;
|
||||
|
||||
const userId = getUserId();
|
||||
if (!userId) {
|
||||
setList([]);
|
||||
setTotal(0);
|
||||
setHasMore(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (isRefresh) {
|
||||
setPage(1);
|
||||
setList([]);
|
||||
setHasMore(true);
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const currentPage = isRefresh ? 1 : page;
|
||||
const status = Number(tab); // 0正常，1冻结
|
||||
const res = await pageGltUserTicket({
|
||||
page: currentPage,
|
||||
limit: PAGE_SIZE,
|
||||
userId,
|
||||
status,
|
||||
keywords: (keywords ?? searchValue) || undefined
|
||||
});
|
||||
|
||||
const nextList = isRefresh ? res.list : [...list, ...res.list];
|
||||
setList(nextList);
|
||||
const count = typeof res.count === 'number' ? res.count : nextList.length;
|
||||
setTotal(count);
|
||||
setHasMore(nextList.length < count);
|
||||
|
||||
if (res.list.length > 0) {
|
||||
setPage(currentPage + 1);
|
||||
} else {
|
||||
setHasMore(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取水票列表失败:', error);
|
||||
Taro.showToast({ title: '获取水票失败', icon: 'error' });
|
||||
setHasMore(false);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const reload = async (isRefresh = true) => reloadWithTab(activeTab, isRefresh);
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
setSearchValue(value);
|
||||
reloadWithTab(activeTab, true, value);
|
||||
};
|
||||
|
||||
const handleRefresh = async () => {
|
||||
await reload(true);
|
||||
};
|
||||
|
||||
const handleTabChange = (value: string | number) => {
|
||||
const tab = String(value);
|
||||
setActiveTab(tab);
|
||||
setPage(1);
|
||||
setList([]);
|
||||
setHasMore(true);
|
||||
reloadWithTab(tab, true);
|
||||
};
|
||||
|
||||
const loadMore = async () => {
|
||||
if (!loading && hasMore) {
|
||||
await reload(false);
|
||||
}
|
||||
};
|
||||
|
||||
useDidShow(() => {
|
||||
reloadWithTab(activeTab, true).then();
|
||||
});
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
{/* 搜索栏 */}
|
||||
<View className="bg-white px-4 py-3 hidden">
|
||||
<SearchBar
|
||||
placeholder="搜索水票"
|
||||
value={searchValue}
|
||||
onChange={setSearchValue}
|
||||
onSearch={handleSearch}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Tab切换 */}
|
||||
<View className="bg-white">
|
||||
<Tabs value={activeTab} onChange={handleTabChange}>
|
||||
<TabPane title="正常" value="0"></TabPane>
|
||||
<TabPane title="冻结" value="1"></TabPane>
|
||||
</Tabs>
|
||||
</View>
|
||||
|
||||
{total > 0 && (
|
||||
<View className="px-4 py-2 text-sm text-gray-500 bg-gray-50 hidden">
|
||||
共 {total} 条水票记录
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 列表 */}
|
||||
<PullToRefresh onRefresh={handleRefresh} headHeight={60}>
|
||||
<View style={{ height: 'calc(100vh - 200px)', overflowY: 'auto' }} id="ticket-scroll">
|
||||
{list.length === 0 && !loading ? (
|
||||
<View
|
||||
className="flex flex-col justify-center items-center"
|
||||
style={{ height: 'calc(100vh - 260px)' }}
|
||||
>
|
||||
<Empty
|
||||
description={activeTab === '0' ? '暂无正常水票' : '暂无冻结水票'}
|
||||
style={{ backgroundColor: 'transparent' }}
|
||||
/>
|
||||
</View>
|
||||
) : (
|
||||
<InfiniteLoading
|
||||
target="ticket-scroll"
|
||||
hasMore={hasMore}
|
||||
onLoadMore={loadMore}
|
||||
loadingText={
|
||||
<View className="flex justify-center items-center py-4">
|
||||
<Loading />
|
||||
<View className="ml-2">加载中...</View>
|
||||
</View>
|
||||
}
|
||||
loadMoreText={
|
||||
<View className="text-center py-4 text-gray-500">
|
||||
{list.length === 0 ? '暂无数据' : '没有更多了'}
|
||||
</View>
|
||||
}
|
||||
>
|
||||
<View className="px-4 py-3">
|
||||
{list.map((item, index) => (
|
||||
<View
|
||||
key={String(item.id ?? `${item.templateId ?? 't'}-${index}`)}
|
||||
className="bg-white rounded-xl p-4 mb-3"
|
||||
onClick={() => showTicketDetail(item)}
|
||||
>
|
||||
<View className="flex items-start justify-between">
|
||||
<View className="flex-1 pr-3">
|
||||
<Text className="text-base font-semibold text-gray-900">
|
||||
{item.templateName || '水票'}
|
||||
</Text>
|
||||
{item.orderNo && (
|
||||
<View className="mt-1">
|
||||
<Text className="text-xs text-gray-500">订单号：{item.orderNo}</Text>
|
||||
</View>
|
||||
)}
|
||||
{item.createTime && (
|
||||
<View className="mt-1">
|
||||
<Text className="text-xs text-gray-400">创建时间：{item.createTime}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<Tag type={item.status === 1 ? 'danger' : 'success'}>
|
||||
{item.status === 1 ? '冻结' : '正常'}
|
||||
</Tag>
|
||||
</View>
|
||||
|
||||
<View className="mt-3 flex justify-between">
|
||||
<View className="flex flex-col">
|
||||
<Text className="text-xs text-gray-500">可用</Text>
|
||||
<Text className="text-lg font-bold text-blue-600">{item.availableQty ?? 0}</Text>
|
||||
</View>
|
||||
<View className="flex flex-col items-center">
|
||||
<Text className="text-xs text-gray-500">总量</Text>
|
||||
<Text className="text-sm text-gray-900">{item.totalQty ?? 0}</Text>
|
||||
</View>
|
||||
<View className="flex flex-col items-end">
|
||||
<Text className="text-xs text-gray-500">已用</Text>
|
||||
<Text className="text-sm text-gray-900">{item.usedQty ?? 0}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="mt-2 flex justify-between">
|
||||
<View className="flex flex-col">
|
||||
<Text className="text-xs text-gray-500">冻结</Text>
|
||||
<Text className="text-sm text-gray-900">{item.frozenQty ?? 0}</Text>
|
||||
</View>
|
||||
<View className="flex flex-col items-end">
|
||||
<Text className="text-xs text-gray-500">已释放</Text>
|
||||
<Text className="text-sm text-gray-900">{item.releasedQty ?? 0}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</InfiniteLoading>
|
||||
)}
|
||||
</View>
|
||||
</PullToRefresh>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserTicketList;
|
||||
5
src/user/ticket/receive.config.ts
Normal file
5
src/user/ticket/receive.config.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '领取优惠券',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff'
|
||||
})
|
||||
247
src/user/ticket/receive.tsx
Normal file
247
src/user/ticket/receive.tsx
Normal file
@@ -0,0 +1,247 @@
|
||||
import {useState} from "react";
|
||||
import Taro, {useDidShow} from '@tarojs/taro'
|
||||
import {Button, Empty, ConfigProvider, SearchBar, InfiniteLoading, Loading, PullToRefresh} from '@nutui/nutui-react-taro'
|
||||
import {Gift} from '@nutui/icons-react-taro'
|
||||
import {View} from '@tarojs/components'
|
||||
import {ShopCoupon} from "@/api/shop/shopCoupon/model";
|
||||
import {pageShopCoupon} from "@/api/shop/shopCoupon";
|
||||
import CouponList from "@/components/CouponList";
|
||||
import {CouponCardProps} from "@/components/CouponCard";
|
||||
|
||||
const CouponReceive = () => {
|
||||
const [list, setList] = useState<ShopCoupon[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const [searchValue, setSearchValue] = useState('')
|
||||
const [page, setPage] = useState(1)
|
||||
const [total, setTotal] = useState(0)
|
||||
|
||||
const reload = async (isRefresh = false) => {
|
||||
if (isRefresh) {
|
||||
setPage(1)
|
||||
setList([])
|
||||
setHasMore(true)
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
const currentPage = isRefresh ? 1 : page
|
||||
// 获取可领取的优惠券（启用状态且未过期）
|
||||
const res = await pageShopCoupon({
|
||||
page: currentPage,
|
||||
limit: 10,
|
||||
keywords: searchValue,
|
||||
enabled: 1, // 启用状态
|
||||
isExpire: 0 // 未过期
|
||||
})
|
||||
|
||||
if (res && res.list) {
|
||||
const newList = isRefresh ? res.list : [...list, ...res.list]
|
||||
setList(newList)
|
||||
setTotal(res.count || 0)
|
||||
|
||||
setHasMore(res.list.length === 10)
|
||||
|
||||
if (!isRefresh) {
|
||||
setPage(currentPage + 1)
|
||||
} else {
|
||||
setPage(2)
|
||||
}
|
||||
} else {
|
||||
setHasMore(false)
|
||||
setTotal(0)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取优惠券失败:', error)
|
||||
Taro.showToast({
|
||||
title: '获取优惠券失败',
|
||||
icon: 'error'
|
||||
});
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索功能
|
||||
const handleSearch = (value: string) => {
|
||||
setSearchValue(value)
|
||||
reload(true)
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
const handleRefresh = async () => {
|
||||
await reload(true)
|
||||
}
|
||||
|
||||
// 转换优惠券数据为CouponCard组件所需格式
|
||||
const transformCouponData = (coupon: ShopCoupon): CouponCardProps => {
|
||||
let amount = 0
|
||||
let type: 10 | 20 | 30 = 10 // 使用新的类型值
|
||||
|
||||
if (coupon.type === 10) { // 满减券
|
||||
type = 10
|
||||
amount = parseFloat(coupon.reducePrice || '0')
|
||||
} else if (coupon.type === 20) { // 折扣券
|
||||
type = 20
|
||||
amount = coupon.discount || 0
|
||||
} else if (coupon.type === 30) { // 免费券
|
||||
type = 30
|
||||
amount = 0
|
||||
}
|
||||
|
||||
return {
|
||||
amount,
|
||||
type,
|
||||
status: 0, // 可领取状态
|
||||
minAmount: parseFloat(coupon.minPrice || '0'),
|
||||
title: coupon.name || '优惠券',
|
||||
startTime: coupon.startTime,
|
||||
endTime: coupon.endTime,
|
||||
showReceiveBtn: true, // 显示领取按钮
|
||||
onReceive: () => handleReceiveCoupon(coupon),
|
||||
theme: getThemeByType(coupon.type)
|
||||
}
|
||||
}
|
||||
|
||||
// 根据优惠券类型获取主题色
|
||||
const getThemeByType = (type?: number): 'red' | 'orange' | 'blue' | 'purple' | 'green' => {
|
||||
switch (type) {
|
||||
case 10: return 'red' // 满减券
|
||||
case 20: return 'orange' // 折扣券
|
||||
case 30: return 'green' // 免费券
|
||||
default: return 'blue'
|
||||
}
|
||||
}
|
||||
|
||||
// 领取优惠券
|
||||
const handleReceiveCoupon = async (_: ShopCoupon) => {
|
||||
try {
|
||||
// 这里应该调用领取优惠券的API
|
||||
// await receiveCoupon(coupon.id)
|
||||
|
||||
Taro.showToast({
|
||||
title: '领取成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 刷新列表
|
||||
reload(true)
|
||||
} catch (error) {
|
||||
console.error('领取优惠券失败:', error)
|
||||
Taro.showToast({
|
||||
title: '领取失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 优惠券点击事件
|
||||
const handleCouponClick = (_: CouponCardProps, index: number) => {
|
||||
const originalCoupon = list[index]
|
||||
if (originalCoupon) {
|
||||
// 显示优惠券详情
|
||||
showCouponDetail(originalCoupon)
|
||||
}
|
||||
}
|
||||
|
||||
// 显示优惠券详情
|
||||
const showCouponDetail = (coupon: ShopCoupon) => {
|
||||
// 跳转到优惠券详情页
|
||||
Taro.navigateTo({
|
||||
url: `/user/coupon/detail?id=${coupon.id}`
|
||||
})
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
const loadMore = async () => {
|
||||
if (!loading && hasMore) {
|
||||
await reload(false)
|
||||
}
|
||||
}
|
||||
|
||||
useDidShow(() => {
|
||||
reload(true).then()
|
||||
});
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
{/* 搜索栏 */}
|
||||
<View className="bg-white px-4 py-3">
|
||||
<SearchBar
|
||||
placeholder="搜索优惠券名称"
|
||||
value={searchValue}
|
||||
onChange={setSearchValue}
|
||||
onSearch={handleSearch}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 统计信息 */}
|
||||
{total > 0 && (
|
||||
<View className="px-4 py-2 text-sm text-gray-500 bg-gray-50">
|
||||
共找到 {total} 张可领取优惠券
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 优惠券列表 */}
|
||||
<PullToRefresh
|
||||
onRefresh={handleRefresh}
|
||||
headHeight={60}
|
||||
>
|
||||
<View style={{ height: 'calc(100vh - 160px)', overflowY: 'auto' }} id="coupon-scroll">
|
||||
{list.length === 0 && !loading ? (
|
||||
<View className="flex flex-col justify-center items-center" style={{height: 'calc(100vh - 250px)'}}>
|
||||
<Empty
|
||||
description="暂无可领取优惠券"
|
||||
style={{backgroundColor: 'transparent'}}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
className="mt-4"
|
||||
onClick={() => Taro.navigateTo({url: '/pages/index/index'})}
|
||||
>
|
||||
去逛逛
|
||||
</Button>
|
||||
</View>
|
||||
) : (
|
||||
<InfiniteLoading
|
||||
target="coupon-scroll"
|
||||
hasMore={hasMore}
|
||||
onLoadMore={loadMore}
|
||||
loadingText={
|
||||
<View className="flex justify-center items-center py-4">
|
||||
<Loading />
|
||||
<View className="ml-2">加载中...</View>
|
||||
</View>
|
||||
}
|
||||
loadMoreText={
|
||||
<View className="text-center py-4 text-gray-500">
|
||||
{list.length === 0 ? "暂无数据" : "没有更多了"}
|
||||
</View>
|
||||
}
|
||||
>
|
||||
<CouponList
|
||||
coupons={list.map(transformCouponData)}
|
||||
onCouponClick={handleCouponClick}
|
||||
showEmpty={false}
|
||||
/>
|
||||
</InfiniteLoading>
|
||||
)}
|
||||
</View>
|
||||
</PullToRefresh>
|
||||
|
||||
{/* 底部提示 */}
|
||||
{list.length === 0 && !loading && (
|
||||
<View className="text-center py-8">
|
||||
<View className="text-gray-400 mb-4">
|
||||
<Gift size="48" />
|
||||
</View>
|
||||
<View className="text-gray-500 mb-2">暂无可领取优惠券</View>
|
||||
<View className="text-gray-400 text-sm">请关注商家活动获取更多优惠券</View>
|
||||
</View>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default CouponReceive;
|
||||
5
src/user/ticket/redeem.config.ts
Normal file
5
src/user/ticket/redeem.config.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '兑换礼品卡',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff'
|
||||
})
|
||||
278
src/user/ticket/redeem.tsx
Normal file
278
src/user/ticket/redeem.tsx
Normal file
@@ -0,0 +1,278 @@
|
||||
import {useState, useEffect} from "react";
|
||||
import {useRouter} from '@tarojs/taro'
|
||||
import {Button, ConfigProvider, Input, Divider} from '@nutui/nutui-react-taro'
|
||||
import {ArrowLeft, QrCode, Gift, Voucher} from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import dayjs from 'dayjs'
|
||||
import {ShopGift} from "@/api/shop/shopGift/model";
|
||||
import {pageShopGift, updateShopGift} from "@/api/shop/shopGift";
|
||||
import GiftCard from "@/components/GiftCard";
|
||||
|
||||
const GiftCardRedeem = () => {
|
||||
const router = useRouter()
|
||||
const [code, setCode] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [validating, setValidating] = useState(false)
|
||||
const [validGift, setValidGift] = useState<ShopGift | null>(null)
|
||||
const [redeemSuccess, setRedeemSuccess] = useState(false)
|
||||
|
||||
// 从路由参数获取扫码结果
|
||||
useEffect(() => {
|
||||
if (router.params.code) {
|
||||
const scannedCode = decodeURIComponent(router.params.code)
|
||||
setCode(scannedCode)
|
||||
handleValidateCode(scannedCode)
|
||||
}
|
||||
}, [router.params.code])
|
||||
|
||||
// 验证兑换码
|
||||
const handleValidateCode = async (inputCode?: string) => {
|
||||
const codeToValidate = inputCode || code
|
||||
if (!codeToValidate.trim()) {
|
||||
Taro.showToast({
|
||||
title: '请输入兑换码',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
setValidating(true)
|
||||
try {
|
||||
const gifts = await pageShopGift({code: codeToValidate,status: 0})
|
||||
if(gifts?.count == 0){
|
||||
Taro.showToast({
|
||||
title: '兑换码无效或已使用',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
const item = gifts?.list[0];
|
||||
if(item){
|
||||
setValidGift(item)
|
||||
Taro.showToast({
|
||||
title: '验证成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('验证兑换码失败:', error)
|
||||
setValidGift(null)
|
||||
Taro.showToast({
|
||||
title: '兑换码无效或已使用',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setValidating(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 兑换礼品卡
|
||||
const handleRedeem = async () => {
|
||||
if (!validGift || !code.trim()) return
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
await updateShopGift({
|
||||
...validGift,
|
||||
userId: Taro.getStorageSync('UserId'),
|
||||
takeTime: dayjs.unix(Date.now() / 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
})
|
||||
|
||||
setRedeemSuccess(true)
|
||||
Taro.showToast({
|
||||
title: '兑换成功',
|
||||
icon: 'success'
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('兑换礼品卡失败:', error)
|
||||
Taro.showToast({
|
||||
title: '兑换失败',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 扫码兑换
|
||||
const handleScanCode = () => {
|
||||
Taro.scanCode({
|
||||
success: (res) => {
|
||||
const scannedCode = res.result
|
||||
if (scannedCode) {
|
||||
setCode(scannedCode)
|
||||
handleValidateCode(scannedCode)
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
Taro.showToast({
|
||||
title: '扫码失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const handleBack = () => {
|
||||
Taro.navigateBack()
|
||||
}
|
||||
|
||||
// 查看我的礼品卡
|
||||
const handleViewMyGifts = () => {
|
||||
Taro.navigateTo({
|
||||
url: '/user/gift/index'
|
||||
})
|
||||
}
|
||||
|
||||
// 转换礼品卡数据
|
||||
const transformGiftData = (gift: ShopGift) => {
|
||||
return {
|
||||
id: gift.id || 0,
|
||||
name: gift.name || '水票',
|
||||
description: gift.description,
|
||||
code: gift.code,
|
||||
goodsImage: gift.goodsImage,
|
||||
faceValue: gift.faceValue,
|
||||
type: gift.type,
|
||||
expireTime: gift.expireTime,
|
||||
takeTime: gift.takeTime,
|
||||
useLocation: gift.useLocation,
|
||||
contactInfo: gift.contactInfo,
|
||||
showCode: false, // 兑换页面不显示兑换码
|
||||
showUseBtn: false, // 兑换页面不显示使用按钮
|
||||
showDetailBtn: false, // 兑换页面不显示详情按钮
|
||||
theme: 'gold' as const
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
{/* 自定义导航栏 */}
|
||||
<View className="flex items-center justify-between p-4 bg-white border-b border-gray-100 hidden">
|
||||
<View className="flex items-center" onClick={handleBack}>
|
||||
<ArrowLeft size="20" />
|
||||
<Text className="ml-2 text-lg">兑换礼品卡</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{!redeemSuccess ? (
|
||||
<>
|
||||
{/* 兑换说明 */}
|
||||
<View className="bg-blue-50 mx-4 mt-4 p-4 rounded-xl border border-blue-200">
|
||||
<View className="flex items-center mb-2">
|
||||
<Gift size="20" className="text-blue-600 mr-2" />
|
||||
<Text className="font-semibold text-blue-800">兑换说明</Text>
|
||||
</View>
|
||||
<Text className="text-blue-700 text-sm leading-relaxed">
|
||||
请输入或扫描礼品卡兑换码，验证成功后即可兑换到您的账户中。每个兑换码只能使用一次。
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 兑换码输入 */}
|
||||
<View className="bg-white mx-4 mt-4 p-4 rounded-xl">
|
||||
<Text className="font-semibold mb-3 text-gray-800">输入兑换码</Text>
|
||||
|
||||
<View className="mb-4">
|
||||
<Input
|
||||
placeholder="请输入礼品卡兑换码"
|
||||
value={code}
|
||||
onChange={setCode}
|
||||
clearable
|
||||
className="border border-gray-200 rounded-lg"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className="flex gap-3">
|
||||
<Button
|
||||
fill="outline"
|
||||
size="large"
|
||||
className="flex-1"
|
||||
icon={<QrCode />}
|
||||
onClick={handleScanCode}
|
||||
>
|
||||
扫码输入
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
className="flex-1"
|
||||
loading={validating}
|
||||
onClick={() => handleValidateCode()}
|
||||
>
|
||||
验证兑换码
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 验证结果 */}
|
||||
{validGift && (
|
||||
<>
|
||||
<Divider className="my-4">验证成功</Divider>
|
||||
|
||||
<View className="mx-4">
|
||||
<GiftCard {...transformGiftData(validGift)} />
|
||||
</View>
|
||||
|
||||
<View className="mx-4 mt-4">
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
loading={loading}
|
||||
onClick={handleRedeem}
|
||||
>
|
||||
确认兑换
|
||||
</Button>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
/* 兑换成功页面 */
|
||||
<View className="flex flex-col items-center justify-center px-4" style={{height: '600px'}}>
|
||||
<View className="text-center">
|
||||
<View className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Voucher size="40" className="text-green-600" />
|
||||
</View>
|
||||
|
||||
<Text className="text-2xl font-bold text-gray-900 mb-2">兑换成功！</Text>
|
||||
<Text className="text-left text-gray-500 mb-6">礼品卡已添加到您的账户中</Text>
|
||||
|
||||
{validGift && (
|
||||
<View className="mb-6">
|
||||
<GiftCard {...transformGiftData(validGift)} />
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="flex flex-col gap-3 w-full max-w-xs">
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
onClick={handleViewMyGifts}
|
||||
>
|
||||
查看我的礼品卡
|
||||
</Button>
|
||||
<Button
|
||||
fill="outline"
|
||||
size="large"
|
||||
block
|
||||
onClick={() => {
|
||||
setCode('')
|
||||
setValidGift(null)
|
||||
setRedeemSuccess(false)
|
||||
}}
|
||||
>
|
||||
继续兑换
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default GiftCardRedeem;
|
||||
6
src/user/ticket/use.config.ts
Normal file
6
src/user/ticket/use.config.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '使用礼品卡',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff',
|
||||
navigationStyle: 'custom'
|
||||
})
|
||||
290
src/user/ticket/use.tsx
Normal file
290
src/user/ticket/use.tsx
Normal file
@@ -0,0 +1,290 @@
|
||||
import {useState, useEffect} from "react";
|
||||
import {useRouter} from '@tarojs/taro'
|
||||
import {Button, ConfigProvider, Input, TextArea} from '@nutui/nutui-react-taro'
|
||||
import {ArrowLeft, Location} from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import {ShopGift} from "@/api/shop/shopGift/model";
|
||||
import {getShopGift, useGift} from "@/api/shop/shopGift";
|
||||
import GiftCard from "@/components/GiftCard";
|
||||
|
||||
const GiftCardUse = () => {
|
||||
const router = useRouter()
|
||||
const [gift, setGift] = useState<ShopGift | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [useLocation, setUseLocation] = useState('')
|
||||
const [useNote, setUseNote] = useState('')
|
||||
const [useSuccess, setUseSuccess] = useState(false)
|
||||
const giftId = router.params.id
|
||||
|
||||
useEffect(() => {
|
||||
if (giftId) {
|
||||
loadGiftDetail()
|
||||
}
|
||||
}, [giftId])
|
||||
|
||||
// 加载礼品卡详情
|
||||
const loadGiftDetail = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const data = await getShopGift(Number(giftId))
|
||||
setGift(data)
|
||||
|
||||
// 如果礼品卡有预设使用地址，自动填入
|
||||
if (data.useLocation) {
|
||||
setUseLocation(data.useLocation)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取礼品卡详情失败:', error)
|
||||
Taro.showToast({
|
||||
title: '获取礼品卡详情失败',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 使用礼品卡
|
||||
const handleUseGift = async () => {
|
||||
if (!gift) return
|
||||
|
||||
// 根据礼品卡类型进行不同的验证
|
||||
if (gift.type === 10 && !useLocation.trim()) { // 实物礼品卡需要地址
|
||||
Taro.showToast({
|
||||
title: '请填写使用地址',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
setSubmitting(true)
|
||||
try {
|
||||
await useGift({
|
||||
giftId: gift.id!,
|
||||
useLocation: useLocation.trim(),
|
||||
useNote: useNote.trim()
|
||||
})
|
||||
|
||||
setUseSuccess(true)
|
||||
Taro.showToast({
|
||||
title: '使用成功',
|
||||
icon: 'success'
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('使用礼品卡失败:', error)
|
||||
Taro.showToast({
|
||||
title: '使用失败',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前位置
|
||||
const handleGetLocation = () => {
|
||||
Taro.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
// 这里可以调用地理编码API将坐标转换为地址
|
||||
// 暂时使用坐标信息
|
||||
setUseLocation(`经度:${res.longitude}, 纬度:${res.latitude}`)
|
||||
Taro.showToast({
|
||||
title: '位置获取成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
Taro.showToast({
|
||||
title: '位置获取失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const handleBack = () => {
|
||||
Taro.navigateBack()
|
||||
}
|
||||
|
||||
// 查看我的礼品卡
|
||||
const handleViewMyGifts = () => {
|
||||
Taro.navigateTo({
|
||||
url: '/user/gift/index'
|
||||
})
|
||||
}
|
||||
|
||||
// 转换礼品卡数据
|
||||
const transformGiftData = (gift: ShopGift) => {
|
||||
return {
|
||||
id: gift.id || 0,
|
||||
name: gift.name || '水票',
|
||||
description: gift.description,
|
||||
code: gift.code,
|
||||
goodsImage: gift.goodsImage,
|
||||
faceValue: gift.faceValue,
|
||||
type: gift.type,
|
||||
expireTime: gift.expireTime,
|
||||
takeTime: gift.takeTime,
|
||||
useLocation: gift.useLocation,
|
||||
contactInfo: gift.contactInfo,
|
||||
showCode: false,
|
||||
showUseBtn: false,
|
||||
showDetailBtn: false,
|
||||
theme: 'gold' as const
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<View className="flex justify-center items-center h-screen">
|
||||
<Text>加载中...</Text>
|
||||
</View>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
if (!gift) {
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<View className="flex flex-col justify-center items-center h-screen">
|
||||
<Text className="text-gray-500 mb-4">礼品卡不存在</Text>
|
||||
<Button onClick={handleBack}>返回</Button>
|
||||
</View>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
{/* 自定义导航栏 */}
|
||||
<View className="flex items-center justify-between p-4 bg-white border-b border-gray-100">
|
||||
<View className="flex items-center" onClick={handleBack}>
|
||||
<ArrowLeft size="20" />
|
||||
<Text className="ml-2 text-lg">使用礼品卡</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{!useSuccess ? (
|
||||
<>
|
||||
{/* 礼品卡信息 */}
|
||||
<View className="mx-4 mt-4">
|
||||
<GiftCard {...transformGiftData(gift)} />
|
||||
</View>
|
||||
|
||||
{/* 使用表单 */}
|
||||
<View className="bg-white mx-4 mt-4 p-4 rounded-xl">
|
||||
<Text className="font-semibold mb-4 text-gray-800">使用信息</Text>
|
||||
|
||||
{/* 使用地址（实物礼品卡必填） */}
|
||||
{gift.type === 10 && (
|
||||
<View className="mb-4">
|
||||
<Text className="text-gray-700 mb-2">使用地址 *</Text>
|
||||
<View className="flex gap-2">
|
||||
<Input
|
||||
placeholder="请输入使用地址"
|
||||
value={useLocation}
|
||||
onChange={setUseLocation}
|
||||
className="flex-1 border border-gray-200 rounded-lg"
|
||||
/>
|
||||
<Button
|
||||
size="small"
|
||||
fill="outline"
|
||||
icon={<Location />}
|
||||
onClick={handleGetLocation}
|
||||
>
|
||||
定位
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 虚拟礼品卡和服务礼品卡的地址选填 */}
|
||||
{gift.type !== 10 && (
|
||||
<View className="mb-4">
|
||||
<Text className="text-gray-700 mb-2">使用地址（选填）</Text>
|
||||
<Input
|
||||
placeholder="请输入使用地址"
|
||||
value={useLocation}
|
||||
onChange={setUseLocation}
|
||||
className="border border-gray-200 rounded-lg"
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 使用备注 */}
|
||||
<View className="mb-4">
|
||||
<Text className="text-gray-700 mb-2">使用备注（选填）</Text>
|
||||
<TextArea
|
||||
placeholder="请输入使用备注"
|
||||
value={useNote}
|
||||
onChange={setUseNote}
|
||||
rows={3}
|
||||
className="border border-gray-200 rounded-lg"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 使用说明 */}
|
||||
<View className="bg-yellow-50 p-3 rounded-lg border border-yellow-200 mb-4">
|
||||
<Text className="text-yellow-800 text-sm">
|
||||
{gift.type === 10 && '💡 实物礼品卡使用后请到指定地址领取商品'}
|
||||
{gift.type === 20 && '💡 虚拟礼品卡使用后将自动发放到您的账户'}
|
||||
{gift.type === 30 && '💡 服务礼品卡使用后请联系客服预约服务时间'}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
loading={submitting}
|
||||
onClick={handleUseGift}
|
||||
>
|
||||
确认使用
|
||||
</Button>
|
||||
</View>
|
||||
</>
|
||||
) : (
|
||||
/* 使用成功页面 */
|
||||
<View className="flex flex-col items-center justify-center px-4" style={{height: '600px'}}>
|
||||
<View className="text-center">
|
||||
<View className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
{/*<Voucher size="40" className="text-green-600" />*/}
|
||||
</View>
|
||||
|
||||
<Text className="text-2xl font-bold text-gray-900 mb-2">使用成功！</Text>
|
||||
<Text className="text-gray-600 mb-6">
|
||||
{gift.type === 10 && '请到指定地址领取您的商品'}
|
||||
{gift.type === 20 && '虚拟商品已发放到您的账户'}
|
||||
{gift.type === 30 && '请联系客服预约服务时间'}
|
||||
</Text>
|
||||
|
||||
{gift.contactInfo && (
|
||||
<View className="bg-blue-50 p-4 rounded-lg mb-6 border border-blue-200">
|
||||
<Text className="text-blue-800 font-semibold mb-1">客服联系方式</Text>
|
||||
<Text className="text-blue-700">{gift.contactInfo}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="flex flex-col gap-3 w-full max-w-xs">
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
onClick={handleViewMyGifts}
|
||||
>
|
||||
查看我的礼品卡
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default GiftCardUse;
|
||||
Reference in New Issue
Block a user