liaofei
/
mall-app-t
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(商品属性): 多 sku

This commit is contained in:
unknown 2024-06-07 02:05:33 +08:00
parent c188d92c11
commit 900936db56
8 changed files with 198 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
pages/product/components/item.vue
View File

@ -1,48 +1,72 @@
<template>
<div class="sku-item">
<uni-forms label-width="160" label-position="top">
<uni-forms-item label="商品封面图" name="picUrl">
<p-uploader
v-model:url="formData.picUrl"
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" placeholder="请输入商品条码" />
</uni-forms-item>
<uni-forms-item label="销售价" name="price">
<uni-easyinput type="number" trim="all" v-model="formData.price" placeholder="请输入商品销售价" />
</uni-forms-item>
<uni-forms-item label="市场价" name="marketPrice">
<uni-easyinput type="number" trim="all" v-model="formData.marketPrice" placeholder="请输入商品销售价" />
</uni-forms-item>
<uni-forms-item label="成本价" name="costPrice">
<uni-easyinput type="number" trim="all" v-model="formData.costPrice" placeholder="请输入商品销售价" />
</uni-forms-item>
<uni-forms-item label="库存" name="stock">
<uni-easyinput type="number" trim="all" v-model="formData.stock" placeholder="请输入商品库存" />
</uni-forms-item>
<uni-forms-item label="重量（kg）" name="weight">
<uni-easyinput type="number" trim="all" v-model="formData.weight" placeholder="请输入商品重量" />
</uni-forms-item>
<uni-forms-item label="体积（m³）" name="volume">
<uni-easyinput type="number" trim="all" v-model="formData.volume" placeholder="请输入商品体积" />
</uni-forms-item>
</uni-forms>
</div>
<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" 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" placeholder="请输入商品条码" />
</uni-forms-item>
<uni-forms-item label="销售价" name="price">
<uni-easyinput type="number" trim="all" v-model="formData.price" placeholder="请输入商品销售价" />
</uni-forms-item>
<uni-forms-item label="市场价" name="marketPrice">
<uni-easyinput type="number" trim="all" v-model="formData.marketPrice" placeholder="请输入商品销售价" />
</uni-forms-item>
<uni-forms-item label="成本价" name="costPrice">
<uni-easyinput type="number" trim="all" v-model="formData.costPrice" placeholder="请输入商品销售价" />
</uni-forms-item>
<uni-forms-item label="库存" name="stock">
<uni-easyinput type="number" trim="all" v-model="formData.stock" placeholder="请输入商品库存" />
</uni-forms-item>
<uni-forms-item label="重量（kg）" name="weight">
<uni-easyinput type="number" trim="all" v-model="formData.weight" placeholder="请输入商品重量" />
</uni-forms-item>
<uni-forms-item label="体积（m³）" name="volume">
<uni-easyinput type="number" trim="all" v-model="formData.volume" placeholder="请输入商品体积" />
</uni-forms-item>
</uni-forms>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { ref, watch, computed, defineProps } from 'vue'
import peach from '@/peach'
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)
formData.value = newVal ?? {}
}, { immediate: true })
</script>
<style lang="scss" scoped>
.sku-item {
margin: 40rpx;
margin: 40rpx;
padding-top: 40rpx;
}
.sku-item:first-child {
border-top: 1px solid var(--ui-BG-Main);
}
</style>

22
pages/product/components/mutipleSku.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<view class="mutiple-sku">
<template v-for="item in props.skus">
<sku-item :skus="item">
</sku-item>
</template>
</view>
</template>
<script setup>
import SkuItem from './item'
import { defineProps } from 'vue'
const props = defineProps({
skus: {
type: Array,
default: () => []
}
})
</script>

26
pages/product/js/sku.js
View File

