wxapp_shuibei/pages/merchantCenter/releaseProduct.vue

<template>
  <view class="container">
    <view class="form-container">
      <up-form
          labelPosition="left"
          :model="formData"
          :rules="rules"
          ref="formRef"
          :labelWidth="100"
      >
        <!-- 商品分类 -->
        <view class="card-title">商品分类</view>
        <up-form-item
            class="form-item"
            label="商品分类"
            prop="categoryIds"
            :borderBottom="false"
            @click="showCategory = true"
            :required="true"
        >
          <up-input
              v-model="formData.categoryDisplayName"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择商品分类"
              inputAlign="right"
              border="none"
          ></up-input>
          <template #right>
            <up-icon name="arrow-right"></up-icon>
          </template>
        </up-form-item>

        <!-- 商品信息 -->
        <view class="card-title">商品信息</view>
        <up-form-item
            label="商品名称"
            prop="storeName"
            :borderBottom="false"
            :required="true"
        >
          <up-input
              v-model="formData.storeName"
              placeholder="请输入商品名称"
              inputAlign="right"
              border="none"
          ></up-input>
        </up-form-item>
        <up-form-item
            label="商品关键字"
            prop="keyword"
            :borderBottom="false"
            :required="true"
        >
          <up-input
              v-model="formData.keyword"
              placeholder="请输入商品关键字"
              inputAlign="right"
              border="none"
          ></up-input>
        </up-form-item>
        <up-form-item
            label="商品简介"
            prop="storeInfo"
            :borderBottom="false"
            :required="true"
        >
          <up-textarea
              v-model="formData.storeInfo"
              placeholder="请输入商品简介"
              inputAlign="right"
              border="none"
          ></up-textarea>
        </up-form-item>
        <up-form-item
            label="单位"
            prop="unitName"
            :borderBottom="false"
            :required="true"
        >
          <up-input
              v-model="formData.unitName"
              placeholder="请输入单位"
              inputAlign="right"
              border="none"
          ></up-input>
        </up-form-item>

        <!-- 图片上传 -->
        <view class="upload-section">
          <view class="upload-item">
            <view class="upload-label"><text class="required">*</text>商品封面图</view>
            <up-upload
                :fileList="previewImages"
                @afterRead="async (e) => {
                  await afterRead(e);
                  getImage();
                }"
                @delete="onPreviewImageDelete"
                name="preview"
                max-count="1"
                :maxSize="5 * 1024 * 1024"
                accept=".png,.jpg,.jpeg"
            >
              <view class="upload-btn">
                <up-icon name="plus" size="20" color="#ccc"></up-icon>
                <text class="upload-tip">点击上传</text>
              </view>
            </up-upload>
            <text class="format-tip">支持上传PNG、JPG格式的图片，每张不超过5MB。</text>
          </view>
        </view>

        <view class="upload-section">
          <view class="upload-item">
            <view class="upload-label"><text class="required">*</text>商品图片</view>
            <up-upload
                :fileList="productImages"
                @afterRead="async (e) => {
                  await afterRead(e);
                  getImageProduct();
                }"
                @delete="onProductImageDelete"
                name="product"
                multiple
                :maxCount="10"
                :maxSize="5 * 1024 * 1024"
                accept=".png,.jpg,.jpeg"
            >
              <view class="upload-btn">
                <up-icon name="plus" size="20" color="#ccc"></up-icon>
                <text class="upload-tip">点击上传</text>
              </view>
            </up-upload>
            <text class="format-tip">支持上传PNG、JPG格式图片，每张不超过5MB，最多可上传5张。</text>
          </view>
        </view>

        <!-- 商品属性 -->
        <view class="card-title">商品属性</view>
        <up-form-item
            label="材质"
            prop="metalType"
            :borderBottom="false"
            :required="true"
        >
          <up-radio-group
              v-model="formData.metalType"
              placement="row"
          >
            <up-radio
                :customStyle="{marginRight: '20rpx'}"
                v-for="(item, index) in materialList"
                :key="index"
                :label="item.name"
                :name="item.code"
            >
            </up-radio>
          </up-radio-group>
        </up-form-item>

        <up-form-item
            label="重量"
            prop="weight"
            :borderBottom="false"
            :required="true"
        >
          <up-input
              v-model="formData.weight"
              placeholder="请输入重量"
              inputAlign="right"
              border="none"
              type="digit"
          ></up-input>
          <template #right>
            <text class="unit">g</text>
          </template>
        </up-form-item>

        <!-- 商品描述 -->
        <view class="card-title">商品描述</view>
        <view class="editor-section">
          <view class="editor-header">
            <text class="editor-label"><text class="required">*</text>商品描述</text>
            <text class="word-count">{{ descriptionText.length }}/500</text>
          </view>
          <sp-editor
              editorId="editor"
              :toolbar-config="toolbarConfig"
              :readOnly="readOnly"
              @input="onEditorInput"
              @upinImage="onUpinImage"
              @init="onEditorInit"
              @overMax="onOverMax"
          ></sp-editor>
        </view>

        <!-- 价格设置 -->
        <view class="card-title">价格设置</view>
        <up-form-item
            label="工费"
            prop="laborCost"
            :borderBottom="false"
            :required="true"
        >
          <up-input
              v-model="formData.laborCost"
              placeholder="请输入工费"
              inputAlign="right"
              border="none"
              type="digit"
          ></up-input>
          <template #right>
            <text class="unit">元/g</text>
          </template>
        </up-form-item>

        <up-form-item
            label="附加费"
            prop="additionalFee"
            :borderBottom="false"
            :required="true"
        >
          <up-input
              v-model="formData.additionalFee"
              placeholder="请输入附加费"
              inputAlign="right"
              border="none"
              type="digit"
          ></up-input>
          <template #right>
            <text class="unit">元</text>
          </template>
        </up-form-item>
        <up-form-item
            class="form-item"
            label="运费模板"
            prop="tempIds"
            :borderBottom="false"
            @click="showTemp = true"
            :required="true"
        >
          <up-input
              v-model="formData.tempName"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择运费模板"
              inputAlign="right"
              border="none"
          ></up-input>
          <template #right>
            <up-icon name="arrow-right"></up-icon>
          </template>
        </up-form-item>
        <up-form-item
            label="库存"
            prop="stock"
            :borderBottom="false"
            :required="true"
        >
          <up-input
              v-model="formData.stock"
              placeholder="请输入库存"
              inputAlign="right"
              border="none"
              type="number"
          ></up-input>
        </up-form-item>
        <up-form-item
            label="商品编号"
            prop="barCode"
            :borderBottom="false"
            :required="true"
        >
          <up-input
              v-model="formData.barCode"
              placeholder="请输入商品编号"
              inputAlign="right"
              border="none"
              type="number"
          ></up-input>
        </up-form-item>
        <view class="upload-section">
          <view class="upload-item">
            <view class="upload-label"><text class="required">*</text>规格图片</view>
            <up-upload
                :fileList="productImagesGg"
                @afterRead="async (e) => {
                  await afterRead(e);
                  getImageProductGg();
                }"
                @delete="onProductImageGgDelete"
                name="productGg"
                :maxCount="1"
                :maxSize="5 * 1024 * 1024"
                accept=".png,.jpg,.jpeg"
            >
              <view class="upload-btn">
                <up-icon name="plus" size="20" color="#ccc"></up-icon>
                <text class="upload-tip">点击上传</text>
              </view>
            </up-upload>
            <text class="format-tip">支持上传PNG、JPG格式图片，每张不超过5MB，最多可上传5张。</text>
          </view>
        </view>
        <up-form-item
            label="商品排序"
            prop="sort"
            :borderBottom="false"
        >
          <up-input
              v-model="formData.sort"
              placeholder="请输入排序号"
              inputAlign="right"
              border="none"
              type="number"
          ></up-input>
        </up-form-item>
      </up-form>
    </view>

    <!-- 发布按钮 -->
    <view class="btn-view">
      <button class="submit" @click="submitForm">立即发布</button>
    </view>

    <!-- 类目选择弹窗 -->
    <up-popup
        :show="showCategory"
        @close="showCategory = false"
        mode="bottom"
        round="20"
        :closeable="true"
    >
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">选择商品分类</text>
        </view>

        <category-selector
            :categoryList="categoryData"
            :selectedIds="formData.categoryIds"
            @change="onCategoryChange"
            ref="categoryRef"
        />

        <view class="popup-actions">
          <button class="action-btn cancel" @click="showCategory = false">取消</button>
          <button class="action-btn confirm" @click="confirmCategory">确定</button>
        </view>
      </view>
    </up-popup>
