backend-mini-brand/subpages/newproduct/edit.vue

<template>
  <view class="edit-container">
    <common-header title="编辑产品" theme="newproduct" @back="goBack" />
    
    <view class="edit-content">
      <uni-forms ref="form" :model="formData" :rules="rules" label-width="120">
        <uni-forms-item label="产品名称" required name="name">
          <uni-easyinput v-model="formData.name" placeholder="请输入产品名称" />
        </uni-forms-item>
        
        <uni-forms-item label="产品分类" name="category">
          <uni-data-select 
            v-model="formData.category" 
            :localdata="categoryOptions"
            placeholder="请选择产品分类" />
        </uni-forms-item>
        
        <uni-forms-item label="产品价格" name="price">
          <uni-easyinput v-model="formData.price" placeholder="请输入产品价格" type="number" />
        </uni-forms-item>
        
        <uni-forms-item label="产品描述" name="description">
          <uni-easyinput 
            v-model="formData.description" 
            type="textarea" 
            placeholder="请输入产品描述"
            :auto-height="true" />
        </uni-forms-item>
        
        <uni-forms-item label="产品特色" name="features">
          <uni-easyinput 
            v-model="formData.features" 
            type="textarea" 
            placeholder="请输入产品特色"
            :auto-height="true" />
        </uni-forms-item>
        
        <uni-forms-item label="上线时间" name="launchTime">
          <uni-datetime-picker v-model="formData.launchTime" />
        </uni-forms-item>
        
        <uni-forms-item label="产品状态" name="status">
          <uni-data-select 
            v-model="formData.status" 
            :localdata="statusOptions"
            placeholder="请选择产品状态" />
        </uni-forms-item>
      </uni-forms>
      
      <view class="form-actions">
        <uni-button type="default" @click="goBack">取消</uni-button>
        <uni-button type="primary" @click="submitForm" :loading="submitting">保存</uni-button>
      </view>
    </view>
  </view>
</template>

<script>
import CommonHeader from '@/components/common-header/common-header.vue'

export default {
  name: 'NewProductEdit',
  components: {
    CommonHeader
  },
  
  data() {
    return {
      productId: null,
      formData: {
        name: '',
        category: '',
        price: '',
        description: '',
        features: '',
        launchTime: '',
        status: 0
      },
      rules: {
        name: {
          rules: [{ required: true, errorMessage: '请输入产品名称' }]
        }
      },
      categoryOptions: [
        { value: 'liquor', text: '白酒' },
        { value: 'wine', text: '红酒' },
        { value: 'beer', text: '啤酒' },
        { value: 'cocktail', text: '鸡尾酒' },
        { value: 'other', text: '其他' }
      ],
      statusOptions: [
        { value: 0, text: '待上线' },
        { value: 1, text: '已上线' },
        { value: 2, text: '审核中' }
      ],
      submitting: false
    }
  },
  
  onLoad(option) {
    const { id } = option
    if (id) {
      this.productId = id
      this.getProductDetail(id)
    }
  },
  
  methods: {
    async getProductDetail(id) {
      try {
        // TODO: Replace with actual API call
        const response = await this.$http.get(`/brewery/newproduct/${id}`)
        const data = response.data || {}
        this.formData = {
          name: data.name || '',
          category: data.category || '',
          price: data.price || '',
          description: data.description || '',
          features: data.features || '',
          launchTime: data.launchTime || '',
          status: data.status || 0
        }
      } catch (error) {
        console.error('获取产品详情失败:', error)
        this.$modal.showToast('获取产品详情失败')
      }
    },
    
    async submitForm() {
      try {
        // 表单验证
        const valid = await this.$refs.form.validate()
        if (!valid) return
        
        this.submitting = true
        
        // TODO: Replace with actual API call
        const response = await this.$http.put(`/brewery/newproduct/${this.productId}`, this.formData)
        
        this.$modal.showToast('保存成功')
        
        // 返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
        
      } catch (error) {
        console.error('保存失败:', error)
        this.$modal.showToast('保存失败')
      } finally {
        this.submitting = false
      }
    },
    
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-container {
  min-height: 100vh;
  background: #f5f7fa;
}

.edit-content {
  padding: 20rpx;
}

.form-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 60rpx;
  padding: 0 20rpx;
}
</style>