448 lines
12 KiB
Plaintext
448 lines
12 KiB
Plaintext
<template>
|
|
<view class="admin-marketing-integral-order">
|
|
<!-- 顶部状态选项卡 -->
|
|
<view class="status-tabs box-shadow">
|
|
<view v-for="(item, index) in statusOptions" :key="index"
|
|
:class="['tab-item', currentStatus == item.value ? 'active' : '']"
|
|
@click="currentStatus = item.value">
|
|
<text class="tab-label">{{ item.label }}</text>
|
|
<text class="tab-count">({{ item.count }})</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 筛选区域 -->
|
|
<view class="filter-card box-shadow">
|
|
<view class="filter-row">
|
|
<view class="filter-item">
|
|
<text class="label">订单状态：</text>
|
|
<picker :range="statusOptions" range-key="label" @change="statusChange">
|
|
<view class="picker-value">{{ getStatusLabel(currentStatus) }} <text class="iconfont icon-arrow-down"></text></view>
|
|
</picker>
|
|
</view>
|
|
<view class="filter-item">
|
|
<text class="label">创建时间：</text>
|
|
<view class="date-range-mock">
|
|
<text class="date-text">全部</text>
|
|
<text class="iconfont icon-calendar"></text>
|
|
</view>
|
|
</view>
|
|
<view class="filter-item search-box">
|
|
<input class="admin-input" placeholder="订单号/收货人/电话" v-model="searchQuery" />
|
|
<button class="admin-btn admin-btn-primary search-btn" @click="handleSearch">搜索</button>
|
|
<button class="admin-btn admin-btn-default reset-btn" @click="handleReset">重置</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 工具栏 -->
|
|
<view class="table-toolbar">
|
|
<button class="admin-btn admin-btn-default">订单导出</button>
|
|
</view>
|
|
|
|
<!-- 表格区域 -->
|
|
<view class="table-card box-shadow">
|
|
<view class="table-header">
|
|
<text class="col-200">订单号</text>
|
|
<text class="col-150">用户信息</text>
|
|
<text class="col-250">商品信息</text>
|
|
<text class="col-100">兑换积分</text>
|
|
<text class="col-100">订单状态</text>
|
|
<text class="col-180">下单时间</text>
|
|
<text class="col-120 center">操作</text>
|
|
</view>
|
|
|
|
<view class="table-body">
|
|
<view v-for="(item, index) in tableData" :key="index" class="table-row">
|
|
<view class="col-200">
|
|
<text class="order-id-text">{{ item.orderId }}</text>
|
|
</view>
|
|
|
|
<view class="col-150">
|
|
<text class="user-nickname-uid">{{ item.nickname }}/{{ item.uid }}</text>
|
|
</view>
|
|
|
|
<view class="col-250 product-cell">
|
|
<view class="tabBox">
|
|
<image class="tabBox_img" :src="item.image" mode="aspectFill"></image>
|
|
<view class="tabBox_right">
|
|
<text class="tabBox_tit">{{ item.storeName }} | {{ item.sku }}</text>
|
|
<text class="tabBox_pice">积分{{ item.integral }} x {{ item.num }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="col-100">
|
|
<text class="integral-val">{{ item.integral }}</text>
|
|
</view>
|
|
|
|
<view class="col-100">
|
|
<text class="status-text">{{ getStatusText(item.status) }}</text>
|
|
</view>
|
|
|
|
<view class="col-180">
|
|
<text class="time-text">{{ item.addTime }}</text>
|
|
</view>
|
|
|
|
<view class="col-120 center ops-cell">
|
|
<text class="op-link" v-if="item.status === 0" @click="handleShip(item)">发送货</text>
|
|
<text class="op-link" @click="handleMore(item)">更多 <text class="iconfont icon-arrow-down" style="font-size: 10px;"></text></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分页区域 -->
|
|
<CommonPagination
|
|
v-if="total > 0"
|
|
:total="total"
|
|
:loading="false"
|
|
:currentPage="currentPage"
|
|
:pageSize="currentSize"
|
|
:pageSizeOptionLabels="pageSizeOptionLabels"
|
|
:pageSizeIndex="pageSizeIndex"
|
|
:visiblePages="visiblePages"
|
|
:totalPage="totalPage"
|
|
:jumpPageInput="jumpPageInput"
|
|
@page-size-change="handlePageSizeChange"
|
|
@page-change="handlePageChange"
|
|
@update:jumpPageInput="updateJumpPageInput"
|
|
@jump-page="handleJumpPage"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script uts>
|
|
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
|
|
export default {
|
|
components: {
|
|
CommonPagination
|
|
},
|
|
data() {
|
|
return {
|
|
currentStatus: -1,
|
|
searchQuery: '',
|
|
total: 8,
|
|
currentPage: 1,
|
|
currentSize: 15,
|
|
jumpPageInput: '',
|
|
statusOptions: [
|
|
{ label: '全部', value: -1, count: 8 },
|
|
{ label: '待发货', value: 0, count: 6 },
|
|
{ label: '待收货', value: 1, count: 1 },
|
|
{ label: '待评价', value: 2, count: 0 },
|
|
{ label: '已完成', value: 3, count: 1 }
|
|
] as any[],
|
|
tableData: [
|
|
{
|
|
orderId: 'wx719261472118538240',
|
|
nickname: '故事的小黄花',
|
|
uid: 80674,
|
|
storeName: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤UWG440060',
|
|
sku: 'L,卡其',
|
|
image: '/static/logo.png',
|
|
integral: 200,
|
|
num: 1,
|
|
status: 0,
|
|
addTime: '2025-11-10 18:48:18'
|
|
},
|
|
{
|
|
orderId: 'wx717772249846775808',
|
|
nickname: '蓝桥春雪',
|
|
uid: 80582,
|
|
storeName: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤UWG440060',
|
|
sku: 'M,卡其',
|
|
image: '/static/logo.png',
|
|
integral: 200,
|
|
num: 1,
|
|
status: 0,
|
|
addTime: '2025-11-06 16:10:39'
|
|
},
|
|
{
|
|
orderId: 'wx717763196697444352',
|
|
nickname: './',
|
|
uid: 78504,
|
|
storeName: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤UWG440060',
|
|
sku: 'S,卡其',
|
|
image: '/static/logo.png',
|
|
integral: 200,
|
|
num: 1,
|
|
status: 0,
|
|
addTime: '2025-11-06 15:34:41'
|
|
},
|
|
{
|
|
orderId: 'wx714911802768490496',
|
|
nickname: '177****1167',
|
|
uid: 36391,
|
|
storeName: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤UWG440060',
|
|
sku: 'XL,卡其',
|
|
image: '/static/logo.png',
|
|
integral: 0,
|
|
num: 1,
|
|
status: 0,
|
|
addTime: '2025-10-29 18:44:16'
|
|
},
|
|
{
|
|
orderId: 'wx665016819706232832',
|
|
nickname: '陈修然',
|
|
uid: 75658,
|
|
storeName: 'MLB官方 男女情侣软顶棒球帽明星同款运动帽遮阳鸭舌帽休闲CP19',
|
|
sku: 'XS,纽约洋基队/绿色',
|
|
image: '/static/logo.png',
|
|
integral: 299,
|
|
num: 1,
|
|
status: 0,
|
|
addTime: '2025-06-14 02:19:25'
|
|
}
|
|
] as any[]
|
|
}
|
|
},
|
|
computed: {
|
|
pageSizeOptions(): number[] { return [10, 15, 20, 30, 50] },
|
|
pageSizeOptionLabels(): string[] { return (this.pageSizeOptions as number[]).map((n: number) => `${n}条/页`) },
|
|
pageSizeIndex(): number {
|
|
const idx = (this.pageSizeOptions as number[]).indexOf(this.currentSize as number)
|
|
return idx >= 0 ? idx : 0
|
|
},
|
|
totalPage(): number { return Math.max(1, Math.ceil((this.total as number) / (this.currentSize as number))) },
|
|
visiblePages(): number[] {
|
|
const t = this.totalPage as number
|
|
const cur = this.currentPage as number
|
|
if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
|
|
if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
|
|
if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
|
|
return [1, -1, cur - 1, cur, cur + 1, -1, t]
|
|
}
|
|
},
|
|
methods: {
|
|
getStatusLabel(val : number) : string {
|
|
const item = this.statusOptions.find((opt: any) => opt.value === val)
|
|
return item ? item.label : '全部'
|
|
},
|
|
getStatusText(status : number) : string {
|
|
switch(status) {
|
|
case 0: return '未发货';
|
|
case 1: return '待收货';
|
|
case 2: return '待评价';
|
|
case 3: return '已完成';
|
|
default: return '未知';
|
|
}
|
|
},
|
|
handleShip(item: any) {
|
|
uni.showToast({ title: '去发货: ' + item.orderId, icon: 'none' })
|
|
},
|
|
handleMore(item: any) {
|
|
uni.showActionSheet({
|
|
itemList: ['订单详情', '订单记录', '订单备注'],
|
|
success: (res) => {
|
|
uni.showToast({ title: '点击了' + res.tapIndex, icon: 'none' })
|
|
}
|
|
})
|
|
},
|
|
statusChange(e : any) {
|
|
this.currentStatus = this.statusOptions[e.detail.value].value as number
|
|
},
|
|
handleSearch() {
|
|
uni.showToast({ title: '查询', icon: 'none' })
|
|
},
|
|
handleReset() {
|
|
this.searchQuery = ''
|
|
this.currentStatus = -1
|
|
},
|
|
handlePageChange(p: number) { this.currentPage = p as any },
|
|
handlePageSizeChange(e: any) {
|
|
const idx = Number(e.detail.value)
|
|
this.currentSize = ((this.pageSizeOptions as number[])[idx] ?? (this.pageSizeOptions as number[])[0]) as any
|
|
this.currentPage = 1 as any
|
|
},
|
|
handleJumpPage() {
|
|
const p = parseInt(this.jumpPageInput as string)
|
|
if (!isNaN(p) && p >= 1 && p <= (this.totalPage as number)) this.currentPage = p as any
|
|
},
|
|
updateJumpPageInput(val: string) { this.jumpPageInput = val as any }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.admin-marketing-integral-order {
|
|
padding: 0;
|
|
background-color: transparent;
|
|
min-height: auto;
|
|
}
|
|
|
|
.box-shadow {
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* 顶部状态卡片 */
|
|
.status-tabs {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 0 10px;
|
|
}
|
|
.tab-item {
|
|
padding: 15px 20px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
.tab-item.active {
|
|
color: #2d8cf0;
|
|
}
|
|
.tab-item.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background-color: #2d8cf0;
|
|
}
|
|
.tab-label {
|
|
font-size: 14px;
|
|
}
|
|
.tab-count {
|
|
font-size: 12px;
|
|
margin-left: 4px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* 筛选卡片 */
|
|
.filter-card {
|
|
padding: 20px;
|
|
}
|
|
.filter-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
.filter-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-right: 24px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.label {
|
|
font-size: 14px;
|
|
color: #606266;
|
|
white-space: nowrap;
|
|
}
|
|
.date-range-mock {
|
|
width: 280px;
|
|
height: 32px;
|
|
padding: 0 10px;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background-color: #fff;
|
|
}
|
|
.date-text { font-size: 13px; color: #c0c4cc; }
|
|
|
|
.admin-input {
|
|
width: 200px;
|
|
height: 32px;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
padding: 0 10px;
|
|
font-size: 14px;
|
|
}
|
|
.search-btn {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/* 表格区域 */
|
|
.table-card {
|
|
overflow: hidden;
|
|
}
|
|
.table-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background-color: #f8f8f9;
|
|
border-bottom: 1px solid #e8eaec;
|
|
padding: 12px 10px;
|
|
}
|
|
.table-header text {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #515a6e;
|
|
}
|
|
.table-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
border-bottom: 1px solid #e8eaec;
|
|
padding: 15px 10px;
|
|
}
|
|
|
|
/* 列宽定义 */
|
|
.col-100 { width: 100px; }
|
|
.col-120 { width: 120px; }
|
|
.col-150 { width: 150px; }
|
|
.col-180 { width: 180px; }
|
|
.col-200 { width: 200px; }
|
|
.col-250 { width: 250px; flex: 1; }
|
|
.center { text-align: center; justify-content: center; }
|
|
|
|
.order-id-text { font-size: 13px; color: #515a6e; }
|
|
.user-nickname-uid { font-size: 13px; color: #515a6e; }
|
|
|
|
/* 商品信息列 */
|
|
.product-cell {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.tabBox {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
.tabBox_img {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 2px;
|
|
margin-right: 8px;
|
|
}
|
|
.tabBox_right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.tabBox_tit {
|
|
font-size: 12px;
|
|
color: #515a6e;
|
|
line-height: 1.4;
|
|
}
|
|
.tabBox_pice {
|
|
font-size: 12px;
|
|
color: #808695;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.integral-val { font-size: 13px; color: #515a6e; }
|
|
.status-text { font-size: 13px; color: #515a6e; }
|
|
.time-text { font-size: 13px; color: #515a6e; }
|
|
|
|
.ops-cell {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.op-link {
|
|
font-size: 13px;
|
|
color: #2d8cf0;
|
|
margin: 0 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 分页区域已迁至 CommonPagination 组件 */
|
|
</style>
|
|
|