<!--    运费模板-->
    <up-picker :show="showTemp" v-model="formData.tempIds"  :columns="tempColumns" keyName="name" valueName ="id"
               confirmColor="#F8C008"
               @close="showTemp = false" @confirm="tempConfirm" @cancel="showTemp = false"></up-picker>
  </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { onShow } from "@dcloudio/uni-app";
import { productCategory,productSave,templatesList } from "@/api/merchant";
import CategorySelector from '@/components/CategorySelector';
import { useAppStore } from "@/stores/app";
import { useImageUpload } from "@/hooks/useImageUpload";
import { useToast } from "@/hooks/useToast";
const { Toast } = useToast();
const { imageList, afterRead, deletePic, uploadLoading } = useImageUpload({
  pid: 1,
  model: "product",
});
const appStore = useAppStore();
const merchantInfo = appStore.userInfo.merchant

// 表单数据
const formData = ref({
  categoryIds: [], // 选中的分类ID数组
  categoryDisplayName: '', // 显示的分类名称
  tempName: '', // 显示的运费模板名称
  tempIds: [],
  storeName: '',
  keyword: '',
  storeInfo: '',
  unitName: '',
  metalType: '',
  weight: '',
  laborCost: '',
  additionalFee: '',
  sort: '',
  content: '',
  stock: '',
  barCode: ''
});

