huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善页面

Browse Source
This commit is contained in:
huangzhenbao
2026-02-04 09:14:37 +08:00
parent 3476c006e6
commit df642813c3
16 changed files with 3376 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

440
pages/mall/admin/marketing/combination/create.uvue Normal file
View 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>

459
pages/mall/admin/marketing/combination/list.uvue
View File

@@ -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
View 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>