@ -6,6 +6,9 @@ import { SPEC_TYPE } from "./config";
const pickerRef = ref(null);
// 多属性商品 sku 列表
const skus = ref([]);
const propertyList = ref([]);
const goodsPropertyList = ref([]);
@ -29,22 +32,23 @@ function onRDPickerConfirm(e) {
}
function pickerProperty() {
let index = specType ? 1 : 0;
let index = specType.value ? 1 : 0;
pickerRef.value.onOpen([index]);
}
function onPropertyConfirm(e) {
getGoodsProperty();
async function onPropertyConfirm(e) {
await getGoodsProperty();
console.log(e);
}
async function getGoodsProperty() {
let { data } = await GoodsApi.getHistoryProperty();
propertyList.value = [];
// 把 propertyList 中 id 相同的属性合并，并去重
propertyList.value = peach.$store("trade").selectedProperty;
console.log(propertyList.value);
// 根据已经选择数据，设置默认选中
data.forEach((item) => {
// 判断属性是否已经选中
@ -58,7 +62,7 @@ async function getGoodsProperty() {
if (item.checked) {
item.propertyValues.forEach((child) => {
let childResult = propertyParent?.children.some(
(schild) => schild?.id === child.id
(schild) => schild === child.id
);
console.log(childResult);
child.checked = childResult ? true : false;
@ -69,18 +73,22 @@ async function getGoodsProperty() {
goodsPropertyList.value = data;
}
const specType = computed(() => peach.$store("trade").specType);
const specType = computed(() => peach.$store("trade").goodsInfo.specType);
function initial() {
onLoad(() => {
formData.value.specType = specType ? true : false;
formData.value.specText = SPEC_TYPE[specType ? 1 : 0].label;
getGoodsProperty();
formData.value.specType = specType.value ? true : false;
formData.value.specText = SPEC_TYPE[specType.value ? 1 : 0].label;
skus.value = peach.$store("trade").skus;
if (specType.value) {
getGoodsProperty();
}
});
}
export {
initial,
skus,
pickerRef,
pickerProperty,
propertyListRef,

1
pages/product/manageGoods.vue
View File

@ -245,6 +245,7 @@ function clickSetProperty() {
peach.$store('trade').$patch({
selectedProperty: result,
goodsInfo: formData.value,
skus: formData.value.skus
})
peach.$router.go('/pages/product/sku')
}

179
pages/product/sku.vue
View File

@ -1,79 +1,60 @@
<template>
<pb-layout
class="goods-property"
title="商品属性"
leftIcon="leftIcon"
navbar="normal"
:bgStyle="bgStyle"
opacityBgUi="bg-white"
color="black"
>
<view class="property">
<uni-forms ref="formRef" v-model="formData" :rules="rules" label-position="top" label-width="160">
<uni-forms-item label="商品规格" @tap="pickerProperty" name="specType" label-position="left" required>
<uni-easyinput
type="text"
:clearable="false"
:styles="selfStyles"
placeholderStyle="color:#8a8a8a"
:inputBorder="false"
v-model="formData.specText"
placeholder="请选择商品规格"
disabled
>
<template v-slot:right>
<uni-icons type="right" />
</template>
</uni-easyinput>
</uni-forms-item>
</uni-forms>
</view>
<template v-if="formData.specType">
<button class="ss-reset-button add-property" @tap="showPropertyList">+添加规格</button>
<property-detail
v-if="propertyList.length > 0"
v-model="propertyList"
:goodsPropertyList="goodsPropertyList"
></property-detail>
</template>
<pb-layout class="goods-property" title="商品属性" leftIcon="leftIcon" navbar="normal" :bgStyle="bgStyle"
opacityBgUi="bg-white" color="black">
<view class="property">
<uni-forms ref="formRef" v-model="formData" :rules="rules" label-position="top" label-width="160">
<uni-forms-item label="商品规格" @tap="pickerProperty" name="specType" label-position="left" required>
<uni-easyinput type="text" :clearable="false" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
:inputBorder="false" v-model="formData.specText" placeholder="请选择商品规格" disabled>
<template v-slot:right>
<uni-icons type="right" />
</template>
</uni-easyinput>
</uni-forms-item>
</uni-forms>
</view>
<template v-if="formData.specType">
<button class="ss-reset-button add-property" @tap="showPropertyList">+添加规格</button>
<property-detail v-if="propertyList.length > 0" v-model="propertyList"
:goodsPropertyList="goodsPropertyList"></property-detail>
<mutiple-sku :skus="skus"></mutiple-sku>
</template>
<template v-else>
<SkuItem />
</template>
<template v-else>
<SkuItem :skus="skus" />
</template>
<p-picker ref="pickerRef" mode="single" :options-cols="SPEC_TYPE" @confirm="onRDPickerConfirm"></p-picker>
<p-picker ref="pickerRef" mode="single" :options-cols="SPEC_TYPE" @confirm="onRDPickerConfirm"></p-picker>
<PropertyList
ref="propertyListRef"
v-model="propertyList"
:goodsPropertyList="goodsPropertyList"
@confirm="onPropertyConfirm"
/>
</pb-layout>
<PropertyList ref="propertyListRef" v-model="propertyList" :goodsPropertyList="goodsPropertyList"
@confirm="onPropertyConfirm" />
</pb-layout>
</template>
<script setup>
import SkuItem from './components/item'
import MutipleSku from './components/mutipleSku'
import PropertyList from './components/propertyList'
import PropertyDetail from './components/propertyDetail'
import { SPEC_TYPE } from './js/config'
import {
initial,
pickerRef,
propertyListRef,
onRDPickerConfirm,
formData,
propertyList,
onPropertyConfirm,
showPropertyList,
goodsPropertyList,
pickerProperty,
initial,
pickerRef,
propertyListRef,
onRDPickerConfirm,
formData,
propertyList,
onPropertyConfirm,
showPropertyList,
goodsPropertyList,
pickerProperty,
skus
} from './js/sku'
const bgStyle = {
backgroundImage: '',
backgroundColor: '#fff',
description: '',
backgroundImage: '',
backgroundColor: '#fff',
description: '',
}
initial()
@ -81,49 +62,49 @@ initial()
<style lang="scss" scoped>
.goods-property {
.property {
margin: 40rpx;
.property {
margin: 40rpx;
:deep() {
.uni-easyinput__content-input {
font-size: 28rpx !important;
color: #333333 !important;
line-height: normal !important;
}
:deep() {
.uni-easyinput__content-input {
font-size: 28rpx !important;
color: #333333 !important;
line-height: normal !important;
}
.uni-easyinput__placeholder-class {
font-size: 14px;
}
.uni-easyinput__placeholder-class {
font-size: 14px;
}
.is-direction-left {
.uni-forms-item__label {
padding-left: 10px;
background-color: #f9f9f9;
border-radius: 10px 0 0 10px;
}
uni-icons {
margin-right: 10px;
}
.uni-easyinput__content {
border-radius: 0 10px 10px 0;
}
}
.is-disabled {
color: #333333;
text-align: right;
}
.is-direction-left {
.uni-forms-item__label {
padding-left: 10px;
background-color: #f9f9f9;
border-radius: 10px 0 0 10px;
}
}
.add-property {
margin: 40rpx;
border: 1px dotted var(--ui-BG-Main);
color: var(--ui-BG-Main);
border-radius: 10px;
text-align: center;
uni-icons {
margin-right: 10px;
}
.uni-easyinput__content {
border-radius: 0 10px 10px 0;
}
}
.is-disabled {
color: #333333;
text-align: right;
}
}
}
.add-property {
margin: 40rpx;
border: 1px dotted var(--ui-BG-Main);
color: var(--ui-BG-Main);
border-radius: 10px;
text-align: center;
}
}
</style>

30
peach/store/trade.js
View File

@ -1,17 +1,21 @@
import { ref } from 'vue'
import { defineStore } from 'pinia'
import { ref } from "vue";
import { defineStore } from "pinia";
const useTradeStore = defineStore('trade', () => {
// 已选择规格类型
const selectedProperty = ref(null)
const useTradeStore = defineStore("trade", () => {
// 已选择规格类型
const selectedProperty = ref(null);
// 商品信息
const goodsInfo = ref(null)
// 商品信息
const goodsInfo = ref(null);
return {
selectedProperty,
goodsInfo,
}
})
// 商品属性
const skus = ref(null);
export default useTradeStore
return {
selectedProperty,
goodsInfo,
skus,
};
});
export default useTradeStore;

BIN
static/point.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
static/upload-camera.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.5 KiB