// 编辑器相关
const editorIns = ref(null);
const readOnly = ref(false);
const descriptionText = ref('');
const toolbarConfig = ref({
  iconSize: '20px',
  iconColumns: 10,
  excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck']
});

// 分类相关
const showCategory = ref(false);
const categoryData = ref([]);
const categoryRef = ref();

const showTemp = ref(false);
const tempColumns = ref([])
// 图片列表
const previewImages = ref([]);
const productImages = ref([]);
const productImagesGg = ref([]);

// 材质列表
const materialList = ref([
  { name: '黄金',code:'au' },
  { name: '铂金' ,code:'pt'},
  { name: '白银',code:'ag' }
]);

// 验证规则
const rules = ref({
  categoryIds: {
    type: 'array',
    required: true,
    message: '请选择商品分类',
    trigger: ['change']
  },
  storeName: {
    type: 'string',
    required: true,
    message: '请输入商品名称',
    trigger: ['blur', 'change']
  },
  keyword: {
    type: 'string',
    required: true,
    message: '请输入商品关键字',
    trigger: ['blur', 'change']
  },
  storeInfo: {
    type: 'string',
    required: true,
    message: '请输入商品关键字',
    trigger: ['blur', 'change']
  },
  unitName: {
    type: 'string',
    required: true,
    message: '请输入单位',
    trigger: ['blur', 'change']
  },
  tempIds: {
    type: 'array',
    required: true,
    message: '请选择运费模板',
    trigger: ['blur', 'change']
  },
  metalType: {
    type: 'string',
    required: true,
    message: '请选择材质',
    trigger: ['change']
  },
  weight: {
    type: 'string',
    required: true,
    pattern: /^\d+(\.\d+)?$/,
    message: '重量必须是数字，可以是小数',
    trigger: ['blur', 'change']
  },
  laborCost: {
    type: 'string',
    required: true,
    pattern: /^\d+(\.\d+)?$/,
    message: '工费必须是数字，可以是小数',
    trigger: ['blur', 'change']
  },
  additionalFee: {
    type: 'string',
    required: true,
    pattern: /^\d+(\.\d+)?$/,
    message: '附加费必须是数字，可以是小数',
    trigger: ['blur', 'change']
  },
  sort: {
    type: 'string',
    pattern: /^\d*$/,
    message: '排序号必须是整数',
    trigger: ['blur', 'change']
  },
  stock: {
    type: 'string',
    required: true,
    pattern: /^\d*$/,
    message: '库存必须是整数',
    trigger: ['blur', 'change']
  },
  barCode: {
    type: 'string',
    required: true,
    pattern: /^\d*$/,
    message: '商品编号必须是整数',
    trigger: ['blur', 'change']
  },
});

// 页面加载
onShow(() => {
  getProductCategory();
  getTempData();
})

// 获取商品分类
async function getProductCategory(){
  let obj = {
    type: 1,
    status: -1
  }
  try {
    const { data } = await productCategory(obj)
    console.log('原始分类数据:', data);

    const newArr = []
    data.forEach((value, index) => {
      newArr[index] = value
      if (value.child) newArr[index].child = value.child.filter(item => item.status === true)
    })
    // 过滤商品分类设置为隐藏的子分类不出现在树形列表里
    categoryData.value = newArr.filter(item => item.code !== 'bb_mall')
    console.log('转换后的分类数据:', categoryData.value);

  } catch (error) {
    console.error('获取商品分类失败:', error);
    uni.showToast({ title: '获取分类失败', icon: 'none' });
  }
}

