2025-03-30 18:00:11 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="winelist">
|
|
|
|
|
|
<!-- 页面标题 -->
|
|
|
|
|
|
<view class="page-title">3步快速生成酒单</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 顶部酒款信息 -->
|
|
|
|
|
|
<view class="beer-info">
|
|
|
|
|
|
<view class="info-card" v-if="beerInfo.name">
|
|
|
|
|
|
<image :src="beerInfo.cover" mode="aspectFill" class="cover"></image>
|
|
|
|
|
|
<view class="info">
|
|
|
|
|
|
<view class="title">{{ beerInfo.name }}</view>
|
|
|
|
|
|
<view class="brewery">{{ beerInfo.brewery }}</view>
|
|
|
|
|
|
<view class="style">{{ beerInfo.style }}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="info-card empty-state" v-if="!beerInfo.name">
|
|
|
|
|
|
<view class="info">
|
|
|
|
|
|
<view class="title">请先选择酒款</view>
|
|
|
|
|
|
<view class="search-btn" @click="toSearch">
|
|
|
|
|
|
<text class="cuIcon-search"></text>
|
|
|
|
|
|
<text>搜索酒款</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 步骤引导 -->
|
|
|
|
|
|
<view class="steps">
|
|
|
|
|
|
<view class="step-item" :class="{'active': currentStep >= 1}">
|
|
|
|
|
|
<view class="step-number">1</view>
|
|
|
|
|
|
<view class="step-content">
|
|
|
|
|
|
<view class="step-title">输入酒枪编号</view>
|
|
|
|
|
|
<view class="step-desc">下方输入酒款对应的酒枪编号</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="step-line" :class="{'active': currentStep >= 2}"></view>
|
|
|
|
|
|
<view class="step-item" :class="{'active': currentStep >= 2}">
|
|
|
|
|
|
<view class="step-number">2</view>
|
|
|
|
|
|
<view class="step-content">
|
|
|
|
|
|
<view class="step-title">编辑售卖规格</view>
|
|
|
|
|
|
<view class="step-desc">设置酒款的售卖规格和价格</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="step-line" :class="{'active': currentStep >= 3}"></view>
|
|
|
|
|
|
<view class="step-item" :class="{'active': currentStep >= 3}">
|
|
|
|
|
|
<view class="step-number">3</view>
|
|
|
|
|
|
<view class="step-content">
|
|
|
|
|
|
<view class="step-title">选择导出方式</view>
|
|
|
|
|
|
<view class="step-desc">选择图片或文件格式导出</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 步骤内容区 -->
|
|
|
|
|
|
<view class="step-content-area">
|
|
|
|
|
|
<!-- 步骤1：输入酒枪编号 -->
|
|
|
|
|
|
<view class="step-panel" v-if="currentStep === 1">
|
|
|
|
|
|
<view class="input-group">
|
|
|
|
|
|
<text class="label">酒枪编号</text>
|
|
|
|
|
|
<input type="number" v-model="tapNumber" placeholder="请输入整数" class="input" />
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="btn-group">
|
|
|
|
|
|
<button class="btn next" @click="nextStep">下一步</button>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 步骤2：编辑售卖规格 -->
|
|
|
|
|
|
<view class="step-panel" v-if="currentStep === 2">
|
|
|
|
|
|
<view class="specs-list">
|
|
|
|
|
|
<view class="spec-item" v-for="(spec, index) in specs" :key="index">
|
|
|
|
|
|
<view class="spec-header">
|
|
|
|
|
|
<text class="spec-name">{{ spec.name }}</text>
|
|
|
|
|
|
<text class="delete" @click="deleteSpec(index)">删除</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="spec-content">
|
|
|
|
|
|
<view class="input-group">
|
|
|
|
|
|
<text class="label">规格</text>
|
|
|
|
|
|
<view class="input-wrapper">
|
|
|
|
|
|
<input type="number" v-model="spec.unit" placeholder="请输入数字" class="input" @focus="handleUnitFocus(index)" @blur="handleUnitBlur(index)" />
|
|
|
|
|
|
<text class="unit" v-if="!spec.unitFocused">ML</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="input-group">
|
|
|
|
|
|
<text class="label">价格</text>
|
|
|
|
|
|
<view class="input-wrapper">
|
|
|
|
|
|
<input type="number" v-model="spec.price" placeholder="请输入数字" class="input" @focus="handlePriceFocus(index)" @blur="handlePriceBlur(index)" />
|
|
|
|
|
|
<text class="unit" v-if="!spec.priceFocused">元</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="add-spec" @click="addSpec" v-if="specs.length < 2">
|
|
|
|
|
|
<text class="cuIcon-add"></text>
|
|
|
|
|
|
<text>添加规格</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="btn-group">
|
|
|
|
|
|
<button class="btn prev" @click="prevStep">
|
|
|
|
|
|
<text class="cuIcon-back"></text>
|
|
|
|
|
|
<text>上一步</text>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button class="btn next" @click="nextStep">下一步</button>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 步骤3：选择导出方式 -->
|
|
|
|
|
|
<view class="step-panel" v-if="currentStep === 3">
|
|
|
|
|
|
<view class="export-options">
|
|
|
|
|
|
<view class="option-item" @click="toPerview(1)">
|
|
|
|
|
|
<text class="cuIcon-pic"></text>
|
|
|
|
|
|
<text>导出图片</text>
|
|
|
|
|
|
<text class="desc">以图片形式分享</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="option-item" @click="toPerview(2)">
|
|
|
|
|
|
<text class="cuIcon-file"></text>
|
|
|
|
|
|
<text>导出文件</text>
|
|
|
|
|
|
<text class="desc">PDF文件，适合打印（460mm*230mm）</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="btn-group">
|
|
|
|
|
|
<button class="btn prev" @click="prevStep">
|
|
|
|
|
|
<text class="cuIcon-back"></text>
|
|
|
|
|
|
<text>上一步</text>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import {
|
|
|
|
|
|
getBeerInfo
|
|
|
|
|
|
} from "@/api/bar.js"
|
|
|
|
|
|
|
|
|
|
|
|
// 常量定义
|
|
|
|
|
|
const MAX_SPECS = 2
|
|
|
|
|
|
const DEFAULT_SPEC = {
|
|
|
|
|
|
name: '标准杯',
|
|
|
|
|
|
price: '',
|
|
|
|
|
|
unit: '',
|
|
|
|
|
|
unitFocused: false,
|
|
|
|
|
|
priceFocused: false
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
currentStep: 1,
|
|
|
|
|
|
beerId: '',
|
|
|
|
|
|
beerInfo: {
|
|
|
|
|
|
cover: '',
|
|
|
|
|
|
name: '',
|
|
|
|
|
|
brewery: '',
|
|
|
|
|
|
style: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
tapNumber: '',
|
|
|
|
|
|
specs: [DEFAULT_SPEC]
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
computed: {
|
|
|
|
|
|
canProceed() {
|
|
|
|
|
|
if (!this.beerInfo.name) return false
|
|
|
|
|
|
|
|
|
|
|
|
switch(this.currentStep) {
|
|
|
|
|
|
case 1: return this.tapNumber.length > 0
|
|
|
|
|
|
case 2: return this.specs.every(spec => spec.price && spec.unit)
|
|
|
|
|
|
default: return true
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
stepErrorMessage() {
|
|
|
|
|
|
if (!this.beerInfo.name) return '请先选择酒款'
|
|
|
|
|
|
|
|
|
|
|
|
switch(this.currentStep) {
|
|
|
|
|
|
case 1: return '请输入酒枪编号'
|
|
|
|
|
|
case 2: return '请完善规格信息'
|
|
|
|
|
|
default: return '请完成当前步骤'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
onLoad(options) {
|
|
|
|
|
|
if(options.beerId) {
|
|
|
|
|
|
this.beerId = options.beerId
|
|
|
|
|
|
this.getBeerInfo()
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
// 数据获取
|
|
|
|
|
|
async getBeerInfo() {
|
|
|
|
|
|
try {
|
|
|
|
|
|
const res = await getBeerInfo(this.beerId)
|
|
|
|
|
|
this.beerInfo = {
|
|
|
|
|
|
cover: res.data.cover,
|
|
|
|
|
|
name: res.data.beerName,
|
|
|
|
|
|
brewery: res.data.brandName,
|
|
|
|
|
|
style: res.data.beerStyles
|
|
|
|
|
|
}
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: '获取酒款信息失败',
|
|
|
|
|
|
icon: 'none'
|
|
|
|
|
|
})
|
|
|
|
|
|
console.error('获取酒款信息失败:', error)
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 步骤控制
|
|
|
|
|
|
nextStep() {
|
|
|
|
|
|
if (!this.beerInfo.name) {
|
|
|
|
|
|
this.showToast('请先选择酒款')
|
|
|
|
|
|
return
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (!this.canProceed) {
|
|
|
|
|
|
this.showToast(this.stepErrorMessage)
|
|
|
|
|
|
return
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (this.currentStep < 3) {
|
|
|
|
|
|
this.currentStep++
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
prevStep() {
|
|
|
|
|
|
if (this.currentStep > 1) {
|
|
|
|
|
|
this.currentStep--
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 规格管理
|
|
|
|
|
|
addSpec() {
|
|
|
|
|
|
if (this.specs.length >= MAX_SPECS) {
|
|
|
|
|
|
this.showToast('最多添加2个规格')
|
|
|
|
|
|
return
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
this.specs.push({
|
|
|
|
|
|
...DEFAULT_SPEC,
|
|
|
|
|
|
name: `规格${this.specs.length + 1}`
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
deleteSpec(index) {
|
|
|
|
|
|
if (this.specs.length <= 1) {
|
|
|
|
|
|
this.showToast('至少保留一个规格')
|
|
|
|
|
|
return
|
|
|
|
|
|
}
|
|
|
|
|
|
this.specs.splice(index, 1)
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 输入处理
|
|
|
|
|
|
handleUnitFocus(index) {
|
|
|
|
|
|
this.specs[index].unitFocused = true
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
handleUnitBlur(index) {
|
|
|
|
|
|
this.specs[index].unitFocused = false
|
|
|
|
|
|
if (this.specs[index].unit) {
|
|
|
|
|
|
this.specs[index].unit = `${this.specs[index].unit}ML`
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
handlePriceFocus(index) {
|
|
|
|
|
|
this.specs[index].priceFocused = true
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
handlePriceBlur(index) {
|
|
|
|
|
|
this.specs[index].priceFocused = false
|
|
|
|
|
|
if (this.specs[index].price) {
|
|
|
|
|
|
this.specs[index].price = `${this.specs[index].price}元`
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 导出处理
|
|
|
|
|
|
toPerview(type) {
|
|
|
|
|
|
if (!this.beerInfo.name) {
|
|
|
|
|
|
this.showToast('请先选择酒款')
|
|
|
|
|
|
return
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (!this.canProceed) {
|
|
|
|
|
|
this.showToast(this.stepErrorMessage)
|
|
|
|
|
|
return
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const specs = this.specs.map(spec => ({
|
|
|
|
|
|
amount: spec.price,
|
|
|
|
|
|
specs: spec.unit
|
|
|
|
|
|
}))
|
|
|
|
|
|
|
|
|
|
|
|
const params = {
|
|
|
|
|
|
type,
|
|
|
|
|
|
beerId: this.beerId,
|
|
|
|
|
|
no: this.tapNumber,
|
|
|
|
|
|
amount: specs[0].amount,
|
|
|
|
|
|
amount1: specs[1]?.amount || '',
|
|
|
|
|
|
specs: specs[0].specs,
|
|
|
|
|
|
specs1: specs[1]?.specs || ''
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: `/pagesActivity/bgSelect?${this.buildQueryString(params)}`
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 工具方法
|
|
|
|
|
|
showToast(title) {
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title,
|
|
|
|
|
|
icon: 'none'
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
buildQueryString(params) {
|
|
|
|
|
|
return Object.entries(params)
|
|
|
|
|
|
.map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
|
|
|
|
|
|
.join('&')
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 页面跳转
|
|
|
|
|
|
toSearch() {
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: '/pagesActivity/homeSearch'
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
// 通用样式
|
|
|
|
|
|
.input {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 88rpx;
|
|
|
|
|
|
background: #F7F7F7;
|
|
|
|
|
|
border-radius: 12rpx;
|
|
|
|
|
|
padding: 0 24rpx;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #0B0E26;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
|
|
width: 45%;
|
|
|
|
|
|
height: 88rpx;
|
|
|
|
|
|
border-radius: 44rpx;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
|
|
|
|
|
|
|
&.prev {
|
|
|
|
|
|
background: #F7F7F7;
|
|
|
|
|
|
color: #606060;
|
|
|
|
|
|
border: 2rpx solid #E5E5E5;
|
|
|
|
|
|
|
|
|
|
|
|
.cuIcon-back {
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
margin-right: 8rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
|
|
background: #EEEEEE;
|
|
|
|
|
|
border-color: #D8D8D8;
|
|
|
|
|
|
transform: scale(0.98);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.next {
|
|
|
|
|
|
background: #19367A;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
box-shadow: 0rpx 4rpx 12rpx rgba(25, 54, 122, 0.2);
|
|
|
|
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
|
|
background: #152B5C;
|
|
|
|
|
|
transform: scale(0.98);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.winelist {
|
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
|
background: #F7F7F7;
|
|
|
|
|
|
padding: 32rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.page-title {
|
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
|
color: #0B0E26;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
margin-bottom: 32rpx;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.beer-info {
|
|
|
|
|
|
margin-bottom: 48rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.info-card {
|
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
|
border-radius: 24rpx;
|
|
|
|
|
|
padding: 32rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
box-shadow: 0rpx 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
|
|
|
|
height: 277rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.cover {
|
2025-04-08 11:17:39 +08:00
|
|
|
|
width: 150rpx;
|
2025-03-30 18:00:11 +08:00
|
|
|
|
height: 213rpx;
|
|
|
|
|
|
border-radius: 16rpx;
|
|
|
|
|
|
margin-right: 24rpx;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.info {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #0B0E26;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
margin-bottom: 12rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.brewery {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #606060;
|
|
|
|
|
|
margin-bottom: 8rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.style {
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
color: #979797;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.search-btn {
|
|
|
|
|
|
height: 72rpx;
|
|
|
|
|
|
background: #D42E78;
|
|
|
|
|
|
border-radius: 36rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
|
width: 200rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.cuIcon-search {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
margin-right: 8rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
|
|
transform: scale(0.98);
|
|
|
|
|
|
background: #B81F5F;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.empty-state {
|
|
|
|
|
|
.info {
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
|
color: #606060;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
margin-bottom: 24rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.steps {
|
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
|
border-radius: 24rpx;
|
|
|
|
|
|
padding: 32rpx;
|
|
|
|
|
|
margin-bottom: 48rpx;
|
|
|
|
|
|
box-shadow: 0rpx 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
|
|
|
|
|
|
|
|
|
|
.step-item {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
|
margin-bottom: 32rpx;
|
|
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
|
|
.step-number {
|
|
|
|
|
|
background: #19367A;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.step-title {
|
|
|
|
|
|
color: #19367A;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.step-number {
|
|
|
|
|
|
width: 48rpx;
|
|
|
|
|
|
height: 48rpx;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
background: #F5F5F5;
|
|
|
|
|
|
color: #979797;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
margin-right: 24rpx;
|
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.step-content {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
|
|
|
|
.step-title {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #606060;
|
|
|
|
|
|
margin-bottom: 8rpx;
|
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.step-desc {
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
color: #979797;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.step-line {
|
|
|
|
|
|
height: 32rpx;
|
|
|
|
|
|
width: 2rpx;
|
|
|
|
|
|
background: #F5F5F5;
|
|
|
|
|
|
margin-left: 24rpx;
|
|
|
|
|
|
margin-bottom: 32rpx;
|
|
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
|
|
background: #19367A;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.step-content-area {
|
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
|
border-radius: 24rpx;
|
|
|
|
|
|
padding: 32rpx;
|
|
|
|
|
|
box-shadow: 0rpx 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
|
|
|
|
|
|
|
|
|
|
.input-group {
|
|
|
|
|
|
margin-bottom: 24rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.label {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #606060;
|
|
|
|
|
|
margin-bottom: 12rpx;
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.input-wrapper {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
.unit {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 24rpx;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #979797;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.specs-list {
|
|
|
|
|
|
margin-bottom: 32rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.spec-item {
|
|
|
|
|
|
background: #F7F7F7;
|
|
|
|
|
|
border-radius: 16rpx;
|
|
|
|
|
|
padding: 24rpx;
|
|
|
|
|
|
margin-bottom: 24rpx;
|
|
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.spec-header {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-bottom: 24rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.spec-name {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #0B0E26;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.delete {
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
color: #FF4D4F;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.add-spec {
|
|
|
|
|
|
height: 88rpx;
|
|
|
|
|
|
background: #F7F7F7;
|
|
|
|
|
|
border-radius: 12rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
margin-bottom: 32rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.cuIcon-add {
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #19367A;
|
|
|
|
|
|
margin-right: 8rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
text {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #19367A;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.export-options {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
margin-bottom: 48rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.option-item {
|
|
|
|
|
|
width: 240rpx;
|
|
|
|
|
|
height: 240rpx;
|
|
|
|
|
|
background: #F7F7F7;
|
|
|
|
|
|
border-radius: 24rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
|
|
transform: scale(0.98);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.cuIcon-pic,
|
|
|
|
|
|
.cuIcon-file {
|
|
|
|
|
|
font-size: 64rpx;
|
|
|
|
|
|
color: #19367A;
|
|
|
|
|
|
margin-bottom: 16rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
text {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #606060;
|
|
|
|
|
|
|
|
|
|
|
|
&.desc {
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
color: #979797;
|
|
|
|
|
|
margin-top: 8rpx;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
padding: 0 16rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.btn-group {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
margin-top: 48rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
