cfc/cfc-frontend/pages/vendor/product-edit/product-edit.vue

<template>
  <view class="container">
    <view class="form-section">
      <view class="form-item">
        <text class="form-label">商品名称 *</text>
        <input class="form-input" v-model="form.name" placeholder="请输入商品名称" />
      </view>

      <view class="form-item">
        <text class="form-label">商品类型 *</text>
        <picker class="form-picker" :value="typeIndex" :range="typeOptions" range-key="label" @change="onTypeChange">
          <view class="picker-value">{{ typeOptions[typeIndex].label }}</view>
        </picker>
      </view>

      <view class="form-item">
        <text class="form-label">价格（分）*</text>
        <input class="form-input" type="number" v-model="form.price" placeholder="价格，单位：分（0=免费）" />
      </view>

      <view class="form-item">
        <text class="form-label">库存 *</text>
        <input class="form-input" type="number" v-model="form.stock" placeholder="库存数量" />
      </view>

      <view class="form-item">
        <text class="form-label">封面图URL</text>
        <input class="form-input" v-model="form.coverImage" placeholder="图片地址，留空使用默认图" />
        <view v-if="form.coverImage" class="cover-preview">
          <image :src="form.coverImage" mode="aspectFill" class="cover-thumb" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">商品描述</text>
        <textarea class="form-textarea" v-model="form.description" placeholder="商品描述（可选）" />
      </view>
    </view>

    <view class="form-actions">
      <button class="btn-submit" :disabled="submitting" @click="onSubmit">
        {{ submitting ? '提交中...' : (isEdit ? '保存修改' : '立即发布') }}
      </button>
    </view>
  </view>
</template>

<script>
import { productCreate, productUpdate, productDetail } from '@/utils/api.js'

export default {
  data() {
    return {
      isEdit: false,
      productId: null,
      submitting: false,
      typeIndex: 0,
      typeOptions: [
        { label: '实物商品', value: 'physical' },
        { label: '数字商品', value: 'digital' },
        { label: '服务', value: 'service' },
        { label: '课程', value: 'course' },
        { label: '活动', value: 'activity' }
      ],
      form: {
        name: '',
        productType: 'physical',
        price: 0,
        stock: 0,
        coverImage: '',
        description: ''
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.isEdit = true
      this.productId = options.id
      uni.setNavigationBarTitle({ title: '编辑商品' })
      this.loadProduct(options.id)
    } else {
      uni.setNavigationBarTitle({ title: '发布商品' })
    }
  },
  methods: {
    onTypeChange(e) {
      this.typeIndex = e.detail.value
      this.form.productType = this.typeOptions[e.detail.value].value
    },
    loadProduct(id) {
      uni.showLoading({ title: '加载中...' })
      productDetail({ id: Number(id) }).then(res => {
        uni.hideLoading()
        if (res.code === 200 && res.data) {
          const p = res.data
          this.form.name = p.name || ''
          this.form.description = p.description || ''
          this.form.coverImage = p.coverImage || ''
          this.form.price = p.price || 0
          this.form.stock = p.stock || 0
          this.form.productType = p.productType || 'physical'
          // sync picker index
          var idx = this.typeOptions.findIndex(function(t) { return t.value === this.form.productType }, this)
          if (idx >= 0) this.typeIndex = idx
        } else {
          uni.showToast({ title: res.message || '加载失败', icon: 'none' })
        }
      }).catch(function() {
        uni.hideLoading()
        uni.showToast({ title: '加载失败', icon: 'none' })
      })
    },
    onSubmit() {
      if (!this.form.name || !this.form.name.trim()) {
        uni.showToast({ title: '请输入商品名称', icon: 'none' })
        return
      }
      if (this.form.price === '' || this.form.price === null) {
        uni.showToast({ title: '请输入价格', icon: 'none' })
        return
      }
      if (this.form.stock === '' || this.form.stock === null) {
        uni.showToast({ title: '请输入库存', icon: 'none' })
        return
      }
      this.submitting = true
      var data = {
        name: this.form.name.trim(),
        productType: this.form.productType,
        price: Number(this.form.price),
        stock: Number(this.form.stock),
        coverImage: this.form.coverImage || '',
        description: this.form.description || ''
      }
      var apiCall = this.isEdit
        ? productUpdate(Object.assign({ id: this.productId }, data))
        : productCreate(data)
      apiCall.then(function(res) {
        this.submitting = false
        if (res.code === 200) {
          uni.showToast({ title: this.isEdit ? '修改成功' : '发布成功', icon: 'success' })
          var _self = this
          setTimeout(function() {
            uni.navigateBack()
          }, 1500)
        } else {
          uni.showToast({ title: res.message || '操作失败', icon: 'none' })
        }
      }.bind(this)).catch(function() {
        this.submitting = false
        uni.showToast({ title: '网络错误', icon: 'none' })
      }.bind(this))
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 24rpx;
}
.form-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
}
.form-item {
  margin-bottom: 32rpx;
}
.form-item:last-child {
  margin-bottom: 0;
}
.form-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 12rpx;
}
.form-input {
  width: 100%;
  box-sizing: border-box;
  height: 80rpx;
  padding: 0 24rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 12rpx;
  font-size: 28rpx;
  background: #fafafa;
}
.form-textarea {
  width: 100%;
  box-sizing: border-box;
  height: 160rpx;
  padding: 16rpx 24rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 12rpx;
  font-size: 28rpx;
  background: #fafafa;
  resize: none;
}
.form-picker {
  height: 80rpx;
  padding: 0 24rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 12rpx;
  background: #fafafa;
  display: flex;
  align-items: center;
}
.picker-value {
  font-size: 28rpx;
  color: #333;
}
.cover-preview {
  margin-top: 12rpx;
}
.cover-thumb {
  width: 200rpx;
  height: 160rpx;
  border-radius: 8rpx;
  background: #f0f0f0;
}
.form-actions {
  padding: 0 24rpx;
}
.btn-submit {
  width: 100%;
  height: 88rpx;
  background: #F97316;
  color: #fff;
  font-size: 32rpx;
  font-weight: 700;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
.btn-submit:active {
  opacity: 0.85;
}
.btn-submit[disabled] {
  background: #ccc;
}
</style>