async function getTempData(){
  let obj = {
    page:1,
    limit:9999
  }
  try {
    const { data } = await templatesList()
    tempColumns.value[0] = data.list;

  } catch (error) {
    console.error('获取商品分类失败:', error);
    uni.showToast({ title: '获取分类失败', icon: 'none' });
  }
}
function tempConfirm(obj){
  formData.value.tempId = obj.value[0].id;
  formData.value.tempName = obj.value[0].name;
  showTemp.value = false;
  // setTimeout(() => {
  //   if (formRef.value) {
  //     formRef.value.validateField('tempId').catch(() => {});
  //   }
  // }, 100);
}
// 分类选择变化
const onCategoryChange = (result) => {
  console.log('分类选择变化:', result);
  // 这里只更新显示，不直接更新表单数据，等用户点击确定
}

// 确认分类选择
const confirmCategory = () => {
  if (categoryRef.value) {
    const selectedIds = categoryRef.value.getSelectedIds()

    if (selectedIds.length === 0) {
      uni.showToast({ title: '请至少选择一个分类', icon: 'none' })
      return
    }

    // 更新表单数据
    formData.value.categoryIds = selectedIds
    formData.value.categoryDisplayName = getCategoryDisplayName(selectedIds)

    showCategory.value = false
    console.log('最终选中的分类ID:', selectedIds)
  }
}

// 根据选中的ID生成显示名称
const getCategoryDisplayName = (selectedIds) => {
  if (selectedIds.length === 0) return ''

  const names = []
  selectedIds.forEach(id => {
    // 查找一级分类
    const firstLevel = categoryData.value.find(item => item.id === id)
    if (firstLevel) {
      names.push(firstLevel.name)
    } else {
      // 查找二级分类
      for (const parent of categoryData.value) {
        if (parent.child) {
          const secondLevel = parent.child.find(child => child.id === id)
          if (secondLevel) {
            names.push(`${parent.name}-${secondLevel.name}`)
          }
        }
      }
    }
  })

  return names.join('、')
}

async function getImage() {
  console.log(imageList.value)
  if (imageList.value.length > 0) {
    if (imageList.value[0].status == "success") {
      previewImages.value = imageList.value;
      // change();
    } else {
      Toast({ title: "上传失败" });
    }
  }
  imageList.value = [];
}
async function getImageProduct() {
  console.log(imageList.value)
  if (imageList.value.length > 0) {
    if (imageList.value[0].status == "success") {
      productImages.value = [...productImages.value,...imageList.value];
      // change();
    } else {
      Toast({ title: "上传失败" });
    }
  }
  imageList.value = [];
}
async function getImageProductGg() {
  console.log(imageList.value)
  if (imageList.value.length > 0) {
    if (imageList.value[0].status == "success") {
      productImagesGg.value = imageList.value;
      // change();
    } else {
      Toast({ title: "上传失败" });
    }
  }
  imageList.value = [];
}
const onPreviewImageDelete =(e) => {
  previewImages.value.splice(e.index, 1);
};

const onProductImageDelete = (e) => {
  productImages.value.splice(e.index, 1);
};
const onProductImageGgDelete = (e) => {
  productImagesGg.value.splice(e.index, 1);
};

// 编辑器相关方法
const onEditorInput = (e) => {
  descriptionText.value = e.text || '';
  formData.value.content = e.html || '';
};

const onEditorInit = (editor) => {
  editorIns.value = editor;
};

const onOverMax = (e) => {
  uni.showToast({ title: '内容长度超出限制', icon: 'none' });
};

const onUpinImage = (tempFiles, editorCtx) => {
  const filePath = tempFiles[0].tempFilePath || tempFiles[0].path;
  editorCtx.insertImage({
    src: filePath,
    width: '80%',
    success: () => {
      uni.showToast({ title: '图片插入成功', icon: 'success' });
    }
  });
};

// 表单验证和提交
const formRef = ref(null);

const validateForm = async () => {
  try {
    const valid = await formRef.value.validate();
    return valid;
  } catch (error) {
    console.error('表单验证失败:', error);
    return false;
  }
};

