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-06 16:18:04 +08:00
parent d00f0b7412
commit 57846534bc
86 changed files with 2751 additions and 3074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
pages/mall/admin/marketing/bargain/list.uvue
View File

@@ -1,15 +1,15 @@
<template>
<template>
<view class="page-container">
<view class="page-header">
<text class="page-title">鐮嶄环娲诲姩</text>
<text class="page-title">砍价活动</text>
<text class="page-subtitle">Component: MarketingBargain</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>
<text class="placeholder-title">页面占位</text>
<text class="placeholder-desc">该功能模块正在开发中</text>
<text class="placeholder-info">当前采用 CRMEB 路由体系 1:1 映射</text>
</view>
</view>
</view>
@@ -18,14 +18,14 @@
<script setup lang="uts">
import { ref } from 'vue'
// TODO: 瀹炵幇 鐮嶄环娲诲姩 鐨勫叿浣撳姛鑳?
// TODO: 实现 砍价活动 的具体功能
const loading = ref<boolean>(false)
</script>
<style scoped lang="scss">
.page-container {
/* padding removed */
padding: 20px;
min-height: 100vh;
background: #f5f5f5;
}
@@ -79,5 +79,3 @@ const loading = ref<boolean>(false)
color: #1890ff;
}
</style>

91
pages/mall/admin/marketing/combination/create.uvue
View File

