wxapp/pages/list/edit.vue

<template>
  <view style="height:100vh;padding:20px">
    <u--form labelPosition="left" :model="model" :rules="rules" ref="form" errorType="toast">
      <u-form-item label="名称" prop="formData.name" borderBottom required>
        <u--input v-model="model.formData.name"></u--input>
      </u-form-item>
      <u-form-item label="品牌" prop="formData.brand" borderBottom required>
        <u--input v-model="model.formData.brand"></u--input>
      </u-form-item>

      <u-form-item label="规格" prop="formData.spec" borderBottom required>
        <u--input v-model="model.formData.spec"></u--input>
      </u-form-item>
      <u-form-item label="是否购买" prop="formData.is_buy" borderBottom>
        <u-radio-group v-model="model.formData.is_buy" placement="column">
          <u-radio label="已购买" :name="true"></u-radio>
          <u-radio label="未购买" :name="false"></u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item label="图片">
        <u-upload :fileList="model.formData.files" @afterRead="afterRead" @delete="deletePic" multiple></u-upload>
      </u-form-item>

      <u-form-item borderBottom>
        <up-button type="primary" shape="circle" @click="onSave()" text="保存"></up-button>
      </u-form-item>
    </u--form>
  </view>
</template>

<script setup>
import {
  ref,
  onMounted,
  computed,
  getCurrentInstance,
} from 'vue'
const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
const $upload = getCurrentInstance()?.appContext.config.globalProperties.$upload;
const $fileDomain = getCurrentInstance()?.appContext.config.globalProperties.$fileDomain;
let id
const search = async () => {
  const res = await $api(`/perfume/${id}`)
  if (res.errcode == 0) {
    if (res.data) model.value.formData = res.data
  }
}
onMounted(() => {
  form.value.setRules(rules);
  const crs = getCurrentPages()
  const params = crs[crs.length - 1].options
  if (params.id) {
    id = params.id
    search()
  }
})
const form = ref()
const model = ref({
  formData: {
    is_buy: true,
    files: []
  }
})
const rules = {
  'formData.name': {
    type: 'string',
    required: true,
    message: "请填写产品名称",
    trigger: ['blur']
  },
  'formData.brand': {
    type: 'string',
    required: true,
    message: "请填写品牌",
    trigger: ['blur']
  },
  'formData.spec': {
    type: 'string',
    required: true,
    message: "请填写规格",
    trigger: ['blur']
  }
}

// #region 图片上传
const afterRead = async (e) => {
  const uri = '/files/perfume/upload'
  const list = []
  for (const i of e.file) {
    const res = await $upload(uri, i.url)
    const obj = { url: `${$fileDomain}${res.uri}`, upload: true }
    list.push(obj)
  }
  model.value.formData.files = list;
}
const deletePic = async (e) => {
  const res = await $api('/perfume/deleteImg', 'DELETE', { url: e.file.url });
  if (res.errcode === 0) {
    // 前端
    model.value.formData.files.splice(e.index)
  }

}
// #endregion


// #region 验证与保存
const onSave = () => {
  form.value.validate().then(res => {
    save()
  }).catch(errors => {
    console.log(errors)
  })
}

const save = async () => {
  const data = model.value.formData;
  let openid = uni.getStorageSync('openid');
  let res;
  if (!id) {
    res = await $api('/perfume', 'POST', { ...data, openid })
  } else {
    res = await $api(`/perfume/${id}`, 'POST', { ...data, openid })
  }
  if (res.errcode == 0) {
    uni.showToast({
      title: '保存成功',
      icon: 'succcess',
    });
    uni.navigateBack()
  } else {
    uni.showToast({
      title: res.errmsg || '保存失败',
      icon: 'fail',
    });
  }
}
// #endregion
</script>

<style></style>