mobile-admin/store/goods/edit.vue

<template>
  <view class="content p-2 bg-gray-100">


    <wd-form ref="form" :model="model">
      <wd-cell-group border>

        <div class="bg-gray-100">
          <div class="bg-gray-100 rounded mb-2">
            <div class="bg-white flex flex-col pt-3 pl-3">
              <div class="name mb-2 text-xs">缩略图</div>
              <wd-upload :limit="1" :file-list="fileList" :action="action" :formData="formData" :header="header"
                @success="successImage" name="image" :before-remove="beforeRemove"></wd-upload>
            </div>
          </div>
        </div>

        <!-- <div class="bg-gray-100">
          <div class="bg-gray-100 rounded mb-2">
            <div class="bg-white flex flex-col pt-3 pl-3">
              <div class="name mb-2 text-xs">商品主图</div>
              <wd-upload :file-list="fileList" :action="action" :formData="formData" :header="header"
                @change="handleChange" name="image"></wd-upload>
            </div>
          </div>
        </div> -->

        <view class="h-2 bg-gray-100"></view>

        <view class=" p-3 rounded mb-2">
          <div class="name mb-2 text-xs">商品名称</div>
          <view class="bg-white px-3 py-1 rounded">
            <wd-textarea v-model="model.value" auto-height />
          </view>
        </view>

        <view class="h-2 bg-gray-100"></view>

        <view class="bg-gray-100  rounded mb-2">
          <div class="p-2 bg-white">
            <div class="name mb-2 text-xs">服务内容</div>
            <view class="bg-white px-3 py-1 rounded">
              <wd-input type="text" v-model="value" placeholder="例子: 正品保障,极速发货,7天退换货。多个请使用英文逗号“,”分隔"
                @change="handleChange" />
            </view>
          </div>
        </view>

        <view class="h-2 bg-gray-100"></view>

        <view class=" p-3 rounded mb-2">
          <div class="name mb-2 text-xs">商品重量</div>
          <view class="bg-white px-3 py-2 rounded flex items-center mb-4">
            <wd-input-number v-model="value" @change="handleChange" />
            <view class="text-xs from-neutral-300 ml-4">千克</view>
          </view>

          <wd-picker class="w-full" :columns="freightRules" label="运费模板" v-model="model.freight_id" />

        </view>

        <view class="h-2 bg-gray-100"></view>

        <view class="p-3 rounded mb-2">
          <div class="name mb-2 text-xs">商品状态</div>
          <view class="bg-white px-3 py-2 rounded flex items-center mb-4">
            <wd-switch v-model="model.status" />
          </view>
        </view>

        <view class="h-2 bg-gray-100"></view>

        <skuEdit></skuEdit>

      </wd-cell-group>
      <view class="footer mt-4">
        <wd-button type="primary" size="large" block>保存</wd-button>
      </view>
    </wd-form>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import system from '@/api/modules/system.js'
import goods from '@/api/store/goods.js'
import { useToast, useMessage } from '@/uni_modules/wot-design-uni'
import skuEdit from "./components/skuEdit.vue"

const fileList = ref([])

const beforeRemove = ({ file, resolve, index }) => {
  fileList.value.splice(index, 1)
  resolve(true)
}

const action = 'https://saasdemo.byin.vip/admin/system/uploadImage'
const token = uni.getStorageSync("token");
const header = {
  Authorization: `Bearer ${token}`
}
const formData = {
  parent_id: 0,
  type: "image",
}

function successImage(e) {
  fileList.value.push({
    url: e.file.url
  })
}

const model = ref({
  classify_list: [], // 商品分类组
  name: "", // 商品名称
  keywords: "", // 商品关键词
  sort: 1000,
  status: 0, // 商品状态
  freight_id: 0, //运费规则
  weight: 0, // 商品重量
  pic_url: "", // 商品缩略图
  pic_list: [], // 商品图组
  video: "", // 商品视频
  detail: "", // 图文详情
  use_sku: 0, // 是否使用规格
  sku_list: [], // 规格信息
  is_discount: 0, // 是否有折扣
  discount: 50, // 折扣比例（小数）
  dist_price: 0, // 分销价格
  limit: 0, // 限购
  is_check: 0, // 自定义核销佣金
  check_type: 0, // 佣金类型
  check_price: 0, // 佣金
})

const form = ref()

function handleSubmit1() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        showSuccess({
          msg: '校验通过'
        })
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}

const freightRules = ref([])
const GetfreightRules = () => {
  goods.freightRules().then(res => {
    freightRules.value = res.data.rows.map(item => {
      return {
        label: item.name,
        value: item.id
      }
    })
  })
}
GetfreightRules()
</script>

<style lang="scss"></style>