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

69
pages/mall/admin/product/product-management/edit.uvue
View File

@@ -1,14 +1,14 @@
<template>
<template>
<view class="product-edit-page">
<view class="page-header">
<view class="back-link" @click="goBack">
<text class="arrow">{"<"}</text>
<text class="back-txt">杩斿洖</text>
<text class="back-txt">返回</text>
</view>
<text class="header-title">缂栬緫鍟嗗搧</text>
<text class="header-title">编辑商品</text>
</view>
<!-- 姝ラ灞?-->
<!-- 步骤层 -->
<view class="steps-card">
<view class="step-items">
<view v-for="(step, index) in steps" :key="index" class="step-item" :class="{ active: activeStep === index }">
@@ -18,17 +18,17 @@
</view>
</view>
<!-- 琛ㄥ崟鍐呭 -->
<!-- 表单内容 -->
<view class="form-card">
<view class="form-item">
<view class="label"><text class="required">*</text><text>鍟嗗搧绫诲瀷锛?/text></view>
<view class="label"><text class="required">*</text><text>商品类型：</text></view>
<view class="input-wrap">
<view class="radio-group">
<view class="radio-item active">
<text class="radio-circle on"></text>
<view class="radio-txt">
<text class="main">鏅€氬晢鍝?/text>
<text class="sub">(鐗╂祦鍙戣揣)</text>
<text class="main">普通商品</text>
<text class="sub">(物流发货)</text>
</view>
</view>
</view>
@@ -36,82 +36,82 @@
</view>
<view class="form-item">
<view class="label"><text class="required">*</text><text>鍟嗗搧鍚嶇О锛?/text></view>
<view class="label"><text class="required">*</text><text>商品名称：</text></view>
<view class="input-wrap">
<view class="input-box">
<input class="real-input" value="UR2024澶忓鏂版濂宠澶嶅彜绾姘涘洿鎰熶竴瀛楄偐鐭T鎭よ～UWG440060" />
<input class="real-input" value="UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤衫UWG440060" />
<text class="count">36/80</text>
</view>
</view>
</view>
<view class="form-item">
<view class="label"><text class="required">*</text><text>鍗曚綅锛?/text></view>
<view class="label"><text class="required">*</text><text>单位：</text></view>
<view class="input-wrap">
<view class="input-box small">
<input class="real-input" value="浠? />
<input class="real-input" value="件" />
<text class="count">1/5</text>
</view>
</view>
</view>
<view class="form-item">
<view class="label"><text class="required">*</text><text>鍟嗗搧杞挱鍥撅細</text></view>
<view class="label"><text class="required">*</text><text>商品轮播图：</text></view>
<view class="input-wrap">
<view class="image-uploader">
<view v-for="(img, i) in carouselImages" :key="i" class="img-item">
<image :src="img" mode="aspectFill" />
<view class="img-close">脳</view>
<view class="img-close">×</view>
</view>
<view class="upload-btn">
<text class="icon">+</text>
</view>
</view>
<text class="tip">寤鸿灏哄锛?00*800锛屽彲鎷栨嫿鏀瑰彉鍥剧墖椤哄簭锛岄粯璁ら寮犲浘涓轰富鍥撅紝鏈€澶氫笂浼?0寮?/text>
<text class="tip">建议尺寸：800*800，可拖拽改变图片顺序，默认首张图为主图，最多上传10张</text>
</view>
</view>
<view class="form-item">
<view class="label"><text>娣诲姞瑙嗛锛?/text></view>
<view class="label"><text>添加视频：</text></view>
<view class="input-wrap">
<view class="upload-btn v-btn">
<text class="v-icon">馃摴</text>
<text class="v-icon">📹</text>
</view>
<text class="tip">寤鸿鏃堕暱锛?~30绉掞紝瑙嗛瀹介珮姣?6:9</text>
<text class="tip">建议时长：9~30秒，视频宽高比16:9</text>
</view>
</view>
<view class="form-item">
<view class="label"><text class="required">*</text><text>鍟嗗搧鍒嗙被锛?/text></view>
<view class="label"><text class="required">*</text><text>商品分类：</text></view>
<view class="input-wrap">
<view class="tag-selector">
<view v-for="tag in categories" :key="tag" class="tag-item">
<text>{{ tag }}</text>
<text class="close">脳</text>
<text class="close">×</text>
</view>
<text class="add-link">鏂板鍒嗙被</text>
<text class="add-link">新增分类</text>
</view>
</view>
</view>
<view class="form-item">
<view class="label"><text>鍟嗗搧鏍囩锛?/text></view>
<view class="label"><text>商品标签：</text></view>
<view class="input-wrap">
<view class="mock-btn-select">閫夋嫨鏍囩</view>
<view class="mock-btn-select">选择标签</view>
</view>
</view>
<view class="form-item">
<view class="label"><text>鍟嗗搧鐘舵€侊細</text></view>
<view class="label"><text>商品状态：</text></view>
<view class="input-wrap">
<view class="radio-group-simple">
<view class="radio-simple on">
<text class="dot"></text>
<text>涓婃灦</text>
<text>上架</text>
</view>
<view class="radio-simple">
<text class="dot"></text>
<text>涓嬫灦</text>
<text>下架</text>
</view>
</view>
</view>
@@ -119,8 +119,8 @@
</view>
<view class="footer-btns">
<button class="btn-next">涓嬩竴姝?/button>
<button class="btn-save">淇濆瓨</button>
<button class="btn-next">下一步</button>
<button class="btn-save">保存</button>
</view>
</view>
</template>
@@ -130,7 +130,7 @@ import { ref } from 'vue'
import { openRoute } from '@/layouts/admin/store/adminNavStore.uts'
const activeStep = ref(0)
const steps = ['鍩虹淇℃伅', '瑙勬牸搴撳瓨', '鍟嗗搧璇︽儏', '鐗╂祦璁剧疆', '浼氬憳浠?浣ｉ噾', '钀ラ攢璁剧疆', '鍏朵粬璁剧疆']
const steps = ['基础信息', '规格库存', '商品详情', '物流设置', '会员价/佣金', '营销设置', '其他设置']
const carouselImages = ref([
'https://img1.baidu.com/it/u=254065646,3100346083&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
@@ -138,7 +138,7 @@ const carouselImages = ref([
'https://img2.baidu.com/it/u=3775079632,546700868&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
])
const categories = ref(['鐢熸椿瀹跺眳', '杩愬姩涓撳尯 / 361', '杩愬姩涓撳尯 / 鐗规', '杩愬姩涓撳尯 / 鍖瑰厠'])
const categories = ref(['生活家居', '运动专区 / 361', '运动专区 / 特步', '运动专区 / 匹克'])
function goBack() {
openRoute('product_productList')
@@ -147,9 +147,9 @@ function goBack() {
<style scoped lang="scss">
.product-edit-page {
/* padding removed */
padding: 20px;
background-color: #f5f7f9;
min-height: 100vh;
}
.page-header {
@@ -249,7 +249,7 @@ function goBack() {
.sub { font-size: 12px; color: #999; }
}
&::after {
content: '鉁?;
content: '✓';
position: absolute;
right: 0; bottom: 0;
background: #1890ff; color: #fff; font-size: 10px; padding: 0 2px;
@@ -345,4 +345,3 @@ function goBack() {
.btn-save { background: #fff; color: #1890ff; border: 1px solid #1890ff; padding: 0 24px; height: 40px; border-radius: 4px; }
}
</style>