81 lines
3.0 KiB
Vue
81 lines
3.0 KiB
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="number" trim="all" v-model="formData.price" :disabled="!canEdit" placeholder="请输入商品销售价" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="市场价" name="marketPrice">
|
||
<uni-easyinput type="number" trim="all" v-model="formData.marketPrice" :disabled="!canEdit"
|
||
placeholder="请输入商品销售价" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="成本价" name="costPrice">
|
||
<uni-easyinput type="number" 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="number" trim="all" v-model="formData.weight" :disabled="!canEdit" placeholder="请输入商品重量" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="体积(m³)" name="volume">
|
||
<uni-easyinput type="number" 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").goodsInfo.specType);
|
||
|
||
watch(() => props.skus, (newVal) => {
|
||
console.log(newVal)
|
||
// 如果是单规格,取 sku 第一条数据
|
||
if (!specType.value) {
|
||
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>
|