jiangchengfeiyi-Web/src/views/Commodity/AddProduct.vue

<template>
<!--  添加商品图片-->
<div style="height: auto;margin-bottom: 10px;width: 480px;">
  <div style="font-size: 20px;margin-bottom: 10px">添加商品图片</div>
  <el-upload action="#" v-model:file-list="uploadedFiles" list-type="picture-card" :auto-upload="false" multiple="true">
    <el-icon><Plus /></el-icon>

    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>
<!--  添加图文描述-->
  <div style="margin-bottom: 10px;">
    <div style="font-size: 20px;margin-bottom: 10px">添加图文描述</div>
    <el-upload action="#" v-model:file-list="uploadedDescription" list-type="picture-card" :auto-upload="false" multiple="true">
      <el-icon><Plus /></el-icon>

      <template #file="{ file }">
        <div>
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
          <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="descriptionRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
        </div>
      </template>
    </el-upload>

    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</div>
<!--  表单-->
  <div style="position: absolute;right: 20px;top: 100px;max-width: 60%" >
    <el-form :model="form" label-width="auto" style="width: 750px" size="large">
      <el-form-item label="产品名称">
        <el-input v-model="form.name" />
      </el-form-item>

      <el-form-item label="产品价格">
        <el-input v-model="form.price" />
      </el-form-item>
      <el-form-item label="产品">
        <el-input v-model="form.quantity" />
      </el-form-item>
      <el-form-item label="是否为限定类产品" >
        <el-select v-model="form.region" placeholder="否">
          <el-option label="是" value="ture" />
          <el-option label="否" value="false" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.region=='ture' " label="节日名称">
        <el-input v-model="form.festivalName" />
      </el-form-item>
      <el-form-item label="产品类型" >
        <el-radio-group v-model="form.resource"  >
          <el-radio value="1">材料包</el-radio>
          <el-radio value="2">手持物</el-radio>
          <el-radio value="3">头饰</el-radio>
          <el-radio value="4">定制</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商品标签">
        <el-input v-model="form.label" type="textarea" placeholder=""/>
      </el-form-item>
      <el-form-item label="详情描述">
        <el-input v-model="form.desc" type="textarea" placeholder="产品尺寸，服务等"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">上架</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref,reactive } from 'vue';
import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
import type { UploadFile } from 'element-plus';

const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const disabled = ref(false);
const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
const handleRemove = (file: UploadFile) => {
  uploadedFiles.value = uploadedFiles.value.filter((f) => f.uid !== file.uid);
};
const descriptionRemove = (file: UploadFile) => {
  uploadedDescription.value = uploadedDescription.value.filter((f) => f.uid !== file.uid);
}
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};
const form = reactive({
  name:'',
  price:'',
  quantity:'',//产品数量
  region:'',//是否为限定
  festivalName:'',//节日名称
  resource:'',//类型
  label:[],//商品标签
  desc:'',//详情描述
})

const onSubmit = () => {
  console.log('submit!')
}
</script>