mall-app-t/pages/product/components/item.vue

<template>
  <div class="sku-item">
    <uni-forms label-width="176rpx" label-position="left">
      <template v-if="specType">
        <template v-for="item in formData.properties">
          <uni-forms-item :label="item.propertyName">
            <uni-easyinput type="text" :value="item.valueName" disabled />
          </uni-forms-item>
        </template>
      </template>

      <uni-forms-item label="商品封面图" name="picUrl" label-position="top">
        <p-uploader
          v-model:url="formData.picUrl"
          :readonly="!canEdit"
          fileMediatype="image"
          limit="1"
          mode="grid"
          :imageStyles="{ width: '168rpx', height: '168rpx' }"
        />
      </uni-forms-item>
      <uni-forms-item label="商品条码" name="barCode">
        <uni-easyinput
          type="text"
          trim="all"
          v-model="formData.barCode"
          :disabled="!canEdit"
          placeholder="请输入商品条码"
        />
      </uni-forms-item>
      <uni-forms-item label="销售价" name="price">
        <uni-easyinput
          type="digit"
          trim="all"
          v-model="formData.price"
          :disabled="!canEdit"
          placeholder="请输入商品销售价"
        />
      </uni-forms-item>
      <uni-forms-item label="市场价" name="marketPrice">
        <uni-easyinput
          type="digit"
          trim="all"
          v-model="formData.marketPrice"
          :disabled="!canEdit"
          placeholder="请输入商品销售价"
        />
      </uni-forms-item>
      <uni-forms-item label="成本价" name="costPrice">
        <uni-easyinput
          type="digit"
          trim="all"
          v-model="formData.costPrice"
          :disabled="!canEdit"
          placeholder="请输入商品销售价"
        />
      </uni-forms-item>
      <uni-forms-item label="库存" name="stock">
        <uni-easyinput
          type="number"
          trim="all"
          v-model="formData.stock"
          :disabled="!canEdit"
          placeholder="请输入商品库存"
        />
      </uni-forms-item>
      <uni-forms-item label="重量（kg）" name="weight">
        <uni-easyinput
          type="digit"
          trim="all"
          v-model="formData.weight"
          :disabled="!canEdit"
          placeholder="请输入商品重量"
        />
      </uni-forms-item>
      <uni-forms-item label="体积（m³）" name="volume">
        <uni-easyinput
          type="digit"
          trim="all"
          v-model="formData.volume"
          :disabled="!canEdit"
          placeholder="请输入商品体积"
        />
      </uni-forms-item>
    </uni-forms>
  </div>
</template>

<script setup>
import { ref, watch, computed, defineProps } from 'vue'
import peach from '@/peach'
import { canEdit } from '../js/sku'
const props = defineProps({
  skus: {
    type: Array,
    default: () => [],
  },
})
const formData = ref({})
const specType = computed(() => peach.$store('trade').specType)

watch(
  () => props.skus,
  (newVal) => {
    // 如果是单规格，取 sku 第一条数据
    if (!specType.value) {
      if (newVal) formData.value = newVal[0] ?? {}
      return
    }
    formData.value = newVal ?? {}
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.sku-item {
  margin: 40rpx;
  padding-top: 40rpx;
}

.sku-item:first-child {
  border-top: 1px solid var(--ui-BG-Main);
}
</style>