jdt-user/src/pages/product/addGoods/index.vue

<script lang="ts" setup>
import Taro from '@tarojs/taro';
import { Ref, ref } from 'vue';
import Upload from '../../../components/Upload.vue';
import RichEditor from '../../../components/RichEditor.vue';
import { addGood } from '@/api/product';

const ruleForm = ref(null) as Ref;

const basicData = ref({
  name: '',
  class_id: null,
  cover: [],
  rotation: [],
  profile: '',
  details: '',
  stock: null,
  number: null,
  market_num: null,
  state: 2,
});

const rules = {
  name: [
    {
      required: true,
      message: '请填写商品名称',
    },
  ],
  class_id: [
    {
      required: true,
      message: '请选择商品分类',
    },
  ],
  cover: [
    {
      required: true,
      message: '请上传商品封面',
      validator: value => {
        return value.length > 0;
      },
    },
  ],
  rotation: [
    {
      required: true,
      message: '请上传商品轮播图',
      validator: value => {
        return value.length > 0;
      },
    },
  ],
  profile: [
    {
      required: true,
      message: '请填写商品名称',
    },
  ],
  stock: [
    {
      required: true,
      message: '请填写商品库存',
    },
  ],
  number: [
    {
      required: true,
      message: '请填写商品价格',
    },
  ],
  market_num: [
    {
      required: true,
      message: '请填写商品市场价',
    },
  ],
};

const columnsClass = ref([]);

Taro.useLoad(options => {
  console.log(options);
});

const openGoodClass = ref(false);

const confirmClass = (val: any) => {
  console.log(val);
};

const ok = async () => {
  ruleForm.value.validate().then(({ valid, errors }: any) => {
    if (valid) {
      console.log('success', basicData.value);
    } else {
      console.log('error submit!!', errors);
    }
  });
};
</script>

<template>
  <view>
    {{ basicData }}
    <nut-backtop>
      <template v-slot:content>
        <nut-form ref="ruleForm" :model-value="basicData" :rules="rules">
          <nut-form-item label="商品分类:" required prop="class_id">
            <nut-input
              v-model="basicData.class_id"
              disabled
              placeholder="请选择商品分类"
              @click="openGoodClass = true" />
          </nut-form-item>
          <nut-form-item label="商品封面:" required prop="cover">
            <Upload v-model:list="basicData.cover" />
          </nut-form-item>
          <nut-form-item label="商品轮播图:" required prop="rotation">
            <Upload v-model:list="basicData.rotation" :max="10" />
          </nut-form-item>
          <nut-form-item label="商品名称:" required prop="name">
            <nut-input
              v-model="basicData.name"
              placeholder="请输入商品名称"
              type="text" />
          </nut-form-item>
          <nut-form-item label="商品价格:" required prop="number">
            <nut-input
              v-model="basicData.number"
              placeholder="请输入商品价格" />
          </nut-form-item>
          <nut-form-item label="市场价格:" required prop="market_num">
            <nut-input
              v-model="basicData.market_num"
              placeholder="请输入市场价格" />
          </nut-form-item>
          <nut-form-item label="商品库存:" required prop="stock">
            <nut-input v-model="basicData.stock" placeholder="请输入商品库存" />
          </nut-form-item>
          <nut-form-item label="商品简介:" required prop="profile">
            <nut-textarea
              class="textarea"
              v-model="basicData.profile"
              placeholder="请输入商品简介"
              type="text" />
          </nut-form-item>
          <nut-form-item label="上架状态:" prop="state">
            <nut-switch
              v-model="basicData.state"
              :active-value="1"
              :inactive-value="2" />
          </nut-form-item>
          <nut-form-item prop="details">
            <RichEditor
              :content="basicData.details"
              @input="val => (basicData.details = val)" />
          </nut-form-item>
          <nut-form-item prop="ok">
            <nut-button block type="primary" @click="ok">提交</nut-button>
          </nut-form-item>
        </nut-form>
      </template>
    </nut-backtop>
    <!--   商品分类     -->
    <nut-popup
      position="bottom"
      v-model:visible="openGoodClass"
      @close="openGoodClass = false">
      <nut-picker
        :columns="columnsClass"
        title="商品分类"
        @confirm="confirmClass"></nut-picker>
    </nut-popup>
  </view>
</template>

<style lang="scss">
.nut-input {
  border: none;
  color: #000;
}

.textarea {
  height: 100px;
  background-color: #fafafa;
  padding: 10px !important;
  border-radius: 10px;
}
</style>