完善页面
This commit is contained in:
@@ -79,8 +79,14 @@ export default {
|
||||
})
|
||||
|
||||
const option = {
|
||||
grid: { left: 40, right: 20, top: 20, bottom: 40 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: 40, right: 20, top: 40, bottom: 40 },
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
textStyle: { color: '#666', fontSize: 12 },
|
||||
confine: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
@@ -95,9 +101,11 @@ export default {
|
||||
axisLabel: { color: 'rgba(0,0,0,0.45)', fontSize: 10 }
|
||||
},
|
||||
series: [{
|
||||
name: '数据',
|
||||
data: d,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
symbolSize: 0,
|
||||
lineStyle: { width: 2, color: '#1890ff' },
|
||||
areaStyle: {
|
||||
|
||||
@@ -75,7 +75,8 @@ export default {
|
||||
name: s.name,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 6,
|
||||
showSymbol: false,
|
||||
symbolSize: 0,
|
||||
itemStyle: { color: s.color },
|
||||
lineStyle: { width: 2 },
|
||||
data: s.data
|
||||
@@ -83,19 +84,26 @@ export default {
|
||||
})
|
||||
|
||||
const option = {
|
||||
grid: { left: 50, right: 30, top: 20, bottom: 40 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: 50, right: 30, top: 40, bottom: 60 },
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
confine: true,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
textStyle: { color: '#666', fontSize: 12 }
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
top: 0,
|
||||
left: 'center',
|
||||
right: 20,
|
||||
itemWidth: 12,
|
||||
itemHeight: 2,
|
||||
textStyle: { fontSize: 12, color: '#333' }
|
||||
textStyle: { fontSize: 11, color: '#666' }
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: this.xLabels,
|
||||
data: this.xLabels.map(s => String(s)),
|
||||
axisLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
|
||||
axisLabel: {
|
||||
color: 'rgba(0,0,0,0.45)',
|
||||
|
||||
@@ -69,18 +69,29 @@ export default {
|
||||
if (!this.items || this.items.length === 0) return
|
||||
|
||||
const data = (this.items as Array<any>).map((it) => {
|
||||
const itemStyle = it.itemStyle ? this.toPlainObject(it.itemStyle) : {} as any
|
||||
if (it.color && !itemStyle.color) {
|
||||
itemStyle.color = it.color
|
||||
}
|
||||
return {
|
||||
name: String(it.name),
|
||||
name: String(it.name || it.label),
|
||||
value: Number(it.value),
|
||||
itemStyle: this.toPlainObject(it.itemStyle)
|
||||
itemStyle: itemStyle
|
||||
}
|
||||
})
|
||||
|
||||
const option = {
|
||||
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
|
||||
color: ['#1890ff', '#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80'],
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
textStyle: { color: '#666', fontSize: 12 }
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: 10,
|
||||
right: 20,
|
||||
top: 'center',
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
@@ -89,7 +100,7 @@ export default {
|
||||
series: [{
|
||||
type: 'pie',
|
||||
radius: ['45%', '70%'],
|
||||
center: ['35%', '50%'],
|
||||
center: ['40%', '50%'],
|
||||
data: data,
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
@@ -97,6 +108,7 @@ export default {
|
||||
},
|
||||
labelLine: { show: false },
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff'
|
||||
}
|
||||
|
||||
@@ -52,6 +52,15 @@ import CmsCategory from '@/pages/mall/admin/cms/category/list.uvue'
|
||||
import MarketingCouponList from '@/pages/mall/admin/marketing/coupon/list.uvue'
|
||||
import MarketingCouponUser from '@/pages/mall/admin/marketing/coupon/user.uvue'
|
||||
import MarketingIntegralStatistic from '@/pages/mall/admin/marketing/integral/statistic.uvue'
|
||||
import MarketingIntegralProduct from '@/pages/mall/admin/marketing/integral/list.uvue'
|
||||
import MarketingIntegralOrder from '@/pages/mall/admin/marketing/integral/order.uvue'
|
||||
import MarketingIntegralRecord from '@/pages/mall/admin/marketing/integral/record.uvue'
|
||||
import MarketingIntegralConfig from '@/pages/mall/admin/marketing/integral/config.uvue'
|
||||
import MarketingLotteryList from '@/pages/mall/admin/marketing/lottery/list.uvue'
|
||||
import MarketingLotteryConfig from '@/pages/mall/admin/marketing/lottery/config.uvue'
|
||||
import MarketingCombinationProduct from '@/pages/mall/admin/marketing/combination/product.uvue'
|
||||
import MarketingCombinationList from '@/pages/mall/admin/marketing/combination/list.uvue'
|
||||
import MarketingCombinationCreate from '@/pages/mall/admin/marketing/combination/create.uvue'
|
||||
|
||||
// 导入财务模块（纯组件）
|
||||
import FinanceTransactionStats from '@/pages/mall/admin/finance/transaction_stats.uvue'
|
||||
@@ -124,18 +133,20 @@ export const componentMap: Map<string, any> = new Map([
|
||||
['MarketingCouponUser', MarketingCouponUser],
|
||||
// 2. 积分管理
|
||||
['MarketingIntegralStatistic', MarketingIntegralStatistic],
|
||||
['MarketingIntegralProduct', PlaceholderPage],
|
||||
['MarketingIntegralOrder', PlaceholderPage],
|
||||
['MarketingIntegralRecord', PlaceholderPage],
|
||||
['MarketingIntegralProduct', MarketingIntegralProduct],
|
||||
['MarketingIntegralOrder', MarketingIntegralOrder],
|
||||
['MarketingIntegralRecord', MarketingIntegralRecord],
|
||||
['MarketingIntegralConfig', MarketingIntegralConfig],
|
||||
// 3. 抽奖管理
|
||||
['MarketingLotteryList', PlaceholderPage],
|
||||
['MarketingLotteryConfig', PlaceholderPage],
|
||||
['MarketingLotteryList', MarketingLotteryList],
|
||||
['MarketingLotteryConfig', MarketingLotteryConfig],
|
||||
// 4. 砍价管理
|
||||
['MarketingBargainProduct', PlaceholderPage],
|
||||
['MarketingBargainList', PlaceholderPage],
|
||||
// 5. 拼团管理
|
||||
['MarketingCombinationProduct', PlaceholderPage],
|
||||
['MarketingCombinationList', PlaceholderPage],
|
||||
['MarketingCombinationProduct', MarketingCombinationProduct],
|
||||
['MarketingCombinationList', MarketingCombinationList],
|
||||
['MarketingCombinationCreate', MarketingCombinationCreate],
|
||||
// 6. 秒杀管理
|
||||
['MarketingSeckillList', PlaceholderPage],
|
||||
['MarketingSeckillProduct', PlaceholderPage],
|
||||
|
||||
@@ -505,6 +505,16 @@ export const routes: RouteRecord[] = [
|
||||
auth: ['admin-marketing-integral-record'],
|
||||
order: 4
|
||||
},
|
||||
{
|
||||
id: 'marketing_integral_config',
|
||||
title: '积分配置',
|
||||
path: '/pages/mall/admin/marketing/integral/config',
|
||||
componentKey: 'MarketingIntegralConfig',
|
||||
parentId: 'marketing',
|
||||
groupId: 'marketing-integral',
|
||||
auth: ['admin-marketing-integral-config'],
|
||||
order: 5
|
||||
},
|
||||
// 3. 抽奖管理
|
||||
{
|
||||
id: 'marketing_lottery_list',
|
||||
@@ -568,6 +578,16 @@ export const routes: RouteRecord[] = [
|
||||
auth: ['admin-marketing-combination-index'],
|
||||
order: 2
|
||||
},
|
||||
{
|
||||
id: 'marketing_combination_create',
|
||||
title: '添加拼团商品',
|
||||
path: '/pages/mall/admin/marketing/combination/create',
|
||||
componentKey: 'MarketingCombinationCreate',
|
||||
parentId: 'marketing',
|
||||
groupId: 'marketing-combination',
|
||||
auth: ['admin-marketing-combination-create'],
|
||||
hidden: true
|
||||
},
|
||||
// 6. 秒杀管理
|
||||
{
|
||||
id: 'marketing_seckill_list',
|
||||
|
||||
440
pages/mall/admin/marketing/combination/create.uvue
Normal file
440
pages/mall/admin/marketing/combination/create.uvue
Normal file
@@ -0,0 +1,440 @@
|
||||
<template>
|
||||
<view class="marketing-combination-create">
|
||||
<view class="page-header">
|
||||
<view class="back-btn" @click="handleBack">
|
||||
<text class="back-ic">←</text>
|
||||
<text class="back-txt">返回</text>
|
||||
</view>
|
||||
<text class="page-title">{{ isEdit ? '编辑拼团商品' : '添加拼团商品' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="steps-card border-shadow">
|
||||
<view class="steps-container">
|
||||
<view v-for="(step, index) in steps" :key="index" :class="['step-item', currentStep >= index ? 'active' : '']">
|
||||
<view class="step-icon">
|
||||
<text class="step-num" v-if="currentStep <= index">{{ index + 1 }}</text>
|
||||
<text class="step-check" v-else>✓</text>
|
||||
</view>
|
||||
<text class="step-text">{{ step }}</text>
|
||||
<view class="step-line" v-if="index < steps.length - 1"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 步骤1: 选择商品 -->
|
||||
<view v-if="currentStep === 0" class="step-content border-shadow">
|
||||
<view class="form-item row-center">
|
||||
<text class="label required">选择商品：</text>
|
||||
<view class="goods-selector" @click="openGoodsSelector">
|
||||
<view v-if="selectedGood" class="selected-inner">
|
||||
<image class="good-img" :src="selectedGood.image" mode="aspectFill"></image>
|
||||
<text class="good-name">{{ selectedGood.title }}</text>
|
||||
</view>
|
||||
<view v-else class="selector-empty">
|
||||
<text class="empty-ic">🛍️</text>
|
||||
<text class="empty-txt">选择商品</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 步骤2: 填写基础信息 -->
|
||||
<view v-if="currentStep === 1" class="step-content border-shadow">
|
||||
<view class="form-scroll">
|
||||
<view class="form-section">
|
||||
<text class="section-title">基础配置</text>
|
||||
<view class="form-item">
|
||||
<text class="label required">拼团名称：</text>
|
||||
<input class="input" v-model="form.title" placeholder="请输入拼团名称" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label required">拼团简介：</text>
|
||||
<textarea class="textarea" v-model="form.info" placeholder="请输入拼团简介" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label required">拼团时间：</text>
|
||||
<view class="date-range">
|
||||
<input class="input-half" v-model="form.start_time" placeholder="开始日期" />
|
||||
<text class="range-sep">-</text>
|
||||
<input class="input-half" v-model="form.stop_time" placeholder="结束日期" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-section">
|
||||
<text class="section-title">拼团规则</text>
|
||||
<view class="form-item">
|
||||
<text class="label required">拼团时效：</text>
|
||||
<view class="input-unit">
|
||||
<input class="input" type="number" v-model="form.effective_time" />
|
||||
<text class="unit">小时</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label required">拼团人数：</text>
|
||||
<view class="input-unit">
|
||||
<input class="input" type="number" v-model="form.people" />
|
||||
<text class="unit">人</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">虚拟成团：</text>
|
||||
<view class="input-unit">
|
||||
<input class="input" type="number" v-model="form.virtual_people" />
|
||||
<text class="unit">人</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 步骤3: 修改商品详情 -->
|
||||
<view v-if="currentStep === 2" class="step-content border-shadow">
|
||||
<view class="spec-table">
|
||||
<view class="table-head">
|
||||
<view class="th">规格</view>
|
||||
<view class="th">拼团价</view>
|
||||
<view class="th">成本价</view>
|
||||
<view class="th">限量</view>
|
||||
<view class="th">库存</view>
|
||||
</view>
|
||||
<view class="table-row" v-for="(spec, index) in specs" :key="index">
|
||||
<view class="td">{{ spec.name }}</view>
|
||||
<view class="td"><input class="inp-small" v-model="spec.price" /></view>
|
||||
<view class="td"><input class="inp-small" v-model="spec.cost" /></view>
|
||||
<view class="td"><input class="inp-small" v-model="spec.quota" /></view>
|
||||
<view class="td">{{ spec.stock }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-section">
|
||||
<text class="label">商品详情：</text>
|
||||
<view class="editor-placeholder">
|
||||
<text class="p-txt">这里是编辑器区域 (WangEditor 映射)</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="footer-actions">
|
||||
<view v-if="currentStep > 0" class="btn outline" @click="prevStep">上一步</view>
|
||||
<view class="btn primary" @click="nextStep">{{ currentStep === 2 ? '提交' : '下一步' }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品选择弹窗 -->
|
||||
<view v-if="showSelector" class="modal">
|
||||
<view class="modal-mask" @click="showSelector = false"></view>
|
||||
<view class="modal-content">
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">选择商品</text>
|
||||
<text class="close" @click="showSelector = false">✕</text>
|
||||
</view>
|
||||
<view class="modal-body">
|
||||
<view v-for="g in goodsList" :key="g.id" class="good-item" @click="selectGood(g)">
|
||||
<image :src="g.image" class="g-thumb"></image>
|
||||
<text class="g-title">{{ g.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
const steps = ['选择拼团商品', '填写基础信息', '修改商品详情']
|
||||
const currentStep = ref(0)
|
||||
const isEdit = ref(false)
|
||||
const showSelector = ref(false)
|
||||
|
||||
const selectedGood = ref<any>(null)
|
||||
|
||||
const form = reactive({
|
||||
title: '',
|
||||
info: '',
|
||||
start_time: '',
|
||||
stop_time: '',
|
||||
effective_time: 24,
|
||||
people: 2,
|
||||
virtual_people: 0,
|
||||
})
|
||||
|
||||
const specs = ref([
|
||||
{ name: '默认规格', price: '0.01', cost: '0.00', quota: '100', stock: '999' }
|
||||
])
|
||||
|
||||
const goodsList = ref([
|
||||
{ id: 1, title: 'UR2024夏季新款女装...', image: 'https://img14.360buyimg.com/n1/jfs/t1/172605/32/17036/114175/609a473eE6997455c/df82c6168e36712b.jpg' },
|
||||
{ id: 2, title: 'FOMIX 蛋壳椅...', image: 'https://img12.360buyimg.com/n1/jfs/t1/185449/19/11995/4379/60d96d27E6a877c8e/3c38d4e92a2a7a5a.jpg' }
|
||||
])
|
||||
|
||||
const handleBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
const openGoodsSelector = () => {
|
||||
showSelector.value = true
|
||||
}
|
||||
|
||||
const selectGood = (g: any) => {
|
||||
selectedGood.value = g
|
||||
form.title = g.title
|
||||
showSelector.value = false
|
||||
}
|
||||
|
||||
const nextStep = () => {
|
||||
if (currentStep.value === 0 && !selectedGood.value) {
|
||||
uni.showToast({ title: '请先选择商品', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (currentStep.value < 2) {
|
||||
currentStep.value++
|
||||
} else {
|
||||
uni.showToast({ title: '提交成功' })
|
||||
setTimeout(() => uni.navigateBack(), 1500)
|
||||
}
|
||||
}
|
||||
|
||||
const prevStep = () => {
|
||||
if (currentStep.value > 0) {
|
||||
currentStep.value--
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.marketing-combination-create {
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.border-shadow {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.back-ic { font-size: 18px; color: #606266; margin-right: 4px; }
|
||||
.back-txt { font-size: 14px; color: #606266; }
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.steps-card {
|
||||
padding: 30px 60px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.steps-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background-color: #f0f2f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.step-num { font-size: 14px; color: #909399; }
|
||||
.step-check { font-size: 14px; color: #fff; }
|
||||
|
||||
.step-text { font-size: 14px; color: #909399; }
|
||||
|
||||
.step-line {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #f0f2f5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.step-item.active .step-icon { background-color: #2d8cf0; }
|
||||
.step-item.active .step-num { color: #fff; }
|
||||
.step-item.active .step-text { color: #2d8cf0; font-weight: 600; }
|
||||
.step-item.active .step-line { background-color: #2d8cf0; }
|
||||
|
||||
.step-content {
|
||||
padding: 40px;
|
||||
margin-bottom: 80px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.row-center { align-items: center; }
|
||||
|
||||
.label {
|
||||
width: 120px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
text-align: right;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.required::before { content: '*'; color: #f56c6c; margin-right: 4px; }
|
||||
|
||||
.goods-selector {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 1px dashed #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selector-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.empty-ic { font-size: 24px; }
|
||||
.empty-txt { font-size: 12px; color: #909399; margin-top: 4px; }
|
||||
|
||||
.selected-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.good-img { width: 60px; height: 60px; border-radius: 2px; }
|
||||
.good-name { font-size: 10px; color: #333; margin-top: 2px; width: 70px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
max-width: 460px;
|
||||
height: 36px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
flex: 1;
|
||||
max-width: 460px;
|
||||
height: 100px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.date-range {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.input-half { width: 220px; height: 36px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 12px; font-size: 14px; }
|
||||
|
||||
.input-unit {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.input-unit .input { width: 200px; padding-right: 40px; }
|
||||
.unit { position: absolute; left: 160px; font-size: 13px; color: #909399; }
|
||||
|
||||
.section-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 10px;
|
||||
border-left: 4px solid #2d8cf0;
|
||||
}
|
||||
|
||||
.spec-table {
|
||||
border: 1px solid #e8eaec;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.table-head { display: flex; background: #f8f8f9; border-bottom: 1px solid #e8eaec; }
|
||||
.table-row { display: flex; border-bottom: 1px solid #e8eaec; }
|
||||
.th, .td { flex: 1; padding: 12px; font-size: 13px; text-align: center; }
|
||||
.inp-small { width: 80px; border: 1px solid #dcdfe6; border-radius: 2px; height: 28px; text-align: center; }
|
||||
|
||||
.editor-placeholder {
|
||||
height: 300px;
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #dcdfe6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.p-txt { color: #c0c4cc; }
|
||||
|
||||
.footer-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 64px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 32px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn.primary { background-color: #2d8cf0; color: #fff; }
|
||||
.btn.outline { border: 1px solid #dcdfe6; color: #606266; }
|
||||
|
||||
/* Modal */
|
||||
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
|
||||
.modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
|
||||
.modal-content { position: relative; width: 600px; background: #fff; border-radius: 8px; padding: 20px; }
|
||||
.modal-header { display: flex; justify-content: space-between; margin-bottom: 20px; }
|
||||
.modal-body { display: flex; flex-direction: column; gap: 12px; }
|
||||
.good-item { display: flex; flex-direction: row; align-items: center; padding: 10px; border-bottom: 1px solid #f2f2f2; cursor: pointer; }
|
||||
.g-thumb { width: 40px; height: 40px; margin-right: 12px; }
|
||||
.g-title { font-size: 14px; }
|
||||
</style>
|
||||
@@ -1,81 +1,436 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<view class="page-header">
|
||||
<text class="page-title">拼团活动</text>
|
||||
<text class="page-subtitle">Component: MarketingCombination</text>
|
||||
<view class="marketing-combination-list">
|
||||
<view class="filter-card border-shadow">
|
||||
<view class="filter-row">
|
||||
<view class="filter-item">
|
||||
<text class="label">时间选择：</text>
|
||||
<view class="date-picker-mock">
|
||||
<text class="calendar-ic">📅</text>
|
||||
<text class="date-placeholder">开始日期 - 结束日期</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-item">
|
||||
<text class="label">拼团状态：</text>
|
||||
<view class="select-mock">
|
||||
<text class="select-val">请选择</text>
|
||||
<text class="arrow">▼</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page-content">
|
||||
<view class="placeholder-card">
|
||||
<text class="placeholder-title">页面占位</text>
|
||||
<text class="placeholder-desc">该功能模块正在开发中</text>
|
||||
<text class="placeholder-info">当前采用 CRMEB 路由体系 1:1 映射</text>
|
||||
|
||||
<view class="stats-board">
|
||||
<view class="stat-card border-shadow">
|
||||
<view class="stat-icon-box bg-blue">
|
||||
<text class="stat-ic">👥</text>
|
||||
</view>
|
||||
<view class="stat-info">
|
||||
<text class="stat-value">349</text>
|
||||
<text class="stat-label">参与人数(人)</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="stat-card border-shadow">
|
||||
<view class="stat-icon-box bg-orange">
|
||||
<text class="stat-ic">📦</text>
|
||||
</view>
|
||||
<view class="stat-info">
|
||||
<text class="stat-value">44</text>
|
||||
<text class="stat-label">成团数量(个)</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="table-card border-shadow">
|
||||
<view class="table-container">
|
||||
<view class="table-head">
|
||||
<view class="th cell-avatar">头像</view>
|
||||
<view class="th cell-leader">开团团长</view>
|
||||
<view class="th cell-time">开团时间</view>
|
||||
<view class="th cell-product">拼团商品</view>
|
||||
<view class="th cell-group">几人团</view>
|
||||
<view class="th cell-num">几人参加</view>
|
||||
<view class="th cell-time">结束时间</view>
|
||||
<view class="th cell-status">状态</view>
|
||||
<view class="th cell-op">操作</view>
|
||||
</view>
|
||||
|
||||
<view class="table-body">
|
||||
<view v-for="item in combos" :key="item.id" class="table-row">
|
||||
<view class="td cell-avatar">
|
||||
<image class="thumb" :src="item.avatar" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="td cell-leader">
|
||||
<text class="td-txt">{{ item.nickname }} / {{ item.uid }}</text>
|
||||
</view>
|
||||
<view class="td cell-time">
|
||||
<text class="td-txt-small">{{ item.start_time }}</text>
|
||||
</view>
|
||||
<view class="td cell-product">
|
||||
<text class="product-title line-clamp-2">{{ item.title }} / {{ item.cid }}</text>
|
||||
</view>
|
||||
<view class="td cell-group">
|
||||
<text class="td-txt">{{ item.people }}</text>
|
||||
</view>
|
||||
<view class="td cell-num">
|
||||
<text class="td-txt-bold">{{ item.count_people }}</text>
|
||||
</view>
|
||||
<view class="td cell-time">
|
||||
<text class="td-txt-small">{{ item.stop_time }}</text>
|
||||
</view>
|
||||
<view class="td cell-status">
|
||||
<view :class="['status-tag', item.status]">
|
||||
<text class="tag-txt">{{ statusLabels[item.status] }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td cell-op">
|
||||
<view class="op-links">
|
||||
<text class="op-link" @click="viewDetails(item)">查看详情</text>
|
||||
<text class="op-split" v-if="item.status === 'ongoing'">|</text>
|
||||
<text class="op-link" v-if="item.status === 'ongoing'" @click="completeGroup(item)">立即成团</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="pagination-footer">
|
||||
<view class="page-total">
|
||||
<text class="total-txt">共 {{ combos.length }} 条</text>
|
||||
</view>
|
||||
<view class="page-select">
|
||||
<view class="select-mock mini">
|
||||
<text class="select-val">15条/页</text>
|
||||
<text class="arrow">▼</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="page-btns">
|
||||
<text class="p-btn">‹</text>
|
||||
<text class="p-btn active">1</text>
|
||||
<text class="p-btn">›</text>
|
||||
</view>
|
||||
<view class="page-jump">
|
||||
<text class="jump-txt">前往</text>
|
||||
<input class="jump-input" placeholder="1" />
|
||||
<text class="jump-txt">页</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
// TODO: 实现 拼团活动 的具体功能
|
||||
const loading = ref<boolean>(false)
|
||||
const statusLabels = {
|
||||
ongoing: '进行中',
|
||||
pending: '未完成',
|
||||
ended: '已成功',
|
||||
}
|
||||
|
||||
const combos = ref([
|
||||
{
|
||||
id: 101,
|
||||
avatar: 'https://img0.baidu.com/it/u=3033502919,1657850259&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
||||
nickname: '1岁上班22岁退休',
|
||||
uid: 82713,
|
||||
start_time: '2026-02-03 10:09',
|
||||
stop_time: '2026-02-04 10:09',
|
||||
title: 'FOMIX 蛋壳椅 进口头层牛皮自然色单人沙发椅 Egg chair设计师蛋椅',
|
||||
cid: 191,
|
||||
people: 2,
|
||||
count_people: 1,
|
||||
status: 'ongoing',
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
avatar: 'https://img1.baidu.com/it/u=2295552459,2083538461&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
||||
nickname: '132****8769',
|
||||
uid: 82683,
|
||||
start_time: '2026-02-01 13:29',
|
||||
stop_time: '2026-02-02 13:29',
|
||||
title: '阿迪达斯官网 adidas BBALL CAP COT 男女训练运动帽子FQ5270',
|
||||
cid: 192,
|
||||
people: 2,
|
||||
count_people: 1,
|
||||
status: 'ongoing',
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
avatar: 'https://img0.baidu.com/it/u=1550993072,4086699313&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
||||
nickname: 'Jk',
|
||||
uid: 82598,
|
||||
start_time: '2026-01-28 16:10',
|
||||
stop_time: '2026-01-29 16:10',
|
||||
title: 'FOMIX 蛋壳椅 进口头层牛皮自然色单人沙发椅 Egg chair设计师蛋椅',
|
||||
cid: 191,
|
||||
people: 2,
|
||||
count_people: 1,
|
||||
status: 'ongoing',
|
||||
},
|
||||
{
|
||||
id: 104,
|
||||
avatar: 'https://img1.baidu.com/it/u=3175865615,2002599723&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
||||
nickname: '177****1523',
|
||||
uid: 82565,
|
||||
start_time: '2026-01-27 07:19',
|
||||
stop_time: '2026-01-28 07:19',
|
||||
title: 'FOMIX 蛋壳椅 进口头层牛皮自然色单人沙发椅 Egg chair设计师蛋椅',
|
||||
cid: 191,
|
||||
people: 2,
|
||||
count_people: 1,
|
||||
status: 'ongoing',
|
||||
},
|
||||
{
|
||||
id: 105,
|
||||
avatar: 'https://img2.baidu.com/it/u=2719717192,3826027113&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
||||
nickname: '0-1',
|
||||
uid: 79417,
|
||||
start_time: '2026-01-25 23:53',
|
||||
stop_time: '2026-01-26 23:53',
|
||||
title: 'FOMIX 蛋壳椅 进口头层牛皮自然色单人沙发椅 Egg chair设计师蛋椅',
|
||||
cid: 191,
|
||||
people: 2,
|
||||
count_people: 1,
|
||||
status: 'ongoing',
|
||||
},
|
||||
{
|
||||
id: 106,
|
||||
avatar: 'https://img0.baidu.com/it/u=1893322197,2940863863&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
||||
nickname: 'abc',
|
||||
uid: 75343,
|
||||
start_time: '2026-01-22 21:29',
|
||||
stop_time: '2026-01-23 21:29',
|
||||
title: 'FOMIX 蛋壳椅 进口头层牛皮自然色单人沙发椅 Egg chair设计师蛋椅',
|
||||
cid: 191,
|
||||
people: 2,
|
||||
count_people: 1,
|
||||
status: 'ongoing',
|
||||
},
|
||||
{
|
||||
id: 107,
|
||||
avatar: 'https://img2.baidu.com/it/u=176219800,2487920112&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
||||
nickname: '181****6910',
|
||||
uid: 81141,
|
||||
start_time: '2026-01-19 16:16',
|
||||
stop_time: '2026-01-19 16:45',
|
||||
title: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤UWG440060',
|
||||
cid: 190,
|
||||
people: 2,
|
||||
count_people: 1,
|
||||
status: 'pending',
|
||||
},
|
||||
])
|
||||
|
||||
const viewDetails = (item: any) => {
|
||||
console.log('查看详情', item.id)
|
||||
}
|
||||
|
||||
const completeGroup = (item: any) => {
|
||||
console.log('立即成团', item.id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
.marketing-combination-list {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
background: #f0f2f5;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
.border-shadow {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 过滤栏 */
|
||||
.filter-card {
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.date-picker-mock, .select-mock {
|
||||
width: 280px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.select-mock { width: 220px; justify-content: space-between; }
|
||||
.select-mock.mini { width: 100px; height: 28px; }
|
||||
|
||||
.calendar-ic { font-size: 14px; color: #c0c4cc; margin-right: 8px; }
|
||||
.date-placeholder { font-size: 13px; color: #c0c4cc; }
|
||||
.select-val { font-size: 14px; color: #c0c4cc; }
|
||||
.arrow { font-size: 10px; color: #c0c4cc; }
|
||||
|
||||
/* 统计卡片 */
|
||||
.stats-board {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 40px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.stat-icon-box {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.bg-blue { background-color: #ecf5ff; }
|
||||
.bg-orange { background-color: #fff7eb; }
|
||||
.stat-ic { font-size: 32px; }
|
||||
|
||||
.stat-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.stat-value { font-size: 32px; font-weight: 600; color: #303133; }
|
||||
.stat-label { font-size: 13px; color: #909399; margin-top: 4px; }
|
||||
|
||||
/* 表格区域 */
|
||||
.table-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.placeholder-card {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
.table-head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #f8f8f9;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
.th {
|
||||
padding: 12px 8px;
|
||||
font-size: 13px;
|
||||
color: #515a6e;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.placeholder-desc {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.placeholder-info {
|
||||
display: block;
|
||||
.td {
|
||||
padding: 16px 8px;
|
||||
}
|
||||
|
||||
.td-txt { font-size: 14px; color: #515a6e; }
|
||||
.td-txt-small { font-size: 13px; color: #808695; }
|
||||
.td-txt-bold { font-size: 14px; color: #515a6e; font-weight: bold; }
|
||||
|
||||
/* 各列宽度 */
|
||||
.cell-avatar { width: 80px; }
|
||||
.cell-leader { width: 160px; }
|
||||
.cell-time { width: 160px; }
|
||||
.cell-product { flex: 1; min-width: 260px; }
|
||||
.cell-group { width: 80px; text-align: center; }
|
||||
.cell-num { width: 80px; text-align: center; }
|
||||
.cell-status { width: 100px; text-align: center; }
|
||||
.cell-op { width: 160px; text-align: right; }
|
||||
|
||||
.thumb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.product-title {
|
||||
font-size: 13px;
|
||||
color: #515a6e;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #1890ff;
|
||||
}
|
||||
.status-tag.ongoing { background-color: #f0f7ff; border: 1px solid #d1e9ff; }
|
||||
.status-tag.ongoing .tag-txt { color: #1890ff; }
|
||||
.status-tag.pending { background-color: #fff7e6; border: 1px solid #ffe7ba; }
|
||||
.status-tag.pending .tag-txt { color: #fa8c16; }
|
||||
|
||||
.op-links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.op-link { color: #1890ff; font-size: 13px; cursor: pointer; }
|
||||
.op-split { color: #e8eaec; margin: 0 8px; }
|
||||
|
||||
/* 分页 */
|
||||
.pagination-footer {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
.total-txt { font-size: 13px; color: #606266; }
|
||||
.page-btns { display: flex; flex-direction: row; gap: 8px; }
|
||||
.p-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
.p-btn.active { background-color: #1890ff; border-color: #1890ff; color: #fff; }
|
||||
|
||||
.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
|
||||
.jump-txt { font-size: 13px; color: #606266; }
|
||||
.jump-input { width: 40px; height: 28px; border: 1px solid #dcdfe6; border-radius: 4px; text-align: center; }
|
||||
|
||||
</style>
|
||||
|
||||
465
pages/mall/admin/marketing/combination/product.uvue
Normal file
465
pages/mall/admin/marketing/combination/product.uvue
Normal file
@@ -0,0 +1,465 @@
|
||||
<template>
|
||||
<view class="marketing-combination-product">
|
||||
<view class="page-header">
|
||||
<view class="header-left">
|
||||
<text class="page-title">拼团商品</text>
|
||||
<view class="breadcrumb">
|
||||
<text class="bread-item">营销</text>
|
||||
<text class="bread-sep">/</text>
|
||||
<text class="bread-item">拼团管理</text>
|
||||
<text class="bread-sep">/</text>
|
||||
<text class="bread-item active">拼团商品</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-card border-shadow">
|
||||
<view class="filter-row">
|
||||
<view class="filter-item">
|
||||
<text class="label">上架状态：</text>
|
||||
<view class="select-mock">
|
||||
<text class="select-val">{{ statusFilterLabel }}</text>
|
||||
<text class="arrow">▼</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-item">
|
||||
<text class="label">拼团搜索：</text>
|
||||
<input class="search-input" v-model="keyword" placeholder="请输入拼团名称/ID" />
|
||||
</view>
|
||||
<view class="btn-query" @click="applySearch">
|
||||
<text class="query-txt">查询</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="table-card border-shadow">
|
||||
<view class="card-header">
|
||||
<view class="btn-primary" @click="handleAdd">
|
||||
<text class="btn-txt">+ 添加拼团商品</text>
|
||||
</view>
|
||||
<view class="btn-outline" @click="handleExport">
|
||||
<text class="outline-txt">导出</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="table-container">
|
||||
<view class="table-head">
|
||||
<view class="th cell-id">ID</view>
|
||||
<view class="th cell-img">拼团图片</view>
|
||||
<view class="th cell-title">拼团名称</view>
|
||||
<view class="th cell-price">原价</view>
|
||||
<view class="th cell-price">拼团价</view>
|
||||
<view class="th cell-num">拼团人数</view>
|
||||
<view class="th cell-num">参与人数</view>
|
||||
<view class="th cell-num">成团数量</view>
|
||||
<view class="th cell-num">限量</view>
|
||||
<view class="th cell-num">限量剩余</view>
|
||||
<view class="th cell-status">活动状态</view>
|
||||
<view class="th cell-time">活动时间</view>
|
||||
<view class="th cell-show">上架状态</view>
|
||||
<view class="th cell-ops">操作</view>
|
||||
</view>
|
||||
|
||||
<view class="table-body">
|
||||
<view v-for="item in list" :key="item.id" class="table-row">
|
||||
<view class="td cell-id"><text class="td-txt">{{ item.id }}</text></view>
|
||||
<view class="td cell-img">
|
||||
<image class="product-thumb" :src="item.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="td cell-title">
|
||||
<text class="title-txt line-clamp-2">{{ item.title }}</text>
|
||||
</view>
|
||||
<view class="td cell-price"><text class="td-txt">{{ item.ot_price }}</text></view>
|
||||
<view class="td cell-price"><text class="td-txt-price">{{ item.price }}</text></view>
|
||||
<view class="td cell-num"><text class="td-txt">{{ item.people }}</text></view>
|
||||
<view class="td cell-num"><text class="td-txt">{{ item.joined }}</text></view>
|
||||
<view class="td cell-num"><text class="td-txt">{{ item.pink_count }}</text></view>
|
||||
<view class="td cell-num"><text class="td-txt">{{ item.quota_show }}</text></view>
|
||||
<view class="td cell-num"><text class="td-txt">{{ item.quota }}</text></view>
|
||||
<view class="td cell-status">
|
||||
<view :class="['status-tag', item.activity_status]">
|
||||
<text class="tag-txt">{{ item.activity_status_name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td cell-time">
|
||||
<view class="time-box">
|
||||
<text class="time-txt">开始:{{ item.start_time }}</text>
|
||||
<text class="time-txt">结束:{{ item.stop_time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td cell-show">
|
||||
<view :class="['switch-box', item.is_show ? 'active' : '']" @click="toggleShow(item)">
|
||||
<view class="switch-dot"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td cell-ops">
|
||||
<view class="op-links">
|
||||
<text class="op-link" @click="handleEdit(item)">编辑</text>
|
||||
<text class="op-split">|</text>
|
||||
<text class="op-link" @click="handleCopy(item)">复制</text>
|
||||
<text class="op-split">|</text>
|
||||
<text class="op-link text-danger" @click="handleDelete(item)">删除</text>
|
||||
<text class="op-split">|</text>
|
||||
<text class="op-link" @click="handleStats(item)">统计</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="pagination-footer">
|
||||
<view class="page-total">
|
||||
<text class="total-txt">共 {{ total }} 条</text>
|
||||
</view>
|
||||
<view class="page-select">
|
||||
<text class="page-val">15条/页 ▼</text>
|
||||
</view>
|
||||
<view class="page-btns">
|
||||
<text class="p-btn"><</text>
|
||||
<text class="p-btn active">1</text>
|
||||
<text class="p-btn">></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
interface CombinationProduct {
|
||||
id: number
|
||||
image: string
|
||||
title: string
|
||||
ot_price: string
|
||||
price: string
|
||||
people: number
|
||||
joined: number
|
||||
pink_count: number
|
||||
quota_show: number
|
||||
quota: number
|
||||
activity_status: string
|
||||
activity_status_name: string
|
||||
start_time: string
|
||||
stop_time: string
|
||||
is_show: boolean
|
||||
}
|
||||
|
||||
const keyword = ref('')
|
||||
const statusFilter = ref('all')
|
||||
const total = ref(3)
|
||||
|
||||
const list = ref<CombinationProduct[]>([
|
||||
{
|
||||
id: 191,
|
||||
image: 'https://img12.360buyimg.com/n1/jfs/t1/185449/19/11995/4379/60d96d27E6a877c8e/3c38d4e92a2a7a5a.jpg',
|
||||
title: 'FOMIX 蛋壳椅 进口头层牛皮自然色单人沙发椅 Egg chair设计师蛋椅',
|
||||
ot_price: '7999.00',
|
||||
price: '999.00',
|
||||
people: 48,
|
||||
joined: 52,
|
||||
pink_count: 4,
|
||||
quota_show: 198,
|
||||
quota: 134,
|
||||
activity_status: 'ongoing',
|
||||
activity_status_name: '进行中',
|
||||
start_time: '2025-07-01 00:00',
|
||||
stop_time: '2025-08-23 23:59',
|
||||
is_show: true
|
||||
},
|
||||
{
|
||||
id: 190,
|
||||
image: 'https://img14.360buyimg.com/n1/jfs/t1/172605/32/17036/114175/609a473eE6997455c/df82c6168e36712b.jpg',
|
||||
title: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤UWG440060',
|
||||
ot_price: '0.00',
|
||||
price: '99.00',
|
||||
people: 20,
|
||||
joined: 22,
|
||||
pink_count: 2,
|
||||
quota_show: 136,
|
||||
quota: 112,
|
||||
activity_status: 'ongoing',
|
||||
activity_status_name: '进行中',
|
||||
start_time: '2025-07-01 00:00',
|
||||
stop_time: '2027-09-30 23:59',
|
||||
is_show: true
|
||||
},
|
||||
{
|
||||
id: 192,
|
||||
image: 'https://img13.360buyimg.com/n1/jfs/t1/192173/5/11913/21447/60e57e95Ef82688f3/bc875f643e8c95a3.jpg',
|
||||
title: '阿迪达斯官网 adidas BBALL CAP COT 男女训练运动帽子FQ5270',
|
||||
ot_price: '200.00',
|
||||
price: '77.00',
|
||||
people: 18,
|
||||
joined: 20,
|
||||
pink_count: 2,
|
||||
quota_show: 77,
|
||||
quota: 54,
|
||||
activity_status: 'ongoing',
|
||||
activity_status_name: '进行中',
|
||||
start_time: '2025-07-01 00:00',
|
||||
stop_time: '2028-08-17 23:59',
|
||||
is_show: true
|
||||
}
|
||||
])
|
||||
|
||||
const statusFilterLabel = computed(() => '全部')
|
||||
|
||||
const applySearch = () => { console.log('Searching...') }
|
||||
const handleAdd = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/admin/marketing/combination/create'
|
||||
})
|
||||
}
|
||||
const handleExport = () => { console.log('Exporting...') }
|
||||
const handleEdit = (item: CombinationProduct) => { console.log('Editing...', item.id) }
|
||||
const handleCopy = (item: CombinationProduct) => { console.log('Copying...', item.id) }
|
||||
const handleDelete = (item: CombinationProduct) => { console.log('Deleting...', item.id) }
|
||||
const handleStats = (item: CombinationProduct) => { console.log('Stats...', item.id) }
|
||||
const toggleShow = (item: CombinationProduct) => {
|
||||
item.is_show = !item.is_show
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.marketing-combination-product {
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.border-shadow {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.bread-item { font-size: 13px; color: #606266; }
|
||||
.bread-sep { font-size: 13px; color: #c0c4cc; margin: 0 8px; }
|
||||
.bread-item.active { color: #909399; }
|
||||
|
||||
.filter-card {
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.label { font-size: 14px; color: #606266; white-space: nowrap; }
|
||||
|
||||
.select-mock {
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.select-val { font-size: 14px; color: #606266; }
|
||||
.arrow-down { font-size: 10px; color: #c0c4cc; }
|
||||
|
||||
.search-input {
|
||||
width: 260px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn-query {
|
||||
background-color: #2d8cf0;
|
||||
padding: 0 20px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.query-txt { color: #fff; font-size: 14px; }
|
||||
|
||||
/* 表格区域 */
|
||||
.table-card {
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #2d8cf0;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn-txt { color: #fff; font-size: 14px; }
|
||||
|
||||
.btn-outline {
|
||||
border: 1px solid #dcdfe6;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.outline-txt { color: #606266; font-size: 14px; }
|
||||
|
||||
.table-container {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
.table-head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #f8f8f9;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
}
|
||||
|
||||
.th {
|
||||
padding: 12px 8px;
|
||||
font-size: 14px;
|
||||
color: #515a6e;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.td {
|
||||
padding: 12px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.td-txt { font-size: 14px; color: #515a6e; }
|
||||
.td-txt-price { font-size: 14px; color: #515a6e; }
|
||||
|
||||
/* 列宽分配 */
|
||||
.cell-id { width: 60px; }
|
||||
.cell-img { width: 90px; }
|
||||
.cell-title { flex: 1; min-width: 200px; }
|
||||
.cell-price { width: 100px; }
|
||||
.cell-num { width: 80px; }
|
||||
.cell-status { width: 100px; }
|
||||
.cell-time { width: 220px; }
|
||||
.cell-show { width: 120px; }
|
||||
.cell-ops { width: 220px; justify-content: flex-end; }
|
||||
|
||||
.product-thumb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.title-txt { font-size: 13px; color: #333; line-height: 1.5; }
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
.status-tag.ongoing { background-color: #ecf5ff; }
|
||||
.tag-txt { font-size: 12px; color: #409eff; }
|
||||
|
||||
.time-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.time-txt { font-size: 12px; color: #909399; }
|
||||
|
||||
/* Switch */
|
||||
.switch-box {
|
||||
width: 44px;
|
||||
height: 22px;
|
||||
background-color: #dcdfe6;
|
||||
border-radius: 11px;
|
||||
position: relative;
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.switch-box.active { background-color: #2d8cf0; }
|
||||
.switch-dot {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #fff;
|
||||
border-radius: 9px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.switch-box.active .switch-dot { transform: translateX(22px); }
|
||||
|
||||
.op-links { display: flex; flex-direction: row; align-items: center; }
|
||||
.op-link { color: #2d8cf0; font-size: 13px; cursor: pointer; margin: 0 5px; }
|
||||
.op-split { color: #e8eaec; margin: 0 5px; }
|
||||
.text-danger { color: #ed4014; }
|
||||
|
||||
/* 分页 */
|
||||
.pagination-footer {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
.total-txt { font-size: 13px; color: #606266; }
|
||||
.page-val { font-size: 13px; color: #606266; border: 1px solid #dcdfe6; padding: 4px 10px; border-radius: 4px; }
|
||||
.page-btns { display: flex; flex-direction: row; gap: 8px; }
|
||||
.p-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid #e8eaec;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
|
||||
</style>
|
||||
272
pages/mall/admin/marketing/integral/config.uvue
Normal file
272
pages/mall/admin/marketing/integral/config.uvue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<view class="admin-marketing-integral-config">
|
||||
<view class="config-card box-shadow">
|
||||
<view class="tabs-container">
|
||||
<view class="tab-item" :class="{ active: activeTab == 0 }" @click="activeTab = 0">基础配置</view>
|
||||
<view class="tab-item" :class="{ active: activeTab == 1 }" @click="activeTab = 1">抵扣配置</view>
|
||||
<view class="tab-item" :class="{ active: activeTab == 2 }" @click="activeTab = 2">过期配置</view>
|
||||
</view>
|
||||
|
||||
<view class="config-body">
|
||||
<!-- 基础配置 -->
|
||||
<view v-if="activeTab == 0" class="config-section">
|
||||
<view class="form-item">
|
||||
<view class="item-label">积分名称：</view>
|
||||
<view class="item-content">
|
||||
<input class="admin-input" v-model="form.integral_name" placeholder="积分" />
|
||||
<text class="desc">用户看到的积分名称，如：金豆、积分</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="item-label">积分赠送单位：</view>
|
||||
<view class="item-content">
|
||||
<input class="admin-input-long" type="number" v-model="form.integral_unit" />
|
||||
<text class="desc">下单消费1元赠送多少积分</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="item-label">积分冻结时间：</view>
|
||||
<view class="item-content">
|
||||
<view class="input-with-unit">
|
||||
<input class="admin-input-unit" type="number" v-model="form.freeze_time" />
|
||||
<text class="unit">天</text>
|
||||
</view>
|
||||
<text class="desc">订单确认收货后，赠送积分需要冻结多少天转为可用积分</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 抵扣配置 -->
|
||||
<view v-if="activeTab == 1" class="config-section">
|
||||
<view class="form-item">
|
||||
<view class="item-label">积分抵扣比例：</view>
|
||||
<view class="item-content">
|
||||
<view class="input-with-unit">
|
||||
<input class="admin-input-unit" v-model="form.integral_ratio" />
|
||||
<text class="unit">元</text>
|
||||
</view>
|
||||
<text class="desc">1积分可抵扣多少元</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="item-label">积分抵扣上限：</view>
|
||||
<view class="item-content">
|
||||
<view class="input-with-unit">
|
||||
<input class="admin-input-unit" type="number" v-model="form.integral_max" />
|
||||
<text class="unit">%</text>
|
||||
</view>
|
||||
<text class="desc">单笔订单最高可抵扣金额比例（0-100）</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 过期配置 -->
|
||||
<view v-if="activeTab == 2" class="config-section">
|
||||
<view class="form-item">
|
||||
<view class="item-label">积分有效期：</view>
|
||||
<view class="item-content">
|
||||
<radio-group class="radio-group" @change="validTypeChange">
|
||||
<label class="radio-label">
|
||||
<radio value="0" :checked="form.valid_type == 0" /> 永久有效
|
||||
</label>
|
||||
<label class="radio-label">
|
||||
<radio value="1" :checked="form.valid_type == 1" /> 固定时长
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item" v-if="form.valid_type == 1">
|
||||
<view class="item-label">固定时长：</view>
|
||||
<view class="item-content">
|
||||
<view class="input-with-unit">
|
||||
<input class="admin-input-unit" type="number" v-model="form.valid_year" />
|
||||
<text class="unit">年</text>
|
||||
</view>
|
||||
<text class="desc">从积分获得日期起，多少年后过期</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="form-ops">
|
||||
<button class="submit-btn" @click="handleSubmit">保存设置</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script uts>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeTab: 0,
|
||||
form: {
|
||||
integral_name: '积分',
|
||||
integral_unit: 10,
|
||||
integral_ratio: 0.1,
|
||||
integral_max: 50,
|
||||
freeze_time: 7,
|
||||
valid_type: 0,
|
||||
valid_year: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validTypeChange(e: any) {
|
||||
this.form.valid_type = parseInt(e.detail.value as string)
|
||||
},
|
||||
handleSubmit() {
|
||||
uni.showLoading({ title: '保存中...' })
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-marketing-integral-config {
|
||||
padding: 16px;
|
||||
background-color: #f5f7f9;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.box-shadow {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.config-card {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 顶部标签 */
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.tab-item {
|
||||
padding: 15px 25px;
|
||||
font-size: 14px;
|
||||
color: #515a6e;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.tab-item.active {
|
||||
color: #2d8cf0;
|
||||
}
|
||||
.tab-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: #2d8cf0;
|
||||
}
|
||||
|
||||
.config-body {
|
||||
padding: 40px 60px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 25px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
width: 140px;
|
||||
font-size: 14px;
|
||||
color: #515a6e;
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.admin-input, .admin-input-long {
|
||||
width: 320px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdee2;
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.input-with-unit {
|
||||
width: 320px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border: 1px solid #dcdee2;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.admin-input-unit {
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
}
|
||||
.unit {
|
||||
padding: 0 12px;
|
||||
background-color: #f8f8f9;
|
||||
border-left: 1px solid #dcdee2;
|
||||
font-size: 12px;
|
||||
color: #808695;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #c5c8ce;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
}
|
||||
.radio-label {
|
||||
margin-right: 20px;
|
||||
font-size: 14px;
|
||||
color: #515a6e;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-ops {
|
||||
margin-top: 50px;
|
||||
padding-left: 140px;
|
||||
}
|
||||
.submit-btn {
|
||||
width: 120px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
background-color: #2d8cf0;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,81 +1,398 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<view class="page-header">
|
||||
<text class="page-title">积分管理</text>
|
||||
<text class="page-subtitle">Component: MarketingIntegral</text>
|
||||
</view>
|
||||
|
||||
<view class="page-content">
|
||||
<view class="placeholder-card">
|
||||
<text class="placeholder-title">页面占位</text>
|
||||
<text class="placeholder-desc">该功能模块正在开发中</text>
|
||||
<text class="placeholder-info">当前采用 CRMEB 路由体系 1:1 映射</text>
|
||||
<view class="admin-marketing-integral-product">
|
||||
<view class="content-body">
|
||||
<!-- 搜索过滤栏 -->
|
||||
<view class="filter-card border-shadow">
|
||||
<view class="filter-row">
|
||||
<view class="filter-item">
|
||||
<text class="label-txt">创建时间:</text>
|
||||
<view class="date-picker-mock">
|
||||
<text class="calendar-ic">📅</text>
|
||||
<text class="date-placeholder">开始日期 - 结束日期</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-item">
|
||||
<text class="label-txt">上架状态:</text>
|
||||
<view class="select-mock">
|
||||
<text class="select-val">请选择</text>
|
||||
<text class="arrow-down">▼</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-item">
|
||||
<text class="label-txt">商品搜索:</text>
|
||||
<input class="search-input" placeholder="请输入商品名称, ID" v-model="searchQuery" />
|
||||
</view>
|
||||
<view class="btn-query" @click="handleSearch">
|
||||
<text class="query-txt">查询</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<view class="table-card border-shadow">
|
||||
<view class="card-header">
|
||||
<view class="btn-primary-blue" @click="handleAdd">
|
||||
<text class="btn-txt">+ 添加积分商品</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 表格 -->
|
||||
<view class="table-container">
|
||||
<view class="table-header-row">
|
||||
<view class="th th-id">ID</view>
|
||||
<view class="th th-img">商品图片</view>
|
||||
<view class="th th-title">活动标题</view>
|
||||
<view class="th th-integral">兑换积分</view>
|
||||
<view class="th th-limit">限量</view>
|
||||
<view class="th th-remain">限量剩余</view>
|
||||
<view class="th th-time">创建时间</view>
|
||||
<view class="th th-sort">排序</view>
|
||||
<view class="th th-status">状态</view>
|
||||
<view class="th th-ops">操作</view>
|
||||
</view>
|
||||
|
||||
<view class="table-body">
|
||||
<view v-for="(item, index) in productList" :key="item.id" class="table-row">
|
||||
<view class="td td-id"><text class="td-txt">{{ item.id }}</text></view>
|
||||
<view class="td td-img">
|
||||
<image class="product-thumb" :src="item.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="td td-title">
|
||||
<text class="title-txt line-clamp-2">{{ item.title }}</text>
|
||||
</view>
|
||||
<view class="td td-integral"><text class="td-txt">{{ item.integral }}</text></view>
|
||||
<view class="td td-limit"><text class="td-txt">{{ item.limit }}</text></view>
|
||||
<view class="td td-remain"><text class="td-txt">{{ item.remain }}</text></view>
|
||||
<view class="td td-time"><text class="td-txt-small">{{ item.createTime }}</text></view>
|
||||
<view class="td td-sort"><text class="td-txt">{{ item.sort }}</text></view>
|
||||
<view class="td td-status">
|
||||
<view :class="['switch-box', item.status ? 'active' : '']" @click="toggleStatus(index)">
|
||||
<view class="switch-dot"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td td-ops">
|
||||
<view class="op-links">
|
||||
<text class="op-link">兑换记录</text>
|
||||
<text class="op-split">|</text>
|
||||
<text class="op-link" @click="handleEdit(item)">编辑</text>
|
||||
<text class="op-split">|</text>
|
||||
<text class="op-link">复制</text>
|
||||
<text class="op-split">|</text>
|
||||
<text class="op-link text-danger">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分页 -->
|
||||
<view class="pagination-footer">
|
||||
<view class="page-total">
|
||||
<text class="total-txt">共 {{ total }} 条</text>
|
||||
</view>
|
||||
<view class="page-select">
|
||||
<text class="page-val">15条/页 ▼</text>
|
||||
</view>
|
||||
<view class="page-btns">
|
||||
<text class="p-btn"><</text>
|
||||
<text class="p-btn active">1</text>
|
||||
<text class="p-btn">></text>
|
||||
</view>
|
||||
<view class="page-jump">
|
||||
<text class="jump-txt">前往</text>
|
||||
<input class="jump-input" placeholder="1" />
|
||||
<text class="jump-txt">页</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
// TODO: 实现 积分管理 的具体功能
|
||||
const loading = ref<boolean>(false)
|
||||
interface ProductItem {
|
||||
id: number
|
||||
image: string
|
||||
title: string
|
||||
integral: number
|
||||
limit: number
|
||||
remain: number
|
||||
createTime: string
|
||||
sort: number
|
||||
status: boolean
|
||||
}
|
||||
|
||||
const searchQuery = ref('')
|
||||
const total = ref(3)
|
||||
|
||||
const productList = ref<ProductItem[]>([
|
||||
{
|
||||
id: 48,
|
||||
image: 'https://img14.360buyimg.com/n1/jfs/t1/172605/32/17036/114175/609a473eE6997455c/df82c6168e36712b.jpg',
|
||||
title: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤UWG440060',
|
||||
integral: 0,
|
||||
limit: 4,
|
||||
remain: 0,
|
||||
createTime: '2025-10-24 14:29:19',
|
||||
sort: 9999,
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: 43,
|
||||
image: 'https://img12.360buyimg.com/n1/jfs/t1/185449/19/11995/4379/60d96d27E6a877c8e/3c38d4e92a2a7a5a.jpg',
|
||||
title: '阿迪达斯官网 adidas BBALL CAP COT 男女训练运动帽子FQ5270 传奇水蓝/传...',
|
||||
integral: 100,
|
||||
limit: 1,
|
||||
remain: 0,
|
||||
createTime: '2025-05-13 15:37:46',
|
||||
sort: 9998,
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: 44,
|
||||
image: 'https://img13.360buyimg.com/n1/jfs/t1/192173/5/11913/21447/60e57e95Ef82688f3/bc875f643e8c95a3.jpg',
|
||||
title: '劳伦斯意式极简大平层设计师款直排真皮沙发简约客厅别墅大小户型',
|
||||
integral: 6860,
|
||||
limit: 1,
|
||||
remain: 0,
|
||||
createTime: '2025-05-13 15:38:02',
|
||||
sort: 9996,
|
||||
status: true
|
||||
}
|
||||
])
|
||||
|
||||
const handleSearch = () => { console.log('Searching...') }
|
||||
const handleAdd = () => { console.log('Adding...') }
|
||||
const handleEdit = (item: ProductItem) => { console.log('Editing...', item.id) }
|
||||
const toggleStatus = (index: number) => {
|
||||
productList.value[index].status = !productList.value[index].status
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
.admin-marketing-integral-product {
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.placeholder-card {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
.border-shadow {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
.content-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.placeholder-desc {
|
||||
display: block;
|
||||
/* 过滤栏 */
|
||||
.filter-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.label-txt { font-size: 14px; color: #606266; white-space: nowrap; }
|
||||
|
||||
.date-picker-mock {
|
||||
width: 280px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
.calendar-ic { font-size: 14px; color: #c0c4cc; }
|
||||
.date-placeholder { font-size: 13px; color: #c0c4cc; }
|
||||
|
||||
.select-mock {
|
||||
width: 180px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.select-val { font-size: 14px; color: #c0c4cc; }
|
||||
.arrow-down { font-size: 10px; color: #c0c4cc; }
|
||||
|
||||
.search-input {
|
||||
width: 220px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn-query {
|
||||
background-color: #2d8cf0;
|
||||
padding: 0 20px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.query-txt { color: #fff; font-size: 14px; }
|
||||
|
||||
/* 表格卡片 */
|
||||
.table-card {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.card-header { padding: 20px; }
|
||||
|
||||
.btn-primary-blue {
|
||||
background-color: #2d8cf0;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
}
|
||||
.btn-txt { color: #fff; font-size: 14px; }
|
||||
|
||||
.table-container { padding: 0 20px 20px; }
|
||||
|
||||
.table-header-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #f8f8f9;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
}
|
||||
|
||||
.th {
|
||||
padding: 12px 10px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
color: #515a6e;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.placeholder-info {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #1890ff;
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.td {
|
||||
padding: 12px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.td-txt { font-size: 14px; color: #515a6e; }
|
||||
.td-txt-small { font-size: 13px; color: #515a6e; }
|
||||
|
||||
/* 列表各列宽度控制 */
|
||||
.th-id, .td-id { width: 60px; }
|
||||
.th-img, .td-img { width: 80px; }
|
||||
.th-title, .td-title { flex: 1; min-width: 200px; }
|
||||
.th-integral, .td-integral { width: 100px; }
|
||||
.th-limit, .td-limit { width: 80px; }
|
||||
.th-remain, .td-remain { width: 100px; }
|
||||
.th-time, .td-time { width: 160px; }
|
||||
.th-sort, .td-sort { width: 80px; }
|
||||
.th-status, .td-status { width: 80px; }
|
||||
.th-ops, .td-ops { width: 220px; justify-content: flex-end; }
|
||||
|
||||
.product-thumb {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.title-txt { font-size: 13px; color: #333; line-height: 1.5; }
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Switch 开关 */
|
||||
.switch-box {
|
||||
width: 44px;
|
||||
height: 22px;
|
||||
background-color: #dcdfe6;
|
||||
border-radius: 11px;
|
||||
position: relative;
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.switch-box.active { background-color: #2d8cf0; }
|
||||
.switch-dot {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #fff;
|
||||
border-radius: 9px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.switch-box.active .switch-dot { transform: translateX(22px); }
|
||||
|
||||
.op-links { display: flex; flex-direction: row; align-items: center; }
|
||||
.op-link { color: #2d8cf0; font-size: 13px; cursor: pointer; margin: 0 5px; }
|
||||
.op-split { color: #e8eaec; margin: 0 5px; }
|
||||
.text-danger { color: #ed4014; }
|
||||
|
||||
/* 分页 */
|
||||
.pagination-footer {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
.total-txt { font-size: 13px; color: #606266; }
|
||||
.page-val { font-size: 13px; color: #606266; border: 1px solid #dcdfe6; padding: 4px 10px; border-radius: 4px; }
|
||||
.page-btns { display: flex; flex-direction: row; gap: 8px; }
|
||||
.p-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid #e8eaec;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
|
||||
|
||||
.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
|
||||
.jump-txt { font-size: 13px; color: #606266; }
|
||||
.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 13px; }
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
408
pages/mall/admin/marketing/integral/order.uvue
Normal file
408
pages/mall/admin/marketing/integral/order.uvue
Normal file
@@ -0,0 +1,408 @@
|
||||
<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>
|
||||
|
||||
<!-- 分页 -->
|
||||
<view class="table-pagination">
|
||||
<text class="total-text">共 {{ total }} 条</text>
|
||||
<view class="page-ops">
|
||||
<button class="page-btn" disabled>上一页</button>
|
||||
<text class="current-page">1</text>
|
||||
<button class="page-btn">下一页</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script uts>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentStatus: -1,
|
||||
searchQuery: '',
|
||||
total: 8,
|
||||
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[]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-marketing-integral-order {
|
||||
padding: 16px;
|
||||
background-color: #f5f7f9;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 分页 */
|
||||
.table-pagination {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.total-text { font-size: 14px; color: #515a6e; margin-right: 15px; }
|
||||
</style>
|
||||
|
||||
277
pages/mall/admin/marketing/integral/record.uvue
Normal file
277
pages/mall/admin/marketing/integral/record.uvue
Normal file
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<view class="admin-marketing-integral-record">
|
||||
<!-- 筛选 -->
|
||||
<view class="box-shadow filter-card">
|
||||
<view class="filter-row">
|
||||
<view class="filter-item">
|
||||
<text class="label">时间选择：</text>
|
||||
<view class="date-range-mock">
|
||||
<text class="date-text">全部</text>
|
||||
<uni-icons type="calendar" size="16" color="#c0c4cc"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-item">
|
||||
<text class="label">交易类型：</text>
|
||||
<picker mode="selector" :range="typeOptions" range-key="label" @change="typeChange">
|
||||
<view class="admin-input-picker">
|
||||
<text>{{ typeLabel }}</text>
|
||||
<uni-icons type="arrowdown" size="14" color="#c0c4cc"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="filter-item">
|
||||
<text class="label">搜索：</text>
|
||||
<input class="admin-input" v-model="searchQuery" placeholder="请输入昵称" />
|
||||
<button class="search-btn btn-primary" @click="handleSearch">搜索</button>
|
||||
<button class="reset-btn btn-default" @click="handleReset">重置</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 表格 -->
|
||||
<view class="box-shadow table-card">
|
||||
<view class="table-header">
|
||||
<view class="col-80"><text>ID</text></view>
|
||||
<view class="col-150"><text>关联订单</text></view>
|
||||
<view class="col-150"><text>交易时间</text></view>
|
||||
<view class="col-100"><text>交易积分</text></view>
|
||||
<view class="col-120"><text>用户</text></view>
|
||||
<view class="col-120"><text>交易类型</text></view>
|
||||
<view class="col-150"><text>备注</text></view>
|
||||
<view class="col-100"><text>备注</text></view>
|
||||
</view>
|
||||
<view class="table-content">
|
||||
<view v-for="(item, index) in tableData" :key="index" class="table-row">
|
||||
<view class="col-80"><text class="cell-text">{{ item.id }}</text></view>
|
||||
<view class="col-150"><text class="cell-link">{{ item.relation || '-' }}</text></view>
|
||||
<view class="col-150"><text class="cell-text">{{ item.add_time }}</text></view>
|
||||
<view class="col-100">
|
||||
<text :class="item.pm == 1 ? 'z-price' : 'f-price'">{{ item.pm == 1 ? '+' : '-' }} {{ item.number }}</text>
|
||||
</view>
|
||||
<view class="col-120"><text class="cell-text">{{ item.nickname }}</text></view>
|
||||
<view class="col-120"><text class="cell-text">{{ item.type_name }}</text></view>
|
||||
<view class="col-150"><text class="cell-text mark-text">{{ item.mark }}</text></view>
|
||||
<view class="col-100">
|
||||
<text class="op-link" @click="handleMark(item)">修改备注</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分页 -->
|
||||
<view class="table-pagination">
|
||||
<text class="total-text">共 {{ total }} 条</text>
|
||||
<uni-pagination :total="total" :pageSize="10" :current="1"></uni-pagination>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script uts>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchQuery: '',
|
||||
currentType: '',
|
||||
typeOptions: [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '积分订单', value: 'integral_order' },
|
||||
{ label: '签到奖励', value: 'sign' },
|
||||
{ label: '后台充值', value: 'system' }
|
||||
] as any[],
|
||||
total: 5,
|
||||
tableData: [
|
||||
{
|
||||
id: 1256,
|
||||
relation: '',
|
||||
add_time: '2025-11-12 09:30',
|
||||
number: 10,
|
||||
pm: 1,
|
||||
nickname: '故事的小黄花',
|
||||
type_name: '签到奖励',
|
||||
mark: '连续签到3天奖励'
|
||||
},
|
||||
{
|
||||
id: 1255,
|
||||
relation: 'wx719261472118538240',
|
||||
add_time: '2025-11-10 18:48',
|
||||
number: 200,
|
||||
pm: 0,
|
||||
nickname: '故事的小黄花',
|
||||
type_name: '积分兑换',
|
||||
mark: '兑换商品扣除'
|
||||
},
|
||||
{
|
||||
id: 1254,
|
||||
relation: '',
|
||||
add_time: '2025-11-05 14:20',
|
||||
number: 1000,
|
||||
pm: 1,
|
||||
nickname: '蓝桥春雪',
|
||||
type_name: '后台充值',
|
||||
mark: '管理员手动充值'
|
||||
}
|
||||
] as any[]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
typeLabel(): string {
|
||||
const found = this.typeOptions.find((o: any): boolean => o.value == this.currentType)
|
||||
return found != null ? (found['label'] as string) : '全部'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
typeChange(e: any) {
|
||||
this.currentType = this.typeOptions[e.detail.value].value as string
|
||||
},
|
||||
handleSearch() {
|
||||
uni.showToast({ title: '搜索: ' + this.searchQuery, icon: 'none' })
|
||||
},
|
||||
handleReset() {
|
||||
this.searchQuery = ''
|
||||
this.currentType = ''
|
||||
},
|
||||
handleMark(item: any) {
|
||||
uni.showToast({ title: '修改备注: ' + item.id, icon: 'none' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-marketing-integral-record {
|
||||
padding: 16px;
|
||||
background-color: #f5f7f9;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.box-shadow {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.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: 200px;
|
||||
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-picker {
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.admin-input-picker text { font-size: 14px; color: #606266; }
|
||||
|
||||
.admin-input {
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-btn, .reset-btn {
|
||||
margin-left: 10px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn-primary { background-color: #2d8cf0; color: #fff; border: none; }
|
||||
.btn-default { background-color: #fff; color: #606266; border: 1px solid #dcdfe6; }
|
||||
|
||||
/* 表格 */
|
||||
.table-card {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.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-80 { width: 80px; }
|
||||
.col-100 { width: 100px; }
|
||||
.col-120 { width: 120px; }
|
||||
.col-150 { width: 150px; }
|
||||
.col-180 { width: 180px; }
|
||||
|
||||
.cell-text { font-size: 13px; color: #515a6e; }
|
||||
.cell-link { font-size: 13px; color: #2d8cf0; }
|
||||
.mark-text { color: #808695; }
|
||||
|
||||
.z-price { font-size: 14px; color: #19be6b; font-weight: bold; }
|
||||
.f-price { font-size: 14px; color: #ed4014; font-weight: bold; }
|
||||
|
||||
.op-link {
|
||||
font-size: 13px;
|
||||
color: #2d8cf0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 分页 */
|
||||
.table-pagination {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.total-text { font-size: 14px; color: #515a6e; margin-right: 15px; }
|
||||
</style>
|
||||
|
||||
|
||||
@@ -48,41 +48,11 @@
|
||||
<view class="chart-header">
|
||||
<text class="chart-title">积分使用趋势</text>
|
||||
<view class="chart-legend">
|
||||
<view class="legend-item">
|
||||
<view class="l-dot bg-blue-line"></view>
|
||||
<text class="l-txt">积分积累</text>
|
||||
</view>
|
||||
<view class="legend-item">
|
||||
<view class="l-dot bg-green-line"></view>
|
||||
<text class="l-txt">积分消耗</text>
|
||||
</view>
|
||||
<text class="down-ic">📥</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- Mock 线图 -->
|
||||
<view class="line-chart-box">
|
||||
<view class="y-labels">
|
||||
<text class="y-txt">3,500,000</text>
|
||||
<text class="y-txt">3,000,000</text>
|
||||
<text class="y-txt">2,500,000</text>
|
||||
<text class="y-txt">2,000,000</text>
|
||||
<text class="y-txt">1,500,000</text>
|
||||
<text class="y-txt">1,000,000</text>
|
||||
<text class="y-txt">500,000</text>
|
||||
<text class="y-txt">0</text>
|
||||
</view>
|
||||
<view class="chart-area">
|
||||
<view class="chart-grid">
|
||||
<view v-for="i in 7" :key="i" class="grid-line"></view>
|
||||
</view>
|
||||
<!-- 线条绘制 (简单 Mock) -->
|
||||
<view class="line-svg-mock">
|
||||
<view class="trend-path"></view>
|
||||
</view>
|
||||
<view class="x-labels">
|
||||
<text class="x-txt" v-for="date in dates" :key="date">{{ date }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chart-body">
|
||||
<AnalyticsMultiLineChart :xLabels="dates" :series="trendSeries" :height="350" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -99,19 +69,8 @@
|
||||
|
||||
<view class="analysis-content">
|
||||
<!-- 饼图样式 -->
|
||||
<view v-if="sourceStyle === 'pie'" class="pie-layout anim-fade">
|
||||
<view class="pie-chart-wrap">
|
||||
<view class="pie-circle"></view>
|
||||
<view class="pie-label-line">
|
||||
<text class="pl-txt">后台赠送</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pie-legend-list">
|
||||
<view v-for="item in sourceData" :key="item.label" class="p-leg-item">
|
||||
<view class="p-dot" :style="{backgroundColor: item.color}"></view>
|
||||
<text class="p-txt">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="sourceStyle === 'pie'" class="pie-layout-new anim-fade">
|
||||
<AnalyticsPieChart :items="sourceData" :height="300" />
|
||||
</view>
|
||||
|
||||
<!-- 列表样式 -->
|
||||
@@ -149,19 +108,8 @@
|
||||
|
||||
<view class="analysis-content">
|
||||
<!-- 饼图样式 -->
|
||||
<view v-if="consumeStyle === 'pie'" class="pie-layout anim-fade">
|
||||
<view class="pie-chart-wrap consume-pie">
|
||||
<view class="pie-circle-c"></view>
|
||||
<view class="pie-label-line-c">
|
||||
<text class="pl-txt">订单抵扣</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pie-legend-list">
|
||||
<view v-for="item in consumeData" :key="item.label" class="p-leg-item">
|
||||
<view class="p-dot" :style="{backgroundColor: item.color}"></view>
|
||||
<text class="p-txt">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="consumeStyle === 'pie'" class="pie-layout-new anim-fade">
|
||||
<AnalyticsPieChart :items="consumeData" :height="300" />
|
||||
</view>
|
||||
|
||||
<!-- 列表样式 -->
|
||||
@@ -194,9 +142,24 @@
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import AnalyticsPieChart from '@/components/analytics/AnalyticsPieChart.uvue'
|
||||
import AnalyticsMultiLineChart from '@/components/analytics/AnalyticsMultiLineChart.uvue'
|
||||
|
||||
const dates = ['01-05', '01-06', '01-07', '01-08', '01-09', '01-10', '01-11', '01-12', '01-13', '01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20', '01-21', '01-22', '01-23', '01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30', '01-31', '02-01', '02-02', '02-03']
|
||||
|
||||
const trendSeries = [
|
||||
{
|
||||
name: '积分积累',
|
||||
data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191],
|
||||
color: '#409eff'
|
||||
},
|
||||
{
|
||||
name: '积分消耗',
|
||||
data: [220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132],
|
||||
color: '#19be6b'
|
||||
}
|
||||
]
|
||||
|
||||
const sourceStyle = ref('pie')
|
||||
const consumeStyle = ref('pie')
|
||||
|
||||
@@ -309,67 +272,12 @@ const toggleConsumeStyle = () => {
|
||||
}
|
||||
.chart-title { font-size: 16px; font-weight: bold; color: #333; }
|
||||
.chart-legend { display: flex; flex-direction: row; align-items: center; gap: 20px; }
|
||||
.legend-item { display: flex; flex-direction: row; align-items: center; gap: 8px; }
|
||||
.l-dot { width: 12px; height: 12px; border-radius: 6px; }
|
||||
.bg-blue-line { background-color: #409eff; }
|
||||
.bg-green-line { background-color: #19be6b; }
|
||||
.l-txt { font-size: 12px; color: #666; }
|
||||
.down-ic { font-size: 18px; color: #999; cursor: pointer; }
|
||||
|
||||
.line-chart-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 400px;
|
||||
}
|
||||
.y-labels {
|
||||
width: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.y-txt { font-size: 12px; color: #999; text-align: right; padding-right: 10px; }
|
||||
|
||||
.chart-area {
|
||||
flex: 1;
|
||||
border-left: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
position: relative;
|
||||
}
|
||||
.chart-grid {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.grid-line { height: 1px; background-color: #f5f5f5; width: 100%; }
|
||||
|
||||
.line-svg-mock {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 趋势线条 Mock：用一个带有波浪背景的视图模拟，实际项目中应使用 Chart 库 */
|
||||
.trend-path {
|
||||
position: absolute;
|
||||
.chart-body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle at 20% 40%, transparent 10%, #409eff 10.5%, #409eff 11%, transparent 11.5%);
|
||||
background-size: 40px 100%;
|
||||
opacity: 0.1; /* 仅作为占位示意 */
|
||||
}
|
||||
|
||||
.x-labels {
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
left: 0; right: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.x-txt { font-size: 10px; color: #999; transform: rotate(-45deg); white-space: nowrap; }
|
||||
|
||||
/* 底部两个分析 */
|
||||
.bottom-analysis {
|
||||
display: flex;
|
||||
@@ -401,52 +309,12 @@ const toggleConsumeStyle = () => {
|
||||
}
|
||||
|
||||
/* 饼图样式布局 */
|
||||
.pie-layout {
|
||||
.pie-layout-new {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.pie-chart-wrap {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.pie-circle {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 90px;
|
||||
background-color: #778899; /* 主体颜色 */
|
||||
box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
.pie-circle-c {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 90px;
|
||||
background: conic-gradient(#5AB1EF 0 95%, #2EC7C9 95% 100%);
|
||||
}
|
||||
.pie-label-line {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
border-top: 1px solid #999;
|
||||
width: 40px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.pl-txt { font-size: 12px; color: #666; white-space: nowrap; }
|
||||
|
||||
.pie-legend-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
.p-leg-item { display: flex; flex-direction: row; align-items: center; gap: 10px; }
|
||||
.p-dot { width: 10px; height: 10px; border-radius: 2px; }
|
||||
.p-txt { font-size: 13px; color: #666; }
|
||||
|
||||
/* 列表样式布局 */
|
||||
.list-layout { display: flex; flex-direction: column; }
|
||||
|
||||
@@ -1,27 +1,203 @@
|
||||
<template>
|
||||
<AdminLayout :currentPage="currentPage">
|
||||
<view class="page">
|
||||
<view class="header">
|
||||
<text class="title">{{ title }}</text>
|
||||
<text class="sub-title">页面占位 (自动生成)</text>
|
||||
<view class="admin-marketing-lottery-config">
|
||||
<view class="config-card box-shadow">
|
||||
<view class="config-header">
|
||||
<text class="title">抽奖配置</text>
|
||||
</view>
|
||||
|
||||
<view class="config-body">
|
||||
<!-- 积分抽奖 -->
|
||||
<view class="form-item">
|
||||
<view class="item-label">
|
||||
<text class="label-text">积分抽奖：</text>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<picker :range="lotteryOptions" range-key="name" @change="onIntegralLotteryChange">
|
||||
<view class="picker-value">
|
||||
<text :class="form.integralLotteryId > 0 ? '' : 'placeholder'">
|
||||
{{ getLotteryName(form.integralLotteryId) }}
|
||||
</text>
|
||||
<text class="iconfont icon-arrow-down"></text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付抽奖 -->
|
||||
<view class="form-item">
|
||||
<view class="item-label">
|
||||
<text class="label-text">支付抽奖：</text>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<picker :range="lotteryOptions" range-key="name" @change="onPayLotteryChange">
|
||||
<view class="picker-value">
|
||||
<text :class="form.payLotteryId > 0 ? '' : 'placeholder'">
|
||||
{{ getLotteryName(form.payLotteryId) }}
|
||||
</text>
|
||||
<text class="iconfont icon-arrow-down"></text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 评价抽奖 -->
|
||||
<view class="form-item">
|
||||
<view class="item-label">
|
||||
<text class="label-text">评价抽奖：</text>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<picker :range="lotteryOptions" range-key="name" @change="onReplyLotteryChange">
|
||||
<view class="picker-value">
|
||||
<text :class="form.replyLotteryId > 0 ? '' : 'placeholder'">
|
||||
{{ getLotteryName(form.replyLotteryId) }}
|
||||
</text>
|
||||
<text class="iconfont icon-arrow-down"></text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<view class="form-ops">
|
||||
<button class="admin-btn admin-btn-primary save-btn" @click="handleSave">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</AdminLayout>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
|
||||
const currentPage = ref<string>('lottery-config')
|
||||
const title = ref<string>('config')
|
||||
<script uts>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
integralLotteryId: 87,
|
||||
payLotteryId: 82,
|
||||
replyLotteryId: 86
|
||||
},
|
||||
lotteryOptions: [
|
||||
{ id: 0, name: '请选择' },
|
||||
{ id: 87, name: '积分抽奖' },
|
||||
{ id: 86, name: '评价抽奖' },
|
||||
{ id: 82, name: '订单抽奖' },
|
||||
{ id: 75, name: '积分' }
|
||||
] as any[]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getLotteryName(id: number): string {
|
||||
const found = this.lotteryOptions.find((item: any): boolean => item.id == id)
|
||||
return found != null ? (found['name'] as string) : '请选择'
|
||||
},
|
||||
onIntegralLotteryChange(e: any) {
|
||||
this.form.integralLotteryId = this.lotteryOptions[e.detail.value].id
|
||||
},
|
||||
onPayLotteryChange(e: any) {
|
||||
this.form.payLotteryId = this.lotteryOptions[e.detail.value].id
|
||||
},
|
||||
onReplyLotteryChange(e: any) {
|
||||
this.form.replyLotteryId = this.lotteryOptions[e.detail.value].id
|
||||
},
|
||||
handleSave() {
|
||||
uni.showLoading({ title: '正在保存...' })
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||||
}, 800)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/uni.scss';
|
||||
.page { padding: $space-lg; }
|
||||
.header { padding: $space-lg; border-radius: $radius; background: $background-primary; box-shadow: $shadow-xs; }
|
||||
.title { font-size: $font-size-lg; font-weight: $font-weight-bold; color: $text-primary; }
|
||||
.sub-title { margin-top: $space-xs; font-size: $font-size-md; color: $text-secondary; }
|
||||
<style scoped>
|
||||
.admin-marketing-lottery-config {
|
||||
padding: 16px;
|
||||
background-color: #f5f7f9;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.box-shadow {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.config-card {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.config-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
}
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.config-body {
|
||||
padding: 40px 60px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
width: 120px;
|
||||
text-align: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.label-text {
|
||||
font-size: 14px;
|
||||
color: #515a6e;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.picker-value {
|
||||
width: 320px;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.picker-value:active {
|
||||
border-color: #2d8cf0;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #c5c8ce;
|
||||
}
|
||||
|
||||
.form-ops {
|
||||
padding-left: 140px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.save-btn {
|
||||
width: 100px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 12px;
|
||||
color: #808695;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,27 +1,445 @@
|
||||
<template>
|
||||
<AdminLayout :currentPage="currentPage">
|
||||
<view class="page">
|
||||
<view class="header">
|
||||
<text class="title">{{ title }}</text>
|
||||
<text class="sub-title">页面占位 (自动生成)</text>
|
||||
<view class="admin-marketing-lottery-list">
|
||||
<!-- 筛选区域 -->
|
||||
<view class="filter-card box-shadow">
|
||||
<view class="filter-row">
|
||||
<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">
|
||||
<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>
|
||||
<picker :range="typeOptions" range-key="label" @change="typeChange">
|
||||
<view class="picker-value">{{ getTypeLabel(currentType) }} <text class="iconfont icon-arrow-down"></text></view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-row second-row">
|
||||
<view class="filter-item">
|
||||
<text class="label">搜索抽奖：</text>
|
||||
<input class="admin-input" placeholder="请输入活动名称" v-model="searchQuery" style="width: 200px;" />
|
||||
</view>
|
||||
<view class="filter-item">
|
||||
<button class="admin-btn admin-btn-primary search-btn" @click="handleSearch">搜索</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</AdminLayout>
|
||||
|
||||
<!-- 操作工具栏 -->
|
||||
<view class="table-toolbar">
|
||||
<button class="admin-btn admin-btn-primary">创建抽奖活动</button>
|
||||
</view>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<view class="table-card box-shadow">
|
||||
<view class="table-header">
|
||||
<text class="col-60 center">ID</text>
|
||||
<text class="col-120">活动名称</text>
|
||||
<text class="col-100">活动类型</text>
|
||||
<text class="col-80 center">抽奖人数</text>
|
||||
<text class="col-80 center">中奖人数</text>
|
||||
<text class="col-80 center">抽奖次数</text>
|
||||
<text class="col-80 center">中奖次数</text>
|
||||
<text class="col-80 center">活动状态</text>
|
||||
<text class="col-80 center">开启状态</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-60 center"><text class="id-text">{{ item.id }}</text></view>
|
||||
<view class="col-120"><text class="cell-text">{{ item.name }}</text></view>
|
||||
<view class="col-100"><text class="cell-text">{{ item.typeName }}</text></view>
|
||||
<view class="col-80 center"><text class="cell-text">{{ item.memberCount }}</text></view>
|
||||
<view class="col-80 center"><text class="cell-text">{{ item.winningMemberCount }}</text></view>
|
||||
<view class="col-80 center"><text class="cell-text">{{ item.lotteryTimes }}</text></view>
|
||||
<view class="col-80 center"><text class="cell-text">{{ item.winningTimes }}</text></view>
|
||||
<view class="col-80 center">
|
||||
<text class="status-text">{{ item.statusText }}</text>
|
||||
</view>
|
||||
<view class="col-80 center">
|
||||
<view class="switch-box" :class="item.isOpen ? 'active' : ''" @click="toggleStatus(item)">
|
||||
<view class="switch-dot"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="col-180">
|
||||
<view class="time-range">
|
||||
<text class="time-label">开始: {{ item.startTime }}</text>
|
||||
<text class="time-label">结束: {{ item.endTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="col-120 center ops-cell">
|
||||
<text class="op-link">编辑</text>
|
||||
<text class="op-link">抽奖记录</text>
|
||||
<text class="op-link">更多 <text class="iconfont icon-arrow-down" style="font-size: 10px;"></text></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<view class="table-pagination">
|
||||
<text class="total-text">共 {{ total }} 条</text>
|
||||
<view class="page-ops">
|
||||
<picker :range="pageSizes" @change="pageSizeChange">
|
||||
<view class="size-picker">{{ currentSize }}条/页 <text class="iconfont icon-arrow-down"></text></view>
|
||||
</picker>
|
||||
<button class="page-btn" disabled>上一页</button>
|
||||
<text class="current-page">1</text>
|
||||
<button class="page-btn" disabled>下一页</button>
|
||||
<text class="jump-text">前往</text>
|
||||
<input class="jump-input" value="1" />
|
||||
<text class="jump-text">页</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
|
||||
const currentPage = ref<string>('lottery-list')
|
||||
const title = ref<string>('list')
|
||||
<script uts>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchQuery: '',
|
||||
currentStatus: 0,
|
||||
currentType: 0,
|
||||
total: 4,
|
||||
currentSize: 15,
|
||||
pageSizes: ['15条/页', '30条/页', '50条/页'],
|
||||
statusOptions: [
|
||||
{ label: '全部', value: 0 },
|
||||
{ label: '未开始', value: 1 },
|
||||
{ label: '进行中', value: 2 },
|
||||
{ label: '已结束', value: 3 }
|
||||
] as any[],
|
||||
typeOptions: [
|
||||
{ label: '全部', value: 0 },
|
||||
{ label: '积分抽奖', value: 1 },
|
||||
{ label: '订单评价', value: 2 },
|
||||
{ label: '订单支付', value: 3 }
|
||||
] as any[],
|
||||
tableData: [
|
||||
{
|
||||
id: 87,
|
||||
name: '积分抽奖',
|
||||
typeName: '积分抽取',
|
||||
memberCount: 166,
|
||||
winningMemberCount: 0,
|
||||
lotteryTimes: 329,
|
||||
winningTimes: 0,
|
||||
statusText: '已结束',
|
||||
isOpen: true,
|
||||
startTime: '2025-12-04 00:00:00',
|
||||
endTime: '2026-01-31 23:59:59'
|
||||
},
|
||||
{
|
||||
id: 86,
|
||||
name: '评价抽奖',
|
||||
typeName: '订单评价',
|
||||
memberCount: 3,
|
||||
winningMemberCount: 3,
|
||||
lotteryTimes: 4,
|
||||
winningTimes: 3,
|
||||
statusText: '已结束',
|
||||
isOpen: true,
|
||||
startTime: '2023-12-12 00:00:00',
|
||||
endTime: '2024-01-16 23:59:59'
|
||||
},
|
||||
{
|
||||
id: 82,
|
||||
name: '订单抽奖',
|
||||
typeName: '订单支付',
|
||||
memberCount: 100,
|
||||
winningMemberCount: 5,
|
||||
lotteryTimes: 124,
|
||||
winningTimes: 6,
|
||||
statusText: '已结束',
|
||||
isOpen: true,
|
||||
startTime: '2023-08-16 00:00:00',
|
||||
endTime: '2024-01-31 23:59:59'
|
||||
},
|
||||
{
|
||||
id: 75,
|
||||
name: '积分',
|
||||
typeName: '积分抽取',
|
||||
memberCount: 1288,
|
||||
winningMemberCount: 1130,
|
||||
lotteryTimes: 3413,
|
||||
winningTimes: 2628,
|
||||
statusText: '已结束',
|
||||
isOpen: true,
|
||||
startTime: '2025-10-01 00:00:00',
|
||||
endTime: '2025-11-30 23:59:59'
|
||||
}
|
||||
] as any[]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getStatusLabel(val : number) : string {
|
||||
const found = this.statusOptions.find((item : any) : boolean => item.value == val)
|
||||
return found != null ? (found['label'] as string) : '全部'
|
||||
},
|
||||
getTypeLabel(val : number) : string {
|
||||
const found = this.typeOptions.find((item : any) : boolean => item.value == val)
|
||||
return found != null ? (found['label'] as string) : '全部'
|
||||
},
|
||||
statusChange(e : any) {
|
||||
this.currentStatus = this.statusOptions[e.detail.value].value
|
||||
},
|
||||
typeChange(e : any) {
|
||||
this.currentType = this.typeOptions[e.detail.value].value
|
||||
},
|
||||
pageSizeChange(e : any) {
|
||||
const val = this.pageSizes[e.detail.value]
|
||||
this.currentSize = parseInt(val.replace('条/页', ''))
|
||||
},
|
||||
handleSearch() {
|
||||
uni.showToast({ title: '搜索', icon: 'none' })
|
||||
},
|
||||
toggleStatus(item : any) {
|
||||
item.isOpen = !item.isOpen
|
||||
uni.showToast({ title: '状态已变更', icon: 'none' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/uni.scss';
|
||||
.page { padding: $space-lg; }
|
||||
.header { padding: $space-lg; border-radius: $radius; background: $background-primary; box-shadow: $shadow-xs; }
|
||||
.title { font-size: $font-size-lg; font-weight: $font-weight-bold; color: $text-primary; }
|
||||
.sub-title { margin-top: $space-xs; font-size: $font-size-md; color: $text-secondary; }
|
||||
<style scoped>
|
||||
.admin-marketing-lottery-list {
|
||||
padding: 16px;
|
||||
background-color: #f5f7f9;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.box-shadow {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 筛选区域 */
|
||||
.filter-card {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
.filter-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.second-row {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-right: 24px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.date-range-mock {
|
||||
width: 280px;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.date-text { font-size: 13px; color: #c0c4cc; }
|
||||
|
||||
.picker-value {
|
||||
width: 160px;
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.admin-input {
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.search-btn {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 15px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* 表格工具栏 */
|
||||
.table-toolbar {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 表格主体 */
|
||||
.table-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
.table-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #f8f8f9;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
padding: 12px 0;
|
||||
}
|
||||
.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: 12px 0;
|
||||
}
|
||||
|
||||
/* 列定义 */
|
||||
.col-60 { width: 60px; }
|
||||
.col-80 { width: 80px; }
|
||||
.col-100 { width: 100px; }
|
||||
.col-120 { width: 120px; }
|
||||
.col-180 { width: 180px; }
|
||||
.center { text-align: center; justify-content: center; }
|
||||
|
||||
.cell-text { font-size: 13px; color: #515a6e; }
|
||||
.id-text { font-size: 13px; color: #808695; }
|
||||
.status-text { font-size: 13px; color: #515a6e; }
|
||||
|
||||
/* 开关组件 */
|
||||
.switch-box {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
background-color: #ccc;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.switch-box.active {
|
||||
background-color: #2d8cf0;
|
||||
}
|
||||
.switch-dot {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.switch-box.active .switch-dot {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.time-range {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.time-label {
|
||||
font-size: 12px;
|
||||
color: #808695;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.ops-cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.op-link {
|
||||
font-size: 13px;
|
||||
color: #2d8cf0;
|
||||
margin: 0 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 分页 */
|
||||
.table-pagination {
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.total-text {
|
||||
font-size: 14px;
|
||||
color: #515a6e;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.page-ops {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.size-picker {
|
||||
font-size: 14px;
|
||||
color: #515a6e;
|
||||
border: 1px solid #dcdfe6;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
margin-right: 15px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.page-btn {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
border: 1px solid #dcdfe6;
|
||||
background-color: #fff;
|
||||
}
|
||||
.current-page {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
background-color: #2d8cf0;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.jump-text { font-size: 14px; color: #515a6e; margin: 0 5px; }
|
||||
.jump-input {
|
||||
width: 40px;
|
||||
height: 28px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1013,8 +1013,7 @@ function goToFeedback() {
|
||||
font-size: 22rpx;
|
||||
color: #8c929b;
|
||||
}
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
.trend-legend {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user