const submitForm = async () => {
  console.log(formData.value)
  // 检查商品描述
  if (!descriptionText.value.trim()) {
    uni.showToast({ title: '请输入商品描述', icon: 'none' });
    return;
  }

  // 检查图片上传
  if (previewImages.value.length === 0) {
    uni.showToast({ title: '请上传商品预览图', icon: 'none' });
    return;
  }

  if (productImages.value.length === 0) {
    uni.showToast({ title: '请上传商品图片', icon: 'none' });
    return;
  }

  if (productImagesGg.value.length === 0) {
    uni.showToast({ title: '请上传商品规格图片', icon: 'none' });
    return;
  }

  // 验证数字字段
  if (!/^\d+(\.\d+)?$/.test(formData.value.weight)) {
    uni.showToast({ title: '重量格式不正确', icon: 'none' });
    return;
  }

  if (!/^\d+(\.\d+)?$/.test(formData.value.laborCost)) {
    uni.showToast({ title: '工费格式不正确', icon: 'none' });
    return;
  }

  if (!/^\d+(\.\d+)?$/.test(formData.value.additionalFee)) {
    uni.showToast({ title: '附加费格式不正确', icon: 'none' });
    return;
  }

  if (!/^\d+$/.test(formData.value.stock)) {
    uni.showToast({ title: '库存必须是整数', icon: 'none' });
    return;
  }
  if (!/^\d+$/.test(formData.value.barCode)) {
    uni.showToast({ title: '商品编号必须是整数', icon: 'none' });
    return;
  }

  if (formData.value.sort && !/^\d+$/.test(formData.value.sort)) {
    uni.showToast({ title: '排序号必须是整数', icon: 'none' });
    return;
  }

  const valid = await validateForm();
  if (valid) {
    const submitData = {
      ...formData.value
    };
    submitData.cateId =formData.value.categoryIds.join(',');
    submitData.image =previewImages.value[0].url;
    const urlString = productImages.value.map(item => item.url).join(',');
    submitData.sliderImage =urlString;
    submitData.merchantId =parseInt(merchantInfo.id);
    submitData.specType = 0;
    submitData.isSub = false;
    submitData.attr =[
      {
        "attrName":"规格",
        "attrValues": "默认",
        "id": 0
      }
    ];
    submitData.attrValue =[
      {
        additionalAmount :formData.value.additionalFee,
        attrValue:"{\"规格\":\"默认\"}",
        barCode : formData.value.barCode,
        image : productImagesGg.value[0].url,
        price : formData.value.laborCost,
        stock : formData.value.stock,
        weight :formData.value.weight
      }
    ];
    console.log('提交数据:', submitData);
    const {data} = await productSave(submitData);
    uni.showToast({ title: '发布成功', icon: 'success' });

  }
};
</script>

<style scoped lang="scss">
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 140rpx;
}

.form-container {
  padding: 30rpx;
}

.upload-section {
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
}

.upload-item {
  margin-bottom: 40rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.upload-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  position: relative;
}

.required {
  position: absolute;
  left: -9px;
  color: #f56c6c;
  line-height: 20px;
  font-size: 20px;
  top: 3px;
}

.upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200rpx;
  height: 200rpx;
  border: 2rpx dashed #ccc;
  border-radius: 12rpx;
  background: #fafafa;
}

.upload-tip {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.format-tip {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-top: 15rpx;
}

.card-title {
  font-size: 36rpx;
  color: #333;
  line-height: 60rpx;
  margin-bottom: 20rpx;
}

:deep(.u-form-item) {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 8rpx 30rpx;
  box-sizing: border-box;
  margin-bottom: 20rpx;
}

:deep(.u-form-item__body__left__content__label) {
  font-size: 28rpx !important;
  color: #333 !important;
}

:deep(.u-radio-group--row) {
  justify-content: flex-end;
}

.btn-view {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #FFF;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
}

.submit {
  height: 88rpx;
  line-height: 88rpx;
  background: #F8C008;
  border-radius: 16rpx;
  font-size: 32rpx;
  color: #333333;
  border: none;
  width: 100%;

  &:active {
    opacity: 0.8;
  }
}

.unit {
  color: #999;
  font-size: 28rpx;
  margin-left: 10rpx;
}

/* 编辑器样式 */
.editor-section {
  background: white;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.editor-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.word-count {
  font-size: 24rpx;
  color: #999;
}

:deep(.sp-editor) {
  min-height: 400rpx;
}

/* 弹窗样式 */
.popup-content {
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.popup-header {
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid #f0f0f0;
  position: relative;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.popup-actions {
  display: flex;
  padding: 30rpx;
  gap: 20rpx;
}

.action-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  border: none;

  &.cancel {
    background: #f0f0f0;
    color: #666;
  }

  &.confirm {
    background: #F8C008;
    color: #333;
  }
}

:deep(.u-tabs__wrapper__nav__line){
  background-color: #F8C008 !important;
}
:deep(.u-form-item__body__right__message){
  text-align: right;
}
:deep(.u-textarea__field){
  text-align: right;
}
</style>