feat(商品属性): 多 sku

pages/product/components/item.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="sku-item">
-        <uni-forms label-width="160" label-position="top">
+    <uni-forms label-width="176rpx" label-position="left">
-            <uni-forms-item label="商品封面图" name="picUrl">
+
-                <p-uploader
+      <template v-if="specType">
-                    v-model:url="formData.picUrl"
+        <template v-for="item in formData.properties">
-                    fileMediatype="image"
+          <uni-forms-item :label="item.propertyName">
-                    limit="1"
+            <uni-easyinput type="text" :value="item.valueName" disabled />
-                    mode="grid"
+          </uni-forms-item>
-                    :imageStyles="{ width: '168rpx', height: '168rpx' }"
+        </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="请输入商品条码" />
@@ -36,13 +40,33 @@
 </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;
+  padding-top: 40rpx;
+}
+
+.sku-item:first-child {
+  border-top: 1px solid var(--ui-BG-Main);
+
 }
 </style>

pages/product/components/mutipleSku.vue

@@ -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>

pages/product/js/sku.js

@@ -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) {
+async function onPropertyConfirm(e) {
-  getGoodsProperty();
+  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.specType = specType.value ? true : false;
-    formData.value.specText = SPEC_TYPE[specType ? 1 : 0].label;
+    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,

pages/product/manageGoods.vue

@@ -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')
 }

pages/product/sku.vue

@@ -1,26 +1,11 @@
 <template>
-    <pb-layout
+  <pb-layout class="goods-property" title="商品属性" leftIcon="leftIcon" navbar="normal" :bgStyle="bgStyle"
-        class="goods-property"
+    opacityBgUi="bg-white" color="black">
-        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
+          <uni-easyinput type="text" :clearable="false" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
-                        type="text"
+            :inputBorder="false" v-model="formData.specText" placeholder="请选择商品规格" disabled>
-                        :clearable="false"
-                        :styles="selfStyles"
-                        placeholderStyle="color:#8a8a8a"
-                        :inputBorder="false"
-                        v-model="formData.specText"
-                        placeholder="请选择商品规格"
-                        disabled
-                    >
             <template v-slot:right>
               <uni-icons type="right" />
             </template>
@@ -30,30 +15,25 @@
     </view>
     <template v-if="formData.specType">
       <button class="ss-reset-button add-property" @tap="showPropertyList">+添加规格</button>
-            <property-detail
+      <property-detail v-if="propertyList.length > 0" v-model="propertyList"
-                v-if="propertyList.length > 0"
+        :goodsPropertyList="goodsPropertyList"></property-detail>
-                v-model="propertyList"
+      <mutiple-sku :skus="skus"></mutiple-sku>
-                :goodsPropertyList="goodsPropertyList"
-            ></property-detail>
     </template>
 
     <template v-else>
-            <SkuItem />
+      <SkuItem :skus="skus" />
     </template>
 
     <p-picker ref="pickerRef" mode="single" :options-cols="SPEC_TYPE" @confirm="onRDPickerConfirm"></p-picker>
 
-        <PropertyList
+    <PropertyList ref="propertyListRef" v-model="propertyList" :goodsPropertyList="goodsPropertyList"
-            ref="propertyListRef"
+      @confirm="onPropertyConfirm" />
-            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'
@@ -68,6 +48,7 @@ import {
   showPropertyList,
   goodsPropertyList,
   pickerProperty,
+  skus
 } from './js/sku'
 
 const bgStyle = {

peach/store/trade.js

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