442 lines
13 KiB
Plaintext
442 lines
13 KiB
Plaintext
<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 removed */ }
|
|
.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>
|
|
|