medical-mall/pages/mall/admin/product/product-management/edit.uvue

<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>
      </view>
      <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 }">
          <text class="step-txt">{{ step }}</text>
          <view v-if="index < steps.length - 1" class="step-line"></view>
        </view>
      </view>
    </view>

    <!-- 琛ㄥ崟鍐呭 -->
    <view class="form-card">
      <view class="form-item">
        <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>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="form-item">
        <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" />
            <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="input-wrap">
          <view class="input-box small">
            <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="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>
            <view class="upload-btn">
              <text class="icon">+</text>
            </view>
          </view>
          <text class="tip">寤鸿灏哄锛?00*800锛屽彲鎷栨嫿鏀瑰彉鍥剧墖椤哄簭锛岄粯璁ら寮犲浘涓轰富鍥撅紝鏈€澶氫笂浼?0寮?/text>
        </view>
      </view>

      <view class="form-item">
        <view class="label"><text>娣诲姞瑙嗛锛?/text></view>
        <view class="input-wrap">
          <view class="upload-btn v-btn">
            <text class="v-icon">馃摴</text>
          </view>
          <text class="tip">寤鸿鏃堕暱锛?~30绉掞紝瑙嗛瀹介珮姣?6:9</text>
        </view>
      </view>

      <view class="form-item">
        <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>
            </view>
            <text class="add-link">鏂板鍒嗙被</text>
          </view>
        </view>
      </view>

      <view class="form-item">
        <view class="label"><text>鍟嗗搧鏍囩锛?/text></view>
        <view class="input-wrap">
          <view class="mock-btn-select">閫夋嫨鏍囩</view>
        </view>
      </view>

      <view class="form-item">
        <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>
            </view>
            <view class="radio-simple">
              <text class="dot"></text>
              <text>涓嬫灦</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="footer-btns">
      <button class="btn-next">涓嬩竴姝?/button>
      <button class="btn-save">淇濆瓨</button>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'
import { openRoute } from '@/layouts/admin/store/adminNavStore.uts'

const activeStep = ref(0)
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',
  'https://img2.baidu.com/it/u=3025255470,3051061730&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
  'https://img2.baidu.com/it/u=3775079632,546700868&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
])

const categories = ref(['鐢熸椿瀹跺眳', '杩愬姩涓撳尯 / 361', '杩愬姩涓撳尯 / 鐗规', '杩愬姩涓撳尯 / 鍖瑰厠'])

function goBack() {
  openRoute('product_productList')
}
</script>

<style scoped lang="scss">
.product-edit-page {
  /* padding removed */
  
  
}

.page-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  .back-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    color: #666;
    cursor: pointer;
    .arrow { font-size: 14px; }
    .back-txt { font-size: 14px; }
  }
  .header-title { font-size: 16px; font-weight: bold; color: #333; }
}

.steps-card {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.step-items {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.step-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  .step-txt {
    font-size: 14px;
    color: #999;
    padding: 0 16px;
  }
  &.active .step-txt {
    color: #1890ff;
    font-weight: bold;
    border-bottom: 2px solid #1890ff;
    padding-bottom: 4px;
  }
  .step-line {
    width: 20px;
    height: 1px;
    background: #e8e8e8;
  }
}

.form-card {
  background: #fff;
  padding: 40px;
  border-radius: 4px;
}

.form-item {
  display: flex;
  flex-direction: row;
  margin-bottom: 30px;
  .label {
    width: 120px;
    text-align: right;
    font-size: 14px;
    color: #333;
    padding-top: 8px;
    margin-right: 20px;
    .required { color: #f5222d; margin-right: 4px; }
  }
  .input-wrap { flex: 1; }
}

.radio-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border: 1px solid #1890ff;
  border-radius: 4px;
  padding: 10px 16px;
  width: 160px;
  position: relative;
  .radio-circle {
    width: 14px; height: 14px; border: 1px solid #d9d9d9; border-radius: 50%;
    &.on { border-color: #1890ff; background: #1890ff; }
  }
  .radio-txt {
    display: flex;
    flex-direction: column;
    .main { font-size: 14px; color: #333; }
    .sub { font-size: 12px; color: #999; }
  }
  &::after {
    content: '鉁?;
    position: absolute;
    right: 0; bottom: 0;
    background: #1890ff; color: #fff; font-size: 10px; padding: 0 2px;
  }
}

.input-box {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 12px;
  width: 400px;
  height: 36px;
  &.small { width: 150px; }
  .real-input { flex: 1; font-size: 14px; color: #333; }
  .count { font-size: 12px; color: #bfbfbf; }
}

.image-uploader {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
  .img-item {
    width: 80px; height: 80px; position: relative;
    image { width: 100%; height: 100%; border-radius: 4px; }
    .img-close {
      position: absolute; right: -6px; top: -6px; width: 16px; height: 16px;
      background: rgba(0,0,0,0.5); color: #fff; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; font-size: 12px;
    }
  }
}

.upload-btn {
  width: 80px; height: 80px; border: 1px dashed #d9d9d9; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  .icon { font-size: 24px; color: #999; }
  &.v-btn { width: 64px; height: 64px; margin-bottom: 8px; .v-icon { font-size: 24px; } }
}

.tip { font-size: 12px; color: #999; }

.tag-selector {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  .tag-item {
    background: #f5f5f5; border: 1px solid #d9d9d9; padding: 2px 10px; border-radius: 4px;
    display: flex; flex-direction: row; align-items: center; gap: 6px;
    font-size: 14px; color: #666;
    .close { color: #999; cursor: pointer; }
  }
  .add-link { font-size: 14px; color: #1890ff; cursor: pointer; }
}

.mock-btn-select {
  border: 1px solid #d9d9d9; border-radius: 4px; padding: 6px 16px;
  font-size: 14px; color: #666; display: inline-block;
}

.radio-group-simple {
  display: flex;
  flex-direction: row;
  gap: 20px;
  .radio-simple {
    display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: #666;
    .dot { width: 14px; height: 14px; border: 1px solid #d9d9d9; border-radius: 50%; position: relative; }
    &.on {
      color: #1890ff;
      .dot { border-color: #1890ff; }
      .dot::after {
        content: ''; position: absolute; left: 3px; top: 3px; width: 6px; height: 6px;
        background: #1890ff; border-radius: 50%;
      }
    }
  }
}

.footer-btns {
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 16px;
  padding-bottom: 40px;
  .btn-next { background: #1890ff; color: #fff; border: none; padding: 0 24px; height: 40px; border-radius: 4px; }
  .btn-save { background: #fff; color: #1890ff; border: 1px solid #1890ff; padding: 0 24px; height: 40px; border-radius: 4px; }
}
</style>