@@ -1,11 +1,11 @@
<template>
<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>
<text class="back-ic">←</text>
<text class="back-txt">返回</text>
</view>
<text class="page-title">{{ isEdit ? '缂栬緫鎷煎洟鍟嗗搧' : '娣诲姞鎷煎洟鍟嗗搧' }}</text>
<text class="page-title">{{ isEdit ? '编辑拼团商品' : '添加拼团商品' }}</text>
</view>
<view class="steps-card border-shadow">
@@ -13,7 +13,7 @@
<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>
<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>
@@ -21,82 +21,82 @@
</view>
</view>
<!-- 姝ラ1: 閫夋嫨鍟嗗搧 -->
<!-- 步骤1: 选择商品 -->
<view v-if="currentStep === 0" class="step-content border-shadow">
<view class="form-item row-center">
<text class="label required">閫夋嫨鍟嗗搧锛?/text>
<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>
<text class="empty-ic">🛍️</text>
<text class="empty-txt">选择商品</text>
</view>
</view>
</view>
</view>
<!-- 姝ラ2: 濉啓鍩虹淇℃伅 -->
<!-- 步骤2: 填写基础信息 -->
<view v-if="currentStep === 1" class="step-content border-shadow">
<view class="form-scroll">
<view class="form-section">
<text class="section-title">鍩虹閰嶇疆</text>
<text class="section-title">基础配置</text>
<view class="form-item">
<text class="label required">鎷煎洟鍚嶇О锛?/text>
<input class="input" v-model="form.title" placeholder="璇疯緭鍏ユ嫾鍥㈠悕绉? />
<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="璇疯緭鍏ユ嫾鍥㈢畝浠? />
<text class="label required">拼团简介：</text>
<textarea class="textarea" v-model="form.info" placeholder="请输入拼团简介" />
</view>
<view class="form-item">
<text class="label required">鎷煎洟鏃堕棿锛?/text>
<text class="label required">拼团时间：</text>
<view class="date-range">
<input class="input-half" v-model="form.start_time" placeholder="寮€濮嬫棩鏈? />
<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="缁撴潫鏃ユ湡" />
<input class="input-half" v-model="form.stop_time" placeholder="结束日期" />
</view>
</view>
</view>
<view class="form-section">
<text class="section-title">鎷煎洟瑙勫垯</text>
<text class="section-title">拼团规则</text>
<view class="form-item">
<text class="label required">鎷煎洟鏃舵晥锛?/text>
<text class="label required">拼团时效：</text>
<view class="input-unit">
<input class="input" type="number" v-model="form.effective_time" />
<text class="unit">灏忔椂</text>
<text class="unit">小时</text>
</view>
</view>
<view class="form-item">
<text class="label required">鎷煎洟浜烘暟锛?/text>
<text class="label required">拼团人数：</text>
<view class="input-unit">
<input class="input" type="number" v-model="form.people" />
<text class="unit">浜?/text>
<text class="unit">人</text>
</view>
</view>
<view class="form-item">
<text class="label">铏氭嫙鎴愬洟锛?/text>
<text class="label">虚拟成团：</text>
<view class="input-unit">
<input class="input" type="number" v-model="form.virtual_people" />
<text class="unit">浜?/text>
<text class="unit">人</text>
</view>
</view>
</view>
</view>
</view>
<!-- 姝ラ3: 淇敼鍟嗗搧璇︽儏 -->
<!-- 步骤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 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>
@@ -108,25 +108,25 @@
</view>
<view class="detail-section">
<text class="label">鍟嗗搧璇︽儏锛?/text>
<text class="label">商品详情：</text>
<view class="editor-placeholder">
<text class="p-txt">杩欓噷鏄紪杈戝櫒鍖哄煙 (WangEditor 鏄犲皠)</text>
<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 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>
<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)">
@@ -142,7 +142,7 @@
<script setup lang="uts">
import { ref, reactive } from 'vue'
const steps = ['閫夋嫨鎷煎洟鍟嗗搧', '濉啓鍩虹淇℃伅', '淇敼鍟嗗搧璇︽儏']
const steps = ['选择拼团商品', '填写基础信息', '修改商品详情']
const currentStep = ref(0)
const isEdit = ref(false)
const showSelector = ref(false)
@@ -160,12 +160,12 @@ const form = reactive({
})
const specs = ref([
{ name: '榛樿瑙勬牸', price: '0.01', cost: '0.00', quota: '100', stock: '999' }
{ 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' }
{ 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 = () => {
@@ -184,13 +184,13 @@ const selectGood = (g: any) => {
const nextStep = () => {
if (currentStep.value === 0 && !selectedGood.value) {
uni.showToast({ title: '璇峰厛閫夋嫨鍟嗗搧', icon: 'none' })
uni.showToast({ title: '请先选择商品', icon: 'none' })
return
}
if (currentStep.value < 2) {
currentStep.value++
} else {
uni.showToast({ title: '鎻愪氦鎴愬姛' })
uni.showToast({ title: '提交成功' })
setTimeout(() => uni.navigateBack(), 1500)
}
}
@@ -431,11 +431,10 @@ const prevStep = () => {
/* 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 removed */ }
.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>

135
pages/mall/admin/marketing/lottery/list.uvue
View File

@@ -1,23 +1,23 @@
<template>
<template>
<view class="admin-marketing-lottery-list">
<!-- 绛涢€夊尯鍩?-->
<!-- 筛选区域 -->
<view class="filter-card box-shadow">
<view class="filter-row">
<view class="filter-item">
<text class="label">娲诲姩鏃堕棿锛?/text>
<text class="label">活动时间：</text>
<view class="date-range-mock">
<text class="date-text">寮€濮嬫棩鏈?- 缁撴潫鏃ユ湡</text>
<text class="date-text">开始日期 - 结束日期</text>
<text class="iconfont icon-calendar"></text>
</view>
</view>
<view class="filter-item">
<text class="label">娲诲姩鐘舵€侊細</text>
<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>
<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>
@@ -25,34 +25,34 @@
</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;" />
<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>
<button class="admin-btn admin-btn-primary search-btn" @click="handleSearch">搜索</button>
</view>
</view>
</view>
<!-- 鎿嶄綔宸ュ叿鏍?-->
<!-- 操作工具栏 -->
<view class="table-toolbar">
<button class="admin-btn admin-btn-primary">鍒涘缓鎶藉娲诲姩</button>
<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>
<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">
@@ -74,31 +74,31 @@
</view>
<view class="col-180">
<view class="time-range">
<text class="time-label">寮€濮? {{ item.startTime }}</text>
<text class="time-label">缁撴潫: {{ item.endTime }}</text>
<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>
<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>
<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>
<view class="size-picker">{{ currentSize }}条/页 <text class="iconfont icon-arrow-down"></text></view>
</picker>
<button class="page-btn" disabled>涓婁竴椤?/button>
<button class="page-btn" disabled>上一页</button>
<text class="current-page">1</text>
<button class="page-btn" disabled>涓嬩竴椤?/button>
<text class="jump-text">鍓嶅線</text>
<button class="page-btn" disabled>下一页</button>
<text class="jump-text">前往</text>
<input class="jump-input" value="1" />
<text class="jump-text">椤?/text>
<text class="jump-text">页</text>
</view>
</view>
</view>
@@ -114,68 +114,68 @@ export default {
currentType: 0,
total: 4,
currentSize: 15,
pageSizes: ['15鏉?椤?, '30鏉?椤?, '50鏉?椤?],
pageSizes: ['15条/页', '30条/页', '50条/页'],
statusOptions: [
{ label: '鍏ㄩ儴', value: 0 },
{ label: '鏈紑濮?, value: 1 },
{ label: '杩涜涓?, value: 2 },
{ label: '宸茬粨鏉?, value: 3 }
{ 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 }
{ label: '全部', value: 0 },
{ label: '积分抽奖', value: 1 },
{ label: '订单评价', value: 2 },
{ label: '订单支付', value: 3 }
] as any[],
tableData: [
{
id: 87,
name: '绉垎鎶藉',
typeName: '绉垎鎶藉彇',
name: '积分抽奖',
typeName: '积分抽取',
memberCount: 166,
winningMemberCount: 0,
lotteryTimes: 329,
winningTimes: 0,
statusText: '宸茬粨鏉?,
statusText: '已结束',
isOpen: true,
startTime: '2025-12-04 00:00:00',
endTime: '2026-01-31 23:59:59'
},
{
id: 86,
name: '璇勪环鎶藉',
typeName: '璁㈠崟璇勪环',
name: '评价抽奖',
typeName: '订单评价',
memberCount: 3,
winningMemberCount: 3,
lotteryTimes: 4,
winningTimes: 3,
statusText: '宸茬粨鏉?,
statusText: '已结束',
isOpen: true,
startTime: '2023-12-12 00:00:00',
endTime: '2024-01-16 23:59:59'
},
{
id: 82,
name: '璁㈠崟鎶藉',
typeName: '璁㈠崟鏀粯',
name: '订单抽奖',
typeName: '订单支付',
memberCount: 100,
winningMemberCount: 5,
lotteryTimes: 124,
winningTimes: 6,
statusText: '宸茬粨鏉?,
statusText: '已结束',
isOpen: true,
startTime: '2023-08-16 00:00:00',
endTime: '2024-01-31 23:59:59'
},
{
id: 75,
name: '绉垎',
typeName: '绉垎鎶藉彇',
name: '积分',
typeName: '积分抽取',
memberCount: 1288,
winningMemberCount: 1130,
lotteryTimes: 3413,
winningTimes: 2628,
statusText: '宸茬粨鏉?,
statusText: '已结束',
isOpen: true,
startTime: '2025-10-01 00:00:00',
endTime: '2025-11-30 23:59:59'
@@ -186,11 +186,11 @@ export default {
methods: {
getStatusLabel(val : number) : string {
const found = this.statusOptions.find((item : any) : boolean => item.value == val)
return found != null ? (found['label'] as string) : '鍏ㄩ儴'
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) : '鍏ㄩ儴'
return found != null ? (found['label'] as string) : '全部'
},
statusChange(e : any) {
this.currentStatus = this.statusOptions[e.detail.value].value
@@ -200,14 +200,14 @@ export default {
},
pageSizeChange(e : any) {
const val = this.pageSizes[e.detail.value]
this.currentSize = parseInt(val.replace('鏉?椤?, ''))
this.currentSize = parseInt(val.replace('条/页', ''))
},
handleSearch() {
uni.showToast({ title: '鎼滅储', icon: 'none' })
uni.showToast({ title: '搜索', icon: 'none' })
},
toggleStatus(item : any) {
item.isOpen = !item.isOpen
uni.showToast({ title: '鐘舵€佸凡鍙樻洿', icon: 'none' })
uni.showToast({ title: '状态已变更', icon: 'none' })
}
}
}
@@ -227,7 +227,7 @@ export default {
margin-bottom: 16px;
}
/* 绛涢€夊尯鍩?*/
/* 筛选区域 */
.filter-card {
padding: 15px 20px;
}
@@ -293,12 +293,12 @@ export default {
margin-left: 10px;
}
/* 琛ㄦ牸宸ュ叿鏍?*/
/* 表格工具栏 */
.table-toolbar {
margin-bottom: 16px;
}
/* 琛ㄦ牸涓讳綋 */
/* 表格主体 */
.table-card {
overflow: hidden;
}
@@ -322,7 +322,7 @@ export default {
padding: 12px 0;
}
/* 鍒楀畾涔?*/
/* 列定义 */
.col-60 { width: 60px; }
.col-80 { width: 80px; }
.col-100 { width: 100px; }
@@ -334,7 +334,7 @@ export default {
.id-text { font-size: 13px; color: #808695; }
.status-text { font-size: 13px; color: #515a6e; }
/* 寮€鍏崇粍浠?*/
/* 开关组件 */
.switch-box {
width: 40px;
height: 20px;
@@ -382,7 +382,7 @@ export default {
cursor: pointer;
}
/* 鍒嗛〉 */
/* 分页 */
.table-pagination {
padding: 16px 20px;
display: flex;
@@ -424,7 +424,7 @@ export default {
height: 28px;
line-height: 28px;
text-align: center;
background-color: #2d8cf0;
color: #fff;
font-size: 14px;
border-radius: 2px;
@@ -443,4 +443,3 @@ export default {

69
pages/mall/admin/marketing/newcomer/index.uvue
View File

@@ -1,86 +1,86 @@
<template>
<template>
<view class="admin-main">
<view class="card-container">
<view class="card-header">
<text class="card-header-title">鏂颁汉绀艰缃?/text>
<text class="card-header-title">新人礼设置</text>
</view>
<view class="form-content">
<!-- 璧犻€佷綑棰?-->
<!-- 赠送余额 -->
<view class="form-item">
<view class="label-col">
<text class="form-label">璧犻€佷綑棰?鍏?:</text>
<text class="form-label">赠送余额(元):</text>
</view>
<view class="input-col">
<input type="number" class="form-input" v-model="formData.balance" />
<text class="form-tip">鏂扮敤鎴峰鍔遍噾棰濓紝蹇呴』澶т簬绛変簬0锛?涓轰笉璧犻€?/text>
<text class="form-tip">新用户奖励金额，必须大于等于0，0为不赠送</text>
</view>
</view>
<!-- 璧犻€佺Н鍒?-->
<!-- 赠送积分 -->
<view class="form-item">
<view class="label-col">
<text class="form-label">璧犻€佺Н鍒?</text>
<text class="form-label">赠送积分:</text>
</view>
<view class="input-col">
<input type="number" class="form-input" v-model="formData.integral" />
<text class="form-tip">鏂扮敤鎴峰鍔辩Н鍒嗭紝蹇呴』澶т簬绛変簬0锛?涓轰笉璧犻€?/text>
<text class="form-tip">新用户奖励积分，必须大于等于0，0为不赠送</text>
</view>
</view>
<!-- 璧犻€佷紭鎯犲埜 -->
<!-- 赠送优惠券 -->
<view class="form-item row-center">
<view class="label-col">
<text class="form-label">璧犻€佷紭鎯犲埜:</text>
<text class="form-label">赠送优惠券:</text>
</view>
<view class="input-col row-layout">
<view class="coupon-display-area" v-if="formData.coupons.length > 0">
<view v-for="(coupon, index) in formData.coupons" :key="index" class="coupon-tag-group">
<view class="coupon-tag-main">
<text class="coupon-tag-name">{{ coupon.name }}</text>
<text class="coupon-tag-del" @click="removeCoupon(index)">脳</text>
<text class="coupon-tag-del" @click="removeCoupon(index)">×</text>
</view>
<view class="explicit-edit-btn" @click="editCoupon(index)">
<text class="edit-btn-text">淇敼璁剧疆</text>
<text class="edit-btn-text">修改设置</text>
</view>
</view>
</view>
<button class="btn-select-action" @click="showCouponModal = true">閫夋嫨浼樻儬鍒?/button>
<button class="btn-select-action" @click="showCouponModal = true">选择优惠券</button>
</view>
</view>
<!-- 纭鎸夐挳 -->
<!-- 确认按钮 -->
<view class="form-submit-bar">
<button class="btn-primary-confirm" @click="handleSubmit">纭</button>
<button class="btn-primary-confirm" @click="handleSubmit">确认</button>
</view>
</view>
</view>
<!-- 浼樻儬鍒搁€夋嫨涓庤鎯呴厤缃脊绐?-->
<!-- 优惠券选择与详情配置弹窗 -->
<view class="modal-mask" v-if="showCouponModal" @click="closeModal">
<view class="modal-box" @click.stop>
<view class="modal-head">
<text class="modal-head-title">{{ isEditing ? '閰嶇疆璧犻€佽鎯? : '閫夋嫨浼樻儬鍒? }}</text>
<text class="modal-head-close" @click="closeModal">脳</text>
<text class="modal-head-title">{{ isEditing ? '配置赠送详情' : '选择优惠券' }}</text>
<text class="modal-head-close" @click="closeModal">×</text>
</view>
<view class="modal-body">
<!-- 缂栬緫/璁剧疆妯″紡锛氬綋鐢ㄦ埛鐢变簬鐐瑰嚮鈥滀慨鏀硅缃€濇椂瑙﹀彂 -->
<!-- 编辑/设置模式：当用户由于点击“修改设置”时触发 -->
<view v-if="isEditing" class="setting-form">
<view class="setting-row">
<text class="setting-label">鏄剧ず鍚嶇О:</text>
<input class="setting-input" v-model="editingCoupon.name" placeholder="璇疯緭鍏ラ〉闈㈡樉绀虹殑鍚嶇О" />
<text class="setting-label">显示名称:</text>
<input class="setting-input" v-model="editingCoupon.name" placeholder="请输入页面显示的名称" />
</view>
<view class="setting-row">
<text class="setting-label">鍙戞斁鎻忚堪:</text>
<input class="setting-input" v-model="editingCoupon.desc" placeholder="璇疯緭鍏ュ彂鏀炬椂鐨勬弿杩? />
<text class="setting-label">发放描述:</text>
<input class="setting-input" v-model="editingCoupon.desc" placeholder="请输入发放时的描述" />
</view>
<view class="setting-tip">
<text class="tip-text">* 姝ゅ鐨勪慨鏀逛粎褰卞搷鈥滄柊浜虹ぜ鈥濇椿鍔ㄤ腑鐨勫睍绀猴紝涓嶅奖鍝嶄紭鎯犲埜鑷韩閰嶇疆</text>
<text class="tip-text">* 此处的修改仅影响“新人礼”活动中的展示，不影响优惠券自身配置</text>
</view>
</view>
<!-- 閫夋嫨妯″紡 -->
<!-- 选择模式 -->
<view v-else class="selection-list">
<view v-for="(item, index) in couponOptions" :key="index"
class="selection-card" :class="{'selected-card': isSelected(item)}"
@@ -91,7 +91,7 @@
</view>
<view class="card-right">
<view class="check-circle" :class="{'checked-circle': isSelected(item)}">
<text class="check-mark" v-if="isSelected(item)">鉁?/text>
<text class="check-mark" v-if="isSelected(item)">✓</text>
</view>
</view>
</view>
@@ -99,8 +99,8 @@
</view>
<view class="modal-foot">
<button class="foot-btn-cancel" @click="closeModal">鍙栨秷</button>
<button class="foot-btn-ok" @click="confirmModal">纭畾</button>
<button class="foot-btn-cancel" @click="closeModal">取消</button>
<button class="foot-btn-ok" @click="confirmModal">确定</button>
</view>
</view>
</view>
@@ -128,9 +128,9 @@ const editingIndex = ref(-1)
const editingCoupon = reactive<Coupon>({ id: 0, name: '', desc: '' })
const couponOptions = reactive<Coupon[]>([
{ id: 1, name: '婊?00鍑?0鍏冨埜', desc: '鍏ㄥ満閫氱敤' },
{ id: 2, name: '鏂颁汉5鍏冩棤闂ㄦ', desc: '浠呴檺鏂颁汉浣跨敤' },
{ id: 3, name: '婊?00鍑?0鍏冨埜', desc: '闄愮壒瀹氬晢鍝? }
{ id: 1, name: '满100减10元券', desc: '全场通用' },
{ id: 2, name: '新人5元无门槛', desc: '仅限新人使用' },
{ id: 3, name: '满200减50元券', desc: '限特定商品' }
])
function isSelected(item: Coupon): boolean {
@@ -174,11 +174,11 @@ function confirmModal() {
}
function handleSubmit() {
uni.showLoading({ title: '淇濆瓨涓?..' })
uni.showLoading({ title: '保存中...' })
setTimeout(() => {
uni.hideLoading()
uni.showToast({
title: '璁剧疆宸茬敓鏁?,
title: '设置已生效',
icon: 'success'
})
}, 500)
@@ -193,7 +193,7 @@ function handleSubmit() {
}
.card-container {
background-color: #fff;
border-radius: 2px;
}
@@ -519,4 +519,3 @@ function handleSubmit() {
</style>